@infonomic/uikit 2.15.0 → 3.1.0

package/dist/components/button/button_module.css

@@ -85,8 +85,8 @@
   }
 
   .filled-CwGsrO:disabled, .filled-CwGsrO[disabled] {
-    background-color: oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * .85) h);
-    color: oklch(from var(--button-variant-filled-foreground) calc(l * .9) calc(c * .85) h);
+    background-color: var(--button-variant-filled-disabled, oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * .85) h));
+    color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * .9) calc(c * .85) h));
   }
 
   .outlined-nZGbxu {
@@ -96,8 +96,8 @@
   }
 
   .outlined-nZGbxu:disabled, .outlined-nZGbxu[disabled] {
-    border-color: oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * .8) h);
-    color: oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * .7) h);
+    border-color: var(--button-variant-outlined-border-disabled, oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * .8) h));
+    color: var(--button-variant-outlined-foreground-disabled, oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * .7) h));
   }
 
   .outlined-nZGbxu:hover {
@@ -115,8 +115,8 @@
 
   .gradient-ySC3O3:disabled, .gradient-ySC3O3[disabled] {
     background: unset;
-    background-color: oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * .85) h);
-    color: oklch(from var(--button-variant-gradient-foreground) calc(l * .9) calc(c * .85) h);
+    background-color: var(--button-variant-gradient-disabled, oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * .85) h));
+    color: var(--button-variant-gradient-foreground-disabled, oklch(from var(--button-variant-gradient-foreground) calc(l * .9) calc(c * .85) h));
   }
 
   .gradient-ySC3O3:hover {
@@ -146,220 +146,255 @@
   }
 
   .primary-tUmczz {
-    --button: var(--primary-600);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-primary);
   }
 
   .primary-tUmczz.filled-CwGsrO {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: white;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * .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-tUmczz.outlined-nZGbxu {
     --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 * .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-tUmczz.text-GaxlcE {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * .7) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+    --button-variant-text-foreground: var(--text-primary-weak);
+    --button-variant-text-hover: var(--fill-primary-weak-hover);
   }
 
   .primary-tUmczz.gradient-ySC3O3 {
-    --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-UqT2AY {
-    --button: var(--secondary-500);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-secondary);
   }
 
   .secondary-UqT2AY.filled-CwGsrO {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: black;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * .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-UqT2AY.outlined-nZGbxu {
     --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 * .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-UqT2AY.text-GaxlcE {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * .7) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+    --button-variant-text-foreground: var(--text-secondary-weak);
+    --button-variant-text-hover: var(--fill-secondary-weak-hover);
   }
 
   .secondary-UqT2AY.gradient-ySC3O3 {
-    --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-fpxSgg {
-    --button: var(--gray-100);
-    --button-ring-color: var(--gray-200);
+    --button-ring-color: var(--ring-noeffect);
   }
 
   .noeffect-fpxSgg.filled-CwGsrO {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: black;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * .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-fpxSgg.outlined-nZGbxu {
     --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 * .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-fpxSgg.text-GaxlcE {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * .5) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+    --button-variant-text-foreground: var(--text-noeffect-weak);
+    --button-variant-text-hover: var(--fill-noeffect-weak-hover);
   }
 
   .noeffect-fpxSgg.gradient-ySC3O3 {
-    --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-fTNDEn {
-    --button: var(--green-400);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-success);
   }
 
   .success-fTNDEn.filled-CwGsrO {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: white;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * .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-fTNDEn.outlined-nZGbxu {
     --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 * .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-fTNDEn.text-GaxlcE {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * .7) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+    --button-variant-text-foreground: var(--text-success-weak);
+    --button-variant-text-hover: var(--fill-success-weak-hover);
   }
 
   .success-fTNDEn.gradient-ySC3O3 {
-    --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-qrdXQD {
-    --button: var(--blue-400);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-info);
   }
 
   .info-qrdXQD.filled-CwGsrO {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: white;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * .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-qrdXQD.outlined-nZGbxu {
     --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 * .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-qrdXQD.text-GaxlcE {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * .7) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+    --button-variant-text-foreground: var(--text-info-weak);
+    --button-variant-text-hover: var(--fill-info-weak-hover);
   }
 
   .info-qrdXQD.gradient-ySC3O3 {
-    --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-a00T3A {
-    --button: var(--yellow-300);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-warning);
   }
 
   .warning-a00T3A.filled-CwGsrO {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: black;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * .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-a00T3A.outlined-nZGbxu {
     --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 * .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-a00T3A.text-GaxlcE {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * .6) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+    --button-variant-text-foreground: var(--text-warning-weak);
+    --button-variant-text-hover: var(--fill-warning-weak-hover);
   }
 
   .warning-a00T3A.gradient-ySC3O3 {
-    --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-rwIV_i {
-    --button: var(--red-400);
-    --button-ring-color: var(--button);
+    --button-ring-color: var(--ring-danger);
   }
 
   .danger-rwIV_i.filled-CwGsrO {
-    --button-variant-filled: var(--button);
-    --button-variant-filled-foreground: white;
-    --button-variant-filled-hover: oklch(from var(--button) calc(l * .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-rwIV_i.outlined-nZGbxu {
     --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 * .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-rwIV_i.text-GaxlcE {
     --button-variant-text: transparent;
-    --button-variant-text-foreground: oklch(from var(--button) calc(l * .7) c h);
-    --button-variant-text-hover: oklch(from var(--canvas-50) calc(l * .995) c h);
+    --button-variant-text-foreground: var(--text-danger-weak);
+    --button-variant-text-hover: var(--fill-danger-weak-hover);
   }
 
   .danger-rwIV_i.gradient-ySC3O3 {
-    --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);
   }
 
   .fullWidth-wXvP0v {
@@ -370,134 +405,5 @@
   .dark .button-IjDhC0:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .button-IjDhC0:active:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
     --ring-offset-color: var(--background);
   }
-
-  .dark .primary-tUmczz:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --button: var(--primary-600);
-    --button-ring-color: var(--button);
-  }
-
-  .dark .primary-tUmczz.filled-CwGsrO: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 * .9) c h);
-  }
-
-  .dark .primary-tUmczz.outlined-nZGbxu: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 * .45) calc(c * .1) h);
-    --button-variant-outlined-border: var(--primary-500);
-  }
-
-  .dark .primary-tUmczz.text-GaxlcE: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);
-  }
-
-  .dark .secondary-UqT2AY.outlined-nZGbxu: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 * .3) calc(c * .1) h);
-    --button-variant-outlined-border: var(--secondary-500);
-  }
-
-  .dark .secondary-UqT2AY.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --button-variant-text-foreground: var(--button);
-    --button-variant-text-hover: var(--canvas-800);
-  }
-
-  .dark .noeffect-fpxSgg:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --button: var(--gray-900);
-    --button-ring-color: var(--gray-900);
-  }
-
-  .dark .noeffect-fpxSgg.filled-CwGsrO: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 * .95) c h);
-  }
-
-  .dark .noeffect-fpxSgg.outlined-nZGbxu: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 * .75) calc(c * .2) h);
-    --button-variant-outlined-border: var(--gray-500);
-  }
-
-  .dark .noeffect-fpxSgg.text-GaxlcE: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);
-  }
-
-  .dark .noeffect-fpxSgg.gradient-ySC3O3: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);
-  }
-
-  .dark .success-fTNDEn.outlined-nZGbxu: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 * .35) calc(c * .1) h);
-    --button-variant-outlined-border: var(--green-500);
-  }
-
-  .dark .success-fTNDEn.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --button-variant-text-foreground: var(--button);
-    --button-variant-text-hover: var(--canvas-800);
-  }
-
-  .dark .info-qrdXQD.outlined-nZGbxu: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 * .43) calc(c * .1) h);
-    --button-variant-outlined-border: var(--blue-500);
-  }
-
-  .dark .info-qrdXQD.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --button-variant-text-foreground: var(--button);
-    --button-variant-text-hover: var(--canvas-800);
-  }
-
-  .dark .warning-a00T3A.outlined-nZGbxu: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 * .31) calc(c * .1) h);
-    --button-variant-outlined-border: var(--yellow-500);
-  }
-
-  .dark .warning-a00T3A.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --button-variant-text-foreground: var(--button);
-    --button-variant-text-hover: var(--canvas-800);
-  }
-
-  .dark .danger-rwIV_i.outlined-nZGbxu: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 * .4) calc(c * .1) h);
-    --button-variant-outlined-border: var(--red-500);
-  }
-
-  .dark .danger-rwIV_i.text-GaxlcE:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --button-variant-text-foreground: var(--button);
-    --button-variant-text-hover: var(--canvas-800);
-  }
-
-  .dark .filled-CwGsrO:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .filled-CwGsrO[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    background-color: oklch(from var(--button-variant-filled) calc(l * .85) calc(c * .85) h);
-    color: oklch(from var(--button-variant-filled-foreground) calc(l * .85) calc(c * .85) h);
-  }
-
-  .dark .outlined-nZGbxu:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .outlined-nZGbxu[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    border-color: oklch(from var(--button-variant-outlined-border) calc(l * .8) calc(c * .8) h);
-    color: oklch(from var(--button-variant-outlined-foreground) calc(l * .8) calc(c * .8) h);
-  }
-
-  .dark .gradient-ySC3O3:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .gradient-ySC3O3[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    background: unset;
-    background-color: oklch(from var(--button-variant-gradient-end) calc(l * .85) calc(c * .85) h);
-    color: oklch(from var(--button-variant-gradient-foreground) calc(l * .85) calc(c * .85) h);
-  }
-
-  .dark .text-GaxlcE:disabled:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .text-GaxlcE[disabled]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    color: oklch(from var(--button-variant-text-foreground) calc(l * .85) calc(c * .85) h);
-  }
 }
 

package/dist/components/button/control-buttons_module.css

@@ -3,7 +3,7 @@
 @layer infonomic-components {
   .stop-button-krMTsl, .play-button-GfHYHO, .directional-button-kGS8rA {
     color: #fff;
-    background-color: var(--primary-500);
+    background-color: var(--fill-primary-strong);
     cursor: pointer;
     border-style: none;
     border-radius: 100%;
@@ -39,7 +39,7 @@
 
   .stop-button-krMTsl:hover, .play-button-GfHYHO:hover, .stop-button-krMTsl:focus, .play-button-GfHYHO:focus, .directional-button-kGS8rA:hover, .directional-button-kGS8rA:focus {
     color: #fff;
-    background-color: var(--primary-600);
+    background-color: var(--fill-primary-strong-hover);
     transform: translateY(-5px);
   }
 
@@ -105,14 +105,5 @@
   .right-nFxLqo:hover, .right-nFxLqo:focus {
     transform: translateX(5px);
   }
-
-  :is(.dark .play-button-GfHYHO, .dark .stop-button-krMTsl, .dark .directional-button-kGS8rA) {
-    background-color: var(--primary-500);
-  }
-
-  :is(.dark .play-button-GfHYHO:hover, .dark .stop-button-krMTsl:hover, .dark .play-button-GfHYHO:focus, .dark .stop-button-krMTsl:focus, .dark .directional-button-kGS8rA:hover, .dark .directional-button-kGS8rA:focus) {
-    color: #fff;
-    background-color: var(--primary-600);
-  }
 }
 

package/dist/components/button/copy-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/copy-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAK9C,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC7D,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAkB,EAClB,UAAsB,EACtB,OAAO,EACP,IAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyDrC"}
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/copy-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAK9C,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC7D,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAkB,EAClB,UAAsB,EACtB,OAAO,EACP,IAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8DrC"}

package/dist/components/button/copy-button.js

@@ -2,7 +2,6 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { useEffect, useState } from "react";
-import { CopyIcon } from "../../icons/index.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { Button } from "./button.js";
 import copy_button_module from "./copy-button.module.js";
@@ -27,7 +26,6 @@ function CopyButton({ text, hoverText = 'Copy', copiedText = 'Copied!', variant,
             setCopied(void 0);
         }, 900);
     });
-    const svgColor = 'noeffect' === intent || 'secondary' === intent || 'warning' === intent || 'outlined' === variant || 'text' === variant ? copy_button_module["copy-button-foreground"] : copy_button_module["copy-button-foreground-reversed"];
     const tooltipText = null != copied && copied ? copiedText : hoverText;
     return /*#__PURE__*/ jsx("div", {
         className: classnames(copy_button_module["copy-button-container"], containerClassName),
@@ -42,13 +40,22 @@ function CopyButton({ text, hoverText = 'Copy', copiedText = 'Copied!', variant,
                 intent: intent,
                 fullWidth: fullWidth,
                 ripple: ripple,
-                className: classnames('copy-button', variant, size, intent, copy_button_module["copy-button"], className),
+                className: classnames('copy-button', variant, size, intent, copy_button_module[size], className),
                 onClick: handleCopied,
                 ...rest,
-                children: /*#__PURE__*/ jsx(CopyIcon, {
-                    svgClassName: classnames(svgColor, svgClassName),
-                    width: "18px",
-                    height: "18px"
+                children: /*#__PURE__*/ jsx("svg", {
+                    className: svgClassName,
+                    xmlns: "http://www.w3.org/2000/svg",
+                    focusable: "false",
+                    "aria-hidden": "true",
+                    viewBox: "0 0 15 15",
+                    strokeWidth: "0",
+                    children: /*#__PURE__*/ jsx("path", {
+                        d: "M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z",
+                        fill: "currentColor",
+                        fillRule: "evenodd",
+                        clipRule: "evenodd"
+                    })
                 })
             })
         })

package/dist/components/button/copy-button.module.js

@@ -4,10 +4,10 @@ const copy_button_module = {
     copyButtonContainer: "copy-button-container-vCNz8o",
     "copy-button": "copy-button-oa4bdj",
     copyButton: "copy-button-oa4bdj",
-    "copy-button-foreground": "copy-button-foreground-peibK_",
-    copyButtonForeground: "copy-button-foreground-peibK_",
-    "copy-button-foreground-reversed": "copy-button-foreground-reversed-oeTW7Z",
-    copyButtonForegroundReversed: "copy-button-foreground-reversed-oeTW7Z",
-    dark: "dark-M9uAd8"
+    xs: "xs-lZmf78",
+    sm: "sm-KNN1e5",
+    md: "md-OoH0l4",
+    lg: "lg-uu5ujz",
+    xl: "xl-pFYyrS"
 };
 export { copy_button_module as default };