@infonomic/uikit 2.15.0 → 3.1.0

package/src/components/button/button.module.css

@@ -91,8 +91,8 @@
 
   .filled:disabled,
   .filled[disabled] {
-    background-color: oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h);
-    color: oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h);
+    background-color: var(--button-variant-filled-disabled, oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
+    color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
   }
 
   .outlined {
@@ -103,8 +103,8 @@
 
   .outlined:disabled,
   .outlined[disabled] {
-    border-color: oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h);
-    color: oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h);
+    border-color: var(--button-variant-outlined-border-disabled, oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
+    color: var(--button-variant-outlined-foreground-disabled, oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
   }
 
   .outlined:hover {
@@ -126,8 +126,8 @@
   .gradient:disabled,
   .gradient[disabled] {
     background: unset;
-    background-color: oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h);
-    color: oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h);
+    background-color: var(--button-variant-gradient-disabled, oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h));
+    color: var(--button-variant-gradient-foreground-disabled, oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h));
   }
 
   .gradient:hover {
@@ -163,220 +163,255 @@
 
   /* Intents */
   .primary {
-    --button: var(--primary-600);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-primary);
   }
 
   .primary.filled {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: white;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.9) c h);
+    --button-variant-filled: var(--fill-primary-strong);
+    --button-variant-filled-foreground: var(--text-on-primary);
+    --button-variant-filled-hover: var(--fill-primary-strong-hover);
+    --button-variant-filled-disabled: var(--fill-primary-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(--text-on-primary-disabled);
   }
 
   .primary.outlined {
     --button-variant-outlined: transparent;
-    --button-variant-outlined-foreground: var(--primary-700);
-    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 2.15) calc(c * 0.2) h);
-    --button-variant-outlined-border: var(--primary-700);
+    --button-variant-outlined-foreground: var(--text-primary-strong);
+    --button-variant-outlined-hover: var(--fill-primary-weak);
+    --button-variant-outlined-border: var(--stroke-primary);
+    --button-variant-outlined-border-disabled: var(--stroke-primary-disabled);
+    --button-variant-outlined-foreground-disabled: var(--text-primary-disabled);
   }
 
   .primary.text {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.7) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+    --button-variant-text-foreground: var(--text-primary-weak);
+    --button-variant-text-hover: var(--fill-primary-weak-hover);
   }
 
   .primary.gradient {
-    --button-variant-gradient-start: var(--primary-500);
-    --button-variant-gradient-end: var(--primary-700);
-    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-start: var(--gradient-primary-start);
+    --button-variant-gradient-end: var(--gradient-primary-end);
+    --button-variant-gradient-foreground: var(--gradient-primary-foreground);
     --button-variant-gradient-hover: var(--gray-900);
+    --button-variant-gradient-disabled: var(--gradient-primary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-primary-disabled);
   }
 
   .secondary {
-    --button: var(--secondary-500);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-secondary);
   }
 
   .secondary.filled {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: black;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.95) c h);
+    --button-variant-filled: var(--fill-secondary-strong);
+    --button-variant-filled-foreground: var(--text-on-secondary);
+    --button-variant-filled-hover: var(--fill-secondary-strong-hover);
+    --button-variant-filled-disabled: var(--fill-secondary-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(--text-on-secondary-disabled);
   }
 
   .secondary.outlined {
     --button-variant-outlined: transparent;
-    --button-variant-outlined-foreground: var(--secondary-950);
-    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.6) calc(c * 0.2) h);
-    --button-variant-outlined-border: var(--secondary-700);
+    --button-variant-outlined-foreground: var(--text-secondary-strong);
+    --button-variant-outlined-hover: var(--fill-secondary-weak);
+    --button-variant-outlined-border: var(--stroke-secondary);
+    --button-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
+    --button-variant-outlined-foreground-disabled: var(--text-secondary-disabled);
   }
 
   .secondary.text {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.7) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+    --button-variant-text-foreground: var(--text-secondary-weak);
+    --button-variant-text-hover: var(--fill-secondary-weak-hover);
   }
 
   .secondary.gradient {
-    --button-variant-gradient-start: var(--secondary-500);
-    --button-variant-gradient-end: var(--secondary-700);
-    --button-variant-gradient-foreground: black;
+    --button-variant-gradient-start: var(--gradient-secondary-start);
+    --button-variant-gradient-end: var(--gradient-secondary-end);
+    --button-variant-gradient-foreground: var(--gradient-secondary-foreground);
     --button-variant-gradient-hover: var(--gray-900);
+    --button-variant-gradient-disabled: var(--gradient-secondary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-disabled);
   }
 
   .noeffect {
-    --button: var(--gray-100);
-    --button-ring-color: var(--gray-200);
+    --button-ring-color: var(--ring-noeffect);
   }
 
   .noeffect.filled {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: black;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.95) c h);
+    --button-variant-filled: var(--fill-noeffect-strong);
+    --button-variant-filled-foreground: var(--text-on-noeffect);
+    --button-variant-filled-hover: var(--fill-noeffect-strong-hover);
+    --button-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(--text-on-noeffect-disabled);
   }
 
   .noeffect.outlined {
     --button-variant-outlined: transparent;
-    --button-variant-outlined-foreground: var(--gray-800);
-    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 2.9) calc(c * 0.2) h);
-    --button-variant-outlined-border: var(--gray-500);
+    --button-variant-outlined-foreground: var(--text-noeffect-strong);
+    --button-variant-outlined-hover: var(--fill-noeffect-weak);
+    --button-variant-outlined-border: var(--stroke-noeffect);
+    --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
+    --button-variant-outlined-foreground-disabled: var(--text-noeffect-disabled);
   }
 
   .noeffect.text {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.5) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+    --button-variant-text-foreground: var(--text-noeffect-weak);
+    --button-variant-text-hover: var(--fill-noeffect-weak-hover);
   }
 
   .noeffect.gradient {
-    --button-variant-gradient-start: var(--gray-100);
-    --button-variant-gradient-end: var(--gray-200);
-    --button-variant-gradient-foreground: black;
-    --button-variant-gradient-hover: var(--gray-400);
+    --button-variant-gradient-start: var(--gradient-noeffect-start);
+    --button-variant-gradient-end: var(--gradient-noeffect-end);
+    --button-variant-gradient-foreground: var(--gradient-noeffect-foreground);
+    --button-variant-gradient-hover: var(--gradient-noeffect-hover);
+    --button-variant-gradient-disabled: var(--gradient-noeffect-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-disabled);
   }
 
   .success {
-    --button: var(--green-400);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-success);
   }
 
   .success.filled {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: white;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.9) c h);
+    --button-variant-filled: var(--fill-success-strong);
+    --button-variant-filled-foreground: var(--text-on-success);
+    --button-variant-filled-hover: var(--fill-success-strong-hover);
+    --button-variant-filled-disabled: var(--fill-success-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(--text-on-success-disabled);
   }
 
   .success.outlined {
     --button-variant-outlined: transparent;
-    --button-variant-outlined-foreground: var(--green-600);
-    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.6) calc(c * 0.2) h);
-    --button-variant-outlined-border: var(--green-600);
+    --button-variant-outlined-foreground: var(--text-success-strong);
+    --button-variant-outlined-hover: var(--fill-success-weak);
+    --button-variant-outlined-border: var(--stroke-success);
+    --button-variant-outlined-border-disabled: var(--stroke-success-disabled);
+    --button-variant-outlined-foreground-disabled: var(--text-success-disabled);
   }
 
   .success.text {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.7) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+    --button-variant-text-foreground: var(--text-success-weak);
+    --button-variant-text-hover: var(--fill-success-weak-hover);
   }
 
   .success.gradient {
-    --button-variant-gradient-start: var(--green-500);
-    --button-variant-gradient-end: var(--green-700);
-    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-start: var(--gradient-success-start);
+    --button-variant-gradient-end: var(--gradient-success-end);
+    --button-variant-gradient-foreground: var(--gradient-success-foreground);
     --button-variant-gradient-hover: var(--gray-900);
+    --button-variant-gradient-disabled: var(--gradient-success-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-success-disabled);
   }
 
   .info {
-    --button: var(--blue-400);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-info);
   }
 
   .info.filled {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: white;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.9) c h);
+    --button-variant-filled: var(--fill-info-strong);
+    --button-variant-filled-foreground: var(--text-on-info);
+    --button-variant-filled-hover: var(--fill-info-strong-hover);
+    --button-variant-filled-disabled: var(--fill-info-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(--text-on-info-disabled);
   }
 
   .info.outlined {
     --button-variant-outlined: transparent;
-    --button-variant-outlined-foreground: var(--blue-300);
-    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.9) calc(c * 0.2) h);
-    --button-variant-outlined-border: var(--blue-500);
+    --button-variant-outlined-foreground: var(--text-info-strong);
+    --button-variant-outlined-hover: var(--fill-info-weak);
+    --button-variant-outlined-border: var(--stroke-info);
+    --button-variant-outlined-border-disabled: var(--stroke-info-disabled);
+    --button-variant-outlined-foreground-disabled: var(--text-info-disabled);
   }
 
   .info.text {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.7) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+    --button-variant-text-foreground: var(--text-info-weak);
+    --button-variant-text-hover: var(--fill-info-weak-hover);
   }
 
   .info.gradient {
-    --button-variant-gradient-start: var(--blue-500);
-    --button-variant-gradient-end: var(--blue-700);
-    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-start: var(--gradient-info-start);
+    --button-variant-gradient-end: var(--gradient-info-end);
+    --button-variant-gradient-foreground: var(--gradient-info-foreground);
     --button-variant-gradient-hover: var(--gray-900);
+    --button-variant-gradient-disabled: var(--gradient-info-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-info-disabled);
   }
 
   .warning {
-    --button: var(--yellow-300);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-warning);
   }
 
   .warning.filled {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: black;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.95) c h);
+    --button-variant-filled: var(--fill-warning-strong);
+    --button-variant-filled-foreground: var(--text-on-warning);
+    --button-variant-filled-hover: var(--fill-warning-strong-hover);
+    --button-variant-filled-disabled: var(--fill-warning-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(--text-on-warning-disabled);
   }
 
   .warning.outlined {
     --button-variant-outlined: transparent;
-    --button-variant-outlined-foreground: var(--yellow-700);
-    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.9) calc(c * 0.2) h);
-    --button-variant-outlined-border: var(--yellow-500);
+    --button-variant-outlined-foreground: var(--text-warning-strong);
+    --button-variant-outlined-hover: var(--fill-warning-weak);
+    --button-variant-outlined-border: var(--stroke-warning);
+    --button-variant-outlined-border-disabled: var(--stroke-warning-disabled);
+    --button-variant-outlined-foreground-disabled: var(--text-warning-disabled);
   }
 
   .warning.text {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.6) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+    --button-variant-text-foreground: var(--text-warning-weak);
+    --button-variant-text-hover: var(--fill-warning-weak-hover);
   }
 
   .warning.gradient {
-    --button-variant-gradient-start: var(--yellow-300);
-    --button-variant-gradient-end: var(--yellow-400);
-    --button-variant-gradient-foreground: black;
+    --button-variant-gradient-start: var(--gradient-warning-start);
+    --button-variant-gradient-end: var(--gradient-warning-end);
+    --button-variant-gradient-foreground: var(--gradient-warning-foreground);
     --button-variant-gradient-hover: var(--gray-900);
+    --button-variant-gradient-disabled: var(--gradient-warning-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-warning-disabled);
   }
 
   .danger {
-    --button: var(--red-400);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-danger);
   }
 
   .danger.filled {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: white;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.9) c h);
+    --button-variant-filled: var(--fill-danger-strong);
+    --button-variant-filled-foreground: var(--text-on-danger);
+    --button-variant-filled-hover: var(--fill-danger-strong-hover);
+    --button-variant-filled-disabled: var(--fill-danger-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(--text-on-danger-disabled);
   }
 
   .danger.outlined {
     --button-variant-outlined: transparent;
-    --button-variant-outlined-foreground: var(--red-500);
-    --button-variant-outlined-hover: oklch(from var(--button) calc(l * 1.8) calc(c * 0.3) h);
-    --button-variant-outlined-border: var(--red-500);
+    --button-variant-outlined-foreground: var(--text-danger-strong);
+    --button-variant-outlined-hover: var(--fill-danger-weak);
+    --button-variant-outlined-border: var(--stroke-danger);
+    --button-variant-outlined-border-disabled: var(--stroke-danger-disabled);
+    --button-variant-outlined-foreground-disabled: var(--text-danger-disabled);
   }
 
   .danger.text {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * 0.7) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
+    --button-variant-text-foreground: var(--text-danger-weak);
+    --button-variant-text-hover: var(--fill-danger-weak-hover);
   }
 
   .danger.gradient {
-    --button-variant-gradient-start: var(--red-500);
-    --button-variant-gradient-end: var(--red-700);
-    --button-variant-gradient-foreground: white;
+    --button-variant-gradient-start: var(--gradient-danger-start);
+    --button-variant-gradient-end: var(--gradient-danger-end);
+    --button-variant-gradient-foreground: var(--gradient-danger-foreground);
     --button-variant-gradient-hover: var(--gray-900);
+    --button-variant-gradient-disabled: var(--gradient-danger-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-danger-disabled);
   }
 
   /* Full width */
@@ -397,137 +432,7 @@
       --ring-offset-color: var(--background);
     }
 
-    .primary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button: var(--primary-600);
-      --button-ring-color: var(--button);
-    }
-
-    .primary.filled:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-filled: var(--button);
-      --button-variant-filled-foreground: white;
-      --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.9) c h);
-    }
-
-    .primary.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-outlined-foreground: var(--primary-100);
-      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.45) calc(c * 0.1) h);
-      --button-variant-outlined-border: var(--primary-500);
-    }
-
-    .primary.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-text: transparent;
-      --button-variant-text-foreground: var(--button);
-      --button-variant-text-hover: var(--canvas-800);
-    }
-
-    .secondary.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-outlined-foreground: var(--secondary-500);
-      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.3) calc(c * 0.1) h);
-      --button-variant-outlined-border: var(--secondary-500);
-    }
-
-    .secondary.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-text-foreground: var(--button);
-      --button-variant-text-hover: var(--canvas-800);
-    }
-
-    .noeffect:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button: var(--gray-900);
-      --button-ring-color: var(--gray-900);
-    }
-
-    .noeffect.filled:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-filled: var(--button);
-      --button-variant-filled-foreground: white;
-      --button-variant-filled-hover: oklch(from var(--button) calc(l * 0.95) c h);
-    }
-
-    .noeffect.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-outlined: transparent;
-      --button-variant-outlined-foreground: var(--gray-300);
-      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.75) calc(c * 0.2) h);
-      --button-variant-outlined-border: var(--gray-500);
-    }
-
-    .noeffect.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-text: transparent;
-      --button-variant-text-foreground: var(--gray-300);
-      --button-variant-text-hover: var(--canvas-800);
-    }
-
-    .noeffect.gradient:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-gradient-start: var(--gray-950);
-      --button-variant-gradient-end: var(--gray-900);
-      --button-variant-gradient-foreground: white;
-      --button-variant-gradient-hover: var(--gray-900);
-    }
-
-    .success.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-outlined-foreground: var(--green-500);
-      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.35) calc(c * 0.1) h);
-      --button-variant-outlined-border: var(--green-500);
-    }
-
-    .success.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-text-foreground: var(--button);
-      --button-variant-text-hover: var(--canvas-800);
-    }
-
-    .info.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-outlined-foreground: var(--blue-300);
-      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.43) calc(c * 0.1) h);
-      --button-variant-outlined-border: var(--blue-500);
-    }
-
-    .info.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-text-foreground: var(--button);
-      --button-variant-text-hover: var(--canvas-800);
-    }
-
-    .warning.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-outlined-foreground: var(--yellow-500);
-      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.31) calc(c * 0.1) h);
-      --button-variant-outlined-border: var(--yellow-500);
-    }
-
-    .warning.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-text-foreground: var(--button);
-      --button-variant-text-hover: var(--canvas-800);
-    }
-
-    .danger.outlined:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-outlined-foreground: var(--red-500);
-      --button-variant-outlined-hover: oklch(from var(--button) calc(l * 0.4) calc(c * 0.1) h);
-      --button-variant-outlined-border: var(--red-500);
-    }
-
-    .danger.text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --button-variant-text-foreground: var(--button);
-      --button-variant-text-hover: var(--canvas-800);
-    }
-
-    .filled:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)),
-    .filled[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      background-color: oklch(from var(--button-variant-filled) calc(l * 0.85) calc(c * 0.85) h);
-      color: oklch(from var(--button-variant-filled-foreground) calc(l * 0.85) calc(c * 0.85) h);
-    }
-
-    .outlined:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)),
-    .outlined[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      border-color: oklch(from var(--button-variant-outlined-border) calc(l * 0.8) calc(c * 0.8) h);
-      color: oklch(from var(--button-variant-outlined-foreground) calc(l * 0.8) calc(c * 0.8) h);
-    }
-
-    .gradient:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)),
-    .gradient[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      background: unset;
-      background-color: oklch(from var(--button-variant-gradient-end) calc(l * 0.85) calc(c * 0.85) h);
-      color: oklch(from var(--button-variant-gradient-foreground) calc(l * 0.85) calc(c * 0.85) h);
-    }
-
-    .text:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)),
-    .text[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      color: oklch(from var(--button-variant-text-foreground) calc(l * 0.85) calc(c * 0.85) h);
-    }
+    /* ALL INTENTS - Now handled by semantic tokens in theme layer */
+    /* No overrides needed! Tokens automatically switch in .dark and respect .not-dark */
   }
 }

package/src/components/button/control-buttons.module.css

@@ -15,7 +15,7 @@
     margin: 0;
     outline: none;
     color: white;
-    background-color: var(--primary-500);
+    background-color: var(--fill-primary-strong);
     transition-property: all, color;
     transition-duration: 0.3s, 1ms;
     transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1), ease;
@@ -50,7 +50,7 @@
   .directional-button:hover,
   .directional-button:focus {
     color: white;
-    background-color: var(--primary-600);
+    background-color: var(--fill-primary-strong-hover);
     transform: translateY(-5px);
   }
 
@@ -126,19 +126,7 @@
     transform: translateX(5px);
   }
 
-  :global(.dark) .play-button,
-  :global(.dark) .stop-button,
-  :global(.dark) .directional-button {
-    background-color: var(--primary-500);
-  }
-
-  :global(.dark) .play-button:hover,
-  :global(.dark) .stop-button:hover,
-  :global(.dark) .play-button:focus,
-  :global(.dark) .stop-button:focus,
-  :global(.dark) .directional-button:hover,
-  :global(.dark) .directional-button:focus {
-    color: white;
-    background-color: var(--primary-600);
-  }
+  /* No dark theme overrides needed! 
+   * Tokens automatically switch in .dark and respect .not-dark 
+  */
 }

package/src/components/button/control-buttons.stories.tsx

@@ -44,7 +44,7 @@ const ControlsDemo = (): React.JSX.Element => {
   )
 }
 
-export const Controls: Story = {
+export const ControlButtons: Story = {
   render: () => <ControlsDemo />,
 }
 

package/src/components/button/copy-button.module.css

@@ -5,27 +5,45 @@
     display: inline-block;
   }
 
-  .copy-button {
+  .copy-button svg {
+    width: 90%;
+    height: 90%;
+    display: block;
+  }
+
+  /* Sizes */
+  .xs {
+    width: 26px;
+    height: 26px;
+    min-height: 26px;
+    padding: 0.25rem;
+  }
+
+  .sm {
     width: 32px;
     height: 32px;
-    min-width: 32px;
+    min-height: 32px;
+    padding: 0.35rem;
   }
 
-  .copy-button-foreground {
-    fill: var(--gray-700);
+  .md {
+    width: 38px;
+    height: 38px;
+    min-height: 38px;
+    padding: 0.45rem;
   }
 
-  .copy-button-foreground-reversed {
-    fill: var(--gray-200);
+  .lg {
+    width: 46px;
+    height: 46px;
+    min-height: 46px;
+    padding: 0.55rem;
   }
 
-  .dark {
-    .copy-button-foreground {
-      fill: var(--gray-200);
-    }
-
-    .copy-button-foreground-reversed {
-      fill: var(--gray-700);
-    }
+  .xl {
+    width: 54px;
+    height: 54px;
+    min-height: 54px;
+    padding: 0.65rem;
   }
 }