@motion-proto/live-tokens 0.40.0 → 0.41.0

package/src/editor/ui/palette/dockMagnify.ts

@@ -0,0 +1,22 @@
+/**
+ * macOS-dock magnification policy for palette ramps, shared by the palette
+ * editor's swatch grid and the Colors view's step strips so the falloff tunes
+ * in one place. Layout stays native to each surface (grid tracks vs
+ * flex-grow); only the size policy is shared.
+ */
+
+const ANCHORED_GROW = 1.7;
+const NEIGHBOUR_GROW = 1.2;
+
+/** Size share for a ramp cell: anchored opens widest, immediate neighbours
+ *  get a smaller boost, everything else stays 1. Doubles as a flex-grow. */
+export function dockGrow(index: number, anchored: number | null): number {
+  if (anchored === null) return 1;
+  const d = Math.abs(index - anchored);
+  return d === 0 ? ANCHORED_GROW : d === 1 ? NEIGHBOUR_GROW : 1;
+}
+
+/** Grid track list (`minmax(0, Nfr)` per column) for a `cols`-column ramp. */
+export function dockTrackTemplate(cols: number, anchored: number | null): string {
+  return Array.from({ length: cols }, (_, i) => `minmax(0, ${dockGrow(i, anchored)}fr)`).join(' ');
+}

package/src/editor/ui/palette/paletteEditorState.ts

@@ -23,6 +23,7 @@
  */
 
 import type { Scope } from '../../core/store/editorStore';
+import type { Oklch } from '../../core/palettes/oklch';
 
 /** Sentinel key for the base swatch (used as `editingKey === BASE_KEY`). */
 export const BASE_KEY = '__base__';
@@ -33,8 +34,8 @@ export type EditingState =
   | {
       kind: 'editingStep';
       stepKey: string;
-      snapshot: string;
-      draft: string;
+      snapshot: Oklch;
+      draft: Oklch;
     };
 
 export const idleState: EditingState = { kind: 'idle' };
@@ -62,8 +63,8 @@ export function activeKey(s: EditingState): string | null {
   return s.stepKey;
 }
 
-/** The current draft hex (for editingStep) or null. editingBase draws from baseColor directly. */
-export function activeDraft(s: EditingState): string | null {
+/** The current draft OKLCH (for editingStep) or null. editingBase draws from baseColor directly. */
+export function activeDraft(s: EditingState): Oklch | null {
   return s.kind === 'editingStep' ? s.draft : null;
 }
 

package/src/editor/ui/palette/paletteMath.ts

@@ -1,21 +1,52 @@
-import { hexToOklch, oklchToHex, gamutClamp } from '../../core/palettes/oklch';
-import { type CurveAnchor, makeAnchor, sampleCurve } from '../curveEngine';
+import type { Oklch } from '../../core/palettes/oklch';
+import { type CurveAnchor, makeAnchor } from '../curveEngine';
 import type { PaletteConfig } from '../../core/themes/themeTypes';
+import {
+  type Step,
+  type Scale,
+  type SchemeDirection,
+  SCALES,
+  PALETTE_STEPS,
+  DEFAULT_PALETTE_LIGHTNESS,
+  DEFAULT_PALETTE_SATURATION,
+  defaultScaleCurves,
+  scaleCurveDefaults,
+  computePaletteOklch,
+  computeDerivedOklch,
+  stepIndexToX,
+  scaleStepToX,
+  paletteStepKey,
+  stepKey,
+  nearestPaletteStep,
+  syncBaseAnchor,
+  clearBaseAnchor,
+} from '../../core/palettes/paletteDerivation';
+
+// Single source of truth is `core/palettes/paletteDerivation`; these are the
+// derivation symbols re-exported so existing UI import sites keep resolving.
+export {
+  type Step,
+  type Scale,
+  type SchemeDirection,
+  SCALES,
+  SCALES as scales,
+  PALETTE_STEPS,
+  DEFAULT_PALETTE_LIGHTNESS,
+  DEFAULT_PALETTE_SATURATION,
+  defaultScaleCurves,
+  scaleCurveDefaults,
+  computePaletteOklch,
+  computeDerivedOklch,
+  stepIndexToX,
+  scaleStepToX,
+  paletteStepKey,
+  stepKey,
+  nearestPaletteStep,
+  syncBaseAnchor,
+  clearBaseAnchor,
+};
 
-export const GRAY_FALLBACK = '#808080';
-
-export interface Step {
-  name: string;
-  position: number;
-  lightness?: number;
-  saturation?: number;
-}
-
-export interface Scale {
-  title: string;
-  isText: boolean;
-  steps: Step[];
-}
+export const GRAY_FALLBACK: Oklch = { l: 0.5999, c: 0, h: 89.88 };
 
 export interface PaletteStepDef {
   label: string;
@@ -25,8 +56,6 @@ export interface PaletteStepDef {
 export type CurveOffset = Record<string, number>;
 export type ScaleCurves = Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[] }>;
 
-export const DEFAULT_PALETTE_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 95, 5), makeAnchor(100, 8, 5)];
-export const DEFAULT_PALETTE_SATURATION = (): CurveAnchor[] => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)];
 // Neutrals seed a calmer, wider lightness ramp than accents; the saturation
 // curve is the same flat 100 (chroma comes from a low-chroma base, not a cap).
 export const DEFAULT_NEUTRAL_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
@@ -36,39 +65,27 @@ export const DEFAULT_NEUTRAL_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 92,
  * per-role difference is the seed: neutrals get the wider neutral lightness
  * ramp, accents the standard one. Everything is editable afterward.
  */
-export function defaultPaletteConfig(opts: { baseColor: string; neutral?: boolean }): PaletteConfig {
-  return {
+export function defaultPaletteConfig(opts: { baseColor: Oklch; neutral?: boolean; scheme?: SchemeDirection }): PaletteConfig {
+  const cfg: PaletteConfig = {
     baseColor: opts.baseColor,
     lightnessCurve: opts.neutral ? DEFAULT_NEUTRAL_LIGHTNESS() : DEFAULT_PALETTE_LIGHTNESS(),
     saturationCurve: DEFAULT_PALETTE_SATURATION(),
-    scaleCurves: defaultScaleCurvesObject(),
+    scaleCurves: defaultScaleCurvesObject(opts.scheme ?? 'dark'),
     curveOffset: { lightness: 0, saturation: 0 },
     overrides: {},
     snappedScales: [],
     anchorToBase: true,
   };
+  syncBaseAnchor(cfg);
+  return cfg;
 }
 
-export const defaultScaleCurves: Record<string, { lightness: () => CurveAnchor[]; saturation: () => CurveAnchor[] }> = {
-  Surfaces: {
-    lightness: () => [makeAnchor(0, 15, 5), makeAnchor(100, 47, 5)],
-    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)],
-  },
-  Borders: {
-    lightness: () => [makeAnchor(0, 25, 5), makeAnchor(100, 80, 5)],
-    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)],
-  },
-  Text: {
-    lightness: () => [makeAnchor(0, 120, 30), makeAnchor(100, 55, 30)],
-    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)],
-  },
-};
-
-export function defaultScaleCurvesObject(): ScaleCurves {
+export function defaultScaleCurvesObject(scheme: SchemeDirection = 'dark'): ScaleCurves {
+  const defs = scaleCurveDefaults(scheme);
   return {
-    Surfaces: { lightness: defaultScaleCurves.Surfaces.lightness(), saturation: defaultScaleCurves.Surfaces.saturation() },
-    Borders: { lightness: defaultScaleCurves.Borders.lightness(), saturation: defaultScaleCurves.Borders.saturation() },
-    Text: { lightness: defaultScaleCurves.Text.lightness(), saturation: defaultScaleCurves.Text.saturation() },
+    Surfaces: { lightness: defs.Surfaces.lightness(), saturation: defs.Surfaces.saturation() },
+    Borders:  { lightness: defs.Borders.lightness(),  saturation: defs.Borders.saturation()  },
+    Text:     { lightness: defs.Text.lightness(),     saturation: defs.Text.saturation()      },
   };
 }
 
@@ -86,163 +103,58 @@ export const paletteStepLightness: PaletteStepDef[] = [
   { label: '950', lightness: 8 },
 ];
 
-export const scales: Scale[] = [
-  {
-    title: 'Surfaces',
-    isText: false,
-    steps: [
-      { name: 'lowest',  position: -1 },
-      { name: 'lower',   position: -2/3 },
-      { name: 'low',     position: -1/3 },
-      { name: 'default', position: 0 },
-      { name: 'high',    position: 1/3 },
-      { name: 'higher',  position: 2/3 },
-      { name: 'highest', position: 1 },
-    ]
-  },
-  {
-    title: 'Borders',
-    isText: false,
-    steps: [
-      { name: 'faint',   position: -1 },
-      { name: 'subtle',  position: -0.5 },
-      { name: 'default', position: 0 },
-      { name: 'medium',  position: 0.5 },
-      { name: 'strong',  position: 1 },
-    ]
-  },
-  {
-    title: 'Text',
-    isText: true,
-    steps: [
-      { name: 'primary',   position: 0 },
-      { name: 'secondary', position: 0 },
-      { name: 'tertiary',  position: 0 },
-      { name: 'muted',     position: 0 },
-      { name: 'disabled',  position: 0 },
-    ]
-  }
-];
-
-export const paletteStepKey = (label: string) => `Palette-${label}`;
-export const stepKey = (scaleTitle: string, stepName: string) => `${scaleTitle}-${stepName}`;
 export const scaleCurveKey = (scaleTitle: string, channel: 'lightness' | 'saturation') => `${scaleTitle}-${channel}`;
 
-export function stepIndexToX(index: number): number {
-  return (index / (paletteStepLightness.length - 1)) * 100;
-}
-
-export function scaleStepToX(step: Step, scale: Scale): number {
-  const idx = scale.steps.indexOf(step);
-  return scale.steps.length > 1 ? (idx / (scale.steps.length - 1)) * 100 : 50;
-}
-
-export function injectLockedAnchor(curve: CurveAnchor[], x: number, y: number): { curve: CurveAnchor[]; idx: number; injected: boolean } {
-  const existing = curve.findIndex(a => Math.abs(a.x - x) < 0.5);
-  if (existing >= 0) {
-    if (curve[existing].x === x && Math.abs(curve[existing].y - y) < 0.01) return { curve, idx: existing, injected: false };
-    return { curve: curve.map((a, i) => i === existing ? { ...a, x, y } : a), idx: existing, injected: false };
-  }
-  let insertAt = curve.findIndex(a => a.x > x);
-  if (insertAt < 0) insertAt = curve.length;
-  return { curve: [...curve.slice(0, insertAt), makeAnchor(x, y, 15), ...curve.slice(insertAt)], idx: insertAt, injected: true };
-}
-
-export function removeLockedAnchor(curve: CurveAnchor[], idx: number | null): CurveAnchor[] {
-  if (idx === null || idx === 0 || idx === curve.length - 1) return curve;
-  return curve.filter((_, i) => i !== idx);
-}
-
-export function computePaletteColor(
-  index: number,
-  base: string,
-  lightnessCurve: CurveAnchor[],
-  saturationCurve: CurveAnchor[],
-  curveOffset: CurveOffset
-): string {
-  const { c: baseC, h } = hexToOklch(base);
-  const xPos = stepIndexToX(index);
-
-  const targetL = Math.max(0, Math.min(100, sampleCurve(lightnessCurve, xPos) + (curveOffset['lightness'] ?? 0))) / 100;
-  const satMul = Math.max(0, Math.min(2, (sampleCurve(saturationCurve, xPos) + (curveOffset['saturation'] ?? 0)) / 100));
-  const targetC = baseC * satMul;
-
-  const clamped = gamutClamp(targetL, targetC, h);
-  return oklchToHex(clamped.l, clamped.c, clamped.h);
-}
-
-export function computeDerivedColor(
-  step: Step,
-  base: string,
-  scaleTitle: string,
-  scaleCurves: ScaleCurves,
-  curveOffset: CurveOffset
-): string {
-  const { l: baseL, c: baseC, h: baseH } = hexToOklch(base);
-  const scale = scales.find(s => s.title === scaleTitle)!;
-  const xPos = scaleStepToX(step, scale);
-
-  const lCurve = scaleCurves[scaleTitle]?.lightness ?? [];
-  const sCurve = scaleCurves[scaleTitle]?.saturation ?? [];
-  const lOff = curveOffset[scaleCurveKey(scaleTitle, 'lightness')] ?? 0;
-  const sOff = curveOffset[scaleCurveKey(scaleTitle, 'saturation')] ?? 0;
-
-  let targetL: number;
-  if (scale.isText) {
-    // Text: lightness curve is a multiplier (100 = 1x base lightness)
-    const lMul = Math.max(0, Math.min(2, (sampleCurve(lCurve, xPos) + lOff) / 100));
-    targetL = Math.max(0, Math.min(1, baseL * lMul));
-  } else {
-    targetL = Math.max(0, Math.min(100, sampleCurve(lCurve, xPos) + lOff)) / 100;
-  }
-
-  const satMul = Math.max(0, Math.min(2, (sampleCurve(sCurve, xPos) + sOff) / 100));
-  const targetC = baseC * satMul;
-
-  const clamped = gamutClamp(targetL, targetC, baseH);
-  return oklchToHex(clamped.l, clamped.c, clamped.h);
-}
-
 interface PaletteComputed {
-  hex: string;
+  oklch: Oklch;
 }
 
-// Pick the contiguous window of palette steps (dark-first) whose lightness
-// curve best matches this scale's derived lightness curve.
+// Pick the contiguous window of palette steps whose lightness curve best
+// matches this scale's derived lightness curve. Scores both orderings —
+// dark-first (ascending L, historical) and its reverse (light-first,
+// descending L) — so a light-scheme scale (surfaces descend) snaps as
+// naturally as a dark one. Ties prefer dark-first (byte-stable for existing
+// dark themes).
 export function snapScaleToPalette(
   scale: Scale,
-  baseColor: string,
+  baseColor: Oklch,
   scaleCurves: ScaleCurves,
   curveOffset: CurveOffset,
   paletteComputed: ReadonlyArray<PaletteComputed>
-): Record<string, string> {
+): Record<string, Oklch> {
   const n = scale.steps.length;
 
-  const stepL = scale.steps.map(step => {
-    const derived = computeDerivedColor(step, baseColor, scale.title, scaleCurves, curveOffset);
-    return hexToOklch(derived).l;
-  });
+  const stepL = scale.steps.map(step =>
+    computeDerivedOklch(step, baseColor, scale.title, scaleCurves, curveOffset).l,
+  );
+
+  const bestWindow = (pal: ReadonlyArray<PaletteComputed>): { cost: number; start: number } => {
+    const palL = pal.map(ps => ps.oklch.l);
+    let start = 0;
+    let cost = Infinity;
+    for (let s = 0; s <= pal.length - n; s++) {
+      let c = 0;
+      for (let i = 0; i < n; i++) {
+        const d = stepL[i] - palL[s + i];
+        c += d * d;
+      }
+      if (c < cost) { cost = c; start = s; }
+    }
+    return { cost, start };
+  };
 
   const palDarkFirst = [...paletteComputed].reverse();
-  const palLDarkFirst = palDarkFirst.map(ps => hexToOklch(ps.hex).l);
-
-  let bestStart = 0;
-  let bestCost = Infinity;
-  for (let start = 0; start <= palDarkFirst.length - n; start++) {
-    let cost = 0;
-    for (let i = 0; i < n; i++) {
-      const d = stepL[i] - palLDarkFirst[start + i];
-      cost += d * d;
-    }
-    if (cost < bestCost) {
-      bestCost = cost;
-      bestStart = start;
-    }
-  }
+  const palLightFirst = [...palDarkFirst].reverse();
+  const dark = bestWindow(palDarkFirst);
+  const light = bestWindow(palLightFirst);
+
+  const useLight = light.cost < dark.cost;
+  const pal = useLight ? palLightFirst : palDarkFirst;
+  const start = useLight ? light.start : dark.start;
 
-  const assigned: Record<string, string> = {};
+  const assigned: Record<string, Oklch> = {};
   for (let i = 0; i < n; i++) {
-    assigned[stepKey(scale.title, scale.steps[i].name)] = palDarkFirst[bestStart + i].hex;
+    assigned[stepKey(scale.title, scale.steps[i].name)] = pal[start + i].oklch;
   }
   return assigned;
 }

package/src/editor/ui/sections/textStyles.ts

@@ -0,0 +1,82 @@
+/**
+ * Registry of the eight v1 semantic text styles rendered by TextStylesSection.
+ * Each style is a bundle of alias tokens declared in tokens.css; the prefix
+ * joins with a kind suffix (`-font-family`, `-font-size`, …) to form each
+ * axis variable the editor's pickers target.
+ *
+ * Family/size/weight/letter-spacing/line-height are editable on every style.
+ * `hasTextTransform` marks the one style (eyebrow) that also exposes a
+ * text-transform picker — the only axis that exists on just one style.
+ */
+
+export interface TextStyle {
+  name: string;
+  label: string;
+  /** Variable prefix, e.g. `--heading-xl`; suffixes form each axis var. */
+  prefix: string;
+  /** Element (or class) this style is the default for. */
+  defaultElement: string;
+  preview: string;
+  /** Whether this style exposes an editable `-text-transform` axis. */
+  hasTextTransform?: boolean;
+}
+
+export const TEXT_STYLES: TextStyle[] = [
+  {
+    name: 'heading-xl',
+    label: 'Heading XL',
+    prefix: '--heading-xl',
+    defaultElement: 'h1',
+    preview: 'Page title',
+  },
+  {
+    name: 'heading-lg',
+    label: 'Heading LG',
+    prefix: '--heading-lg',
+    defaultElement: 'h2',
+    preview: 'Section heading',
+  },
+  {
+    name: 'heading-md',
+    label: 'Heading MD',
+    prefix: '--heading-md',
+    defaultElement: 'h3',
+    preview: 'Subsection heading',
+  },
+  {
+    name: 'heading-sm',
+    label: 'Heading SM',
+    prefix: '--heading-sm',
+    defaultElement: 'h4',
+    preview: 'Minor heading',
+  },
+  {
+    name: 'body-md',
+    label: 'Body MD',
+    prefix: '--body-md',
+    defaultElement: 'p',
+    preview: 'Body copy for comfortable reading.',
+  },
+  {
+    name: 'body-sm',
+    label: 'Body SM',
+    prefix: '--body-sm',
+    defaultElement: 'small',
+    preview: 'Captions and secondary text.',
+  },
+  {
+    name: 'code',
+    label: 'Code',
+    prefix: '--code',
+    defaultElement: 'code',
+    preview: 'const total = sum(items);',
+  },
+  {
+    name: 'eyebrow',
+    label: 'Eyebrow',
+    prefix: '--eyebrow',
+    defaultElement: 'eyebrow',
+    preview: 'Overline label',
+    hasTextTransform: true,
+  },
+];

package/src/editor/ui/sections/tokenScales.ts

@@ -26,7 +26,7 @@ export const RADIUS_VARS = [
 export const FONT_SIZE_VARS = [
   '--font-size-xs', '--font-size-sm', '--font-size-md', '--font-size-lg',
   '--font-size-xl', '--font-size-2xl', '--font-size-3xl', '--font-size-4xl',
-  '--font-size-5xl', '--font-size-6xl',
+  '--font-size-5xl', '--font-size-6xl', '--font-size-7xl',
 ] as const;
 
 export const ICON_SIZE_VARS = [
@@ -42,8 +42,8 @@ export const FONT_WEIGHT_VARS = [
 ] as const;
 
 export const LINE_HEIGHT_VARS = [
-  '--line-height-xs', '--line-height-sm', '--line-height-md',
-  '--line-height-lg', '--line-height-xl',
+  '--line-height-none', '--line-height-tightest', '--line-height-tighter',
+  '--line-height-tight', '--line-height-normal', '--line-height-relaxed',
 ] as const;
 
 export const LETTER_SPACING_VARS = [

package/src/live-tokens/data/themes/default.json

@@ -1721,7 +1721,7 @@
     "--badge-trait-text-font-family": "var(--font-sans)",
     "--badge-trait-text-font-size": "var(--font-size-sm)",
     "--badge-trait-text-font-weight": "var(--font-weight-light)",
-    "--badge-trait-text-line-height": "var(--line-height-xs)",
+    "--badge-trait-text-line-height": "var(--line-height-none)",
     "--badge-trait-border": "var(--border-brand-medium)",
     "--badge-trait-border-width": "var(--border-width-1)",
     "--badge-trait-radius": "var(--radius-full)",
@@ -1732,14 +1732,14 @@
     "--sectiondivider-title-font-family": "var(--font-display)",
     "--sectiondivider-title-font-size": "var(--font-size-5xl)",
     "--sectiondivider-title-font-weight": "var(--font-weight-normal)",
-    "--sectiondivider-title-line-height": "var(--line-height-xs)",
+    "--sectiondivider-title-line-height": "var(--line-height-none)",
     "--sectiondivider-title-border-width": "var(--border-width-4)",
     "--sectiondivider-title-stroke-color": "var(--surface-canvas-lowest)",
     "--sectiondivider-description": "var(--text-secondary)",
     "--sectiondivider-description-font-family": "var(--font-sans)",
     "--sectiondivider-description-font-size": "var(--font-size-md)",
     "--sectiondivider-description-font-weight": "var(--font-weight-normal)",
-    "--sectiondivider-description-line-height": "var(--line-height-md)",
+    "--sectiondivider-description-line-height": "var(--line-height-normal)",
     "--dialog-primary-default-surface": "var(--surface-neutral-high)",
     "--dialog-primary-default-text": "var(--text-primary)",
     "--dialog-primary-default-border": "var(--border-neutral-medium)",