@motion-proto/live-tokens 0.49.1 → 0.52.1

package/dist-plugin/generateColorsAndType/index.cjs

@@ -37,7 +37,7 @@ __export(generateColorsAndType_exports, {
 });
 module.exports = __toCommonJS(generateColorsAndType_exports);
 
-// src/editor/core/palettes/oklch.ts
+// src/system/internal/oklch.ts
 function srgbToLinear(c) {
   return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
 }
@@ -131,6 +131,31 @@ function gamutClamp(l, c, h) {
   }
   return { l, c: lo, h };
 }
+function trim(value, decimals) {
+  return Number(value.toFixed(decimals)).toString();
+}
+function oklchToCss(l, c, h) {
+  const cs = trim(c, 4);
+  return `oklch(${trim(l, 4)} ${cs} ${cs === "0" ? "0" : trim(h, 2)})`;
+}
+function oklchToCssClamped(l, c, h) {
+  const g = gamutClamp(l, c, h);
+  return oklchToCss(g.l, g.c, g.h);
+}
+var OKLCH_RE = /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)(%?)\s+([\d.]+)(?:deg)?\s*\)$/i;
+var HEX6_RE = /^#[0-9a-f]{6}$/i;
+function parseOklchCss(value) {
+  const m = OKLCH_RE.exec(value.trim());
+  if (!m) return null;
+  const l = Number.parseFloat(m[1]) / (m[2] === "%" ? 100 : 1);
+  const c = Number.parseFloat(m[3]) * (m[4] === "%" ? 4e-3 : 1);
+  return { l, c, h: Number.parseFloat(m[5]) };
+}
+function cssColorToOklch(value) {
+  const raw = value.trim();
+  if (HEX6_RE.test(raw)) return hexToOklch(raw);
+  return parseOklchCss(raw);
+}
 
 // src/editor/ui/curveEngine.ts
 function makeAnchor(x, y, tangentLen = 15) {
@@ -155,6 +180,15 @@ function tangentAnchor(x, y, prev, next) {
   const outDx = next ? (next.x - x) * HANDLE_SPAN : 0;
   return { x, y, inDx, inDy: m * inDx, outDx, outDy: m * outDx };
 }
+function isCornerAnchor(a) {
+  return a.inDx === 0 && a.inDy === 0 && a.outDx === 0 && a.outDy === 0;
+}
+function resmoothAutoCurve(anchors) {
+  if (anchors.length < 2) return anchors;
+  return anchors.map(
+    (a, i) => isCornerAnchor(a) ? a : tangentAnchor(a.x, a.y, anchors[i - 1] ?? null, anchors[i + 1] ?? null)
+  );
+}
 function evalBezier(p0x, p0y, c0x, c0y, c1x, c1y, p1x, p1y, t) {
   const u = 1 - t, u2 = u * u, u3 = u2 * u;
   const t2 = t * t, t3 = t2 * t;
@@ -250,37 +284,39 @@ var SCALES = [
 ];
 var BW_GUARD_MIN_L = 0.17;
 var BW_GUARD_MAX_L = 0.93;
-var DEFAULT_PALETTE_LIGHTNESS = () => [makeAnchor(0, 95, 5), makeAnchor(100, 8, 5)];
-var DEFAULT_PALETTE_SATURATION = () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)];
+var autoCurve = (...anchors) => resmoothAutoCurve(anchors);
+var DEFAULT_PALETTE_LIGHTNESS = () => autoCurve(makeAnchor(0, 95), makeAnchor(100, 8));
+var DEFAULT_PALETTE_SATURATION = () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 100));
+var wrapHue = (h) => (h % 360 + 360) % 360;
 function scaleCurveDefaults(scheme = "dark") {
   if (scheme === "light") {
     return {
       Surfaces: {
-        lightness: () => [makeAnchor(0, 98, 5), makeAnchor(100, 82, 5)],
-        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+        lightness: () => autoCurve(makeAnchor(0, 98), makeAnchor(100, 82)),
+        saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 100))
       },
       Borders: {
-        lightness: () => [makeAnchor(0, 92, 5), makeAnchor(100, 45, 5)],
-        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+        lightness: () => autoCurve(makeAnchor(0, 92), makeAnchor(100, 45)),
+        saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 100))
       },
       Text: {
-        lightness: () => [makeAnchor(0, 30, 30), makeAnchor(100, 120, 30)],
-        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)]
+        lightness: () => autoCurve(makeAnchor(0, 30), makeAnchor(100, 120)),
+        saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 15))
       }
     };
   }
   return {
     Surfaces: {
-      lightness: () => [makeAnchor(0, 15, 5), makeAnchor(100, 47, 5)],
-      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+      lightness: () => autoCurve(makeAnchor(0, 15), makeAnchor(100, 47)),
+      saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 100))
     },
     Borders: {
-      lightness: () => [makeAnchor(0, 25, 5), makeAnchor(100, 80, 5)],
-      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+      lightness: () => autoCurve(makeAnchor(0, 25), makeAnchor(100, 80)),
+      saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 100))
     },
     Text: {
-      lightness: () => [makeAnchor(0, 120, 30), makeAnchor(100, 55, 30)],
-      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)]
+      lightness: () => autoCurve(makeAnchor(0, 120), makeAnchor(100, 55)),
+      saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 15))
     }
   };
 }
@@ -299,14 +335,16 @@ function scaleStepToX(step, scale) {
   return scale.steps.length > 1 ? idx / (scale.steps.length - 1) * 100 : 50;
 }
 function serializeDerivedValue(value) {
-  return value.kind === "raw" ? value.css : oklchToHexClamped(value.l, value.c, value.h);
+  return value.kind === "raw" ? value.css : oklchToCssClamped(value.l, value.c, value.h);
 }
-function computePaletteOklch(index, base, lightnessCurve, saturationCurve, curveOffset) {
-  const { c: baseC, h } = base;
+function computePaletteOklch(index, base, lightnessCurve, saturationCurve, curveOffset, hueCurve) {
+  const { c: baseC } = 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 hueDelta = (hueCurve ? sampleCurve(hueCurve, xPos) : 0) + (curveOffset.hue ?? 0);
+  const h = hueDelta === 0 ? base.h : wrapHue(base.h + hueDelta);
   return gamutClamp(targetL, targetC, h);
 }
 function nearestPaletteStep(lightnessCurve, baseL) {
@@ -402,10 +440,12 @@ function syncBaseAnchor(cfg) {
   const fresh = prev === void 0;
   let lCurve = cfg.lightnessCurve;
   let sCurve = cfg.saturationCurve;
+  let hCurve = cfg.hueCurve;
   if (prev) {
     const prevX = stepIndexToX(prev.step);
     lCurve = liftCurveAnchor(lCurve, prevX, prev.displacedL);
     sCurve = liftCurveAnchor(sCurve, prevX, prev.displacedS);
+    if (hCurve) hCurve = liftCurveAnchor(hCurve, prevX, prev.displacedH);
   }
   const step = nearestPaletteStep(lCurve, cfg.baseColor.l);
   const x = stepIndexToX(step);
@@ -413,12 +453,19 @@ function syncBaseAnchor(cfg) {
   const s = setCurveAnchor(sCurve, x, 100, fresh);
   cfg.lightnessCurve = l.curve;
   cfg.saturationCurve = s.curve;
+  const h = hCurve ? setCurveAnchor(hCurve, x, 0, fresh) : void 0;
+  if (h) cfg.hueCurve = h.curve;
   cfg.anchorPlacement = {
     step,
     displacedL: l.displacedY,
     displacedS: s.displacedY,
+    displacedH: h?.displacedY,
     priorLightnessEndpoints: prev?.priorLightnessEndpoints ?? l.priorEndpoints,
-    priorSaturationEndpoints: prev?.priorSaturationEndpoints ?? s.priorEndpoints
+    priorSaturationEndpoints: prev?.priorSaturationEndpoints ?? s.priorEndpoints,
+    // No else-branch reading `prev?.priorHueEndpoints`: that could only fire
+    // if a placed hue curve later went absent, which RJC 7 (reset never
+    // deletes) never lets happen.
+    priorHueEndpoints: h ? prev?.priorHueEndpoints ?? h.priorEndpoints : void 0
   };
 }
 function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
@@ -427,8 +474,10 @@ function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
   const defs = defaultScaleCurves[scaleTitle];
   const lCurve = scaleCurves[scaleTitle]?.lightness ?? defs.lightness();
   const sCurve = scaleCurves[scaleTitle]?.saturation ?? defs.saturation();
+  const hCurve = scaleCurves[scaleTitle]?.hue;
   const lOff = curveOffset[`${scaleTitle}-lightness`] ?? 0;
   const sOff = curveOffset[`${scaleTitle}-saturation`] ?? 0;
+  const hOff = curveOffset[`${scaleTitle}-hue`] ?? 0;
   const { l: baseL, c: baseC, h: baseH } = base;
   let targetL;
   if (scale.isText) {
@@ -439,7 +488,9 @@ function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
   }
   const satMul = Math.max(0, Math.min(2, (sampleCurve(sCurve, xPos) + sOff) / 100));
   const targetC = baseC * satMul;
-  return gamutClamp(targetL, targetC, baseH);
+  const hueDelta = (hCurve ? sampleCurve(hCurve, xPos) : 0) + hOff;
+  const targetH = hueDelta === 0 ? baseH : wrapHue(baseH + hueDelta);
+  return gamutClamp(targetL, targetC, targetH);
 }
 function scaleToCssVar(scaleTitle, stepName, cssNamespace) {
   if (cssNamespace === null) return null;
@@ -468,7 +519,7 @@ function derivePaletteValues(spec, config) {
   const saturationCurve = config.saturationCurve ?? DEFAULT_PALETTE_SATURATION();
   PALETTE_STEPS.forEach((ps, index) => {
     const k = paletteStepKey(ps.label);
-    const value = k in overrides ? { kind: "color", ...overrides[k] } : { kind: "color", ...computePaletteOklch(index, baseColor, lightnessCurve, saturationCurve, curveOffset) };
+    const value = k in overrides ? { kind: "color", ...overrides[k] } : { kind: "color", ...computePaletteOklch(index, baseColor, lightnessCurve, saturationCurve, curveOffset, config.hueCurve) };
     out[`--color-${spec.cssNamespace}-${ps.label}`] = value;
   });
   for (const scale of SCALES) {
@@ -503,8 +554,8 @@ function derivePaletteValues(spec, config) {
       );
       const stopsCss = sortedStops.map((s) => {
         const stopValue = out[`--color-${spec.cssNamespace}-${s.paletteLabel}`];
-        const hex = stopValue ? serializeDerivedValue(stopValue) : "#000000";
-        return `${hex} ${s.position}%`;
+        const css = stopValue ? serializeDerivedValue(stopValue) : "oklch(0 0 0)";
+        return `${css} ${s.position}%`;
       }).join(", ");
       let gradient;
       switch (gradientStyle) {
@@ -705,7 +756,7 @@ function findLForContrast(opts) {
 }
 
 // src/editor/ui/palette/paletteMath.ts
-var DEFAULT_NEUTRAL_LIGHTNESS = () => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
+var DEFAULT_NEUTRAL_LIGHTNESS = () => resmoothAutoCurve([makeAnchor(0, 92), makeAnchor(100, 3)]);
 function defaultPaletteConfig(opts) {
   const cfg = {
     baseColor: opts.baseColor,
@@ -1034,7 +1085,10 @@ var VARIANTS2 = ["lg", "md", "sm"];
 var SUFFIX_RENAMES = [
   [/-title-border-width$/, "-title-outline-width"],
   [/-title-stroke-color$/, "-title-outline-color"],
-  [/-padding$/, "-spacing"]
+  [
+    /^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-padding$/,
+    "--sectiondivider-$1-spacing"
+  ]
 ];
 function renameKeySuffix(key) {
   for (const [re, repl] of SUFFIX_RENAMES) {
@@ -1085,7 +1139,10 @@ var componentMigration_2026_05_21_sectiondividerSpacingToPadding = {
     if (meta.component !== "sectiondivider") return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
-      const renamed = key.replace(/-spacing$/, "-padding");
+      const renamed = key.replace(
+        /^--sectiondivider-(lg|md|sm)-spacing$/,
+        "--sectiondivider-$1-padding"
+      );
       out[renamed] = value;
     }
     return out;
@@ -1241,6 +1298,7 @@ var componentMigration_2026_05_24_collapsiblesectionDropActiveState = {
 // src/editor/core/themes/migrations/2026-05-25-cornerbadge-flatten-variants.ts
 var VARIANTS3 = ["primary", "accent", "neutral", "alternate", "canvas", "special", "success", "warning", "danger", "info"];
 var RE = new RegExp(`^--corner-badge-(${VARIANTS3.join("|")})-(.+)$`);
+var CURRENT_COLOR_PROPS = /* @__PURE__ */ new Set(["surface", "border", "text"]);
 function flattenVariants(rawVars, meta) {
   if (meta.component !== "cornerbadge") return rawVars;
   const out = {};
@@ -1249,6 +1307,10 @@ function flattenVariants(rawVars, meta) {
     const m = key.match(RE);
     if (m) {
       const prop = m[2];
+      if (CURRENT_COLOR_PROPS.has(prop)) {
+        out[key] = value;
+        continue;
+      }
       if (!collected.has(prop)) collected.set(prop, value);
       continue;
     }
@@ -1566,12 +1628,16 @@ function surfaceVars() {
     "--page-bg"
   ];
 }
+function varToHex(value) {
+  const parsed = value ? cssColorToOklch(value) : null;
+  return parsed ? oklchToHexClamped(parsed.l, parsed.c, parsed.h) : null;
+}
 function worstSurface(textHex, vars) {
   let against = "";
   let ratio = Infinity;
   for (const surfVar of surfaceVars()) {
-    const surfHex = vars[surfVar];
-    if (!surfHex || !HEX_RE.test(surfHex)) continue;
+    const surfHex = varToHex(vars[surfVar]);
+    if (!surfHex) continue;
     const r = contrastRatio(textHex, surfHex);
     if (r < ratio) {
       ratio = r;
@@ -1599,17 +1665,18 @@ function runContrastGate(configs, scheme) {
     const vars = palettesToVars(configs);
     let anyFixed = false;
     for (const def of defs) {
-      const textHex = vars[def.textVar];
-      if (!textHex) continue;
+      const text = cssColorToOklch(vars[def.textVar] ?? "");
+      if (!text) continue;
+      const textHex = oklchToHexClamped(text.l, text.c, text.h);
       const worst = worstSurface(textHex, vars);
       if (worst.ratio >= def.floor) continue;
       const cfg = configs[def.paletteLabel];
       const seed = cfg.baseColor;
       const solved = findLForContrast({
-        against: vars[worst.against],
+        against: varToHex(vars[worst.against]) ?? "#000000",
         ratio: def.target,
         direction,
-        c: hexToOklch(textHex).c,
+        c: text.c,
         h: seed.h,
         lMax: Math.min(1, 2 * seed.l)
       });
@@ -1621,7 +1688,7 @@ function runContrastGate(configs, scheme) {
   }
   const finalVars = palettesToVars(configs);
   const checks = defs.map((def) => {
-    const worst = worstSurface(finalVars[def.textVar] ?? "#000000", finalVars);
+    const worst = worstSurface(varToHex(finalVars[def.textVar]) ?? "#000000", finalVars);
     return {
       textVar: def.textVar,
       floor: def.floor,

package/dist-plugin/generateColorsAndType/index.d.cts

@@ -1,4 +1,4 @@
-import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-DSwKq-bj.cjs';
+import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-Dky03HL9.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.cjs';
 
 /**

package/dist-plugin/generateColorsAndType/index.d.ts

@@ -1,4 +1,4 @@
-import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-DSwKq-bj.js';
+import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-Dky03HL9.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.js';
 
 /**

package/dist-plugin/generateColorsAndType/index.js

@@ -4,18 +4,23 @@ import {
   PALETTE_SPECS,
   PALETTE_STEPS,
   SCALES,
-  gamutClamp,
-  hexToOklch,
   makeAnchor,
-  oklchToHex,
   palettesToVars,
+  resmoothAutoCurve,
   sanitizeFileName,
   scaleCurveDefaults,
   scaleStepToX,
   scaleToCssVar,
   setCurveAnchor,
   syncBaseAnchor
-} from "../chunk-76TFDTJO.js";
+} from "../chunk-JIGIIE5P.js";
+import {
+  cssColorToOklch,
+  gamutClamp,
+  hexToOklch,
+  oklchToHex,
+  oklchToHexClamped
+} from "../chunk-YR6GPXW2.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
@@ -188,7 +193,7 @@ function findLForContrast(opts) {
 }
 
 // src/editor/ui/palette/paletteMath.ts
-var DEFAULT_NEUTRAL_LIGHTNESS = () => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
+var DEFAULT_NEUTRAL_LIGHTNESS = () => resmoothAutoCurve([makeAnchor(0, 92), makeAnchor(100, 3)]);
 function defaultPaletteConfig(opts) {
   const cfg = {
     baseColor: opts.baseColor,
@@ -512,7 +517,10 @@ var VARIANTS2 = ["lg", "md", "sm"];
 var SUFFIX_RENAMES = [
   [/-title-border-width$/, "-title-outline-width"],
   [/-title-stroke-color$/, "-title-outline-color"],
-  [/-padding$/, "-spacing"]
+  [
+    /^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-padding$/,
+    "--sectiondivider-$1-spacing"
+  ]
 ];
 function renameKeySuffix(key) {
   for (const [re, repl] of SUFFIX_RENAMES) {
@@ -563,7 +571,10 @@ var componentMigration_2026_05_21_sectiondividerSpacingToPadding = {
     if (meta.component !== "sectiondivider") return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
-      const renamed = key.replace(/-spacing$/, "-padding");
+      const renamed = key.replace(
+        /^--sectiondivider-(lg|md|sm)-spacing$/,
+        "--sectiondivider-$1-padding"
+      );
       out[renamed] = value;
     }
     return out;
@@ -719,6 +730,7 @@ var componentMigration_2026_05_24_collapsiblesectionDropActiveState = {
 // src/editor/core/themes/migrations/2026-05-25-cornerbadge-flatten-variants.ts
 var VARIANTS3 = ["primary", "accent", "neutral", "alternate", "canvas", "special", "success", "warning", "danger", "info"];
 var RE = new RegExp(`^--corner-badge-(${VARIANTS3.join("|")})-(.+)$`);
+var CURRENT_COLOR_PROPS = /* @__PURE__ */ new Set(["surface", "border", "text"]);
 function flattenVariants(rawVars, meta) {
   if (meta.component !== "cornerbadge") return rawVars;
   const out = {};
@@ -727,6 +739,10 @@ function flattenVariants(rawVars, meta) {
     const m = key.match(RE);
     if (m) {
       const prop = m[2];
+      if (CURRENT_COLOR_PROPS.has(prop)) {
+        out[key] = value;
+        continue;
+      }
       if (!collected.has(prop)) collected.set(prop, value);
       continue;
     }
@@ -1044,12 +1060,16 @@ function surfaceVars() {
     "--page-bg"
   ];
 }
+function varToHex(value) {
+  const parsed = value ? cssColorToOklch(value) : null;
+  return parsed ? oklchToHexClamped(parsed.l, parsed.c, parsed.h) : null;
+}
 function worstSurface(textHex, vars) {
   let against = "";
   let ratio = Infinity;
   for (const surfVar of surfaceVars()) {
-    const surfHex = vars[surfVar];
-    if (!surfHex || !HEX_RE.test(surfHex)) continue;
+    const surfHex = varToHex(vars[surfVar]);
+    if (!surfHex) continue;
     const r = contrastRatio(textHex, surfHex);
     if (r < ratio) {
       ratio = r;
@@ -1077,17 +1097,18 @@ function runContrastGate(configs, scheme) {
     const vars = palettesToVars(configs);
     let anyFixed = false;
     for (const def of defs) {
-      const textHex = vars[def.textVar];
-      if (!textHex) continue;
+      const text = cssColorToOklch(vars[def.textVar] ?? "");
+      if (!text) continue;
+      const textHex = oklchToHexClamped(text.l, text.c, text.h);
       const worst = worstSurface(textHex, vars);
       if (worst.ratio >= def.floor) continue;
       const cfg = configs[def.paletteLabel];
       const seed = cfg.baseColor;
       const solved = findLForContrast({
-        against: vars[worst.against],
+        against: varToHex(vars[worst.against]) ?? "#000000",
         ratio: def.target,
         direction,
-        c: hexToOklch(textHex).c,
+        c: text.c,
         h: seed.h,
         lMax: Math.min(1, 2 * seed.l)
       });
@@ -1099,7 +1120,7 @@ function runContrastGate(configs, scheme) {
   }
   const finalVars = palettesToVars(configs);
   const checks = defs.map((def) => {
-    const worst = worstSurface(finalVars[def.textVar] ?? "#000000", finalVars);
+    const worst = worstSurface(varToHex(finalVars[def.textVar]) ?? "#000000", finalVars);
     return {
       textVar: def.textVar,
       floor: def.floor,