@mlola-ui/tokens 1.0.13 → 1.1.1

package/generated/recipes.css

@@ -374,6 +374,18 @@
   font-weight: 800;
 }
 
+/* A brand's own logo takes the mark's place: no chip, the text color, the mark's size. */
+.ml-brand-mark[data-kind="logo"] {
+  background: none;
+  color: var(--ml-text);
+}
+
+.ml-brand-mark[data-kind="logo"] > :is(svg, img) {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .ml-brand-name {
   font-size: var(--ml-type-md);
   letter-spacing: -.02em;
@@ -1513,6 +1525,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 +1541,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 +1661,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 +3517,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;
@@ -200,6 +200,68 @@
   --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
+/* data-mode="system" follows the reader's setting: light by default, dark when they ask for it. */
+@media (prefers-color-scheme: dark) {
+:root[data-mode="system"],
+:root[data-theme="graphite"][data-mode="system"],
+[data-theme="graphite"][data-mode="system"] {
+  color-scheme: dark;
+  --ml-background: oklch(0.148 0.005 286);
+  --ml-background-subtle: oklch(0.206 0.005 286);
+  --ml-surface: oklch(0.18 0.005 286);
+  --ml-surface-elevated: oklch(0.215 0.005 286);
+  --ml-text: oklch(0.959 0.004 286);
+  --ml-text-muted: oklch(0.71 0.01 286);
+  --ml-text-faint: oklch(0.64 0.008 286);
+  --ml-border: oklch(0.31 0.006 286);
+  --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-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);
+  --ml-chart-3: oklch(0.74 0.138 145);
+  --ml-chart-4: oklch(0.74 0.138 300);
+  --ml-chart-5: oklch(0.74 0.13 185);
+  --ml-chart-6: oklch(0.74 0.138 10);
+  --ml-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.1087);
+  --ml-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.0889), 0 2.052px 5.92px -1px oklch(0 0 0 / 0.1186);
+  --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.079), 0 4.103px 13.32px -2px oklch(0 0 0 / 0.1581);
+  --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0692), 0 8.206px 23.68px -4px oklch(0 0 0 / 0.1976);
+  --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-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);
+  --ml-control-border: var(--ml-text-faint);
+  --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
+  --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
+}
+}
+
 @supports (transition-timing-function: linear(0, 1)) {
 :root,
 :root[data-theme="graphite"],
@@ -235,7 +297,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;
@@ -365,6 +427,67 @@
   --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
+/* data-mode="system" follows the reader's setting: light by default, dark when they ask for it. */
+@media (prefers-color-scheme: dark) {
+:root[data-theme="atelier"][data-mode="system"],
+[data-theme="atelier"][data-mode="system"] {
+  color-scheme: dark;
+  --ml-background: oklch(0.134 0.022 260);
+  --ml-background-subtle: oklch(0.192 0.024 260);
+  --ml-surface: oklch(0.171 0.022 260);
+  --ml-surface-elevated: oklch(0.206 0.024 260);
+  --ml-text: oklch(0.954 0.01 80);
+  --ml-text-muted: oklch(0.705 0.022 80);
+  --ml-text-faint: oklch(0.635 0.016 80);
+  --ml-border: oklch(0.306 0.028 260);
+  --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);
+  --ml-chart-3: oklch(0.74 0.147 145);
+  --ml-chart-4: oklch(0.74 0.147 10);
+  --ml-chart-5: oklch(0.74 0.147 300);
+  --ml-chart-6: oklch(0.74 0.13 185);
+  --ml-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.1735);
+  --ml-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.142), 0 3.189px 10.974px -1px oklch(0 0 0 / 0.1893);
+  --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.1262), 0 6.378px 24.692px -2px oklch(0 0 0 / 0.2524);
+  --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.1104), 0 12.756px 43.898px -4px oklch(0 0 0 / 0.3155);
+  --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-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);
+  --ml-control-border: var(--ml-text-faint);
+  --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
+  --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
+}
+}
+
 @supports (transition-timing-function: linear(0, 1)) {
 :root[data-theme="atelier"],
 [data-theme="atelier"] {
@@ -399,7 +522,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;
@@ -529,6 +652,67 @@
   --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
+/* data-mode="system" follows the reader's setting: light by default, dark when they ask for it. */
+@media (prefers-color-scheme: dark) {
+:root[data-theme="machined"][data-mode="system"],
+[data-theme="machined"][data-mode="system"] {
+  color-scheme: dark;
+  --ml-background: oklch(0.145 0.012 240);
+  --ml-background-subtle: oklch(0.203 0.013 240);
+  --ml-surface: oklch(0.177 0.012 240);
+  --ml-surface-elevated: oklch(0.212 0.013 240);
+  --ml-text: oklch(0.958 0.004 240);
+  --ml-text-muted: oklch(0.708 0.01 240);
+  --ml-text-faint: oklch(0.638 0.008 240);
+  --ml-border: oklch(0.309 0.016 240);
+  --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);
+  --ml-chart-3: oklch(0.74 0.138 145);
+  --ml-chart-4: oklch(0.74 0.138 300);
+  --ml-chart-5: oklch(0.74 0.13 185);
+  --ml-chart-6: oklch(0.74 0.138 10);
+  --ml-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.1093);
+  --ml-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.0894), 0 1.914px 5.925px -1px oklch(0 0 0 / 0.1193);
+  --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.0795), 0 3.828px 13.331px -2px oklch(0 0 0 / 0.159);
+  --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0696), 0 7.655px 23.699px -4px oklch(0 0 0 / 0.1988);
+  --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-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);
+  --ml-control-border: var(--ml-text-faint);
+  --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
+  --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
+}
+}
+
 @supports (transition-timing-function: linear(0, 1)) {
 :root[data-theme="machined"],
 [data-theme="machined"] {
@@ -563,7 +747,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;
@@ -693,6 +877,67 @@
   --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
+/* data-mode="system" follows the reader's setting: light by default, dark when they ask for it. */
+@media (prefers-color-scheme: dark) {
+:root[data-theme="aerogel"][data-mode="system"],
+[data-theme="aerogel"][data-mode="system"] {
+  color-scheme: dark;
+  --ml-background: oklch(0.141 0.034 270);
+  --ml-background-subtle: oklch(0.199 0.037 270);
+  --ml-surface: oklch(0.185 0.034 270);
+  --ml-surface-elevated: oklch(0.22 0.037 270);
+  --ml-text: oklch(0.956 0.01 260);
+  --ml-text-muted: oklch(0.712 0.025 260);
+  --ml-text-faint: oklch(0.642 0.018 260);
+  --ml-border: oklch(0.309 0.044 270);
+  --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);
+  --ml-chart-3: oklch(0.74 0.156 50);
+  --ml-chart-4: oklch(0.74 0.156 10);
+  --ml-chart-5: oklch(0.74 0.13 185);
+  --ml-chart-6: oklch(0.74 0.136 255);
+  --ml-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.2121);
+  --ml-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.1735), 0 4.909px 14.309px -1px oklch(0 0 0 / 0.2313);
+  --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.1542), 0 9.818px 32.195px -2px oklch(0 0 0 / 0.3084);
+  --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.1349), 0 19.636px 57.235px -4px oklch(0 0 0 / 0.3855);
+  --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-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);
+  --ml-control-border: var(--ml-text-faint);
+  --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
+  --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
+}
+}
+
 @supports (transition-timing-function: linear(0, 1)) {
 :root[data-theme="aerogel"],
 [data-theme="aerogel"] {
@@ -727,7 +972,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;
@@ -857,6 +1102,67 @@
   --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
 }
 
+/* data-mode="system" follows the reader's setting: light by default, dark when they ask for it. */
+@media (prefers-color-scheme: dark) {
+:root[data-theme="nordic"][data-mode="system"],
+[data-theme="nordic"][data-mode="system"] {
+  color-scheme: dark;
+  --ml-background: oklch(0.133 0.029 145);
+  --ml-background-subtle: oklch(0.191 0.032 145);
+  --ml-surface: oklch(0.167 0.029 145);
+  --ml-surface-elevated: oklch(0.202 0.032 145);
+  --ml-text: oklch(0.953 0.01 135);
+  --ml-text-muted: oklch(0.701 0.025 135);
+  --ml-text-faint: oklch(0.632 0.018 135);
+  --ml-border: oklch(0.302 0.037 145);
+  --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);
+  --ml-chart-3: oklch(0.74 0.129 50);
+  --ml-chart-4: oklch(0.74 0.129 255);
+  --ml-chart-5: oklch(0.74 0.129 10);
+  --ml-chart-6: oklch(0.74 0.129 185);
+  --ml-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.1456);
+  --ml-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.1191), 0 2.444px 8.702px -1px oklch(0 0 0 / 0.1588);
+  --ml-shadow-md: 0 1px 2px oklch(0 0 0 / 0.1059), 0 4.887px 19.58px -2px oklch(0 0 0 / 0.2118);
+  --ml-shadow-lg: 0 2px 4px oklch(0 0 0 / 0.0927), 0 9.775px 34.81px -4px oklch(0 0 0 / 0.2647);
+  --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-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);
+  --ml-control-border: var(--ml-text-faint);
+  --ml-ring: 0 0 0 3px color-mix(in oklab, var(--ml-focus) 24%, transparent);
+  --ml-scrim: oklch(from var(--ml-background) calc(l * 0.22) c h / calc(0.54 - l * 0.28));
+  --ml-highlight: oklch(1 0 0);
+  --ml-knob: var(--ml-highlight);
+  --ml-knob-shadow: 0 0 0 1px oklch(0 0 0 / 0.25), 0 1px 4px oklch(0 0 0 / 0.3);
+  --ml-sheen: linear-gradient(135deg, color-mix(in oklab, var(--ml-highlight) 18%, transparent), transparent 46%, oklch(0 0 0 / 0.05));
+}
+}
+
 @supports (transition-timing-function: linear(0, 1)) {
 :root[data-theme="nordic"],
 [data-theme="nordic"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlola-ui/tokens",
-  "version": "1.0.13",
+  "version": "1.1.1",
   "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