@motion-proto/live-tokens 0.60.1 → 0.61.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 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-OIOXU7FR.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) {
@@ -430,6 +430,36 @@ 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/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -441,7 +471,8 @@ 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
 ];
 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);
@@ -2472,6 +2563,36 @@ 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/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -2483,7 +2604,8 @@ 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
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);
@@ -2724,6 +2846,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 +2854,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 +2866,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 = [];

package/dist-plugin/index.js

@@ -5,7 +5,7 @@ import {
   parseGradientValue,
   reconcilePalettesFromCssVars,
   sanitizeFileName
-} from "./chunk-LW4SR7AZ.js";
+} from "./chunk-O6GQ6GBH.js";
 import {
   THEME_SCHEMA_VERSION,
   detectLegacyLayout,
@@ -23,10 +23,12 @@ import {
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-E5QYON4L.js";
+} from "./chunk-OIOXU7FR.js";
 import {
-  hexToOklch
-} from "./chunk-XWXIMTWZ.js";
+  hexToOklch,
+  oklchToRgb255,
+  parseOklchCss
+} from "./chunk-7TQQTHI6.js";
 import {
   resolveDataDirs
 } from "./chunk-Y5CNFSSV.js";
@@ -55,6 +57,87 @@ function migratePaletteColorsToOklch(editorConfigs) {
   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_RE = /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_RE)) {
+    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/routeTable.ts
 async function dispatch(req, res, routes) {
   const url = req.url || "";
@@ -277,6 +360,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 ?? {})));
@@ -284,6 +368,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} */`);
@@ -295,6 +380,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 (fs.existsSync(COMPONENT_CONFIGS_DIR)) {
       const blocks = [];

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -517,6 +517,36 @@ 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/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -562,7 +592,8 @@ 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
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/tokensCssMigrations/index.js

@@ -13,8 +13,8 @@ import {
   runTokensCssMigrations,
   semverBumpType,
   validateTokensCss
-} from "../chunk-E5QYON4L.js";
-import "../chunk-XWXIMTWZ.js";
+} from "../chunk-OIOXU7FR.js";
+import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig
 } from "../chunk-Y5CNFSSV.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.60.1",
+  "version": "0.61.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -90,6 +90,11 @@
       "svelte": "./src/editor/docs/Docs.svelte",
       "default": "./src/editor/docs/Docs.svelte"
     },
+    "./backdrop": {
+      "svelte": "./src/system/backdrop/index.ts",
+      "types": "./src/system/backdrop/index.ts",
+      "default": "./src/system/backdrop/index.ts"
+    },
     "./components/*": {
       "svelte": "./src/system/components/*",
       "default": "./src/system/components/*"

package/src/editor/component-editor/ImageLightboxEditor.svelte

@@ -8,6 +8,7 @@
   // for the interactive controls. No second variant.
   const states: Record<string, Token[]> = {
     tile: [
+      { label: 'fill color',    groupKey: 'surface', variable: '--imagelightbox-tile-surface' },
       { label: 'corner radius', groupKey: 'radius', variable: '--imagelightbox-tile-radius' },
       { label: 'border color',  groupKey: 'border', variable: '--imagelightbox-tile-border' },
       { label: 'border width',  groupKey: 'width',  variable: '--imagelightbox-tile-border-width' },
@@ -50,7 +51,7 @@
 <ComponentEditorBase
   {component}
   title="Image Lightbox"
-  description="Click an inline image to expand it into a centered modal with a backdrop. Pass multiple images for a gallery (chevrons + counter). Extended mode adds zoom controls and drag panning. `shadow` picks where the one tile-shadow token falls: `box` casts it from the tile rectangle, `content` from the image's own alpha, or `none`."
+  description="Click an inline image to expand it into a centered modal with a backdrop. Pass multiple images for a gallery (chevrons + counter). Extended mode adds zoom controls and drag panning. `shadow` picks where the one tile-shadow token falls: `box` casts it from the tile rectangle, `content` from the image's own alpha, or `none`. The tile fill sits behind the image in both states: none by default, so cut-out art floats on the page, and any fill you set frames it instead."
   tokens={allTokens}
 >
   <VariantGroup name="imagelightbox" title="Image Lightbox" {states} {component}>

package/src/editor/docs/Docs.svelte

@@ -101,6 +101,7 @@
         { path: 'sketch-mode',         title: 'Sketch mode' },
         { path: 'themes-workflow',     title: 'Themes' },
         { path: 'where-themes-live',   title: 'Where themes live' },
+        { path: 'light-and-dark',      title: 'Light and dark' },
         { path: 'creating-components', title: 'Creating components' },
       ],
     },

package/src/editor/docs/chapters.ts

@@ -16,6 +16,7 @@ export const chapters: Chapter[] = [
   { id: 'sketch-mode',         title: 'Sketch mode' },
   { id: 'themes-workflow',     title: 'Themes' },
   { id: 'where-themes-live',   title: 'Where themes live' },
+  { id: 'light-and-dark',      title: 'Light and dark' },
   { id: 'creating-components', title: 'Creating components' },
 ];