@motion-proto/live-tokens 0.45.0 → 0.46.0

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

@@ -19,7 +19,7 @@
 
 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 { defaultPaletteConfig } from '../palette/paletteMath';
 import { mutate, transaction, editorState } from '../../core/store/editorStore';
@@ -106,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);
   });
 }
@@ -145,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). */

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);