@motion-proto/live-tokens 0.40.0 → 0.41.0

package/src/editor/ui/TextStylesSection.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import UIFontFamilySelector from './UIFontFamilySelector.svelte';
+  import UIFontSizeSelector from './UIFontSizeSelector.svelte';
+  import UIFontWeightSelector from './UIFontWeightSelector.svelte';
+  import UILetterSpacingSelector from './UILetterSpacingSelector.svelte';
+  import UILineHeightSelector from './UILineHeightSelector.svelte';
+  import UITextTransformSelector from './UITextTransformSelector.svelte';
+  import { TEXT_STYLES } from './sections/textStyles';
+</script>
+
+<div class="text-styles">
+  {#each TEXT_STYLES as style (style.prefix)}
+    <div class="ts-card">
+      <div class="ts-id">
+        <code class="ts-name">{style.name}</code>
+        <span class="ts-el">{style.defaultElement}</span>
+      </div>
+
+      <div
+        class="ts-preview"
+        style="font-family: var({style.prefix}-font-family); font-size: var({style.prefix}-font-size); font-weight: var({style.prefix}-font-weight); line-height: var({style.prefix}-line-height); letter-spacing: var({style.prefix}-letter-spacing);{style.hasTextTransform ? ` text-transform: var(${style.prefix}-text-transform);` : ''}"
+      >{style.preview}</div>
+
+      <div class="ts-controls">
+        <div class="ts-field">
+          <span class="ts-label">family</span>
+          <UIFontFamilySelector variable={`${style.prefix}-font-family`} />
+        </div>
+        <div class="ts-field">
+          <span class="ts-label">size</span>
+          <UIFontSizeSelector variable={`${style.prefix}-font-size`} />
+        </div>
+        <div class="ts-field">
+          <span class="ts-label">weight</span>
+          <UIFontWeightSelector variable={`${style.prefix}-font-weight`} />
+        </div>
+        <div class="ts-field">
+          <span class="ts-label">letter spacing</span>
+          <UILetterSpacingSelector variable={`${style.prefix}-letter-spacing`} />
+        </div>
+        <div class="ts-field">
+          <span class="ts-label">line height</span>
+          <UILineHeightSelector variable={`${style.prefix}-line-height`} />
+        </div>
+        {#if style.hasTextTransform}
+          <div class="ts-field">
+            <span class="ts-label">transform</span>
+            <UITextTransformSelector variable={`${style.prefix}-text-transform`} />
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  /* One frame around the stacked list; cards butt together and are separated
+     by a faint rule rather than each being its own box. No overflow clipping —
+     the pickers' dropdowns must be free to spill past the frame. */
+  .text-styles {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--ui-border);
+  }
+
+  /* Two columns: a fixed identity rail and the content column holding the
+     preview (top) then the controls (below). The rail spans both rows so a
+     stack of cards reads as one continuous, scannable left column. */
+  .ts-card {
+    display: grid;
+    grid-template-columns: 8rem minmax(0, 1fr);
+    column-gap: var(--ui-space-12);
+    row-gap: var(--ui-space-8);
+    padding: var(--ui-space-12) var(--ui-space-10);
+    border-bottom: 1px solid var(--ui-border-low);
+  }
+
+  .ts-card:last-child {
+    border-bottom: none;
+  }
+
+  .ts-id {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-2);
+    min-width: 0;
+  }
+
+  .ts-name {
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-primary);
+  }
+
+  .ts-el {
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-muted);
+  }
+
+  /* Fixed-height preview well with the sample pinned to the top, so its
+     cap-line meets the identity label instead of floating mid-row. Height
+     clears the largest style (heading-xl) so every well is uniform and the
+     rows keep a steady rhythm regardless of sample size. Preview renders
+     through the bundle's own vars (letterforms, not ink); ink stays the
+     editor's text colour since colour is outside the style bundle. */
+  .ts-preview {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+    min-height: 3rem;
+    color: var(--ui-text-primary);
+    max-width: 100%;
+    min-width: 0;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Fixed-width tracks packed to the left rather than stretching across the
+     full-bleed section, so the axis pickers stay a tight, scannable cluster.
+     auto-fill wraps them when the panel is too narrow for one row. */
+  .ts-controls {
+    grid-column: 2;
+    grid-row: 2;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 7.5rem));
+    justify-content: start;
+    gap: var(--ui-space-12);
+    align-items: start;
+  }
+
+  .ts-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    min-width: 0;
+  }
+
+  /* The shared picker renders trigger + resolved value side by side (a subgrid
+     spanning two parent tracks). Here we want them stacked — label, control,
+     then the resolved value beneath — so flip its own layout to a column and
+     left-align the value the component otherwise centres. */
+  .ts-field :global(.ui-token-selector) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ui-space-4);
+  }
+
+  .ts-field :global(.ui-ts-trigger-wrap) {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .ts-field :global(.ui-ts-meta-text) {
+    align-self: flex-start;
+  }
+
+  /* Quiet eyebrow-scale labels so the eye lands on the control and its value,
+     not the field name. */
+  .ts-label {
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-medium);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--ui-text-muted);
+    white-space: nowrap;
+  }
+</style>

package/src/editor/ui/UILineHeightSelector.svelte

@@ -21,11 +21,12 @@
   }: Props = $props();
 
   const options = [
-    { key: 'xs', label: 'Extra Small', value: '1' },
-    { key: 'sm', label: 'Small', value: '1.25' },
-    { key: 'md', label: 'Medium', value: '1.5' },
-    { key: 'lg', label: 'Large', value: '1.75' },
-    { key: 'xl', label: 'Extra Large', value: '2' },
+    { key: 'none', label: 'None', value: '1' },
+    { key: 'tightest', label: 'Tightest', value: '1.1' },
+    { key: 'tighter', label: 'Tighter', value: '1.25' },
+    { key: 'tight', label: 'Tight', value: '1.35' },
+    { key: 'normal', label: 'Normal', value: '1.5' },
+    { key: 'relaxed', label: 'Relaxed', value: '1.75' },
   ] as const;
 </script>
 

package/src/editor/ui/UIPaletteSelector.svelte

@@ -113,6 +113,10 @@
   const borderStepKeys = borderSteps.map(s => s.key);
   const textStepKeys = textSteps.map(s => s.key);
 
+  /** Neutral additionally exposes the derived flip of primary; chromatic
+   *  families have no inverted step. */
+  const neutralTextSteps = [...textSteps, { key: 'inverted', label: 'Inverted' }];
+
   const familiesWithText = ['neutral', 'alternate', 'canvas', 'brand', 'accent', 'special', 'success', 'warning', 'info', 'danger'];
 
   const allCategories: { id: Category; label: string }[] = [
@@ -205,6 +209,7 @@
     if (varName === '--text-tertiary') return { family: 'neutral', step: 'tertiary' };
     if (varName === '--text-muted') return { family: 'neutral', step: 'muted' };
     if (varName === '--text-disabled') return { family: 'neutral', step: 'disabled' };
+    if (varName === '--text-inverted') return { family: 'neutral', step: 'inverted' };
     const m = varName.match(/^--text-([a-z]+)(?:-([a-z]+))?$/);
     if (m) {
       const fam = m[1];
@@ -702,7 +707,7 @@
           </div>
         {:else if selectedTab === 'text'}
           <div class="step-grid">
-            {#each textSteps as step}
+            {#each (selectedFamily === 'neutral' ? neutralTextSteps : textSteps) as step}
               <button
                 class="step-item"
                 class:active={chosenCategory === 'text' && chosenFamily === selectedFamily && chosenStep === step.key}

package/src/editor/ui/UITextTransformSelector.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
+  import UITokenSelector from './UITokenSelector.svelte';
+  import UIOptionList from './UIOptionList.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();
+
+  // text-transform is a literal CSS keyword, not a scale alias — the picker
+  // writes the keyword itself through UITokenSelector.writeOverride.
+  const options = [
+    { key: 'none', label: 'None', sample: 'Overline' },
+    { key: 'uppercase', label: 'Uppercase', sample: 'Overline' },
+    { key: 'lowercase', label: 'Lowercase', sample: 'Overline' },
+    { key: 'capitalize', label: 'Capitalize', sample: 'overline label' },
+  ] as const;
+
+  let selector: UITokenSelector | undefined = $state();
+  let current = $state('');
+
+  function readResolved() {
+    current = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+  }
+
+  function handleVarChange(e: Event) {
+    const detail = (e as CustomEvent<{ name: string }>).detail;
+    if (detail?.name === variable) readResolved();
+  }
+
+  function select(keyword: string, close: () => void) {
+    selector?.writeOverride(keyword);
+    readResolved();
+    close();
+    onchange?.();
+  }
+
+  function handleReset() {
+    readResolved();
+    onchange?.();
+  }
+
+  onMount(() => {
+    readResolved();
+    document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+  });
+  onDestroy(() => {
+    document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+  });
+
+  let activeKey = $derived(options.find((o) => o.key === current)?.key ?? null);
+  let activeLabel = $derived(options.find((o) => o.key === activeKey)?.label ?? current);
+</script>
+
+<UITokenSelector
+  bind:this={selector}
+  {variable}
+  {component}
+  {canBeLinked}
+  {disabled}
+  {selectionsLocked}
+  dropdownMinWidth="12rem"
+  onreset={handleReset}
+  onvarChange={readResolved}
+>
+  {#snippet triggerTitle()}{activeLabel}{/snippet}
+  {#snippet triggerMeta()}{current || '—'}{/snippet}
+
+  {#snippet children({ close })}
+    <UIOptionList>
+      {#each options as opt (opt.key)}
+        <UIOptionItem active={activeKey === opt.key} onclick={() => select(opt.key, close)}>
+          {#snippet preview()}
+            <span class="tt-sample" style="text-transform: {opt.key};">{opt.sample}</span>
+          {/snippet}
+          {#snippet label()}{opt.label}{/snippet}
+        </UIOptionItem>
+      {/each}
+    </UIOptionList>
+  {/snippet}
+</UITokenSelector>
+
+<style>
+  .tt-sample {
+    display: inline-block;
+    min-width: 4.5rem;
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-primary);
+  }
+</style>

package/src/editor/ui/VariablesTab.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import PaletteEditor from './PaletteEditor.svelte';
+  import { PALETTE_SPECS } from '../core/palettes/paletteDerivation';
   import FontStackEditor from './FontStackEditor.svelte';
   import ProjectFontsSection from './ProjectFontsSection.svelte';
+  import TextStylesSection from './TextStylesSection.svelte';
   import ColumnsSection from './sections/ColumnsSection.svelte';
   import TokenScaleTable from './sections/TokenScaleTable.svelte';
   import OverlaysSection from './sections/OverlaysSection.svelte';
@@ -49,16 +51,16 @@
     <h2 class="section-title">Palette Editor</h2>
     <p class="editor-intro">Derived palettes via <code>color-mix(in oklch)</code>. Change a base color to update all derived steps. Click any derived swatch to add a manual override.</p>
     <div class="palette-editors">
-      <PaletteEditor label="Brand" initialColor="#c93636" cssNamespace="brand" />
-      <PaletteEditor label="Accent" initialColor="#f49e0b" cssNamespace="accent" />
-      <PaletteEditor label="Background" initialColor="#1a1a2e" cssNamespace="canvas" emptySelector />
-      <PaletteEditor neutral label="Neutral" initialColor="#70787e" cssNamespace="neutral"/>
-      <PaletteEditor neutral label="Alternate" displayLabel="Alternate (neutral)" initialColor="#817b78" cssNamespace="alternate" />
-      <PaletteEditor label="Special" initialColor="#8b5cf6" cssNamespace="special" />
-      <PaletteEditor label="Info" initialColor="#3077e8" cssNamespace="info" />
-      <PaletteEditor label="Success" initialColor="#21c45d" cssNamespace="success" />
-      <PaletteEditor label="Warning" initialColor="#e66e1a" cssNamespace="warning" />
-      <PaletteEditor label="Danger" initialColor="#e8304f" cssNamespace="danger" />
+      {#each PALETTE_SPECS as spec (spec.label)}
+        <PaletteEditor
+          label={spec.label}
+          displayLabel={spec.displayLabel ?? null}
+          initialColor={spec.initialColor}
+          neutral={spec.neutral ?? false}
+          cssNamespace={spec.cssNamespace}
+          emptySelector={spec.emptySelector ?? false}
+        />
+      {/each}
     </div>
   </section>
 
@@ -97,6 +99,11 @@
         <FontStackEditor />
       </div>
 
+      <div class="typography-group text-styles-group">
+        <h3 class="group-title">Text Styles</h3>
+        <TextStylesSection />
+      </div>
+
       <div class="typography-group">
         <h3 class="group-title">Font Sizes</h3>
         <TokenScaleTable kind="font-size" vars={FONT_SIZE_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
@@ -248,6 +255,12 @@
     gap: var(--ui-space-32);
   }
 
+  /* The definition table is wide (four pickers + preview per row); give it the
+     full row so it isn't squeezed into an auto-fill column. */
+  .text-styles-group {
+    grid-column: 1 / -1;
+  }
+
   /* Utility Tokens */
   .utility-columns {
     display: grid;

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

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { oklchToHexClamped, type Oklch } from '../../core/palettes/oklch';
+  import { showCopyPopover } from '../copyPopover';
+
+  interface Props {
+    color: Oklch;
+  }
+
+  let { color }: Props = $props();
+
+  // The basis is numeric OKLCH; hex/RGB/HSL are clamped sRGB projections off it.
+  let hex = $derived(oklchToHexClamped(color.l, color.c, color.h));
+
+  function toRgb(h: string): [number, number, number] {
+    return [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];
+  }
+
+  function toHsl(r: number, g: number, b: number): [number, number, number] {
+    const rn = r / 255, gn = g / 255, bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    let h = 0;
+    let s = 0;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      if (max === rn) h = (gn - bn) / d + (gn < bn ? 6 : 0);
+      else if (max === gn) h = (bn - rn) / d + 2;
+      else h = (rn - gn) / d + 4;
+      h *= 60;
+    }
+    return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
+  }
+
+  let rows = $derived.by(() => {
+    const [r, g, b] = toRgb(hex);
+    const [hh, ss, ll] = toHsl(r, g, b);
+    return [
+      { label: 'HEX', value: hex },
+      { label: 'RGB', value: `rgb(${r}, ${g}, ${b})` },
+      { label: 'HSL', value: `hsl(${hh}, ${ss}%, ${ll}%)` },
+      { label: 'OKLCH', value: `oklch(${Math.round(color.l * 100)}% ${color.c.toFixed(3)} ${Math.round(color.h)})` },
+    ];
+  });
+
+  let copied: string | null = $state(null);
+  function copy(label: string, value: string, e: MouseEvent) {
+    navigator.clipboard?.writeText(value);
+    copied = label;
+    showCopyPopover(value, e.currentTarget);
+    setTimeout(() => { if (copied === label) copied = null; }, 1500);
+  }
+</script>
+
+<div class="readouts">
+  {#each rows as row (row.label)}
+    <button class="row" type="button" class:copied={copied === row.label} onclick={(e) => copy(row.label, row.value, e)} title="Copy {row.label}">
+      <span class="row-label">{row.label}</span>
+      <span class="row-value">{copied === row.label ? 'copied!' : row.value}</span>
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    </button>
+  {/each}
+</div>
+
+<style>
+  .readouts {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-2);
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: 3.5rem 1fr auto;
+    align-items: center;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-4) var(--ui-space-8);
+    background: var(--ui-surface-lowest);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+    text-align: left;
+    transition: background var(--ui-transition-fast), border-color var(--ui-transition-fast);
+  }
+
+  .row:hover {
+    background: var(--ui-surface-low);
+    border-color: var(--ui-border);
+  }
+
+  .row-label {
+    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 {
+    font-size: var(--ui-font-size-sm);
+    font-family: var(--ui-font-mono);
+    color: var(--ui-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .row i {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-tertiary);
+    opacity: 0;
+    transition: opacity var(--ui-transition-fast);
+  }
+
+  .row:hover i {
+    opacity: 1;
+  }
+
+  .row.copied .row-value {
+    color: var(--ui-text-accent);
+  }
+</style>