@mlola-ui/tokens 1.0.6 → 1.0.8

package/generated/recipes.css

@@ -1530,8 +1530,8 @@
 }
 
 .ml-button[data-variant="danger"]:hover {
-  background: color-mix(in oklab,var(--ml-danger) 88%,var(--ml-background));
-  border-color: transparent;
+  background: var(--ml-danger-hover);
+  border-color: var(--ml-danger-hover);
 }
 
 .ml-button[data-variant="link"] {
@@ -1575,24 +1575,18 @@
   gap: var(--ml-space-1-5);
 }
 
-.ml-button-spinner {
-  width: .875rem;
-  height: .875rem;
-  border: 1.5px solid currentColor;
-  border-inline-end-color: transparent;
-  border-radius: 50%;
-  animation: ml-spin .7s linear infinite;
-}
-
 .ml-button[data-state="success"] {
   background: var(--ml-success);
   border-color: var(--ml-success);
   color: var(--ml-success-foreground);
 }
 
+/* A busy button keeps its color: the spinner says it is working, and its
+   label ("Saving…") stays readable. Only a disabled button fades, so the two
+   never look alike. */
 .ml-button[data-loading] {
   pointer-events: none;
-  opacity: .72;
+  opacity: 1;
 }
 
 /* A shortcut inside a filled button takes the button's own ink: an outline
@@ -2768,6 +2762,13 @@
   background: var(--ml-border-subtle);
 }
 
+/* components/copy-button */
+/* A copy the browser refused reads as a problem, not as a success. On a
+   filled button the label keeps its own ink; the spoken message carries it. */
+.ml-copy-button[data-status="error"]:not([data-variant="primary"], [data-variant="danger"]) {
+  color: var(--ml-danger-text);
+}
+
 /* components/date-picker */
 /* Wide enough for a range in the reader's format. */
 .ml-date-picker {
@@ -3766,6 +3767,82 @@
   color: var(--ml-text-muted);
 }
 
+/* components/password-input */
+.ml-password-input {
+  display: grid;
+  gap: var(--ml-space-2);
+}
+
+/* While the password shows, the toggle takes full ink: its state is seen,
+   not only announced. */
+.ml-password-input-toggle[aria-pressed="true"] {
+  color: var(--ml-text);
+}
+
+.ml-password-input-strength {
+  display: grid;
+  gap: var(--ml-space-2);
+  color: var(--ml-text-muted);
+  font-size: var(--ml-type-xs);
+}
+
+.ml-password-input-strength p {
+  margin: 0;
+}
+
+.ml-password-input-strength strong {
+  color: var(--ml-text);
+  font-weight: 600;
+}
+
+/* Three segments light up as the password grows. They are marks on the page,
+   so they take the -text roles, which clear 3:1 against it. */
+.ml-password-input-meter {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--ml-space-1);
+}
+
+.ml-password-input-meter > span {
+  height: 0.25rem;
+  border-radius: var(--ml-radius-pill);
+  background: var(--ml-track);
+  transition: background-color var(--ml-duration-normal) var(--ml-ease-standard);
+}
+
+.ml-password-input-strength[data-strength="weak"] .ml-password-input-meter > span:nth-child(1) {
+  background: var(--ml-danger-text);
+}
+
+.ml-password-input-strength[data-strength="medium"] .ml-password-input-meter > span:nth-child(-n + 2) {
+  background: var(--ml-warning-text);
+}
+
+.ml-password-input-strength[data-strength="strong"] .ml-password-input-meter > span {
+  background: var(--ml-success-text);
+}
+
+.ml-password-input-strength[data-strength="weak"] strong {
+  color: var(--ml-danger-text);
+}
+
+.ml-password-input-strength[data-strength="strong"] strong {
+  color: var(--ml-success-text);
+}
+
+@media (forced-colors: active) {
+  .ml-password-input-meter > span {
+    border: 1px solid CanvasText;
+    background: Canvas;
+  }
+
+  .ml-password-input-strength:not([data-strength="empty"]) .ml-password-input-meter > span:nth-child(1),
+  .ml-password-input-strength:is([data-strength="medium"], [data-strength="strong"]) .ml-password-input-meter > span:nth-child(2),
+  .ml-password-input-strength[data-strength="strong"] .ml-password-input-meter > span:nth-child(3) {
+    background: CanvasText;
+  }
+}
+
 /* components/popover */
 .ml-popover {
   position: fixed;
@@ -4981,6 +5058,43 @@
   outline-offset: 2px;
 }
 
+/* components/spinner */
+/* A ring of the current text color with one bright arc. It is drawn from
+   currentColor alone, so it matches the label beside it in a button, a
+   toast or a line of text, in every theme and mode. */
+.ml-spinner {
+  display: inline-block;
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid color-mix(in oklab, currentColor 22%, transparent);
+  border-top-color: currentColor;
+  border-radius: var(--ml-radius-pill);
+  vertical-align: -0.125em;
+  animation: ml-spin 0.7s linear infinite;
+}
+
+.ml-spinner[data-size="sm"] {
+  width: 0.875rem;
+  height: 0.875rem;
+  border-width: 1.5px;
+}
+
+.ml-spinner[data-size="lg"] {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-width: 2.5px;
+}
+
+/* Under forced colors the ring is the system's text color, and the arc is
+   a real border that stays visible. */
+@media (forced-colors: active) {
+  .ml-spinner {
+    border-color: CanvasText;
+    border-top-color: Highlight;
+  }
+}
+
 /* components/status-icon */
 /* Color carries the stage; the glyph carries it without color too. */
 .ml-status-icon {
@@ -5252,9 +5366,12 @@ button.ml-stepper-target:focus-visible {
   background: transparent;
 }
 
+/* A header cell lines up with its column. Browsers center th by default, which
+   a table's own text-align does not reach. */
 .ml-table th,
 .ml-table-header th,
 .ml-table-head {
+  text-align: start;
   height: 2.5rem;
   padding: var(--ml-space-2) var(--ml-space-4);
   border-bottom: var(--ml-border-width) solid var(--ml-border-subtle);
@@ -6093,21 +6210,6 @@ button.ml-stepper-target:focus-visible {
   color: var(--ml-info-text);
 }
 
-.ml-toast-spinner {
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid var(--ml-track);
-  border-top-color: var(--ml-text);
-  border-radius: 50%;
-  animation: ml-toast-spin 0.7s linear infinite;
-}
-
-@keyframes ml-toast-spin {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
 .ml-toast-content {
   display: grid;
   flex: 1;

package/generated/tokens.css

@@ -103,19 +103,24 @@
   --ml-border-subtle: oklch(0.944 0.006 286);
   --ml-primary: oklch(0.21 0.006 286);
   --ml-primary-foreground: oklch(0.99 0 0);
+  --ml-primary-hover: oklch(0.305 0.005 286);
   --ml-primary-text: oklch(0.21 0.006 286);
   --ml-primary-subtle: oklch(0.978 0.004 286);
-  --ml-success: oklch(0.611 0.15 150);
-  --ml-success-foreground: oklch(0.18 0.02 150);
+  --ml-success: oklch(0.507 0.14 150);
+  --ml-success-foreground: oklch(0.99 0 0);
+  --ml-success-hover: oklch(0.457 0.126 150);
   --ml-success-text: oklch(0.493 0.136 150);
   --ml-warning: oklch(0.76 0.16 75);
   --ml-warning-foreground: oklch(0.18 0.02 75);
+  --ml-warning-hover: oklch(0.789 0.141 75);
   --ml-warning-text: oklch(0.512 0.108 75);
-  --ml-danger: oklch(0.65 0.2 25);
-  --ml-danger-foreground: oklch(0.18 0.02 25);
+  --ml-danger: oklch(0.547 0.2 25);
+  --ml-danger-foreground: oklch(0.99 0 0);
+  --ml-danger-hover: oklch(0.497 0.2 25);
   --ml-danger-text: oklch(0.532 0.2 25);
-  --ml-info: oklch(0.626 0.16 250);
-  --ml-info-foreground: oklch(0.18 0.02 250);
+  --ml-info: oklch(0.523 0.148 250);
+  --ml-info-foreground: oklch(0.99 0 0);
+  --ml-info-hover: oklch(0.473 0.134 250);
   --ml-info-text: oklch(0.507 0.144 250);
   --ml-chart-1: oklch(0.62 0.15 255);
   --ml-chart-2: oklch(0.682 0.18 50);
@@ -124,7 +129,6 @@
   --ml-chart-5: oklch(0.62 0.109 185);
   --ml-chart-6: oklch(0.62 0.15 10);
   --ml-focus: var(--ml-primary-text);
-  --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
   --ml-fill-active: color-mix(in oklab, var(--ml-text) 9%, transparent);
   --ml-track: color-mix(in oklab, var(--ml-text) 12%, transparent);
@@ -152,19 +156,24 @@
   --ml-border-subtle: oklch(0.263 0.005 286);
   --ml-primary: oklch(0.959 0.006 286);
   --ml-primary-foreground: oklch(0.18 0.02 286);
-  --ml-primary-text: oklch(0.639 0.006 286);
+  --ml-primary-hover: oklch(0.862 0.005 286);
+  --ml-primary-text: oklch(0.959 0.006 286);
   --ml-primary-subtle: oklch(0.236 0.005 286);
   --ml-success: oklch(0.72 0.15 150);
   --ml-success-foreground: oklch(0.18 0.02 150);
+  --ml-success-hover: oklch(0.651 0.132 150);
   --ml-success-text: oklch(0.72 0.15 150);
   --ml-warning: oklch(0.8 0.16 75);
   --ml-warning-foreground: oklch(0.18 0.02 75);
+  --ml-warning-hover: oklch(0.722 0.141 75);
   --ml-warning-text: oklch(0.8 0.16 75);
   --ml-danger: oklch(0.7 0.191 25);
   --ml-danger-foreground: oklch(0.18 0.02 25);
+  --ml-danger-hover: oklch(0.75 0.151 25);
   --ml-danger-text: oklch(0.72 0.174 25);
   --ml-info: oklch(0.74 0.14 250);
   --ml-info-foreground: oklch(0.18 0.02 250);
+  --ml-info-hover: oklch(0.669 0.141 250);
   --ml-info-text: oklch(0.74 0.14 250);
   --ml-chart-1: oklch(0.74 0.136 255);
   --ml-chart-2: oklch(0.74 0.138 50);
@@ -179,7 +188,6 @@
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0593), 0 15.044px 41.44px -8px oklch(0 0 0 / 0.247);
   --ml-shadow-tint: oklch(0 0 0 / 0.1581);
   --ml-focus: var(--ml-primary-text);
-  --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
   --ml-fill-active: color-mix(in oklab, var(--ml-text) 9%, transparent);
   --ml-track: color-mix(in oklab, var(--ml-text) 12%, transparent);
@@ -261,19 +269,24 @@
   --ml-border-subtle: oklch(0.916 0.018 80);
   --ml-primary: oklch(0.638 0.153 58);
   --ml-primary-foreground: oklch(0.18 0.02 58);
+  --ml-primary-hover: oklch(0.678 0.141 58);
   --ml-primary-text: oklch(0.497 0.119 58);
   --ml-primary-subtle: oklch(0.95 0.031 58);
-  --ml-success: oklch(0.611 0.15 150);
-  --ml-success-foreground: oklch(0.18 0.02 150);
+  --ml-success: oklch(0.507 0.14 150);
+  --ml-success-foreground: oklch(0.99 0 0);
+  --ml-success-hover: oklch(0.457 0.126 150);
   --ml-success-text: oklch(0.473 0.13 150);
   --ml-warning: oklch(0.76 0.16 75);
   --ml-warning-foreground: oklch(0.18 0.02 75);
+  --ml-warning-hover: oklch(0.785 0.141 75);
   --ml-warning-text: oklch(0.492 0.104 75);
-  --ml-danger: oklch(0.65 0.2 25);
-  --ml-danger-foreground: oklch(0.18 0.02 25);
+  --ml-danger: oklch(0.547 0.2 25);
+  --ml-danger-foreground: oklch(0.99 0 0);
+  --ml-danger-hover: oklch(0.497 0.2 25);
   --ml-danger-text: oklch(0.512 0.2 25);
-  --ml-info: oklch(0.626 0.16 250);
-  --ml-info-foreground: oklch(0.18 0.02 250);
+  --ml-info: oklch(0.523 0.148 250);
+  --ml-info-foreground: oklch(0.99 0 0);
+  --ml-info-hover: oklch(0.473 0.134 250);
   --ml-info-text: oklch(0.488 0.138 250);
   --ml-chart-1: oklch(0.669 0.16 58);
   --ml-chart-2: oklch(0.62 0.16 255);
@@ -282,7 +295,6 @@
   --ml-chart-5: oklch(0.62 0.16 300);
   --ml-chart-6: oklch(0.62 0.109 185);
   --ml-focus: var(--ml-primary-text);
-  --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
   --ml-fill-active: color-mix(in oklab, var(--ml-text) 9%, transparent);
   --ml-track: color-mix(in oklab, var(--ml-text) 12%, transparent);
@@ -309,19 +321,24 @@
   --ml-border-subtle: oklch(0.257 0.024 260);
   --ml-primary: oklch(0.75 0.16 68);
   --ml-primary-foreground: oklch(0.18 0.02 68);
+  --ml-primary-hover: oklch(0.676 0.141 68);
   --ml-primary-text: oklch(0.75 0.16 68);
   --ml-primary-subtle: oklch(0.222 0.049 68);
   --ml-success: oklch(0.72 0.15 150);
   --ml-success-foreground: oklch(0.18 0.02 150);
+  --ml-success-hover: oklch(0.65 0.132 150);
   --ml-success-text: oklch(0.72 0.15 150);
   --ml-warning: oklch(0.8 0.16 75);
   --ml-warning-foreground: oklch(0.18 0.02 75);
+  --ml-warning-hover: oklch(0.72 0.141 75);
   --ml-warning-text: oklch(0.8 0.16 75);
   --ml-danger: oklch(0.7 0.191 25);
   --ml-danger-foreground: oklch(0.18 0.02 25);
+  --ml-danger-hover: oklch(0.75 0.151 25);
   --ml-danger-text: oklch(0.72 0.174 25);
   --ml-info: oklch(0.74 0.14 250);
   --ml-info-foreground: oklch(0.18 0.02 250);
+  --ml-info-hover: oklch(0.667 0.141 250);
   --ml-info-text: oklch(0.74 0.14 250);
   --ml-chart-1: oklch(0.74 0.147 58);
   --ml-chart-2: oklch(0.74 0.136 255);
@@ -336,7 +353,6 @@
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0946), 0 23.387px 76.821px -8px oklch(0 0 0 / 0.3944);
   --ml-shadow-tint: oklch(0 0 0 / 0.2524);
   --ml-focus: var(--ml-primary-text);
-  --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
   --ml-fill-active: color-mix(in oklab, var(--ml-text) 9%, transparent);
   --ml-track: color-mix(in oklab, var(--ml-text) 12%, transparent);
@@ -417,19 +433,24 @@
   --ml-border-subtle: oklch(0.937 0.006 240);
   --ml-primary: oklch(0.22 0.01 240);
   --ml-primary-foreground: oklch(0.99 0 0);
+  --ml-primary-hover: oklch(0.313 0.009 240);
   --ml-primary-text: oklch(0.22 0.01 240);
   --ml-primary-subtle: oklch(0.972 0.004 240);
-  --ml-success: oklch(0.611 0.15 150);
-  --ml-success-foreground: oklch(0.18 0.02 150);
+  --ml-success: oklch(0.507 0.14 150);
+  --ml-success-foreground: oklch(0.99 0 0);
+  --ml-success-hover: oklch(0.457 0.126 150);
   --ml-success-text: oklch(0.489 0.135 150);
   --ml-warning: oklch(0.76 0.16 75);
   --ml-warning-foreground: oklch(0.18 0.02 75);
+  --ml-warning-hover: oklch(0.788 0.141 75);
   --ml-warning-text: oklch(0.508 0.107 75);
-  --ml-danger: oklch(0.65 0.2 25);
-  --ml-danger-foreground: oklch(0.18 0.02 25);
+  --ml-danger: oklch(0.547 0.2 25);
+  --ml-danger-foreground: oklch(0.99 0 0);
+  --ml-danger-hover: oklch(0.497 0.2 25);
   --ml-danger-text: oklch(0.528 0.2 25);
-  --ml-info: oklch(0.626 0.16 250);
-  --ml-info-foreground: oklch(0.18 0.02 250);
+  --ml-info: oklch(0.523 0.148 250);
+  --ml-info-foreground: oklch(0.99 0 0);
+  --ml-info-hover: oklch(0.473 0.134 250);
   --ml-info-text: oklch(0.503 0.143 250);
   --ml-chart-1: oklch(0.62 0.15 255);
   --ml-chart-2: oklch(0.68 0.18 50);
@@ -438,7 +459,6 @@
   --ml-chart-5: oklch(0.62 0.109 185);
   --ml-chart-6: oklch(0.62 0.15 10);
   --ml-focus: var(--ml-primary-text);
-  --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
   --ml-fill-active: color-mix(in oklab, var(--ml-text) 9%, transparent);
   --ml-track: color-mix(in oklab, var(--ml-text) 12%, transparent);
@@ -465,19 +485,24 @@
   --ml-border-subtle: oklch(0.261 0.013 240);
   --ml-primary: oklch(0.78 0.135 210);
   --ml-primary-foreground: oklch(0.18 0.02 210);
+  --ml-primary-hover: oklch(0.704 0.122 210);
   --ml-primary-text: oklch(0.78 0.135 210);
   --ml-primary-subtle: oklch(0.233 0.04 210);
   --ml-success: oklch(0.72 0.15 150);
   --ml-success-foreground: oklch(0.18 0.02 150);
+  --ml-success-hover: oklch(0.651 0.132 150);
   --ml-success-text: oklch(0.72 0.15 150);
   --ml-warning: oklch(0.8 0.16 75);
   --ml-warning-foreground: oklch(0.18 0.02 75);
+  --ml-warning-hover: oklch(0.721 0.141 75);
   --ml-warning-text: oklch(0.8 0.16 75);
   --ml-danger: oklch(0.7 0.191 25);
   --ml-danger-foreground: oklch(0.18 0.02 25);
+  --ml-danger-hover: oklch(0.75 0.151 25);
   --ml-danger-text: oklch(0.72 0.174 25);
   --ml-info: oklch(0.74 0.14 250);
   --ml-info-foreground: oklch(0.18 0.02 250);
+  --ml-info-hover: oklch(0.669 0.141 250);
   --ml-info-text: oklch(0.74 0.14 250);
   --ml-chart-1: oklch(0.74 0.136 255);
   --ml-chart-2: oklch(0.74 0.138 50);
@@ -492,7 +517,6 @@
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0596), 0 14.034px 41.474px -8px oklch(0 0 0 / 0.2485);
   --ml-shadow-tint: oklch(0 0 0 / 0.159);
   --ml-focus: var(--ml-primary-text);
-  --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
   --ml-fill-active: color-mix(in oklab, var(--ml-text) 9%, transparent);
   --ml-track: color-mix(in oklab, var(--ml-text) 12%, transparent);
@@ -573,19 +597,24 @@
   --ml-border-subtle: oklch(0.93 0.02 260);
   --ml-primary: oklch(0.548 0.24 285);
   --ml-primary-foreground: oklch(0.99 0 0);
+  --ml-primary-hover: oklch(0.498 0.24 285);
   --ml-primary-text: oklch(0.524 0.24 285);
   --ml-primary-subtle: oklch(0.964 0.018 285);
-  --ml-success: oklch(0.611 0.15 150);
-  --ml-success-foreground: oklch(0.18 0.02 150);
+  --ml-success: oklch(0.507 0.14 150);
+  --ml-success-foreground: oklch(0.99 0 0);
+  --ml-success-hover: oklch(0.457 0.126 150);
   --ml-success-text: oklch(0.483 0.133 150);
   --ml-warning: oklch(0.76 0.16 75);
   --ml-warning-foreground: oklch(0.18 0.02 75);
+  --ml-warning-hover: oklch(0.787 0.141 75);
   --ml-warning-text: oklch(0.502 0.106 75);
-  --ml-danger: oklch(0.65 0.2 25);
-  --ml-danger-foreground: oklch(0.18 0.02 25);
+  --ml-danger: oklch(0.547 0.2 25);
+  --ml-danger-foreground: oklch(0.99 0 0);
+  --ml-danger-hover: oklch(0.497 0.2 25);
   --ml-danger-text: oklch(0.522 0.2 25);
-  --ml-info: oklch(0.626 0.16 250);
-  --ml-info-foreground: oklch(0.18 0.02 250);
+  --ml-info: oklch(0.523 0.148 250);
+  --ml-info-foreground: oklch(0.99 0 0);
+  --ml-info-hover: oklch(0.473 0.134 250);
   --ml-info-text: oklch(0.498 0.141 250);
   --ml-chart-1: oklch(0.62 0.17 285);
   --ml-chart-2: oklch(0.62 0.17 145);
@@ -594,7 +623,6 @@
   --ml-chart-5: oklch(0.62 0.109 185);
   --ml-chart-6: oklch(0.62 0.17 255);
   --ml-focus: var(--ml-primary-text);
-  --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
   --ml-fill-active: color-mix(in oklab, var(--ml-text) 9%, transparent);
   --ml-track: color-mix(in oklab, var(--ml-text) 12%, transparent);
@@ -621,19 +649,24 @@
   --ml-border-subtle: oklch(0.261 0.037 270);
   --ml-primary: oklch(0.75 0.134 285);
   --ml-primary-foreground: oklch(0.18 0.02 285);
+  --ml-primary-hover: oklch(0.677 0.176 285);
   --ml-primary-text: oklch(0.75 0.134 285);
   --ml-primary-subtle: oklch(0.229 0.07 285);
   --ml-success: oklch(0.72 0.15 150);
   --ml-success-foreground: oklch(0.18 0.02 150);
+  --ml-success-hover: oklch(0.651 0.132 150);
   --ml-success-text: oklch(0.72 0.15 150);
   --ml-warning: oklch(0.8 0.16 75);
   --ml-warning-foreground: oklch(0.18 0.02 75);
+  --ml-warning-hover: oklch(0.721 0.141 75);
   --ml-warning-text: oklch(0.8 0.16 75);
   --ml-danger: oklch(0.7 0.191 25);
   --ml-danger-foreground: oklch(0.18 0.02 25);
+  --ml-danger-hover: oklch(0.75 0.151 25);
   --ml-danger-text: oklch(0.72 0.174 25);
   --ml-info: oklch(0.74 0.14 250);
   --ml-info-foreground: oklch(0.18 0.02 250);
+  --ml-info-hover: oklch(0.668 0.141 250);
   --ml-info-text: oklch(0.74 0.14 250);
   --ml-chart-1: oklch(0.74 0.14 285);
   --ml-chart-2: oklch(0.74 0.156 145);
@@ -648,7 +681,6 @@
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.1157), 0 35.999px 100.162px -8px oklch(0 0 0 / 0.4819);
   --ml-shadow-tint: oklch(0 0 0 / 0.3084);
   --ml-focus: var(--ml-primary-text);
-  --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
   --ml-fill-active: color-mix(in oklab, var(--ml-text) 9%, transparent);
   --ml-track: color-mix(in oklab, var(--ml-text) 12%, transparent);
@@ -729,19 +761,24 @@
   --ml-border-subtle: oklch(0.914 0.02 135);
   --ml-primary: oklch(0.5 0.138 150);
   --ml-primary-foreground: oklch(0.99 0 0);
+  --ml-primary-hover: oklch(0.45 0.124 150);
   --ml-primary-text: oklch(0.473 0.13 150);
   --ml-primary-subtle: oklch(0.947 0.049 150);
-  --ml-success: oklch(0.611 0.15 150);
-  --ml-success-foreground: oklch(0.18 0.02 150);
+  --ml-success: oklch(0.507 0.14 150);
+  --ml-success-foreground: oklch(0.99 0 0);
+  --ml-success-hover: oklch(0.457 0.126 150);
   --ml-success-text: oklch(0.473 0.13 150);
   --ml-warning: oklch(0.76 0.16 75);
   --ml-warning-foreground: oklch(0.18 0.02 75);
+  --ml-warning-hover: oklch(0.785 0.141 75);
   --ml-warning-text: oklch(0.492 0.104 75);
-  --ml-danger: oklch(0.65 0.2 25);
-  --ml-danger-foreground: oklch(0.18 0.02 25);
+  --ml-danger: oklch(0.547 0.2 25);
+  --ml-danger-foreground: oklch(0.99 0 0);
+  --ml-danger-hover: oklch(0.497 0.2 25);
   --ml-danger-text: oklch(0.512 0.2 25);
-  --ml-info: oklch(0.626 0.16 250);
-  --ml-info-foreground: oklch(0.18 0.02 250);
+  --ml-info: oklch(0.523 0.148 250);
+  --ml-info-foreground: oklch(0.99 0 0);
+  --ml-info-hover: oklch(0.473 0.134 250);
   --ml-info-text: oklch(0.488 0.138 250);
   --ml-chart-1: oklch(0.62 0.14 150);
   --ml-chart-2: oklch(0.62 0.14 300);
@@ -750,7 +787,6 @@
   --ml-chart-5: oklch(0.62 0.14 10);
   --ml-chart-6: oklch(0.62 0.109 185);
   --ml-focus: var(--ml-primary-text);
-  --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
   --ml-fill-active: color-mix(in oklab, var(--ml-text) 9%, transparent);
   --ml-track: color-mix(in oklab, var(--ml-text) 12%, transparent);
@@ -777,19 +813,24 @@
   --ml-border-subtle: oklch(0.255 0.032 145);
   --ml-primary: oklch(0.72 0.15 150);
   --ml-primary-foreground: oklch(0.18 0.02 150);
+  --ml-primary-hover: oklch(0.65 0.132 150);
   --ml-primary-text: oklch(0.72 0.15 150);
   --ml-primary-subtle: oklch(0.221 0.061 150);
   --ml-success: oklch(0.72 0.15 150);
   --ml-success-foreground: oklch(0.18 0.02 150);
+  --ml-success-hover: oklch(0.65 0.132 150);
   --ml-success-text: oklch(0.72 0.15 150);
   --ml-warning: oklch(0.8 0.16 75);
   --ml-warning-foreground: oklch(0.18 0.02 75);
+  --ml-warning-hover: oklch(0.72 0.141 75);
   --ml-warning-text: oklch(0.8 0.16 75);
   --ml-danger: oklch(0.7 0.191 25);
   --ml-danger-foreground: oklch(0.18 0.02 25);
+  --ml-danger-hover: oklch(0.75 0.151 25);
   --ml-danger-text: oklch(0.72 0.174 25);
   --ml-info: oklch(0.74 0.14 250);
   --ml-info-foreground: oklch(0.18 0.02 250);
+  --ml-info-hover: oklch(0.667 0.141 250);
   --ml-info-text: oklch(0.74 0.14 250);
   --ml-chart-1: oklch(0.74 0.129 150);
   --ml-chart-2: oklch(0.74 0.129 300);
@@ -804,7 +845,6 @@
   --ml-shadow-xl: 0 4px 8px oklch(0 0 0 / 0.0794), 0 17.92px 60.917px -8px oklch(0 0 0 / 0.3309);
   --ml-shadow-tint: oklch(0 0 0 / 0.2118);
   --ml-focus: var(--ml-primary-text);
-  --ml-primary-hover: color-mix(in oklab, var(--ml-primary) 88%, var(--ml-background));
   --ml-fill-hover: color-mix(in oklab, var(--ml-text) 5%, transparent);
   --ml-fill-active: color-mix(in oklab, var(--ml-text) 9%, transparent);
   --ml-track: color-mix(in oklab, var(--ml-text) 12%, transparent);
@@ -838,19 +878,24 @@
     --ml-border-subtle: #ececf0;
     --ml-primary: #18181b;
     --ml-primary-foreground: #fcfcfc;
+    --ml-primary-hover: #2f2f31;
     --ml-primary-text: #18181b;
     --ml-primary-subtle: #f7f7fa;
-    --ml-success: #2a9c50;
-    --ml-success-foreground: #0b140d;
+    --ml-success: #007a36;
+    --ml-success-foreground: #fcfcfc;
+    --ml-success-hover: #006a2e;
     --ml-success-text: #007534;
     --ml-warning: #eba002;
     --ml-warning-foreground: #171008;
+    --ml-warning-hover: #efac43;
     --ml-warning-text: #8a5c00;
-    --ml-danger: #f14d4c;
-    --ml-danger-foreground: #1a0e0d;
+    --ml-danger: #cb252d;
+    --ml-danger-foreground: #fcfcfc;
+    --ml-danger-hover: #b9041d;
     --ml-danger-text: #c61e29;
-    --ml-info: #268be4;
-    --ml-info-foreground: #0b121a;
+    --ml-info: #006cbb;
+    --ml-info-foreground: #fcfcfc;
+    --ml-info-hover: #005ea3;
     --ml-info-text: #0067b3;
     --ml-chart-1: #4087de;
     --ml-chart-2: #ed7001;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlola-ui/tokens",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Stable CSS entry for the framework-free Mlola UI design system",
   "main": "tokens.css",
   "sideEffects": [