@motion-proto/live-tokens 0.92.0 → 0.93.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 0.93.0 — Swatch swap and copy-paste
+
+### Added
+
+- **The Colors view swaps two main colors by drag and drop.** Drop one swatch
+  of the main row on another and the two families trade seed colors in one
+  undo step. A harmony axis follows the color it held, so every axis keeps
+  its hue and an applied harmony stays true.
+- **Every swatch copies and pastes its color.** ⌘C (Ctrl+C) copies the
+  selected swatch's seed as `oklch()` text, and ⌘V (Ctrl+V) sets the selected
+  swatch's seed from a hex or `oklch()` color on the clipboard.
+
+### Fixed
+
+- **The type-scales migration derives an aliased size's tablet and phone
+  sizes from the alias.** A step size that aliases a primitive, such as
+  `--body-sm-font-size: var(--font-size-md)`, kept the scale's tablet and
+  phone sizes, so a 16px body sm fell to 14.6px on tablets. The migration now
+  resolves the alias through the file's top-level declarations and applies
+  the editor's rule for an edited size, so body sm holds 16px. A size it
+  cannot resolve, such as a `calc()`, keeps the scale's sizes.
+- **The type-scales migration carries a step the project declared by hand.**
+  A step 0.91.2 did not ship, such as a project's own
+  `--heading-2xl-font-size: 1.75rem`, kept that value in its `-font-size`
+  while the 768px and 480px blocks re-pointed it at the scale's tablet and
+  phone sizes. The migration now moves the value into the step's desktop size,
+  points `-font-size` at it, and derives the tablet and phone sizes by the
+  editor's rule.
+- A `tokens.css` that already ran the 0.92.0 migration never runs it again, so
+  these fixes reach projects that upgrade from 0.91 after this release.
+
 ## 0.92.0 — Type scales for text styles
 
 ### Changed (breaking)

package/dist-plugin/{chunk-JOSSYGR2.js → chunk-7XSUHJUH.js}

@@ -825,6 +825,18 @@ function literalRem(size) {
   if (!m) return null;
   return m[2] === "rem" ? Number(m[1]) : Number(m[1]) / 16;
 }
+var ALIAS = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i;
+function resolvedRem(size, values) {
+  const seen = /* @__PURE__ */ new Set();
+  let value = size.trim();
+  for (let ref = ALIAS.exec(value); ref; ref = ALIAS.exec(value)) {
+    const next = values.get(ref[1]);
+    if (next === void 0 || seen.has(ref[1])) return null;
+    seen.add(ref[1]);
+    value = next.trim();
+  }
+  return literalRem(value);
+}
 function editedSizes(prefix, rem) {
   const count = String(Number(rem.toFixed(4)));
   return COMPRESSED_VIEWPORTS.map((viewport) => ({
@@ -1453,6 +1465,12 @@ var DECLARED = new Map(
   USAGES.flatMap((u) => u.steps.flatMap((s) => s.entries)).concat(EYEBROW).map((e) => [e.name, e.value])
 );
 var TYPE_PRIMITIVES = ["--letter-spacing-", "--line-height-", "--font-weight-", "--font-size-", "--font-"];
+var CARRIED_PREFIXES = new Set(CARRIED.map((step) => step.prefix));
+function handDeclaredSteps(values) {
+  return USAGES.flatMap((u) => u.steps).filter(
+    ({ prefix }) => !CARRIED_PREFIXES.has(prefix) && values.has(`${prefix}-font-size`) && !values.has(`${prefix}-desktop-font-size`)
+  ).map(({ prefix }) => ({ prefix, links: [] }));
+}
 var tokensCssMigration_2026_10_08_typeScales = {
   id: "2026-10-08-type-scales",
   kind: "breaking",
@@ -1461,12 +1479,12 @@ var tokensCssMigration_2026_10_08_typeScales = {
     let out = css;
     for (const [from, to] of RENAMES3) out = renameToken(out, from, to);
     const values = collectTokenValues(out);
-    for (const step of CARRIED) {
+    for (const step of [...CARRIED, ...handDeclaredSteps(values)]) {
       const size = values.get(`${step.prefix}-font-size`);
       if (size === void 0) continue;
       const desktop = `${step.prefix}-desktop-font-size`;
       const edited = size !== step.size;
-      const rem = edited ? literalRem(size) : null;
+      const rem = edited ? resolvedRem(size, values) : null;
       out = ensureScale(out, {
         anchorPrefixes: [`${step.prefix}-font-family`, `${step.prefix}-`],
         entries: [

package/dist-plugin/index.cjs

@@ -4259,6 +4259,18 @@ function literalRem(size) {
   if (!m) return null;
   return m[2] === "rem" ? Number(m[1]) : Number(m[1]) / 16;
 }
+var ALIAS = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i;
+function resolvedRem(size, values) {
+  const seen = /* @__PURE__ */ new Set();
+  let value = size.trim();
+  for (let ref2 = ALIAS.exec(value); ref2; ref2 = ALIAS.exec(value)) {
+    const next = values.get(ref2[1]);
+    if (next === void 0 || seen.has(ref2[1])) return null;
+    seen.add(ref2[1]);
+    value = next.trim();
+  }
+  return literalRem(value);
+}
 function editedSizes(prefix, rem) {
   const count = String(Number(rem.toFixed(4)));
   return COMPRESSED_VIEWPORTS.map((viewport) => ({
@@ -4887,6 +4899,12 @@ var DECLARED = new Map(
   USAGES.flatMap((u) => u.steps.flatMap((s) => s.entries)).concat(EYEBROW).map((e) => [e.name, e.value])
 );
 var TYPE_PRIMITIVES = ["--letter-spacing-", "--line-height-", "--font-weight-", "--font-size-", "--font-"];
+var CARRIED_PREFIXES = new Set(CARRIED.map((step) => step.prefix));
+function handDeclaredSteps(values) {
+  return USAGES.flatMap((u) => u.steps).filter(
+    ({ prefix }) => !CARRIED_PREFIXES.has(prefix) && values.has(`${prefix}-font-size`) && !values.has(`${prefix}-desktop-font-size`)
+  ).map(({ prefix }) => ({ prefix, links: [] }));
+}
 var tokensCssMigration_2026_10_08_typeScales = {
   id: "2026-10-08-type-scales",
   kind: "breaking",
@@ -4895,12 +4913,12 @@ var tokensCssMigration_2026_10_08_typeScales = {
     let out = css;
     for (const [from, to] of RENAMES14) out = renameToken2(out, from, to);
     const values = collectTokenValues(out);
-    for (const step of CARRIED) {
+    for (const step of [...CARRIED, ...handDeclaredSteps(values)]) {
       const size = values.get(`${step.prefix}-font-size`);
       if (size === void 0) continue;
       const desktop = `${step.prefix}-desktop-font-size`;
       const edited = size !== step.size;
-      const rem = edited ? literalRem(size) : null;
+      const rem = edited ? resolvedRem(size, values) : null;
       out = ensureScale(out, {
         anchorPrefixes: [`${step.prefix}-font-family`, `${step.prefix}-`],
         entries: [

package/dist-plugin/index.js

@@ -23,7 +23,7 @@ import {
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-JOSSYGR2.js";
+} from "./chunk-7XSUHJUH.js";
 import {
   hexToOklch,
   oklchToRgb255,

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -914,6 +914,18 @@ function literalRem(size) {
   if (!m) return null;
   return m[2] === "rem" ? Number(m[1]) : Number(m[1]) / 16;
 }
+var ALIAS = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i;
+function resolvedRem(size, values) {
+  const seen = /* @__PURE__ */ new Set();
+  let value = size.trim();
+  for (let ref = ALIAS.exec(value); ref; ref = ALIAS.exec(value)) {
+    const next = values.get(ref[1]);
+    if (next === void 0 || seen.has(ref[1])) return null;
+    seen.add(ref[1]);
+    value = next.trim();
+  }
+  return literalRem(value);
+}
 function editedSizes(prefix, rem) {
   const count = String(Number(rem.toFixed(4)));
   return COMPRESSED_VIEWPORTS.map((viewport) => ({
@@ -1542,6 +1554,12 @@ var DECLARED = new Map(
   USAGES.flatMap((u) => u.steps.flatMap((s) => s.entries)).concat(EYEBROW).map((e) => [e.name, e.value])
 );
 var TYPE_PRIMITIVES = ["--letter-spacing-", "--line-height-", "--font-weight-", "--font-size-", "--font-"];
+var CARRIED_PREFIXES = new Set(CARRIED.map((step) => step.prefix));
+function handDeclaredSteps(values) {
+  return USAGES.flatMap((u) => u.steps).filter(
+    ({ prefix }) => !CARRIED_PREFIXES.has(prefix) && values.has(`${prefix}-font-size`) && !values.has(`${prefix}-desktop-font-size`)
+  ).map(({ prefix }) => ({ prefix, links: [] }));
+}
 var tokensCssMigration_2026_10_08_typeScales = {
   id: "2026-10-08-type-scales",
   kind: "breaking",
@@ -1550,12 +1568,12 @@ var tokensCssMigration_2026_10_08_typeScales = {
     let out = css;
     for (const [from, to] of RENAMES3) out = renameToken(out, from, to);
     const values = collectTokenValues(out);
-    for (const step of CARRIED) {
+    for (const step of [...CARRIED, ...handDeclaredSteps(values)]) {
       const size = values.get(`${step.prefix}-font-size`);
       if (size === void 0) continue;
       const desktop = `${step.prefix}-desktop-font-size`;
       const edited = size !== step.size;
-      const rem = edited ? literalRem(size) : null;
+      const rem = edited ? resolvedRem(size, values) : null;
       out = ensureScale(out, {
         anchorPrefixes: [`${step.prefix}-font-family`, `${step.prefix}-`],
         entries: [

package/dist-plugin/tokensCssMigrations/index.js

@@ -15,7 +15,7 @@ import {
   semverBumpType,
   setTokenValue,
   validateTokensCss
-} from "../chunk-JOSSYGR2.js";
+} from "../chunk-7XSUHJUH.js";
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig

package/package.json

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

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

@@ -41,7 +41,7 @@ const TEXT_INPUT_TYPES = new Set([
   'date', 'datetime-local', 'month', 'time', 'week',
 ]);
 
-function isEditable(el: HTMLElement): boolean {
+export function isEditable(el: HTMLElement): boolean {
   const tag = el.tagName;
   if (tag === 'TEXTAREA') return true;
   if (tag === 'INPUT') {

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

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { cubicOut } from 'svelte/easing';
-  import { oklchToHexClamped } from '../../core/palettes/oklch';
+  import { cssColorToOklch, oklchToCss, oklchToHexClamped } from '../../core/palettes/oklch';
   import { PALETTE_SPECS } from '../../core/palettes/paletteDerivation';
   import { editorState, beginSliderGesture } from '../../core/store/editorStore';
+  import { isEditable } from '../../core/store/editorKeybindings';
   import { selectedPalette } from '../../core/store/paletteFocus';
   import { applyHarmonyToAxes, axisStatuses, HARMONY_ELIGIBLE, type HarmonyMode } from '../../core/palettes/colorHarmony';
   import AxisNumeral from './AxisNumeral.svelte';
@@ -13,10 +14,12 @@
   import PaletteStepStrip from './PaletteStepStrip.svelte';
   import HarmonyAxesList from './HarmonyAxesList.svelte';
   import PaletteJumpButton from '../palette/PaletteJumpButton.svelte';
+  import { showCopyPopover } from '../copyPopover';
   import {
     setBaseColor,
     setAxisHues,
     unbindFamily,
+    swapBaseColors,
     palettesWithDefaults,
   } from './paletteBaseColor';
   import { HARMONY_MODE_BUTTONS } from './harmonyModeIcons';
@@ -108,23 +111,99 @@
     if (family) unbindFamily(family);
   }
 
+  // A swatch dropped on another swatch swaps their colors; a chip dropped there
+  // still unassigns. The swap source is held here because dataTransfer data is
+  // unreadable during dragover, and both ends of a swap live in this row.
+  let swapSource = $state<string | null>(null);
+  let swapTarget = $state<string | null>(null);
+
+  function onSwatchDragStart(e: DragEvent, family: string) {
+    startFamilyDrag(e, family);
+    swapSource = family;
+  }
+
+  function onSwatchDragEnd() {
+    swapSource = null;
+    swapTarget = null;
+  }
+
+  function acceptsSwap(sw: Swatch): boolean {
+    return sw.eligible && swapSource !== null && swapSource !== sw.label;
+  }
+
+  function onSwatchDragOver(e: DragEvent, sw: Swatch) {
+    if (!acceptsSwap(sw)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    swapTarget = sw.label;
+    unassignHover = false;
+  }
+
+  function onSwatchDragLeave(sw: Swatch) {
+    if (swapTarget === sw.label) swapTarget = null;
+  }
+
+  function onSwatchDrop(e: DragEvent, sw: Swatch) {
+    if (!acceptsSwap(sw)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    swapBaseColors(swapSource!, sw.label);
+    onSwatchDragEnd();
+  }
+
+  const swatchEls: Record<string, HTMLButtonElement> = {};
+
+  // Copy and paste act on the selected swatch, never the focused one: Safari
+  // and macOS Firefox do not focus a button on click.
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey) return;
+    if (e.target instanceof HTMLElement && isEditable(e.target)) return;
+    const sw = swatches.find((s) => s.label === selected);
+    if (!sw) return;
+    const key = e.key.toLowerCase();
+    if (key === 'c') {
+      // Selected page text keeps the browser's own copy.
+      if (window.getSelection()?.isCollapsed === false) return;
+      e.preventDefault();
+      const css = oklchToCss(sw.color.l, sw.color.c, sw.color.h);
+      navigator.clipboard?.writeText(css);
+      showCopyPopover(css, swatchEls[sw.label]);
+    } else if (key === 'v') {
+      e.preventDefault();
+      pasteInto(sw, swatchEls[sw.label]);
+    }
+  }
+
+  async function pasteInto(sw: Swatch, anchor: EventTarget | null) {
+    const color = cssColorToOklch(await navigator.clipboard.readText());
+    if (!color) return;
+    // A bound color drags its axis along, so an applied harmony no longer holds.
+    if (sw.axis && color.h !== sw.color.h) activeMode = 'custom';
+    setBaseColor(sw.label, color);
+    showCopyPopover(oklchToCss(color.l, color.c, color.h), anchor);
+  }
+
   let fullPalettes = $derived(palettesWithDefaults($editorState.palettes));
 
   let swatches = $derived.by(() => {
     const statuses = axisStatuses(activeMode, $editorState.harmonyAxes);
     return PALETTE_SPECS.map((spec) => {
-      const { l, c, h } = $editorState.palettes[spec.label]?.baseColor ?? spec.initialColor;
+      const color = $editorState.palettes[spec.label]?.baseColor ?? spec.initialColor;
       const index = $editorState.harmonyAxes.findIndex((a) => a.family === spec.label);
       return {
         label: spec.label,
         display: spec.displayLabel ?? spec.label,
-        hex: oklchToHexClamped(l, c, h),
+        color,
+        hex: oklchToHexClamped(color.l, color.c, color.h),
         axis: index === -1 ? null : { index, status: statuses[index] },
         eligible: ELIGIBLE.has(spec.label),
       };
     });
   });
 
+  type Swatch = (typeof swatches)[number];
+
   const FUNCTIONAL_FAMILIES = new Set(['Info', 'Success', 'Warning', 'Danger']);
   // Declaration order, never a computed one: sorting by luminance made the row
   // reshuffle under the pointer while a lightness edit was in flight.
@@ -150,6 +229,8 @@
   }
 </script>
 
+<svelte:window onkeydown={onWindowKeydown} />
+
 <div class="colors-tab">
   <div class="pane">
     <section id="colors-wheel" class="block">
@@ -227,7 +308,7 @@
       <div class="harmony-cols">
         <div class="group">
           <h3 class="title">Selected color</h3>
-          {#snippet swatchRow(row: typeof swatches, acceptsDrop = false)}
+          {#snippet swatchRow(row: Swatch[], acceptsDrop = false)}
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
               class="swatch-row"
@@ -242,12 +323,18 @@
                   class="swatch"
                   class:active={selected === sw.label}
                   class:draggable={sw.eligible}
+                  class:swap-target={swapTarget === sw.label}
                   style="--swatch-fill: {sw.hex}"
                   draggable={sw.eligible}
                   title={sw.eligible ? `${sw.display} · drag onto an axis to assign it` : sw.display}
                   aria-label={`Select ${sw.display}`}
                   aria-pressed={selected === sw.label}
-                  ondragstart={(e) => startFamilyDrag(e, sw.label)}
+                  bind:this={swatchEls[sw.label]}
+                  ondragstart={(e) => onSwatchDragStart(e, sw.label)}
+                  ondragend={onSwatchDragEnd}
+                  ondragover={(e) => onSwatchDragOver(e, sw)}
+                  ondragleave={() => onSwatchDragLeave(sw)}
+                  ondrop={(e) => onSwatchDrop(e, sw)}
                   onclick={() => select(sw.label)}
                 >
                   <span class="frame">
@@ -685,6 +772,13 @@
     border-color: var(--ui-border-high);
   }
 
+  /* The axis row's drop ring, doubled so it never reads as selection. */
+  .swatch.swap-target .frame {
+    border-color: var(--ui-text-primary);
+    outline: 1px solid var(--ui-text-primary);
+    outline-offset: 1px;
+  }
+
   .swatch-label {
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-secondary);

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

@@ -208,6 +208,23 @@ function giveAxisHue(s: EditorState, index: number, family: string): boolean {
   return false;
 }
 
+/** Two families trade seed colors. Each axis binding travels with the color it
+ *  held, so every axis keeps its hue and an applied harmony stays true. */
+export function swapBaseColors(a: string, b: string): void {
+  if (a === b) return;
+  mutate(`colors: swap ${a} and ${b}`, (s) => {
+    const ca = ensureConfig(s, a);
+    const cb = ensureConfig(s, b);
+    [ca.baseColor, cb.baseColor] = [cb.baseColor, ca.baseColor];
+    syncBaseAnchor(ca);
+    syncBaseAnchor(cb);
+    for (const axis of s.harmonyAxes) {
+      if (axis.family === a) axis.family = b;
+      else if (axis.family === b) axis.family = a;
+    }
+  });
+}
+
 /** Set several seed colors in ONE undo entry (harmony apply, global rotate). */
 export function setBaseColors(patch: Record<string, Oklch>, historyLabel = 'colors: harmony'): void {
   transaction(historyLabel, (s) => {