@motion-proto/live-tokens 0.96.0 → 0.98.2

package/src/editor/ui/anchorToTrigger.ts

@@ -0,0 +1,63 @@
+/**
+ * Svelte action: pin a `position: fixed` popover under its trigger so no
+ * scrolling or clipping ancestor can cut it off. It aligns to the trigger's
+ * left edge, flips above when the space below runs out, and clamps to the
+ * viewport. It re-places on scroll, resize, and content reflow.
+ */
+
+const GAP = 4;
+const MARGIN = 8;
+
+export function anchorToTrigger(node: HTMLElement, trigger: HTMLElement) {
+  let anchor = trigger;
+  let pendingFrame: number | null = null;
+
+  function place(): void {
+    // A container-type or transformed ancestor moves the fixed containing
+    // block off the viewport origin. Measuring at 0,0 reads that offset.
+    node.style.left = '0px';
+    node.style.top = '0px';
+    const origin = node.getBoundingClientRect();
+    const a = anchor.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    const left = Math.max(MARGIN, Math.min(a.left, vw - MARGIN - origin.width));
+    let top = a.bottom + GAP;
+    if (top + origin.height > vh - MARGIN) {
+      const above = a.top - GAP - origin.height;
+      top = above >= MARGIN ? above : Math.max(MARGIN, vh - MARGIN - origin.height);
+    }
+
+    node.style.left = `${left - origin.left}px`;
+    node.style.top = `${top - origin.top}px`;
+  }
+
+  function schedule(): void {
+    if (pendingFrame !== null) return;
+    pendingFrame = requestAnimationFrame(() => {
+      pendingFrame = null;
+      place();
+    });
+  }
+
+  place();
+
+  const ro = new ResizeObserver(schedule);
+  ro.observe(node);
+  window.addEventListener('resize', schedule);
+  window.addEventListener('scroll', schedule, true);
+
+  return {
+    update(next: HTMLElement) {
+      anchor = next;
+      schedule();
+    },
+    destroy() {
+      if (pendingFrame !== null) cancelAnimationFrame(pendingFrame);
+      ro.disconnect();
+      window.removeEventListener('resize', schedule);
+      window.removeEventListener('scroll', schedule, true);
+    },
+  };
+}

package/src/editor/ui/contrastReadout.ts

@@ -0,0 +1,45 @@
+import { CONTRAST_RULES, LARGE_BOLD_PX, LARGE_TEXT_PX } from '../core/palettes/contrast';
+import { closestToFailing, type PairMeasure } from '../core/palettes/contrastPairs';
+
+export type ReadoutState = 'pass' | 'fail' | 'inactive';
+
+export interface Readout {
+  label: string;
+  state: ReadoutState;
+  ariaLabel: string;
+  measure: PairMeasure;
+}
+
+/** Truncation keeps a failing value from displaying as its floor. */
+export function formatRatio(ratio: number): string {
+  return `${(Math.floor(ratio * 100 + 1e-9) / 100).toFixed(2)}:1`;
+}
+
+export const formatFloor = (floor: number) => `${floor}:1`;
+
+export function measureState(measure: PairMeasure): ReadoutState {
+  if (measure.pair.inactive) return 'inactive';
+  return measure.passes ? 'pass' : 'fail';
+}
+
+export function readoutState(measures: PairMeasure[]): Readout {
+  const measure = closestToFailing(measures);
+  const state = measureState(measure);
+  const label = formatRatio(measure.ratio);
+  const verdict = state === 'inactive'
+    ? 'exempt as a disabled control'
+    : `${state === 'pass' ? 'meets' : 'below'} ${formatFloor(measure.floor)}`;
+  return { label, state, ariaLabel: `Contrast ${label}, ${verdict}`, measure };
+}
+
+export function ruleSentence(measure: PairMeasure): string {
+  const rule = CONTRAST_RULES[measure.pair.role];
+  let sentence = `WCAG 2.2 success criterion ${rule.criterion}, ${rule.name} (${rule.level}): `
+    + `${formatFloor(rule.floor)} against the colors behind it`;
+  if (rule.largeFloor !== undefined) {
+    sentence += `, or ${formatFloor(rule.largeFloor)} for large text (${LARGE_TEXT_PX}px, or ${LARGE_BOLD_PX}px bold)`;
+  }
+  sentence += '.';
+  if (measure.pair.inactive) sentence += ' Disabled controls are exempt.';
+  return sentence;
+}

package/src/editor/ui/sections/CustomColorsSection.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { get } from 'svelte/store';
+  import {
+    editorState,
+    beginScope,
+    commitScope,
+    cancelScope,
+    beginSliderGesture,
+    setCustomColor,
+    removeCustomColor,
+    replaceAndRemoveCustomColor,
+    type Scope,
+  } from '../../core/store/editorStore';
+  import type { Oklch } from '../../core/palettes/oklch';
+  import ColorEditPanel from '../ColorEditPanel.svelte';
+  import CustomColorReplaceStep from '../CustomColorReplaceStep.svelte';
+
+  interface Props {
+    copiedVar?: string | null;
+    oncopy?: (variable: string) => void;
+  }
+
+  let { copiedVar = null, oncopy }: Props = $props();
+
+  const PREFIX = '--color-custom-';
+  const customNumber = (v: string) => v.slice(PREFIX.length);
+
+  let tokens = $derived(
+    [...$editorState.customColors.tokens]
+      .sort((a, b) => Number(customNumber(a.variable)) - Number(customNumber(b.variable))),
+  );
+
+  /** An open edit of one custom colour, or the replace step of its remove. */
+  interface Session {
+    mode: 'edit' | 'replace';
+    variable: string;
+    draft: Oklch;
+  }
+  let session = $state<Session | null>(null);
+  // Held outside $state: the store matches an open scope by identity, and a
+  // proxied handle would never match.
+  let sessionScope: Scope | null = null;
+
+  function tokenColor(variable: string): Oklch | undefined {
+    return get(editorState).customColors.tokens.find((t) => t.variable === variable)?.color;
+  }
+
+  function openEdit(variable: string) {
+    const color = tokenColor(variable);
+    if (!color) return;
+    sessionScope = beginScope({ label: `edit custom colour ${variable}`, collapseToOne: true, clipUndoFloor: true });
+    session = { mode: 'edit', variable, draft: { ...color } };
+  }
+
+  function editDraft(h: number, c: number, lPct: number) {
+    if (!session) return;
+    session.draft = { l: lPct / 100, c, h };
+    setCustomColor(session.variable, session.draft);
+  }
+
+  function closeEdit(commit: boolean) {
+    if (sessionScope) {
+      if (commit) commitScope(sessionScope);
+      else cancelScope(sessionScope);
+    }
+    sessionScope = null;
+    session = null;
+  }
+
+  function requestRemove(variable: string) {
+    if (removeCustomColor(variable)) return;
+    const color = tokenColor(variable);
+    if (color) session = { mode: 'replace', variable, draft: { ...color } };
+  }
+
+  function confirmReplace(replacement: string) {
+    if (!session) return;
+    const { variable } = session;
+    session = null;
+    replaceAndRemoveCustomColor(variable, replacement);
+  }
+
+  onDestroy(() => {
+    if (sessionScope) cancelScope(sessionScope);
+  });
+</script>
+
+<section class="section" id="custom-colors">
+  <h2 class="section-title">Custom Colours</h2>
+  <p class="editor-intro">A custom colour holds its own OKLCH value, and every slot that names it follows its edits. Add one from the Custom row of any colour picker. Removing a colour in use first asks which token takes its place.</p>
+  {#if tokens.length === 0}
+    <p class="custom-empty">This theme has no custom colours.</p>
+  {:else}
+    <div class="custom-grid">
+      {#each tokens as token (token.variable)}
+        {@const active = session?.variable === token.variable}
+        <div class={['custom-item', { active }]}>
+          <div class="custom-box" style="background: var({token.variable});"></div>
+          <div class="token-info">
+            <button class={['token-variable copyable', { copied: copiedVar === token.variable }]} onclick={() => oncopy?.(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+            {#if !active}
+              <div class="custom-actions">
+                <button
+                  class="custom-btn"
+                  aria-label="Edit {token.variable}"
+                  disabled={session !== null}
+                  onclick={() => openEdit(token.variable)}
+                >Edit</button>
+                <button
+                  class="custom-btn"
+                  aria-label="Remove {token.variable}"
+                  disabled={session !== null}
+                  onclick={() => requestRemove(token.variable)}
+                >Remove</button>
+              </div>
+            {/if}
+          </div>
+          {#if active && session}
+            <div class="custom-editor-host">
+              {#if session.mode === 'edit'}
+                <ColorEditPanel
+                  title="Custom › {customNumber(session.variable)}"
+                  hue={session.draft.h}
+                  chroma={session.draft.c}
+                  lightness={session.draft.l * 100}
+                  onHueChromaChange={editDraft}
+                  onSliderStart={() => beginSliderGesture(`edit ${session?.variable ?? 'custom colour'}`)}
+                  onConfirm={() => closeEdit(true)}
+                  onCancel={() => closeEdit(false)}
+                />
+              {:else}
+                <CustomColorReplaceStep
+                  variable={session.variable}
+                  color={session.draft}
+                  onconfirm={confirmReplace}
+                  oncancel={() => (session = null)}
+                />
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-24);
+  }
+
+  .section-title {
+    font-size: var(--ui-font-size-2xl);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-primary);
+    margin: 0;
+    padding-bottom: var(--ui-space-8);
+    border-bottom: 2px solid var(--ui-border-high);
+  }
+
+  .editor-intro,
+  .custom-empty {
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+    margin: 0;
+  }
+
+  .token-variable.copyable {
+    all: unset;
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+    cursor: pointer;
+    transition: color var(--ui-transition-fast);
+  }
+
+  .token-variable.copyable:hover {
+    color: var(--ui-text-accent);
+  }
+
+  .token-variable.copyable.copied {
+    color: var(--ui-text-success);
+  }
+
+  .custom-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+    gap: var(--ui-space-16);
+  }
+
+  .custom-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-12);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-lg);
+    background: var(--ui-surface-lowest);
+    min-width: 0;
+  }
+
+  .custom-item.active {
+    grid-column: 1 / -1;
+    border-color: var(--ui-text-primary);
+  }
+
+  .custom-box {
+    height: 3rem;
+    border-radius: var(--ui-radius-md);
+  }
+
+  .token-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-space-8);
+  }
+
+  .custom-actions {
+    display: flex;
+    gap: var(--ui-space-4);
+  }
+
+  .custom-btn {
+    padding: var(--ui-space-2) var(--ui-space-10);
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-xs);
+    cursor: pointer;
+    font-family: inherit;
+  }
+
+  .custom-btn:hover:not(:disabled) {
+    color: var(--ui-text-primary);
+    border-color: var(--ui-border);
+  }
+
+  .custom-btn:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .custom-editor-host {
+    max-width: 28rem;
+    margin-top: var(--ui-space-8);
+    padding-top: var(--ui-space-12);
+    border-top: 1px dashed var(--ui-border-low);
+  }
+</style>

package/src/live-tokens/data/themes/autumn.json

@@ -2480,7 +2480,7 @@
       "createdAt": "2026-05-01T08:28:00.345Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--badge-brand-surface": "--surface-brand",
+        "--badge-brand-surface": "--surface-brand-low",
         "--badge-brand-text": "--text-brand",
         "--badge-brand-border": "--border-brand",
         "--badge-brand-text-font-family": "--font-sans",
@@ -2533,7 +2533,7 @@
         "--badge-alternate-blur": "--blur-none",
         "--badge-alternate-icon-size": "--icon-size-sm",
         "--badge-canvas-surface": "--surface-canvas",
-        "--badge-canvas-text": "--text-canvas",
+        "--badge-canvas-text": "--text-secondary",
         "--badge-canvas-border": "--border-canvas",
         "--badge-canvas-text-font-family": "--font-sans",
         "--badge-canvas-text-font-size": "--font-size-md",
@@ -2584,7 +2584,7 @@
         "--badge-warning-shadow": "--shadow-none",
         "--badge-warning-blur": "--blur-none",
         "--badge-warning-icon-size": "--icon-size-sm",
-        "--badge-danger-surface": "--surface-danger",
+        "--badge-danger-surface": "--surface-danger-low",
         "--badge-danger-text": "--text-danger",
         "--badge-danger-border": "--border-danger",
         "--badge-danger-text-font-family": "--font-sans",
@@ -2957,7 +2957,7 @@
         "--cornerbadge-text-font-size": "--font-size-sm",
         "--cornerbadge-text-font-weight": "--font-weight-medium",
         "--cornerbadge-text-line-height": "--line-height-none",
-        "--cornerbadge-brand-surface": "--surface-brand",
+        "--cornerbadge-brand-surface": "--surface-brand-low",
         "--cornerbadge-brand-border": "--border-brand",
         "--cornerbadge-brand-text": "--text-brand",
         "--cornerbadge-accent-surface": "--surface-accent",
@@ -2971,7 +2971,7 @@
         "--cornerbadge-alternate-text": "--text-alternate",
         "--cornerbadge-canvas-surface": "--surface-canvas",
         "--cornerbadge-canvas-border": "--border-canvas",
-        "--cornerbadge-canvas-text": "--text-canvas",
+        "--cornerbadge-canvas-text": "--text-secondary",
         "--cornerbadge-special-surface": "--surface-special",
         "--cornerbadge-special-border": "--border-special",
         "--cornerbadge-special-text": "--text-special",
@@ -2981,7 +2981,7 @@
         "--cornerbadge-warning-surface": "--surface-warning",
         "--cornerbadge-warning-border": "--border-warning",
         "--cornerbadge-warning-text": "--text-warning",
-        "--cornerbadge-danger-surface": "--surface-danger",
+        "--cornerbadge-danger-surface": "--surface-danger-low",
         "--cornerbadge-danger-border": "--border-danger",
         "--cornerbadge-danger-text": "--text-danger",
         "--cornerbadge-info-surface": "--surface-info",
@@ -3199,7 +3199,7 @@
         "--input-border-width": "--border-width-1",
         "--input-gap": "--space-8",
         "--input-default-surface": "--surface-neutral-lower",
-        "--input-default-border": "--border-neutral",
+        "--input-default-border": "--border-neutral-medium",
         "--input-default-text": "--text-primary",
         "--input-default-text-font-family": "--font-sans",
         "--input-default-text-font-size": "--font-size-sm",
@@ -3358,7 +3358,7 @@
         "--notification-warning-text-font-size": "--font-size-md",
         "--notification-warning-text-font-weight": "--font-weight-normal",
         "--notification-warning-text-line-height": "--line-height-normal",
-        "--notification-danger-surface": "--surface-danger",
+        "--notification-danger-surface": "--surface-danger-low",
         "--notification-danger-action-surface": "--surface-neutral-lowest",
         "--notification-danger-border": "--border-danger",
         "--notification-danger-border-width": "--border-width-1",
@@ -3442,7 +3442,7 @@
       "createdAt": "2026-05-10T20:44:44.372Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--radiobutton-default-dot-border-color": "--border-neutral",
+        "--radiobutton-default-dot-border-color": "--border-neutral-medium",
         "--radiobutton-default-dot-border-width": "--border-width-2",
         "--radiobutton-default-dot-fill": "--text-secondary",
         "--radiobutton-default-dot-size": "--dot-size-0",
@@ -3451,7 +3451,7 @@
         "--radiobutton-default-label-font-size": "--font-size-md",
         "--radiobutton-default-label-font-weight": "--font-weight-semibold",
         "--radiobutton-default-label-line-height": "--line-height-none",
-        "--radiobutton-hover-dot-border-color": "--border-neutral",
+        "--radiobutton-hover-dot-border-color": "--border-neutral-medium",
         "--radiobutton-hover-dot-border-width": "--border-width-2",
         "--radiobutton-hover-dot-fill": "--text-secondary",
         "--radiobutton-hover-dot-size": "--dot-size-50",
@@ -3460,7 +3460,7 @@
         "--radiobutton-hover-label-font-size": "--font-size-md",
         "--radiobutton-hover-label-font-weight": "--font-weight-semibold",
         "--radiobutton-hover-label-line-height": "--line-height-none",
-        "--radiobutton-selected-dot-border-color": "--border-neutral",
+        "--radiobutton-selected-dot-border-color": "--border-neutral-medium",
         "--radiobutton-selected-dot-border-width": "--border-width-2",
         "--radiobutton-selected-dot-fill": "--text-secondary",
         "--radiobutton-selected-dot-size": "--dot-size-50",
@@ -3569,7 +3569,7 @@
         "--segmentedcontrol-hover-tint": "--tint",
         "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
         "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
-        "--segmentedcontrol-bar-border": "--border-neutral",
+        "--segmentedcontrol-bar-border": "--border-neutral-medium",
         "--segmentedcontrol-bar-border-width": "--border-width-1",
         "--segmentedcontrol-bar-radius": "--radius-2xl",
         "--segmentedcontrol-bar-padding": "--space-8",
@@ -3600,7 +3600,7 @@
         "--segmentedcontrol-selected-text-font-weight": "--font-weight-normal",
         "--segmentedcontrol-selected-text-line-height": "--line-height-normal",
         "--segmentedcontrol-selected-icon": "--text-secondary",
-        "--segmentedcontrol-selected-border": "--border-brand",
+        "--segmentedcontrol-selected-border": "--border-brand-medium",
         "--segmentedcontrol-selected-border-width": "--border-width-1",
         "--segmentedcontrol-selected-radius": "--radius-xl",
         "--segmentedcontrol-disabled-surface": "--color-transparent",
@@ -3827,7 +3827,7 @@
         "--tabbar-hover-tab-bottom-radius": "--radius-md",
         "--tabbar-hover-indicator-width": "--border-width-2",
         "--tabbar-selected-text": "--text-primary",
-        "--tabbar-selected-border": "--color-brand-500",
+        "--tabbar-selected-border": "--border-brand-medium",
         "--tabbar-selected-surface": "--tint-low",
         "--tabbar-selected-text-font-family": "--font-sans",
         "--tabbar-selected-text-font-size": "--font-size-md",
@@ -3897,7 +3897,7 @@
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--toggle-track-surface": "--surface-neutral",
-        "--toggle-track-border": "--border-neutral",
+        "--toggle-track-border": "--border-neutral-medium",
         "--toggle-track-border-width": "--border-width-1",
         "--toggle-track-radius": "--radius-full",
         "--toggle-track-padding": "--space-6",
@@ -3912,7 +3912,7 @@
         "--toggle-hover-track-surface": "--surface-neutral-high",
         "--toggle-hover-thumb-surface": "--text-primary",
         "--toggle-on-track-surface": "--surface-brand-high",
-        "--toggle-on-track-border": "--border-brand",
+        "--toggle-on-track-border": "--border-brand-medium",
         "--toggle-on-thumb-surface": "--text-primary",
         "--toggle-on-thumb-border": "--border-brand-strong",
         "--toggle-on-hover-track-surface": "--surface-brand-higher",
@@ -3948,13 +3948,13 @@
       "updatedAt": "2026-09-02T10:55:50.831Z",
       "aliases": {
         "--slider-single-track-surface": "--surface-neutral-lowest",
-        "--slider-single-track-border": "--border-neutral-subtle",
+        "--slider-single-track-border": "--border-neutral-medium",
         "--slider-single-track-border-width": "--border-width-1",
         "--slider-single-track-height": "--space-8",
         "--slider-single-track-radius": "--radius-full",
         "--slider-single-fill": "--surface-brand-high",
         "--slider-single-thumb-surface": "--surface-neutral-highest",
-        "--slider-single-thumb-border": "--border-brand",
+        "--slider-single-thumb-border": "--border-brand-medium",
         "--slider-single-thumb-border-width": "--border-width-2",
         "--slider-single-thumb-size": "--font-size-lg",
         "--slider-single-thumb-radius": "--radius-full",
@@ -3966,13 +3966,13 @@
         "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
         "--slider-single-disabled-thumb-border": "--border-neutral",
         "--slider-range-track-surface": "--surface-neutral-lowest",
-        "--slider-range-track-border": "--border-neutral-subtle",
+        "--slider-range-track-border": "--border-neutral-medium",
         "--slider-range-track-border-width": "--border-width-1",
         "--slider-range-track-height": "--space-8",
         "--slider-range-track-radius": "--radius-full",
         "--slider-range-fill": "--surface-brand-high",
         "--slider-range-thumb-surface": "--surface-neutral-highest",
-        "--slider-range-thumb-border": "--border-brand",
+        "--slider-range-thumb-border": "--border-brand-medium",
         "--slider-range-thumb-border-width": "--border-width-2",
         "--slider-range-thumb-size": "--font-size-lg",
         "--slider-range-thumb-radius": "--radius-full",