@motion-proto/live-tokens 0.44.0 → 0.46.0

package/src/editor/ui/UIEasingSelector.svelte

@@ -234,7 +234,5 @@
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
     font-family: var(--ui-font-mono);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
   }
 </style>

package/src/editor/ui/UIFontFamilySelector.svelte

@@ -5,7 +5,7 @@
   import { resolveAliasChain } from '../core/palettes/tokenRegistry';
   import { editorState } from '../core/store/editorStore';
   import { CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
-  import type { FontFamily, FontSource } from '../core/themes/themeTypes';
+  import type { FontFamily, FontSource, FontSourceKind } from '../core/themes/themeTypes';
   import UITokenSelector from './UITokenSelector.svelte';
   import UIOptionList from './UIOptionList.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
@@ -28,6 +28,13 @@
     onchange,
   }: Props = $props();
 
+  const SOURCE_KIND_LABELS: Record<FontSourceKind, string> = {
+    google: 'Google Fonts',
+    typekit: 'Typekit',
+    'css-url': 'CSS URL',
+    'font-face': 'Font face',
+  };
+
   const options = [
     { key: 'display', label: 'Display' },
     { key: 'sans', label: 'Sans' },
@@ -219,7 +226,7 @@
             <div class="pfs-submenu">
               {#each fontSources as source (source.id)}
                 {#if source.families.length > 0}
-                  <div class="pfs-source-label">{source.label ?? source.kind}</div>
+                  <div class="pfs-source-label">{source.label ?? SOURCE_KIND_LABELS[source.kind]}</div>
                   {#each source.families as fam (fam.id)}
                     <UIOptionItem
                       active={chosenFamilyId === fam.id}
@@ -329,6 +336,5 @@
     font-family: var(--ui-font-mono);
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-tertiary);
-    text-transform: uppercase;
   }
 </style>

package/src/editor/ui/UIMenuButton.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Heading line inside the menu; also its accessible name. */
+    header: string;
+    /** Accessible name for an icon-only trigger; a text trigger names itself. */
+    triggerLabel?: string;
+    /** Lets the caller style the trigger as its own furniture via `:global`. */
+    triggerClass?: string;
+    menuMinWidth?: string;
+    trigger: Snippet;
+    children: Snippet<[{ close: () => void }]>;
+  }
+
+  let {
+    header,
+    triggerLabel,
+    triggerClass = '',
+    menuMinWidth = '14rem',
+    trigger,
+    children,
+  }: Props = $props();
+
+  let open = $state(false);
+  let btnEl = $state<HTMLButtonElement | undefined>(undefined);
+  let menuEl = $state<HTMLDivElement | undefined>(undefined);
+  let initialItem = $state<'first' | 'last'>('first');
+
+  function items(): HTMLButtonElement[] {
+    return menuEl ? Array.from(menuEl.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')) : [];
+  }
+
+  function close(refocusTrigger = true) {
+    if (!open) return;
+    open = false;
+    if (refocusTrigger) btnEl?.focus();
+  }
+
+  function toggle() {
+    if (open) {
+      close();
+    } else {
+      initialItem = 'first';
+      open = true;
+    }
+  }
+
+  function onTriggerKeydown(e: KeyboardEvent) {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
+    e.preventDefault();
+    initialItem = e.key === 'ArrowUp' ? 'last' : 'first';
+    open = true;
+  }
+
+  // Enter and Space activate the focused item natively: items are real buttons.
+  function onMenuKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' || e.key === 'Tab') {
+      e.preventDefault();
+      close();
+      return;
+    }
+    const list = items();
+    if (list.length === 0) return;
+    const idx = list.indexOf(document.activeElement as HTMLButtonElement);
+    let next = -1;
+    if (e.key === 'ArrowDown') next = idx === -1 ? 0 : (idx + 1) % list.length;
+    else if (e.key === 'ArrowUp') next = idx === -1 ? list.length - 1 : (idx - 1 + list.length) % list.length;
+    else if (e.key === 'Home') next = 0;
+    else if (e.key === 'End') next = list.length - 1;
+    if (next === -1) return;
+    e.preventDefault();
+    list[next].focus();
+  }
+
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && open) close();
+  }
+
+  function onDocumentMousedown(e: MouseEvent) {
+    if (!open) return;
+    const target = e.target as Node | null;
+    if (target && (btnEl?.contains(target) || menuEl?.contains(target))) return;
+    // The user is directing attention elsewhere; refocusing the trigger would
+    // steal focus from whatever they clicked.
+    close(false);
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', onWindowKeydown);
+    document.addEventListener('mousedown', onDocumentMousedown, true);
+  });
+
+  onDestroy(() => {
+    window.removeEventListener('keydown', onWindowKeydown);
+    document.removeEventListener('mousedown', onDocumentMousedown, true);
+  });
+
+  /* Fixed positioning escapes any parent overflow/stacking context. Anchored
+     below the trigger, right edges aligned; flips above near the viewport
+     bottom. Inline visibility rather than a state flag so the item focus that
+     follows lands on an already-visible menu (hidden elements refuse focus). */
+  function position(): void {
+    const btn = btnEl;
+    const menu = menuEl;
+    if (!btn || !menu) return;
+    const br = btn.getBoundingClientRect();
+    const mr = menu.getBoundingClientRect();
+    const margin = 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left = br.right - mr.width;
+    if (left < margin) left = margin;
+    if (left + mr.width > vw - margin) left = vw - margin - mr.width;
+    let top = br.bottom + margin / 2;
+    if (top + mr.height > vh - margin) {
+      top = br.top - margin / 2 - mr.height;
+      if (top < margin) top = margin;
+    }
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+    menu.style.visibility = 'visible';
+  }
+
+  $effect(() => {
+    if (!open) return;
+    let raf = requestAnimationFrame(() => {
+      raf = requestAnimationFrame(() => {
+        // The composed option primitives expose no role prop; stamping
+        // menuitem + tabindex here is what makes the popup a real menu with
+        // roving focus instead of a cluster of tab stops.
+        for (const b of items()) {
+          b.setAttribute('role', 'menuitem');
+          b.tabIndex = -1;
+        }
+        position();
+        const list = items();
+        (initialItem === 'last' ? list[list.length - 1] : list[0])?.focus();
+      });
+    });
+    window.addEventListener('scroll', position, true);
+    window.addEventListener('resize', position);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('scroll', position, true);
+      window.removeEventListener('resize', position);
+    };
+  });
+</script>
+
+<button
+  type="button"
+  class="menu-trigger {triggerClass}"
+  aria-haspopup="menu"
+  aria-expanded={open}
+  aria-label={triggerLabel}
+  bind:this={btnEl}
+  onclick={toggle}
+  onkeydown={onTriggerKeydown}
+>
+  {@render trigger()}
+</button>
+
+{#if open}
+  <div
+    class="menu"
+    role="menu"
+    tabindex="-1"
+    aria-label={header}
+    style="min-width: {menuMinWidth};"
+    bind:this={menuEl}
+    onkeydown={onMenuKeydown}
+  >
+    <div class="menu-header" role="presentation">{header}</div>
+    {@render children({ close })}
+  </div>
+{/if}
+
+<style>
+  .menu-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-space-4);
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .menu-trigger:focus-visible {
+    outline: 2px solid var(--ui-border-higher);
+    outline-offset: 2px;
+  }
+
+  .menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    max-width: calc(100vw - var(--ui-space-24));
+    background: var(--ui-surface-higher);
+    border: 1px solid var(--ui-border-high);
+    border-radius: var(--ui-radius-lg);
+    box-shadow: var(--ui-shadow-lg);
+    z-index: 1000;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .menu-header {
+    padding: var(--ui-space-8) var(--ui-space-12);
+    border-bottom: 1px solid var(--ui-border-low);
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  /* Roving focus is the menu's selection cursor; the inset ring keeps it
+     inside the clipped rounded corners. */
+  .menu :global(button:focus-visible) {
+    background: var(--ui-hover);
+    outline: 2px solid var(--ui-border-higher);
+    outline-offset: -2px;
+  }
+</style>

package/src/editor/ui/UIPaletteSelector.svelte

@@ -1059,7 +1059,6 @@
     font-size: var(--ui-font-size-xs);
     font-family: var(--ui-font-mono);
     color: var(--ui-text-tertiary);
-    text-transform: uppercase;
     border-top: 1px solid var(--ui-border-low);
   }
 

package/src/editor/ui/VariablesTab.svelte

@@ -204,10 +204,9 @@
   /* Subsection title (used by Spacing & Borders) */
   .subsection-title {
     margin: var(--ui-space-16) 0 var(--ui-space-8);
-    font-size: var(--ui-font-size-xs);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-tertiary);
-    text-transform: uppercase;
+    font-size: var(--ui-font-size-xl);
+    font-weight: var(--ui-font-weight-bold);
+    color: var(--ui-text-primary);
   }
 
   .subsection-title:first-child {

package/src/editor/ui/colors/AxisNumeral.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { AxisStatus } from '../../core/palettes/colorHarmony';
+
+  interface Props {
+    index: number;
+    status: AxisStatus;
+    /** The axis carries the family selected across the Colors surfaces. */
+    selected?: boolean;
+    /** Rendered over the swatch badge's scrim rather than an editor surface. */
+    scrim?: boolean;
+  }
+
+  let { index, status, selected = false, scrim = false }: Props = $props();
+</script>
+
+<!-- Carries no positioning: the wheel places it absolutely, the rows inline. -->
+<span class="numeral" class:filled={status === 'on-wheel'} class:selected class:scrim>{index + 1}</span>
+
+<style>
+  /* Hollow is the resting shape; filled means the axis has a rail on the wheel
+     right now. An unused axis is hollow too, but it never holds a family, so a
+     hollow numeral beside a color always reads "bound, off the wheel". */
+  .numeral {
+    box-sizing: border-box;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* Callers that need a bigger numeral set these two; the row default is the
+       size the wheel and the axes list share. */
+    width: var(--numeral-size, 1rem);
+    height: var(--numeral-size, 1rem);
+    border: 1px dashed var(--ui-text-muted);
+    border-radius: var(--ui-radius-full);
+    color: var(--ui-text-muted);
+    font-size: var(--numeral-font-size, var(--ui-font-size-xs));
+    font-weight: var(--ui-font-weight-semibold);
+    /* No tabular figures: the box is a fixed circle, so nothing needs aligning,
+       and a padded tabular "1" sits off-center inside its own advance. */
+    line-height: 1;
+    user-select: none;
+  }
+
+  /* The scrim composites with the swatch fill beneath it, which lands close
+     enough to the muted token to erase the ring and the digit. */
+  .numeral.scrim:not(.filled) {
+    border-color: var(--ui-text-secondary);
+    color: var(--ui-text-secondary);
+  }
+
+  .numeral.filled {
+    border-style: solid;
+    border-color: var(--ui-border-higher);
+    background: var(--ui-surface-high);
+    color: var(--ui-text-secondary);
+  }
+
+  .numeral.filled.selected {
+    background: var(--ui-text-primary);
+    border-color: var(--ui-text-primary);
+    color: var(--ui-surface-lowest);
+  }
+
+  /* Selection raises contrast but never fills: filled is reserved for "has a
+     rail", so inverting here would make the list contradict the wheel. */
+  .numeral.selected:not(.filled) {
+    border-color: var(--ui-text-primary);
+    color: var(--ui-text-primary);
+  }
+</style>

package/src/editor/ui/colors/ColorReadouts.svelte

@@ -93,8 +93,6 @@
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
   }
 
   .row-value {

package/src/editor/ui/colors/ColorStory.svelte

@@ -2,18 +2,14 @@
   import { oklchToHexClamped } from '../../core/palettes/oklch';
   import { palettesToVars } from '../../core/palettes/paletteDerivation';
   import { contrastRatio } from '../../core/palettes/contrast';
-  import type { NeutralTextRecommendation } from '../../core/palettes/recommendText';
   import type { PaletteConfig } from '../../core/themes/themeTypes';
 
   interface Props {
     /** Every family's config, spec defaults filled in (palettesWithDefaults). */
     full: Record<string, PaletteConfig>;
-    /** Suggested neutral text hierarchy — read out here, acted on from the
-     *  section's action pills. The story itself stays non-interactive. */
-    rec: NeutralTextRecommendation;
   }
 
-  let { full, rec }: Props = $props();
+  let { full }: Props = $props();
 
   // 60-30-10 as an area composition: the background surface is the dominant 60%
   // field (the page), and Brand/Accent/Special are the tones shown against it.
@@ -24,6 +20,8 @@
     { label: 'Special', ns: 'special', share: 2 },
   ] as const;
 
+  const TEXT_STEPS = ['primary', 'secondary', 'tertiary'] as const;
+
   const FUNCTIONAL = [
     { label: 'Info', ns: 'info' },
     { label: 'Success', ns: 'success' },
@@ -69,8 +67,6 @@
     return r === null ? null : `${(Math.floor(r * 10) / 10).toFixed(1)}:1`;
   }
 
-  let bgRatio = $derived(ratioOnBg('--text-primary'));
-
   // Inverted is measured against the fill it sits on (primary), not the page:
   // the pill below IS that pairing, so the number describes what is shown. A
   // mid-lightness primary makes this pairing inherently low-contrast — the
@@ -86,19 +82,20 @@
 
 <div class="story" style={storyVars}>
   <div class="field">
-    <div class="field-head">
-      <span class="field-label">Canvas</span>
-      {#if fmt(bgRatio)}<span class="ratio">{fmt(bgRatio)}</span>{/if}
+    <span class="field-label">Canvas</span>
+
+    <!-- Each step renders in its own token, so the word IS the sample and the
+         ratio beside it measures exactly what you are reading. -->
+    <div class="text-steps">
+      {#each TEXT_STEPS as step (step)}
+        {@const r = fmt(ratioOnBg(`--text-${step}`))}
+        <p class="text-step" style:color="var(--text-{step})">
+          {step}
+          {#if r}<span class="ratio">{r}</span>{/if}
+        </p>
+      {/each}
     </div>
-    <p class="body">The dominant surface. Body text sits here.</p>
-    <p class="secondary">
-      Secondary text follows the same field.
-      {#if fmt(ratioOnBg('--text-secondary'))}<span class="ratio">{fmt(ratioOnBg('--text-secondary'))}</span>{/if}
-    </p>
-    <p class="tertiary">
-      Tertiary text steps back once more.
-      {#if fmt(ratioOnBg('--text-tertiary'))}<span class="ratio">{fmt(ratioOnBg('--text-tertiary'))}</span>{/if}
-    </p>
+
     <p class="inverted-row">
       <span class="inverted-pill">
         Inverted text flips onto primary.
@@ -106,18 +103,6 @@
       </span>
     </p>
 
-    <!-- Readout only: applied from the section's actions, not from here. -->
-    <div class="suggest-row" title="What “Even neutral steps” would set these three text steps to">
-      <span class="suggest-label">Suggested steps</span>
-      {#each rec.suggestions as s (s.step)}
-        <span class="suggest-entry" class:dim={!s.differs}>
-          <span class="fn-dot" style:--dot={s.suggested.hex}></span>
-          <span class="suggest-step">{s.step}</span>
-          <span class="ratio">{fmt(contrastRatio(s.suggested.hex, seedHex('Canvas')))}</span>
-        </span>
-      {/each}
-    </div>
-
     <div class="functional-row">
       {#each FUNCTIONAL as fn (fn.ns)}
         {@const r = fmt(ratioOnBg(`--text-${fn.ns}`))}
@@ -172,36 +157,11 @@
     color: var(--text-primary);
   }
 
-  .field-head {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: var(--ui-space-8);
-  }
-
   .field-label {
     font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-weight-semibold);
   }
 
-  .body {
-    margin: 0;
-    font-size: var(--ui-font-size-md);
-    color: var(--text-primary);
-  }
-
-  .secondary {
-    margin: 0;
-    font-size: var(--ui-font-size-md);
-    color: var(--text-secondary);
-  }
-
-  .tertiary {
-    margin: 0;
-    font-size: var(--ui-font-size-md);
-    color: var(--text-tertiary);
-  }
-
   .inverted-row {
     margin: var(--ui-space-8) 0 0;
   }
@@ -219,31 +179,18 @@
     font-size: var(--ui-font-size-md);
   }
 
-  .suggest-row {
+  .text-steps {
     display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--ui-space-8);
-    margin-top: var(--ui-space-12);
-  }
-
-  .suggest-label {
-    font-size: var(--ui-font-size-md);
-    font-weight: var(--ui-font-weight-semibold);
-    opacity: 0.6;
-  }
-
-  .suggest-entry {
-    display: flex;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
     gap: var(--ui-space-6);
   }
 
-  .suggest-entry.dim {
-    opacity: 0.45;
-  }
-
-  .suggest-step {
+  .text-step {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ui-space-8);
+    margin: 0;
     font-size: var(--ui-font-size-md);
   }