@motion-proto/live-tokens 0.56.1 → 0.57.0

package/src/editor/pages/EditorShell.svelte

@@ -6,6 +6,7 @@
   import ColorsTab from '../ui/colors/ColorsTab.svelte';
   import EditorViewSwitcher from '../ui/EditorViewSwitcher.svelte';
   import ComponentsTab from '../component-editor/scaffolding/ComponentsTab.svelte';
+  import SketchTab from '../ui/sketch/SketchTab.svelte';
   import ThemePanel from '../ui/ThemePanel.svelte';
   import { scrollSectionIntoView } from '../ui/scrollSection';
   import { editorView, sidebarCondensed, selectedComponent } from '../core/store/editorViewStore';
@@ -31,11 +32,22 @@
     { id: 'colors-story', label: 'Story', icon: 'fas fa-layer-group' }
   ];
 
+  const sketchNavItems = [
+    { id: 'sketch-border', label: 'Border', icon: 'fas fa-pen-nib' },
+    { id: 'sketch-fill', label: 'Fill', icon: 'fas fa-fill-drip' },
+    { id: 'sketch-shape', label: 'Shape', icon: 'fas fa-draw-polygon' },
+    { id: 'sketch-icons', label: 'Icons', icon: 'fas fa-shapes' },
+    { id: 'sketch-noise', label: 'Noise', icon: 'fas fa-wave-square' },
+    { id: 'sketch-preview', label: 'Preview', icon: 'fas fa-eye' }
+  ];
+
   const allComponentNavItems = getComponentRegistryEntries().map(({ id, label, icon, origin }) => ({ id, label, icon, origin }));
   const systemNavItems = allComponentNavItems.filter((i) => i.origin === 'system');
   const customNavItems = allComponentNavItems.filter((i) => i.origin === 'custom');
 
   let selectedTokenSection: string | null = $state(null);
+  /** Rebuilt per click so a panel can react to the same target twice. */
+  let sectionJump: { id: string } | null = $state(null);
 
   // 'auto' = open by default. Auto-condensing on shellWidth caused a bounce
   // as the overlay panel grew past the threshold mid-animation.
@@ -70,10 +82,19 @@
 
   function scrollToSection(sectionId: string) {
     selectedTokenSection = sectionId;
+    sectionJump = { id: sectionId };
     const el = document.getElementById(sectionId);
     if (el) scrollSectionIntoView(el);
   }
 
+  /** The Sketch panel is an accordion, so it opens the target and scrolls once
+      the reveal has settled. Scrolling from here would read offsetTop before
+      the other sections have collapsed. */
+  function jumpToSketchSection(sectionId: string) {
+    selectedTokenSection = sectionId;
+    sectionJump = { id: sectionId };
+  }
+
   function selectComponent(id: string) {
     selectedComponent.set(id);
     hideHint();
@@ -129,6 +150,26 @@
           <ThemePanel />
         </div>
       {/if}
+    {:else if $editorView === 'sketch'}
+      <div class="nav-items">
+        {#each sketchNavItems as item (item.id)}
+          <button
+            class="nav-item"
+            class:active={selectedTokenSection === item.id}
+            onmouseenter={(e) => showHint(item.label, e.currentTarget)}
+            onmouseleave={hideHint}
+            onclick={() => jumpToSketchSection(item.id)}
+          >
+            <i class={item.icon}></i>
+            <span class="nav-label">{item.label}</span>
+          </button>
+        {/each}
+      </div>
+      {#if !condensed}
+        <div class="sidebar-footer">
+          <ThemePanel />
+        </div>
+      {/if}
     {:else if $editorView === 'colors'}
       <div class="nav-items">
         {#each colorsNavItems as item (item.id)}
@@ -202,6 +243,8 @@
       <VariablesTab />
     {:else if $editorView === 'colors'}
       <ColorsTab />
+    {:else if $editorView === 'sketch'}
+      <SketchTab {sectionJump} />
     {:else}
       <ComponentsTab selectedComponent={$selectedComponent} />
     {/if}

package/src/editor/ui/EditorViewSwitcher.svelte

@@ -18,19 +18,21 @@
   let componentsDisabled = $derived($parentRoute === DEFAULT_COMPONENTS_PATH);
   let colorsDisabled = $derived($parentRoute === DEFAULT_COLORS_PATH);
 
-  // Editing flow order: Tokens → Colors → Components. The condensed rail cycles
+  // Editing flow order: Tokens → Colors → Components → Sketch. The condensed rail cycles
   // through these; a view is skipped while it's disabled (already on that
   // page) so the cycle never lands on a dead view.
-  const CYCLE: readonly EditorView[] = ['tokens', 'colors', 'components'];
+  const CYCLE: readonly EditorView[] = ['tokens', 'colors', 'components', 'sketch'];
   const ICONS: Record<EditorView, string> = {
     tokens: 'fa-sliders',
     colors: 'fa-palette',
     components: 'fa-cubes',
+    sketch: 'fa-pen-nib',
   };
   const LABELS: Record<EditorView, string> = {
     tokens: 'Tokens',
     colors: 'Colors',
     components: 'Components',
+    sketch: 'Sketch',
   };
 
   function set(v: EditorView) {
@@ -103,6 +105,17 @@
         <span class="radio" aria-hidden="true"></span>
         <span>Components</span>
       </button>
+      <button
+        type="button"
+        role="tab"
+        class="seg-btn"
+        class:active={$editorView === 'sketch'}
+        aria-selected={$editorView === 'sketch'}
+        onclick={() => set('sketch')}
+      >
+        <span class="radio" aria-hidden="true"></span>
+        <span>Sketch</span>
+      </button>
     </div>
   </div>
 {/if}

package/src/editor/ui/FontStackEditor.svelte

@@ -25,6 +25,7 @@
     '--font-sans',
     '--font-serif',
     '--font-mono',
+    '--font-editorial',
   ];
 
   // Each stack's terminal fallback (bottom slot). It's locked to system or
@@ -35,6 +36,7 @@
     '--font-sans': 'sans-serif',
     '--font-serif': 'serif',
     '--font-mono': 'monospace',
+    '--font-editorial': 'sans-serif',
   };
 
   // The single matching System UI preset paired with each stack — the only two
@@ -44,6 +46,7 @@
     '--font-sans': 'system-ui-sans',
     '--font-serif': 'system-ui-serif',
     '--font-mono': 'system-ui-mono',
+    '--font-editorial': 'system-ui-sans',
   };
 
   let fontSourcesList = $derived($editorState.fonts.sources);

package/src/editor/ui/GradientEditor.svelte

@@ -6,6 +6,7 @@
   import { tick, onMount } from 'svelte';
   import { get } from 'svelte/store';
   import type { GradientType, GradientTokenStop } from '../core/store/editorTypes';
+  import { LINEAR_DIRECTIONS, type LinearDirection } from '../core/themes/parsers/gradient';
   import {
     colorsAndTypeGradientSource,
     snapshotGradient,
@@ -87,6 +88,11 @@
     gradientSource.setAngle(detail.value);
   }
 
+  function onDirectionChange(e: Event) {
+    const v = (e.currentTarget as HTMLSelectElement).value;
+    gradientSource.setDirection(v === '' ? undefined : (v as LinearDirection));
+  }
+
   function onAspectChange(detail: { x: number; y: number }) {
     gradientSource.setAspect(detail);
   }
@@ -375,7 +381,26 @@
       </div>
     {:else if gradient.type === 'linear'}
       <div class="ribbon-pad ribbon-pad-linear">
-        <AngleDial value={gradient.angle} size={64} orientation="vertical" label="" onchange={onAngleChange} />
+        <!-- A direction keyword overrides the dial: CSS angles it off the box's
+             own diagonal, so the dial has no single value to show. -->
+        <AngleDial
+          value={gradient.angle}
+          size={64}
+          orientation="vertical"
+          label=""
+          onchange={onAngleChange}
+        />
+        <select
+          class="direction-select"
+          aria-label="Gradient direction"
+          value={gradient.direction ?? ''}
+          onchange={onDirectionChange}
+        >
+          <option value="">{gradient.angle}deg</option>
+          {#each LINEAR_DIRECTIONS as d (d)}
+            <option value={d}>{d}</option>
+          {/each}
+        </select>
       </div>
     {/if}
 
@@ -440,6 +465,18 @@
 {/if}
 
 <style>
+  .direction-select {
+    margin-top: var(--ui-space-2, 8px);
+    max-width: 8.5rem;
+    font: inherit;
+    font-size: 0.75rem;
+    color: var(--ui-gray-1000, #eee);
+    background: var(--ui-gray-300, #212121);
+    border: 1px solid var(--ui-gray-450, #3a3a3a);
+    border-radius: 4px;
+    padding: 2px 4px;
+  }
+
   /* Header labels share grid tracks with the ribbon + pad below them. */
   .gradient-editor {
     display: grid;

package/src/editor/ui/UIReveal.svelte

@@ -1,3 +1,9 @@
+<script module lang="ts">
+  /** Shared so a caller that must wait for the pane to settle — scrolling to a
+      section it just opened, say — does not hard-code the number. */
+  export const REVEAL_MS = 260;
+</script>
+
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { slide } from 'svelte/transition';
@@ -22,7 +28,7 @@
     children: Snippet;
   }
 
-  let { open, style = undefined, duration = 260, children }: Props = $props();
+  let { open, style = undefined, duration = REVEAL_MS, children }: Props = $props();
 
   const reduceMotion = typeof window !== 'undefined'
     && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;

package/src/editor/ui/UISegmentedControl.svelte

@@ -65,7 +65,7 @@
     align-items: center;
     gap: var(--ui-space-6, 6px);
     padding: var(--ui-space-4, 4px) var(--ui-space-12, 12px);
-    color: var(--ui-text-secondary, rgba(255, 255, 255, 0.65));
+    color: var(--ui-text-primary, #fff);
     font-family: inherit;
     font-size: var(--ui-font-size-sm, 14px);
     font-weight: var(--ui-font-weight-medium, 500);
@@ -92,12 +92,12 @@
 
   .ui-seg-item:hover:not(.active) {
     background: rgba(255, 255, 255, 0.06);
-    color: var(--ui-text-primary, #fff);
   }
 
+  /* Every label sits at full brightness, so the pill fill is the only thing
+     carrying selection. It has to stay clearly lighter than a hover. */
   .ui-seg-item.active {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
-    color: var(--ui-text-primary, #fff);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.3) 100%);
   }
 
   .ui-seg-item:has(input:focus-visible) {
@@ -106,9 +106,5 @@
 
   .ui-seg-item i {
     font-size: var(--ui-font-size-xs, 12px);
-    color: rgba(255, 255, 255, 0.65);
-  }
-  .ui-seg-item.active i {
-    color: rgba(255, 255, 255, 0.85);
   }
 </style>

package/src/editor/ui/sections/GradientsSection.svelte

@@ -9,6 +9,12 @@
    */
   import { editorState } from '../../core/store/editorStore';
   import GradientEditor from '../GradientEditor.svelte';
+  import UIPillButton from '../UIPillButton.svelte';
+  import {
+    addGradientToken,
+    removeGradientToken,
+    nextGradientSlot,
+  } from '../../core/themes/slices/gradients';
 
   interface Props {
     copiedVar?: string | null;
@@ -20,11 +26,37 @@
   function copy(v: string) { oncopy?.(v); }
 
   let editingGradient: string | null = $state(null);
+
+  /** A new slot seeds from the library's last entry, so it lands as a visible
+   *  gradient the user edits rather than an invisible transparent one. */
+  function addGradient() {
+    const tokens = $editorState.gradients.tokens;
+    const seed = tokens[tokens.length - 1];
+    const variable = nextGradientSlot(tokens);
+    addGradientToken({
+      variable,
+      type: 'linear',
+      angle: seed?.angle ?? 90,
+      ...(seed?.direction ? { direction: seed.direction } : {}),
+      stops: seed
+        ? seed.stops.map((st) => ({ ...st }))
+        : [
+            { position: 0, color: '--color-brand-500' },
+            { position: 100, color: '--color-accent-500' },
+          ],
+    });
+    editingGradient = variable;
+  }
+
+  function removeGradient(variable: string) {
+    if (editingGradient === variable) editingGradient = null;
+    removeGradientToken(variable);
+  }
 </script>
 
 <section class="section" id="gradients">
   <h2 class="section-title">Gradients</h2>
-  <p class="editor-intro">Each stop references a color token, so palette edits flow through. Add or remove stops; switch between linear and radial.</p>
+  <p class="editor-intro">Each stop references a color token, so palette edits flow through. Add or remove stops; switch between linear and radial; point a gradient at an angle or at a corner.</p>
   <div class="gradients-grid">
     {#each $editorState.gradients.tokens as token (token.variable)}
       {@const isEditing = editingGradient === token.variable}
@@ -36,6 +68,13 @@
           <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           {#if !isEditing}
             <button class="gradient-edit-btn" onclick={() => editingGradient = token.variable}>Edit</button>
+            {#if $editorState.gradients.tokens.length > 1}
+              <button
+                class="gradient-edit-btn"
+                aria-label={`Remove ${token.variable}`}
+                onclick={() => removeGradient(token.variable)}
+              >Remove</button>
+            {/if}
           {/if}
         </div>
         {#if isEditing}
@@ -50,9 +89,16 @@
       </div>
     {/each}
   </div>
+  <div class="gradients-actions">
+    <UIPillButton onclick={addGradient}>Add gradient</UIPillButton>
+  </div>
 </section>
 
 <style>
+  .gradients-actions {
+    display: flex;
+  }
+
   .section {
     display: flex;
     flex-direction: column;

package/src/editor/ui/sketch/SketchDial.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  interface Props {
+    label: string;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    readout: string;
+    hint: string;
+    /** Captions under the two ends of the track, for a dial with no natural unit. */
+    ends?: [string, string];
+    onchange: (value: number) => void;
+  }
+
+  let { label, value, min, max, step, readout, hint, ends, onchange }: Props = $props();
+
+  let filled = $derived(`${((value - min) / (max - min)) * 100}%`);
+</script>
+
+<label class="dial" data-hint={hint} style:--filled={filled}>
+  <span class="dial-label">{label}</span>
+  <span class="dial-value">{readout}</span>
+  <input
+    type="range"
+    {min}
+    {max}
+    {step}
+    {value}
+    oninput={(e) => onchange(+e.currentTarget.value)}
+  />
+  {#if ends}
+    <span class="ends"><span>{ends[0]}</span><span>{ends[1]}</span></span>
+  {/if}
+</label>
+
+<style>
+  .dial {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 0 var(--ui-space-12);
+    align-items: baseline;
+  }
+
+  .dial-label {
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-primary);
+  }
+
+  .dial-value {
+    font-size: var(--ui-font-size-md);
+    font-family: var(--ui-font-mono);
+    color: var(--ui-text-primary);
+  }
+
+  /* Painted rather than left to accent-color: the browser's own range chrome
+     renders the track and thumb too dark to read against --ui-surface-low. */
+  input[type='range'] {
+    grid-column: 1 / -1;
+    width: 100%;
+    margin-top: var(--ui-space-2);
+    height: var(--ui-space-16);
+    -webkit-appearance: none;
+    appearance: none;
+    background:
+      linear-gradient(
+        to right,
+        var(--ui-text-primary) var(--filled),
+        var(--ui-border-high) var(--filled)
+      )
+      center / 100% 4px no-repeat;
+    cursor: ew-resize;
+  }
+
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: var(--ui-space-16);
+    height: var(--ui-space-16);
+    border-radius: var(--ui-radius-full);
+    background: var(--ui-text-primary);
+    box-shadow: var(--ui-shadow-sm);
+  }
+
+  input[type='range']::-moz-range-thumb {
+    width: var(--ui-space-16);
+    height: var(--ui-space-16);
+    border: none;
+    border-radius: var(--ui-radius-full);
+    background: var(--ui-text-primary);
+    box-shadow: var(--ui-shadow-sm);
+  }
+
+  .ends {
+    grid-column: 1 / -1;
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-tertiary);
+  }
+
+  input[type='range']:focus-visible {
+    outline: 2px solid var(--ui-highlight);
+    outline-offset: 4px;
+  }
+
+  /* Absolutely positioned so a hint never reflows the stack of dials under it. */
+  .dial:hover::after {
+    content: attr(data-hint);
+    position: absolute;
+    top: calc(100% + var(--ui-space-2));
+    left: 0;
+    right: 0;
+    z-index: 2;
+    padding: var(--ui-space-8) var(--ui-space-10);
+    background: var(--ui-surface-high);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-md);
+    box-shadow: var(--ui-shadow-md);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height-relaxed);
+    pointer-events: none;
+  }
+</style>

package/src/editor/ui/sketch/SketchPreview.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import Button from '../../../system/components/Button.svelte';
+  import Card from '../../../system/components/Card.svelte';
+  import Input from '../../../system/components/Input.svelte';
+  import Badge from '../../../system/components/Badge.svelte';
+  import Callout from '../../../system/components/Callout.svelte';
+  import Toggle from '../../../system/components/Toggle.svelte';
+  import { setSketchScope } from '../../core/sketch/sketchLayer';
+  import type { SketchSettings } from '../../core/sketch/sketchPresets';
+
+  interface Props {
+    settings: SketchSettings;
+    enabled: boolean;
+  }
+
+  let { settings, enabled }: Props = $props();
+
+  let stage = $state<HTMLDivElement | undefined>(undefined);
+
+  // The scope attribute goes on this container rather than the editor document
+  // root, so the editor's own chrome never picks the effect up.
+  $effect(() => {
+    setSketchScope(stage ?? null, enabled ? settings : null);
+  });
+</script>
+
+<div class="stage" bind:this={stage}>
+  <section class="item">
+    <h4>Buttons</h4>
+    <div class="cluster">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="danger">Danger</Button>
+    </div>
+  </section>
+
+  <section class="item">
+    <h4>Cards</h4>
+    <div class="cluster">
+      <Card title="Rough draft">
+        <p>Fill and outline displace on different noise seeds, so they disagree at the edges.</p>
+      </Card>
+      <Card title="Second card">
+        <p>Same size and same preset. A different seed keeps the silhouette from repeating.</p>
+      </Card>
+    </div>
+  </section>
+
+  <section class="item">
+    <h4>Badges</h4>
+    <div class="cluster">
+      <Badge variant="info">Info</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="danger">Danger</Badge>
+    </div>
+  </section>
+
+  <section class="item">
+    <h4>Form</h4>
+    <div class="cluster stack">
+      <Input label="Name" placeholder="Ada Lovelace" hint="Helper text stays crisp" />
+      <Toggle label="Enabled" checked />
+    </div>
+  </section>
+
+  <section class="item">
+    <h4>Callouts</h4>
+    <div class="cluster stack">
+      <Callout variant="info" label="Note">Body text is never filtered, so it stays fully legible.</Callout>
+      <Callout variant="warning" label="Careful">Only the fill and outline layers move.</Callout>
+    </div>
+  </section>
+</div>
+
+<style>
+  .stage {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-24);
+    padding: var(--ui-space-24);
+    background: var(--surface-neutral-lowest);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-md);
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-10);
+  }
+
+  h4 {
+    margin: 0;
+    font-family: var(--ui-font-sans);
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ui-text-muted);
+  }
+
+  .cluster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-16);
+    align-items: flex-start;
+  }
+
+  .cluster.stack {
+    flex-direction: column;
+    max-width: 28rem;
+  }
+
+  .cluster :global(.card) {
+    max-width: 20rem;
+  }
+</style>