@motion-proto/live-tokens 0.43.0 → 0.45.0

package/src/editor/ui/colors/ColorStory.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-  import { editorState } from '../../core/store/editorStore';
   import { oklchToHexClamped } from '../../core/palettes/oklch';
-  import { palettesToVars, PALETTE_SPECS, type PaletteSpec } from '../../core/palettes/paletteDerivation';
-  import { defaultPaletteConfig } from '../palette/paletteMath';
+  import { palettesToVars } from '../../core/palettes/paletteDerivation';
   import { contrastRatio } from '../../core/palettes/contrast';
-  import { recommendNeutralText } from '../../core/palettes/recommendText';
-  import { applySuggestedNeutralText } from './paletteBaseColor';
-  import UIPillButton from '../UIPillButton.svelte';
   import type { PaletteConfig } from '../../core/themes/themeTypes';
 
+  interface Props {
+    /** Every family's config, spec defaults filled in (palettesWithDefaults). */
+    full: Record<string, PaletteConfig>;
+  }
+
+  let { full }: Props = $props();
+
   // 60-30-10 as an area composition: the background surface is the dominant 60%
   // field (the page), and Brand/Accent/Special are the tones shown against it.
   // Shares are flex-grow weights, not exact percentages.
@@ -18,6 +20,8 @@
     { label: 'Special', ns: 'special', share: 2 },
   ] as const;
 
+  const TEXT_STEPS = ['primary', 'secondary', 'tertiary'] as const;
+
   const FUNCTIONAL = [
     { label: 'Info', ns: 'info' },
     { label: 'Success', ns: 'success' },
@@ -30,31 +34,15 @@
   // 1:1. Derived --surface-* tokens deliberately do not appear here: their
   // lightness is curve-owned, which decouples the story from the wheel and
   // reads as broken.
-  const SPEC_BY_LABEL: Record<string, PaletteSpec> = Object.fromEntries(PALETTE_SPECS.map((s) => [s.label, s]));
-
   function seedHex(label: string): string {
-    const { l, c, h } = $editorState.palettes[label]?.baseColor ?? SPEC_BY_LABEL[label].initialColor;
+    const { l, c, h } = full[label].baseColor;
     return oklchToHexClamped(l, c, h);
   }
 
-  // Text still renders from this store-derived map (text derivation tracks the
-  // seed), never from the ambient :root variables — those stay at vendored
-  // defaults for families a loaded theme doesn't configure, so a story bound
-  // to them silently goes static.
-  let full = $derived.by(() => {
-    const map: Record<string, PaletteConfig> = {};
-    for (const spec of PALETTE_SPECS) {
-      map[spec.label] =
-        $editorState.palettes[spec.label] ??
-        defaultPaletteConfig({ baseColor: spec.initialColor, neutral: spec.neutral ?? false });
-    }
-    return map;
-  });
-
+  // Text renders from this map (text derivation tracks the seed), never from the
+  // ambient :root variables — those stay at vendored defaults for families a
+  // loaded theme doesn't configure, so a story bound to them silently goes static.
   let vars = $derived(palettesToVars(full));
-  let useBlackWhite = $state(false);
-  let rec = $derived(recommendNeutralText(full, undefined, useBlackWhite));
-  let partialCoverage = $derived(rec.suggestions.filter((s) => !s.current.coverage.full));
 
   // Shadow the consumed text variables locally with the store-derived values;
   // the page field is the Canvas family's SEED, not its derived page step.
@@ -79,8 +67,6 @@
     return r === null ? null : `${(Math.floor(r * 10) / 10).toFixed(1)}:1`;
   }
 
-  let bgRatio = $derived(ratioOnBg('--text-primary'));
-
   // Inverted is measured against the fill it sits on (primary), not the page:
   // the pill below IS that pairing, so the number describes what is shown. A
   // mid-lightness primary makes this pairing inherently low-contrast — the
@@ -96,19 +82,20 @@
 
 <div class="story" style={storyVars}>
   <div class="field">
-    <div class="field-head">
-      <span class="field-label">Canvas</span>
-      {#if fmt(bgRatio)}<span class="ratio">{fmt(bgRatio)}</span>{/if}
+    <span class="field-label">Canvas</span>
+
+    <!-- Each step renders in its own token, so the word IS the sample and the
+         ratio beside it measures exactly what you are reading. -->
+    <div class="text-steps">
+      {#each TEXT_STEPS as step (step)}
+        {@const r = fmt(ratioOnBg(`--text-${step}`))}
+        <p class="text-step" style:color="var(--text-{step})">
+          {step}
+          {#if r}<span class="ratio">{r}</span>{/if}
+        </p>
+      {/each}
     </div>
-    <p class="body">The dominant surface. Body text sits here.</p>
-    <p class="secondary">
-      Secondary text follows the same field.
-      {#if fmt(ratioOnBg('--text-secondary'))}<span class="ratio">{fmt(ratioOnBg('--text-secondary'))}</span>{/if}
-    </p>
-    <p class="tertiary">
-      Tertiary text steps back once more.
-      {#if fmt(ratioOnBg('--text-tertiary'))}<span class="ratio">{fmt(ratioOnBg('--text-tertiary'))}</span>{/if}
-    </p>
+
     <p class="inverted-row">
       <span class="inverted-pill">
         Inverted text flips onto primary.
@@ -116,52 +103,13 @@
       </span>
     </p>
 
-    <!-- Always rendered: toggling "Use black and white" changes the
-         suggestion, so the toggle must stay reachable even when the current
-         values already match. -->
-    <div class="suggest-row">
-      <span class="suggest-label">Suggested</span>
-      {#each rec.suggestions as s (s.step)}
-        <span class="suggest-entry" class:dim={!s.differs}>
-          <span class="fn-dot" style:--dot={s.suggested.hex}></span>
-          <span class="suggest-step">{s.step}</span>
-          <span class="ratio">{fmt(contrastRatio(s.suggested.hex, seedHex('Canvas')))}</span>
-        </span>
-      {/each}
-      <label class="bw-toggle" title="Anchor the suggestion at pure white or black instead of the softened extreme">
-        <input type="checkbox" bind:checked={useBlackWhite} />
-        <span>Use black and white</span>
-      </label>
-      {#if rec.anyDiffers}
-        <UIPillButton
-          icon="fa-arrow-down-short-wide"
-          title="Anchor on primary and step secondary/tertiary down by even lightness drops, floored at WCAG AA (one undo)"
-          onclick={() => applySuggestedNeutralText(useBlackWhite)}
-        >
-          Use suggested
-        </UIPillButton>
-      {/if}
-    </div>
-
-    {#if partialCoverage.length > 0}
-      <div
-        class="coverage-alert"
-        title="WCAG AA (4.5:1) coverage across the neutral surface steps. Informational, nothing is blocked."
-      >
-        <i class="fa-solid fa-triangle-exclamation"></i>
-        <span>
-          AA reach: {partialCoverage
-            .map((s) => `${s.step} ${s.current.coverage.cleared}/${s.current.coverage.total} surfaces`)
-            .join(' · ')}
-        </span>
-      </div>
-    {/if}
-
     <div class="functional-row">
       {#each FUNCTIONAL as fn (fn.ns)}
         {@const r = fmt(ratioOnBg(`--text-${fn.ns}`))}
         <span class="fn-chip">
-          <span class="fn-dot" style:--dot={seedHex(fn.label)}></span>
+          <!-- The dot shows the TEXT color the ratio measures (shadowed via
+               storyVars), matching the label — not the family's seed fill. -->
+          <span class="fn-dot" style:--dot="var(--text-{fn.ns})"></span>
           <span class="fn-label" style:color="var(--text-{fn.ns})">{fn.label}</span>
           {#if r}<span class="ratio">{r}</span>{/if}
         </span>
@@ -197,49 +145,25 @@
   }
 
   /* Transparent: the background surface reads directly, no card over it. */
+  /* No min-height: 0 — the field must keep its content min-height so tall
+     text wrapping grows the frame instead of overflowing onto the tone bars. */
   .field {
     flex-grow: 60;
     flex-basis: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-4);
-    min-height: 0;
-    padding: var(--ui-space-8) var(--ui-space-12);
-    color: var(--text-primary);
-  }
-
-  .field-head {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
     gap: var(--ui-space-8);
+    padding: var(--ui-space-12);
+    color: var(--text-primary);
   }
 
   .field-label {
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-weight-semibold);
   }
 
-  .body {
-    margin: 0;
-    font-size: var(--ui-font-size-sm);
-    color: var(--text-primary);
-  }
-
-  .secondary {
-    margin: 0;
-    font-size: var(--ui-font-size-xs);
-    color: var(--text-secondary);
-  }
-
-  .tertiary {
-    margin: 0;
-    font-size: var(--ui-font-size-xs);
-    color: var(--text-tertiary);
-  }
-
   .inverted-row {
-    margin: 0;
+    margin: var(--ui-space-8) 0 0;
   }
 
   /* The pill's fill IS the primary text color: the flip is shown literally,
@@ -252,63 +176,30 @@
     border-radius: var(--ui-radius-full);
     background: var(--text-primary);
     color: var(--text-inverted);
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
   }
 
-  .suggest-row {
+  .text-steps {
     display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--ui-space-8);
-  }
-
-  .suggest-label {
-    font-size: var(--ui-font-size-sm);
-    font-weight: var(--ui-font-weight-semibold);
-    opacity: 0.6;
-  }
-
-  .suggest-entry {
-    display: flex;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
     gap: var(--ui-space-6);
   }
 
-  .suggest-entry.dim {
-    opacity: 0.45;
-  }
-
-  .suggest-step {
-    font-size: var(--ui-font-size-xs);
-  }
-
-  .bw-toggle {
+  .text-step {
     display: flex;
-    align-items: center;
-    gap: var(--ui-space-4);
-    font-size: var(--ui-font-size-xs);
-    cursor: pointer;
-  }
-
-  .bw-toggle input {
+    align-items: baseline;
+    gap: var(--ui-space-8);
     margin: 0;
-    cursor: pointer;
-  }
-
-  .coverage-alert {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-6);
-    font-size: var(--ui-font-size-xs);
-    opacity: 0.75;
+    font-size: var(--ui-font-size-md);
   }
 
   .functional-row {
     display: flex;
-    gap: var(--ui-space-8);
+    gap: var(--ui-space-8) var(--ui-space-12);
     flex-wrap: wrap;
     margin-top: auto;
-    padding-top: var(--ui-space-12);
+    padding-top: var(--ui-space-16);
   }
 
   .fn-chip {
@@ -326,17 +217,18 @@
   }
 
   .fn-label {
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-weight-semibold);
   }
 
+  /* Like .field, no min-height: 0 — the bars' min heights must grow the frame
+     rather than spill past its border when the field's text is tall. */
   .tones {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-8);
     flex-grow: 40;
     flex-basis: 0;
-    min-height: 0;
   }
 
   .tone {
@@ -363,12 +255,12 @@
   }
 
   .tone-name {
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-weight-semibold);
   }
 
   .ratio {
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     font-family: var(--ui-font-mono);
     opacity: 0.75;
   }

package/src/editor/ui/colors/ColorWheel.svelte

@@ -60,7 +60,7 @@
   const EXT_OFFSET = 20;  // external handle radius beyond the disc rim (room for the dotted tether)
   const NUM_OFFSET = 24;  // numeral radius beyond the external handles
   const MIN_SIZE = 240;
-  const MAX_SIZE = 360;
+  const MAX_SIZE = 560;
 
   const normDeg = (d: number) => ((d % 360) + 360) % 360;
   const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
@@ -469,11 +469,11 @@
          its inner half — reads as one axis that extends outward as dots to the
          external handle. Same angle as the handle, so it tracks live. -->
     {#each visibleRender as t (t.index)}
-      <line class="tether" x1={center} y1={center} x2={t.ext.x} y2={t.ext.y} />
+      <line class="tether" class:selected={t.selected} x1={center} y1={center} x2={t.ext.x} y2={t.ext.y} />
     {/each}
     {#each visibleRender as t (t.index)}
       {#if t.bound}
-        <line class="rail" x1={center} y1={center} x2={t.dot.x} y2={t.dot.y} />
+        <line class="rail" class:selected={t.selected} x1={center} y1={center} x2={t.dot.x} y2={t.dot.y} />
       {/if}
     {/each}
   </svg>
@@ -483,7 +483,7 @@
   {/each}
 
   {#each visibleRender as t (t.index)}
-    <span class="axis-num" style="left: {t.num.x}px; top: {t.num.y}px" aria-hidden="true">{t.index + 1}</span>
+    <span class="axis-num" class:selected={t.selected} style="left: {t.num.x}px; top: {t.num.y}px" aria-hidden="true">{t.index + 1}</span>
   {/each}
 
   {#each visibleRender as t (t.index)}
@@ -583,7 +583,7 @@
   .rail {
     stroke: var(--ui-text-primary);
     stroke-width: 2;
-    opacity: 0.65;
+    opacity: 0.5;
   }
 
   /* Dotted continuation of the axis out to the external handle. Greyscale. */
@@ -592,7 +592,20 @@
     stroke-width: 1.5;
     stroke-dasharray: 2 4;
     stroke-linecap: round;
-    opacity: 0.9;
+    opacity: 0.7;
+  }
+
+  /* Selected family's axis: heavier stroke at full contrast, so the whole axis
+     reads as active alongside its enlarged dot and handle. */
+  .rail.selected {
+    stroke-width: 4;
+    opacity: 1;
+  }
+
+  .tether.selected {
+    stroke: var(--ui-text-primary);
+    stroke-width: 2.5;
+    opacity: 1;
   }
 
   /* Faint ring the external axis handles ride along. Decorative. */
@@ -725,12 +738,17 @@
     transform: translate(-50%, -50%);
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-primary);
+    color: var(--ui-text-tertiary);
     pointer-events: none;
     user-select: none;
     z-index: 3;
   }
 
+  .axis-num.selected {
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-sm);
+  }
+
   .dot:focus-visible,
   .ext-handle:focus-visible,
   .global-handle:focus-visible {

package/src/editor/ui/colors/ColorsTab.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { flip } from 'svelte/animate';
-  import { cubicOut } from 'svelte/easing';
   import { oklchToHexClamped } from '../../core/palettes/oklch';
   import { PALETTE_SPECS } from '../../core/palettes/paletteDerivation';
-  import { editorState, beginSliderGesture, transaction } from '../../core/store/editorStore';
+  import { editorState, beginSliderGesture } from '../../core/store/editorStore';
   import { applyHarmonyToAxes, modeActiveAxes, tintNeutralsFromAnchor, type HarmonyMode } from '../../core/palettes/colorHarmony';
   import ColorEditPanel from '../ColorEditPanel.svelte';
   import ColorWheel from './ColorWheel.svelte';
@@ -13,7 +11,12 @@
   import PaletteStepStrip from './PaletteStepStrip.svelte';
   import HarmonyAxesList from './HarmonyAxesList.svelte';
   import UIPillButton from '../UIPillButton.svelte';
-  import { setBaseColor, setBaseColors, setAxisHues, applySolvedTextCurves } from './paletteBaseColor';
+  import {
+    setBaseColor,
+    setBaseColors,
+    setAxisHues,
+    palettesWithDefaults,
+  } from './paletteBaseColor';
   import { HARMONY_MODE_BUTTONS } from './harmonyModeIcons';
   import { dockGrow } from '../palette/dockMagnify';
 
@@ -61,9 +64,7 @@
     if (Object.keys(patch).length) setBaseColors(patch, 'colors: tint neutrals from anchor');
   }
 
-  function deriveAccessibleText() {
-    transaction('derive accessible text', applySolvedTextCurves);
-  }
+  let fullPalettes = $derived(palettesWithDefaults($editorState.palettes));
 
   let swatches = $derived.by(() => {
     // A family bound to an inactive axis edits in dot mode, so it is not "on the wheel".
@@ -74,17 +75,16 @@
         label: spec.label,
         display: spec.displayLabel ?? spec.label,
         hex: oklchToHexClamped(l, c, h),
-        l,
         onWheel: $editorState.harmonyAxes.some((a, i) => a.family === spec.label && active[i]),
       };
     });
   });
 
   const FUNCTIONAL_FAMILIES = new Set(['Info', 'Success', 'Warning', 'Danger']);
-  // Light → dark, matching the palette ramps (white bookend on the left).
-  const byLuminance = (arr: typeof swatches) => [...arr].sort((a, b) => b.l - a.l);
-  let coreSwatches = $derived(byLuminance(swatches.filter((sw) => !FUNCTIONAL_FAMILIES.has(sw.label))));
-  let functionalSwatches = $derived(byLuminance(swatches.filter((sw) => FUNCTIONAL_FAMILIES.has(sw.label))));
+  // Declaration order, never a computed one: sorting by luminance made the row
+  // reshuffle under the pointer while a lightness edit was in flight.
+  let coreSwatches = $derived(swatches.filter((sw) => !FUNCTIONAL_FAMILIES.has(sw.label)));
+  let functionalSwatches = $derived(swatches.filter((sw) => FUNCTIONAL_FAMILIES.has(sw.label)));
 
   let shownModeLabel = $derived(
     HARMONY_MODE_BUTTONS.find((b) => b.mode === (hoverMode ?? activeMode))?.label ?? '',
@@ -135,7 +135,6 @@
 
         <div class="harmony-actions">
           <UIPillButton
-            size="compact"
             icon="fa-fill-drip"
             title="Re-hue Neutral and Alternate to the anchor color (their own chroma and lightness kept)"
             onclick={tintNeutrals}
@@ -183,7 +182,6 @@
                 aria-label={`Select ${sw.display}`}
                 aria-pressed={selected === sw.label}
                 onclick={() => select(sw.label)}
-                animate:flip={{ duration: 200, easing: cubicOut }}
               >
                 <span class="chip">
                   {#if sw.onWheel}<span class="wheel-dot" title="On the wheel" aria-hidden="true"></span>{/if}
@@ -225,24 +223,17 @@
 
   <div class="pane">
     <section id="colors-story" class="block">
-      <div class="head-row">
-        <header class="block-head">
-          <span class="eyebrow">Proportional preview</span>
-          <h2 class="title">Color Story</h2>
-        </header>
-        <UIPillButton
-          icon="fa-wand-magic-sparkles"
-          title="Solve each family's Text lightness curve so derived text meets WCAG AA against its surfaces (one undo)"
-          onclick={deriveAccessibleText}
-        >Derive accessible text</UIPillButton>
-      </div>
-      <ColorStory />
+      <header class="block-head">
+        <span class="eyebrow">Proportional preview</span>
+        <h2 class="title">Color Story</h2>
+      </header>
+      <ColorStory full={fullPalettes} />
     </section>
 
     <section id="colors-axes" class="block">
       <h2 class="title">Harmony axes</h2>
       <p class="axes-desc">Each axis owns a hue. Drop a color on an axis to bind it. The color adopts the axis hue and follows the axis. Drag a color to Unassigned to let it float free.</p>
-      <HarmonyAxesList {activeMode} />
+      <HarmonyAxesList {activeMode} {selected} onSelect={select} />
     </section>
   </div>
 </div>
@@ -255,6 +246,17 @@
     align-items: start;
   }
 
+  /* Wide standalone layouts (Colors page, full-screen editor): pin the story
+     pane to the width it was designed at in the docked panel — wider stretches
+     the seed-color bars into heavy slabs — and let the wheel column absorb the
+     rest. The docked panel's iframe viewport stays below this breakpoint. */
+  @media (min-width: 1200px) {
+    .colors-tab {
+      grid-template-columns: minmax(0, 1fr) 30rem;
+      gap: var(--ui-space-48);
+    }
+  }
+
   .pane {
     display: flex;
     flex-direction: column;
@@ -264,7 +266,7 @@
 
   .axes-desc {
     margin: 0;
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     line-height: 1.5;
     color: var(--ui-text-secondary);
   }
@@ -424,14 +426,6 @@
     color: var(--ui-text-secondary);
   }
 
-  .head-row {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: var(--ui-space-12);
-    flex-wrap: wrap;
-  }
-
   .harmony-actions {
     display: flex;
     gap: var(--ui-space-8);
@@ -445,8 +439,7 @@
   }
 
   /* Dock magnification, mirroring PaletteStepStrip: the flex-grow transition
-     animates the selected swatch opening while flip walks it to its
-     luminance-sorted spot as lightness is dialed. */
+     animates the selected swatch opening in place. */
   .swatch-row {
     display: flex;
     align-items: flex-end;

package/src/editor/ui/colors/HarmonyAxesList.svelte

@@ -12,9 +12,12 @@
     /** The applied harmony mode: an unbound slot is disabled when the geometry
      *  deals it no distinct position (complementary enables only the first two). */
     activeMode: HarmonyMode;
+    /** Family selected in the swatch grid / wheel — its row (or chip) reads as active here. */
+    selected: string | null;
+    onSelect: (family: string) => void;
   }
 
-  let { activeMode }: Props = $props();
+  let { activeMode, selected, onSelect }: Props = $props();
 
   const DRAG_TYPE = 'application/x-harmony-family';
   // Unbound swatch previews the hue a dropped color would take, at fixed preview
@@ -113,6 +116,7 @@
     <div
       class="axis-row"
       class:disabled
+      class:selected={axis.family !== null && axis.family === selected}
       class:drop-target={dragTarget === i}
       aria-disabled={disabled || undefined}
       ondragover={(e) => onDragOver(e, i)}
@@ -126,13 +130,16 @@
         <button
           type="button"
           class="chip"
+          class:selected={family === selected}
           draggable="true"
           data-family={family}
           aria-label={`${family}, ${AXIS_ROLES[i]} axis, position ${i + 1} of ${positionCount}. Arrow up or down to move it, Delete to unbind.`}
+          aria-pressed={family === selected}
           title="Drag to another axis or to Unassigned. Arrow keys move it, Delete unbinds."
           ondragstart={(e) => onDragStart(e, family)}
           ondragend={onDragEnd}
           onkeydown={(e) => onChipKeydown(e, family)}
+          onclick={() => onSelect(family)}
         >
           <span class="grip" aria-hidden="true">⋮⋮</span>
           <span class="chip-swatch" style="--fill: {familyHex(family)}"></span>
@@ -159,13 +166,16 @@
         <button
           type="button"
           class="chip"
+          class:selected={family === selected}
           draggable="true"
           data-family={family}
           aria-label={`${family}, unassigned, position ${positionCount} of ${positionCount}. Arrow up to bind it to ${AXIS_ROLES[lastAxis]}.`}
+          aria-pressed={family === selected}
           title={`Drag onto an axis to bind it. Arrow up binds it to ${AXIS_ROLES[lastAxis]}.`}
           ondragstart={(e) => onDragStart(e, family)}
           ondragend={onDragEnd}
           onkeydown={(e) => onChipKeydown(e, family)}
+          onclick={() => onSelect(family)}
           animate:flip={{ duration: 200, easing: cubicOut }}
         >
           <span class="grip" aria-hidden="true">⋮⋮</span>
@@ -195,7 +205,7 @@
     background: var(--ui-surface-lowest);
     border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     transition:
       border-color var(--ui-transition-fast),
       background var(--ui-transition-fast);
@@ -207,6 +217,19 @@
     background: var(--ui-surface-low);
   }
 
+  /* The family selected in the swatch grid / wheel: the row's numeral and role
+     go full-contrast so the selection reads across both surfaces. */
+  .axis-row.selected {
+    border-color: var(--ui-text-primary);
+    background: var(--ui-surface-low);
+  }
+
+  .axis-row.selected .role,
+  .axis-row.selected .role-num {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
   .role {
     flex: none;
     width: 6.5rem;
@@ -241,7 +264,7 @@
 
   .empty {
     color: var(--ui-text-tertiary);
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
   }
 
   .grip {
@@ -262,7 +285,7 @@
     border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-primary);
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     line-height: 1;
     cursor: grab;
     user-select: none;
@@ -272,6 +295,11 @@
     border-color: var(--ui-border-high);
   }
 
+  .chip.selected {
+    border-color: var(--ui-text-primary);
+    background: var(--ui-surface-high);
+  }
+
   .chip:focus-visible {
     outline: 2px solid var(--ui-border-higher);
     outline-offset: 2px;