diff --git a/.changeset/neat-ducks-wish.md b/.changeset/neat-ducks-wish.md
new file mode 100644
index 0000000000..2568e438c9
--- /dev/null
+++ b/.changeset/neat-ducks-wish.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+Improve class name structure using data attributes instead of class names.
diff --git a/.changeset/rich-phones-whisper.md b/.changeset/rich-phones-whisper.md
new file mode 100644
index 0000000000..75f0fc0c35
--- /dev/null
+++ b/.changeset/rich-phones-whisper.md
@@ -0,0 +1,5 @@
+---
+'@backstage/repo-tools': patch
+---
+
+Checking up the files where `createRouter` has been declared and check if `@deprecated` tag exists. If it does not exist then only the message will appear.
diff --git a/canon-docs/public/css-classname-structure.png b/canon-docs/public/css-classname-structure.png
new file mode 100644
index 0000000000..df9894ff2b
Binary files /dev/null and b/canon-docs/public/css-classname-structure.png differ
diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx
index e3fc42da44..665755c268 100644
--- a/canon-docs/src/app/(docs)/theme/theming/page.mdx
+++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx
@@ -29,8 +29,100 @@ Here's an example of how your theme.css file should look like:
 
 <CodeBlock lang="css" code={customTheme} />
 
+## CSS class name structure
+
+All Canon components come with a set of CSS classes that you can use to style them. To make it
+easier to identify the class name you can use, we use a specific structure for the class names.
+
+<img
+  src="/css-classname-structure.png"
+  style={{ width: '100%', marginBottom: '32px', marginTop: '16px' }}
+/>
+
+Every component has a unique prefix `.canon-` followed by the component name. Component props
+are represented using the `data-` attribute. That way, class names are easily identifiable.
+
 ## Available CSS variables
 
+### Base colors
+
+These colors are used for special purposes like ring, scrollbar, ...
+
+<Table.Root>
+  <Table.Header>
+    <Table.HeaderRow>
+      <Table.HeaderCell>Prop</Table.HeaderCell>
+      <Table.HeaderCell>Description</Table.HeaderCell>
+    </Table.HeaderRow>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-black</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        Pure black color. This one should be the same in light and dark themes.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-white</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        Pure white color. This one should be the same in light and dark themes.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-1</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-2</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-3</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-4</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-5</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-6</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-7</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-8</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table.Root>
+
 ### Core background colors
 
 These colors are used for the background of your application. We are mostly using for now a
@@ -57,98 +149,60 @@ color of your app.
       </Table.Cell>
       <Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
     </Table.Row>
-  </Table.Body>
-</Table.Root>
-
-### Component background colors
-
-These colors are meants for interactive components like buttons, callout avatar, chips, ...
-We have two main level of background you can customise. The accent one is mostly used as a primary option
-for interactive components. The tint one is used for secondary components like callouts, avatars, ...
-
-<Table.Root>
-  <Table.Header>
-    <Table.HeaderRow>
-      <Table.HeaderCell>Prop</Table.HeaderCell>
-      <Table.HeaderCell>Description</Table.HeaderCell>
-    </Table.HeaderRow>
-  </Table.Header>
-  <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-accent</Chip>
+        <Chip head>--canon-bg-surface-2</Chip>
       </Table.Cell>
-      <Table.Cell>Used mostly for primary interactive components.</Table.Cell>
+      <Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-accent-hover</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        Used for interactive components when they are hovered.
+        <Chip head>--canon-bg-solid</Chip>
       </Table.Cell>
+      <Table.Cell>Used for solid background colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-accent-focus</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        Used for interactive components when they are in focus.
+        <Chip head>--canon-bg-solid-hover</Chip>
       </Table.Cell>
+      <Table.Cell>Used for solid background colors when hovered.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-accent-disabled</Chip>
+        <Chip head>--canon-bg-solid-pressed</Chip>
       </Table.Cell>
+      <Table.Cell>Used for solid background colors when pressed.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
       <Table.Cell>
-        Used for interactive components when they are disabled.
+        <Chip head>--canon-bg-solid-disabled</Chip>
       </Table.Cell>
+      <Table.Cell>Used for solid background colors when disabled.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-bg-tint</Chip>
       </Table.Cell>
-      <Table.Cell>Used for secondary interactive components.</Table.Cell>
+      <Table.Cell>Used for tint background colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-bg-tint-hover</Chip>
       </Table.Cell>
-      <Table.Cell>
-        Used for interactive components when they are hovered.
-      </Table.Cell>
+      <Table.Cell>Used for tint background colors when hovered.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-bg-tint-focus</Chip>
       </Table.Cell>
-      <Table.Cell>
-        Used for interactive components when they are active.
-      </Table.Cell>
+      <Table.Cell>Used for tint background colors when active.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-bg-tint-disabled</Chip>
       </Table.Cell>
-      <Table.Cell>
-        Used for interactive components when they are disabled.
-      </Table.Cell>
+      <Table.Cell>Used for tint background colors when disabled.</Table.Cell>
     </Table.Row>
-  </Table.Body>
-</Table.Root>
-
-### Status background colors
-
-These backgrounds are intended for non-interactive elements to visually convey a specific state.
-
-<Table.Root>
-  <Table.Header>
-    <Table.HeaderRow>
-      <Table.HeaderCell>Prop</Table.HeaderCell>
-      <Table.HeaderCell>Description</Table.HeaderCell>
-    </Table.HeaderRow>
-  </Table.Header>
-  <Table.Body>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-bg-danger</Chip>
@@ -189,7 +243,7 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-primary</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
+        It should be used on top of main background surfaces.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
@@ -197,7 +251,7 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-secondary</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
+        It should be used on top of main background surfaces.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
@@ -205,7 +259,7 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-link</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
+        It should be used on top of main background surfaces.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
@@ -213,38 +267,64 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-link-hover</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
+        It should be used on top of main background surfaces.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-accent</Chip>
+        <Chip head>--canon-fg-disabled</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        It should be used on top of main background surfaces.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-fg-solid</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        It should be used on top of solid background colors.
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-accent`.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-fg-tint</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-tint`.</Table.Cell>
+      <Table.Cell>
+        It should be used on top of tint background colors.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-fg-tint-disabled</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        It should be used on top of tint background colors when disabled.
+      </Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-fg-danger</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-danger`.</Table.Cell>
+      <Table.Cell>
+        It should be used on top of danger background colors.
+      </Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-fg-warning</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-warning`.</Table.Cell>
+      <Table.Cell>
+        It should be used on top of warning background colors.
+      </Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-fg-success</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-success`.</Table.Cell>
+      <Table.Cell>
+        It should be used on top of success background colors.
+      </Table.Cell>
     </Table.Row>
   </Table.Body>
 </Table.Root>
@@ -288,21 +368,9 @@ low contrast to help as a separator with the different background colors.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-border-tint</Chip>
+        <Chip head>--canon-border-disabled</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-tint`.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-border-tint-hover</Chip>
-      </Table.Cell>
-      <Table.Cell>Used when the component is hovered.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-border-tint-focus</Chip>
-      </Table.Cell>
-      <Table.Cell>Used when the component is in focus.</Table.Cell>
+      <Table.Cell>Used when the component is disabled.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
@@ -325,7 +393,40 @@ low contrast to help as a separator with the different background colors.
   </Table.Body>
 </Table.Root>
 
-## Font families
+### Special colors
+
+These colors are used for special purposes like ring, scrollbar, ...
+
+<Table.Root>
+  <Table.Header>
+    <Table.HeaderRow>
+      <Table.HeaderCell>Prop</Table.HeaderCell>
+      <Table.HeaderCell>Description</Table.HeaderCell>
+    </Table.HeaderRow>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-ring</Chip>
+      </Table.Cell>
+      <Table.Cell>The color of the ring.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-scrollbar</Chip>
+      </Table.Cell>
+      <Table.Cell>The color of the scrollbar.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-scrollbar-thumb</Chip>
+      </Table.Cell>
+      <Table.Cell>The color of the scrollbar thumb.</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table.Root>
+
+### Font families
 
 We have two fonts that we use across Canon. The first one is the sans-serif
 font that we use for the body of the application. The second one is the
@@ -354,9 +455,9 @@ monospace font that we use for code blocks and tables.
   </Table.Body>
 </Table.Root>
 
-## Font weights
+### Font weights
 
-We have two font weights that we use across Canon. Regular or Bold
+We have two font weights that we use across Canon. Regular or Bold.
 
 <Table.Root>
   <Table.Header>
@@ -381,7 +482,7 @@ We have two font weights that we use across Canon. Regular or Bold
   </Table.Body>
 </Table.Root>
 
-## Spacing
+### Spacing
 
 We built a spacing system based on a single value `--canon-space`. This value is
 used to calculate the spacing for all the components. By default if you would like to
@@ -520,18 +621,9 @@ tokens for pretty much each spacing properties like padding, margin, gaps, ...
   </Table.Body>
 </Table.Root>
 
-### Radius (Work in progress)
+### Radius
 
-Our radius system is a little bit different from spacing as we use a factor to calculate the radius values.
-Under the hood different components uses different radius values. For example, button can be set to have full radius  
-while a checkbox will have to remain a square.
-
-Here are the different radius factor we recommend to use
-
-- None: `0`
-- Small: `0.75`
-- Medium: `1`
-- Large: `1.5`
+We use a radius system to make sure that the components have a consistent look and feel.
 
 <Table.Root>
   <Table.Header>
@@ -543,9 +635,59 @@ Here are the different radius factor we recommend to use
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-radius-factor</Chip>
+        <Chip head>--canon-radius-1</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `0.125rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-2</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `0.25rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-3</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `0.5rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-4</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `0.75rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-5</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `1rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-6</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `1.25rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-full</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `9999px`.
       </Table.Cell>
-      <Table.Cell>By default the value is set to medium `1`.</Table.Cell>
     </Table.Row>
   </Table.Body>
 </Table.Root>
diff --git a/packages/canon/css/button.css b/packages/canon/css/button.css
index 312f58c5e6..eb0c44ce1b 100644
--- a/packages/canon/css/button.css
+++ b/packages/canon/css/button.css
@@ -16,7 +16,7 @@
   }
 }
 
-.canon-Button--variant-primary {
+.canon-Button[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -40,7 +40,7 @@
   }
 }
 
-.canon-Button--variant-secondary {
+.canon-Button[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -66,24 +66,24 @@
   }
 }
 
-.canon-Button--size-medium {
+.canon-Button[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
   height: 40px;
 }
 
-.canon-Button--size-small {
+.canon-Button[data-size="small"] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
   height: 32px;
 }
 
-.canon-Button--size-small .canon-Button--icon {
+.canon-Button[data-size="small"] .canon-ButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button--size-medium .canon-Button--icon {
+.canon-Button[data-size="medium"] .canon-ButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index af4ea8c4f0..bb1ba10018 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -22,7 +22,7 @@
   }
 }
 
-.canon-Button--variant-primary {
+.canon-Button[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -46,7 +46,7 @@
   }
 }
 
-.canon-Button--variant-secondary {
+.canon-Button[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -72,24 +72,24 @@
   }
 }
 
-.canon-Button--size-medium {
+.canon-Button[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
   height: 40px;
 }
 
-.canon-Button--size-small {
+.canon-Button[data-size="small"] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
   height: 32px;
 }
 
-.canon-Button--size-small .canon-Button--icon {
+.canon-Button[data-size="small"] .canon-ButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button--size-medium .canon-Button--icon {
+.canon-Button[data-size="medium"] .canon-ButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -248,56 +248,55 @@
 
 .canon-Text {
   font-family: var(--canon-font-regular);
-  color: var(--canon-fg-primary);
   margin: 0;
   padding: 0;
 }
 
-.canon-Text--variant-body {
+.canon-Text[data-variant="body"] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Text--variant-subtitle {
+.canon-Text[data-variant="subtitle"] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Text--variant-caption {
+.canon-Text[data-variant="caption"] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Text--variant-label {
+.canon-Text[data-variant="label"] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Text--weight-regular {
+.canon-Text[data-weight="regular"] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Text--weight-bold {
+.canon-Text[data-weight="bold"] {
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Text--color-primary {
+.canon-Text[data-color="primary"] {
   color: var(--canon-fg-primary);
 }
 
-.canon-Text--color-secondary {
+.canon-Text[data-color="secondary"] {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Text--color-danger {
+.canon-Text[data-color="danger"] {
   color: var(--canon-fg-danger);
 }
 
-.canon-Text--color-warning {
+.canon-Text[data-color="warning"] {
   color: var(--canon-fg-warning);
 }
 
-.canon-Text--color-success {
+.canon-Text[data-color="success"] {
   color: var(--canon-fg-success);
 }
 
@@ -309,32 +308,32 @@
   line-height: 100%;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant="display"] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant="title1"] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant="title2"] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant="title3"] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant="title4"] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant="title5"] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
@@ -357,7 +356,7 @@
   }
 }
 
-.canon-IconButton--variant-primary {
+.canon-IconButton[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -381,7 +380,7 @@
   }
 }
 
-.canon-IconButton--variant-secondary {
+.canon-IconButton[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -407,24 +406,24 @@
   }
 }
 
-.canon-IconButton--size-medium {
+.canon-IconButton[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   width: 40px;
   height: 40px;
 }
 
-.canon-IconButton--size-small {
+.canon-IconButton[data-size="small"] {
   font-size: var(--canon-font-size-3);
   width: 32px;
   height: 32px;
 }
 
-.canon-IconButton--size-small .canon-IconButton--icon {
+.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton--size-medium .canon-IconButton--icon {
+.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -436,14 +435,14 @@
   display: flex;
 }
 
-.canon-TextField--label {
+.canon-TextFieldLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-TextField--description {
+.canon-TextFieldDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -451,7 +450,7 @@
   margin: 0;
 }
 
-.canon-TextField--error {
+.canon-TextFieldError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -459,7 +458,7 @@
   margin: 0;
 }
 
-.canon-TextField--input {
+.canon-TextFieldInput {
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
   padding: 0 var(--canon-space-4);
@@ -472,39 +471,39 @@
   transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
 }
 
-.canon-TextField--input::placeholder {
+.canon-TextFieldInput::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-TextField--input:hover {
+.canon-TextFieldInput:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-TextField--input:focus-visible {
+.canon-TextFieldInput:focus-visible {
   outline-color: var(--canon-border-pressed);
   border-color: var(--canon-border-pressed);
   outline-width: 0;
 }
 
-.canon-TextField--input[data-invalid] {
+.canon-TextFieldInput[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-TextField--input[data-disabled] {
+.canon-TextFieldInput[data-disabled] {
   opacity: .5;
   cursor: not-allowed;
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input-size-small {
+.canon-TextFieldInput[data-size="small"] {
   height: 2rem;
 }
 
-.canon-TextField--input-size-medium {
+.canon-TextFieldInput[data-size="medium"] {
   height: 2.5rem;
 }
 
-.canon-TextField--required {
+.canon-TextFieldRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
@@ -581,31 +580,31 @@
   }
 }
 
-.canon-Link--variant-body {
+.canon-Link[data-variant="body"] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Link--variant-subtitle {
+.canon-Link[data-variant="subtitle"] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Link--variant-caption {
+.canon-Link[data-variant="caption"] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Link--variant-label {
+.canon-Link[data-variant="label"] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Link--weight-regular {
+.canon-Link[data-weight="regular"] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Link--weight-bold {
+.canon-Link[data-weight="bold"] {
   font-weight: var(--canon-font-weight-bold);
 }
 
@@ -729,14 +728,14 @@
   display: flex;
 }
 
-.canon-Select--label {
+.canon-SelectLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-Select--description {
+.canon-SelectDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -744,7 +743,7 @@
   margin: 0;
 }
 
-.canon-Select--error {
+.canon-SelectError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -752,7 +751,7 @@
   margin: 0;
 }
 
-.canon-Select--trigger {
+.canon-SelectTrigger {
   box-sizing: border-box;
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
@@ -771,38 +770,38 @@
   display: flex;
 }
 
-.canon-Select--trigger::placeholder {
+.canon-SelectTrigger::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Select--trigger:hover {
+.canon-SelectTrigger:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-Select--trigger:focus-visible {
+.canon-SelectTrigger:focus-visible {
   border-color: var(--canon-border-pressed);
   outline: 0;
 }
 
-.canon-Select--trigger[data-invalid] {
+.canon-SelectTrigger[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible {
+.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
   border-width: 2px;
 }
 
-.canon-Select--trigger[data-disabled] {
+.canon-SelectTrigger[data-disabled] {
   cursor: not-allowed;
   border-color: var(--canon-border-disabled);
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger-size-small {
+.canon-SelectTrigger[data-size="small"] {
   height: 2rem;
 }
 
-.canon-Select--trigger-size-medium {
+.canon-SelectTrigger[data-size="medium"] {
   height: 3rem;
 }
 
@@ -811,11 +810,11 @@
   transition: transform .2s;
 }
 
-.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
+.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
   transform: rotate(180deg);
 }
 
-.canon-Select--popup {
+.canon-SelectPopup {
   box-sizing: border-box;
   max-height: var(--available-height);
   background-color: var(--canon-bg-surface-1);
@@ -830,12 +829,12 @@
   box-shadow: 0 4px 12px #0003;
 }
 
-.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] {
+.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
   opacity: 0;
   transform: scale(.9);
 }
 
-.canon-Select--item {
+.canon-SelectItem {
   width: var(--anchor-width);
   padding-block: var(--canon-space-2);
   padding-inline: var(--canon-space-4);
@@ -853,13 +852,13 @@
   position: relative;
 }
 
-.canon-Select--item[data-highlighted] {
+.canon-SelectItem[data-highlighted] {
   z-index: 0;
   color: var(--canon-fg-primary);
   position: relative;
 }
 
-.canon-Select--item[data-highlighted]:before {
+.canon-SelectItem[data-highlighted]:before {
   content: "";
   z-index: -1;
   background-color: var(--canon-bg-tint-hover);
@@ -869,37 +868,37 @@
   inset-inline: .25rem;
 }
 
-.canon-Select--item[data-disabled] {
+.canon-SelectItem[data-disabled] {
   cursor: not-allowed;
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--item-indicator {
+.canon-SelectItemIndicator {
   grid-area: icon;
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--item-text {
+.canon-SelectItemText {
   flex: 1;
   grid-area: text;
 }
 
-.canon-Select--required {
+.canon-SelectRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   margin-left: var(--canon-space-1);
 }
 
-.canon-Select--icon {
+.canon-SelectIcon {
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--value {
+.canon-SelectValue {
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
diff --git a/packages/canon/css/heading.css b/packages/canon/css/heading.css
index 615e7a6e8b..f1bea873b4 100644
--- a/packages/canon/css/heading.css
+++ b/packages/canon/css/heading.css
@@ -6,32 +6,32 @@
   line-height: 100%;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant="display"] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant="title1"] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant="title2"] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant="title3"] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant="title4"] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant="title5"] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/css/iconbutton.css b/packages/canon/css/iconbutton.css
index 7853c59770..e867a1848e 100644
--- a/packages/canon/css/iconbutton.css
+++ b/packages/canon/css/iconbutton.css
@@ -16,7 +16,7 @@
   }
 }
 
-.canon-IconButton--variant-primary {
+.canon-IconButton[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -40,7 +40,7 @@
   }
 }
 
-.canon-IconButton--variant-secondary {
+.canon-IconButton[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -66,24 +66,24 @@
   }
 }
 
-.canon-IconButton--size-medium {
+.canon-IconButton[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   width: 40px;
   height: 40px;
 }
 
-.canon-IconButton--size-small {
+.canon-IconButton[data-size="small"] {
   font-size: var(--canon-font-size-3);
   width: 32px;
   height: 32px;
 }
 
-.canon-IconButton--size-small .canon-IconButton--icon {
+.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton--size-medium .canon-IconButton--icon {
+.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/css/link.css b/packages/canon/css/link.css
index ddc47c5d04..535beb3d9f 100644
--- a/packages/canon/css/link.css
+++ b/packages/canon/css/link.css
@@ -16,30 +16,30 @@
   }
 }
 
-.canon-Link--variant-body {
+.canon-Link[data-variant="body"] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Link--variant-subtitle {
+.canon-Link[data-variant="subtitle"] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Link--variant-caption {
+.canon-Link[data-variant="caption"] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Link--variant-label {
+.canon-Link[data-variant="label"] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Link--weight-regular {
+.canon-Link[data-weight="regular"] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Link--weight-bold {
+.canon-Link[data-weight="bold"] {
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/css/select.css b/packages/canon/css/select.css
index 29494c634a..cf8c05622b 100644
--- a/packages/canon/css/select.css
+++ b/packages/canon/css/select.css
@@ -5,14 +5,14 @@
   display: flex;
 }
 
-.canon-Select--label {
+.canon-SelectLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-Select--description {
+.canon-SelectDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -20,7 +20,7 @@
   margin: 0;
 }
 
-.canon-Select--error {
+.canon-SelectError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -28,7 +28,7 @@
   margin: 0;
 }
 
-.canon-Select--trigger {
+.canon-SelectTrigger {
   box-sizing: border-box;
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
@@ -47,38 +47,38 @@
   display: flex;
 }
 
-.canon-Select--trigger::placeholder {
+.canon-SelectTrigger::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Select--trigger:hover {
+.canon-SelectTrigger:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-Select--trigger:focus-visible {
+.canon-SelectTrigger:focus-visible {
   border-color: var(--canon-border-pressed);
   outline: 0;
 }
 
-.canon-Select--trigger[data-invalid] {
+.canon-SelectTrigger[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible {
+.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
   border-width: 2px;
 }
 
-.canon-Select--trigger[data-disabled] {
+.canon-SelectTrigger[data-disabled] {
   cursor: not-allowed;
   border-color: var(--canon-border-disabled);
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger-size-small {
+.canon-SelectTrigger[data-size="small"] {
   height: 2rem;
 }
 
-.canon-Select--trigger-size-medium {
+.canon-SelectTrigger[data-size="medium"] {
   height: 3rem;
 }
 
@@ -87,11 +87,11 @@
   transition: transform .2s;
 }
 
-.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
+.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
   transform: rotate(180deg);
 }
 
-.canon-Select--popup {
+.canon-SelectPopup {
   box-sizing: border-box;
   max-height: var(--available-height);
   background-color: var(--canon-bg-surface-1);
@@ -106,12 +106,12 @@
   box-shadow: 0 4px 12px #0003;
 }
 
-.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] {
+.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
   opacity: 0;
   transform: scale(.9);
 }
 
-.canon-Select--item {
+.canon-SelectItem {
   width: var(--anchor-width);
   padding-block: var(--canon-space-2);
   padding-inline: var(--canon-space-4);
@@ -129,13 +129,13 @@
   position: relative;
 }
 
-.canon-Select--item[data-highlighted] {
+.canon-SelectItem[data-highlighted] {
   z-index: 0;
   color: var(--canon-fg-primary);
   position: relative;
 }
 
-.canon-Select--item[data-highlighted]:before {
+.canon-SelectItem[data-highlighted]:before {
   content: "";
   z-index: -1;
   background-color: var(--canon-bg-tint-hover);
@@ -145,37 +145,37 @@
   inset-inline: .25rem;
 }
 
-.canon-Select--item[data-disabled] {
+.canon-SelectItem[data-disabled] {
   cursor: not-allowed;
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--item-indicator {
+.canon-SelectItemIndicator {
   grid-area: icon;
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--item-text {
+.canon-SelectItemText {
   flex: 1;
   grid-area: text;
 }
 
-.canon-Select--required {
+.canon-SelectRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   margin-left: var(--canon-space-1);
 }
 
-.canon-Select--icon {
+.canon-SelectIcon {
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--value {
+.canon-SelectValue {
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 2230922917..473b8f5d45 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9246,7 +9246,7 @@
   }
 }
 
-.canon-Button--variant-primary {
+.canon-Button[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -9270,7 +9270,7 @@
   }
 }
 
-.canon-Button--variant-secondary {
+.canon-Button[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -9296,24 +9296,24 @@
   }
 }
 
-.canon-Button--size-medium {
+.canon-Button[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
   height: 40px;
 }
 
-.canon-Button--size-small {
+.canon-Button[data-size="small"] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
   height: 32px;
 }
 
-.canon-Button--size-small .canon-Button--icon {
+.canon-Button[data-size="small"] .canon-ButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button--size-medium .canon-Button--icon {
+.canon-Button[data-size="medium"] .canon-ButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -9472,56 +9472,55 @@
 
 .canon-Text {
   font-family: var(--canon-font-regular);
-  color: var(--canon-fg-primary);
   margin: 0;
   padding: 0;
 }
 
-.canon-Text--variant-body {
+.canon-Text[data-variant="body"] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Text--variant-subtitle {
+.canon-Text[data-variant="subtitle"] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Text--variant-caption {
+.canon-Text[data-variant="caption"] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Text--variant-label {
+.canon-Text[data-variant="label"] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Text--weight-regular {
+.canon-Text[data-weight="regular"] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Text--weight-bold {
+.canon-Text[data-weight="bold"] {
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Text--color-primary {
+.canon-Text[data-color="primary"] {
   color: var(--canon-fg-primary);
 }
 
-.canon-Text--color-secondary {
+.canon-Text[data-color="secondary"] {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Text--color-danger {
+.canon-Text[data-color="danger"] {
   color: var(--canon-fg-danger);
 }
 
-.canon-Text--color-warning {
+.canon-Text[data-color="warning"] {
   color: var(--canon-fg-warning);
 }
 
-.canon-Text--color-success {
+.canon-Text[data-color="success"] {
   color: var(--canon-fg-success);
 }
 
@@ -9533,32 +9532,32 @@
   line-height: 100%;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant="display"] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant="title1"] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant="title2"] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant="title3"] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant="title4"] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant="title5"] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
@@ -9581,7 +9580,7 @@
   }
 }
 
-.canon-IconButton--variant-primary {
+.canon-IconButton[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -9605,7 +9604,7 @@
   }
 }
 
-.canon-IconButton--variant-secondary {
+.canon-IconButton[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -9631,24 +9630,24 @@
   }
 }
 
-.canon-IconButton--size-medium {
+.canon-IconButton[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   width: 40px;
   height: 40px;
 }
 
-.canon-IconButton--size-small {
+.canon-IconButton[data-size="small"] {
   font-size: var(--canon-font-size-3);
   width: 32px;
   height: 32px;
 }
 
-.canon-IconButton--size-small .canon-IconButton--icon {
+.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton--size-medium .canon-IconButton--icon {
+.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -9660,14 +9659,14 @@
   display: flex;
 }
 
-.canon-TextField--label {
+.canon-TextFieldLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-TextField--description {
+.canon-TextFieldDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -9675,7 +9674,7 @@
   margin: 0;
 }
 
-.canon-TextField--error {
+.canon-TextFieldError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -9683,7 +9682,7 @@
   margin: 0;
 }
 
-.canon-TextField--input {
+.canon-TextFieldInput {
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
   padding: 0 var(--canon-space-4);
@@ -9696,39 +9695,39 @@
   transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
 }
 
-.canon-TextField--input::placeholder {
+.canon-TextFieldInput::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-TextField--input:hover {
+.canon-TextFieldInput:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-TextField--input:focus-visible {
+.canon-TextFieldInput:focus-visible {
   outline-color: var(--canon-border-pressed);
   border-color: var(--canon-border-pressed);
   outline-width: 0;
 }
 
-.canon-TextField--input[data-invalid] {
+.canon-TextFieldInput[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-TextField--input[data-disabled] {
+.canon-TextFieldInput[data-disabled] {
   opacity: .5;
   cursor: not-allowed;
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input-size-small {
+.canon-TextFieldInput[data-size="small"] {
   height: 2rem;
 }
 
-.canon-TextField--input-size-medium {
+.canon-TextFieldInput[data-size="medium"] {
   height: 2.5rem;
 }
 
-.canon-TextField--required {
+.canon-TextFieldRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
@@ -9805,31 +9804,31 @@
   }
 }
 
-.canon-Link--variant-body {
+.canon-Link[data-variant="body"] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Link--variant-subtitle {
+.canon-Link[data-variant="subtitle"] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Link--variant-caption {
+.canon-Link[data-variant="caption"] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Link--variant-label {
+.canon-Link[data-variant="label"] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Link--weight-regular {
+.canon-Link[data-weight="regular"] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Link--weight-bold {
+.canon-Link[data-weight="bold"] {
   font-weight: var(--canon-font-weight-bold);
 }
 
@@ -9953,14 +9952,14 @@
   display: flex;
 }
 
-.canon-Select--label {
+.canon-SelectLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-Select--description {
+.canon-SelectDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -9968,7 +9967,7 @@
   margin: 0;
 }
 
-.canon-Select--error {
+.canon-SelectError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -9976,7 +9975,7 @@
   margin: 0;
 }
 
-.canon-Select--trigger {
+.canon-SelectTrigger {
   box-sizing: border-box;
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
@@ -9995,38 +9994,38 @@
   display: flex;
 }
 
-.canon-Select--trigger::placeholder {
+.canon-SelectTrigger::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Select--trigger:hover {
+.canon-SelectTrigger:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-Select--trigger:focus-visible {
+.canon-SelectTrigger:focus-visible {
   border-color: var(--canon-border-pressed);
   outline: 0;
 }
 
-.canon-Select--trigger[data-invalid] {
+.canon-SelectTrigger[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible {
+.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
   border-width: 2px;
 }
 
-.canon-Select--trigger[data-disabled] {
+.canon-SelectTrigger[data-disabled] {
   cursor: not-allowed;
   border-color: var(--canon-border-disabled);
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger-size-small {
+.canon-SelectTrigger[data-size="small"] {
   height: 2rem;
 }
 
-.canon-Select--trigger-size-medium {
+.canon-SelectTrigger[data-size="medium"] {
   height: 3rem;
 }
 
@@ -10035,11 +10034,11 @@
   transition: transform .2s;
 }
 
-.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
+.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
   transform: rotate(180deg);
 }
 
-.canon-Select--popup {
+.canon-SelectPopup {
   box-sizing: border-box;
   max-height: var(--available-height);
   background-color: var(--canon-bg-surface-1);
@@ -10054,12 +10053,12 @@
   box-shadow: 0 4px 12px #0003;
 }
 
-.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] {
+.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
   opacity: 0;
   transform: scale(.9);
 }
 
-.canon-Select--item {
+.canon-SelectItem {
   width: var(--anchor-width);
   padding-block: var(--canon-space-2);
   padding-inline: var(--canon-space-4);
@@ -10077,13 +10076,13 @@
   position: relative;
 }
 
-.canon-Select--item[data-highlighted] {
+.canon-SelectItem[data-highlighted] {
   z-index: 0;
   color: var(--canon-fg-primary);
   position: relative;
 }
 
-.canon-Select--item[data-highlighted]:before {
+.canon-SelectItem[data-highlighted]:before {
   content: "";
   z-index: -1;
   background-color: var(--canon-bg-tint-hover);
@@ -10093,37 +10092,37 @@
   inset-inline: .25rem;
 }
 
-.canon-Select--item[data-disabled] {
+.canon-SelectItem[data-disabled] {
   cursor: not-allowed;
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--item-indicator {
+.canon-SelectItemIndicator {
   grid-area: icon;
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--item-text {
+.canon-SelectItemText {
   flex: 1;
   grid-area: text;
 }
 
-.canon-Select--required {
+.canon-SelectRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   margin-left: var(--canon-space-1);
 }
 
-.canon-Select--icon {
+.canon-SelectIcon {
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--value {
+.canon-SelectValue {
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
diff --git a/packages/canon/css/text.css b/packages/canon/css/text.css
index faa16c7f40..523574f779 100644
--- a/packages/canon/css/text.css
+++ b/packages/canon/css/text.css
@@ -1,54 +1,53 @@
 .canon-Text {
   font-family: var(--canon-font-regular);
-  color: var(--canon-fg-primary);
   margin: 0;
   padding: 0;
 }
 
-.canon-Text--variant-body {
+.canon-Text[data-variant="body"] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Text--variant-subtitle {
+.canon-Text[data-variant="subtitle"] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Text--variant-caption {
+.canon-Text[data-variant="caption"] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Text--variant-label {
+.canon-Text[data-variant="label"] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Text--weight-regular {
+.canon-Text[data-weight="regular"] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Text--weight-bold {
+.canon-Text[data-weight="bold"] {
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Text--color-primary {
+.canon-Text[data-color="primary"] {
   color: var(--canon-fg-primary);
 }
 
-.canon-Text--color-secondary {
+.canon-Text[data-color="secondary"] {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Text--color-danger {
+.canon-Text[data-color="danger"] {
   color: var(--canon-fg-danger);
 }
 
-.canon-Text--color-warning {
+.canon-Text[data-color="warning"] {
   color: var(--canon-fg-warning);
 }
 
-.canon-Text--color-success {
+.canon-Text[data-color="success"] {
   color: var(--canon-fg-success);
 }
diff --git a/packages/canon/css/textfield.css b/packages/canon/css/textfield.css
index a542690580..bf21b3bd74 100644
--- a/packages/canon/css/textfield.css
+++ b/packages/canon/css/textfield.css
@@ -5,14 +5,14 @@
   display: flex;
 }
 
-.canon-TextField--label {
+.canon-TextFieldLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-TextField--description {
+.canon-TextFieldDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -20,7 +20,7 @@
   margin: 0;
 }
 
-.canon-TextField--error {
+.canon-TextFieldError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -28,7 +28,7 @@
   margin: 0;
 }
 
-.canon-TextField--input {
+.canon-TextFieldInput {
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
   padding: 0 var(--canon-space-4);
@@ -41,39 +41,39 @@
   transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
 }
 
-.canon-TextField--input::placeholder {
+.canon-TextFieldInput::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-TextField--input:hover {
+.canon-TextFieldInput:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-TextField--input:focus-visible {
+.canon-TextFieldInput:focus-visible {
   outline-color: var(--canon-border-pressed);
   border-color: var(--canon-border-pressed);
   outline-width: 0;
 }
 
-.canon-TextField--input[data-invalid] {
+.canon-TextFieldInput[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-TextField--input[data-disabled] {
+.canon-TextFieldInput[data-disabled] {
   opacity: .5;
   cursor: not-allowed;
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input-size-small {
+.canon-TextFieldInput[data-size="small"] {
   height: 2rem;
 }
 
-.canon-TextField--input-size-medium {
+.canon-TextFieldInput[data-size="medium"] {
   height: 2.5rem;
 }
 
-.canon-TextField--required {
+.canon-TextFieldRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index 179c35323a..ca652013b4 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -44,18 +44,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <button
         ref={ref}
         disabled={disabled}
-        className={clsx(
-          'canon-Button',
-          `canon-Button--size-${responsiveSize}`,
-          `canon-Button--variant-${responsiveVariant}`,
-          className,
-        )}
+        className={clsx('canon-Button', className)}
+        data-size={responsiveSize}
+        data-variant={responsiveVariant}
         style={style}
         {...rest}
       >
-        {iconStart && <Icon name={iconStart} className="canon-Button--icon" />}
+        {iconStart && <Icon name={iconStart} className="canon-ButtonIcon" />}
         {children}
-        {iconEnd && <Icon name={iconEnd} className="canon-Button--icon" />}
+        {iconEnd && <Icon name={iconEnd} className="canon-ButtonIcon" />}
       </button>
     );
   },
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index b5d6e1dca0..785fbf3b88 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -32,7 +32,7 @@
   }
 }
 
-.canon-Button--variant-primary {
+.canon-Button[data-variant='primary'] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color 150ms ease, box-shadow 150ms ease;
@@ -56,7 +56,7 @@
   }
 }
 
-.canon-Button--variant-secondary {
+.canon-Button[data-variant='secondary'] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -82,24 +82,24 @@
   }
 }
 
-.canon-Button--size-medium {
+.canon-Button[data-size='medium'] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
   height: 40px;
 }
 
-.canon-Button--size-small {
+.canon-Button[data-size='small'] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
   height: 32px;
 }
 
-.canon-Button--size-small .canon-Button--icon {
+.canon-Button[data-size='small'] .canon-ButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button--size-medium .canon-Button--icon {
+.canon-Button[data-size='medium'] .canon-ButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index 5fe69bbc57..994b1de06e 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -45,11 +45,8 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
     return (
       <Component
         ref={ref}
-        className={clsx(
-          'canon-Heading',
-          responsiveVariant && `canon-Heading--variant-${responsiveVariant}`,
-          className,
-        )}
+        className={clsx('canon-Heading', className)}
+        data-variant={responsiveVariant}
         {...restProps}
       >
         {children}
diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css
index 2db11d7eb2..c85bbca135 100644
--- a/packages/canon/src/components/Heading/styles.css
+++ b/packages/canon/src/components/Heading/styles.css
@@ -22,32 +22,32 @@
   margin: 0;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant='display'] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant='title1'] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant='title2'] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant='title3'] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant='title4'] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant='title5'] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/src/components/IconButton/IconButton.tsx b/packages/canon/src/components/IconButton/IconButton.tsx
index e05e27e372..b2581844bc 100644
--- a/packages/canon/src/components/IconButton/IconButton.tsx
+++ b/packages/canon/src/components/IconButton/IconButton.tsx
@@ -39,16 +39,13 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     return (
       <button
         ref={ref}
-        className={clsx(
-          'canon-IconButton',
-          `canon-IconButton--size-${responsiveSize}`,
-          `canon-IconButton--variant-${responsiveVariant}`,
-          className,
-        )}
+        className={clsx('canon-IconButton', className)}
+        data-size={responsiveSize}
+        data-variant={responsiveVariant}
         style={style}
         {...rest}
       >
-        <Icon name={icon} className="canon-IconButton--icon" />
+        <Icon name={icon} className="canon-IconButtonIcon" />
       </button>
     );
   },
diff --git a/packages/canon/src/components/IconButton/styles.css b/packages/canon/src/components/IconButton/styles.css
index aa4c2d0523..859c512fd6 100644
--- a/packages/canon/src/components/IconButton/styles.css
+++ b/packages/canon/src/components/IconButton/styles.css
@@ -32,7 +32,7 @@
   }
 }
 
-.canon-IconButton--variant-primary {
+.canon-IconButton[data-variant='primary'] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color 150ms ease, box-shadow 150ms ease;
@@ -56,7 +56,7 @@
   }
 }
 
-.canon-IconButton--variant-secondary {
+.canon-IconButton[data-variant='secondary'] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -82,24 +82,24 @@
   }
 }
 
-.canon-IconButton--size-medium {
+.canon-IconButton[data-size='medium'] {
   font-size: var(--canon-font-size-4);
   height: 40px;
   width: 40px;
 }
 
-.canon-IconButton--size-small {
+.canon-IconButton[data-size='small'] {
   font-size: var(--canon-font-size-3);
   height: 32px;
   width: 32px;
 }
 
-.canon-IconButton--size-small .canon-IconButton--icon {
+.canon-IconButton[data-size='small'] .canon-IconButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton--size-medium .canon-IconButton--icon {
+.canon-IconButton[data-size='medium'] .canon-IconButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/src/components/Link/Link.tsx b/packages/canon/src/components/Link/Link.tsx
index a4ccb8428b..8609517bc0 100644
--- a/packages/canon/src/components/Link/Link.tsx
+++ b/packages/canon/src/components/Link/Link.tsx
@@ -38,14 +38,9 @@ export const Link = forwardRef<HTMLElement, LinkProps>((props, ref) => {
   const { renderElement } = useRender({
     render,
     props: {
-      className: clsx(
-        'canon-Link',
-        responsiveVariant && `canon-Link--variant-${responsiveVariant}`,
-        responsiveWeight && `canon-Link--weight-${responsiveWeight}`,
-        className,
-      ),
-      responsiveVariant,
-      responsiveWeight,
+      className: clsx('canon-Link', className),
+      ['data-variant']: responsiveVariant,
+      ['data-weight']: responsiveWeight,
       ...restProps,
     },
     refs: [ref, internalRef],
diff --git a/packages/canon/src/components/Link/styles.css b/packages/canon/src/components/Link/styles.css
index 40a4f340ca..8112ae8231 100644
--- a/packages/canon/src/components/Link/styles.css
+++ b/packages/canon/src/components/Link/styles.css
@@ -36,30 +36,30 @@
   }
 }
 
-.canon-Link--variant-body {
+.canon-Link[data-variant='body'] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Link--variant-subtitle {
+.canon-Link[data-variant='subtitle'] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Link--variant-caption {
+.canon-Link[data-variant='caption'] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Link--variant-label {
+.canon-Link[data-variant='label'] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Link--weight-regular {
+.canon-Link[data-weight='regular'] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Link--weight-bold {
+.canon-Link[data-weight='bold'] {
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/src/components/Select/Select.styles.css b/packages/canon/src/components/Select/Select.styles.css
index 2fcdbf7a6a..fa00d81302 100644
--- a/packages/canon/src/components/Select/Select.styles.css
+++ b/packages/canon/src/components/Select/Select.styles.css
@@ -21,14 +21,14 @@
   width: 100%;
 }
 
-.canon-Select--label {
+.canon-SelectLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-Select--description {
+.canon-SelectDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -36,7 +36,7 @@
   padding-top: var(--canon-space-1_5);
 }
 
-.canon-Select--error {
+.canon-SelectError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -44,7 +44,7 @@
   padding-top: var(--canon-space-1_5);
 }
 
-.canon-Select--trigger {
+.canon-SelectTrigger {
   box-sizing: border-box;
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
@@ -63,41 +63,41 @@
   gap: var(--canon-space-2);
 }
 
-.canon-Select--trigger::placeholder {
+.canon-SelectTrigger::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Select--trigger:hover {
+.canon-SelectTrigger:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-Select--trigger:focus-visible {
+.canon-SelectTrigger:focus-visible {
   border-color: var(--canon-border-pressed);
   outline: 0;
 }
 
-.canon-Select--trigger[data-invalid] {
+.canon-SelectTrigger[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
-.canon-Select--trigger[data-invalid]:hover {
+.canon-SelectTrigger[data-invalid]:hover {
   border-width: 2px;
 }
 
-.canon-Select--trigger[data-invalid]:focus-visible {
+.canon-SelectTrigger[data-invalid]:focus-visible {
   border-width: 2px;
 }
 
-.canon-Select--trigger[data-disabled] {
+.canon-SelectTrigger[data-disabled] {
   cursor: not-allowed;
   border-color: var(--canon-border-disabled);
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger-size-small {
+.canon-SelectTrigger[data-size='small'] {
   height: 2rem;
 }
 
-.canon-Select--trigger-size-medium {
+.canon-SelectTrigger[data-size='medium'] {
   height: 3rem;
 }
 
@@ -106,11 +106,11 @@
   transition: transform 0.2s ease;
 }
 
-.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
+.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
   transform: rotate(180deg);
 }
 
-.canon-Select--popup {
+.canon-SelectPopup {
   box-sizing: border-box;
   max-height: var(--available-height);
   overflow-y: auto;
@@ -125,13 +125,13 @@
   transition: transform 150ms, opacity 150ms;
 }
 
-.canon-Select--popup[data-starting-style],
-.canon-Select--popup[data-ending-style] {
+.canon-SelectPopup[data-starting-style],
+.canon-SelectPopup[data-ending-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 
-.canon-Select--item {
+.canon-SelectItem {
   position: relative;
   width: var(--anchor-width);
   display: grid;
@@ -149,13 +149,13 @@
   outline: none;
 }
 
-.canon-Select--item[data-highlighted] {
+.canon-SelectItem[data-highlighted] {
   z-index: 0;
   position: relative;
   color: var(--canon-fg-primary);
 }
 
-.canon-Select--item[data-highlighted]::before {
+.canon-SelectItem[data-highlighted]::before {
   content: '';
   z-index: -1;
   position: absolute;
@@ -165,37 +165,37 @@
   background-color: var(--canon-bg-tint-hover);
 }
 
-.canon-Select--item[data-disabled] {
+.canon-SelectItem[data-disabled] {
   cursor: not-allowed;
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--item-indicator {
+.canon-SelectItemIndicator {
   grid-area: icon;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.canon-Select--item-text {
+.canon-SelectItemText {
   flex: 1;
   grid-area: text;
 }
 
-.canon-Select--required {
+.canon-SelectRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   margin-left: var(--canon-space-1);
 }
 
-.canon-Select--icon {
+.canon-SelectIcon {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.canon-Select--value {
+.canon-SelectValue {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
diff --git a/packages/canon/src/components/Select/Select.tsx b/packages/canon/src/components/Select/Select.tsx
index 6e28d3a9a0..be8047ca02 100644
--- a/packages/canon/src/components/Select/Select.tsx
+++ b/packages/canon/src/components/Select/Select.tsx
@@ -48,10 +48,10 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
   return (
     <div className={clsx('canon-Select', className)} style={style} ref={ref}>
       {label && (
-        <label className="canon-Select--label" htmlFor={selectId}>
+        <label className="canon-SelectLabel" htmlFor={selectId}>
           {label}
           {required && (
-            <span aria-hidden="true" className="canon-Select--required">
+            <span aria-hidden="true" className="canon-SelectRequired">
               (Required)
             </span>
           )}
@@ -60,35 +60,33 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
       <SelectPrimitive.Root {...rest}>
         <SelectPrimitive.Trigger
           id={selectId}
-          className={clsx('canon-Select--trigger', {
-            'canon-Select--trigger-size-small': responsiveSize === 'small',
-            'canon-Select--trigger-size-medium': responsiveSize === 'medium',
-          })}
+          className="canon-SelectTrigger"
+          data-size={responsiveSize}
           data-invalid={error}
         >
           <SelectPrimitive.Value
-            className="canon-Select--value"
+            className="canon-SelectValue"
             placeholder={placeholder}
           />
-          <SelectPrimitive.Icon className="canon-Select--icon">
+          <SelectPrimitive.Icon className="canon-SelectIcon">
             <Icon name="chevron-down" />
           </SelectPrimitive.Icon>
         </SelectPrimitive.Trigger>
         <SelectPrimitive.Portal>
           <SelectPrimitive.Backdrop />
           <SelectPrimitive.Positioner>
-            <SelectPrimitive.Popup className="canon-Select--popup">
+            <SelectPrimitive.Popup className="canon-SelectPopup">
               {options?.map(option => (
                 <SelectPrimitive.Item
                   key={option.value}
                   value={option.value}
                   disabled={option.disabled}
-                  className="canon-Select--item"
+                  className="canon-SelectItem"
                 >
-                  <SelectPrimitive.ItemIndicator className="canon-Select--item-indicator">
+                  <SelectPrimitive.ItemIndicator className="canon-SelectItemIndicator">
                     <Icon name="check" />
                   </SelectPrimitive.ItemIndicator>
-                  <SelectPrimitive.ItemText className="canon-Select--item-text">
+                  <SelectPrimitive.ItemText className="canon-SelectItemText">
                     {option.label}
                   </SelectPrimitive.ItemText>
                 </SelectPrimitive.Item>
@@ -98,12 +96,12 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
         </SelectPrimitive.Portal>
       </SelectPrimitive.Root>
       {description && (
-        <p className="canon-Select--description" id={descriptionId}>
+        <p className="canon-SelectDescription" id={descriptionId}>
           {description}
         </p>
       )}
       {error && (
-        <p className="canon-Select--error" id={errorId} role="alert">
+        <p className="canon-SelectError" id={errorId} role="alert">
           {error}
         </p>
       )}
diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx
index 643afc539a..76f5adbb43 100644
--- a/packages/canon/src/components/Text/Text.tsx
+++ b/packages/canon/src/components/Text/Text.tsx
@@ -41,13 +41,10 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
     return (
       <p
         ref={ref}
-        className={clsx(
-          'canon-Text',
-          responsiveVariant && `canon-Text--variant-${responsiveVariant}`,
-          responsiveWeight && `canon-Text--weight-${responsiveWeight}`,
-          responsiveColor && `canon-Text--color-${responsiveColor}`,
-          className,
-        )}
+        className={clsx('canon-Text', className)}
+        data-variant={responsiveVariant}
+        data-weight={responsiveWeight}
+        data-color={responsiveColor}
         style={style}
         {...restProps}
       >
diff --git a/packages/canon/src/components/Text/styles.css b/packages/canon/src/components/Text/styles.css
index 8252554280..9f0ed703d9 100644
--- a/packages/canon/src/components/Text/styles.css
+++ b/packages/canon/src/components/Text/styles.css
@@ -16,55 +16,54 @@
 
 .canon-Text {
   font-family: var(--canon-font-regular);
-  color: var(--canon-fg-primary);
   padding: 0;
   margin: 0;
 }
 
-.canon-Text--variant-body {
+.canon-Text[data-variant='body'] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Text--variant-subtitle {
+.canon-Text[data-variant='subtitle'] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Text--variant-caption {
+.canon-Text[data-variant='caption'] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Text--variant-label {
+.canon-Text[data-variant='label'] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Text--weight-regular {
+.canon-Text[data-weight='regular'] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Text--weight-bold {
+.canon-Text[data-weight='bold'] {
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Text--color-primary {
+.canon-Text[data-color='primary'] {
   color: var(--canon-fg-primary);
 }
 
-.canon-Text--color-secondary {
+.canon-Text[data-color='secondary'] {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Text--color-danger {
+.canon-Text[data-color='danger'] {
   color: var(--canon-fg-danger);
 }
 
-.canon-Text--color-warning {
+.canon-Text[data-color='warning'] {
   color: var(--canon-fg-warning);
 }
 
-.canon-Text--color-success {
+.canon-Text[data-color='success'] {
   color: var(--canon-fg-success);
 }
diff --git a/packages/canon/src/components/TextField/TextField.styles.css b/packages/canon/src/components/TextField/TextField.styles.css
index 899acc0034..e2c843f166 100644
--- a/packages/canon/src/components/TextField/TextField.styles.css
+++ b/packages/canon/src/components/TextField/TextField.styles.css
@@ -21,14 +21,14 @@
   width: 100%;
 }
 
-.canon-TextField--label {
+.canon-TextFieldLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-TextField--description {
+.canon-TextFieldDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -36,7 +36,7 @@
   padding-top: var(--canon-space-1_5);
 }
 
-.canon-TextField--error {
+.canon-TextFieldError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -44,7 +44,7 @@
   padding-top: var(--canon-space-1_5);
 }
 
-.canon-TextField--input {
+.canon-TextFieldInput {
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
   padding: 0 var(--canon-space-4);
@@ -57,39 +57,39 @@
   width: 100%;
 }
 
-.canon-TextField--input::placeholder {
+.canon-TextFieldInput::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-TextField--input:hover {
+.canon-TextFieldInput:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-TextField--input:focus-visible {
+.canon-TextFieldInput:focus-visible {
   outline-color: var(--canon-border-pressed);
   outline-width: 0px;
   border-color: var(--canon-border-pressed);
 }
 
-.canon-TextField--input[data-invalid] {
+.canon-TextFieldInput[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-TextField--input[data-disabled] {
+.canon-TextFieldInput[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input-size-small {
+.canon-TextFieldInput[data-size='small'] {
   height: 2rem;
 }
 
-.canon-TextField--input-size-medium {
+.canon-TextFieldInput[data-size='medium'] {
   height: 2.5rem;
 }
 
-.canon-TextField--required {
+.canon-TextFieldRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
diff --git a/packages/canon/src/components/TextField/TextField.tsx b/packages/canon/src/components/TextField/TextField.tsx
index 8a22ee305b..63c7e21435 100644
--- a/packages/canon/src/components/TextField/TextField.tsx
+++ b/packages/canon/src/components/TextField/TextField.tsx
@@ -50,10 +50,10 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
         ref={ref}
       >
         {label && (
-          <label className="canon-TextField--label" htmlFor={inputId}>
+          <label className="canon-TextFieldLabel" htmlFor={inputId}>
             {label}
             {required && (
-              <span aria-hidden="true" className="canon-TextField--required">
+              <span aria-hidden="true" className="canon-TextFieldRequired">
                 (Required)
               </span>
             )}
@@ -61,10 +61,8 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
         )}
         <Input
           id={inputId}
-          className={clsx('canon-TextField--input', {
-            'canon-TextField--input-size-small': responsiveSize === 'small',
-            'canon-TextField--input-size-medium': responsiveSize === 'medium',
-          })}
+          className="canon-TextFieldInput"
+          data-size={responsiveSize}
           aria-labelledby={label ? inputId : undefined}
           aria-describedby={clsx({
             [descriptionId]: description,
@@ -75,12 +73,12 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
           {...rest}
         />
         {description && (
-          <p className="canon-TextField--description" id={descriptionId}>
+          <p className="canon-TextFieldDescription" id={descriptionId}>
             {description}
           </p>
         )}
         {error && (
-          <p className="canon-TextField--error" id={errorId} role="alert">
+          <p className="canon-TextFieldError" id={errorId} role="alert">
             {error}
           </p>
         )}
diff --git a/packages/repo-tools/src/commands/lint-legacy-backend-exports/lint-legacy-backend-exports.ts b/packages/repo-tools/src/commands/lint-legacy-backend-exports/lint-legacy-backend-exports.ts
index 6025defe31..29fb4e7b20 100644
--- a/packages/repo-tools/src/commands/lint-legacy-backend-exports/lint-legacy-backend-exports.ts
+++ b/packages/repo-tools/src/commands/lint-legacy-backend-exports/lint-legacy-backend-exports.ts
@@ -46,10 +46,12 @@ function verifyIndex(pkg: string, packageJson?: BackstagePackageJson) {
   console.log(`Verifying ${pkg}`);
   const tsPath = path.join(pkg, 'src/index.ts');
   const sourceFile = project.getSourceFile(tsPath);
+
   if (!sourceFile) {
     console.log(`Could not find ${tsPath}`);
     process.exit(1);
   }
+
   const symbols = sourceFile?.getExportSymbols();
 
   const exportCount = symbols?.length || 0;
@@ -69,15 +71,34 @@ function verifyIndex(pkg: string, packageJson?: BackstagePackageJson) {
     console.log('   ❌ Missing default export');
   }
   let createRouterDeprecated = undefined;
+  let routerCreateRouterDeprecated = undefined;
   if (createRouterExport) {
     createRouterDeprecated = createRouterExport
       .getJsDocTags()
       .find(tag => tag.getName() === 'deprecated');
+
+    const declarations = createRouterExport?.getDeclarations();
+    const firstDeclaration = declarations?.[0];
+    let resolvedSymbol = undefined;
+    if (firstDeclaration) {
+      // Try resolving to the definition directly
+      resolvedSymbol = createRouterExport.getAliasedSymbol();
+      if (resolvedSymbol) {
+        const resolvedDeclarations = resolvedSymbol.getDeclarations();
+        const resolvedDeclaration = resolvedDeclarations?.[0];
+        if (resolvedDeclaration) {
+          routerCreateRouterDeprecated = resolvedDeclaration
+            .getSymbol()
+            ?.getJsDocTags()
+            .find(tag => tag.getName() === 'deprecated');
+        }
+      }
+    }
   }
 
   if (createRouterExport) {
     console.log('   ❌ createRouter is exported');
-    if (!createRouterDeprecated)
+    if (!createRouterDeprecated && !routerCreateRouterDeprecated)
       console.log('   ❌ createRouter is NOT deprecated');
   }