@mlola-ui/tokens 1.0.13 → 1.1.0

package/generated/recipes.css

@@ -1513,6 +1513,7 @@ button.ml-breadcrumb-link {
 .ml-button {
   position: relative;
   display: inline-flex;
+  max-width: 100%;
   min-height: var(--ml-control-md);
   align-items: center;
   justify-content: center;
@@ -1528,7 +1529,6 @@ button.ml-breadcrumb-link {
   line-height: 1;
   letter-spacing: -.006em;
   text-decoration: none;
-  white-space: nowrap;
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
@@ -1649,10 +1649,22 @@ button.ml-breadcrumb-link {
   padding: 0;
 }
 
+/* A label too long for the space wraps onto balanced lines instead of
+   spilling out. The taller line height is taken back by the margins, so a
+   one-line button is exactly as tall as before. */
 .ml-button-label {
   display: inline-flex;
   align-items: center;
   gap: var(--ml-space-1-5);
+  margin-block: -.1em;
+  line-height: 1.2;
+  text-align: center;
+  text-wrap: balance;
+}
+
+.ml-button[data-width="full"] {
+  display: flex;
+  width: 100%;
 }
 
 .ml-button[data-state="success"] {
@@ -3493,13 +3505,16 @@ button.ml-breadcrumb-link {
   font-size: var(--ml-type-md);
 }
 
+/* A field that is a button or a group says it is invalid with data-invalid: aria-invalid belongs to inputs. */
 .ml-input-field[data-invalid] .ml-input,
-.ml-input[aria-invalid="true"] {
+.ml-input[aria-invalid="true"],
+.ml-input[data-invalid] {
   border-color: var(--ml-danger);
 }
 
 .ml-input-field[data-invalid] .ml-input:focus,
-.ml-input[aria-invalid="true"]:focus {
+.ml-input[aria-invalid="true"]:focus,
+.ml-input[data-invalid]:focus {
   box-shadow: 0 0 0 3px color-mix(in oklab,var(--ml-danger) 20%,transparent);
 }
 

package/generated/tokens.css

@@ -69,7 +69,7 @@
   --ml-font-sans: var(--font-inter, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --ml-font-display: var(--font-inter, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --ml-font-mono: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SFMono-Regular", Consolas, monospace;
-  --ml-display-weight: 742;
+  --ml-display-weight: 700;
   --ml-body-leading: 1.495;
   --ml-tracking: -0.0088em;
   --ml-icon-stroke: 1.974;
@@ -235,7 +235,7 @@
   --ml-font-sans: var(--font-inter, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --ml-font-display: var(--font-newsreader, "Newsreader"), "Iowan Old Style", Georgia, serif;
   --ml-font-mono: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SFMono-Regular", Consolas, monospace;
-  --ml-display-weight: 828;
+  --ml-display-weight: 800;
   --ml-body-leading: 1.536;
   --ml-tracking: -0.0133em;
   --ml-icon-stroke: 1.687;
@@ -399,7 +399,7 @@
   --ml-font-sans: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SFMono-Regular", Consolas, monospace;
   --ml-font-display: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SFMono-Regular", Consolas, monospace;
   --ml-font-mono: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SFMono-Regular", Consolas, monospace;
-  --ml-display-weight: 723;
+  --ml-display-weight: 700;
   --ml-body-leading: 1.47;
   --ml-tracking: -0.0076em;
   --ml-icon-stroke: 2.049;
@@ -563,7 +563,7 @@
   --ml-font-sans: var(--font-inter, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --ml-font-display: var(--font-inter, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --ml-font-mono: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SFMono-Regular", Consolas, monospace;
-  --ml-display-weight: 782;
+  --ml-display-weight: 800;
   --ml-body-leading: 1.558;
   --ml-tracking: -0.009em;
   --ml-icon-stroke: 1.736;
@@ -727,7 +727,7 @@
   --ml-font-sans: var(--font-inter, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --ml-font-display: var(--font-inter, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --ml-font-mono: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SFMono-Regular", Consolas, monospace;
-  --ml-display-weight: 792;
+  --ml-display-weight: 800;
   --ml-body-leading: 1.541;
   --ml-tracking: -0.011em;
   --ml-icon-stroke: 1.834;

package/package.json

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

package/tokens.json

@@ -145,6 +145,7 @@
           "color": {
             "primary": "oklch(0.21 0.006 286)",
             "primaryDark": null,
+            "primaryForeground": "auto",
             "neutral": {
               "hue": 286,
               "chroma": 0.004
@@ -1187,6 +1188,7 @@
           "color": {
             "primary": "oklch(0.55 0.16 58)",
             "primaryDark": "oklch(0.75 0.16 68)",
+            "primaryForeground": "auto",
             "neutral": {
               "hue": 80,
               "chroma": 0.016
@@ -2232,6 +2234,7 @@
           "color": {
             "primary": "oklch(0.22 0.01 240)",
             "primaryDark": "oklch(0.78 0.15 210)",
+            "primaryForeground": "auto",
             "neutral": {
               "hue": 240,
               "chroma": 0.004
@@ -3277,6 +3280,7 @@
           "color": {
             "primary": "oklch(0.55 0.24 285)",
             "primaryDark": "oklch(0.75 0.2 285)",
+            "primaryForeground": "auto",
             "neutral": {
               "hue": 260,
               "chroma": 0.018
@@ -4322,6 +4326,7 @@
           "color": {
             "primary": "oklch(0.5 0.14 150)",
             "primaryDark": "oklch(0.72 0.15 150)",
+            "primaryForeground": "auto",
             "neutral": {
               "hue": 135,
               "chroma": 0.018