@motion-proto/live-tokens 0.60.1 → 0.62.0

package/src/live-tokens/data/themes/sketchy.json

@@ -3179,6 +3179,7 @@
       "createdAt": "2026-05-26T02:03:38.863Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
       "aliases": {
+        "--imagelightbox-tile-surface": "--color-transparent",
         "--imagelightbox-tile-radius": "--radius-none",
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-1",
@@ -3542,7 +3543,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3571,7 +3572,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3600,7 +3601,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

package/src/live-tokens/data/themes/spring-meadow.json

@@ -3152,6 +3152,7 @@
       "createdAt": "2026-05-26T02:03:38.863Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--imagelightbox-tile-surface": "--color-transparent",
         "--imagelightbox-tile-radius": "--radius-3xl",
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-0",
@@ -3515,7 +3516,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3544,7 +3545,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3573,7 +3574,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

package/src/live-tokens/data/themes/sunset.json

@@ -3204,6 +3204,7 @@
       "createdAt": "2026-05-26T02:03:38.863Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--imagelightbox-tile-surface": "--color-transparent",
         "--imagelightbox-tile-radius": "--radius-3xl",
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-0",
@@ -3567,7 +3568,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3596,7 +3597,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3625,7 +3626,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

package/src/live-tokens/data/tokens.generated.css

@@ -347,3 +347,8 @@
   --font-mono: "fira-code", ui-monospace, "SF Mono", Menlo, Consolas, monospace, monospace;
   --font-editorial: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, sans-serif;
 }
+
+/* Page polarity, from --page-bg */
+:where(:root) {
+  color-scheme: dark;
+}

package/src/system/backdrop/backdrop.ts

@@ -0,0 +1,197 @@
+/**
+ * What paints behind a thing, and which way it leans.
+ *
+ * A theme is not light or dark by declaration — nothing in a saved theme
+ * records it — so polarity is either stated on the markup (`data-backdrop`) or
+ * measured from the colours that actually paint. Both answers arrive through
+ * `polarityOf`, and every consumer that used to hand-roll one of the two reads
+ * it from here.
+ */
+import { parseOklchCss, oklchToRgb255 } from '../internal/oklch';
+
+export type Polarity = 'light' | 'dark';
+export type ContrastColorToken = '--color-black' | '--color-white';
+
+export const BACKDROP_ATTRIBUTE = 'data-backdrop';
+
+/** Relative luminance at or above which a backdrop counts as light. Sits
+    between the palest shipped dark theme (~0.03) and the darkest light one
+    (~0.6), so no shipped look lands near the line. */
+export const LIGHT_BACKDROP = 0.2;
+
+/** A fill this see-through says nothing about what shows through it, so the
+    walk keeps looking up the tree. */
+const OPAQUE = 0.98;
+
+type Rgba = { r: number; g: number; b: number; a: number };
+
+const HEX_RE = /#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\b/gi;
+const OKLCH_RE = /oklch\(\s*[\d.]+%?\s+[\d.]+%?\s+[\d.]+(?:deg)?\s*(?:\/\s*([\d.]+%?)\s*)?\)/gi;
+const RGB_RE = /rgba?\(\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)(?:\s*[,/]\s*([\d.]+%?))?\s*\)/gi;
+/** Anything the parsers above miss — `color-mix()`, a named colour, `lab()`.
+    Carries no nested parens in any value a computed style hands back. */
+const EXOTIC_RE = /\b(?:color-mix|hwb|lab|lch|oklab|color)\([^()]*\)/gi;
+
+function channel(value: string): number {
+  const parsed = Number.parseFloat(value);
+  return value.endsWith('%') ? parsed * 2.55 : parsed;
+}
+
+function alpha(value: string | undefined): number {
+  if (value === undefined) return 1;
+  const parsed = Number.parseFloat(value);
+  return value.endsWith('%') ? parsed / 100 : parsed;
+}
+
+function parseHex(hex: string): Rgba {
+  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,
+  };
+}
+
+/** Every colour a background value names, gradient stops included. */
+export function colorsIn(background: string): Rgba[] {
+  const colors: Rgba[] = [];
+  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: number): number {
+  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 }: Rgba): number {
+  return 0.2126 * linearChannel(r) + 0.7152 * linearChannel(g) + 0.0722 * linearChannel(b);
+}
+
+const SEED = '#010203';
+let probe: CanvasRenderingContext2D | null | undefined;
+
+/** The browser as a colour parser: a 2D canvas resolves anything it renders,
+ *  including the `color-mix()` a computed style can still hand back, and
+ *  reports failure rather than resolving an unknown value to black. */
+function viaCanvas(value: string): Rgba | null {
+  if (typeof document === 'undefined') return null;
+  if (probe === undefined) {
+    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 };
+}
+
+/** Any CSS colour the browser can render, as `#rrggbb` — for consumers that
+ *  cannot read CSS themselves: a canvas, a WebGL uniform, an SVG attribute.
+ *  Null for a value that is not a colour, or is see-through enough that a flat
+ *  hex would lie about it. */
+export function cssColorToHex(value: string): string | null {
+  const color = viaCanvas(value.trim());
+  if (!color || color.a < OPAQUE) return null;
+  const packed = (Math.round(color.r) << 16) | (Math.round(color.g) << 8) | Math.round(color.b);
+  return `#${packed.toString(16).padStart(6, '0')}`;
+}
+
+/** Mean luminance of a background value, or null when it names no colour or
+ *  nothing opaque enough to hide what sits behind it. */
+export function backgroundLuminance(background: string): number | null {
+  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;
+}
+
+/** Which way a background value leans, or null when it names no opaque colour. */
+export function polarityOfBackground(background: string): Polarity | null {
+  const measured = backgroundLuminance(background);
+  if (measured === null) return null;
+  return measured >= LIGHT_BACKDROP ? 'light' : 'dark';
+}
+
+/**
+ * Pick the invariant black/white token with the stronger minimum contrast
+ * against every colour in a solid or gradient background. Alpha is ignored:
+ * the caller passes an authored value, not a computed one.
+ */
+export function contrastTokenForBackground(background: string): ContrastColorToken {
+  const colors = colorsIn(background);
+  if (colors.length === 0) return '--color-white';
+  const luminances = colors.map(luminance);
+  const blackMinimum = Math.min(...luminances.map((value) => (value + 0.05) / 0.05));
+  const whiteMinimum = Math.min(...luminances.map((value) => 1.05 / (value + 0.05)));
+  return blackMinimum >= whiteMinimum ? '--color-black' : '--color-white';
+}
+
+/** Elements a watcher stamped. Its own stamp is an answer, not a declaration,
+ *  so the next measurement must not read it back as one. */
+const stamped = new WeakSet<Element>();
+
+export function markStamped(el: Element): void {
+  stamped.add(el);
+}
+
+export function clearStamped(el: Element): void {
+  stamped.delete(el);
+}
+
+/** The polarity the markup states: the nearest `data-backdrop` on or above the
+ *  element that a watcher did not write. */
+export function declaredPolarity(el: Element | null): Polarity | null {
+  for (let node: Element | null = el; node; node = node.parentElement) {
+    if (stamped.has(node)) continue;
+    const stated = node.getAttribute?.(BACKDROP_ATTRIBUTE);
+    if (stated === 'light' || stated === 'dark') return stated;
+  }
+  return null;
+}
+
+/** Mean luminance of whatever actually paints behind `el` — the nearest
+ *  ancestor with an opaque fill, averaged across its gradient stops, falling
+ *  back to the theme's page canvas. */
+export function backdropLuminance(el: Element | null): number {
+  if (typeof document === 'undefined') return 0;
+  for (let node: Element | null = el ?? document.body; node; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    const measured = backgroundLuminance(`${style.backgroundImage} ${style.backgroundColor}`);
+    if (measured !== null) return measured;
+  }
+  const page = getComputedStyle(document.documentElement).getPropertyValue('--page-bg');
+  return backgroundLuminance(page) ?? 0;
+}
+
+/** Which way the backdrop behind `el` leans. A `data-backdrop` on or above it
+ *  is the answer; otherwise the paint is measured. */
+export function polarityOf(el: Element | null): Polarity {
+  return declaredPolarity(el) ?? (backdropLuminance(el) >= LIGHT_BACKDROP ? 'light' : 'dark');
+}
+
+export const isLightBackdrop = (el: Element | null): boolean => polarityOf(el) === 'light';
+
+/** The black/white token that reads against `el`'s backdrop. */
+export const contrastTokenFor = (el: Element | null): ContrastColorToken =>
+  polarityOf(el) === 'light' ? '--color-black' : '--color-white';

package/src/system/backdrop/index.ts

@@ -0,0 +1,16 @@
+export {
+  BACKDROP_ATTRIBUTE,
+  LIGHT_BACKDROP,
+  backdropLuminance,
+  backgroundLuminance,
+  contrastTokenFor,
+  cssColorToHex,
+  contrastTokenForBackground,
+  declaredPolarity,
+  isLightBackdrop,
+  polarityOf,
+  polarityOfBackground,
+  type ContrastColorToken,
+  type Polarity,
+} from './backdrop';
+export { backdrop, syncDocumentBackdrop, watchBackdrop, type BackdropOptions } from './watch';

package/src/system/backdrop/watch.ts

@@ -0,0 +1,139 @@
+/**
+ * Keeping a stamp current.
+ *
+ * A page's polarity moves when the theme changes, and the editor changes a
+ * theme by writing inline custom properties on `:root` — no reload, no class
+ * flip. One observer watches for that and tells every live watcher to measure
+ * again, so a consumer never writes its own.
+ */
+import {
+  BACKDROP_ATTRIBUTE,
+  clearStamped,
+  markStamped,
+  polarityOf,
+  polarityOfBackground,
+  type Polarity,
+} from './backdrop';
+
+export interface BackdropOptions {
+  /** Called with each new answer, including the first. */
+  onChange?: (polarity: Polarity) => void;
+  /** Write `data-backdrop` on the element, so CSS can key on it and
+      `light-dark()` inside it resolves the right half. Default true. */
+  stamp?: boolean;
+}
+
+type Watcher = () => void;
+
+const watchers = new Set<Watcher>();
+let themeObserver: MutationObserver | null = null;
+let resizeBound = false;
+
+function notify(): void {
+  for (const watcher of watchers) watcher();
+}
+
+function startListening(): void {
+  if (typeof document === 'undefined') return;
+  if (!themeObserver) {
+    // The editor writes the live theme as inline vars on <html>; a switch to a
+    // different stylesheet lands in <head>.
+    themeObserver = new MutationObserver(notify);
+    themeObserver.observe(document.documentElement, { attributeFilter: ['style', 'class'] });
+    themeObserver.observe(document.head, { childList: true });
+  }
+  if (!resizeBound) {
+    window.addEventListener('resize', notify, { passive: true });
+    resizeBound = true;
+  }
+}
+
+function stopListening(): void {
+  if (watchers.size) return;
+  themeObserver?.disconnect();
+  themeObserver = null;
+  if (resizeBound) {
+    window.removeEventListener('resize', notify);
+    resizeBound = false;
+  }
+}
+
+/**
+ * Track the polarity behind `el` until the returned function is called. A
+ * `data-backdrop` stated on or above the element wins over measurement, which
+ * is what lets a section declare a tone the paint cannot show — art directed
+ * over a photograph, or a band whose fill has not rendered yet.
+ */
+export function watchBackdrop(el: Element, options: BackdropOptions = {}): () => void {
+  const { onChange, stamp = true } = options;
+  let last: Polarity | null = null;
+
+  const measure = () => {
+    const polarity = polarityOf(el);
+    if (polarity === last) return;
+    last = polarity;
+    if (stamp) {
+      markStamped(el);
+      el.setAttribute(BACKDROP_ATTRIBUTE, polarity);
+    }
+    onChange?.(polarity);
+  };
+
+  watchers.add(measure);
+  startListening();
+  measure();
+
+  return () => {
+    watchers.delete(measure);
+    if (stamp) {
+      clearStamped(el);
+      el.removeAttribute(BACKDROP_ATTRIBUTE);
+    }
+    stopListening();
+  };
+}
+
+/** Svelte action: `<section use:backdrop>` stamps the element and keeps the
+ *  stamp current. Pass `{ onChange }` when JS needs the answer too. */
+export function backdrop(el: Element, options: BackdropOptions = {}) {
+  let stop = watchBackdrop(el, options);
+  return {
+    update(next: BackdropOptions = {}) {
+      stop();
+      stop = watchBackdrop(el, next);
+    },
+    destroy() {
+      stop();
+    },
+  };
+}
+
+/**
+ * Stamp `<html>` from the theme's page canvas, so a rule can key on
+ * `[data-backdrop='dark']` anywhere on the page and a section that declares its
+ * own tone still overrides it. Call once at boot; returns a stop function.
+ */
+export function syncDocumentBackdrop(): () => void {
+  if (typeof document === 'undefined') return () => {};
+  const root = document.documentElement;
+  const stated = root.getAttribute(BACKDROP_ATTRIBUTE);
+  // A root the page states for itself is the page's answer; leave it alone.
+  if (stated === 'light' || stated === 'dark') return () => {};
+  const measure = () => {
+    const page = getComputedStyle(root).getPropertyValue('--page-bg');
+    const polarity = polarityOfBackground(page);
+    if (polarity) root.setAttribute(BACKDROP_ATTRIBUTE, polarity);
+  };
+  // The root's own stamp is an answer, not a declaration — without this every
+  // measurement below it would short-circuit on the page's polarity and no
+  // local band could ever read as its own.
+  markStamped(root);
+  watchers.add(measure);
+  startListening();
+  measure();
+  return () => {
+    watchers.delete(measure);
+    clearStamped(root);
+    stopListening();
+  };
+}

package/src/system/components/Card.svelte

@@ -3,6 +3,9 @@
     icon?: string;
     iconColor?: string;
     title?: string;
+    /** `bare` drops the header. The frame and body keep every token the default
+        variant uses, so padding, stroke and fill stay editable. */
+    variant?: 'default' | 'bare';
     size?: 'default' | 'compact';
     /** false → the card stops pinning body typography so the consumer fully owns slotted content's styling. */
     prose?: boolean;
@@ -20,6 +23,7 @@
     icon = '',
     iconColor = 'var(--text-secondary)',
     title = '',
+    variant = 'default',
     size = 'default',
     prose = true,
     flush = false,
@@ -35,16 +39,25 @@
   let hoverShadow = $derived(
     hover === undefined ? undefined : hover ? 'var(--card-hover-shadow)' : 'var(--card-default-shadow)',
   );
+
+  let showHeader = $derived(variant !== 'bare' && Boolean(icon || title));
+
+  $effect(() => {
+    if (import.meta.env.DEV && variant === 'default' && !icon && !title) {
+      console.warn('[live-tokens] <Card> has no icon or title. Use variant="bare" to declare a headerless card.');
+    }
+  });
 </script>
 
 <div
   class="card {className}"
+  class:bare={variant === 'bare'}
   class:compact={size === 'compact'}
   style:--card-color={iconColor}
   style:--card-hover-border-active={hoverBorder}
   style:--card-hover-shadow-active={hoverShadow}
 >
-  {#if icon || title}
+  {#if showHeader}
     <div class="card-header">
       {#if icon}
         <i class="{icon} card-icon"></i>
@@ -68,17 +81,22 @@
     --card-default-border: var(--border-neutral);
     --card-default-border-width: var(--border-width-1);
     --card-default-radius: var(--radius-lg);
+    /* Every side tracks its base. A declared side always beats the fallback
+       themed-padding emits, so naming a literal step here left the base token
+       inert: merging split padding back to one value cleared the side aliases
+       and the card kept the old geometry. The asymmetry is a themed choice now,
+       carried by per-side aliases that override these outright. */
     --card-default-header-padding: var(--space-16);
-    --card-default-header-padding-top: var(--space-12);
-    --card-default-header-padding-right: var(--space-20);
-    --card-default-header-padding-bottom: var(--space-12);
-    --card-default-header-padding-left: var(--space-20);
+    --card-default-header-padding-top: var(--card-default-header-padding);
+    --card-default-header-padding-right: var(--card-default-header-padding);
+    --card-default-header-padding-bottom: var(--card-default-header-padding);
+    --card-default-header-padding-left: var(--card-default-header-padding);
     --card-default-header-gap: var(--space-8);
     --card-default-body-padding: var(--space-16);
-    --card-default-body-padding-top: var(--space-16);
-    --card-default-body-padding-right: var(--space-20);
-    --card-default-body-padding-bottom: var(--space-16);
-    --card-default-body-padding-left: var(--space-20);
+    --card-default-body-padding-top: var(--card-default-body-padding);
+    --card-default-body-padding-right: var(--card-default-body-padding);
+    --card-default-body-padding-bottom: var(--card-default-body-padding);
+    --card-default-body-padding-left: var(--card-default-body-padding);
     --card-default-shadow: var(--shadow-sm);
     --card-default-blur: var(--blur-none);
     --card-default-header-surface: color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent);

package/src/system/components/FloatingTokenTags.svelte

@@ -35,7 +35,7 @@
 <script lang="ts">
   import MenuSelect from './MenuSelect.svelte';
   import { SvelteMap } from 'svelte/reactivity';
-  import { contrastTokenForBackground } from '../internal/backgroundContrast';
+  import { contrastTokenForBackground } from '../backdrop';
   // `.ftt-tag` is hand-rolled (not Badge) so editing badge-* tokens doesn't
   // repaint the playground. The dropdown uses MenuSelect on purpose.
   import './FloatingTokenTags.css';

package/src/system/components/ImageLightbox.svelte

@@ -630,7 +630,7 @@
       class="image-lightbox-stage"
       class:shadow-box={shadow === 'box'}
       class:shadow-content={shadow === 'content'}
-      role="presentation"
+        role="presentation"
       tabindex="-1"
       onclick={onStageClick}
       onpointerdown={onPointerDown}
@@ -728,7 +728,9 @@
 
 <style>
   :global(:root) {
-    /* thumbnail (closed inline) + animated modal stage */
+    /* thumbnail (closed inline) + animated modal stage; the fill is the
+       thumbnail's alone — the open stage rides the overlay */
+    --imagelightbox-tile-surface:          var(--color-transparent);
     --imagelightbox-tile-radius:           var(--radius-2xl);
     --imagelightbox-tile-border:           var(--color-transparent);
     --imagelightbox-tile-border-width:     var(--border-width-0);
@@ -759,7 +761,7 @@
     cursor: zoom-in;
     border: var(--imagelightbox-tile-border-width) solid var(--imagelightbox-tile-border);
     border-radius: var(--imagelightbox-tile-radius);
-    background: transparent;
+    background: var(--imagelightbox-tile-surface);
     overflow: hidden;
     transition: transform 250ms ease;
   }
@@ -812,13 +814,15 @@
     border: 0;
   }
 
+  /* No tile fill here: the open stage sits on the near-opaque overlay, which
+     already backs transparent art. Painting the fill too would band the scrim
+     wherever the image's aspect leaves the stage box unfilled. */
   .image-lightbox-stage {
     position: fixed;
     z-index: var(--z-modal);
     cursor: zoom-out;
     border: var(--imagelightbox-tile-border-width) solid var(--imagelightbox-tile-border);
     border-radius: var(--imagelightbox-tile-radius);
-    background: transparent;
   }
 
   .image-lightbox-clip {

package/src/system/components/SectionDivider.svelte

@@ -243,7 +243,7 @@
     --sectiondivider-lg-description: var(--text-alternate);
     --sectiondivider-lg-eyebrow: var(--text-brand);
     --sectiondivider-lg-border: var(--color-transparent);
-    --sectiondivider-lg-title-outline-color: var(--surface-canvas-lowest);
+    --sectiondivider-lg-title-outline-color: var(--color-transparent);
     --sectiondivider-lg-hairline-color: var(--border-brand-medium);
 
     /* Medium */
@@ -274,7 +274,7 @@
     --sectiondivider-md-description: var(--text-secondary);
     --sectiondivider-md-eyebrow: var(--text-tertiary);
     --sectiondivider-md-border: var(--color-transparent);
-    --sectiondivider-md-title-outline-color: var(--surface-accent-lowest);
+    --sectiondivider-md-title-outline-color: var(--color-transparent);
     --sectiondivider-md-hairline-color: var(--border-brand-medium);
 
     /* Small */
@@ -305,7 +305,7 @@
     --sectiondivider-sm-description: var(--text-secondary);
     --sectiondivider-sm-eyebrow: var(--text-tertiary);
     --sectiondivider-sm-border: var(--color-transparent);
-    --sectiondivider-sm-title-outline-color: color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent);
+    --sectiondivider-sm-title-outline-color: var(--color-transparent);
     --sectiondivider-sm-hairline-color: color-mix(in srgb, var(--border-brand-medium) 50%, transparent);
 
     /* Intrinsic defaults. These keys cascade to `:root` via the editor's

package/src/system/components/SegmentedControl.svelte

@@ -152,25 +152,27 @@
      icon size) all read through these default names, so rebinding them
      here is enough — no per-state small token explosion. Per-side padding
      overrides are rebound too so split-padding edits at small don't leak
-     through to default size. Font-weight and color are intentionally NOT
+     through to default size; each carries the same fallback themed-padding
+     emits, so merging the small padding back to one value leaves the base
+     token in charge instead of binding to a name nothing sets. Font-weight and color are intentionally NOT
      rebound: weight differences are state-driven (selected = semibold),
      colors are state-driven too. */
   .segmented-control.small {
     --segmentedcontrol-bar-padding: var(--segmentedcontrol-bar-small-padding);
-    --segmentedcontrol-bar-padding-top: var(--segmentedcontrol-bar-small-padding-top);
-    --segmentedcontrol-bar-padding-right: var(--segmentedcontrol-bar-small-padding-right);
-    --segmentedcontrol-bar-padding-bottom: var(--segmentedcontrol-bar-small-padding-bottom);
-    --segmentedcontrol-bar-padding-left: var(--segmentedcontrol-bar-small-padding-left);
+    --segmentedcontrol-bar-padding-top: var(--segmentedcontrol-bar-small-padding-top, var(--segmentedcontrol-bar-small-padding));
+    --segmentedcontrol-bar-padding-right: var(--segmentedcontrol-bar-small-padding-right, var(--segmentedcontrol-bar-small-padding));
+    --segmentedcontrol-bar-padding-bottom: var(--segmentedcontrol-bar-small-padding-bottom, var(--segmentedcontrol-bar-small-padding));
+    --segmentedcontrol-bar-padding-left: var(--segmentedcontrol-bar-small-padding-left, var(--segmentedcontrol-bar-small-padding));
     --segmentedcontrol-bar-radius: var(--segmentedcontrol-bar-small-radius);
 
     --segmentedcontrol-divider-inset: var(--segmentedcontrol-small-divider-inset);
     --segmentedcontrol-divider-thickness: var(--segmentedcontrol-small-divider-thickness);
 
     --segmentedcontrol-option-padding: var(--segmentedcontrol-option-small-padding);
-    --segmentedcontrol-option-padding-top: var(--segmentedcontrol-option-small-padding-top);
-    --segmentedcontrol-option-padding-right: var(--segmentedcontrol-option-small-padding-right);
-    --segmentedcontrol-option-padding-bottom: var(--segmentedcontrol-option-small-padding-bottom);
-    --segmentedcontrol-option-padding-left: var(--segmentedcontrol-option-small-padding-left);
+    --segmentedcontrol-option-padding-top: var(--segmentedcontrol-option-small-padding-top, var(--segmentedcontrol-option-small-padding));
+    --segmentedcontrol-option-padding-right: var(--segmentedcontrol-option-small-padding-right, var(--segmentedcontrol-option-small-padding));
+    --segmentedcontrol-option-padding-bottom: var(--segmentedcontrol-option-small-padding-bottom, var(--segmentedcontrol-option-small-padding));
+    --segmentedcontrol-option-padding-left: var(--segmentedcontrol-option-small-padding-left, var(--segmentedcontrol-option-small-padding));
     --segmentedcontrol-option-gap: var(--segmentedcontrol-option-small-gap);
 
     /* Icon size has a single source-of-truth token now; text size/line-height