@motion-proto/live-tokens 0.40.0 → 0.41.0

package/dist-plugin/index.cjs

@@ -135,6 +135,10 @@ 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 };
@@ -192,16 +196,16 @@ function sampleCurve(anchors, xPos) {
 
 // src/editor/core/palettes/paletteDerivation.ts
 var PALETTE_SPECS = [
-  { label: "Neutral", cssNamespace: "neutral", neutral: true, initialColor: "#70787e" },
-  { label: "Alternate", cssNamespace: "alternate", neutral: true, initialColor: "#817b78" },
-  { label: "Background", cssNamespace: "canvas", emptySelector: true, initialColor: "#1a1a2e" },
-  { label: "Brand", cssNamespace: "brand", initialColor: "#c93636" },
-  { label: "Accent", cssNamespace: "accent", initialColor: "#f49e0b" },
-  { label: "Special", cssNamespace: "special", initialColor: "#8b5cf6" },
-  { label: "Info", cssNamespace: "info", initialColor: "#3077e8" },
-  { label: "Success", cssNamespace: "success", initialColor: "#21c45d" },
-  { label: "Warning", cssNamespace: "warning", initialColor: "#e66e1a" },
-  { label: "Danger", cssNamespace: "danger", initialColor: "#e8304f" }
+  { label: "Brand", cssNamespace: "brand", initialColor: { l: 0.5573, c: 0.1841, h: 25.49 } },
+  { label: "Accent", cssNamespace: "accent", initialColor: { l: 0.7674, c: 0.164, h: 70.44 } },
+  { label: "Background", cssNamespace: "canvas", emptySelector: true, initialColor: { l: 0.2284, c: 0.0384, h: 282.93 } },
+  { label: "Neutral", cssNamespace: "neutral", neutral: true, initialColor: { l: 0.5679, c: 0.0134, h: 240.07 } },
+  { label: "Alternate", cssNamespace: "alternate", neutral: true, displayLabel: "Alternate (neutral)", initialColor: { l: 0.5873, c: 87e-4, h: 48.57 } },
+  { label: "Special", cssNamespace: "special", initialColor: { l: 0.6056, c: 0.2189, h: 292.72 } },
+  { label: "Info", cssNamespace: "info", initialColor: { l: 0.5871, c: 0.1855, h: 259.56 } },
+  { label: "Success", cssNamespace: "success", initialColor: { l: 0.7198, c: 0.1918, h: 149.52 } },
+  { label: "Warning", cssNamespace: "warning", initialColor: { l: 0.6704, c: 0.1716, h: 48.75 } },
+  { label: "Danger", cssNamespace: "danger", initialColor: { l: 0.6103, c: 0.2165, h: 18.1 } }
 ];
 var PALETTE_STEPS = [
   { label: "100" },
@@ -253,50 +257,123 @@ 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 defaultScaleCurves = {
-  Surfaces: {
-    lightness: () => [makeAnchor(0, 15, 5), makeAnchor(100, 47, 5)],
-    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
-  },
-  Borders: {
-    lightness: () => [makeAnchor(0, 25, 5), makeAnchor(100, 80, 5)],
-    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
-  },
-  Text: {
-    lightness: () => [makeAnchor(0, 120, 30), makeAnchor(100, 55, 30)],
-    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)]
+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)]
+      },
+      Borders: {
+        lightness: () => [makeAnchor(0, 92, 5), makeAnchor(100, 45, 5)],
+        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+      },
+      Text: {
+        lightness: () => [makeAnchor(0, 30, 30), makeAnchor(100, 120, 30)],
+        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)]
+      }
+    };
   }
-};
+  return {
+    Surfaces: {
+      lightness: () => [makeAnchor(0, 15, 5), makeAnchor(100, 47, 5)],
+      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+    },
+    Borders: {
+      lightness: () => [makeAnchor(0, 25, 5), makeAnchor(100, 80, 5)],
+      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+    },
+    Text: {
+      lightness: () => [makeAnchor(0, 120, 30), makeAnchor(100, 55, 30)],
+      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)]
+    }
+  };
+}
+var defaultScaleCurves = scaleCurveDefaults("dark");
 function paletteStepKey(label) {
   return `Palette-${label}`;
 }
 function stepKey(scaleTitle, stepName) {
   return `${scaleTitle}-${stepName}`;
 }
-function stepIndexToX(index, total) {
-  return total > 1 ? index / (total - 1) * 100 : 50;
+function stepIndexToX(index) {
+  return index / (PALETTE_STEPS.length - 1) * 100;
+}
+function scaleStepToX(step, scale) {
+  const idx = scale.steps.indexOf(step);
+  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);
 }
-function computePaletteColor(index, base, lightnessCurve, saturationCurve, curveOffset) {
-  const { c: baseC, h } = hexToOklch(base);
-  const xPos = stepIndexToX(index, PALETTE_STEPS.length);
+function computePaletteOklch(index, base, lightnessCurve, saturationCurve, curveOffset) {
+  const { c: baseC, h } = 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 clamped = gamutClamp(targetL, targetC, h);
-  return oklchToHex(clamped.l, clamped.c, clamped.h);
+  return gamutClamp(targetL, targetC, h);
+}
+function nearestPaletteStep(lightnessCurve, baseL) {
+  let best = 0;
+  let bestD = Infinity;
+  for (let i = 0; i < PALETTE_STEPS.length; i++) {
+    const d = Math.abs(sampleCurve(lightnessCurve, stepIndexToX(i)) - baseL * 100);
+    if (d < bestD) {
+      bestD = d;
+      best = i;
+    }
+  }
+  return best;
+}
+function setCurveAnchor(curve, x, y) {
+  const existing = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
+  if (existing >= 0) {
+    const displacedY = curve[existing].y;
+    return { curve: curve.map((a, i) => i === existing ? { ...a, x, y } : a), displacedY };
+  }
+  let insertAt = curve.findIndex((a) => a.x > x);
+  if (insertAt < 0) insertAt = curve.length;
+  return { curve: [...curve.slice(0, insertAt), makeAnchor(x, y, 15), ...curve.slice(insertAt)] };
 }
-function computeDerivedColor(step, base, scaleTitle, scaleCurves, curveOffset) {
+function liftCurveAnchor(curve, x, displacedY) {
+  const idx = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
+  if (idx < 0) return curve;
+  if (displacedY !== void 0) return curve.map((a, i) => i === idx ? { ...a, y: displacedY } : a);
+  if (idx === 0 || idx === curve.length - 1) return curve;
+  return curve.filter((_, i) => i !== idx);
+}
+function syncBaseAnchor(cfg) {
+  if (cfg.anchorToBase === false) return;
+  const prev = cfg.anchorPlacement;
+  let lCurve = cfg.lightnessCurve;
+  let sCurve = cfg.saturationCurve;
+  if (prev) {
+    const prevX = stepIndexToX(prev.step);
+    lCurve = liftCurveAnchor(lCurve, prevX, prev.displacedL);
+    sCurve = liftCurveAnchor(sCurve, prevX, prev.displacedS);
+  }
+  const step = nearestPaletteStep(lCurve, cfg.baseColor.l);
+  const x = stepIndexToX(step);
+  const l = setCurveAnchor(lCurve, x, cfg.baseColor.l * 100);
+  const s = setCurveAnchor(sCurve, x, 100);
+  cfg.lightnessCurve = l.curve;
+  cfg.saturationCurve = s.curve;
+  cfg.anchorPlacement = { step, displacedL: l.displacedY, displacedS: s.displacedY };
+}
+function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
   const scale = SCALES.find((s) => s.title === scaleTitle);
-  const idx = scale.steps.indexOf(step);
-  const xPos = stepIndexToX(idx, scale.steps.length);
+  const xPos = scaleStepToX(step, scale);
   const defs = defaultScaleCurves[scaleTitle];
   const lCurve = scaleCurves[scaleTitle]?.lightness ?? defs.lightness();
   const sCurve = scaleCurves[scaleTitle]?.saturation ?? defs.saturation();
   const lOff = curveOffset[`${scaleTitle}-lightness`] ?? 0;
   const sOff = curveOffset[`${scaleTitle}-saturation`] ?? 0;
-  const { l: baseL, c: baseC, h: baseH } = hexToOklch(base);
+  const { l: baseL, c: baseC, h: baseH } = base;
   let targetL;
   if (scale.isText) {
     const lMul = Math.max(0, Math.min(2, (sampleCurve(lCurve, xPos) + lOff) / 100));
@@ -306,8 +383,7 @@ function computeDerivedColor(step, base, scaleTitle, scaleCurves, curveOffset) {
   }
   const satMul = Math.max(0, Math.min(2, (sampleCurve(sCurve, xPos) + sOff) / 100));
   const targetC = baseC * satMul;
-  const clamped = gamutClamp(targetL, targetC, baseH);
-  return oklchToHex(clamped.l, clamped.c, clamped.h);
+  return gamutClamp(targetL, targetC, baseH);
 }
 function scaleToCssVar(scaleTitle, stepName, cssNamespace) {
   if (cssNamespace === null) return null;
@@ -325,7 +401,7 @@ function scaleToCssVar(scaleTitle, stepName, cssNamespace) {
   }
   return null;
 }
-function derivePaletteVars(spec, config) {
+function derivePaletteValues(spec, config) {
   const out = {};
   if (!config) return out;
   const baseColor = config.baseColor ?? spec.initialColor;
@@ -336,21 +412,24 @@ function derivePaletteVars(spec, config) {
   const saturationCurve = config.saturationCurve ?? DEFAULT_PALETTE_SATURATION();
   PALETTE_STEPS.forEach((ps, index) => {
     const k = paletteStepKey(ps.label);
-    const hex = computePaletteColor(index, baseColor, lightnessCurve, saturationCurve, curveOffset);
-    const effective = k in overrides ? overrides[k] : hex;
-    out[`--color-${spec.cssNamespace}-${ps.label}`] = effective;
+    const value = k in overrides ? { kind: "color", ...overrides[k] } : { kind: "color", ...computePaletteOklch(index, baseColor, lightnessCurve, saturationCurve, curveOffset) };
+    out[`--color-${spec.cssNamespace}-${ps.label}`] = value;
   });
   for (const scale of SCALES) {
     for (const step of scale.steps) {
       const k = stepKey(scale.title, step.name);
-      const hex = k in overrides ? overrides[k] : computeDerivedColor(step, baseColor, scale.title, scaleCurves, curveOffset);
+      const value = k in overrides ? { kind: "color", ...overrides[k] } : { kind: "color", ...computeDerivedOklch(step, baseColor, scale.title, scaleCurves, curveOffset) };
       const varName = scaleToCssVar(scale.title, step.name, spec.cssNamespace);
-      if (varName) out[varName] = hex;
+      if (varName) out[varName] = value;
     }
   }
+  const textPrimary = out["--text-primary"];
+  if (textPrimary?.kind === "color") {
+    const mirroredL = Math.max(BW_GUARD_MIN_L, Math.min(BW_GUARD_MAX_L, 1 - textPrimary.l));
+    out["--text-inverted"] = { kind: "color", ...gamutClamp(mirroredL, textPrimary.c, textPrimary.h) };
+  }
   if (spec.emptySelector) {
     const emptyMode = config.emptyMode ?? "solid";
-    const emptyStep = config.emptyStep ?? "850";
     const gradientStyle = config.gradientStyle ?? "linear";
     const gradientAngle = config.gradientAngle ?? 180;
     const gradientReverse = config.gradientReverse ?? false;
@@ -360,14 +439,17 @@ function derivePaletteVars(spec, config) {
       { position: 100, paletteLabel: "950" }
     ];
     if (emptyMode === "solid") {
-      const stepHex = out[`--color-${spec.cssNamespace}-${emptyStep}`];
-      if (stepHex) out["--page-bg"] = stepHex;
-      out["--page-bg-attachment"] = "scroll";
+      out["--page-bg"] = { kind: "color", ...baseColor };
+      out["--page-bg-attachment"] = { kind: "raw", css: "scroll" };
     } else {
       const sortedStops = [...gradientStops].sort(
         (a, b) => gradientReverse ? b.position - a.position : a.position - b.position
       );
-      const stopsCss = sortedStops.map((s) => `${out[`--color-${spec.cssNamespace}-${s.paletteLabel}`] ?? "#000000"} ${s.position}%`).join(", ");
+      const stopsCss = sortedStops.map((s) => {
+        const stopValue = out[`--color-${spec.cssNamespace}-${s.paletteLabel}`];
+        const hex = stopValue ? serializeDerivedValue(stopValue) : "#000000";
+        return `${hex} ${s.position}%`;
+      }).join(", ");
       let gradient;
       switch (gradientStyle) {
         case "radial":
@@ -379,16 +461,30 @@ function derivePaletteVars(spec, config) {
         default:
           gradient = `linear-gradient(${gradientAngle}deg, ${stopsCss})`;
       }
-      out["--page-bg"] = gradient;
-      out["--page-bg-attachment"] = gradientSize === "window" ? "fixed" : "scroll";
+      out["--page-bg"] = { kind: "raw", css: gradient };
+      out["--page-bg-attachment"] = { kind: "raw", css: gradientSize === "window" ? "fixed" : "scroll" };
     }
   }
   return out;
 }
-function palettesToVars(palettes) {
+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) {
-    Object.assign(out, derivePaletteVars(spec, palettes[spec.label]));
+    Object.assign(out, derivePaletteValues(spec, palettes[spec.label]));
+  }
+  return out;
+}
+function palettesToVars(palettes) {
+  const out = {};
+  for (const [k, v] of Object.entries(palettesToValues(palettes))) {
+    out[k] = serializeDerivedValue(v);
   }
   return out;
 }
@@ -403,8 +499,8 @@ function reconcilePalettesFromCssVars(palettes, cssVars) {
     if (current._imported === true) {
       const anchorHex = cssVars[`--color-${spec.cssNamespace}-500`];
       if (anchorHex && HEX_RE.test(anchorHex.trim())) {
-        const hex = anchorHex.trim();
-        next[spec.label] = { ...current, baseColor: hex, _imported: false };
+        next[spec.label] = { ...current, baseColor: hexToOklch(anchorHex.trim()), _imported: false };
+        syncBaseAnchor(next[spec.label]);
         snapped.add(spec.label);
       } else {
         next[spec.label] = { ...current, _imported: false };
@@ -417,6 +513,26 @@ function reconcilePalettesFromCssVars(palettes, cssVars) {
   return { palettes: next, consumed, snapped };
 }
 
+// src/editor/core/themes/migrations/2026-07-21-palette-oklch-basis.ts
+var round = (v, dp) => {
+  const f = 10 ** dp;
+  return Math.round(v * f) / f;
+};
+function toStoredOklch(value) {
+  if (typeof value !== "string") return value;
+  const { l, c, h } = hexToOklch(value);
+  return { l: round(l, 4), c: round(c, 4), h: round(h, 2) };
+}
+function migratePaletteColorsToOklch(editorConfigs) {
+  const out = {};
+  for (const [label, cfg] of Object.entries(editorConfigs)) {
+    const overrides = {};
+    for (const [k, v] of Object.entries(cfg.overrides ?? {})) overrides[k] = toStoredOklch(v);
+    out[label] = { ...cfg, baseColor: toStoredOklch(cfg.baseColor), overrides };
+  }
+  return out;
+}
+
 // vite-plugin/files/versionedFileResourceServer.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -622,6 +738,19 @@ function ensureScale(css, opts) {
   lines.splice(insertAfter + 1, 0, ...block);
   return lines.join("\n");
 }
+function renameToken(css, oldName, newName) {
+  const defined = collectDefinedTokens(css);
+  if (!defined.has(oldName) || defined.has(newName)) return css;
+  const re = new RegExp(escapeRe(oldName) + "(?![a-z0-9-])", "gi");
+  return css.replace(re, newName);
+}
+function removeToken(css, name) {
+  const lines = css.split("\n");
+  const declRe = new RegExp("(^|[\\s;{])" + escapeRe(name) + "\\s*:");
+  const kept = lines.filter((line) => !declRe.test(line));
+  if (kept.length === lines.length) return css;
+  return kept.join("\n");
+}
 function removeTokensMatching(css, predicate) {
   const lines = css.split("\n");
   const declRe = /^\s*(--[a-z0-9-]+)\s*:/;
@@ -674,25 +803,17 @@ function findTopLevelRoot(lines) {
   }
   return null;
 }
+function escapeRe(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 
 // vite-plugin/tokensCssMigrations/migrations/2026-05-29-typography-scale-additions.ts
 var tokensCssMigration_2026_05_29_typographyScaleAdditions = {
   id: "2026-05-29-typography-scale-additions",
   kind: "additive",
-  description: "Add --line-height-{xs..xl}, --letter-spacing-* and --ease-out-quart scales",
+  description: "Add --letter-spacing-* and --ease-out-quart scales",
   apply(css) {
     let out = css;
-    out = ensureScale(out, {
-      sectionComment: "Line height (t-shirt scale)",
-      anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
-      entries: [
-        { name: "--line-height-xs", value: "1" },
-        { name: "--line-height-sm", value: "1.25" },
-        { name: "--line-height-md", value: "1.5" },
-        { name: "--line-height-lg", value: "1.75" },
-        { name: "--line-height-xl", value: "2" }
-      ]
-    });
     out = ensureScale(out, {
       sectionComment: "Letter spacing",
       anchorPrefixes: ["--letter-spacing-", "--line-height-", "--font-size-", "--font-"],
@@ -835,13 +956,113 @@ var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-07-20-line-height-rename.ts
+var RENAMES = [
+  ["--line-height-xs", "--line-height-none"],
+  ["--line-height-sm", "--line-height-tighter"],
+  ["--line-height-md", "--line-height-normal"],
+  ["--line-height-lg", "--line-height-relaxed"]
+];
+var SCALE = [
+  { name: "--line-height-none", value: "1" },
+  { name: "--line-height-tightest", value: "1.1" },
+  { name: "--line-height-tighter", value: "1.25" },
+  { name: "--line-height-tight", value: "1.35" },
+  { name: "--line-height-normal", value: "1.5" },
+  { name: "--line-height-relaxed", value: "1.75" }
+];
+var tokensCssMigration_2026_07_20_lineHeightRename = {
+  id: "2026-07-20-line-height-rename",
+  kind: "breaking",
+  description: "Reshape --line-height-{xs..xl} to leading vocabulary (none/tightest/tighter/tight/normal/relaxed); retire the 2.0 slot",
+  apply(css) {
+    let out = css;
+    for (const [oldName, newName] of RENAMES) out = renameToken(out, oldName, newName);
+    out = removeToken(out, "--line-height-xl");
+    out = ensureScale(out, {
+      anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
+      entries: SCALE
+    });
+    return out;
+  }
+};
+
+// vite-plugin/tokensCssMigrations/migrations/2026-07-20-semantic-text-styles.ts
+var BUNDLE = [
+  { name: "--heading-xl-font-family", value: "var(--font-display)" },
+  { name: "--heading-xl-font-size", value: "var(--font-size-4xl)" },
+  { name: "--heading-xl-font-weight", value: "var(--font-weight-semibold)" },
+  { name: "--heading-xl-line-height", value: "var(--line-height-tightest)" },
+  { name: "--heading-xl-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--heading-lg-font-family", value: "var(--font-display)" },
+  { name: "--heading-lg-font-size", value: "var(--font-size-2xl)" },
+  { name: "--heading-lg-font-weight", value: "var(--font-weight-semibold)" },
+  { name: "--heading-lg-line-height", value: "var(--line-height-tightest)" },
+  { name: "--heading-lg-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--heading-md-font-family", value: "var(--font-display)" },
+  { name: "--heading-md-font-size", value: "var(--font-size-xl)" },
+  { name: "--heading-md-font-weight", value: "var(--font-weight-semibold)" },
+  { name: "--heading-md-line-height", value: "var(--line-height-tighter)" },
+  { name: "--heading-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--heading-sm-font-family", value: "var(--font-sans)" },
+  { name: "--heading-sm-font-size", value: "var(--font-size-lg)" },
+  { name: "--heading-sm-font-weight", value: "var(--font-weight-semibold)" },
+  { name: "--heading-sm-line-height", value: "var(--line-height-tighter)" },
+  { name: "--heading-sm-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--body-md-font-family", value: "var(--font-sans)" },
+  { name: "--body-md-font-size", value: "var(--font-size-md)" },
+  { name: "--body-md-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--body-md-line-height", value: "var(--line-height-normal)" },
+  { name: "--body-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--body-sm-font-family", value: "var(--font-sans)" },
+  { name: "--body-sm-font-size", value: "var(--font-size-sm)" },
+  { name: "--body-sm-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--body-sm-line-height", value: "var(--line-height-tight)" },
+  { name: "--body-sm-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--code-font-family", value: "var(--font-mono)" },
+  { name: "--code-font-size", value: "var(--font-size-sm)" },
+  { name: "--code-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--code-line-height", value: "var(--line-height-normal)" },
+  { name: "--code-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--eyebrow-font-family", value: "var(--font-sans)" },
+  { name: "--eyebrow-font-size", value: "var(--font-size-sm)" },
+  { name: "--eyebrow-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--eyebrow-line-height", value: "var(--line-height-normal)" },
+  { name: "--eyebrow-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--eyebrow-text-transform", value: "none" }
+];
+var tokensCssMigration_2026_07_20_semanticTextStyles = {
+  id: "2026-07-20-semantic-text-styles",
+  kind: "additive",
+  description: "Add the semantic text-style bundles (--heading-*/--body-*/--code-*/--eyebrow-*)",
+  apply(css) {
+    return ensureScale(css, {
+      sectionComment: "Text styles \u2014 semantic typography roles",
+      anchorPrefixes: [
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
   tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup,
   tokensCssMigration_2026_06_03_transformScaleAdditions,
   tokensCssMigration_2026_06_04_removeDeadSizeIconScale,
-  tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions
+  tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions,
+  tokensCssMigration_2026_07_20_lineHeightRename,
+  tokensCssMigration_2026_07_20_semanticTextStyles
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);
@@ -1032,7 +1253,7 @@ function themeFileApi(opts) {
     let themeVarCount = 0;
     if (themeData) {
       const cssVars = { ...themeData.cssVariables || {} };
-      Object.assign(cssVars, palettesToVars(themeData.editorConfigs ?? {}));
+      Object.assign(cssVars, palettesToVars(migratePaletteColorsToOklch(themeData.editorConfigs ?? {})));
       const resolvedFontVars = resolveFontStacks(themeData);
       for (const [name, value] of Object.entries(resolvedFontVars)) {
         cssVars[name] = value;