jig-ui 0.4.0 → 0.5.0

package/tokens/mode.editorial.css

@@ -28,9 +28,27 @@
   --text-body:    16px;  --leading-body:    1.5;    /* UI text: labels, controls */
   --text-prose:   18px;  --leading-prose:   1.6;    /* LONG-FORM text. Never below 18. */
   --text-lead:    20px;  --leading-lead:    1.5;
+
+  /* H1 and H2 are FLUID: they interpolate with viewport width instead of
+     switching at a breakpoint, which is why this system defines no breakpoint
+     token. Each clamp is the line through (360px viewport, min) and (1024px,
+     max); outside that range it saturates at the bounds.
+
+     The `rem` term is not decoration. `clamp(32px, 8vw, 48px)` would ignore a
+     reader who has set a larger default font size — page zoom scales `vw`, a
+     font-size preference does not — which fails WCAG 1.4.4. Keeping every term
+     in `rem` plus `vw` means the whole curve moves with the user's setting.
+
+     Only headings. Body and prose stay fixed: readability is absolute, set by
+     the eye and viewing distance, while heading size is relative — it exists to
+     contrast with body, and that contrast can compress on a narrow screen. A
+     fluid `--text-prose` would also breach the 18px floor (B-75, T20).
+
+     The minimums land on rungs the ladder already has rather than on new
+     values. Line heights are unitless, so they follow the size for free. */
   --text-h3:      24px;  --leading-h3:      1.333;
-  --text-h2:      32px;  --leading-h2:      1.25;
-  --text-h1:      48px;  --leading-h1:      1.1;
+  --text-h2:      clamp(1.5rem, 1.229rem + 1.205vw, 2rem);  --leading-h2: 1.25;   /* 24 → 32 */
+  --text-h1:      clamp(2rem, 1.458rem + 2.41vw, 3rem);     --leading-h1: 1.1;    /* 32 → 48 */
 
   /* Two weights only. More adds noise and is hard to apply consistently. */
   --font-weight-regular: 400;
@@ -66,8 +84,32 @@
   --duration-fast: 150ms;  --duration-base: 250ms;  --duration-slow: 300ms;
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* Ambient motion (P-13). Decorative looping movement, editorial only —
+     `product` and `operator` define none of these, deliberately.
+
+     THE THREE VALUES ARE NOT A LADDER, THEY ARE A CHORD. Ambient motion is
+     layered: several small movements running at once. If their periods share a
+     factor they re-align, and the whole composition pulses in unison — the one
+     thing ambient motion must never do. So the periods are mutually prime in
+     tenths of a second (30, 47, 71), which puts the first full re-alignment of
+     all three past two hours. Round numbers like 3/4/6s would re-align every
+     twelve seconds. That is why these look arbitrary; they are not.
+
+     Pick a different one per layer. Which is which carries no meaning beyond
+     speed — unlike the interaction durations above, there is no "this is the
+     one for a state change". */
+  --duration-ambient-fast: 3s;
+  --duration-ambient-base: 4.7s;
+  --duration-ambient-slow: 7.1s;
 }
 
 @media (prefers-reduced-motion: reduce) {
+  /* The ambient periods are deliberately NOT collapsed to 1ms here. These drive
+     infinite loops, so 1ms would spin them at a thousand cycles a second rather
+     than stop them — the opposite of what was asked for. P-13 requires the whole
+     ambient declaration to sit inside `prefers-reduced-motion: no-preference`,
+     so under a reduce preference the animation never starts and there is nothing
+     to shorten. Absence, not speed. */
   :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
 }

package/tokens/mode.operator.css

@@ -27,8 +27,19 @@
      Line heights UNITLESS. FLOOR: 1.5 holds even here. */
   --text-caption: 12px;  --leading-caption: 1.5;
   --text-body:    14px;  --leading-body:    1.5;
-  --text-prose:   16px;  --leading-prose:   1.6;    /* LONG-FORM text only */
+  /* 18px, not 16px, and not negotiable by density. `B-75` names 18px as the
+     floor for sustained reading, and the reference agrees — "make long body
+     text at least 18px". This token sat at 16px, which made our own rule false
+     in the one mode most likely to be read for long stretches by someone who
+     has been at it all day. Sustained readability is an accessibility floor
+     like `--size-touch-target`, not a density dial. Long prose is rare in an
+     operator surface; when it appears, it is legible. */
+  --text-prose:   18px;  --leading-prose:   1.6;    /* LONG-FORM text only */
   --text-lead:    16px;  --leading-lead:    1.5;
+  /* No fluid headings here, unlike editorial and product. This mode's largest
+     heading is 22px, which already fits ~28 characters per line on a 360px
+     screen — fluid sizing would have nothing to do. The mechanism is absent
+     because the problem is, not by oversight. */
   --text-h3:      16px;  --leading-h3:      1.5;
   --text-h2:      18px;  --leading-h2:      1.4;
   --text-h1:      22px;  --leading-h1:      1.333;
@@ -67,6 +78,10 @@
   --ease-out: cubic-bezier(0.2, 0, 0, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
+  /* No ambient duration tokens here, deliberately. Ambient motion is
+     editorial only (P-13) — a surface someone works in all day must not
+     have anything moving on it that they did not cause. */
+
   --font-numeric: var(--font-numeric-features);
 }
 

package/tokens/mode.product.css

@@ -27,9 +27,27 @@
   --text-body:    16px;  --leading-body:    1.5;
   --text-prose:   18px;  --leading-prose:   1.6;    /* LONG-FORM text only */
   --text-lead:    20px;  --leading-lead:    1.5;
+
+  /* H1 and H2 are FLUID: they interpolate with viewport width instead of
+     switching at a breakpoint, which is why this system defines no breakpoint
+     token. Each clamp is the line through (360px viewport, min) and (1024px,
+     max); outside that range it saturates at the bounds.
+
+     The `rem` term is not decoration. `clamp(32px, 8vw, 48px)` would ignore a
+     reader who has set a larger default font size — page zoom scales `vw`, a
+     font-size preference does not — which fails WCAG 1.4.4. Keeping every term
+     in `rem` plus `vw` means the whole curve moves with the user's setting.
+
+     Only headings. Body and prose stay fixed: readability is absolute, set by
+     the eye and viewing distance, while heading size is relative — it exists to
+     contrast with body, and that contrast can compress on a narrow screen. A
+     fluid `--text-prose` would also breach the 18px floor (B-75, T20).
+
+     The minimums land on rungs the ladder already has rather than on new
+     values. Line heights are unitless, so they follow the size for free. */
   --text-h3:      20px;  --leading-h3:      1.4;
-  --text-h2:      24px;  --leading-h2:      1.333;
-  --text-h1:      32px;  --leading-h1:      1.25;
+  --text-h2:      clamp(1.25rem, 1.114rem + 0.602vw, 1.5rem);  --leading-h2: 1.333;  /* 20 → 24 */
+  --text-h1:      clamp(1.5rem, 1.229rem + 1.205vw, 2rem);     --leading-h1: 1.25;   /* 24 → 32 */
 
   --font-weight-regular: 400;
   --font-weight-bold:    600;
@@ -63,6 +81,10 @@
   --duration-fast: 100ms;  --duration-base: 150ms;  --duration-slow: 200ms;
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* No ambient duration tokens here, deliberately. Ambient motion is
+     editorial only (P-13) — a surface someone works in all day must not
+     have anything moving on it that they did not cause. */
 }
 
 @media (prefers-reduced-motion: reduce) {