@motion-proto/live-tokens 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 6/7.",
   "keywords": [

package/src/editor/component-editor/CardEditor.svelte

@@ -15,6 +15,7 @@
       { label: 'background blur', canBeLinked: true, groupKey: 'blur', variable: '--card-default-blur', element: 'frame' },
       { label: 'header color', groupKey: 'surface', variable: '--card-default-header-surface', element: 'header' },
       { label: 'header padding', canBeLinked: true, groupKey: 'header-padding', variable: '--card-default-header-padding', element: 'header' },
+      { label: 'icon gap', canBeLinked: true, groupKey: 'header-gap', variable: '--card-default-header-gap', element: 'header' },
       { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--card-default-icon-size', element: 'header' },
       { label: 'body padding', canBeLinked: true, groupKey: 'body-padding', variable: '--card-default-body-padding', element: 'body' },
     ],
@@ -63,6 +64,7 @@
     ['--card-default-border-width', 'card'],
     ['--card-default-radius', 'card'],
     ['--card-default-header-padding', 'card'],
+    ['--card-default-header-gap', 'card'],
     ['--card-default-body-padding', 'card'],
     ['--card-default-shadow', 'card'],
     ['--card-default-blur', 'card'],

package/src/editor/component-editor/scaffolding/ShadowBackdrop.svelte

@@ -53,7 +53,6 @@
     min-height: 12rem;
     border-radius: var(--ui-radius-md);
     box-sizing: border-box;
-    overflow: hidden;
   }
 
   .shadow-backdrop.with-controls {
@@ -61,12 +60,22 @@
     grid-template-areas: "preview controls";
   }
 
+  /* Clip slotted children (e.g. Dialog's full-bleed overlay in padding=0 mode)
+     to the backdrop's rounded corners here rather than on the wrapper, so the
+     controls cell's dropdowns can escape vertically. The wrapper's image/color
+     background is still clipped naturally by its own border-radius. */
   .shadow-backdrop-content {
     display: grid;
     align-items: center;
     justify-items: start;
     min-width: 0;
     grid-area: preview;
+    border-radius: var(--ui-radius-md);
+    overflow: hidden;
+  }
+
+  .shadow-backdrop.with-controls .shadow-backdrop-content {
+    border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
   }
 
   .shadow-backdrop-controls {

package/src/editor/core/store/editorRenderer.ts

@@ -19,7 +19,6 @@ import {
   columnsToVars,
   columnsEqualsDefault,
   overlaysToVars,
-  overlaysEqualsDefault,
   shadowsToVars,
   gradientsToVars,
   componentsToVars,
@@ -30,9 +29,7 @@ export function deriveCssVars(state: EditorState): Record<string, string> {
   if (!columnsEqualsDefault(state.columns)) {
     Object.assign(out, columnsToVars(state.columns));
   }
-  if (!overlaysEqualsDefault(state.overlays)) {
-    Object.assign(out, overlaysToVars(state.overlays));
-  }
+  Object.assign(out, overlaysToVars(state.overlays));
   if (state.shadows.tokens.length > 0) {
     Object.assign(out, shadowsToVars(state.shadows));
   }

package/src/editor/core/store/editorStore.ts

@@ -51,7 +51,6 @@ import {
 import {
   loadOverlaysFromVars,
   makeDefaultOverlaysState,
-  overlaysEqualsDefault,
   overlaysToVars,
 } from '../themes/slices/overlays';
 import {
@@ -133,14 +132,13 @@ export {
 
 export {
   overlaysToVars,
-  overlaysEqualsDefault,
   OVERLAY_VAR_NAMES,
   applyOverlayVarsToState,
   makeDefaultOverlaysState,
-  overlayTokenToRgba,
-  parseRgba,
-  RGBA_RE,
-  HEX_RE,
+  makeDefaultOverlayTokens,
+  makeDefaultHoverTokens,
+  overlayTokenToCss,
+  parseOverlayCss,
 } from '../themes/slices/overlays';
 
 export {
@@ -548,9 +546,7 @@ export function toTheme(state: EditorState, meta: { name: string }): Theme {
   if (!columnsEqualsDefault(state.columns)) {
     Object.assign(cssVariables, columnsToVars(state.columns));
   }
-  if (!overlaysEqualsDefault(state.overlays)) {
-    Object.assign(cssVariables, overlaysToVars(state.overlays));
-  }
+  Object.assign(cssVariables, overlaysToVars(state.overlays));
   if (state.shadows.tokens.length > 0) {
     Object.assign(cssVariables, shadowsToVars(state.shadows));
   }

package/src/editor/core/store/editorTypes.ts

@@ -21,19 +21,13 @@ export interface ShadowOverrideFlags {
   distance: boolean; blur: boolean; size: boolean;
 }
 
+/** Overlay stop: an aliased color token + an opacity. Emits as
+ *  `color-mix(in srgb, var(<alias>) <opacity%>, transparent)`. */
 export interface OverlayToken {
-  variable: string; label: string;
-  r: number; g: number; b: number; opacity: number;
-}
-
-export interface OverlayChannelGlobals {
-  hue: number; saturation: number; lightness: number;
-  opacityMin: number; opacityMax: number;
-}
-
-export interface OverlayGlobals {
-  overlay: OverlayChannelGlobals;
-  hover: OverlayChannelGlobals;
+  variable: string;
+  label: string;
+  alias: string;
+  opacity: number;
 }
 
 export interface ColumnsState {
@@ -134,7 +128,6 @@ export interface EditorState {
   overlays: {
     tokens: OverlayToken[];
     hoverTokens: OverlayToken[];
-    globals: OverlayGlobals;
   };
   columns: ColumnsState;
   components: Record<string, ComponentSlice>;

package/src/editor/core/themes/migrations/2026-05-13-primary-to-brand.ts

@@ -1,26 +1,6 @@
 import type { Migration } from './index';
 
-/**
- * 2026-05-13: rename the `primary` color family to `brand`.
- *
- * The word "primary" was overloaded — both a color-family slot (alongside
- * info/success/danger/etc.) AND the top of the neutral text-emphasis ramp
- * (`--text-primary` / `--text-secondary` / `--text-tertiary`). Tokens like
- * `--text-primary-color` only existed because `--text-primary` was already
- * taken by neutral. Renaming the family to `brand` dissolves the collision:
- *
- *   --color-primary-{step}    → --color-brand-{step}
- *   --surface-primary[-step]  → --surface-brand[-step]
- *   --border-primary[-step]   → --border-brand[-step]
- *   --text-primary-color      → --text-brand
- *   --text-primary-{step}     → --text-brand-{step}   (step in secondary|tertiary|muted|disabled)
- *
- * The neutral text ramp (`--text-primary`, `--text-secondary`, …) is **left
- * untouched** — it's a different namespace that just happens to share the
- * word. The match list below enumerates the brand-family names explicitly so
- * a substring-on-`primary` mistake can't clobber neutral text or unrelated
- * tokens like `--button-primary-*` (component variant, not family).
- */
+// Match list is explicit so the neutral `--text-primary` ramp (different namespace) isn't clobbered.
 
 const PALETTE_STEPS = ['100','200','300','400','500','600','700','800','850','900','950'] as const;
 const SURFACE_SUFFIXES = ['lowest','lower','low','high','higher','highest'] as const;
@@ -43,7 +23,6 @@ function renameToken(name: string): string {
   return RENAME_MAP[name] ?? name;
 }
 
-/** Rewrite keys only — used for theme cssVariables (values are hex). */
 function renameKeys(rawVars: Record<string, string>): Record<string, string> {
   const out: Record<string, string> = {};
   for (const [k, v] of Object.entries(rawVars)) {
@@ -52,7 +31,6 @@ function renameKeys(rawVars: Record<string, string>): Record<string, string> {
   return out;
 }
 
-/** Rewrite both keys and values — used for component-config aliases. */
 function renameKeysAndValues(rawVars: Record<string, string>): Record<string, string> {
   const out: Record<string, string> = {};
   for (const [k, v] of Object.entries(rawVars)) {
@@ -77,12 +55,7 @@ export const componentMigration_2026_05_13_primaryToBrand: Migration = {
   apply: renameKeysAndValues,
 };
 
-/**
- * Helper for loadFromFile: rename `theme.editorConfigs.Primary` → `Brand`.
- * Lives here (with the rest of the rename) instead of in the migration
- * framework because the framework's contract is `Record<string, string>` —
- * editorConfigs is a structured palette-config map and can't pass through it.
- */
+// Lives outside the migration framework because its contract is Record<string, string>; editorConfigs is structured.
 export function renamePrimaryPaletteKey<T>(editorConfigs: Record<string, T>): Record<string, T> {
   if (!('Primary' in editorConfigs) || 'Brand' in editorConfigs) return editorConfigs;
   const { Primary, ...rest } = editorConfigs;

package/src/editor/core/themes/migrations/2026-05-26-drop-overlay-extra-stops.ts

@@ -0,0 +1,46 @@
+import type { Migration } from './index';
+
+/**
+ * Overlay scale trim (2026-05-26): `--overlay-lowest`, `--overlay-lower`,
+ * `--overlay-higher`, and `--overlay-highest` were retired. The kept stops
+ * are `--overlay-low`, `--overlay`, and `--overlay-high`. Theme files
+ * stripped of the dropped keys; component configs whose aliases referenced
+ * a dropped stop rebind to the nearest survivor.
+ */
+const DROPPED_TO_KEPT: Record<string, string> = {
+  '--overlay-lowest': '--overlay-low',
+  '--overlay-lower': '--overlay-low',
+  '--overlay-higher': '--overlay-high',
+  '--overlay-highest': '--overlay-high',
+};
+
+export const themeMigration_2026_05_26_dropOverlayExtraStops: Migration = {
+  id: '2026-05-26-drop-overlay-extra-stops-theme',
+  fromVersion: 2,
+  toVersion: 3,
+  appliesTo: 'theme',
+  apply(rawVars) {
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (key in DROPPED_TO_KEPT) continue;
+      out[key] = value;
+    }
+    return out;
+  },
+};
+
+export const componentMigration_2026_05_26_dropOverlayExtraStops: Migration = {
+  id: '2026-05-26-drop-overlay-extra-stops-component',
+  fromVersion: 16,
+  toVersion: 17,
+  appliesTo: 'component-config',
+  apply(rawVars) {
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      // Alias values are bare token names like "--overlay-higher" — rebind
+      // those to the nearest kept stop. Literal CSS values are left alone.
+      out[key] = DROPPED_TO_KEPT[value] ?? value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/index.ts

@@ -50,6 +50,10 @@ import { componentMigration_2026_05_24_promoteStateSharedTokens } from './2026-0
 import { componentMigration_2026_05_24_progressbarCollapseVariants } from './2026-05-24-progressbar-collapse-variants';
 import { componentMigration_2026_05_24_collapsiblesectionDropActiveState } from './2026-05-24-collapsiblesection-drop-active-state';
 import { componentMigration_2026_05_25_cornerbadgeFlattenVariants } from './2026-05-25-cornerbadge-flatten-variants';
+import {
+  themeMigration_2026_05_26_dropOverlayExtraStops,
+  componentMigration_2026_05_26_dropOverlayExtraStops,
+} from './2026-05-26-drop-overlay-extra-stops';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
@@ -74,6 +78,8 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_05_24_progressbarCollapseVariants,
   componentMigration_2026_05_24_collapsiblesectionDropActiveState,
   componentMigration_2026_05_25_cornerbadgeFlattenVariants,
+  themeMigration_2026_05_26_dropOverlayExtraStops,
+  componentMigration_2026_05_26_dropOverlayExtraStops,
 ];
 
 function countFor(kind: 'theme' | 'component-config'): number {

package/src/editor/core/themes/slices/overlays.ts

@@ -1,28 +1,28 @@
 /**
- * Overlays slice — overlay + hover RGBA tokens. Defaults are editor-defined
- * (mirror what `VariablesTab` historically initialised into local let state)
- * and diverge from tokens.css by design: the editor starts with a neutral
- * palette and tokens.css continues to win until first edit.
+ * Overlays slice — overlay + hover stops, each stored as `{alias, opacity}`.
+ * Emits as `color-mix(in srgb, var(<alias>) <pct>%, transparent)` so the
+ * overlay tints automatically follow the aliased source token (a brand-color
+ * shift propagates without re-editing every overlay).
+ *
+ * Defaults diverge from tokens.css by design: the editor starts from a
+ * neutral alias and tokens.css continues to win until first edit (see
+ * `overlaysEqualsDefault`).
  */
 import type { EditorState, OverlayToken } from '../../store/editorTypes';
 
 export function makeDefaultOverlayTokens(): OverlayToken[] {
   return [
-    { variable: '--overlay-lowest', label: 'Lowest', r: 0, g: 0, b: 0, opacity: 0.05 },
-    { variable: '--overlay-lower',  label: 'Lower',  r: 0, g: 0, b: 0, opacity: 0.1  },
-    { variable: '--overlay-low',    label: 'Low',    r: 0, g: 0, b: 0, opacity: 0.2  },
-    { variable: '--overlay',        label: 'Base',   r: 0, g: 0, b: 0, opacity: 0.3  },
-    { variable: '--overlay-high',   label: 'High',   r: 0, g: 0, b: 0, opacity: 0.5  },
-    { variable: '--overlay-higher', label: 'Higher', r: 0, g: 0, b: 0, opacity: 0.7  },
-    { variable: '--overlay-highest',label: 'Highest',r: 0, g: 0, b: 0, opacity: 0.95 },
+    { variable: '--overlay-low',  label: 'Low',  alias: '--surface-neutral-lowest', opacity: 0.38 },
+    { variable: '--overlay',      label: 'Base', alias: '--surface-neutral-lowest', opacity: 0.51 },
+    { variable: '--overlay-high', label: 'High', alias: '--surface-neutral-lowest', opacity: 0.64 },
   ];
 }
 
 export function makeDefaultHoverTokens(): OverlayToken[] {
   return [
-    { variable: '--hover-low',  label: 'Low',  r: 255, g: 255, b: 255, opacity: 0.05 },
-    { variable: '--hover',      label: 'Base', r: 255, g: 255, b: 255, opacity: 0.1  },
-    { variable: '--hover-high', label: 'High', r: 255, g: 255, b: 255, opacity: 0.15 },
+    { variable: '--hover-low',  label: 'Low',  alias: '--text-primary', opacity: 0.05 },
+    { variable: '--hover',      label: 'Base', alias: '--text-primary', opacity: 0.1  },
+    { variable: '--hover-high', label: 'High', alias: '--text-primary', opacity: 0.15 },
   ];
 }
 
@@ -30,88 +30,52 @@ export function makeDefaultOverlaysState(): EditorState['overlays'] {
   return {
     tokens: makeDefaultOverlayTokens(),
     hoverTokens: makeDefaultHoverTokens(),
-    globals: {
-      overlay: { hue: 0, saturation: 0, lightness: 0, opacityMin: 0.05, opacityMax: 0.95 },
-      hover:   { hue: 0, saturation: 0, lightness: 100, opacityMin: 0.05, opacityMax: 0.15 },
-    },
   };
 }
 
 export const OVERLAY_VAR_NAMES = [
-  '--overlay-lowest', '--overlay-lower', '--overlay-low', '--overlay',
-  '--overlay-high', '--overlay-higher', '--overlay-highest',
+  '--overlay-low', '--overlay', '--overlay-high',
   '--hover-low', '--hover', '--hover-high',
 ] as const;
 
-// Accepts rgb(), rgba(), and #rrggbb[aa] — themes saved by the editor
-// always use rgba(), but loading hand-written files shouldn't break.
-export const RGBA_RE = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/i;
-export const HEX_RE = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i;
+export function overlayTokenToCss(t: OverlayToken): string {
+  const pct = Math.round(t.opacity * 100);
+  if (pct >= 100) return `var(${t.alias})`;
+  return `color-mix(in srgb, var(${t.alias}) ${pct}%, transparent)`;
+}
+
+const COLOR_MIX_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
+const PLAIN_VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
 
-export function parseRgba(raw: string): { r: number; g: number; b: number; opacity: number } | null {
+export function parseOverlayCss(raw: string): { alias: string; opacity: number } | null {
   const s = raw.trim();
-  const m = s.match(RGBA_RE);
-  if (m) {
-    const r = parseInt(m[1], 10);
-    const g = parseInt(m[2], 10);
-    const b = parseInt(m[3], 10);
-    const a = m[4] !== undefined ? parseFloat(m[4]) : 1;
-    if (![r, g, b].every((n) => Number.isFinite(n) && n >= 0 && n <= 255)) return null;
-    return { r, g, b, opacity: Number.isFinite(a) ? a : 1 };
-  }
-  const h = s.match(HEX_RE);
-  if (h) {
-    const hex = h[1];
-    const alpha = h[2] !== undefined ? parseInt(h[2], 16) / 255 : 1;
-    return {
-      r: parseInt(hex.slice(0, 2), 16),
-      g: parseInt(hex.slice(2, 4), 16),
-      b: parseInt(hex.slice(4, 6), 16),
-      opacity: Math.round(alpha * 100) / 100,
-    };
+  const mix = s.match(COLOR_MIX_RE);
+  if (mix) {
+    const pct = parseInt(mix[2], 10);
+    if (!Number.isFinite(pct)) return null;
+    return { alias: mix[1], opacity: Math.max(0, Math.min(100, pct)) / 100 };
   }
+  const plain = s.match(PLAIN_VAR_RE);
+  if (plain) return { alias: plain[1], opacity: 1 };
   return null;
 }
 
-export function overlayTokenToRgba(t: OverlayToken): string {
-  return `rgba(${t.r}, ${t.g}, ${t.b}, ${t.opacity})`;
-}
-
 export function overlaysToVars(o: EditorState['overlays']): Record<string, string> {
   const out: Record<string, string> = {};
-  for (const t of o.tokens) out[t.variable] = overlayTokenToRgba(t);
-  for (const t of o.hoverTokens) out[t.variable] = overlayTokenToRgba(t);
+  for (const t of o.tokens) out[t.variable] = overlayTokenToCss(t);
+  for (const t of o.hoverTokens) out[t.variable] = overlayTokenToCss(t);
   return out;
 }
 
-function tokensEqualDefault(tokens: OverlayToken[], defaults: OverlayToken[]): boolean {
-  if (tokens.length !== defaults.length) return false;
-  for (let i = 0; i < tokens.length; i++) {
-    const a = tokens[i]; const b = defaults[i];
-    if (a.variable !== b.variable || a.r !== b.r || a.g !== b.g || a.b !== b.b || a.opacity !== b.opacity) return false;
-  }
-  return true;
-}
-
-/**
- * Same pattern as columns: only emit overlay CSS vars once state diverges
- * from the editor defaults. tokens.css owns the rgba values until the
- * user touches any overlay control (or loads a theme that already
- * contains overrides).
- */
-export function overlaysEqualsDefault(o: EditorState['overlays']): boolean {
-  return tokensEqualDefault(o.tokens, makeDefaultOverlayTokens())
-    && tokensEqualDefault(o.hoverTokens, makeDefaultHoverTokens());
-}
-
 export function applyOverlayVarsToState(overlays: EditorState['overlays'], vars: Record<string, string>): void {
   const applyTo = (list: OverlayToken[]) => {
     for (const t of list) {
       const raw = vars[t.variable];
       if (!raw) continue;
-      const parsed = parseRgba(raw);
+      const parsed = parseOverlayCss(raw);
       if (!parsed) continue;
-      t.r = parsed.r; t.g = parsed.g; t.b = parsed.b; t.opacity = parsed.opacity;
+      t.alias = parsed.alias;
+      t.opacity = parsed.opacity;
     }
   };
   applyTo(overlays.tokens);
@@ -120,13 +84,18 @@ export function applyOverlayVarsToState(overlays: EditorState['overlays'], vars:
 
 /**
  * Loader: route overlay/hover entries from a freshly-loaded theme's vars
- * bag into `next.overlays` and remove them from the bag. Mutates `next`
- * and `rawVars` in place.
+ * bag into `next.overlays` and remove them from the bag — but only when the
+ * value parses as the new format (color-mix / plain var). Legacy rgba values
+ * pass through to the cssVars bag so the DOM still paints them; the user's
+ * next edit in the picker promotes them to the typed slice.
  */
 export function loadOverlaysFromVars(
   next: EditorState,
   rawVars: Record<string, string>,
 ): void {
   applyOverlayVarsToState(next.overlays, rawVars);
-  for (const name of OVERLAY_VAR_NAMES) delete rawVars[name];
+  for (const name of OVERLAY_VAR_NAMES) {
+    const raw = rawVars[name];
+    if (raw && parseOverlayCss(raw) !== null) delete rawVars[name];
+  }
 }

package/src/editor/ui/SurfacesTab.svelte

@@ -31,13 +31,9 @@
     {
       title: 'Overlays',
       swatches: [
-        { name: 'Lowest', variable: '--overlay-lowest', description: 'Barely visible tint' },
-        { name: 'Lower', variable: '--overlay-lower', description: 'Very subtle overlay' },
-        { name: 'Low', variable: '--overlay-low', description: 'Light overlay' },
-        { name: 'Overlay', variable: '--overlay', description: 'Standard overlay' },
-        { name: 'High', variable: '--overlay-high', description: 'Heavy overlay' },
-        { name: 'Higher', variable: '--overlay-higher', description: 'Modal backdrop' },
-        { name: 'Highest', variable: '--overlay-highest', description: 'Nearly opaque' }
+        { name: 'Low', variable: '--overlay-low', description: 'Light backdrop / pressed wash' },
+        { name: 'Overlay', variable: '--overlay', description: 'Standard backdrop' },
+        { name: 'High', variable: '--overlay-high', description: 'Strong backdrop' }
       ]
     },
     {

package/src/editor/ui/UIPaddingSelector.svelte

@@ -18,7 +18,7 @@
     unlinkComponentProperty,
     relinkComponentProperty,
   } from '../core/store/editorStore';
-  import UIRelinkConfirmPopover from './UIRelinkConfirmPopover.svelte';
+  import UIRelinkConfirmDialog from './UIRelinkConfirmDialog.svelte';
   import UILinkToggle from './UILinkToggle.svelte';
 
   interface Props {
@@ -383,7 +383,7 @@
       <div class="link-toggle-wrap">
         <UILinkToggle linked={isLinkedParent} ontoggle={toggleLinkPaddingGroup} />
         {#if relinkOpen && component}
-          <UIRelinkConfirmPopover
+          <UIRelinkConfirmDialog
             candidates={relinkCandidates}
             initialVariable={variable}
             prefixToStrip={`--${component}-`}