@motion-proto/live-tokens 0.50.0 → 0.53.0

package/dist-plugin/{chunk-76TFDTJO.js → chunk-PB2JTK2H.js}

@@ -1,101 +1,132 @@
+import {
+  cssColorToOklch,
+  gamutClamp,
+  oklchToCssClamped
+} from "./chunk-YR6GPXW2.js";
+
 // src/editor/core/storage/files/versionedFileResourceClient.ts
 function sanitizeFileName(name) {
   return name.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9\-_]/g, "").replace(/-+/g, "-").replace(/^[-_]+|-+$/g, "") || "unnamed";
 }
 
-// src/editor/core/palettes/oklch.ts
-function srgbToLinear(c) {
-  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-}
-function linearToSrgb(c) {
-  return c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
-}
-function hexToLinearRgb(hex) {
-  const r = parseInt(hex.slice(1, 3), 16) / 255;
-  const g = parseInt(hex.slice(3, 5), 16) / 255;
-  const b = parseInt(hex.slice(5, 7), 16) / 255;
-  return [srgbToLinear(r), srgbToLinear(g), srgbToLinear(b)];
-}
-function linearRgbToHex(r, g, b) {
-  const toHex = (c) => {
-    const v = Math.round(Math.max(0, Math.min(1, linearToSrgb(c))) * 255);
-    return v.toString(16).padStart(2, "0");
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function linearRgbToOklab(r, g, b) {
-  const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
-  const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
-  const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
-  const l = Math.cbrt(l_);
-  const m = Math.cbrt(m_);
-  const s = Math.cbrt(s_);
-  return [
-    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
-    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
-    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
-  ];
-}
-function oklabToLinearRgb(L, a, b) {
-  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
-  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
-  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
-  const l = l_ * l_ * l_;
-  const m = m_ * m_ * m_;
-  const s = s_ * s_ * s_;
-  return [
-    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
-    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
-    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
-  ];
-}
-function oklabToOklch(L, a, b) {
-  const c = Math.sqrt(a * a + b * b);
-  let h = Math.atan2(b, a) * 180 / Math.PI;
-  if (h < 0) h += 360;
-  return { l: L, c, h };
-}
-function oklchToOklab(l, c, h) {
-  const hRad = h * Math.PI / 180;
-  return [l, c * Math.cos(hRad), c * Math.sin(hRad)];
-}
-function hexToOklch(hex) {
-  const [r, g, b] = hexToLinearRgb(hex);
-  const [L, a, bVal] = linearRgbToOklab(r, g, b);
-  return oklabToOklch(L, a, bVal);
-}
-function oklchToHex(l, c, h) {
-  const [L, a, b] = oklchToOklab(l, c, h);
-  const [r, g, bVal] = oklabToLinearRgb(L, a, b);
-  return linearRgbToHex(r, g, bVal);
-}
-function isInGamut(r, g, b) {
-  const eps = 1e-4;
-  return r >= -eps && r <= 1 + eps && g >= -eps && g <= 1 + eps && b >= -eps && b <= 1 + eps;
-}
-function oklchToHexClamped(l, c, h) {
-  const g = gamutClamp(l, c, h);
-  return oklchToHex(g.l, g.c, g.h);
-}
-function gamutClamp(l, c, h) {
-  if (l <= 0) return { l: 0, c: 0, h };
-  if (l >= 1) return { l: 1, c: 0, h };
-  const [L, a, b] = oklchToOklab(l, c, h);
-  const [r, g, bVal] = oklabToLinearRgb(L, a, b);
-  if (isInGamut(r, g, bVal)) return { l, c, h };
-  let lo = 0;
-  let hi = c;
-  for (let i = 0; i < 20; i++) {
-    const mid = (lo + hi) / 2;
-    const [La, aa, ba] = oklchToOklab(l, mid, h);
-    const [rr, gg, bb] = oklabToLinearRgb(La, aa, ba);
-    if (isInGamut(rr, gg, bb)) {
-      lo = mid;
-    } else {
-      hi = mid;
+// src/editor/core/themes/parsers/colorOpacity.ts
+var COLOR_OPACITY_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
+function parseColorOpacity(value) {
+  const m = value.trim().match(COLOR_OPACITY_RE);
+  if (!m) return null;
+  return { name: m[1], opacity: parseInt(m[2], 10) };
+}
+function formatColorOpacity(name, opacity) {
+  return `color-mix(in srgb, var(${name}) ${opacity}%, transparent)`;
+}
+
+// src/editor/core/themes/parsers/gradient.ts
+var RADIAL_BASE_PX = 100;
+function formatStopColor(s) {
+  const opacity = s.opacity ?? 100;
+  if (s.color.startsWith("--")) {
+    return opacity >= 100 ? `var(${s.color})` : formatColorOpacity(s.color, opacity);
+  }
+  return opacity >= 100 ? s.color : `color-mix(in srgb, ${s.color} ${opacity}%, transparent)`;
+}
+function formatGradientStops(stops) {
+  return stops.map((s) => `${formatStopColor(s)} ${s.position}%`).join(", ");
+}
+function formatRadialShape(v) {
+  const ax = v.aspectX ?? 1;
+  const ay = v.aspectY ?? 1;
+  if (ax === 1 && ay === 1) {
+    return v.radius && v.radius > 0 ? `circle ${v.radius}px` : "circle";
+  }
+  const base = v.radius && v.radius > 0 ? v.radius : RADIAL_BASE_PX;
+  return `ellipse ${(base * ax).toFixed(2)}px ${(base * ay).toFixed(2)}px`;
+}
+function formatGradientValue(v) {
+  if (v.type === "none") return "transparent";
+  if (v.type === "solid") {
+    const first = v.stops[0];
+    return first ? formatStopColor(first) : "transparent";
+  }
+  const stops = formatGradientStops(v.stops);
+  if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
+  return `radial-gradient(${formatRadialShape(v)} at ${v.centerX ?? 50}% 50%, ${stops})`;
+}
+var NUM = String.raw`-?\d+(?:\.\d+)?`;
+var LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${NUM})deg\s*,\s*(.+)\)$`, "i");
+var RADIAL_RE = new RegExp(
+  String.raw`^radial-gradient\(\s*(circle|circle\s+${NUM}px|ellipse\s+${NUM}px\s+${NUM}px)\s+at\s+(${NUM})%\s+50%\s*,\s*(.+)\)$`,
+  "i"
+);
+var STOP_RE = new RegExp(String.raw`^(.*?)\s+(${NUM})%$`);
+var CIRCLE_RADIUS_RE = new RegExp(String.raw`^circle\s+(${NUM})px$`, "i");
+var ELLIPSE_RE = new RegExp(String.raw`^ellipse\s+(${NUM})px\s+(${NUM})px$`, "i");
+var VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
+function splitTopLevel(s) {
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (c === "(") depth++;
+    else if (c === ")") depth--;
+    else if (c === "," && depth === 0) {
+      parts.push(s.slice(start, i));
+      start = i + 1;
     }
   }
-  return { l, c: lo, h };
+  parts.push(s.slice(start));
+  return parts;
+}
+function parseStop(raw) {
+  const m = raw.trim().match(STOP_RE);
+  if (!m) return null;
+  const position = parseFloat(m[2]);
+  const color = m[1].trim();
+  const opacity = parseColorOpacity(color);
+  if (opacity) return { position, color: opacity.name, opacity: opacity.opacity };
+  const token = color.match(VAR_RE);
+  return { position, color: token ? token[1] : color };
+}
+function parseStops(raw) {
+  const stops = [];
+  for (const part of splitTopLevel(raw)) {
+    const stop = parseStop(part);
+    if (!stop) return null;
+    stops.push(stop);
+  }
+  return stops.length > 0 ? stops : null;
+}
+function parseRadialShape(raw) {
+  const shape = raw.trim();
+  if (/^circle$/i.test(shape)) return {};
+  const circle = shape.match(CIRCLE_RADIUS_RE);
+  if (circle) return { radius: parseFloat(circle[1]) };
+  const ellipse = shape.match(ELLIPSE_RE);
+  if (!ellipse) return null;
+  const ax = parseFloat(ellipse[1]) / RADIAL_BASE_PX;
+  const ay = parseFloat(ellipse[2]) / RADIAL_BASE_PX;
+  return { ...ax === 1 ? {} : { aspectX: ax }, ...ay === 1 ? {} : { aspectY: ay } };
+}
+function parseGradientValue(value) {
+  const css = value.trim();
+  const linear = css.match(LINEAR_RE);
+  if (linear) {
+    const stops2 = parseStops(linear[2]);
+    return stops2 && { type: "linear", angle: parseFloat(linear[1]), stops: stops2 };
+  }
+  const radial = css.match(RADIAL_RE);
+  if (!radial) return null;
+  const shape = parseRadialShape(radial[1]);
+  const stops = parseStops(radial[3]);
+  if (!shape || !stops) return null;
+  const centerX = parseFloat(radial[2]);
+  return {
+    type: "radial",
+    angle: 0,
+    ...shape,
+    ...centerX === 50 ? {} : { centerX },
+    stops
+  };
 }
 
 // src/editor/ui/curveEngine.ts
@@ -121,6 +152,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;
@@ -216,37 +256,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))
     }
   };
 }
@@ -265,14 +307,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) {
@@ -368,10 +412,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);
@@ -379,12 +425,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) {
@@ -393,8 +446,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) {
@@ -405,7 +460,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;
@@ -434,7 +491,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) {
@@ -469,8 +526,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) {
@@ -489,13 +546,6 @@ function derivePaletteValues(spec, config) {
   }
   return out;
 }
-function derivePaletteVars(spec, config) {
-  const out = {};
-  for (const [k, v] of Object.entries(derivePaletteValues(spec, config))) {
-    out[k] = serializeDerivedValue(v);
-  }
-  return out;
-}
 function palettesToValues(palettes) {
   const out = {};
   for (const spec of PALETTE_SPECS) {
@@ -510,7 +560,6 @@ function palettesToVars(palettes) {
   }
   return out;
 }
-var HEX_RE = /^#[0-9a-f]{6}$/i;
 function reconcilePalettesFromCssVars(palettes, cssVars) {
   const next = structuredClone(palettes);
   const consumed = /* @__PURE__ */ new Set();
@@ -519,16 +568,17 @@ function reconcilePalettesFromCssVars(palettes, cssVars) {
     const current = next[spec.label];
     if (current === void 0) continue;
     if (current._imported === true) {
-      const anchorHex = cssVars[`--color-${spec.cssNamespace}-500`];
-      if (anchorHex && HEX_RE.test(anchorHex.trim())) {
-        next[spec.label] = { ...current, baseColor: hexToOklch(anchorHex.trim()), _imported: false };
+      const anchor = cssVars[`--color-${spec.cssNamespace}-500`];
+      const anchorOklch = anchor ? cssColorToOklch(anchor) : null;
+      if (anchorOklch) {
+        next[spec.label] = { ...current, baseColor: anchorOklch, _imported: false };
         syncBaseAnchor(next[spec.label]);
         snapped.add(spec.label);
       } else {
         next[spec.label] = { ...current, _imported: false };
       }
     }
-    for (const k of Object.keys(derivePaletteVars(spec, next[spec.label]))) {
+    for (const k of Object.keys(derivePaletteValues(spec, next[spec.label]))) {
       consumed.add(k);
     }
   }
@@ -536,11 +586,12 @@ function reconcilePalettesFromCssVars(palettes, cssVars) {
 }
 
 export {
+  parseColorOpacity,
+  formatGradientValue,
+  parseGradientValue,
   sanitizeFileName,
-  hexToOklch,
-  oklchToHex,
-  gamutClamp,
   makeAnchor,
+  resmoothAutoCurve,
   PALETTE_SPECS,
   PALETTE_STEPS,
   SCALES,

package/dist-plugin/{chunk-44RSTAII.js → chunk-TKZBVIW5.js}

@@ -1,3 +1,8 @@
+import {
+  hexToOklch,
+  oklchToCss
+} from "./chunk-YR6GPXW2.js";
+
 // src/editor/core/themes/parsers/globalRootBlock.ts
 function extractGlobalRootBody(source) {
   const re = /:global\(:root\)\s*\{([^}]*)\}/g;
@@ -12,11 +17,17 @@ function extractGlobalRootBody(source) {
 // vite-plugin/tokensCssMigrations/cssTokenOps.ts
 var DECL_RE = /(^|[\s;{])(--[a-z0-9-]+)\s*:/gi;
 var REF_RE = /var\(\s*(--[a-z0-9-]+)/gi;
+var DECL_VALUE_RE = /(^|[\s;{])(--[a-z0-9-]+)\s*:([^;}]*)/gi;
 function collectDefinedTokens(css) {
   const out = /* @__PURE__ */ new Set();
   for (const m of css.matchAll(DECL_RE)) out.add(m[2]);
   return out;
 }
+function collectTokenValues(css) {
+  const out = /* @__PURE__ */ new Map();
+  for (const m of css.matchAll(DECL_VALUE_RE)) out.set(m[2], m[3].trim());
+  return out;
+}
 function collectReferencedTokens(css) {
   const out = /* @__PURE__ */ new Set();
   for (const m of css.matchAll(REF_RE)) out.add(m[1]);
@@ -350,6 +361,20 @@ var tokensCssMigration_2026_07_20_semanticTextStyles = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-08-19-oklch-color-values.ts
+var HEX_DECLARATION_RE = /(--[a-z0-9-]+:\s*)#([0-9a-f]{6})(?=\s*[;}])/gi;
+var tokensCssMigration_2026_08_19_oklchColorValues = {
+  id: "2026-08-19-oklch-color-values",
+  kind: "breaking",
+  description: "Rewrite hex token values as oklch()",
+  apply(css) {
+    return css.replace(HEX_DECLARATION_RE, (_match, prefix, hex) => {
+      const { l, c, h } = hexToOklch(`#${hex}`);
+      return `${prefix}${oklchToCss(l, c, h)}`;
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -358,7 +383,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_06_04_removeDeadSizeIconScale,
   tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions,
   tokensCssMigration_2026_07_20_lineHeightRename,
-  tokensCssMigration_2026_07_20_semanticTextStyles
+  tokensCssMigration_2026_07_20_semanticTextStyles,
+  tokensCssMigration_2026_08_19_oklchColorValues
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);
@@ -383,10 +409,11 @@ function findContractViolations(canonicalCss) {
   const violations = [];
   for (const m of TOKENS_CSS_MIGRATIONS) {
     if (m.kind !== "additive") continue;
-    const before = collectDefinedTokens(canonicalCss);
-    const after = collectDefinedTokens(m.apply(canonicalCss));
-    const removed = [...before].filter((t) => !after.has(t)).sort();
-    if (removed.length) violations.push({ id: m.id, removed });
+    const before = collectTokenValues(canonicalCss);
+    const after = collectTokenValues(m.apply(canonicalCss));
+    const removed = [...before.keys()].filter((t) => !after.has(t)).sort();
+    const changed = [...before.entries()].filter(([t, v]) => after.has(t) && after.get(t) !== v).map(([t]) => t).sort();
+    if (removed.length || changed.length) violations.push({ id: m.id, removed, changed });
   }
   return violations;
 }
@@ -446,6 +473,7 @@ function validateTokensCss(input) {
 export {
   extractGlobalRootBody,
   collectDefinedTokens,
+  collectTokenValues,
   collectReferencedTokens,
   ensureScale,
   renameToken,

package/dist-plugin/chunk-YR6GPXW2.js

@@ -0,0 +1,129 @@
+// src/system/internal/oklch.ts
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function linearToSrgb(c) {
+  return c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+function hexToLinearRgb(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  return [srgbToLinear(r), srgbToLinear(g), srgbToLinear(b)];
+}
+function linearRgbToHex(r, g, b) {
+  const toHex = (c) => {
+    const v = Math.round(Math.max(0, Math.min(1, linearToSrgb(c))) * 255);
+    return v.toString(16).padStart(2, "0");
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function linearRgbToOklab(r, g, b) {
+  const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  const l = Math.cbrt(l_);
+  const m = Math.cbrt(m_);
+  const s = Math.cbrt(s_);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function oklabToLinearRgb(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+function oklabToOklch(L, a, b) {
+  const c = Math.sqrt(a * a + b * b);
+  let h = Math.atan2(b, a) * 180 / Math.PI;
+  if (h < 0) h += 360;
+  return { l: L, c, h };
+}
+function oklchToOklab(l, c, h) {
+  const hRad = h * Math.PI / 180;
+  return [l, c * Math.cos(hRad), c * Math.sin(hRad)];
+}
+function hexToOklch(hex) {
+  const [r, g, b] = hexToLinearRgb(hex);
+  const [L, a, bVal] = linearRgbToOklab(r, g, b);
+  return oklabToOklch(L, a, bVal);
+}
+function oklchToHex(l, c, h) {
+  const [L, a, b] = oklchToOklab(l, c, h);
+  const [r, g, bVal] = oklabToLinearRgb(L, a, b);
+  return linearRgbToHex(r, g, bVal);
+}
+function isInGamut(r, g, b) {
+  const eps = 1e-4;
+  return r >= -eps && r <= 1 + eps && g >= -eps && g <= 1 + eps && b >= -eps && b <= 1 + eps;
+}
+function oklchToHexClamped(l, c, h) {
+  const g = gamutClamp(l, c, h);
+  return oklchToHex(g.l, g.c, g.h);
+}
+function gamutClamp(l, c, h) {
+  if (l <= 0) return { l: 0, c: 0, h };
+  if (l >= 1) return { l: 1, c: 0, h };
+  const [L, a, b] = oklchToOklab(l, c, h);
+  const [r, g, bVal] = oklabToLinearRgb(L, a, b);
+  if (isInGamut(r, g, bVal)) return { l, c, h };
+  let lo = 0;
+  let hi = c;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    const [La, aa, ba] = oklchToOklab(l, mid, h);
+    const [rr, gg, bb] = oklabToLinearRgb(La, aa, ba);
+    if (isInGamut(rr, gg, bb)) {
+      lo = mid;
+    } else {
+      hi = mid;
+    }
+  }
+  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);
+}
+
+export {
+  hexToOklch,
+  oklchToHex,
+  oklchToHexClamped,
+  gamutClamp,
+  oklchToCss,
+  oklchToCssClamped,
+  cssColorToOklch
+};