@motion-proto/live-tokens 0.60.1 → 0.62.0

package/.claude/skills/live-tokens-build-page/SKILL.md

@@ -10,7 +10,7 @@ Two rules above all else:
 1. **Use a shipped component if one fits.** Import from `@motion-proto/live-tokens/components/<Name>.svelte`. See [[live-tokens-pick-component]] for the catalogue and the confusing-pair decisions. Author custom markup only when nothing fits, and then consider [[live-tokens-create-component]] so the new piece is editable too.
 2. **Use theme tokens for every value.** Every color, spacing, radius, font-size, and font-family in page CSS is a `var(--token-*)`. No hex literals. No pixel literals. A change in `/live-tokens/editor` should repaint your page.
 
-For text, reach for a whole text style rather than assembling one: `--heading-xl` through `--heading-sm`, `--body-md`, `--body-sm`, `--eyebrow`, and `--code` each carry a `-font-family`, `-font-size`, `-font-weight`, `-line-height`, and `-letter-spacing`. A heading set from `--heading-lg-*` retypes when the theme's fonts change; one set from a raw `font-size` does not.
+For text, reach for a whole text style rather than assembling one: `--heading-xl` through `--heading-sm`, `--body-md`, `--body-sm`, `--editorial-md`, `--editorial-sm`, `--eyebrow`, and `--code` each carry a `-font-family`, `-font-size`, `-font-weight`, `-line-height`, and `-letter-spacing`. A heading set from `--heading-lg-*` retypes when the theme's fonts change; one set from a raw `font-size` does not.
 
 ## Layout
 

package/.claude/skills/live-tokens-pair-fonts/SKILL.md

@@ -24,7 +24,7 @@ Flags: `--dry-run` reports without writing. `--no-verify` skips the network and
 { "display": "Fraunces", "body": "Nunito Sans" }
 ```
 
-Every slot is optional and an omitted slot is left exactly as it is. `display` is `--font-display`, `body` is `--font-sans`; `serif`, `mono` and `editorial` exist when a theme needs them. `editorial` is `--font-editorial`, the long-reading face behind the `--editorial-*` text style: it tracks the body face until a theme repoints it, so set it only when essays and articles should not carry the body face. A slot may be `{ "name": "...", "url": "..." }` to pin an exact URL. Spell families as Google does; the CLI reports the canonical spelling back.
+Every slot is optional and an omitted slot is left exactly as it is. `display` is `--font-display`, `body` is `--font-sans`; `serif`, `mono` and `editorial` exist when a theme needs them. `editorial` is `--font-editorial`, the long-reading face behind the `--editorial-md-*` and `--editorial-sm-*` text styles: it tracks the body face until a theme repoints it, so set it only when essays and articles should not carry the body face. A slot may be `{ "name": "...", "url": "..." }` to pin an exact URL. Spell families as Google does; the CLI reports the canonical spelling back.
 
 ## Choose the body face first
 

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # Changelog
 
+## 0.62.0 — Editorial type reads as a pair
+
+### Added
+
+- **The editorial role has its own sizes.** The role shipped with a single
+  unsized bundle, so an editorial surface could only take the body size. It now
+  reads as a pair, matching body: `--editorial-md-*` and `--editorial-sm-*`,
+  both editable in the editor's Text Styles section beside the other styles, and
+  both carried by an `.editorial-md` / `.editorial-sm` class in `site.css`. Each
+  step mirrors its body counterpart apart from the family, so a project that
+  never repoints `--font-editorial` renders exactly as it did.
+- **`Card` takes `variant="bare"`.** A card with no icon and no title dropped
+  its header silently, which read the same as a card whose title had gone
+  missing. `bare` says the headerless card is the intent; the frame and body
+  keep every token the default variant uses, so padding, stroke and fill stay
+  editable. A default-variant card with nothing to put in its header now warns
+  in dev.
+- **Sketch mode reaches the component editor.** A component demo draws itself
+  the way the page will, sketch included, while the tab strips and property rows
+  around it stay chrome: they run on `--ui-*` tokens the layer knows nothing
+  about. The router hands the layer the root to paint, so a sketch style never
+  bleeds onto the editor's own routes.
+
+### Changed (breaking)
+
+- **`--editorial-*` is now `--editorial-md-*`.** The unsized bundle became the
+  medium step. A `breaking` tokens.css migration
+  (`2026-08-27-editorial-size-steps`) renames it and backfills both steps,
+  carrying any value already tuned. It never auto-applies: run
+  `npx live-tokens migrate`.
+
+### Changed
+
+- **Ink coverage is a levels control.** The dials read as a pile of unrelated
+  knobs because each one meant something different depending on the grain and
+  octave count under it. The field is now normalized to run black to white
+  whatever the noise beneath, so **Steps** flattens it into tones and **Output**
+  squeezes the whole of it into the range the ink covers, from palest to
+  densest. The field is squeezed into that gap, never clipped at it, so both
+  ends mean the same thing at every setting. The seven shipped presets are
+  retuned against the new response.
+- **Menus and tooltips are drawn solid whatever the coverage dials say.** They
+  float over arbitrary page content, so a fill worn through in patches let the
+  page show through them and they stopped reading as a surface the pointer can
+  land on.
+- **`SectionDivider` titles take no outline by default.** The three sizes each
+  carried a themed outline color, which drew a halo around every subsection
+  title on a page that never asked for one. All three default to transparent;
+  a theme that wants the halo sets the color.
+
+### Fixed
+
+- **Per-side padding no longer strands the base token.** `themed-padding`
+  emits `var(--x-side, <base>)` for each side, so a per-side token is an
+  override slot the editor fills when the user splits the padding. `Card` and
+  `SegmentedControl` declared sides that named a literal step instead, which
+  always beat that fallback and left the base inert: merging split padding back
+  to one value cleared the side aliases, the fallback never took over, and the
+  padding control moved nothing. Both now track their own base, and
+  `paddingBaseStaysLive` holds every component that uses `themed-padding` to
+  the same rule. `Card`'s header and body padding are symmetric as a result;
+  a theme that wants the asymmetry back sets the per-side aliases.
+- **`ImageLightbox`'s tile fill stays on the closed tile.** The fill also
+  painted the opened stage, where it had nothing to do: the stage rides a
+  near-opaque overlay that already backs transparent art, so the fill only
+  showed as a slab of theme color in the gap the image's aspect left inside the
+  stage box. The open stage now takes no fill of its own, matching the tile
+  shadow, which already stopped at the same edge.
+- **Sketch settings no longer accumulate a trace on `globalThis`.** Debug
+  instrumentation left in `sketchStore` pushed an entry onto an unbounded
+  global array on every settings write, every share and every cross-frame
+  adopt. It is gone.
+
+## 0.61.0 — A surface says which way it leans
+
+### Added
+
+- **One answer to "is this surface light or dark".** A wordmark drawn in white
+  disappears on a pale theme, ink that multiplies onto paper vanishes on a dark
+  one, and a headline over a photograph is on a dark ground whatever the palette
+  says. Every one of those needs the same fact, and every one of them was
+  answering it for itself: a luminance probe here, a `--page-bg` poll there, a
+  hand-picked token pair somewhere else. `@motion-proto/live-tokens/backdrop`
+  answers it once. `data-backdrop` is the single channel — state it in markup
+  where the surface knows its own tone, or let `use:backdrop` measure what
+  actually paints and stamp it — and `tokens.css` turns the attribute into
+  `color-scheme`, so `light-dark()` under it resolves the half that reads. The
+  module also answers in JavaScript, for a canvas, a WebGL uniform, or an image
+  that comes in two versions: `isLightBackdrop`, `watchBackdrop`, `polarityOf`,
+  `contrastTokenFor`, and `cssColorToHex`. A new guide chapter, **Light and
+  dark**, covers the whole of it.
+- **A theme's own polarity is baked, not probed.** Nothing in a saved theme
+  recorded whether it was light or dark — the generator takes `scheme` as a
+  brief and throws it away — so anything that needed to know had to measure at
+  runtime and repaint. `tokens.generated.css` now carries a `color-scheme`
+  measured from the production theme's `--page-bg`, at zero specificity: it is
+  the answer at first paint, and any `data-backdrop` stamp — the editor
+  switching themes live, a section stating its own tone — outranks it.
+
+- **`ImageLightbox` has a tile fill.** A diagram drawn in light ink, or any
+  cut-out with a transparent ground, disappeared into a light page: the tile is
+  exactly the image's own box, so nothing stood behind the art to separate it
+  from the section. `--imagelightbox-tile-surface` paints behind the image on
+  the closed tile and the opened stage alike, inside the radius and border the
+  tile already carries. It takes any fill the editor offers, solid or gradient,
+  and defaults to none, so every existing lightbox renders as it did.
+
 ## 0.60.1 — A drawn heading is type, not an icon
 
 ### Fixed

package/dist-plugin/{chunk-XWXIMTWZ.js → chunk-7TQQTHI6.js}

@@ -113,6 +113,13 @@ function cssColorToOklch(value) {
   if (HEX6_RE.test(raw)) return hexToOklch(raw);
   return parseOklchCss(raw);
 }
+function oklchToRgb255(l, c, h) {
+  const clamped = gamutClamp(l, c, h);
+  const [L, a, bVal] = oklchToOklab(clamped.l, clamped.c, clamped.h);
+  const [r, g, b] = oklabToLinearRgb(L, a, bVal);
+  const to255 = (channel) => Math.round(Math.max(0, Math.min(1, linearToSrgb(channel))) * 255);
+  return { r: to255(r), g: to255(g), b: to255(b) };
+}
 
 export {
   hexToOklch,
@@ -120,5 +127,7 @@ export {
   oklchToHexClamped,
   gamutClamp,
   oklchToCss,
-  cssColorToOklch
+  parseOklchCss,
+  cssColorToOklch,
+  oklchToRgb255
 };

package/dist-plugin/{chunk-LW4SR7AZ.js → chunk-O6GQ6GBH.js}

@@ -2,7 +2,7 @@ import {
   cssColorToOklch,
   gamutClamp,
   oklchToCss
-} from "./chunk-XWXIMTWZ.js";
+} from "./chunk-7TQQTHI6.js";
 
 // src/editor/core/storage/files/versionedFileResourceClient.ts
 function sanitizeFileName(name) {

package/dist-plugin/{chunk-E5QYON4L.js → chunk-OPYOK2CA.js}

@@ -1,7 +1,7 @@
 import {
   hexToOklch,
   oklchToCss
-} from "./chunk-XWXIMTWZ.js";
+} from "./chunk-7TQQTHI6.js";
 
 // src/editor/core/themes/parsers/globalRootBlock.ts
 function extractGlobalRootBody(source) {
@@ -377,37 +377,15 @@ var tokensCssMigration_2026_08_19_oklchColorValues = {
 
 // vite-plugin/tokensCssMigrations/migrations/2026-08-25-editorial-type-role.ts
 var STACK = [{ name: "--font-editorial", value: "var(--font-sans)" }];
-var BUNDLE2 = [
-  { name: "--editorial-font-family", value: "var(--font-editorial)" },
-  { name: "--editorial-font-size", value: "var(--font-size-md)" },
-  { name: "--editorial-font-weight", value: "var(--font-weight-normal)" },
-  { name: "--editorial-line-height", value: "var(--line-height-normal)" },
-  { name: "--editorial-letter-spacing", value: "var(--letter-spacing-normal)" }
-];
 var tokensCssMigration_2026_08_25_editorialTypeRole = {
   id: "2026-08-25-editorial-type-role",
   kind: "additive",
-  description: "Add the editorial type role (--font-editorial and the --editorial-* bundle)",
+  description: "Add the editorial type role (--font-editorial)",
   apply(css) {
-    const withStack = ensureScale(css, {
+    return ensureScale(css, {
       anchorPrefixes: ["--font-mono", "--font-serif", "--font-sans", "--font-display"],
       entries: STACK
     });
-    return ensureScale(withStack, {
-      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
-      anchorPrefixes: [
-        "--eyebrow-",
-        "--code-",
-        "--body-",
-        "--heading-",
-        "--letter-spacing-",
-        "--line-height-",
-        "--font-weight-",
-        "--font-size-",
-        "--font-"
-      ],
-      entries: BUNDLE2
-    });
   }
 };
 
@@ -430,6 +408,77 @@ var tokensCssMigration_2026_08_26_gradientStops = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-08-27-backdrop-polarity.ts
+var MARKER = "[data-backdrop='dark']";
+var RULES = `/* BACKDROP POLARITY \u2014 one attribute says which way a surface leans. State it
+   in markup (\`<section data-backdrop="dark">\`) or let \`use:backdrop\` measure
+   and stamp it. Either way \`light-dark()\` inside resolves the right half, and
+   a rule can key on the attribute for what colour alone cannot carry. */
+
+[data-backdrop='light'] {
+  color-scheme: light;
+}
+
+[data-backdrop='dark'] {
+  color-scheme: dark;
+}
+`;
+var tokensCssMigration_2026_08_27_backdropPolarity = {
+  id: "2026-08-27-backdrop-polarity",
+  kind: "additive",
+  description: "Add the [data-backdrop] \u2192 color-scheme rules",
+  apply(css) {
+    if (css.includes(MARKER)) return css;
+    const at = css.indexOf(":root");
+    if (at === -1) return `${css.trimEnd()}
+
+${RULES}`;
+    return `${css.slice(0, at)}${RULES}
+${css.slice(at)}`;
+  }
+};
+
+// vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-size-steps.ts
+var AXES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing"];
+var BUNDLE2 = [
+  { name: "--editorial-md-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-md-font-size", value: "var(--font-size-md)" },
+  { name: "--editorial-md-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
+  { name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--editorial-sm-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-sm-font-size", value: "var(--font-size-sm)" },
+  { name: "--editorial-sm-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
+  { name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
+];
+var tokensCssMigration_2026_08_27_editorialSizeSteps = {
+  id: "2026-08-27-editorial-size-steps",
+  kind: "breaking",
+  description: "Split the editorial bundle into --editorial-md-* and --editorial-sm-* steps",
+  apply(css) {
+    let out = css;
+    for (const axis of AXES) {
+      out = renameToken(out, `--editorial-${axis}`, `--editorial-md-${axis}`);
+    }
+    return ensureScale(out, {
+      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
+      anchorPrefixes: [
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE2
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -441,7 +490,9 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_07_20_semanticTextStyles,
   tokensCssMigration_2026_08_19_oklchColorValues,
   tokensCssMigration_2026_08_25_editorialTypeRole,
-  tokensCssMigration_2026_08_26_gradientStops
+  tokensCssMigration_2026_08_26_gradientStops,
+  tokensCssMigration_2026_08_27_backdropPolarity,
+  tokensCssMigration_2026_08_27_editorialSizeSteps
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/generateColorsAndType/index.js

@@ -15,7 +15,7 @@ import {
   scaleToCssVar,
   setCurveAnchor,
   syncBaseAnchor
-} from "../chunk-LW4SR7AZ.js";
+} from "../chunk-O6GQ6GBH.js";
 import {
   CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
   CURRENT_COMPONENT_SCHEMA_VERSION
@@ -26,7 +26,7 @@ import {
   hexToOklch,
   oklchToHex,
   oklchToHexClamped
-} from "../chunk-XWXIMTWZ.js";
+} from "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs

package/dist-plugin/index.cjs

@@ -203,6 +203,9 @@ function sanitizeFileName(name) {
 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;
@@ -295,6 +298,13 @@ function cssColorToOklch(value) {
   if (HEX6_RE.test(raw)) return hexToOklch(raw);
   return parseOklchCss(raw);
 }
+function oklchToRgb255(l, c, h) {
+  const clamped = gamutClamp(l, c, h);
+  const [L, a, bVal] = oklchToOklab(clamped.l, clamped.c, clamped.h);
+  const [r, g, b] = oklabToLinearRgb(L, a, bVal);
+  const to255 = (channel2) => Math.round(Math.max(0, Math.min(1, linearToSrgb(channel2))) * 255);
+  return { r: to255(r), g: to255(g), b: to255(b) };
+}
 
 // src/editor/ui/curveEngine.ts
 function makeAnchor(x, y, tangentLen = 15) {
@@ -1520,6 +1530,87 @@ function runMigrations(kind, fileVersion, rawVars, meta = {}) {
   return out;
 }
 
+// src/system/backdrop/backdrop.ts
+var LIGHT_BACKDROP = 0.2;
+var OPAQUE = 0.98;
+var HEX_RE = /#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\b/gi;
+var OKLCH_RE2 = /oklch\(\s*[\d.]+%?\s+[\d.]+%?\s+[\d.]+(?:deg)?\s*(?:\/\s*([\d.]+%?)\s*)?\)/gi;
+var RGB_RE = /rgba?\(\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)(?:\s*[,/]\s*([\d.]+%?))?\s*\)/gi;
+var EXOTIC_RE = /\b(?:color-mix|hwb|lab|lch|oklab|color)\([^()]*\)/gi;
+function channel(value) {
+  const parsed = Number.parseFloat(value);
+  return value.endsWith("%") ? parsed * 2.55 : parsed;
+}
+function alpha(value) {
+  if (value === void 0) return 1;
+  const parsed = Number.parseFloat(value);
+  return value.endsWith("%") ? parsed / 100 : parsed;
+}
+function parseHex(hex) {
+  const digits = hex.slice(1);
+  const full = digits.length <= 4 ? digits.split("").map((part) => part + part).join("") : digits;
+  return {
+    r: Number.parseInt(full.slice(0, 2), 16),
+    g: Number.parseInt(full.slice(2, 4), 16),
+    b: Number.parseInt(full.slice(4, 6), 16),
+    a: full.length >= 8 ? Number.parseInt(full.slice(6, 8), 16) / 255 : 1
+  };
+}
+function colorsIn(background) {
+  const colors = [];
+  for (const match of background.matchAll(HEX_RE)) colors.push(parseHex(match[0]));
+  for (const match of background.matchAll(OKLCH_RE2)) {
+    const parsed = parseOklchCss(match[0]);
+    if (parsed) colors.push({ ...oklchToRgb255(parsed.l, parsed.c, parsed.h), a: alpha(match[1]) });
+  }
+  for (const match of background.matchAll(RGB_RE)) {
+    colors.push({
+      r: channel(match[1]),
+      g: channel(match[2]),
+      b: channel(match[3]),
+      a: alpha(match[4])
+    });
+  }
+  for (const match of background.matchAll(EXOTIC_RE)) {
+    const resolved = viaCanvas(match[0]);
+    if (resolved) colors.push(resolved);
+  }
+  return colors;
+}
+function linearChannel(value) {
+  const srgb = Math.max(0, Math.min(255, value)) / 255;
+  return srgb <= 0.04045 ? srgb / 12.92 : ((srgb + 0.055) / 1.055) ** 2.4;
+}
+function luminance({ r, g, b }) {
+  return 0.2126 * linearChannel(r) + 0.7152 * linearChannel(g) + 0.0722 * linearChannel(b);
+}
+var SEED = "#010203";
+var probe;
+function viaCanvas(value) {
+  if (typeof document === "undefined") return null;
+  if (probe === void 0) {
+    probe = document.createElement("canvas").getContext?.("2d", { willReadFrequently: true }) ?? null;
+  }
+  if (!probe) return null;
+  probe.fillStyle = SEED;
+  probe.fillStyle = value;
+  if (probe.fillStyle === SEED) return null;
+  probe.clearRect(0, 0, 1, 1);
+  probe.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = probe.getImageData(0, 0, 1, 1).data;
+  return { r, g, b, a: a / 255 };
+}
+function backgroundLuminance(background) {
+  const opaque = colorsIn(background).filter((color) => color.a >= OPAQUE);
+  if (!opaque.length) return null;
+  return opaque.reduce((total, color) => total + luminance(color), 0) / opaque.length;
+}
+function polarityOfBackground(background) {
+  const measured = backgroundLuminance(background);
+  if (measured === null) return null;
+  return measured >= LIGHT_BACKDROP ? "light" : "dark";
+}
+
 // vite-plugin/files/versionedFileResourceServer.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -2419,37 +2510,15 @@ var tokensCssMigration_2026_08_19_oklchColorValues = {
 
 // vite-plugin/tokensCssMigrations/migrations/2026-08-25-editorial-type-role.ts
 var STACK = [{ name: "--font-editorial", value: "var(--font-sans)" }];
-var BUNDLE2 = [
-  { name: "--editorial-font-family", value: "var(--font-editorial)" },
-  { name: "--editorial-font-size", value: "var(--font-size-md)" },
-  { name: "--editorial-font-weight", value: "var(--font-weight-normal)" },
-  { name: "--editorial-line-height", value: "var(--line-height-normal)" },
-  { name: "--editorial-letter-spacing", value: "var(--letter-spacing-normal)" }
-];
 var tokensCssMigration_2026_08_25_editorialTypeRole = {
   id: "2026-08-25-editorial-type-role",
   kind: "additive",
-  description: "Add the editorial type role (--font-editorial and the --editorial-* bundle)",
+  description: "Add the editorial type role (--font-editorial)",
   apply(css) {
-    const withStack = ensureScale(css, {
+    return ensureScale(css, {
       anchorPrefixes: ["--font-mono", "--font-serif", "--font-sans", "--font-display"],
       entries: STACK
     });
-    return ensureScale(withStack, {
-      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
-      anchorPrefixes: [
-        "--eyebrow-",
-        "--code-",
-        "--body-",
-        "--heading-",
-        "--letter-spacing-",
-        "--line-height-",
-        "--font-weight-",
-        "--font-size-",
-        "--font-"
-      ],
-      entries: BUNDLE2
-    });
   }
 };
 
@@ -2472,6 +2541,77 @@ var tokensCssMigration_2026_08_26_gradientStops = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-08-27-backdrop-polarity.ts
+var MARKER = "[data-backdrop='dark']";
+var RULES = `/* BACKDROP POLARITY \u2014 one attribute says which way a surface leans. State it
+   in markup (\`<section data-backdrop="dark">\`) or let \`use:backdrop\` measure
+   and stamp it. Either way \`light-dark()\` inside resolves the right half, and
+   a rule can key on the attribute for what colour alone cannot carry. */
+
+[data-backdrop='light'] {
+  color-scheme: light;
+}
+
+[data-backdrop='dark'] {
+  color-scheme: dark;
+}
+`;
+var tokensCssMigration_2026_08_27_backdropPolarity = {
+  id: "2026-08-27-backdrop-polarity",
+  kind: "additive",
+  description: "Add the [data-backdrop] \u2192 color-scheme rules",
+  apply(css) {
+    if (css.includes(MARKER)) return css;
+    const at = css.indexOf(":root");
+    if (at === -1) return `${css.trimEnd()}
+
+${RULES}`;
+    return `${css.slice(0, at)}${RULES}
+${css.slice(at)}`;
+  }
+};
+
+// vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-size-steps.ts
+var AXES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing"];
+var BUNDLE2 = [
+  { name: "--editorial-md-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-md-font-size", value: "var(--font-size-md)" },
+  { name: "--editorial-md-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
+  { name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--editorial-sm-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-sm-font-size", value: "var(--font-size-sm)" },
+  { name: "--editorial-sm-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
+  { name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
+];
+var tokensCssMigration_2026_08_27_editorialSizeSteps = {
+  id: "2026-08-27-editorial-size-steps",
+  kind: "breaking",
+  description: "Split the editorial bundle into --editorial-md-* and --editorial-sm-* steps",
+  apply(css) {
+    let out = css;
+    for (const axis of AXES) {
+      out = renameToken2(out, `--editorial-${axis}`, `--editorial-md-${axis}`);
+    }
+    return ensureScale(out, {
+      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
+      anchorPrefixes: [
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE2
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -2483,7 +2623,9 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_07_20_semanticTextStyles,
   tokensCssMigration_2026_08_19_oklchColorValues,
   tokensCssMigration_2026_08_25_editorialTypeRole,
-  tokensCssMigration_2026_08_26_gradientStops
+  tokensCssMigration_2026_08_26_gradientStops,
+  tokensCssMigration_2026_08_27_backdropPolarity,
+  tokensCssMigration_2026_08_27_editorialSizeSteps
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);
@@ -2724,6 +2866,7 @@ function themeFileApi(opts) {
     }
     const colorsAndTypeData = productionTheme?.colorsAndType;
     let colorsAndTypeVarCount = 0;
+    let pageBackground = "";
     if (colorsAndTypeData) {
       const cssVars = { ...colorsAndTypeData.cssVariables || {} };
       Object.assign(cssVars, palettesToVars(migratePaletteColorsToOklch(colorsAndTypeData.editorConfigs ?? {})));
@@ -2731,6 +2874,7 @@ function themeFileApi(opts) {
       for (const [name, value] of Object.entries(resolvedFontVars)) {
         cssVars[name] = value;
       }
+      pageBackground = cssVars["--page-bg"] ?? "";
       colorsAndTypeVarCount = Object.keys(cssVars).length;
       if (colorsAndTypeVarCount > 0) {
         lines.push(`/* Production theme: ${productionThemeName} */`);
@@ -2742,6 +2886,16 @@ function themeFileApi(opts) {
         lines.push("");
       }
     }
+    {
+      const polarity = pageBackground ? polarityOfBackground(pageBackground) : null;
+      if (polarity) {
+        lines.push(`/* Page polarity, from --page-bg */`);
+        lines.push(":where(:root) {");
+        lines.push(`  color-scheme: ${polarity};`);
+        lines.push("}");
+        lines.push("");
+      }
+    }
     let componentOverrideCount = 0;
     if (import_fs4.default.existsSync(COMPONENT_CONFIGS_DIR)) {
       const blocks = [];