@motion-proto/live-tokens 0.97.0 → 0.99.0

package/src/editor/ui/EditorViewSwitcher.svelte

@@ -18,21 +18,23 @@
   let componentsDisabled = $derived($parentRoute === DEFAULT_COMPONENTS_PATH);
   let colorsDisabled = $derived($parentRoute === DEFAULT_COLORS_PATH);
 
-  // Editing flow order: Tokens → Components → Sketchstyle → Color Wheel. The condensed
+  // Editing flow order: Tokens → Components → Sketchstyle → Color Wheel → Accessibility. The condensed
   // rail cycles through these; a view is skipped while it's disabled (already
   // on that page) so the cycle never lands on a dead view.
-  const CYCLE: readonly EditorView[] = ['tokens', 'components', 'sketch', 'colors'];
+  const CYCLE: readonly EditorView[] = ['tokens', 'components', 'sketch', 'colors', 'accessibility'];
   const ICONS: Record<EditorView, string> = {
     tokens: 'fa-sliders',
     colors: 'fa-palette',
     components: 'fa-cubes',
     sketch: 'fa-pen-nib',
+    accessibility: 'fa-universal-access',
   };
   const LABELS: Record<EditorView, string> = {
     tokens: 'Tokens',
     colors: 'Color Wheel',
     components: 'Components',
     sketch: 'Sketchstyle',
+    accessibility: 'Accessibility',
   };
 
   function set(v: EditorView) {
@@ -116,6 +118,17 @@
         <span class="radio" aria-hidden="true"></span>
         <span>Color Wheel</span>
       </button>
+      <button
+        type="button"
+        role="tab"
+        class="seg-btn"
+        class:active={$editorView === 'accessibility'}
+        aria-selected={$editorView === 'accessibility'}
+        onclick={() => set('accessibility')}
+      >
+        <span class="radio" aria-hidden="true"></span>
+        <span>Accessibility</span>
+      </button>
     </div>
   </div>
 {/if}

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);