@motion-proto/live-tokens 0.44.0 → 0.46.0

package/src/editor/ui/colors/paletteBaseColor.ts

@@ -19,10 +19,8 @@
 
 import { get } from 'svelte/store';
 import type { Oklch } from '../../core/palettes/oklch';
-import { AXIS_ROLES } from '../../core/palettes/colorHarmony';
+import { axisLabel } from '../../core/palettes/colorHarmony';
 import { PALETTE_SPECS, syncBaseAnchor, type PaletteSpec } from '../../core/palettes/paletteDerivation';
-import { solveTextCurves } from '../../core/palettes/solveTextContrast';
-import { recommendNeutralText } from '../../core/palettes/recommendText';
 import { defaultPaletteConfig } from '../palette/paletteMath';
 import { mutate, transaction, editorState } from '../../core/store/editorStore';
 import type { EditorState } from '../../core/store/editorTypes';
@@ -108,7 +106,7 @@ export function setAxisHue(index: number, hue: number, familyChroma?: number): v
   const base = axis.family !== null ? get(editorState).palettes[axis.family]?.baseColor : undefined;
   const colorNoop = !base || (base.h === h && (c === undefined || base.c === c));
   if (axis.hue === h && colorNoop) return;
-  mutate(`colors: ${AXIS_ROLES[index]} axis hue`, (s) => {
+  mutate(`colors: ${axisLabel(index)} hue`, (s) => {
     applyAxisHue(s, index, h, c);
   });
 }
@@ -147,39 +145,47 @@ function applyAxisHue(s: EditorState, index: number, hue: number, chroma: number
   }
 }
 
-/** Bind a family to an axis; the family adopts the axis hue (c + L kept).
- *  Trade-places semantics: whatever occupied the destination takes the source's
- *  position (another axis, adopting its hue, or Unassigned). One mutate. */
-export function bindFamilyToAxis(family: string, index: number): void {
+/** Bind a family to an axis; the axis moves to the family's hue. Trade-places
+ *  semantics: whatever occupied the destination takes the source's position
+ *  (another axis, which likewise moves to it, or unassigned). One mutate.
+ *  Returns whether any axis hue moved, which is what makes an applied harmony
+ *  mode untrue — the caller drops to Custom on that. */
+export function bindFamilyToAxis(family: string, index: number): boolean {
   const srcIndex = get(editorState).harmonyAxes.findIndex((a) => a.family === family);
-  if (srcIndex === index) return;
-  mutate(`colors: bind ${family}`, (s) => {
+  if (srcIndex === index) return false;
+  let hueMoved = false;
+  mutate(`colors: assign ${family}`, (s) => {
     const axes = s.harmonyAxes;
     const occupant = axes[index].family;
     axes[index].family = family;
-    adoptAxisHue(s, family, axes[index].hue);
-    // Source was another axis: the occupant trades into it (adopting its hue).
-    // Source was Unassigned (-1): the occupant simply floats free, color kept.
+    hueMoved = takeSeedHue(s, index, family);
+    // Source was another axis: the occupant trades into it, keeping its color
+    // and taking that axis to its hue. Source was unassigned (-1): the occupant
+    // simply floats free, color kept.
     if (srcIndex !== -1) {
       axes[srcIndex].family = occupant;
-      if (occupant !== null) adoptAxisHue(s, occupant, axes[srcIndex].hue);
+      if (occupant !== null) hueMoved = takeSeedHue(s, srcIndex, occupant) || hueMoved;
     }
   });
+  return hueMoved;
 }
 
 /** Unbind; the family keeps its current color, the axis keeps its hue. */
 export function unbindFamily(family: string): void {
   const idx = get(editorState).harmonyAxes.findIndex((a) => a.family === family);
   if (idx === -1) return;
-  mutate(`colors: unbind ${family}`, (s) => {
+  mutate(`colors: unassign ${family}`, (s) => {
     s.harmonyAxes[idx].family = null;
   });
 }
 
-function adoptAxisHue(s: EditorState, family: string, hue: number): void {
-  const cfg = ensureConfig(s, family);
-  cfg.baseColor = { l: cfg.baseColor.l, c: cfg.baseColor.c, h: normHue(hue) };
-  syncBaseAnchor(cfg);
+/** Assignment must never repaint a seed the user chose, so the axis is what
+ *  moves. Harmony modes and axis drags stay the steps that move colors. */
+function takeSeedHue(s: EditorState, index: number, family: string): boolean {
+  const hue = normHue(ensureConfig(s, family).baseColor.h);
+  if (s.harmonyAxes[index].hue === hue) return false;
+  s.harmonyAxes[index].hue = hue;
+  return true;
 }
 
 /** Set several seed colors in ONE undo entry (harmony apply, global rotate). */
@@ -193,14 +199,6 @@ export function setBaseColors(patch: Record<string, Oklch>, historyLabel = 'colo
   });
 }
 
-export function applySolvedTextCurves(s: EditorState): void {
-  const { patches } = solveTextCurves(s.palettes);
-  for (const [label, patch] of Object.entries(patches)) {
-    const cfg = s.palettes[label];
-    if (cfg) cfg.scaleCurves = { ...cfg.scaleCurves, ...patch.scaleCurves };
-  }
-}
-
 /** Read-only view of every family's config, seeding spec defaults for the ones a
  *  loaded theme leaves unconfigured — previews and recommendations must not go
  *  static on a family the theme never mentions. */
@@ -212,15 +210,3 @@ export function palettesWithDefaults(palettes: Record<string, PaletteConfig>): R
   }
   return map;
 }
-
-/** Apply the Color Story's suggested neutral text hierarchy (primary anchor,
- *  two even L drops, AA floors) as the Neutral family's Text curve. */
-export function applySuggestedNeutralText(useBlackWhite = false): void {
-  mutate('colors: suggested text hierarchy', (s) => {
-    ensureConfig(s, 'Neutral');
-    const rec = recommendNeutralText(s.palettes, undefined, useBlackWhite);
-    if (!rec.patch) return;
-    const cfg = s.palettes['Neutral'];
-    cfg.scaleCurves = { ...cfg.scaleCurves, Text: rec.patch };
-  });
-}

package/src/live-tokens/data/tokens.generated.css

@@ -125,6 +125,34 @@
   --text-accent-tertiary: #4d7271;
   --text-accent-muted: #3c4847;
   --text-accent-disabled: #313232;
+  --color-special-100: #d2c8ff;
+  --color-special-200: #b19cff;
+  --color-special-300: #9673f5;
+  --color-special-400: #7d54db;
+  --color-special-500: #6634c4;
+  --color-special-600: #5407af;
+  --color-special-700: #3f0088;
+  --color-special-800: #2d0064;
+  --color-special-850: #1d0046;
+  --color-special-900: #10002d;
+  --color-special-950: #060019;
+  --surface-special-lowest: #0f002b;
+  --surface-special-lower: #250055;
+  --surface-special-low: #3d0084;
+  --surface-special: #5700b7;
+  --surface-special-high: #6c3bcb;
+  --surface-special-higher: #8161d8;
+  --surface-special-highest: #9983e4;
+  --border-special-faint: #29005c;
+  --border-special-subtle: #4b009f;
+  --border-special: #6b34ce;
+  --border-special-medium: #8c5df8;
+  --border-special-strong: #ac93ff;
+  --text-special: #baa9ff;
+  --text-special-secondary: #8665e0;
+  --text-special-tertiary: #5c4e8b;
+  --text-special-muted: #3e3a4f;
+  --text-special-disabled: #303032;
   --color-canvas-100: #cecfe5;
   --color-canvas-200: #abacc2;
   --color-canvas-300: #8d8da4;
@@ -212,34 +240,6 @@
   --text-alternate-tertiary: #8a8786;
   --text-alternate-muted: #545352;
   --text-alternate-disabled: #3b3b3b;
-  --color-special-100: #d2c8ff;
-  --color-special-200: #b19cff;
-  --color-special-300: #9673f5;
-  --color-special-400: #7d54db;
-  --color-special-500: #6634c4;
-  --color-special-600: #5407af;
-  --color-special-700: #3f0088;
-  --color-special-800: #2d0064;
-  --color-special-850: #1d0046;
-  --color-special-900: #10002d;
-  --color-special-950: #060019;
-  --surface-special-lowest: #0f002b;
-  --surface-special-lower: #250055;
-  --surface-special-low: #3d0084;
-  --surface-special: #5700b7;
-  --surface-special-high: #6c3bcb;
-  --surface-special-higher: #8161d8;
-  --surface-special-highest: #9983e4;
-  --border-special-faint: #29005c;
-  --border-special-subtle: #4b009f;
-  --border-special: #6b34ce;
-  --border-special-medium: #8c5df8;
-  --border-special-strong: #ac93ff;
-  --text-special: #baa9ff;
-  --text-special-secondary: #8665e0;
-  --text-special-tertiary: #5c4e8b;
-  --text-special-muted: #3e3a4f;
-  --text-special-disabled: #303032;
   --color-info-100: #9adbff;
   --color-info-200: #4ebbf1;
   --color-info-300: #109bd4;

package/src/system/components/ImageLightbox.svelte

@@ -916,7 +916,6 @@
     backdrop-filter: blur(var(--blur-md));
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    letter-spacing: var(--letter-spacing-wider);
     opacity: 0;
     pointer-events: none;
   }
@@ -949,7 +948,6 @@
     text-align: center;
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    letter-spacing: var(--letter-spacing-wider);
     padding: 0 var(--space-4);
   }
 

package/src/system/components/SectionDivider.svelte

@@ -212,7 +212,7 @@
     --sectiondivider-lg-eyebrow-font-family: var(--font-sans);
     --sectiondivider-lg-eyebrow-font-weight: var(--font-weight-medium);
     --sectiondivider-lg-eyebrow-font-size: var(--font-size-md);
-    --sectiondivider-lg-eyebrow-letter-spacing: var(--letter-spacing-wide);
+    --sectiondivider-lg-eyebrow-letter-spacing: var(--letter-spacing-normal);
     --sectiondivider-lg-padding: var(--space-0);
     --sectiondivider-lg-title-padding: var(--space-2);
     --sectiondivider-lg-description-padding: var(--space-0);
@@ -243,7 +243,7 @@
     --sectiondivider-md-eyebrow-font-family: var(--font-sans);
     --sectiondivider-md-eyebrow-font-weight: var(--font-weight-medium);
     --sectiondivider-md-eyebrow-font-size: var(--font-size-sm);
-    --sectiondivider-md-eyebrow-letter-spacing: var(--letter-spacing-wide);
+    --sectiondivider-md-eyebrow-letter-spacing: var(--letter-spacing-normal);
     --sectiondivider-md-padding: var(--space-0);
     --sectiondivider-md-title-padding: var(--space-2);
     --sectiondivider-md-description-padding: var(--space-0);
@@ -274,7 +274,7 @@
     --sectiondivider-sm-eyebrow-font-family: var(--font-sans);
     --sectiondivider-sm-eyebrow-font-weight: var(--font-weight-medium);
     --sectiondivider-sm-eyebrow-font-size: var(--font-size-xs);
-    --sectiondivider-sm-eyebrow-letter-spacing: var(--letter-spacing-wide);
+    --sectiondivider-sm-eyebrow-letter-spacing: var(--letter-spacing-normal);
     --sectiondivider-sm-padding: var(--space-0);
     --sectiondivider-sm-title-padding: var(--space-2);
     --sectiondivider-sm-description-padding: var(--space-0);
@@ -546,7 +546,7 @@
     display: inline-flex;
   }
 
-  /* Eyebrow visibility + uppercase flow from per-variant CSS vars. */
+  /* Eyebrow visibility + text transform flow from per-variant CSS vars. */
   .divider-eyebrow {
     display: var(--_divider-eyebrow-display);
     font-family: var(--_divider-eyebrow-font-family);

package/src/editor/core/palettes/recommendText.ts

@@ -1,216 +0,0 @@
-// Suggested neutral text hierarchy for the Color Story.
-//
-// The solver (`solveTextContrast`) optimizes floors: it pushes every step to
-// the minimum L that clears its ratio, which can collapse secondary and
-// tertiary onto nearly the same value. This module instead anchors on the
-// user's current primary and derives secondary/tertiary as two even OKLCH-L
-// drops toward the background — hierarchy first, with WCAG AA (4.5) as a floor
-// rather than the driver. The floor is solved against the adverse extreme of
-// the neutral surface band so a compliant suggestion holds AA on EVERY band
-// surface (broadest reach); when the seed's reachable-L window can't span the
-// band, it falls back to the default surface and the coverage report says so.
-// Coverage is informational — callers alert on partial reach, never block.
-
-import { gamutClamp, oklchToHexClamped } from './oklch';
-import {
-  palettesToValues,
-  defaultScaleCurves,
-  BW_GUARD_MIN_L,
-  BW_GUARD_MAX_L,
-  type DerivedValue,
-  type SchemeDirection,
-} from './paletteDerivation';
-
-export { BW_GUARD_MIN_L, BW_GUARD_MAX_L };
-import { NEUTRAL_BAND } from './solveTextContrast';
-import { findLForContrast, contrastRatio, AA_BODY } from './contrast';
-import { sampleCurve, makeAnchor, type CurveAnchor } from '../../ui/curveEngine';
-import type { PaletteConfig } from '../themes/themeTypes';
-
-/** One even hierarchy drop in OKLCH L. Two drops span primary → tertiary. */
-export const SUGGESTED_STEP_DROP = 0.07;
-
-/** L difference below which current and suggested count as the same value. */
-const DIFF_EPS = 0.01;
-
-export interface SurfaceCheck {
-  var: string;
-  ratio: number;
-  meets: boolean;
-}
-
-export interface Coverage {
-  cleared: number;
-  total: number;
-  full: boolean;
-  /** Most adverse band surface met with every less-adverse one also met;
-   *  null when even the least adverse surface fails. */
-  reachVar: string | null;
-  /** Adversity-ascending (least adverse band surface first). */
-  checks: SurfaceCheck[];
-}
-
-export interface TextSuggestion {
-  step: 'primary' | 'secondary' | 'tertiary';
-  textVar: string;
-  current: { hex: string; l: number; coverage: Coverage };
-  suggested: { hex: string; l: number; c: number; coverage: Coverage };
-  differs: boolean;
-}
-
-export interface NeutralTextRecommendation {
-  scheme: SchemeDirection;
-  suggestions: TextSuggestion[];
-  anyDiffers: boolean;
-  /** Neutral Text-scale curve patch reproducing the suggested Ls at x=0/25/50
-   *  and pinning current muted/disabled at x=75/100. Null when nothing differs. */
-  patch: { lightness: CurveAnchor[]; saturation: CurveAnchor[] } | null;
-}
-
-const STEPS: { step: TextSuggestion['step']; x: number; textVar: string }[] = [
-  { step: 'primary', x: 0, textVar: '--text-primary' },
-  { step: 'secondary', x: 25, textVar: '--text-secondary' },
-  { step: 'tertiary', x: 50, textVar: '--text-tertiary' },
-];
-
-function colorL(v: DerivedValue | undefined): number | null {
-  return v?.kind === 'color' ? v.l : null;
-}
-
-export function recommendNeutralText(
-  palettes: Record<string, PaletteConfig>,
-  scheme?: SchemeDirection,
-  useBlackWhite = false,
-): NeutralTextRecommendation {
-  const neutral = palettes['Neutral']!;
-  const values = palettesToValues(palettes);
-
-  const pageBgL = colorL(values['--page-bg']) ?? colorL(values['--surface-neutral'])!;
-  const resolvedScheme: SchemeDirection = scheme ?? (pageBgL >= 0.5 ? 'light' : 'dark');
-  const direction: 'lighter' | 'darker' = resolvedScheme === 'light' ? 'darker' : 'lighter';
-  // Toward more contrast: +L for light text on dark surfaces, −L for dark text.
-  const sign = direction === 'lighter' ? 1 : -1;
-
-  const band = NEUTRAL_BAND
-    .map((v) => {
-      const value = values[v];
-      return value?.kind === 'color'
-        ? { var: v, l: value.l, hex: oklchToHexClamped(value.l, value.c, value.h) }
-        : null;
-    })
-    .filter((s): s is { var: string; l: number; hex: string } => s !== null)
-    .sort((a, b) => (a.l - b.l) * sign);
-  const bandAdverse = band[band.length - 1];
-  const surfaceDefaultHex = band.find((s) => s.var === '--surface-neutral')!.hex;
-
-  const seed = neutral.baseColor;
-  const seedL = Math.max(seed.l, 1e-4);
-  const baseC = Math.max(seed.c, 1e-9);
-  const baseH = seed.h;
-  const lMax = Math.min(1, 2 * seedL);
-
-  const curveOffset = neutral.curveOffset ?? {};
-  const lOff = curveOffset['Text-lightness'] ?? 0;
-  const sOff = curveOffset['Text-saturation'] ?? 0;
-  const satCurve = neutral.scaleCurves?.Text?.saturation ?? defaultScaleCurves.Text.saturation();
-
-  const stepChroma = (x: number): number =>
-    baseC * Math.max(0, Math.min(2, (sampleCurve(satCurve, x) + sOff) / 100));
-
-  function coverage(hex: string): Coverage {
-    const checks: SurfaceCheck[] = band.map((s) => {
-      const ratio = contrastRatio(hex, s.hex);
-      return { var: s.var, ratio, meets: ratio >= AA_BODY };
-    });
-    let reachVar: string | null = null;
-    for (const c of checks) {
-      if (!c.meets) break;
-      reachVar = c.var;
-    }
-    const cleared = checks.filter((c) => c.meets).length;
-    return { cleared, total: checks.length, full: cleared === checks.length, reachVar, checks };
-  }
-
-  // AA floors. Primary carries the broadest-reach preference: it floors
-  // against the band's adverse extreme so body text holds AA on every band
-  // surface the window can span (fallback: default surface, surfaced as
-  // partial coverage). Secondary/tertiary floor against the default surface —
-  // flooring THEM at the band extreme too would collapse the whole hierarchy
-  // onto near-white whenever the lightest band surface is a mid-tone.
-  const solveFloor = (against: string, c: number) =>
-    findLForContrast({ against, ratio: AA_BODY, direction, c, h: baseH, lMin: 0, lMax });
-
-  let primaryFloor = solveFloor(bandAdverse.hex, stepChroma(0));
-  if (contrastRatio(primaryFloor.hex, bandAdverse.hex) < AA_BODY) {
-    primaryFloor = solveFloor(surfaceDefaultHex, stepChroma(0));
-  }
-  const stepFloor = solveFloor(surfaceDefaultHex, stepChroma(50));
-
-  const towardContrast = (a: number, b: number): number => (sign > 0 ? Math.max(a, b) : Math.min(a, b));
-  const clampWindow = (l: number): number => Math.max(0, Math.min(lMax, l));
-
-  const currentL: Record<string, number> = {};
-  for (const s of STEPS) currentL[s.step] = colorL(values[s.textVar]) ?? seedL;
-
-  // Pure black/white is an affirmative choice (most designers find it too
-  // stark): opted in, primary anchors at the scheme extreme; otherwise the
-  // anchor is pulled inside the guard band, yielding only to the AA floor.
-  let primaryL: number;
-  if (useBlackWhite) {
-    primaryL = clampWindow(sign > 0 ? lMax : 0);
-  } else {
-    const guard = sign > 0
-      ? Math.max(BW_GUARD_MAX_L, primaryFloor.l)
-      : Math.min(BW_GUARD_MIN_L, primaryFloor.l);
-    const anchored = clampWindow(towardContrast(currentL.primary, primaryFloor.l));
-    primaryL = sign > 0 ? Math.min(anchored, guard) : Math.max(anchored, guard);
-  }
-  const tertiaryL = towardContrast(stepFloor.l, primaryL - sign * 2 * SUGGESTED_STEP_DROP);
-  const suggestedL: Record<string, number> = {
-    primary: primaryL,
-    secondary: towardContrast(stepFloor.l, (primaryL + tertiaryL) / 2),
-    tertiary: tertiaryL,
-  };
-
-  const suggestions: TextSuggestion[] = STEPS.map((s) => {
-    const currentValue = values[s.textVar];
-    const currentHex = currentValue?.kind === 'color'
-      ? oklchToHexClamped(currentValue.l, currentValue.c, currentValue.h)
-      : oklchToHexClamped(seedL, 0, 0);
-    const g = gamutClamp(suggestedL[s.step], stepChroma(s.x), baseH);
-    const hex = oklchToHexClamped(g.l, g.c, g.h);
-    return {
-      step: s.step,
-      textVar: s.textVar,
-      current: { hex: currentHex, l: currentL[s.step], coverage: coverage(currentHex) },
-      suggested: { hex, l: g.l, c: g.c, coverage: coverage(hex) },
-      differs: Math.abs(g.l - currentL[s.step]) > DIFF_EPS,
-    };
-  });
-
-  const anyDiffers = suggestions.some((s) => s.differs);
-
-  let patch: NeutralTextRecommendation['patch'] = null;
-  if (anyDiffers) {
-    const clampY = (v: number) => Math.max(0, Math.min(200, v));
-    const lightAnchors: CurveAnchor[] = [];
-    const satAnchors: CurveAnchor[] = [];
-    for (const s of suggestions) {
-      const x = STEPS.find((st) => st.step === s.step)!.x;
-      lightAnchors.push(makeAnchor(x, clampY((100 * s.suggested.l) / seedL - lOff)));
-      satAnchors.push(makeAnchor(x, clampY((100 * s.suggested.c) / baseC - sOff)));
-    }
-    // Pin muted/disabled at their current derived values so applying the
-    // suggestion never moves the steps it doesn't own.
-    for (const [x, textVar] of [[75, '--text-muted'], [100, '--text-disabled']] as const) {
-      const v = values[textVar];
-      const l = v?.kind === 'color' ? v.l : seedL;
-      const c = v?.kind === 'color' ? v.c : 0;
-      lightAnchors.push(makeAnchor(x, clampY((100 * l) / seedL - lOff)));
-      satAnchors.push(makeAnchor(x, clampY((100 * c) / baseC - sOff)));
-    }
-    patch = { lightness: lightAnchors, saturation: satAnchors };
-  }
-
-  return { scheme: resolvedScheme, suggestions, anyDiffers, patch };
-}