@motion-proto/live-tokens 0.94.3 → 0.95.0

package/src/demo/evalResults.ts

@@ -1,7 +1,7 @@
-/** One arm of an eval: the same case run with or without the skills, and with or without the CLI. */
+/** One arm of an eval: the same case run with or without the skills, and with or without the lookup command. */
 export interface EvalArm {
   skills: boolean;
-  cli: boolean;
+  lookup: boolean;
   rowsRight: string;
   turns: string;
   seconds: string;
@@ -28,7 +28,7 @@ export const pickComponentEval: EvalResult = {
   arms: [
     {
       skills: true,
-      cli: true,
+      lookup: true,
       rowsRight: '12 of 12 in all 3 runs',
       turns: '9 to 10',
       seconds: '46 to 76',
@@ -36,15 +36,15 @@ export const pickComponentEval: EvalResult = {
     },
     {
       skills: false,
-      cli: true,
-      rowsRight: '12 of 12 in all 3 runs; 2 of 3 found the CLI on their own',
+      lookup: true,
+      rowsRight: '12 of 12 in all 3 runs; 2 of 3 found the lookup on their own',
       turns: '15 to 17',
       seconds: '65 to 102',
       cost: '$0.63 to $0.74',
     },
     {
       skills: true,
-      cli: false,
+      lookup: false,
       rowsRight: '12 of 12 in all 3 runs',
       turns: '14 to 20',
       seconds: '66 to 84',
@@ -52,7 +52,7 @@ export const pickComponentEval: EvalResult = {
     },
     {
       skills: false,
-      cli: false,
+      lookup: false,
       rowsRight: '11 of 12 in one run, which missed requirement 12',
       turns: '17 to 20',
       seconds: '113 to 169',

package/src/demo/sections/SectionClaude.svelte

@@ -66,28 +66,26 @@
   .claude {
     grid-column: 1 / -1;
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
-    column-gap: var(--columns-gutter);
+    grid-template-columns: subgrid;
     row-gap: var(--space-8);
     align-items: start;
-    margin-bottom: var(--space-96);
   }
 
   .claude :global(.section-divider) {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
   }
 
-  /* Panel sits on page columns 2, 3, 4; the copy starts on column 5, hard
+  /* Panel sits on page columns 2 to 5; the copy starts on column 6, hard
      against the panel's right edge. */
   .panel-col {
-    grid-column: 2 / 5;
+    grid-column: 2 / 6;
     grid-row: 2;
     align-self: start;
     margin-top: var(--space-16);
   }
 
   .copy {
-    grid-column: 5 / 11;
+    grid-column: 6 / -2;
     grid-row: 2;
     align-self: start;
     display: flex;
@@ -98,7 +96,7 @@
 
   .intro {
     font-family: var(--font-sans);
-    font-size: var(--font-size-xl);
+    font-size: var(--body-xl-font-size);
     line-height: var(--line-height-tighter);
     font-weight: var(--font-weight-semibold);
     color: var(--text-primary);
@@ -114,7 +112,7 @@
   .install-caption {
     margin: 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
+    font-size: var(--body-md-font-size);
     line-height: var(--line-height-normal);
     color: var(--text-secondary);
   }
@@ -171,17 +169,16 @@
 
   .skill-name {
     font-family: var(--font-sans);
-    font-size: var(--font-size-2xl);
+    font-size: var(--heading-md-font-size);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-normal);
     color: var(--text-primary);
   }
 
-  @media (max-width: 960px) {
-    .claude :global(.section-divider),
+  @media (max-width: 1200px) {
     .panel-col,
     .copy {
-      grid-column: 1 / -1;
+      grid-column: var(--kit-content);
     }
 
     .panel-col,
@@ -189,4 +186,14 @@
       grid-row: auto;
     }
   }
+
+  @media (max-width: 600px) {
+    .atlas {
+      align-items: stretch;
+    }
+
+    .atlas-actions {
+      flex-direction: column;
+    }
+  }
 </style>

package/src/demo/sections/SectionFooter.svelte

@@ -16,7 +16,7 @@
 
 <style>
   .provenance {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
     padding-top: var(--space-24);
     border-top: var(--border-width-2) solid var(--border-neutral);
     display: flex;
@@ -34,7 +34,7 @@
   .license {
     margin: 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-lg);
+    font-size: var(--body-lg-font-size);
     color: var(--text-secondary);
   }
 
@@ -52,13 +52,12 @@
   .copyright {
     margin: 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
+    font-size: var(--body-md-font-size);
     color: var(--text-secondary);
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .provenance {
-      grid-column: 1 / -1;
       flex-direction: column;
       align-items: flex-start;
       gap: var(--space-24);

package/src/demo/sections/SectionGetStarted.svelte

@@ -34,12 +34,11 @@ npm run dev`;
   .get-started {
     grid-column: 1 / -1;
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
-    column-gap: var(--columns-gutter);
+    grid-template-columns: subgrid;
   }
 
   .gs-panel {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
     /* The .kit grid can stretch this section's row past its content (min-height:
        100vh on a short page); keep the panel sized to its content regardless. */
     align-self: start;
@@ -68,7 +67,7 @@ npm run dev`;
 
   .intro {
     font-family: var(--font-sans);
-    font-size: var(--font-size-xl);
+    font-size: var(--body-xl-font-size);
     line-height: var(--line-height-tighter);
     font-weight: var(--font-weight-semibold);
     color: var(--text-primary);
@@ -91,9 +90,9 @@ npm run dev`;
     overflow-y: hidden;
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .columns {
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
       align-items: stretch;
     }
   }

package/src/demo/sections/SectionHero.svelte

@@ -29,7 +29,7 @@
 
     <p class="hero-tagline">
       Design system authoring for Svelte.<br />
-      Edit tokens and components directly in the browser.<br />Ship plain CSS.
+      Edit tokens and components directly in the browser.<br class="desktop-break" /> Ship plain CSS.
     </p>
   </div>
 
@@ -63,18 +63,20 @@
   .hero {
     grid-column: 1 / -1;
     position: relative;
-    padding: var(--space-48) 0 var(--space-16);
+    padding: var(--space-48) 0 0;
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
-    column-gap: var(--columns-gutter);
+    grid-template-columns: subgrid;
   }
 
+  /* The title runs across the kite on the full content width; the tagline
+     keeps the first five columns. */
   .hero-text {
-    grid-column: 2 / span 5;
+    grid-column: var(--kit-content);
     grid-row: 1;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-16);
+    display: grid;
+    grid-template-columns: subgrid;
+    align-content: start;
+    row-gap: var(--space-16);
     position: relative;
     padding: var(--space-96) 0 0;
   }
@@ -89,36 +91,37 @@
 
   .hero-title {
     font-family: var(--font-display);
-    font-size: var(--font-size-7xl);
+    font-size: var(--display-xl-font-size);
     font-weight: var(--font-weight-semibold);
     font-variation-settings: 'opsz' 144, 'SOFT' 30;
     color: var(--text-primary);
     line-height: .9;
     margin: 0;
+    grid-column: 1 / -1;
   }
 
   .hero-italic {
     font-family: var(--heading-xl-font-family);
-    font-size: var(--font-size-6xl);
+    font-size: var(--display-lg-font-size);
     font-weight: var(--font-weight-normal);
     color: var(--text-brand);
     font-variation-settings: 'opsz' 144, 'SOFT' 100;
-    white-space: nowrap;
   }
 
   .hero-tagline {
     font-family: var(--body-md-font-family);
-    font-size: var(--font-size-2xl);
+    font-size: var(--body-2xl-font-size);
     color: var(--text-primary);
     line-height: 1.2;
-    max-width: 48rem;
+    grid-column: 1 / span 5;
     margin: var(--space-8) 0 0;
+    text-wrap: pretty;
   }
 
   /* One row: the CTAs on the left rail, the credits on the right, sharing a
      top edge so the buttons sit on the brand-mark line. */
   .hero-actions {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
     grid-row: 2;
     display: grid;
     grid-template-columns: max-content 1fr;
@@ -148,7 +151,7 @@
 
   .hero-byline {
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
+    font-size: var(--body-md-font-size);
     font-weight: var(--font-weight-normal);
     line-height: var(--line-height-normal);
     color: var(--text-secondary);
@@ -164,20 +167,31 @@
     text-decoration: underline;
   }
 
-  @media (max-width: 960px) {
-    .hero-kite {
-      grid-column: 1 / -1;
+  @media (max-width: 1200px) {
+    /* Stacked, the illustration sits between the title and the tagline, so the
+       wrapper steps aside and each takes its own row of the hero grid. */
+    .hero-text {
+      display: contents;
+    }
+    .hero-title {
       grid-row: 1;
-      height: 28rem;
     }
-    .hero-text {
+    .hero-kite {
       grid-column: 1 / -1;
       grid-row: 2;
-      padding: 0;
+      height: 28rem;
+      margin-top: var(--space-32);
     }
-    .hero-actions {
+    .hero-tagline {
       grid-column: 1 / -1;
       grid-row: 3;
+      margin-top: var(--space-16);
+    }
+    .desktop-break {
+      display: none;
+    }
+    .hero-actions {
+      grid-row: 4;
       grid-template-columns: minmax(0, 1fr);
       row-gap: var(--space-16);
       margin-top: var(--space-12);
@@ -189,9 +203,15 @@
     }
   }
 
+  /* A phone wraps the second line, so the title steps up a size and the two
+     lines get a gap to tell them apart. */
   @media (max-width: 600px) {
     .hero-title {
-      font-size: var(--font-size-5xl);
+      font-size: var(--display-2xl-font-size);
+    }
+    .hero-italic {
+      display: block;
+      margin-top: var(--space-16);
     }
     .hero-controls {
       grid-template-columns: minmax(0, 1fr);

package/src/demo/sections/SectionKit.svelte

@@ -2,11 +2,15 @@
   import Button from '../../system/components/Button.svelte';
   import SectionDivider from '../../system/components/SectionDivider.svelte';
   import SegmentedControl from '../../system/components/SegmentedControl.svelte';
+  import { MediaQuery } from 'svelte/reactivity';
   import Panel from '../../system/components/Panel.svelte';
   import Section from '../Section.svelte';
 
   let { prose = true }: { prose?: boolean } = $props();
 
+  // Matches the demo's phone breakpoint in Demo.svelte.
+  const phone = new MediaQuery('max-width: 600px');
+
   type Override = 'shape' | 'color';
 
   let shape = $state(false);
@@ -35,39 +39,98 @@
     return out;
   })();
 
-  const colorOverride: Record<string, string> = {
-    '--button-primary-surface': 'var(--surface-special-high)',
-    '--button-primary-border': 'var(--border-special)',
-    '--button-primary-hover-surface': 'var(--surface-special-higher)',
-    '--button-primary-hover-border': 'var(--border-special-strong)',
-
-    '--button-outline-border': 'var(--border-special)',
-    '--button-outline-text': 'var(--text-special)',
-    '--button-outline-hover-border': 'var(--border-special-strong)',
-
-    '--button-success-surface': 'var(--surface-accent-low)',
-    '--button-success-border': 'var(--border-accent)',
-    '--button-success-text': 'var(--text-accent)',
-    '--button-success-hover-surface': 'var(--surface-accent-higher)',
-    '--button-success-hover-border': 'var(--border-accent-strong)',
-
-    '--button-warning-surface': 'var(--surface-info-low)',
-    '--button-warning-border': 'var(--border-info)',
-    '--button-warning-text': 'var(--text-info)',
-    '--button-warning-hover-surface': 'var(--surface-info-high)',
-    '--button-warning-hover-border': 'var(--border-info-medium)',
-
-    '--button-danger-surface': 'var(--surface-brand-low)',
-    '--button-danger-border': 'var(--border-brand)',
-    '--button-danger-text': 'var(--text-brand)',
-    '--button-danger-hover-surface': 'var(--surface-brand-high)',
-    '--button-danger-hover-border': 'var(--border-brand-medium)',
-  };
+  const FAMILIES = ['brand', 'accent', 'special', 'info', 'success', 'warning', 'danger'] as const;
+  type Family = (typeof FAMILIES)[number];
+  // The family each swapped variant paints from. Outline follows primary.
+  const SOURCES = { primary: 'brand', success: 'success', warning: 'warning', danger: 'danger' } as const;
+  type Swapped = keyof typeof SOURCES;
+  // Themes can give two families near-identical hues (Autumn's warning and
+  // accent share one), so a fixed swap can land on the colour it replaces.
+  const MIN_HUE_SHIFT = 60;
+  const SAME_HUE = 15;
+
+  let colorMap = $state<Record<Swapped, Family> | null>(null);
+  let colorStep = 0;
+
+  function familyHues(): Record<Family, number> {
+    const probe = document.createElement('span');
+    document.body.appendChild(probe);
+    const hues = {} as Record<Family, number>;
+    for (const family of FAMILIES) {
+      probe.style.color = `var(--color-${family}-500)`;
+      hues[family] = Number(/oklch\(\S+ \S+ ([\d.]+)/.exec(getComputedStyle(probe).color)?.[1] ?? 0);
+    }
+    probe.remove();
+    return hues;
+  }
+
+  function hueGap(a: number, b: number): number {
+    const d = Math.abs(a - b) % 360;
+    return Math.min(d, 360 - d);
+  }
+
+  /** Each variant takes a family far enough round the wheel from its own,
+   *  on a hue no other variant has where the theme has enough, rotated by
+   *  `step`. Hue, not family: two families can share one. */
+  function pickColorMap(step: number): Record<Swapped, Family> {
+    const hues = familyHues();
+    const used: number[] = [];
+    const map = {} as Record<Swapped, Family>;
+    for (const [variant, source] of Object.entries(SOURCES) as [Swapped, Family][]) {
+      const byGap = FAMILIES.filter((f) => f !== source).sort((a, b) => hueGap(hues[b], hues[source]) - hueGap(hues[a], hues[source]));
+      const far = byGap.filter((f) => hueGap(hues[f], hues[source]) >= MIN_HUE_SHIFT);
+      const pool = far.length > 0 ? far : byGap.slice(0, 1);
+      const rotated = pool.map((_, i) => pool[(i + step) % pool.length]);
+      map[variant] = rotated.find((f) => used.every((h) => hueGap(h, hues[f]) >= SAME_HUE)) ?? rotated[0];
+      used.push(hues[map[variant]]);
+    }
+    return map;
+  }
+
+  function nextColorMap(): Record<Swapped, Family> {
+    const current = JSON.stringify(colorMap);
+    for (let tries = 0; tries < FAMILIES.length; tries++) {
+      const map = pickColorMap(++colorStep);
+      if (JSON.stringify(map) !== current) return map;
+    }
+    return pickColorMap(colorStep);
+  }
+
+  function colorOverride({ primary: p, success: s, warning: w, danger: d }: Record<Swapped, Family>): Record<string, string> {
+    return {
+      '--button-primary-surface': `var(--surface-${p}-high)`,
+      '--button-primary-border': `var(--border-${p})`,
+      '--button-primary-hover-surface': `var(--surface-${p}-higher)`,
+      '--button-primary-hover-border': `var(--border-${p}-strong)`,
+
+      '--button-outline-border': `var(--border-${p})`,
+      '--button-outline-text': `var(--text-${p})`,
+      '--button-outline-hover-border': `var(--border-${p}-strong)`,
+
+      '--button-success-surface': `var(--surface-${s}-low)`,
+      '--button-success-border': `var(--border-${s})`,
+      '--button-success-text': `var(--text-${s})`,
+      '--button-success-hover-surface': `var(--surface-${s}-higher)`,
+      '--button-success-hover-border': `var(--border-${s}-strong)`,
+
+      '--button-warning-surface': `var(--surface-${w}-low)`,
+      '--button-warning-border': `var(--border-${w})`,
+      '--button-warning-text': `var(--text-${w})`,
+      '--button-warning-hover-surface': `var(--surface-${w}-high)`,
+      '--button-warning-hover-border': `var(--border-${w}-medium)`,
+
+      '--button-danger-surface': `var(--surface-${d}-low)`,
+      '--button-danger-border': `var(--border-${d})`,
+      '--button-danger-text': `var(--text-${d})`,
+      '--button-danger-hover-surface': `var(--surface-${d}-high)`,
+      '--button-danger-hover-border': `var(--border-${d}-medium)`,
+    };
+  }
 
   let stageStyle = $derived.by(() => {
     const merged: Record<string, string> = {};
     if (shape) Object.assign(merged, shapeOverride);
-    if (color) Object.assign(merged, colorOverride);
+    if (color && colorMap) Object.assign(merged, colorOverride(colorMap));
     return Object.entries(merged)
       .map(([k, v]) => `${k}: ${v}`)
       .join('; ');
@@ -96,9 +159,11 @@
       lastApplied = shape ? 'shape' : color ? 'color' : null;
       return;
     }
+    // Every press of Color is a new swap, so it never toggles back off.
     if (v === 'color') {
-      color = !color;
-      lastApplied = color ? 'color' : shape ? 'shape' : null;
+      colorMap = nextColorMap();
+      color = true;
+      lastApplied = 'color';
     }
   }
 </script>
@@ -156,7 +221,7 @@
     <div class="swap-block">
       <div class="swap-control">
         <SectionDivider title="Swap tokens with a click" variant="sm" />
-        <SegmentedControl {segments} value={activeSegment} onchange={handleSelect} />
+        <SegmentedControl {segments} value={activeSegment} onchange={handleSelect} size={phone.current ? 'small' : 'default'} />
       </div>
 
       <Panel style={stageStyle}>
@@ -184,7 +249,7 @@
      columns and the row stops at column 9, leaving column 10 open on the right. */
   .kit-grid {
     display: grid;
-    grid-template-columns: repeat(calc(var(--columns-count) - 2), 1fr);
+    grid-template-columns: repeat(calc(var(--columns-count) - 2), minmax(0, 1fr));
     column-gap: var(--columns-gutter);
     row-gap: var(--space-32);
   }
@@ -202,7 +267,8 @@
     padding: 0 0 var(--space-12);
   }
 
-  /* Title, body and icon mirror the Card typography used in the Layers section. */
+  /* Title and body match the Card in the Layers section at desktop sizes, and
+     take the text styles' phone sizes below it. */
   .kit-icon {
     font-size: var(--icon-size-2xl);
     color: var(--text-primary);
@@ -211,7 +277,7 @@
   .kit-title {
     color: var(--text-primary);
     font-family: var(--font-sans);
-    font-size: var(--font-size-2xl);
+    font-size: var(--heading-md-font-size);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-normal);
   }
@@ -219,7 +285,7 @@
   .kit-body {
     padding: var(--space-12) 0 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-xl);
+    font-size: var(--body-xl-font-size);
     line-height: var(--line-height-normal);
     font-weight: var(--font-weight-normal);
     color: var(--text-secondary);
@@ -270,7 +336,7 @@
     --sketch-hatch-color: var(--color-brand-500);
   }
 
-  /* The head only carries a surface of its own when stacked (see the 960
+  /* The head only carries a surface of its own when stacked (see the 1200
      breakpoint). Here it has none, and --sketch-fill inherits, so without this
      the layer would draw the lead's wash a second time behind the head. */
   .kit-lead .kit-head {
@@ -288,14 +354,14 @@
   }
 
   .kit-lead .kit-title {
-    font-size: var(--font-size-4xl);
+    font-size: var(--heading-xl-font-size);
     font-weight: var(--font-weight-bold);
   }
 
   .kit-lead .kit-body {
     grid-column: 4 / span 6;
     padding: var(--space-32) 0;
-    font-size: var(--font-size-2xl);
+    font-size: var(--body-2xl-font-size);
     color: var(--text-primary);
   }
 
@@ -304,7 +370,7 @@
   .kit-preview {
     margin-top: var(--space-32);
     display: grid;
-    grid-template-columns: repeat(calc(var(--columns-count) - 2), 1fr);
+    grid-template-columns: repeat(calc(var(--columns-count) - 2), minmax(0, 1fr));
     column-gap: var(--columns-gutter);
   }
 
@@ -349,7 +415,7 @@
   .stage-eyebrow {
     align-self: center;
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
+    font-size: var(--body-md-font-size);
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--letter-spacing-wide);
     text-transform: uppercase;
@@ -373,9 +439,10 @@
     justify-content: center;
   }
 
-  @media (max-width: 960px) {
-    .kit-grid {
-      grid-template-columns: 1fr;
+  @media (max-width: 1200px) {
+    .kit-grid,
+    .kit-preview {
+      grid-template-columns: minmax(0, 1fr);
     }
     .kit-item {
       grid-column: auto;
@@ -404,7 +471,36 @@
     }
     .kit-lead .kit-body {
       padding: var(--space-16) var(--space-20);
-      font-size: var(--font-size-xl);
+      font-size: var(--body-xl-font-size);
+    }
+  }
+
+  /* Phone: the lead's text lines up with the page margin, and the head's tint
+     bleeds out to the screen edges. The tint is a border-image outset, which
+     paints past the box without widening the section. The swap control spans
+     the column, its segments sharing the width. */
+  @media (max-width: 600px) {
+    .swap-control {
+      margin-top: var(--space-8);
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--space-8);
+    }
+    .swap-control :global(.segmented-control) {
+      display: flex;
+    }
+    .swap-control :global(.segment) {
+      flex: 1 1 0;
+      min-width: 0;
+      justify-content: center;
+    }
+    .kit-lead .kit-head {
+      padding-inline: 0;
+      background: none;
+      border-image: conic-gradient(var(--kit-head-tint) 0 0) fill 0 / 0 / 0 var(--columns-margin);
+    }
+    .kit-lead .kit-body {
+      padding-inline: 0;
     }
   }
 </style>

package/src/demo/sections/SectionLayers.svelte

@@ -28,7 +28,7 @@
 <style>
   .arch {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     column-gap: var(--columns-gutter);
     row-gap: var(--space-32);
   }
@@ -46,9 +46,9 @@
     border-radius: var(--radius-sm);
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .arch {
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
     }
   }
 </style>