@motion-proto/live-tokens 0.7.1 → 0.9.0

package/src/editor/ui/ThemeFileManager.svelte

@@ -457,7 +457,6 @@
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-secondary);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
   }
 
   /* Two-card pipeline (Editor → Production) — theme card + production card
@@ -506,7 +505,6 @@
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
     text-transform: uppercase;
-    letter-spacing: 0.08em;
     color: var(--ui-text-secondary);
     line-height: 1.1;
   }
@@ -516,7 +514,6 @@
     align-items: center;
     gap: var(--ui-space-4);
     font-size: 0.7rem;
-    letter-spacing: 0.02em;
     color: var(--ui-text-muted);
     line-height: 1;
   }
@@ -607,7 +604,6 @@
 
   .tfm-revert-label {
     font-weight: var(--ui-font-weight-semibold, 600);
-    letter-spacing: 0.02em;
     white-space: nowrap;
   }
 

package/src/editor/ui/UIFontFamilySelector.svelte

@@ -330,6 +330,5 @@
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-tertiary);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
   }
 </style>

package/src/editor/ui/UIFontSizeSelector.svelte

@@ -104,6 +104,9 @@
   dropdownGridColumns="auto auto auto auto"
   {onchange}
 >
+  {#snippet triggerMeta({ currentValue, activeOption })}
+    {activeOption ? (pxByKey[activeOption.key] ?? '—') : (currentValue || '—')}
+  {/snippet}
   {#snippet option({ opt, active, select })}
   
       <button class="font-size-row" class:active onclick={select}>

package/src/editor/ui/UIInfoPopover.svelte

@@ -181,7 +181,6 @@
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
-    letter-spacing: 0.02em;
     line-height: 1.2;
   }
 

package/src/editor/ui/UILetterSpacingSelector.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import UIVariantSelector from './UIVariantSelector.svelte';
+  import UIOptionItem from './UIOptionItem.svelte';
+
+  interface Props {
+    variable: string;
+    component?: string | undefined;
+    canBeLinked?: boolean;
+    disabled?: boolean;
+    selectionsLocked?: boolean;
+    onchange?: () => void;
+  }
+
+  let {
+    variable,
+    component = undefined,
+    canBeLinked = false,
+    disabled = false,
+    selectionsLocked = false,
+    onchange,
+  }: Props = $props();
+
+  const options = [
+    { key: 'tighter', label: 'Tighter', value: '-0.04em' },
+    { key: 'tight', label: 'Tight', value: '-0.02em' },
+    { key: 'normal', label: 'Normal', value: '0' },
+    { key: 'wide', label: 'Wide', value: '0.04em' },
+    { key: 'wider', label: 'Wider', value: '0.08em' },
+  ] as const;
+</script>
+
+<UIVariantSelector
+  {variable}
+  {component}
+  {canBeLinked}
+  {disabled}
+  {selectionsLocked}
+  varPrefix="--letter-spacing-"
+  {options}
+  {onchange}
+>
+  {#snippet option({ opt, active, select })}
+    <UIOptionItem {active} onclick={select}>
+      {#snippet preview()}
+        <span class="ls-sample" style="letter-spacing: var(--letter-spacing-{opt.key});">AV</span>
+      {/snippet}
+      {#snippet label()}
+        {opt.label}
+      {/snippet}
+      {#snippet meta()}
+        {opt.value}
+      {/snippet}
+    </UIOptionItem>
+  {/snippet}
+</UIVariantSelector>
+
+<style>
+  .ls-sample {
+    display: inline-block;
+    width: 1.75rem;
+    text-align: center;
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-primary);
+  }
+</style>

package/src/editor/ui/UIPaletteSelector.svelte

@@ -36,6 +36,11 @@
     canBeLinked?: boolean;
     disabled?: boolean;
     selectionsLocked?: boolean;
+    /** When set, restrict picker family choices to this family (one of the
+     *  entries in the `families` list). Other families render but are
+     *  rendered disabled and not clickable. Out-of-family already-set
+     *  choices still surface in the trigger meta. */
+    familyFilter?: string | null;
     onchange?: () => void;
   }
 
@@ -45,6 +50,7 @@
     canBeLinked = false,
     disabled = false,
     selectionsLocked = false,
+    familyFilter = null,
     onchange,
   }: Props = $props();
 
@@ -97,7 +103,7 @@
   const borderStepKeys = borderSteps.map(s => s.key);
   const textStepKeys = textSteps.map(s => s.key);
 
-  const familiesWithText = ['neutral', 'canvas', 'brand', 'accent', 'special', 'success', 'warning', 'info', 'danger'];
+  const familiesWithText = ['neutral', 'alternate', 'canvas', 'brand', 'accent', 'special', 'success', 'warning', 'info', 'danger'];
 
   const allCategories: { id: Category; label: string }[] = [
     { id: 'palette', label: 'Palette' },
@@ -405,6 +411,7 @@
   }
 
   function selectFamily(name: string) {
+    if (familyFilter && name !== familyFilter) return;
     selectedFamily = name;
     if (name === chosenFamily && chosenCategory) {
       selectedTab = chosenCategory;
@@ -543,14 +550,23 @@
             <span class="family-label">None</span>
           </button>
           {#each families as fam}
-            <button class="family-item" class:active={!chosenNone && chosenFamily === fam.name} onclick={() => selectFamily(fam.name)}>
+            {@const outOfFamily = familyFilter !== null && fam.name !== familyFilter}
+            <button
+              class="family-item"
+              class:active={!chosenNone && chosenFamily === fam.name}
+              class:out-of-family={outOfFamily}
+              disabled={outOfFamily}
+              onclick={() => selectFamily(fam.name)}
+            >
               <div class="family-swatches">
                 <div class="mini-swatch" style="background: var(--color-{fam.name}-300);"></div>
                 <div class="mini-swatch" style="background: var(--color-{fam.name}-500);"></div>
                 <div class="mini-swatch" style="background: var(--color-{fam.name}-700);"></div>
               </div>
               <span class="family-label">{fam.label}</span>
-              <i class="fas fa-chevron-right family-arrow"></i>
+              {#if !outOfFamily}
+                <i class="fas fa-chevron-right family-arrow"></i>
+              {/if}
             </button>
           {/each}
           {#if gradientsAllowed && gradientTokens.length > 0}
@@ -862,6 +878,18 @@
     box-shadow: inset 3px 0 0 var(--ui-text-accent);
   }
 
+  /* Family is filtered out by `familyFilter`. Greyed and unselectable so
+     the picker scopes new picks to the variant's family while keeping the
+     full palette visible (it isn't gone, it just isn't this gradient's
+     business). Pointer cursor is suppressed to match :disabled. */
+  .family-item.out-of-family {
+    opacity: 0.32;
+    cursor: not-allowed;
+  }
+  .family-item.out-of-family:hover {
+    background: none;
+  }
+
   .family-item.active .family-label {
     color: var(--ui-text-accent);
   }
@@ -900,7 +928,6 @@
     font-family: var(--ui-font-mono);
     color: var(--ui-text-tertiary);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
     border-top: 1px solid var(--ui-border-low);
   }
 

package/src/editor/ui/UIPillButton.svelte

@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte';
 
   interface Props {
-    variant?: 'primary' | 'default' | 'secondary';
+    variant?: 'primary' | 'default' | 'secondary' | 'outline';
     size?: 'default' | 'compact';
     icon?: string;
     href?: string;
@@ -39,7 +39,7 @@
     aria-disabled={disabled ? 'true' : undefined}
   >
     {#if icon}<i class="fas {icon}" aria-hidden="true"></i>{/if}
-    {#if children}{@render children()}{/if}
+    {#if children}<span class="ui-pill-label">{@render children()}</span>{/if}
   </a>
 {:else}
   <button
@@ -50,7 +50,7 @@
     {onclick}
   >
     {#if icon}<i class="fas {icon}" aria-hidden="true"></i>{/if}
-    {#if children}{@render children()}{/if}
+    {#if children}<span class="ui-pill-label">{@render children()}</span>{/if}
   </button>
 {/if}
 
@@ -59,6 +59,8 @@
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-6, 6px);
+    max-width: 100%;
+    min-width: 0;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
     border: 1px solid rgba(255, 255, 255, 0.5);
     color: var(--ui-text-primary, #fff);
@@ -75,11 +77,24 @@
       border-color var(--ui-transition-fast, 120ms ease);
   }
 
+  .ui-pill-label {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   .ui-pill:hover:not(:disabled):not([aria-disabled='true']) {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.45) 100%);
     border-color: rgba(255, 255, 255, 0.75);
   }
 
+  .ui-pill:focus-visible {
+    outline: none;
+    border-color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
+  }
+
   .ui-pill:disabled,
   .ui-pill[aria-disabled='true'] {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.10) 100%);
@@ -130,6 +145,21 @@
     border-color: rgba(255, 255, 255, 0.5);
   }
 
+  /* Variant: outline — transparent fill, just a border; subtle fill on hover */
+  .ui-pill-outline {
+    background: none;
+    border-color: rgba(255, 255, 255, 0.4);
+  }
+  .ui-pill-outline:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%);
+    border-color: rgba(255, 255, 255, 0.65);
+  }
+  .ui-pill-outline:disabled,
+  .ui-pill-outline[aria-disabled='true'] {
+    background: none;
+    border-color: rgba(255, 255, 255, 0.18);
+  }
+
   /* Size: compact — for header bars / chrome rails */
   .ui-pill-compact {
     font-size: var(--ui-font-size-sm, 14px);

package/src/editor/ui/UISegmentedControl.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" generics="V extends string">
+  interface Option {
+    value: V;
+    label: string;
+    icon?: string;
+    title?: string;
+  }
+
+  interface Props {
+    value: V;
+    options: ReadonlyArray<Option>;
+    /** Native radio group name. Auto-generated per instance if omitted. */
+    name?: string;
+    ariaLabel?: string;
+    onchange?: (value: V) => void;
+  }
+
+  let { value = $bindable(), options, name, ariaLabel, onchange }: Props = $props();
+
+  // Stable per-instance fallback so internal radios group correctly when no
+  // `name` is passed. Not reactive: the group identity shouldn't change.
+  const fallbackName = `ui-seg-${Math.random().toString(36).slice(2, 9)}`;
+  let groupName = $derived(name ?? fallbackName);
+
+  function select(v: V) {
+    if (v === value) return;
+    value = v;
+    onchange?.(v);
+  }
+</script>
+
+<div class="ui-seg" role="radiogroup" aria-label={ariaLabel}>
+  {#each options as opt (opt.value)}
+    <label
+      class="ui-seg-item"
+      class:active={value === opt.value}
+      title={opt.title}
+    >
+      <input
+        type="radio"
+        name={groupName}
+        value={opt.value}
+        checked={value === opt.value}
+        onchange={() => select(opt.value)}
+      />
+      {#if opt.icon}<i class="fas {opt.icon}" aria-hidden="true"></i>{/if}
+      <span>{opt.label}</span>
+    </label>
+  {/each}
+</div>
+
+<style>
+  .ui-seg {
+    display: inline-flex;
+    align-self: flex-start;
+    align-items: stretch;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: var(--ui-radius-xl, 8px);
+    overflow: hidden;
+  }
+
+  .ui-seg-item {
+    position: relative;
+    display: inline-flex;
+    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));
+    font-family: inherit;
+    font-size: var(--ui-font-size-sm, 14px);
+    font-weight: var(--ui-font-weight-medium, 500);
+    line-height: 1.5;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background var(--ui-transition-fast, 120ms ease),
+      color var(--ui-transition-fast, 120ms ease);
+  }
+
+  .ui-seg-item + .ui-seg-item {
+    border-left: 1px solid rgba(255, 255, 255, 0.18);
+  }
+
+  .ui-seg-item input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+  }
+
+  .ui-seg-item:hover:not(.active) {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--ui-text-primary, #fff);
+  }
+
+  .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);
+  }
+
+  .ui-seg-item:has(input:focus-visible) {
+    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
+  }
+
+  .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/UITokenSelector.svelte

@@ -325,7 +325,10 @@
   </div>
 
   {#if triggerMeta}
-    <span class="ui-ts-meta-text">{@render triggerMeta()}</span>
+    <span
+      class="ui-ts-meta-text"
+      onmouseenter={(e) => { e.currentTarget.title = e.currentTarget.textContent ?? ''; }}
+    >{@render triggerMeta()}</span>
   {/if}
 </div>
 

package/src/editor/ui/VariablesTab.svelte

@@ -8,7 +8,6 @@
   import OverlaysSection from './sections/OverlaysSection.svelte';
   import GradientsSection from './sections/GradientsSection.svelte';
   import ShadowsSection from './sections/ShadowsSection.svelte';
-  import UIPillButton from './UIPillButton.svelte';
   import {
     SPACING_VARS, BORDER_WIDTH_VARS, RADIUS_VARS, FONT_SIZE_VARS,
     ICON_SIZE_VARS, FONT_WEIGHT_VARS, LINE_HEIGHT_VARS,
@@ -42,8 +41,6 @@
     setTimeout(() => { copiedVar = null; }, COPIED_FLASH_MS);
   }
 
-  type FontAddMode = 'closed' | 'url' | 'fontface';
-  let fontAddMode: FontAddMode = $state('closed');
 </script>
 
 <div class="variables-container">
@@ -68,10 +65,16 @@
   <!-- Spacing & Borders -->
   <section class="section" id="spacing">
     <h2 class="section-title">Spacing &amp; Borders</h2>
-    <h3 class="subsection-title">Spacing</h3>
-    <TokenScaleTable kind="spacing" vars={SPACING_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
-    <h3 class="subsection-title">Borders</h3>
-    <TokenScaleTable kind="border" vars={BORDER_WIDTH_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
+    <div class="spacing-borders-columns">
+      <div class="spacing-borders-group">
+        <h3 class="subsection-title">Spacing</h3>
+        <TokenScaleTable kind="spacing" vars={SPACING_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
+      </div>
+      <div class="spacing-borders-group">
+        <h3 class="subsection-title">Borders</h3>
+        <TokenScaleTable kind="border" vars={BORDER_WIDTH_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
+      </div>
+    </div>
   </section>
 
   <!-- Columns -->
@@ -85,18 +88,11 @@
 
   <!-- Typography -->
   <section class="section" id="typography">
-    <div class="typography-header">
-      <h2 class="section-title">Typography</h2>
-      <UIPillButton
-        variant="primary"
-        icon="fa-plus"
-        onclick={() => { fontAddMode = fontAddMode === 'closed' ? 'url' : 'closed'; }}
-      >Add Font</UIPillButton>
-    </div>
+    <h2 class="section-title">Typography</h2>
 
     <div class="typography-columns">
       <div class="typography-group font-families-group">
-        <ProjectFontsSection bind:addMode={fontAddMode} />
+        <ProjectFontsSection />
         <h3 class="group-title">Font Families</h3>
         <FontStackEditor />
       </div>
@@ -161,13 +157,13 @@
   .variables-container {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-32);
+    gap: var(--ui-space-48);
   }
 
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-16);
+    gap: var(--ui-space-24);
   }
 
   .section-title {
@@ -179,10 +175,12 @@
     border-bottom: 2px solid var(--ui-border-high);
   }
 
+  /* Tier-2 group header: xl bold white. No divider — vertical rhythm carries the
+     separation, matching the palette section's title style at a smaller size. */
   .group-title {
-    font-size: var(--ui-font-size-lg);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-xl);
+    font-weight: var(--ui-font-weight-bold);
+    color: var(--ui-text-primary);
     margin: 0;
   }
 
@@ -193,27 +191,32 @@
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
   }
 
-  .subsection-title:first-child,
-  .section-title + .subsection-title {
+  .subsection-title:first-child {
     margin-top: 0;
   }
 
-  /* Typography */
-  .typography-header {
+  /* Spacing & Borders columns */
+  .spacing-borders-columns {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
+    gap: var(--ui-space-24);
+    align-items: start;
+  }
+
+  .spacing-borders-group {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--ui-space-12);
-    padding-bottom: var(--ui-space-8);
-    border-bottom: 2px solid var(--ui-border-high);
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    min-width: 0;
   }
-  .typography-header .section-title {
-    padding-bottom: 0;
-    border-bottom: none;
+
+  .spacing-borders-group .subsection-title {
+    margin: 0;
   }
+
+  /* Typography */
   .typography-columns {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
@@ -224,12 +227,15 @@
   .typography-group {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-8);
+    gap: var(--ui-space-12);
     min-width: 0;
   }
 
   .font-families-group {
     grid-column: 1 / -1;
+    /* Two logical groups stacked here (Project Fonts + Font Families); space them
+       further apart than peers inside a single group. */
+    gap: var(--ui-space-32);
   }
 
   /* Utility Tokens */

package/src/editor/ui/palette/OverridesPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import ScaleCurveEditor from './ScaleCurveEditor.svelte';
+  import UIPillButton from '../UIPillButton.svelte';
   import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig, textLightnessCurveConfig } from '../curveEngine';
   import { scaleToCssVar } from '../../core/palettes/paletteDerivation';
 
@@ -126,19 +127,16 @@
   <div class="scale-header">
     <h4 class="scale-title">{scale.title}</h4>
     {#if supportsSnap}
-      <button
-        class="edit-toggle"
-        class:active={snapped}
-        type="button"
+      <UIPillButton
+        size="compact"
+        variant={snapped ? 'primary' : 'outline'}
         onclick={() => onToggleSnap(scale)}
-      >{snapped ? 'Unsnap' : 'Snap All'}</button>
+      >{snapped ? 'Unsnap' : 'Snap All'}</UIPillButton>
     {/if}
-    <button class="edit-toggle" type="button" onclick={() => onClearScaleOverrides(scale)}>Clear Overrides</button>
-    <button
-      class="edit-toggle"
-      type="button"
-      onclick={() => onToggleEditor(scale.title)}
-    >{editorOpen ? 'Close' : 'Edit'}</button>
+    <UIPillButton size="compact" variant="outline" onclick={() => onClearScaleOverrides(scale)}>Clear Overrides</UIPillButton>
+    <UIPillButton size="compact" variant="outline" onclick={() => onToggleEditor(scale.title)}>
+      {editorOpen ? 'Close' : 'Edit'}
+    </UIPillButton>
   </div>
   <div class="swatch-grid" style="--swatch-cols: {scale.steps.length}; --swatch-gap: var(--ui-space-8)">
     {#each scale.steps as step}
@@ -276,36 +274,15 @@
     display: flex;
     align-items: center;
     gap: var(--ui-space-8);
+    padding-bottom: 0.5rem;
   }
 
   .scale-title {
-    font-size: var(--ui-font-size-md);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-tertiary);
-    margin: 0;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .edit-toggle {
-    font-size: var(--ui-font-size-md);
-    color: var(--ui-text-tertiary);
-    background: none;
-    border: 1px solid var(--ui-border-low);
-    border-radius: var(--ui-radius-sm);
-    padding: var(--ui-space-2) var(--ui-space-6);
-    cursor: pointer;
-  }
-
-  .edit-toggle:hover {
-    color: var(--ui-text-primary);
-    border-color: var(--ui-border-high);
-  }
-
-  .edit-toggle.active {
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-bold);
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-high);
-    background: var(--ui-surface-high);
+    margin: 0;
+    padding-right: 1rem;
   }
 
   .swatch-grid {

package/src/editor/ui/palette/PaletteBase.svelte

@@ -153,13 +153,13 @@
   }
 
   .editor-label {
-    font-size: var(--ui-font-size-lg);
+    font-size: var(--ui-font-size-xl);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
   }
 
   .base-hex {
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-secondary);
     font-family: var(--ui-font-mono);
   }
@@ -172,7 +172,7 @@
     padding: var(--ui-space-2) var(--ui-space-4);
     margin-left: calc(-1 * var(--ui-space-4));
     border-radius: var(--ui-radius-sm);
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-secondary);
     font-family: var(--ui-font-mono);
     text-align: left;