diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 264be6375b..8cebf1937b 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -240,56 +240,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);
 }
 
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index ba8fe6dab2..fd9e19a392 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9464,56 +9464,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);
 }
 
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/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);
 }