@mlola-ui/tokens 1.1.27 → 1.2.1

package/generated/foundations.css

@@ -82,15 +82,15 @@ body {
 }
 
 h1 {
-  font-size: clamp(2.25rem,5vw,4.75rem);
+  font-size: var(--ml-type-display-lg);
 }
 
 h2 {
-  font-size: clamp(1.75rem,3.2vw,3rem);
+  font-size: var(--ml-type-display-md);
 }
 
 h3 {
-  font-size: clamp(1.25rem,2vw,1.75rem);
+  font-size: var(--ml-type-display-sm);
 }
 
 :where(code,kbd,samp,pre) {

package/generated/recipes.css

@@ -101,7 +101,7 @@
 
 .ml-display {
   font-family: var(--ml-font-display);
-  font-size: clamp(2.5rem,6vw,4.5rem);
+  font-size: var(--ml-type-display-lg);
   font-weight: var(--ml-display-weight);
   line-height: 1.05;
   letter-spacing: -.03em;
@@ -175,7 +175,7 @@
 }
 
 .ml-section {
-  padding-block: clamp(3.5rem,8vw,6.5rem);
+  padding-block: var(--ml-space-fluid-xl);
   /* A section is a grid or flex item in a page shell; without this, a wide
      table inside it widens the whole page instead of scrolling in place. */
   min-width: 0;
@@ -197,7 +197,7 @@
 .ml-section-header {
   display: grid;
   gap: var(--ml-space-3);
-  margin-block-end: clamp(2rem,5vw,3rem);
+  margin-block-end: var(--ml-space-fluid-md);
   max-width: 42rem;
 }
 
@@ -224,7 +224,7 @@
 
 .ml-heading {
   font-family: var(--ml-font-display);
-  font-size: clamp(1.75rem,3.2vw,2.75rem);
+  font-size: var(--ml-type-display-md);
   font-weight: var(--ml-display-weight);
   line-height: 1.1;
   letter-spacing: -.025em;
@@ -501,7 +501,7 @@
   flex-wrap: wrap;
   align-items: baseline;
   gap: var(--ml-space-1-5);
-  font-size: clamp(2rem,4vw,2.75rem);
+  font-size: var(--ml-type-display-md);
   font-weight: 800;
   letter-spacing: -.03em;
 }
@@ -1665,6 +1665,17 @@ button.ml-breadcrumb-link {
   color: var(--ml-primary-text);
 }
 
+/* A link button is drawn as text, a line tall. On touch it keeps that look
+   and gains an invisible target around it, as a control marked
+   data-hit="expand" does, so a finger reaches it (WCAG 2.5.8). */
+@media (pointer: coarse) {
+  .ml-button[data-variant="link"]::after {
+    position: absolute;
+    inset: min(calc(var(--ml-space-1-5) * -1), calc((var(--ml-target-min) - 100%) / -2));
+    content: "";
+  }
+}
+
 .ml-button[data-size="sm"] {
   min-height: var(--ml-control-sm);
   gap: var(--ml-space-1-5);

package/generated/tokens.css

@@ -19,6 +19,10 @@
   --ml-space-12: 3rem;
   --ml-space-14: 3.5rem;
   --ml-space-16: 4rem;
+  --ml-space-fluid-sm: clamp(1.25rem, 3vw, 2.5rem);
+  --ml-space-fluid-md: clamp(2rem, 5vw, 3rem);
+  --ml-space-fluid-lg: clamp(2rem, 5vw, 4rem);
+  --ml-space-fluid-xl: clamp(3.5rem, 8vw, 6.5rem);
   --ml-type-2xs: 0.6875rem;
   --ml-type-xs: 0.75rem;
   --ml-type-sm: 0.8125rem;
@@ -27,6 +31,10 @@
   --ml-type-lg: 1.125rem;
   --ml-type-xl: 1.25rem;
   --ml-type-2xl: 1.5rem;
+  --ml-type-display-sm: clamp(1.375rem, 2.5vw, 1.875rem);
+  --ml-type-display-md: clamp(1.75rem, 3.5vw, 2.75rem);
+  --ml-type-display-lg: clamp(2.5rem, 6vw, 4.5rem);
+  --ml-type-display-xl: clamp(4rem, 14vw, 8rem);
   --ml-leading-tight: 1.25;
   --ml-leading-snug: 1.4;
   --ml-leading-normal: 1.55;

package/package.json

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