@motion-proto/live-tokens 0.96.0 → 0.98.2

package/src/editor/component-editor/SideNavigationEditor.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 = 'sidenavigation';
 
@@ -271,6 +272,43 @@
       default: { default: 'var(--color-transparent)' },
     },
   ];
+
+  // Every part sits on the panel, and a hover rule lays the tint over its
+  // surface. The section header's own CollapsibleSection surface belongs to
+  // that component and stays out of the stack.
+  const panel = '--sidenavigation-panel-surface';
+  const tint = '--sidenavigation-hover-tint-enabled';
+  const partStack = (part: string, s: string): string[] =>
+    s === 'hover' ? [tint, `--sidenavigation-${part}-hover-surface`] : [`--sidenavigation-${part}-${s}-surface`];
+  const textPairs = (groups: TypeGroupConfig[], backdrop: string[]): ContrastPair[] =>
+    groups.map((g) => ({ foreground: g.colorVariable, backdrop, role: 'text', fontSize: g.sizeVariable, fontWeight: g.weightVariable }));
+
+  // The toggle sits on the title, which a pointer on the toggle also hovers.
+  const toggleContrastPairs: ContrastPair[] = [
+    ...STATEFUL_STATES.map((title): ContrastPair => ({
+      foreground: '--sidenavigation-toggle-default-icon',
+      backdrop: ['--sidenavigation-toggle-default-surface', ...partStack('title', title), panel],
+      role: 'non-text',
+      context: `title ${title}`,
+    })),
+    ...(['hover', 'selected'] as const).map((title): ContrastPair => ({
+      foreground: '--sidenavigation-toggle-hover-icon',
+      backdrop: [...partStack('toggle', 'hover'), ...partStack('title', title), panel],
+      role: 'non-text',
+      context: `title ${title}`,
+    })),
+  ];
+
+  export const contrastPairs: ContrastPair[] = [
+    ...STATEFUL_STATES.flatMap((s): ContrastPair[] => [
+      ...textPairs(titleStateTypeGroups(s), ['--sidenavigation-title-label-surface', ...partStack('title', s), panel]),
+      ...textPairs(sectionStateTypeGroups(s), [...partStack('section', s), panel]),
+      ...textPairs(itemStateTypeGroups(s), [...partStack('item', s), panel]),
+      ...textPairs(footerStateTypeGroups(s), [...partStack('footer', s), panel]),
+      { foreground: `--sidenavigation-footer-${s}-icon`, backdrop: [...partStack('footer', s), panel], role: 'non-text' },
+    ]),
+    ...toggleContrastPairs,
+  ];
 </script>
 
 <script lang="ts">
@@ -280,6 +318,7 @@
   import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import Toggle from '../ui/Toggle.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
 
   // One switch. Turning the tint on also stands each hover surface down to its
@@ -384,7 +423,7 @@
     {#snippet extraPropertyRows(stateName)}
       {#if stateName.endsWith(' / Hover')}
         <div class="property-row" data-token-variables="--sidenavigation-hover-tint-enabled">
-          <span class="property-label">tint layer</span>
+          <span class="property-label">tint layer<A11yPropertyMark variables={['--sidenavigation-hover-tint-enabled']} /></span>
           <Toggle checked={tintOn} onchange={setTintOn} />
         </div>
         {#if tintOn}

package/src/editor/component-editor/SlidePagerEditor.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 = 'slidepager';
 
@@ -46,6 +47,25 @@
   };
 
   export const allTokens: Token[] = Object.values(states).flat();
+
+  // The bar sits on the page inline and on the scrim when zoomed.
+  const scrim = '--slidepager-scrim-surface';
+  function controlContrastPairs(foreground: string, surface: string, inactive: boolean): ContrastPair[] {
+    const flag = inactive ? { inactive } : {};
+    return [
+      { foreground, backdrop: [surface], role: 'non-text', context: 'inline', ...flag },
+      { foreground, backdrop: [surface, scrim], role: 'non-text', context: 'zoomed', ...flag },
+    ];
+  }
+  const counter = { foreground: '--slidepager-counter-text', role: 'text', fontSize: '--slidepager-counter-font-size', fontWeight: '--slidepager-counter-font-weight' } as const;
+
+  export const contrastPairs: ContrastPair[] = [
+    ...controlContrastPairs('--slidepager-control-icon', '--slidepager-control-surface', false),
+    ...controlContrastPairs('--slidepager-control-hover-icon', '--slidepager-control-hover-surface', false),
+    ...controlContrastPairs('--slidepager-control-disabled-icon', '--slidepager-control-disabled-surface', true),
+    { ...counter, backdrop: [], context: 'inline' },
+    { ...counter, backdrop: [scrim], context: 'zoomed' },
+  ];
 </script>
 
 <script lang="ts">

package/src/editor/component-editor/SliderEditor.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 { sliderVariants } from '../../system/components/Slider.svelte';
 
   export const component = 'slider';
@@ -109,6 +110,38 @@
   ]);
 
   const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+
+  // The fill paints on the track, and the thumb straddles the fill and the track.
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    const thumbPairs = (thumb: string, fill: string, track: string, inactive: boolean): ContrastPair[] => {
+      const flag = inactive ? { inactive } : {};
+      return [
+        { foreground: thumb, backdrop: [fill, track], role: 'non-text', context: 'fill', ...flag },
+        { foreground: thumb, backdrop: [track], role: 'non-text', context: 'track', ...flag },
+      ];
+    };
+    const track = `--slider-${v}-track-surface`;
+    const disabledTrack = `--slider-${v}-disabled-track-surface`;
+    return [
+      { foreground: `--slider-${v}-fill`, backdrop: [track], role: 'non-text' },
+      ...thumbPairs(`--slider-${v}-thumb-surface`, `--slider-${v}-fill`, track, false),
+      ...thumbPairs(`--slider-${v}-hover-thumb-surface`, `--slider-${v}-fill`, track, false),
+      { foreground: `--slider-${v}-disabled-fill`, backdrop: [disabledTrack], role: 'non-text', inactive: true },
+      ...thumbPairs(`--slider-${v}-disabled-thumb-surface`, `--slider-${v}-disabled-fill`, disabledTrack, true),
+    ];
+  }
+
+  // Both variants share the label and value, which sit on no surface.
+  export const contrastPairs: ContrastPair[] = [
+    ...typeGroups.default.map((g): ContrastPair => ({
+      foreground: g.colorVariable,
+      backdrop: [],
+      role: 'text',
+      fontSize: g.sizeVariable,
+      fontWeight: g.weightVariable,
+    })),
+    ...variants.flatMap(variantContrastPairs),
+  ];
 </script>
 
 <script lang="ts">

package/src/editor/component-editor/TabBarEditor.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 = 'tabbar';
 
@@ -93,6 +94,25 @@
       default: { default: 'var(--color-transparent)' },
     },
   ];
+
+  // The bottom indicator paints over its own tab's surface.
+  function tabContrastPairs(s: TabState): ContrastPair[] {
+    const backdrop = s === 'hover' ? ['--tabbar-hover-tint-enabled', '--tabbar-hover-surface'] : [`--tabbar-${s}-surface`];
+    const inactive = s === 'disabled' ? { inactive: true } : {};
+    return [
+      ...tabStateTypeGroups(s).map((g): ContrastPair => ({
+        foreground: g.colorVariable,
+        backdrop,
+        role: 'text',
+        fontSize: g.sizeVariable,
+        fontWeight: g.weightVariable,
+        ...inactive,
+      })),
+      { foreground: `--tabbar-${s}-border`, backdrop, role: 'non-text', ...inactive },
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = tabStateNames.flatMap(tabContrastPairs);
 </script>
 
 <script lang="ts">
@@ -102,6 +122,7 @@
   import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import Toggle from '../ui/Toggle.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
 
   // One switch. Turning the tint on also stands each hover surface down to its
@@ -163,7 +184,7 @@
     {#snippet extraPropertyRows(stateName)}
       {#if stateName === 'hover tab'}
         <div class="property-row" data-token-variables="--tabbar-hover-tint-enabled">
-          <span class="property-label">tint layer</span>
+          <span class="property-label">tint layer<A11yPropertyMark variables={['--tabbar-hover-tint-enabled']} /></span>
           <Toggle checked={tintOn} onchange={setTintOn} />
         </div>
         {#if tintOn}
@@ -177,7 +198,7 @@
     {#snippet children({ activeState })}
         {@const forceClass = activeState === 'hover tab' ? 'force-hover' : ''}
       <TabBar tabs={demoTabs} value={selectedDemoTab} class={forceClass} onchange={(id) => (selectedDemoTab = id)} />
-      <div class="tab-content-demo">
+      <div class="tab-content-demo" data-preview-demo>
         <p style="margin: 0;">placeholder tab content</p>
       </div>
           {/snippet}

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens, buildTypeGroupFontTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'table';
 
@@ -72,6 +73,19 @@
     ...buildTypeGroupColorTokens(typeGroups, derivation),
     ...buildTypeGroupFontTokens(typeGroups, derivation),
   ];
+
+  // Every cell sits on the wrapper. Even rows lay the stripe over the row surface.
+  const wrapper = '--table-default-surface';
+  const textPair = (state: string, backdrop: string[]): ContrastPair => {
+    const g = typeGroups[state][0];
+    return { foreground: g.colorVariable, backdrop, role: 'text', fontSize: g.sizeVariable, fontWeight: g.weightVariable };
+  };
+
+  export const contrastPairs: ContrastPair[] = [
+    textPair('header', ['--table-default-header-surface', wrapper]),
+    { ...textPair('cell', ['--table-default-row-surface', wrapper]), context: 'odd rows' },
+    { ...textPair('cell', ['--table-default-row-stripe-surface', '--table-default-row-surface', wrapper]), context: 'even rows' },
+  ];
 </script>
 
 <script lang="ts">

package/src/editor/component-editor/ToggleEditor.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 = 'toggle';
 
@@ -44,6 +45,22 @@
   };
 
   export const allTokens: Token[] = Object.values(states).flat();
+
+  const label = { role: 'text', fontSize: '--toggle-label-font-size', fontWeight: '--toggle-label-font-weight' } as const;
+  // Each state's thumb paints on its own state's track.
+  const thumbOnTrack: [thumb: string, track: string][] = [
+    ['--toggle-thumb-surface', '--toggle-track-surface'],
+    ['--toggle-hover-thumb-surface', '--toggle-hover-track-surface'],
+    ['--toggle-on-thumb-surface', '--toggle-on-track-surface'],
+    ['--toggle-on-hover-thumb-surface', '--toggle-on-hover-track-surface'],
+  ];
+
+  export const contrastPairs: ContrastPair[] = [
+    { foreground: '--toggle-label', backdrop: [], ...label },
+    { foreground: '--toggle-disabled-label', backdrop: [], ...label, inactive: true },
+    ...thumbOnTrack.map(([thumb, track]): ContrastPair => ({ foreground: thumb, backdrop: [track], role: 'non-text' })),
+    { foreground: '--toggle-disabled-thumb-surface', backdrop: ['--toggle-disabled-track-surface'], role: 'non-text', inactive: true },
+  ];
 </script>
 
 <script lang="ts">

package/src/editor/component-editor/TooltipEditor.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 = 'tooltip';
 
@@ -38,6 +39,14 @@
     ...buildTypeGroupColorTokens(typeGroups, { component }),
     ...typeGroupTokens,
   ];
+
+  export const contrastPairs: ContrastPair[] = typeGroups.tooltip.map((g) => ({
+    foreground: g.colorVariable,
+    backdrop: ['--tooltip-surface'],
+    role: 'text',
+    fontSize: g.sizeVariable,
+    fontWeight: g.weightVariable,
+  }));
 </script>
 
 <script lang="ts">
@@ -58,10 +67,10 @@
   >
     <div class="tooltip-demo-row">
       <Tooltip text={hintText} open>
-        <span class="tooltip-demo-target">Helpful Hint</span>
+        <span class="tooltip-demo-target" data-preview-demo>Helpful Hint</span>
       </Tooltip>
       <Tooltip text={hintText} position="bottom">
-        <span class="tooltip-demo-target">Hover me</span>
+        <span class="tooltip-demo-target" data-preview-demo>Hover me</span>
       </Tooltip>
     </div>
   </VariantGroup>

package/src/editor/component-editor/VideoFrameEditor.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 = 'videoframe';
 
@@ -27,6 +28,13 @@
   };
 
   export const allTokens: Token[] = Object.values(states).flat();
+
+  // The badge sits over the footage, which sits on the clip and the frame.
+  const frameStack = ['--videoframe-clip-surface', '--videoframe-frame-surface'];
+  export const contrastPairs: ContrastPair[] = [
+    { foreground: '--videoframe-badge-default-icon', backdrop: ['--videoframe-badge-default-surface', ...frameStack], role: 'non-text' },
+    { foreground: '--videoframe-badge-hover-icon', backdrop: ['--videoframe-badge-hover-surface', ...frameStack], role: 'non-text' },
+  ];
 </script>
 
 <script lang="ts">

package/src/editor/component-editor/VideoLightboxEditor.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 = 'videolightbox';
 
@@ -37,6 +38,15 @@
   };
 
   export const allTokens: Token[] = Object.values(states).flat();
+
+  // The badge sits over the poster on the tile, and the close button on the scrim.
+  const scrim = '--videolightbox-scrim-surface';
+  export const contrastPairs: ContrastPair[] = [
+    { foreground: '--videolightbox-badge-default-icon', backdrop: ['--videolightbox-badge-default-surface', '--videolightbox-tile-surface'], role: 'non-text' },
+    { foreground: '--videolightbox-badge-hover-icon', backdrop: ['--videolightbox-badge-hover-surface', '--videolightbox-tile-surface'], role: 'non-text' },
+    { foreground: '--videolightbox-chrome-icon', backdrop: ['--videolightbox-chrome-surface', scrim], role: 'non-text', context: 'default' },
+    { foreground: '--videolightbox-chrome-icon', backdrop: ['--videolightbox-chrome-hover-surface', scrim], role: 'non-text', context: 'hover' },
+  ];
 </script>
 
 <script lang="ts">

package/src/editor/component-editor/registration.ts

@@ -21,7 +21,8 @@ let sink: Sink | null = null;
  * the rest of the session).
  *
  * Side effect: registers the schema with the editor store so reset-to-default
- * and sibling-group resolution work for the new component.
+ * and sibling-group resolution work for the new component, and registers its
+ * contrast pairs, which replace a built-in's pairs on an id collision.
  */
 export function registerComponent(entry: RegisterComponentEntry): void {
   if (sink) sink(entry);