@motion-proto/live-tokens 0.96.0 → 0.98.2

package/dist-plugin/setColors/index.cjs

@@ -1098,7 +1098,13 @@ function buildColors(input, carry = {}) {
   for (const t of gradients) cssVariables[t.variable] = formatGradientValue(t);
   Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, baseColors.Canvas));
   return {
-    colors: { editorConfigs: configs, harmonyAxes, gradients, cssVariables },
+    colors: {
+      editorConfigs: configs,
+      harmonyAxes,
+      gradients,
+      ...carry.customColors ? { customColors: carry.customColors } : {},
+      cssVariables
+    },
     report: {
       ...report,
       gradients: gradients === carry.gradients ? "carried" : "recipes",

package/dist-plugin/setColors/index.d.cts

@@ -1,4 +1,4 @@
-import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, O as Oklch, d as HarmonyMode } from '../themeTypes-B8_Idrp4.cjs';
+import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, b as CustomColorDiskToken, O as Oklch, e as HarmonyMode } from '../themeTypes-BaTQUyac.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.cjs';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 
@@ -44,12 +44,14 @@ interface ColorsInput {
     canvasGradient?: boolean;
 }
 /** The live colors and type this pass reads before it replaces the color
- *  state: the override bag, so every name no palette owns rides through, and
- *  the swatch gradients, so user-tuned ones survive. Shadow opacity is
- *  derived, not carried — see `shadowVars`. */
+ *  state: the override bag, so every name no palette owns rides through, the
+ *  swatch gradients, so user-tuned ones survive, and the custom colours, which
+ *  ride through untouched. Shadow opacity is derived, not carried — see
+ *  `shadowVars`. */
 interface CarryForward {
     cssVariables?: Record<string, string>;
     gradients?: GradientDiskToken[];
+    customColors?: CustomColorDiskToken[];
 }
 interface ContrastCheck {
     textVar: string;
@@ -80,6 +82,9 @@ interface ColorsState {
     editorConfigs: Record<string, PaletteConfig>;
     harmonyAxes: HarmonyAxis[];
     gradients: GradientDiskToken[];
+    /** Present only when the carried colours and type held the field, so a
+     *  recolor adds no key to a theme that never had one. */
+    customColors?: CustomColorDiskToken[];
     cssVariables: Record<string, string>;
 }
 interface BuildColorsResult {

package/dist-plugin/setColors/index.d.ts

@@ -1,4 +1,4 @@
-import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, O as Oklch, d as HarmonyMode } from '../themeTypes-B8_Idrp4.js';
+import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, b as CustomColorDiskToken, O as Oklch, e as HarmonyMode } from '../themeTypes-BaTQUyac.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.js';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 
@@ -44,12 +44,14 @@ interface ColorsInput {
     canvasGradient?: boolean;
 }
 /** The live colors and type this pass reads before it replaces the color
- *  state: the override bag, so every name no palette owns rides through, and
- *  the swatch gradients, so user-tuned ones survive. Shadow opacity is
- *  derived, not carried — see `shadowVars`. */
+ *  state: the override bag, so every name no palette owns rides through, the
+ *  swatch gradients, so user-tuned ones survive, and the custom colours, which
+ *  ride through untouched. Shadow opacity is derived, not carried — see
+ *  `shadowVars`. */
 interface CarryForward {
     cssVariables?: Record<string, string>;
     gradients?: GradientDiskToken[];
+    customColors?: CustomColorDiskToken[];
 }
 interface ContrastCheck {
     textVar: string;
@@ -80,6 +82,9 @@ interface ColorsState {
     editorConfigs: Record<string, PaletteConfig>;
     harmonyAxes: HarmonyAxis[];
     gradients: GradientDiskToken[];
+    /** Present only when the carried colours and type held the field, so a
+     *  recolor adds no key to a theme that never had one. */
+    customColors?: CustomColorDiskToken[];
     cssVariables: Record<string, string>;
 }
 interface BuildColorsResult {

package/dist-plugin/setColors/index.js

@@ -15,7 +15,7 @@ import {
   scaleToCssVar,
   setCurveAnchor,
   syncBaseAnchor
-} from "../chunk-A4TBP4MM.js";
+} from "../chunk-SLICH4IH.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
 } from "../chunk-QQASYPW7.js";
@@ -483,7 +483,13 @@ function buildColors(input, carry = {}) {
   for (const t of gradients) cssVariables[t.variable] = formatGradientValue(t);
   Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, baseColors.Canvas));
   return {
-    colors: { editorConfigs: configs, harmonyAxes, gradients, cssVariables },
+    colors: {
+      editorConfigs: configs,
+      harmonyAxes,
+      gradients,
+      ...carry.customColors ? { customColors: carry.customColors } : {},
+      cssVariables
+    },
     report: {
       ...report,
       gradients: gradients === carry.gradients ? "carried" : "recipes",

package/dist-plugin/setGeometry/index.d.cts

@@ -1,4 +1,4 @@
-import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-B8_Idrp4.cjs';
+import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-BaTQUyac.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.cjs';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 

package/dist-plugin/setGeometry/index.d.ts

@@ -1,4 +1,4 @@
-import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-B8_Idrp4.js';
+import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-BaTQUyac.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.js';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 

package/dist-plugin/setType/index.d.cts

@@ -1,4 +1,4 @@
-import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-B8_Idrp4.cjs';
+import { d as FontStackVariable, C as ColorsAndType, c as FontStack, F as FontSource } from '../themeTypes-BaTQUyac.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.cjs';
 
 type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';

package/dist-plugin/setType/index.d.ts

@@ -1,4 +1,4 @@
-import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-B8_Idrp4.js';
+import { d as FontStackVariable, C as ColorsAndType, c as FontStack, F as FontSource } from '../themeTypes-BaTQUyac.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.js';
 
 type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';

package/dist-plugin/{themeTypes-B8_Idrp4.d.cts → themeTypes-BaTQUyac.d.cts}

@@ -181,6 +181,12 @@ interface GradientDiskToken {
         opacity?: number;
     }[];
 }
+/** On-disk shape of one `--color-custom-N` token: a theme-owned colour that
+ *  holds its own OKLCH value, one value for light and dark alike. */
+interface CustomColorDiskToken {
+    variable: string;
+    color: Oklch;
+}
 /**
  * Where a live component config resolved from: the unsaved `_working`
  * buffer, or the open theme's embedded copy. Every theme carries every
@@ -208,6 +214,9 @@ interface ColorsAndType {
     /** Absent on files saved before gradients round-tripped; the loader keeps
      *  the stock defaults then, which match what those files rendered. */
     gradients?: GradientDiskToken[];
+    /** Absent when the theme holds no custom colour; the loader reads that as
+     *  an empty list. */
+    customColors?: CustomColorDiskToken[];
     /** Four fixed harmony axes, each owning a hue with an optional bound family. */
     harmonyAxes?: HarmonyAxis[];
     /**
@@ -257,4 +266,4 @@ interface ComponentConfig {
     schemaVersion?: number;
 }
 
-export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, FontStack as b, FontStackVariable as c, HarmonyMode as d };
+export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, CustomColorDiskToken as b, FontStack as c, FontStackVariable as d, HarmonyMode as e };

package/dist-plugin/{themeTypes-B8_Idrp4.d.ts → themeTypes-BaTQUyac.d.ts}

@@ -181,6 +181,12 @@ interface GradientDiskToken {
         opacity?: number;
     }[];
 }
+/** On-disk shape of one `--color-custom-N` token: a theme-owned colour that
+ *  holds its own OKLCH value, one value for light and dark alike. */
+interface CustomColorDiskToken {
+    variable: string;
+    color: Oklch;
+}
 /**
  * Where a live component config resolved from: the unsaved `_working`
  * buffer, or the open theme's embedded copy. Every theme carries every
@@ -208,6 +214,9 @@ interface ColorsAndType {
     /** Absent on files saved before gradients round-tripped; the loader keeps
      *  the stock defaults then, which match what those files rendered. */
     gradients?: GradientDiskToken[];
+    /** Absent when the theme holds no custom colour; the loader reads that as
+     *  an empty list. */
+    customColors?: CustomColorDiskToken[];
     /** Four fixed harmony axes, each owning a hue with an optional bound family. */
     harmonyAxes?: HarmonyAxis[];
     /**
@@ -257,4 +266,4 @@ interface ComponentConfig {
     schemaVersion?: number;
 }
 
-export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, FontStack as b, FontStackVariable as c, HarmonyMode as d };
+export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, CustomColorDiskToken as b, FontStack as c, FontStackVariable as d, HarmonyMode as e };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.96.0",
+  "version": "0.98.2",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -56,6 +56,7 @@
     "dist-plugin",
     "src/testing-js",
     ".claude/skills",
+    "!.claude/skills/evaluate",
     "!.claude/skills/**/skill-alt.md",
     "bin",
     "template",
@@ -204,24 +205,61 @@
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
     "eval": "bash scripts/eval.sh",
+    "eval:billing": "bash scripts/eval-harbor.sh",
     "build:eval-project": "bash scripts/build-eval-project.sh",
     "check:smoke-component-tests": "bash scripts/smoke-component-tests.sh",
     "check:smoke-page-tests": "bash scripts/smoke-page-tests.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: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:cli-strings && npm run check:skill-sources && npm run check:skill-atlas && npm run check:smoke-install && npm run check:smoke-create && npm run check:smoke-component-tests && npm run check:smoke-page-tests"
   },
   "peerDependencies": {
+    "@axe-core/playwright": "^4.11.1",
     "@playwright/test": "^1.55",
+    "@siteimprove/alfa-act": "^0.119.0",
+    "@siteimprove/alfa-device": "^0.119.0",
+    "@siteimprove/alfa-dom": "^0.119.0",
+    "@siteimprove/alfa-http": "^0.119.0",
+    "@siteimprove/alfa-rules": "^0.119.0",
+    "@siteimprove/alfa-url": "^0.119.0",
+    "@siteimprove/alfa-web": "^0.119.0",
     "@sveltejs/vite-plugin-svelte": "^7.0",
+    "axe-core": "^4.11.1",
     "happy-dom": "^20.0",
     "sass": "^1.0",
     "svelte": "^5",
     "vite": "^8",
-    "vitest": "^4.0"
+    "vitest": "^4.0 || ^5.0"
   },
   "peerDependenciesMeta": {
+    "@axe-core/playwright": {
+      "optional": true
+    },
     "@playwright/test": {
       "optional": true
     },
+    "@siteimprove/alfa-act": {
+      "optional": true
+    },
+    "@siteimprove/alfa-device": {
+      "optional": true
+    },
+    "@siteimprove/alfa-dom": {
+      "optional": true
+    },
+    "@siteimprove/alfa-http": {
+      "optional": true
+    },
+    "@siteimprove/alfa-rules": {
+      "optional": true
+    },
+    "@siteimprove/alfa-url": {
+      "optional": true
+    },
+    "@siteimprove/alfa-web": {
+      "optional": true
+    },
+    "axe-core": {
+      "optional": true
+    },
     "happy-dom": {
       "optional": true
     },
@@ -230,9 +268,18 @@
     }
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.14.0",
     "@playwright/test": "^1.62.1",
+    "@siteimprove/alfa-act": "^0.119.0",
+    "@siteimprove/alfa-device": "^0.119.0",
+    "@siteimprove/alfa-dom": "^0.119.0",
+    "@siteimprove/alfa-http": "^0.119.0",
+    "@siteimprove/alfa-rules": "^0.119.0",
+    "@siteimprove/alfa-url": "^0.119.0",
+    "@siteimprove/alfa-web": "^0.119.0",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@types/node": "^25.9.1",
+    "axe-core": "^4.14.0",
     "happy-dom": "^20.9.0",
     "sass": "^1.98.0",
     "svelte": "^5.55.5",

package/src/demo/LabeledSelect.svelte

@@ -164,7 +164,7 @@
 
   {#if open}
     <div class="labeled-select-panel" bind:this={panelEl} use:portal>
-      <MenuSelect {items} {value} minWidth="12rem" onchange={select} />
+      <MenuSelect {items} {value} ariaLabel={label} minWidth="12rem" onchange={select} />
     </div>
   {/if}
 

package/src/editor/bootstrap.ts

@@ -50,16 +50,18 @@ export async function bootLiveTokens(
   if (import.meta.env.DEV) {
     // Imported here, never statically, so a build drops the editor. The
     // registry alone imports every shipped component and editor.
-    const [editorStore, themeDocumentSync, liveStateStream, { initializeTheme }] = await Promise.all([
+    const [editorStore, themeDocumentSync, liveStateStream, a11yReport, { initializeTheme }] = await Promise.all([
       import('./core/store/editorStore'),
       import('./core/themes/themeDocumentSync'),
       import('./core/themes/liveStateStream'),
+      import('./core/a11y/a11yReport'),
       import('./core/themes/themeInit'),
       import('./component-editor/registry'),
     ]);
     editorStore.init();
     themeDocumentSync.init();
     liveStateStream.init();
+    void a11yReport.init();
     if (opts.components) {
       for (const entry of opts.components) {
         registerComponent(entry);

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Token } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
   import { badgeVariants } from '../../system/components/Badge.svelte';
 
   export const component = 'badge';
@@ -57,6 +58,18 @@
   );
 
   const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    return [{
+      foreground: `--badge-${v}-text`,
+      backdrop: [`--badge-${v}-surface`],
+      role: 'text',
+      fontSize: `--badge-${v}-text-font-size`,
+      fontWeight: `--badge-${v}-text-font-weight`,
+    }];
+  }
+
+  export const contrastPairs: ContrastPair[] = variants.flatMap(variantContrastPairs);
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildSiblings } from './scaffolding/siblings';
   import type { Token, IntrinsicSpec } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'button';
 
@@ -120,11 +121,41 @@
       default: { default: 'var(--color-transparent)' },
     },
   ];
+
+  // The small size keeps each variant's colors, and it is the smaller of the two text sizes.
+  const pairFont = { fontSize: '--button-small-text-font-size', fontWeight: '--button-small-text-font-weight' } as const;
+
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    const text = (s: StateName) => `${statePrefix(v, s)}-text`;
+    const surface = (s: StateName) => `${statePrefix(v, s)}-surface`;
+    const hoverStack = ['--button-hover-tint-enabled', surface('hover')];
+    const disabled: ContrastPair = { foreground: text('disabled'), backdrop: [surface('disabled')], role: 'text', ...pairFont, inactive: true };
+    if (v !== 'outline') {
+      return [
+        { foreground: text('default'), backdrop: [surface('default')], role: 'text', ...pairFont },
+        { foreground: text('hover'), backdrop: hoverStack, role: 'text', ...pairFont },
+        disabled,
+      ];
+    }
+    // `:active` repaints the surface without the tint. A pointer press keeps the
+    // hover text color, and a key press keeps the default one.
+    const active = ['--button-outline-active-surface'];
+    return [
+      { foreground: text('default'), backdrop: [surface('default')], role: 'text', ...pairFont, context: 'default' },
+      { foreground: text('default'), backdrop: active, role: 'text', ...pairFont, context: 'active' },
+      { foreground: text('hover'), backdrop: hoverStack, role: 'text', ...pairFont, context: 'hover' },
+      { foreground: text('hover'), backdrop: active, role: 'text', ...pairFont, context: 'active' },
+      disabled,
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = variants.flatMap(variantContrastPairs);
 </script>
 
 <script lang="ts">
   import Button from '../../system/components/Button.svelte';
   import Toggle from '../ui/Toggle.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
@@ -216,7 +247,7 @@
         {#snippet extraPropertyRows(stateName)}
           {#if stateName === 'hover'}
             <div class="property-row" data-token-variables="--button-hover-tint-enabled">
-              <span class="property-label">tint layer</span>
+              <span class="property-label">tint layer<A11yPropertyMark variables={['--button-hover-tint-enabled']} /></span>
               <Toggle checked={tintOn} onchange={setTintOn} />
             </div>
             {#if tintOn}
@@ -226,7 +257,7 @@
               </div>
             {/if}
             <div class="property-row" data-token-variables="--button-shimmer">
-              <span class="property-label">hover shimmer</span>
+              <span class="property-label">hover shimmer<A11yPropertyMark variables={['--button-shimmer']} /></span>
               <Toggle checked={shimmerEnabled} onchange={handleShimmerChange} />
             </div>
           {/if}

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
   import { calloutVariants } from '../../system/components/Callout.svelte';
 
   export const component = 'callout';
@@ -68,6 +69,18 @@
   );
 
   const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    return variantTypeGroups(v).map((g) => ({
+      foreground: g.colorVariable,
+      backdrop: [`--callout-${v}-surface`],
+      role: 'text',
+      fontSize: g.sizeVariable,
+      fontWeight: g.weightVariable,
+    }));
+  }
+
+  export const contrastPairs: ContrastPair[] = variants.flatMap(variantContrastPairs);
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'card';
 
@@ -104,12 +105,20 @@
       default: { default: HOVER_OFF.shadow },
     },
   ];
+
+  // size="small" sets the title in --font-size-md and the body in
+  // --font-size-sm, the smaller of each one's two sizes.
+  export const contrastPairs: ContrastPair[] = [
+    { foreground: '--card-default-title', backdrop: ['--card-default-header-surface', '--card-default-surface'], role: 'text', fontSize: '--font-size-md', fontWeight: '--card-default-title-font-weight' },
+    { foreground: '--card-default-body', backdrop: ['--card-default-surface'], role: 'text', fontSize: '--font-size-sm', fontWeight: '--card-default-body-font-weight' },
+  ];
 </script>
 
 <script lang="ts">
   import Card from '../../system/components/Card.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import { editorState, setComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
@@ -152,6 +161,7 @@
             <input type="checkbox" checked={hoverEnabled} onchange={(e) => setHoverEnabled(e.currentTarget.checked)} />
             <span>Use hover</span>
           </label>
+          <A11yPropertyMark variables={['--card-hover-border-enabled', '--card-hover-shadow-enabled']} />
           <p class="hover-help">
             Checked: every card lifts on hover. Unchecked: hover is off by default and a page turns it on
             per card with the <code>hover</code> prop.
@@ -163,10 +173,10 @@
       {@const previewClass = activeState === 'hover' ? 'force-hover' : ''}
       <div class="card-demo">
         <Card title="Card title" icon="fas fa-star" class={previewClass}>
-          <div class="content-placeholder">Content Placeholder</div>
+          <div class="content-placeholder" data-preview-demo>Content Placeholder</div>
         </Card>
         <Card variant="bare" class={previewClass}>
-          <div class="content-placeholder">Bare variant</div>
+          <div class="content-placeholder" data-preview-demo>Bare variant</div>
         </Card>
       </div>
     {/snippet}

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Token } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'codesnippet';
 
@@ -33,6 +34,15 @@
   };
 
   export const allTokens: Token[] = Object.values(states).flat();
+
+  // The copy button and the scrollbar track paint no surface of their own.
+  const surface = ['--codesnippet-surface'];
+  export const contrastPairs: ContrastPair[] = [
+    { foreground: '--codesnippet-code-text', backdrop: surface, role: 'text', fontSize: '--codesnippet-code-font-size', fontWeight: '--codesnippet-code-font-weight' },
+    { foreground: '--codesnippet-icon', backdrop: surface, role: 'non-text' },
+    { foreground: '--codesnippet-hover-icon', backdrop: surface, role: 'non-text' },
+    { foreground: '--codesnippet-scrollbar-thumb', backdrop: surface, role: 'non-text' },
+  ];
 </script>
 
 <script lang="ts">
@@ -52,7 +62,7 @@
   <VariantGroup name="codesnippet" title="Code Snippet" {states} {component}>
     {#snippet children({ activeState })}
       <div class="codesnippet-preview">
-        <label class="preview-text">
+        <label class="preview-text" data-preview-demo>
           <span>Preview text</span>
           <textarea
             bind:value={previewCode}

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'collapsiblesection';
 
@@ -117,6 +118,22 @@
   ]);
 
   const variantOptions = VARIANTS.map((v) => ({ value: v, label: VARIANT_LABELS[v] }));
+
+  function headerContrastPairs(v: Variant, s: HeaderState): ContrastPair[] {
+    const backdrop = [`--collapsiblesection-${v}-${s}-surface`];
+    return [
+      ...variantTypeGroups(v)[`Header / ${HEADER_STATE_LABELS[s]}`].map((g): ContrastPair => ({
+        foreground: g.colorVariable,
+        backdrop,
+        role: 'text',
+        fontSize: g.sizeVariable,
+        fontWeight: g.weightVariable,
+      })),
+      { foreground: `--collapsiblesection-${v}-${s}-icon`, backdrop, role: 'non-text' },
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = VARIANTS.flatMap((v) => HEADER_STATES.flatMap((s) => headerContrastPairs(v, s)));
 </script>
 
 <script lang="ts">
@@ -155,7 +172,7 @@
           open={isBody}
           class={forceClass}
         >
-          <p style="margin: 0; color: var(--text-secondary);">
+          <p style="margin: 0; color: var(--text-secondary);" data-preview-demo>
             {#if isContainerPart}
               (Container) — outer chrome only; switch to Body to see the content area.
             {:else}

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Token } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
   import { badgeVariants } from '../../system/components/Badge.svelte';
 
   export const component = 'cornerbadge';
@@ -40,6 +41,18 @@
   ];
 
   const variantOptions = badgeVariants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    return [{
+      foreground: `--cornerbadge-${v}-text`,
+      backdrop: [`--cornerbadge-${v}-surface`],
+      role: 'text',
+      fontSize: '--cornerbadge-text-font-size',
+      fontWeight: '--cornerbadge-text-font-weight',
+    }];
+  }
+
+  export const contrastPairs: ContrastPair[] = badgeVariants.flatMap(variantContrastPairs);
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'dialog';
 
@@ -85,6 +86,20 @@
   function variantLabel(v: ButtonVariant): string {
     return v.charAt(0).toUpperCase() + v.slice(1);
   }
+
+  // The header and body sit on the dialog box, and the box sits on the scrim.
+  const boxStack = ['--dialog-surface', '--dialog-scrim-surface'];
+  const headerStack = ['--dialog-header-surface', ...boxStack];
+  const textPair = (part: string, backdrop: string[]): ContrastPair => {
+    const g = frameTypeGroups[part][0];
+    return { foreground: g.colorVariable, backdrop, role: 'text', fontSize: g.sizeVariable, fontWeight: g.weightVariable };
+  };
+
+  export const contrastPairs: ContrastPair[] = [
+    textPair('header', headerStack),
+    { foreground: '--dialog-close-icon', backdrop: headerStack, role: 'non-text' },
+    textPair('body', boxStack),
+  ];
 </script>
 
 <script lang="ts">