@mlola-ui/tokens 1.2.0 → 1.2.2

package/generated/recipes.css

@@ -207,7 +207,10 @@
   justify-items: center;
 }
 
+/* Its width is stated: centered by auto margins alone, a flex or grid item
+   takes its text's width instead of its measure. */
 .ml-section-header-centered .ml-section-description {
+  width: 100%;
   margin-inline: auto;
 }
 
@@ -1606,16 +1609,6 @@ button.ml-breadcrumb-link {
   background: color-mix(in oklab,var(--ml-background-subtle) 100%,var(--ml-text) 6%);
 }
 
-/* A toggle button that is on reads as filled ink, so its state is visible
-   without relying on color alone. */
-.ml-button[data-variant="secondary"][aria-pressed="true"],
-.ml-button[data-variant="subtle"][aria-pressed="true"],
-.ml-button[data-variant="outline"][aria-pressed="true"] {
-  border-color: transparent;
-  background: var(--ml-text);
-  color: var(--ml-background);
-}
-
 .ml-button[data-variant="subtle"] {
   background: transparent;
   color: var(--ml-text);
@@ -1637,6 +1630,20 @@ button.ml-breadcrumb-link {
   background: color-mix(in oklab,var(--ml-surface) 100%,var(--ml-text) 4%);
 }
 
+/* A toggle button that is on reads as filled ink, so its state is visible
+   without relying on color alone. It stays ink under the pointer, a shade
+   lighter: a variant's own hover fill under this ink-colored text would
+   leave the label unreadable. After the variants' hovers, and above them. */
+.ml-button:is([data-variant="secondary"], [data-variant="subtle"], [data-variant="outline"])[aria-pressed="true"] {
+  border-color: transparent;
+  background: var(--ml-text);
+  color: var(--ml-background);
+}
+
+.ml-button:is([data-variant="secondary"], [data-variant="subtle"], [data-variant="outline"])[aria-pressed="true"]:hover {
+  background: color-mix(in oklab, var(--ml-text) 86%, var(--ml-background));
+}
+
 .ml-button[data-variant="danger"] {
   background: var(--ml-danger);
   color: var(--ml-danger-foreground);
@@ -4568,8 +4575,14 @@ button.ml-breadcrumb-link {
 }
 
 /* components/resizable */
-.ml-resizable {
+/* The handle's width is a setting (an app shell draws a hairline): its
+   default weighs nothing, so one class on the same element sets it, in any
+   stylesheet order. */
+:where(.ml-resizable) {
   --ml-resizable-handle: var(--ml-space-2);
+}
+
+.ml-resizable {
   display: grid;
   height: 100%;
   min-width: 0;

package/package.json

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