@motion-proto/live-tokens 0.68.1 → 0.70.0

package/dist-plugin/migrateData/index.cjs

@@ -876,6 +876,106 @@ var componentMigration_2026_08_15_lineHeightScaleRename = {
   apply: renameValues
 };
 
+// src/editor/core/themes/migrations/2026-09-01-scrim-rename.ts
+var RENAMED2 = {
+  "--overlay-low": "--scrim-low",
+  "--overlay": "--scrim",
+  "--overlay-high": "--scrim-high"
+};
+var RENAMED_COMPONENT_KEYS = {
+  "--dialog-overlay-surface": "--dialog-scrim-surface"
+};
+var colorsAndTypeMigration_2026_09_01_scrimRename = {
+  id: "2026-09-01-scrim-rename-theme",
+  fromVersion: 5,
+  toVersion: 6,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMED2[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+var componentMigration_2026_09_01_scrimRename = {
+  id: "2026-09-01-scrim-rename-component",
+  fromVersion: 21,
+  toVersion: 22,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMED_COMPONENT_KEYS[key] ?? key] = RENAMED2[value] ?? value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-01-tint-rename.ts
+var RENAMED3 = {
+  "--hover-low": "--tint-low",
+  "--hover": "--tint",
+  "--hover-high": "--tint-high"
+};
+var colorsAndTypeMigration_2026_09_01_tintRename = {
+  id: "2026-09-01-tint-rename-theme",
+  fromVersion: 6,
+  toVersion: 7,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) out[RENAMED3[key] ?? key] = value;
+    return out;
+  }
+};
+var componentMigration_2026_09_01_tintRename = {
+  id: "2026-09-01-tint-rename-component",
+  fromVersion: 22,
+  toVersion: 23,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) out[key] = RENAMED3[value] ?? value;
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-01-tabbar-active-tint.ts
+var componentMigration_2026_09_01_tabbarActiveTint = {
+  id: "2026-09-01-tabbar-active-tint",
+  fromVersion: 23,
+  toVersion: 24,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "tabbar") return { ...rawVars };
+    const out = { ...rawVars };
+    if (out["--tabbar-active-surface"] === "--scrim-low") {
+      out["--tabbar-active-surface"] = "--tint-low";
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-01-gate-suffix-enabled.ts
+var RENAMED4 = {
+  "--card-hover-border-active": "--card-hover-border-enabled",
+  "--card-hover-shadow-active": "--card-hover-shadow-enabled",
+  "--image-zoom-hover": "--image-zoom-enabled",
+  "--image-grow-hover": "--image-grow-enabled"
+};
+var componentMigration_2026_09_01_gateSuffixEnabled = {
+  id: "2026-09-01-gate-suffix-enabled",
+  fromVersion: 24,
+  toVersion: 25,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) out[RENAMED4[key] ?? key] = value;
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -903,7 +1003,13 @@ var MIGRATIONS = [
   componentMigration_2026_05_29_toggleDeriveTrackFromThumb,
   colorsAndTypeMigration_2026_08_13_dropLegacyShapeSpaceKeys,
   colorsAndTypeMigration_2026_08_15_lineHeightScaleRename,
-  componentMigration_2026_08_15_lineHeightScaleRename
+  componentMigration_2026_08_15_lineHeightScaleRename,
+  colorsAndTypeMigration_2026_09_01_scrimRename,
+  componentMigration_2026_09_01_scrimRename,
+  colorsAndTypeMigration_2026_09_01_tintRename,
+  componentMigration_2026_09_01_tintRename,
+  componentMigration_2026_09_01_tabbarActiveTint,
+  componentMigration_2026_09_01_gateSuffixEnabled
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/migrateData/index.js

@@ -7,10 +7,10 @@ import {
   normalizeTheme,
   planLegacyRenames,
   versionedFileResourceServer
-} from "../chunk-2UX6EVVA.js";
+} from "../chunk-2YNERPXY.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-NE6N66EE.js";
+} from "../chunk-GPIBU44G.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -603,6 +603,42 @@ var tokensCssMigration_2026_08_27_editorialLargeSteps = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-09-01-scrim-rename.ts
+var RENAMES2 = [
+  ["--overlay-low", "--scrim-low"],
+  ["--overlay-high", "--scrim-high"],
+  ["--overlay", "--scrim"]
+];
+var tokensCssMigration_2026_09_01_scrimRename = {
+  id: "2026-09-01-scrim-rename",
+  kind: "breaking",
+  description: "Rename --overlay-{low,base,high} to --scrim-*; a scrim dims what is behind it",
+  apply(css) {
+    let out = css;
+    for (const [oldName, newName] of RENAMES2) out = renameToken(out, oldName, newName);
+    return out;
+  }
+};
+
+// vite-plugin/tokensCssMigrations/migrations/2026-09-01-tint-scale.ts
+var ENTRIES = [
+  { name: "--tint-low", value: "rgba(255, 255, 255, 0.05)" },
+  { name: "--tint", value: "rgba(255, 255, 255, 0.1)" },
+  { name: "--tint-high", value: "rgba(255, 255, 255, 0.15)" }
+];
+var tokensCssMigration_2026_09_01_tintScale = {
+  id: "2026-09-01-tint-scale",
+  kind: "additive",
+  description: "Add the --tint-* scale; a tint shades the surface it sits on",
+  apply(css) {
+    return ensureScale(css, {
+      entries: ENTRIES,
+      sectionComment: "Tints \u2014 translucent washes that shade the surface they sit on",
+      anchorPrefixes: ["--scrim", "--overlay"]
+    });
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -651,7 +687,9 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_26_gradientStops,
   tokensCssMigration_2026_08_27_backdropPolarity,
   tokensCssMigration_2026_08_27_editorialSizeSteps,
-  tokensCssMigration_2026_08_27_editorialLargeSteps
+  tokensCssMigration_2026_08_27_editorialLargeSteps,
+  tokensCssMigration_2026_09_01_scrimRename,
+  tokensCssMigration_2026_09_01_tintScale
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/tokensCssMigrations/index.js

@@ -13,7 +13,7 @@ import {
   runTokensCssMigrations,
   semverBumpType,
   validateTokensCss
-} from "../chunk-ZHPX7ZYQ.js";
+} from "../chunk-RFVYPNRO.js";
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.68.1",
+  "version": "0.70.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -144,6 +144,7 @@
     "check:overlay-portal": "node scripts/check-overlay-portal.mjs",
     "check:editor-font-isolation": "node scripts/check-editor-font-isolation.mjs",
     "check:component-defaults": "node scripts/sync-component-defaults.mjs --check",
+    "check:pages": "node bin/cli.mjs check-page --strict",
     "check:production-is-default": "node scripts/check-production-is-default.mjs",
     "check:docs-content": "node scripts/sync-docs.mjs --check",
     "check:token-contract": "node scripts/check-token-contract.mjs",
@@ -157,7 +158,7 @@
     "collapse:theme": "node scripts/collapse-theme-to-default.mjs",
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
-    "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:skill-atlas && npm run check:smoke-install && npm run check:smoke-create"
+    "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:pages && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:skill-atlas && npm run check:smoke-install && npm run check:smoke-create"
   },
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0",

package/src/app/site.css

@@ -71,7 +71,7 @@ p {
   font-size: var(--body-md-font-size);
   color: var(--text-secondary);
   line-height: var(--body-md-line-height);
-  margin: 0 0 14px;
+  margin: 0 0 var(--space-16);
 }
 
 p:last-child {
@@ -142,15 +142,15 @@ ol li::marker {
 
 hr {
   border: none;
-  border-top: 1px solid var(--border-neutral-faint);
+  border-top: var(--border-width-1) solid var(--border-neutral-faint);
   margin: var(--space-32) 0;
 }
 
 blockquote {
   margin: var(--space-16) 0;
   padding: var(--space-12) var(--space-20);
-  border: 1px solid var(--color-brand-500);
-  border-left: 4px solid var(--color-brand-500);
+  border: var(--border-width-1) solid var(--color-brand-500);
+  border-left: var(--border-width-4) solid var(--color-brand-500);
   background: var(--surface-neutral-high);
   border-radius: 0 var(--radius-md) var(--radius-md) 0;
   color: var(--text-secondary);

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildSiblings } from './scaffolding/siblings';
-  import type { Token } from './scaffolding/types';
+  import type { Token, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'button';
 
@@ -101,14 +101,34 @@
   );
 
   const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+
+  // The hover tint is off unless a project turns it on: the gate holds a
+  // transparent layer, a no-op, until it holds the tint itself.
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'shimmer',
+      variants: ['default'],
+      variable: () => '--button-shimmer',
+      values: ['var(--shimmer-on)', 'var(--shimmer-off)'],
+      default: { default: 'var(--shimmer-on)' },
+    },
+    {
+      key: 'hover-tint',
+      variants: ['default'],
+      variable: () => '--button-hover-tint-enabled',
+      values: ['var(--color-transparent)', 'var(--button-hover-tint)'],
+      default: { default: 'var(--color-transparent)' },
+    },
+  ];
 </script>
 
 <script lang="ts">
   import Button from '../../system/components/Button.svelte';
   import Toggle from '../ui/Toggle.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState, setComponentAlias } from '../core/store/editorStore';
+  import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
   let shimmerRef = $derived($editorState.components.button?.aliases['--button-shimmer']);
@@ -118,12 +138,49 @@
     setComponentAlias('button', '--button-shimmer', { kind: 'token', name: checked ? '--shimmer-on' : '--shimmer-off' });
   }
 
+  // One switch. Turning the tint on also stands each hover surface down to its
+  // own base, so hover is the tint alone rather than a swap wearing a wash.
+  // Written as aliases rather than gated in CSS: a component token's value is
+  // substituted at :root, so it can never name a per-variant private var.
+  // Off clears the overrides, returning each surface to its shipped default.
+  const HOVER_SWAPS: readonly (readonly [hover: string, base: string])[] = [
+    ['--button-primary-hover-surface', '--button-primary-surface'],
+    ['--button-secondary-hover-surface', '--button-secondary-surface'],
+    ['--button-outline-hover-surface', '--button-outline-surface'],
+    ['--button-success-hover-surface', '--button-success-surface'],
+    ['--button-danger-hover-surface', '--button-danger-surface'],
+    ['--button-warning-hover-surface', '--button-warning-surface'],
+  ];
+  const TINT_ON = 'var(--button-hover-tint)';
+  const TINT_OFF = 'var(--color-transparent)';
+
+  let tintOn = $derived.by(() => {
+    const ref = $editorState.components.button?.aliases['--button-hover-tint-enabled'];
+    return (ref?.kind === 'literal' ? ref.value : TINT_OFF) === TINT_ON;
+  });
+
+  function setTintOn(checked: boolean) {
+    setComponentAlias('button', '--button-hover-tint-enabled', {
+      kind: 'literal',
+      value: checked ? TINT_ON : TINT_OFF,
+    });
+    for (const [hover, base] of HOVER_SWAPS) {
+      if (checked) setComponentAlias('button', hover, { kind: 'token', name: base });
+      else clearComponentAlias('button', hover);
+    }
+  }
+
   let previewSize = $state<'default' | 'small'>('default');
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
   let visibleVariantStates = $derived((v: Variant) => Object.fromEntries(
-    Object.entries(variantStates(v)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+    Object.entries(variantStates(v)).map(([name, list]) => [
+      name,
+      withLinkedDisabled(list, linked.varSet).map((t) =>
+        tintOn && t.variable.endsWith('-hover-surface') ? { ...t, disabled: true } : t,
+      ),
+    ]),
   ) as Record<string, Token[]>);
 
   let visibleSmallStates = $derived(Object.fromEntries(
@@ -158,7 +215,17 @@
       >
         {#snippet extraPropertyRows(stateName)}
           {#if stateName === 'hover'}
-            <div class="property-row">
+            <div class="property-row" data-token-variables="--button-hover-tint-enabled">
+              <span class="property-label">tint layer</span>
+              <Toggle checked={tintOn} onchange={setTintOn} />
+            </div>
+            {#if tintOn}
+              <div class="property-row">
+                <span class="property-label">tint color</span>
+                <UIPaletteSelector variable="--button-hover-tint" {component} showNone={false} />
+              </div>
+            {/if}
+            <div class="property-row" data-token-variables="--button-shimmer">
               <span class="property-label">hover shimmer</span>
               <Toggle checked={shimmerEnabled} onchange={handleShimmerChange} />
             </div>

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

@@ -92,14 +92,14 @@
     {
       key: 'hover-border',
       variants: ['default'],
-      variable: () => '--card-hover-border-active',
+      variable: () => '--card-hover-border-enabled',
       values: [HOVER_OFF.border, HOVER_ON.border],
       default: { default: HOVER_OFF.border },
     },
     {
       key: 'hover-shadow',
       variants: ['default'],
-      variable: () => '--card-hover-shadow-active',
+      variable: () => '--card-hover-shadow-enabled',
       values: [HOVER_OFF.shadow, HOVER_ON.shadow],
       default: { default: HOVER_OFF.shadow },
     },
@@ -122,15 +122,15 @@
     ($editorState.components[component]?.aliases ?? {}) as Record<string, import('../core/store/editorTypes').CssVarRef>,
   );
   let hoverEnabled = $derived.by(() => {
-    const ref = aliases['--card-hover-border-active'];
+    const ref = aliases['--card-hover-border-enabled'];
     const raw = ref?.kind === 'literal' ? ref.value : HOVER_OFF.border;
     return raw === HOVER_ON.border;
   });
 
   function setHoverEnabled(checked: boolean) {
     const v = checked ? HOVER_ON : HOVER_OFF;
-    setComponentAlias(component, '--card-hover-border-active', { kind: 'literal', value: v.border });
-    setComponentAlias(component, '--card-hover-shadow-active', { kind: 'literal', value: v.shadow });
+    setComponentAlias(component, '--card-hover-border-enabled', { kind: 'literal', value: v.border });
+    setComponentAlias(component, '--card-hover-shadow-enabled', { kind: 'literal', value: v.shadow });
   }
 </script>
 
@@ -146,7 +146,7 @@
       {#if stateName === 'hover'}
         <div
           class="hover-control"
-          data-token-variables="--card-hover-border-active --card-hover-shadow-active"
+          data-token-variables="--card-hover-border-enabled --card-hover-shadow-enabled"
         >
           <label class="hover-enable">
             <input type="checkbox" checked={hoverEnabled} onchange={(e) => setHoverEnabled(e.currentTarget.checked)} />

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

@@ -12,11 +12,11 @@
   const DEFAULT_CONFIRM: ButtonVariant = 'primary';
   const DEFAULT_CANCEL: ButtonVariant = 'outline';
 
-  // Frame-level tokens (the dialog box itself + overlay + header + body + footer + close icon).
+  // Frame-level tokens (the dialog box itself + scrim + header + body + footer + close icon).
   // Button styling lives in Button.svelte — the dialog only owns its own chrome.
   const frameStates: Record<string, Token[]> = {
-    overlay: [
-      { label: 'backdrop color', groupKey: 'surface', variable: '--dialog-overlay-surface' },
+    scrim: [
+      { label: 'scrim color', groupKey: 'surface', variable: '--dialog-scrim-surface' },
     ],
     dialog: [
       { label: 'surface color', variable: '--dialog-surface' },

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildSiblings } from './scaffolding/siblings';
-  import type { Token } from './scaffolding/types';
+  import type { Token, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'iconbutton';
 
@@ -92,21 +92,72 @@
     danger: 'fas fa-trash',
     warning: 'fas fa-triangle-exclamation',
   };
+
+  // The hover tint is off unless a project turns it on: the gate holds a
+  // transparent layer, a no-op, until it holds the tint itself.
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'hover-tint',
+      variants: ['default'],
+      variable: () => '--iconbutton-hover-tint-enabled',
+      values: ['var(--color-transparent)', 'var(--iconbutton-hover-tint)'],
+      default: { default: 'var(--color-transparent)' },
+    },
+  ];
 </script>
 
 <script lang="ts">
   import IconButton from '../../system/components/IconButton.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../core/store/editorStore';
+  import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import Toggle from '../ui/Toggle.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+
+  // One switch. Turning the tint on also stands each hover surface down to its
+  // own base, so hover is the tint alone rather than a swap wearing a wash.
+  // Written as aliases rather than gated in CSS: a component token's value is
+  // substituted at :root, so it can never name a per-variant private var.
+  // Off clears the overrides, returning each surface to its shipped default.
+  const HOVER_SWAPS: readonly (readonly [hover: string, base: string])[] = [
+    ['--iconbutton-primary-hover-surface', '--iconbutton-primary-surface'],
+    ['--iconbutton-secondary-hover-surface', '--iconbutton-secondary-surface'],
+    ['--iconbutton-outline-hover-surface', '--iconbutton-outline-surface'],
+    ['--iconbutton-success-hover-surface', '--iconbutton-success-surface'],
+    ['--iconbutton-danger-hover-surface', '--iconbutton-danger-surface'],
+    ['--iconbutton-warning-hover-surface', '--iconbutton-warning-surface'],
+  ];
+  const TINT_ON = 'var(--iconbutton-hover-tint)';
+  const TINT_OFF = 'var(--color-transparent)';
+
+  let tintOn = $derived.by(() => {
+    const ref = $editorState.components.iconbutton?.aliases['--iconbutton-hover-tint-enabled'];
+    return (ref?.kind === 'literal' ? ref.value : TINT_OFF) === TINT_ON;
+  });
+
+  function setTintOn(checked: boolean) {
+    setComponentAlias('iconbutton', '--iconbutton-hover-tint-enabled', {
+      kind: 'literal',
+      value: checked ? TINT_ON : TINT_OFF,
+    });
+    for (const [hover, base] of HOVER_SWAPS) {
+      if (checked) setComponentAlias('iconbutton', hover, { kind: 'token', name: base });
+      else clearComponentAlias('iconbutton', hover);
+    }
+  }
 
   let previewSize = $state<'default' | 'small'>('default');
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
   let visibleVariantStates = $derived((v: Variant) => Object.fromEntries(
-    Object.entries(variantStates(v)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+    Object.entries(variantStates(v)).map(([name, list]) => [
+      name,
+      withLinkedDisabled(list, linked.varSet).map((t) =>
+        tintOn && t.variable.endsWith('-hover-surface') ? { ...t, disabled: true } : t,
+      ),
+    ]),
   ) as Record<string, Token[]>);
 
   let visibleSmallStates = $derived(Object.fromEntries(
@@ -139,6 +190,20 @@
         siblings={buildSiblings(variants, v, variantStates)}
         previewActions={sizeAction}
       >
+        {#snippet extraPropertyRows(stateName)}
+          {#if stateName === 'hover'}
+            <div class="property-row" data-token-variables="--iconbutton-hover-tint-enabled">
+              <span class="property-label">tint layer</span>
+              <Toggle checked={tintOn} onchange={setTintOn} />
+            </div>
+            {#if tintOn}
+              <div class="property-row">
+                <span class="property-label">tint color</span>
+                <UIPaletteSelector variable="--iconbutton-hover-tint" {component} showNone={false} />
+              </div>
+            {/if}
+          {/if}
+        {/snippet}
         {#snippet children({ activeState })}
           {@const forceClass = activeState === 'hover' ? 'force-hover' : activeState === 'active' ? 'force-active' : ''}
           {@const isDisabled = activeState === 'disabled'}

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

@@ -16,22 +16,22 @@
 
   export const allTokens: Token[] = Object.values(states).flat();
 
-  // Global zoom defaults. `none` = off; `scale(...)` = on. `--image-zoom-hover` scales the
-  // content within the masked frame (overflow scaling); `--image-grow-hover` scales the whole
+  // Global zoom defaults. `none` = off; `scale(...)` = on. `--image-zoom-enabled` scales the
+  // content within the masked frame (overflow scaling); `--image-grow-enabled` scales the whole
   // frame so it grows. At most one is ever `scale(...)`.
   const ZOOM_ON = 'scale(var(--image-zoom-scale))';
   export const intrinsics: IntrinsicSpec[] = [
     {
       key: 'zoom',
       variants: ['default'],
-      variable: () => '--image-zoom-hover',
+      variable: () => '--image-zoom-enabled',
       values: ['none', ZOOM_ON],
       default: { default: 'none' },
     },
     {
       key: 'grow',
       variants: ['default'],
-      variable: () => '--image-grow-hover',
+      variable: () => '--image-grow-enabled',
       values: ['none', ZOOM_ON],
       default: { default: 'none' },
     },
@@ -52,15 +52,15 @@
     const ref = aliases[variable];
     return ref?.kind === 'literal' ? ref.value : fallback;
   }
-  let contentOn = $derived(aliasValue('--image-zoom-hover', intrinsics[0].default.default) === ZOOM_ON);
-  let frameOn = $derived(aliasValue('--image-grow-hover', intrinsics[1].default.default) === ZOOM_ON);
+  let contentOn = $derived(aliasValue('--image-zoom-enabled', intrinsics[0].default.default) === ZOOM_ON);
+  let frameOn = $derived(aliasValue('--image-grow-enabled', intrinsics[1].default.default) === ZOOM_ON);
   let useZoom = $derived(contentOn || frameOn);
   // Overflow scaling = mask the zoom to the frame (the content path). Off = grow the frame.
   let overflowScaling = $derived(!frameOn);
 
   function applyZoom(zoomOn: boolean, masked: boolean) {
-    setComponentAlias(component, '--image-zoom-hover', { kind: 'literal', value: zoomOn && masked ? ZOOM_ON : 'none' });
-    setComponentAlias(component, '--image-grow-hover', { kind: 'literal', value: zoomOn && !masked ? ZOOM_ON : 'none' });
+    setComponentAlias(component, '--image-zoom-enabled', { kind: 'literal', value: zoomOn && masked ? ZOOM_ON : 'none' });
+    setComponentAlias(component, '--image-grow-enabled', { kind: 'literal', value: zoomOn && !masked ? ZOOM_ON : 'none' });
   }
   const setUseZoom = (checked: boolean) => applyZoom(checked, overflowScaling);
   const setOverflowScaling = (checked: boolean) => applyZoom(useZoom, checked);

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

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { Token } from './scaffolding/types';
+  import type { Token, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'imagelightbox';
 
@@ -28,6 +28,17 @@
   };
 
   export const allTokens: Token[] = Object.values(states).flat();
+
+  // How a tile crops inside its frame: a structural choice, not a themeable value.
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'tile-fit',
+      variants: ['default'],
+      variable: () => '--imagelightbox-tile-object-fit',
+      values: ['contain', 'cover'],
+      default: { default: 'contain' },
+    },
+  ];
 </script>
 
 <script lang="ts">