@motion-proto/live-tokens 0.97.0 → 0.98.2

package/src/editor/ui/GradientEditor.svelte

@@ -18,6 +18,7 @@
   import RadialShapePad from '../component-editor/scaffolding/RadialShapePad.svelte';
   import UISegmentedControl from './UISegmentedControl.svelte';
   import UIPillButton from './UIPillButton.svelte';
+  import A11yPropertyMark from './a11y/A11yPropertyMark.svelte';
   import { snapTokenToFamily } from '../core/palettes/familySwap';
 
   interface Props {
@@ -287,7 +288,10 @@
   >
     {#if sectionLabel || hasAside}
       <div class="editor-header editor-section-left">
-        <span class="editor-section-label">{sectionLabel ?? ''}</span>
+        <span class="editor-section-heading">
+          <span class="editor-section-label">{sectionLabel ?? ''}</span>
+          <A11yPropertyMark variables={[gradientSource.targetVariable]} />
+        </span>
         {#if !isFlat}
           <div class="stop-actions">
             <UIPillButton
@@ -496,6 +500,10 @@
     color: var(--ui-text-primary);
     line-height: 1;
   }
+  .editor-section-heading {
+    display: inline-flex;
+    align-items: center;
+  }
   .editor-section-left { grid-column: 1; }
   .editor-section-right { grid-column: 2; }
 

package/src/editor/ui/ThemePanel.svelte

@@ -57,6 +57,7 @@
     markComponentSaved,
   } from '../core/store/editorStore';
   import { openThemeSlug } from '../core/store/editorConfigStore';
+  import { unsavedEdits } from '../core/store/unsavedEdits';
   import { sketchOffTheme, themeSketchSettings } from '../core/sketch/sketchStore';
   import {
     componentActiveRevision,
@@ -92,7 +93,6 @@
   let dirtyComponentCount = $derived(
     Object.values($componentDirty).filter(Boolean).length,
   );
-  let unsavedEdits = $derived($colorsAndTypeDirty || dirtyComponentCount > 0 || $sketchOffTheme);
 
   async function refreshFiles() {
     try {
@@ -282,7 +282,7 @@
     themeProductionState({
       openTheme: $openThemeSlug,
       production: $productionTheme,
-      unsaved: unsavedEdits || $liveUnsaved,
+      unsaved: $unsavedEdits || $liveUnsaved,
     }),
   );
 
@@ -421,7 +421,7 @@
   async function commitWholeTheme() {
     const row = previewRow;
     if (!row) return;
-    if (unsavedEdits) {
+    if ($unsavedEdits) {
       const ok = window.confirm(
         'Loading a theme will replace the editor’s current state and discard unsaved changes. Continue?',
       );
@@ -490,7 +490,7 @@
     const picked = previewLayer ?? previewedTheme?.colorsAndType ?? null;
     if (!row || !picked) return;
     const { _fileName, _source, ...buffer } = picked;
-    if (unsavedEdits) {
+    if ($unsavedEdits) {
       const ok = window.confirm(
         'Loading colors and type will discard unsaved changes. Continue?',
       );

package/src/editor/ui/UIContrastReadout.svelte

@@ -0,0 +1,186 @@
+<script module lang="ts">
+  import { createSubscriber } from 'svelte/reactivity';
+  import { on } from 'svelte/events';
+  import { THEME_APPLIED_EVENT } from '../core/themes/themeDocumentSync';
+
+  const themeApplied = createSubscriber((update) => on(document, THEME_APPLIED_EVENT, update));
+</script>
+
+<script lang="ts">
+  import { editorState } from '../core/store/editorStore';
+  import { getContrastPairs } from '../core/components/contrastPairRegistry';
+  import { CONTRAST_RULES } from '../core/palettes/contrast';
+  import { measurePair, type PairMeasure } from '../core/palettes/contrastPairs';
+  import { createDomResolver } from '../core/palettes/resolveColor';
+  import { formatRatio, measureState, readoutState, ruleSentence } from './contrastReadout';
+  import UIInfoPopover from './UIInfoPopover.svelte';
+
+  interface Props {
+    component: string;
+    variable: string;
+  }
+
+  let { component, variable }: Props = $props();
+
+  let pairs = $derived(getContrastPairs(component, variable));
+  let measures = $state<PairMeasure[]>([]);
+  let readout = $derived(measures.length > 0 ? readoutState(measures) : null);
+
+  // Measuring reads the DOM, so it waits a frame. The store renderer writes
+  // CSS variables synchronously, so by then the probe reads what the store holds.
+  $effect(() => {
+    void $editorState;
+    themeApplied();
+    const current = pairs;
+    const frame = requestAnimationFrame(() => {
+      const resolver = createDomResolver();
+      measures = current.map((pair) => measurePair(pair, resolver));
+    });
+    return () => cancelAnimationFrame(frame);
+  });
+</script>
+
+{#if readout}
+  <span
+    class="contrast-readout"
+    data-contrast-state={readout.state}
+    data-contrast-ratio={readout.measure.ratio}
+  >
+    <UIInfoPopover title="Contrast" ariaLabel={readout.ariaLabel}>
+      {#snippet trigger()}
+        <span class="contrast-value {readout.state}">
+          {#if readout.state === 'fail'}
+            <i class="fa-solid fa-triangle-exclamation contrast-mark" aria-hidden="true"></i>
+          {/if}
+          {readout.label}
+        </span>
+      {/snippet}
+      <ul class="contrast-pairs">
+        {#each measures as m (m.pair)}
+          {@const rule = CONTRAST_RULES[m.pair.role]}
+          {@const pairState = measureState(m)}
+          <li class="contrast-pair">
+            {#if m.pair.context}
+              <p class="contrast-context">{m.pair.context}</p>
+            {/if}
+            <p>{ruleSentence(m)}</p>
+            <p class="contrast-measured">
+              Measured
+              <span class="contrast-value {pairState}">
+                {#if pairState === 'fail'}
+                  <i class="fa-solid fa-triangle-exclamation contrast-mark" aria-hidden="true"></i>
+                {/if}
+                {formatRatio(m.ratio)}
+              </span>
+            </p>
+            <ol class="contrast-stack" aria-label="Layers behind the color, top first">
+              {#each m.pair.backdrop as layer, i (i)}
+                <li><code>{layer}</code></li>
+              {/each}
+              <li>page background</li>
+            </ol>
+            <a class="contrast-link" href={rule.url} target="_blank" rel="noopener">
+              Success criterion {rule.criterion}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    </UIInfoPopover>
+  </span>
+{/if}
+
+<style>
+  .contrast-readout {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+
+  .contrast-value {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--ui-space-2);
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-sm);
+    white-space: nowrap;
+  }
+
+  .contrast-value.pass {
+    color: var(--ui-text-secondary);
+  }
+
+  .contrast-value.fail {
+    color: var(--ui-highlight);
+  }
+
+  .contrast-value.inactive {
+    color: var(--ui-text-tertiary);
+  }
+
+  .contrast-mark {
+    margin-right: var(--ui-space-4);
+    font-size: var(--ui-font-size-xs);
+  }
+
+  .contrast-pairs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-12);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .contrast-pair {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-6);
+  }
+
+  .contrast-pair + .contrast-pair {
+    padding-top: var(--ui-space-12);
+    border-top: 1px solid var(--ui-border-low);
+  }
+
+  /* The popover's paragraph margin would double the flex gap. */
+  .contrast-pair p {
+    margin: 0;
+  }
+
+  .contrast-context {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
+  .contrast-measured {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ui-space-6);
+  }
+
+  .contrast-measured .contrast-value {
+    font-size: inherit;
+  }
+
+  .contrast-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-tertiary);
+  }
+
+  .contrast-stack code {
+    overflow-wrap: anywhere;
+  }
+
+  .contrast-link {
+    align-self: flex-start;
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-primary);
+    text-decoration: underline;
+  }
+</style>

package/src/editor/ui/UIInfoPopover.svelte

@@ -5,10 +5,12 @@
   interface Props {
     title: string;
     ariaLabel?: string;
+    /** Replaces the info icon inside the button. */
+    trigger?: Snippet;
     children?: Snippet;
   }
 
-  let { title, ariaLabel, children }: Props = $props();
+  let { title, ariaLabel, trigger, children }: Props = $props();
 
   let open = $state(false);
   let btnEl = $state<HTMLButtonElement | undefined>(undefined);
@@ -83,13 +85,18 @@
 <button
   type="button"
   class="info-btn"
+  class:has-trigger={!!trigger}
   aria-label={ariaLabel ?? `About ${title}`}
   aria-expanded={open}
   bind:this={btnEl}
   data-info-popover-root
   onclick={() => (open = !open)}
 >
-  <i class="fas fa-circle-info"></i>
+  {#if trigger}
+    {@render trigger()}
+  {:else}
+    <i class="fas fa-circle-info"></i>
+  {/if}
 </button>
 
 {#if open}
@@ -140,6 +147,13 @@
     color: var(--ui-text-primary);
   }
 
+  .info-btn.has-trigger {
+    width: auto;
+    height: auto;
+    color: inherit;
+    font: inherit;
+  }
+
   /* Fixed positioning escapes any parent overflow/stacking context. JS
      anchors it to the right of the trigger; falls back to centered-below
      then flips up near the viewport bottom. */

package/src/editor/ui/UIPaletteSelector.svelte

@@ -25,6 +25,8 @@
   import UITokenSelector from './UITokenSelector.svelte';
   import ColorEditPanel from './ColorEditPanel.svelte';
   import CustomColorReplaceStep from './CustomColorReplaceStep.svelte';
+  import UIContrastReadout from './UIContrastReadout.svelte';
+  import { getContrastPairs } from '../core/components/contrastPairRegistry';
 
   /** Honor prefers-reduced-motion: `t()` zeroes durations when the OS asks for
    *  less motion, so the detail-row enter/exit slides skip outright. Mirrors
@@ -89,6 +91,8 @@
     replacing = null,
   }: Props = $props();
 
+  let hasContrastPairs = $derived(!!component && getContrastPairs(component, variable).length > 0);
+
   const clampOpacity = (n: number) => Math.max(minOpacity, Math.min(100, Math.round(n)));
   let noneAllowed = $derived(showNone && minOpacity <= 0);
 
@@ -740,6 +744,10 @@
   });
 </script>
 
+{#snippet contrastReadout()}
+  {#if component}<UIContrastReadout {component} {variable} />{/if}
+{/snippet}
+
 <UITokenSelector
   bind:this={selector}
   {variable}
@@ -748,6 +756,7 @@
   {disabled}
   {selectionsLocked}
   {onwrite}
+  metaAfter={hasContrastPairs ? contrastReadout : undefined}
   dropdownMinWidth={session ? '22rem' : '14rem'}
   dropdownMaxWidth="calc(100vw - 2rem)"
   hideDefaultHeader={!!selectedFamily}

package/src/editor/ui/UITokenSelector.svelte

@@ -23,6 +23,7 @@
   import UILinkToggle from './UILinkToggle.svelte';
   import UIRelinkConfirmDialog from './UIRelinkConfirmDialog.svelte';
   import { anchorToTrigger } from './anchorToTrigger';
+  import A11yPropertyMark from './a11y/A11yPropertyMark.svelte';
 
   type DropdownContext = { close: () => void; handleReset: () => void };
 
@@ -53,6 +54,8 @@
     triggerTitle?: Snippet;
     /** Optional meta text rendered after the trigger. Renamed from `slot="trigger-meta"` in 0.5.0. */
     triggerMeta?: Snippet;
+    /** Optional content after the meta text, in the same column. The meta text truncates first. */
+    metaAfter?: Snippet;
     /** Optional dropdown header replacement. */
     header?: Snippet;
     /** Optional dropdown content above the selections. */
@@ -87,6 +90,7 @@
     triggerText,
     triggerTitle,
     triggerMeta,
+    metaAfter,
     header,
     subheader,
     children,
@@ -292,6 +296,7 @@
   bind:this={container}
 >
   <div class="ui-ts-trigger-wrap">
+    <A11yPropertyMark variables={[variable]} placement="gutter" />
     <button
       bind:this={triggerEl}
       class="ui-ts-trigger"
@@ -362,11 +367,20 @@
     {/if}
   </div>
 
-  {#if triggerMeta}
+  {#snippet metaText(meta: Snippet)}
     <span
       class="ui-ts-meta-text"
       use:mirrorTextToTitle
-    >{@render triggerMeta()}</span>
+    >{@render meta()}</span>
+  {/snippet}
+
+  {#if metaAfter}
+    <div class="ui-ts-meta">
+      {#if triggerMeta}{@render metaText(triggerMeta)}{/if}
+      {@render metaAfter()}
+    </div>
+  {:else if triggerMeta}
+    {@render metaText(triggerMeta)}
   {/if}
 </div>
 
@@ -518,6 +532,16 @@
     min-width: 0;
   }
 
+  /* Column 3 when `metaAfter` is set. `min-width: 0` keeps the pair from
+     widening the column; the meta text gives up width first. */
+  .ui-ts-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    align-self: center;
+    min-width: 0;
+  }
+
   .ui-ts-chevron {
     font-size: 0.625rem;
     color: var(--ui-text-secondary);

package/src/editor/ui/a11y/A11yComponentIssues.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import type { ComponentA11yIssues } from '../../core/a11y/a11yReport';
+  import { CONTRAST_RULES } from '../../core/palettes/contrast';
+  import { formatFloor, formatRatio } from '../contrastReadout';
+  import A11yFindingRow from './A11yFindingRow.svelte';
+  import A11yIssueRow from './A11yIssueRow.svelte';
+  import { findingRows, propertyLabel } from './a11yView';
+
+  interface Props {
+    component: string;
+    issues: ComponentA11yIssues;
+    /** Lists the results to check by eye as a third group. The Accessibility view lists them apart. */
+    withReview?: boolean;
+    onreveal?: (variable: string) => void;
+    /** Opens the component, for a row that traced no property. Absent on the component's own page. */
+    onopen?: () => void;
+  }
+
+  let { component, issues, withReview = false, onreveal, onopen }: Props = $props();
+
+  let propertyRows = $derived(findingRows(issues.property));
+  let codeRows = $derived(findingRows(issues.code));
+  let reviewRows = $derived(withReview ? findingRows(issues.review) : []);
+</script>
+
+{#if issues.contrast.length > 0 || propertyRows.length > 0}
+  <div class="a11y-group">
+    <h4 class="a11y-group-title">Fix with a property</h4>
+    <ul class="a11y-issues">
+      {#each issues.contrast as failure, i (i)}
+        {@const label = propertyLabel(component, failure.variable) ?? failure.variable}
+        {@const rule = CONTRAST_RULES[failure.role]}
+        <A11yIssueRow href={rule.url} linkLabel={`Success criterion ${rule.criterion}`}>
+          {label} {formatRatio(failure.ratio)}, needs {formatFloor(failure.floor)}
+          {#snippet detail()}
+            <code>{failure.variable}</code>{#if failure.context}, {failure.context}{/if}
+          {/snippet}
+          {#snippet links()}
+            {#if onreveal}
+              <button type="button" class="a11y-link" aria-label={`Go to ${label}`} title={failure.variable} onclick={() => onreveal(failure.variable)}>
+                {label} <i class="fas fa-arrow-right" aria-hidden="true"></i>
+              </button>
+            {/if}
+          {/snippet}
+        </A11yIssueRow>
+      {/each}
+      {#each propertyRows as row, i (i)}
+        <A11yFindingRow {component} {row} {onreveal} {onopen} />
+      {/each}
+    </ul>
+  </div>
+{/if}
+
+{#if codeRows.length > 0}
+  <div class="a11y-group">
+    <h4 class="a11y-group-title">Fix in the component's code</h4>
+    <ul class="a11y-issues">
+      {#each codeRows as row, i (i)}
+        <A11yFindingRow {component} {row} {onreveal} {onopen} />
+      {/each}
+    </ul>
+  </div>
+{/if}
+
+{#if reviewRows.length > 0}
+  <div class="a11y-group">
+    <h4 class="a11y-group-title">Check by eye</h4>
+    <ul class="a11y-issues">
+      {#each reviewRows as row, i (i)}
+        <A11yFindingRow {component} {row} review {onreveal} {onopen} />
+      {/each}
+    </ul>
+  </div>
+{/if}
+
+<style>
+  .a11y-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+  }
+
+  .a11y-group + .a11y-group {
+    margin-top: var(--ui-space-12);
+  }
+
+  .a11y-group-title {
+    margin: 0;
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+  }
+
+  .a11y-group code {
+    font-family: var(--ui-font-mono);
+  }
+
+  .a11y-issues {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+</style>

package/src/editor/ui/a11y/A11yFindingRow.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import A11yIssueRow from './A11yIssueRow.svelte';
+  import {
+    componentLabel,
+    elementsLabel,
+    findingText,
+    guidanceLabel,
+    propertyLabel,
+    type A11yFindingRow,
+  } from './a11yView';
+
+  interface Props {
+    component: string;
+    row: A11yFindingRow;
+    review?: boolean;
+    /** Leads the text, as the component's name does in a list that spans components. */
+    prefix?: string;
+    onreveal?: (variable: string) => void;
+    /** Opens the component, for a row that traced no property. Absent on the component's own page. */
+    onopen?: () => void;
+  }
+
+  let { component, row, review = false, prefix, onreveal, onopen }: Props = $props();
+
+  let properties = $derived(row.variables.map((variable) => ({ variable, label: propertyLabel(component, variable) ?? variable })));
+  let where = $derived([row.targets.length > 1 ? elementsLabel(row.targets.length) : '', row.views].filter(Boolean).join(', '));
+  let helpUrl = $derived(row.finding.details?.helpUrl);
+  let hasLinks = $derived((properties.length > 0 && onreveal !== undefined) || (properties.length === 0 && onopen !== undefined));
+</script>
+
+{#snippet location()}
+  {#if row.targets.length === 1}<code>{row.targets[0]}</code>{#if row.views}{`, ${row.views}`}{/if}{:else}{where}{/if}
+{/snippet}
+
+{#snippet links()}
+  {#if properties.length > 0 && onreveal}
+    {#each properties as { variable, label } (variable)}
+      <button type="button" class="a11y-link" aria-label={`Go to ${label}`} title={variable} onclick={() => onreveal(variable)}>
+        {label} <i class="fas fa-arrow-right" aria-hidden="true"></i>
+      </button>
+    {/each}
+  {:else if onopen}
+    <button type="button" class="a11y-link" onclick={onopen}>
+      Open {componentLabel(component)} <i class="fas fa-arrow-right" aria-hidden="true"></i>
+    </button>
+  {/if}
+{/snippet}
+
+<A11yIssueRow
+  {review}
+  href={helpUrl}
+  linkLabel={helpUrl ? guidanceLabel(helpUrl) : undefined}
+  detail={row.targets.length > 0 || row.views ? location : undefined}
+  links={hasLinks ? links : undefined}
+>
+  {#if prefix}{prefix}: {/if}{findingText(row.finding)}
+</A11yIssueRow>

package/src/editor/ui/a11y/A11yIssueRow.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** A result to check by eye: its text in grey, where an issue's is amber. */
+    review?: boolean;
+    href?: string;
+    /** Names what `href` points at, such as "Rule" or "Success criterion 1.4.11". */
+    linkLabel?: string;
+    children: Snippet;
+    detail?: Snippet;
+    /** The in-editor links that lead the link group, such as the traced properties. */
+    links?: Snippet;
+  }
+
+  let { review = false, href, linkLabel = 'Guidance', children, detail, links }: Props = $props();
+</script>
+
+<li class="a11y-issue" class:review>
+  <div class="a11y-issue-head">
+    <p class="a11y-issue-text">{@render children()}</p>
+    {#if links || href}
+      <div class="a11y-issue-links">
+        {@render links?.()}
+        {#if href}
+          <a
+            class="a11y-link a11y-issue-guidance"
+            {href}
+            target="_blank"
+            rel="noopener"
+            title={href}
+            aria-label={`${linkLabel} (opens in a new tab)`}
+          >
+            {linkLabel}
+            <i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i>
+          </a>
+        {/if}
+      </div>
+    {/if}
+  </div>
+  {#if detail}
+    <p class="a11y-issue-detail">{@render detail()}</p>
+  {/if}
+</li>
+
+<style>
+  .a11y-issue {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    padding: var(--ui-space-12) 0;
+  }
+
+  .a11y-issue + :global(.a11y-issue) {
+    border-top: 1px solid var(--ui-border-low);
+  }
+
+  .a11y-issue-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-8) var(--ui-space-16);
+  }
+
+  .a11y-issue-text,
+  .a11y-issue-detail {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .a11y-issue-text {
+    flex: 1 1 16rem;
+    min-width: 0;
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-highlight);
+  }
+
+  .review .a11y-issue-text {
+    color: var(--ui-text-secondary);
+  }
+
+  .a11y-issue-detail {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-tertiary);
+  }
+
+  .a11y-issue-links {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-6);
+    margin-left: auto;
+  }
+
+  .a11y-issue-links :global(.a11y-link) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    padding: var(--ui-space-2) var(--ui-space-10);
+    background: none;
+    border: 1px solid var(--ui-border);
+    border-radius: var(--ui-radius-full);
+    font: inherit;
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background var(--ui-transition-fast), border-color var(--ui-transition-fast), color var(--ui-transition-fast);
+  }
+
+  .a11y-issue-links :global(.a11y-link:hover) {
+    background: var(--ui-surface-higher);
+    border-color: var(--ui-border-high);
+    color: var(--ui-text-primary);
+  }
+
+  .a11y-issue-links :global(.a11y-link i) {
+    font-size: var(--ui-font-size-xs);
+  }
+</style>