diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index 179c35323a..b9a1229fbd 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -44,12 +44,9 @@ 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}
       >
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index b5d6e1dca0..a05a0b3a4f 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-Button--icon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button--size-medium .canon-Button--icon {
+.canon-Button[data-size='medium'] .canon-Button--icon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/src/components/IconButton/IconButton.tsx b/packages/canon/src/components/IconButton/IconButton.tsx
index e05e27e372..7e7f94d22e 100644
--- a/packages/canon/src/components/IconButton/IconButton.tsx
+++ b/packages/canon/src/components/IconButton/IconButton.tsx
@@ -39,12 +39,9 @@ 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}
       >
diff --git a/packages/canon/src/components/IconButton/styles.css b/packages/canon/src/components/IconButton/styles.css
index aa4c2d0523..089dd1fcda 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-IconButton--icon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton--size-medium .canon-IconButton--icon {
+.canon-IconButton[data-size='medium'] .canon-IconButton--icon {
   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..718636d954 100644
--- a/packages/canon/src/components/Select/Select.styles.css
+++ b/packages/canon/src/components/Select/Select.styles.css
@@ -93,11 +93,11 @@
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger-size-small {
+.canon-Select--trigger[data-size='small'] {
   height: 2rem;
 }
 
-.canon-Select--trigger-size-medium {
+.canon-Select--trigger[data-size='medium'] {
   height: 3rem;
 }
 
diff --git a/packages/canon/src/components/Select/Select.tsx b/packages/canon/src/components/Select/Select.tsx
index 6e28d3a9a0..d8760fc1ea 100644
--- a/packages/canon/src/components/Select/Select.tsx
+++ b/packages/canon/src/components/Select/Select.tsx
@@ -60,10 +60,8 @@ 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-Select--trigger"
+          data-size={responsiveSize}
           data-invalid={error}
         >
           <SelectPrimitive.Value
diff --git a/packages/canon/src/components/TextField/TextField.styles.css b/packages/canon/src/components/TextField/TextField.styles.css
index 899acc0034..63a8b749ce 100644
--- a/packages/canon/src/components/TextField/TextField.styles.css
+++ b/packages/canon/src/components/TextField/TextField.styles.css
@@ -81,11 +81,11 @@
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input-size-small {
+.canon-TextField--input[data-size='small'] {
   height: 2rem;
 }
 
-.canon-TextField--input-size-medium {
+.canon-TextField--input[data-size='medium'] {
   height: 2.5rem;
 }
 
diff --git a/packages/canon/src/components/TextField/TextField.tsx b/packages/canon/src/components/TextField/TextField.tsx
index 8a22ee305b..cf33267c9a 100644
--- a/packages/canon/src/components/TextField/TextField.tsx
+++ b/packages/canon/src/components/TextField/TextField.tsx
@@ -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-TextField--input"
+          data-size={responsiveSize}
           aria-labelledby={label ? inputId : undefined}
           aria-describedby={clsx({
             [descriptionId]: description,