@motion-proto/live-tokens 0.67.1 → 0.69.0

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildTypeGroupTokens, buildTypeGroupShareableContexts } from './scaffolding/buildTypeGroupTokens';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'segmentedcontrol';
 
@@ -123,14 +123,55 @@
   const linkableContexts = new Map<string, string>(
     buildTypeGroupShareableContexts(typeGroups),
   );
+
+  // The hover tint is off unless a project turns it on: the gate holds a
+  // transparent layer, a no-op, until it holds the tint itself.
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'hover-tint',
+      variants: ['default'],
+      variable: () => '--segmentedcontrol-hover-tint-enabled',
+      values: ['var(--color-transparent)', 'var(--segmentedcontrol-hover-tint)'],
+      default: { default: 'var(--color-transparent)' },
+    },
+  ];
 </script>
 
 <script lang="ts">
   import SegmentedControl from '../../system/components/SegmentedControl.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../core/store/editorStore';
+  import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import Toggle from '../ui/Toggle.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+
+  // One switch. Turning the tint on also stands each hover surface down to its
+  // own base, so hover is the tint alone rather than a swap wearing a wash.
+  // Written as aliases rather than gated in CSS: a component token's value is
+  // substituted at :root, so it can never name a per-variant private var.
+  // Off clears the overrides, returning each surface to its shipped default.
+  const HOVER_SWAPS: readonly (readonly [hover: string, base: string])[] = [
+    ['--segmentedcontrol-option-hover-surface', '--color-transparent'],
+  ];
+  const TINT_ON = 'var(--segmentedcontrol-hover-tint)';
+  const TINT_OFF = 'var(--color-transparent)';
+
+  let tintOn = $derived.by(() => {
+    const ref = $editorState.components.segmentedcontrol?.aliases['--segmentedcontrol-hover-tint-enabled'];
+    return (ref?.kind === 'literal' ? ref.value : TINT_OFF) === TINT_ON;
+  });
+
+  function setTintOn(checked: boolean) {
+    setComponentAlias('segmentedcontrol', '--segmentedcontrol-hover-tint-enabled', {
+      kind: 'literal',
+      value: checked ? TINT_ON : TINT_OFF,
+    });
+    for (const [hover, base] of HOVER_SWAPS) {
+      if (checked) setComponentAlias('segmentedcontrol', hover, { kind: 'token', name: base });
+      else clearComponentAlias('segmentedcontrol', hover);
+    }
+  }
 
   type Segment = { value: string; label: string; icon?: string; disabled?: boolean };
   const segments: Segment[] = [
@@ -148,7 +189,12 @@
   let activeTypeGroups = $derived(previewSize === 'small' ? emptyTypeGroups : typeGroups);
 
   let visibleStates = $derived(Object.fromEntries(
-    Object.entries(activeStates).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+    Object.entries(activeStates).map(([name, list]) => [
+      name,
+      withLinkedDisabled(list, linked.varSet).map((t) =>
+        tintOn && t.variable.endsWith('-hover-surface') ? { ...t, disabled: true } : t,
+      ),
+    ]),
   ) as Record<string, Token[]>);
 </script>
 
@@ -160,6 +206,20 @@
     typeGroups={activeTypeGroups}
     {component}
   >
+    {#snippet extraPropertyRows(stateName)}
+      {#if stateName === 'hover option'}
+        <div class="property-row" data-token-variables="--segmentedcontrol-hover-tint-enabled">
+          <span class="property-label">tint layer</span>
+          <Toggle checked={tintOn} onchange={setTintOn} />
+        </div>
+        {#if tintOn}
+          <div class="property-row">
+            <span class="property-label">tint color</span>
+            <UIPaletteSelector variable="--segmentedcontrol-hover-tint" {component} showNone={false} />
+          </div>
+        {/if}
+      {/if}
+    {/snippet}
     {#snippet previewActions()}
       <label>
         <span>Size</span>

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'sidenavigation';
 
@@ -259,14 +259,59 @@
     ['--sidenavigation-panel-padding', 'panel'],
     ['--sidenavigation-title-label-border-width', 'title block'],
   ]);
+
+  // The hover tint is off unless a project turns it on: the gate holds a
+  // transparent layer, a no-op, until it holds the tint itself.
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'hover-tint',
+      variants: ['default'],
+      variable: () => '--sidenavigation-hover-tint-enabled',
+      values: ['var(--color-transparent)', 'var(--sidenavigation-hover-tint)'],
+      default: { default: 'var(--color-transparent)' },
+    },
+  ];
 </script>
 
 <script lang="ts">
   import SideNavigation, { type SideNavSection, type SideNavFooter } from '../../system/components/SideNavigation.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../core/store/editorStore';
+  import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import Toggle from '../ui/Toggle.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+
+  // One switch. Turning the tint on also stands each hover surface down to its
+  // own base, so hover is the tint alone rather than a swap wearing a wash.
+  // Written as aliases rather than gated in CSS: a component token's value is
+  // substituted at :root, so it can never name a per-variant private var.
+  // Off clears the overrides, returning each surface to its shipped default.
+  const HOVER_SWAPS: readonly (readonly [hover: string, base: string])[] = [
+    ['--sidenavigation-title-hover-surface', '--sidenavigation-title-default-surface'],
+    ['--sidenavigation-toggle-hover-surface', '--sidenavigation-toggle-default-surface'],
+    ['--sidenavigation-section-hover-surface', '--sidenavigation-section-default-surface'],
+    ['--sidenavigation-item-hover-surface', '--sidenavigation-item-default-surface'],
+    ['--sidenavigation-footer-hover-surface', '--sidenavigation-footer-default-surface'],
+  ];
+  const TINT_ON = 'var(--sidenavigation-hover-tint)';
+  const TINT_OFF = 'var(--color-transparent)';
+
+  let tintOn = $derived.by(() => {
+    const ref = $editorState.components.sidenavigation?.aliases['--sidenavigation-hover-tint-enabled'];
+    return (ref?.kind === 'literal' ? ref.value : TINT_OFF) === TINT_ON;
+  });
+
+  function setTintOn(checked: boolean) {
+    setComponentAlias('sidenavigation', '--sidenavigation-hover-tint-enabled', {
+      kind: 'literal',
+      value: checked ? TINT_ON : TINT_OFF,
+    });
+    for (const [hover, base] of HOVER_SWAPS) {
+      if (checked) setComponentAlias('sidenavigation', hover, { kind: 'token', name: base });
+      else clearComponentAlias('sidenavigation', hover);
+    }
+  }
 
   const demoSections: SideNavSection[] = [
     {
@@ -296,7 +341,12 @@
   let previewOpen = $state(true);
 
   let visibleStates = $derived(Object.fromEntries(
-    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+    Object.entries(states).map(([name, list]) => [
+      name,
+      withLinkedDisabled(list, linked.varSet).map((t) =>
+        tintOn && t.variable.endsWith('-hover-surface') ? { ...t, disabled: true } : t,
+      ),
+    ]),
   ) as Record<string, Token[]>);
 
   // Map the active part/state to the demo's force-hover / force-active hooks
@@ -331,6 +381,20 @@
     {component}
     selectorLabel="Part"
   >
+    {#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>
+          <Toggle checked={tintOn} onchange={setTintOn} />
+        </div>
+        {#if tintOn}
+          <div class="property-row">
+            <span class="property-label">tint color</span>
+            <UIPaletteSelector variable="--sidenavigation-hover-tint" {component} showNone={false} />
+          </div>
+        {/if}
+      {/if}
+    {/snippet}
     {#snippet children({ activeState })}
       {@const { forceHoverPart, forceActivePart } = deriveForce(activeState)}
       <div class="sn-preview-frame">

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

@@ -0,0 +1,186 @@
+<script module lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import { sliderVariants } from '../../system/components/Slider.svelte';
+
+  export const component = 'slider';
+  const variants = sliderVariants;
+  type Variant = typeof variants[number];
+
+  // Geometry and colour are identical across the two variants by default, so
+  // every row is linkable: an edit to the single slider's track moves the range
+  // slider's track until a user unlinks them on purpose.
+  function variantDefaultTokens(v: Variant): Token[] {
+    return [
+      { label: 'surface', element: 'track', canBeLinked: true, groupKey: 'track-surface', variable: `--slider-${v}-track-surface` },
+      { label: 'border', element: 'track', canBeLinked: true, groupKey: 'track-border', variable: `--slider-${v}-track-border` },
+      { label: 'border width', element: 'track', canBeLinked: true, groupKey: 'track-border-width', variable: `--slider-${v}-track-border-width` },
+      { label: 'height', element: 'track', canBeLinked: true, groupKey: 'track-height', variable: `--slider-${v}-track-height` },
+      { label: 'corner radius', element: 'track', canBeLinked: true, groupKey: 'track-radius', variable: `--slider-${v}-track-radius` },
+      { label: 'color', element: 'fill', canBeLinked: true, groupKey: 'fill', variable: `--slider-${v}-fill` },
+      { label: 'surface', element: 'thumb', canBeLinked: true, groupKey: 'thumb-surface', variable: `--slider-${v}-thumb-surface` },
+      { label: 'border', element: 'thumb', canBeLinked: true, groupKey: 'thumb-border', variable: `--slider-${v}-thumb-border` },
+      { label: 'border width', element: 'thumb', canBeLinked: true, groupKey: 'thumb-border-width', variable: `--slider-${v}-thumb-border-width` },
+      { label: 'size', element: 'thumb', canBeLinked: true, groupKey: 'thumb-size', variable: `--slider-${v}-thumb-size` },
+      { label: 'corner radius', element: 'thumb', canBeLinked: true, groupKey: 'thumb-radius', variable: `--slider-${v}-thumb-radius` },
+      { label: 'shadow', element: 'thumb', canBeLinked: true, groupKey: 'thumb-shadow', variable: `--slider-${v}-thumb-shadow` },
+    ];
+  }
+
+  function variantHoverTokens(v: Variant): Token[] {
+    return [
+      { label: 'thumb surface', canBeLinked: true, groupKey: 'hover-thumb-surface', variable: `--slider-${v}-hover-thumb-surface` },
+      { label: 'thumb border', canBeLinked: true, groupKey: 'hover-thumb-border', variable: `--slider-${v}-hover-thumb-border` },
+    ];
+  }
+
+  function variantDisabledTokens(v: Variant): Token[] {
+    return [
+      { label: 'track surface', canBeLinked: true, groupKey: 'disabled-track-surface', variable: `--slider-${v}-disabled-track-surface` },
+      { label: 'fill color', canBeLinked: true, groupKey: 'disabled-fill', variable: `--slider-${v}-disabled-fill` },
+      { label: 'thumb surface', canBeLinked: true, groupKey: 'disabled-thumb-surface', variable: `--slider-${v}-disabled-thumb-surface` },
+      { label: 'thumb border', canBeLinked: true, groupKey: 'disabled-thumb-border', variable: `--slider-${v}-disabled-thumb-border` },
+    ];
+  }
+
+  // The label and its gap are shared by both variants, so their rows render
+  // once, under the single variant beside the type groups.
+  const labelGapToken: Token = { label: 'label gap', element: 'label', groupKey: 'label-gap', variable: '--slider-label-gap' };
+
+  function variantStates(v: Variant): Record<string, Token[]> {
+    return {
+      default: v === 'single' ? [...variantDefaultTokens(v), labelGapToken] : variantDefaultTokens(v),
+      hover: variantHoverTokens(v),
+      disabled: variantDisabledTokens(v),
+    };
+  }
+
+  // The label and value readout are shared by both variants, so they live in
+  // one type group outside the per-variant states.
+  const typeGroups: Record<string, TypeGroupConfig[]> = {
+    default: [
+      {
+        legend: '',
+        element: 'label',
+        colorVariable: '--slider-label',
+        familyVariable: '--slider-label-font-family',
+        sizeVariable: '--slider-label-font-size',
+        weightVariable: '--slider-label-font-weight',
+        lineHeightVariable: '--slider-label-line-height',
+      },
+      {
+        legend: '',
+        element: 'value',
+        colorVariable: '--slider-value',
+        familyVariable: '--slider-value-font-family',
+        sizeVariable: '--slider-value-font-size',
+        weightVariable: '--slider-value-font-weight',
+        lineHeightVariable: '--slider-value-line-height',
+      },
+    ],
+  };
+
+  const typeGroupTokens: Token[] = [
+    { label: 'font family', canBeLinked: true, groupKey: 'label-font-family', variable: '--slider-label-font-family' },
+    { label: 'font size', canBeLinked: true, groupKey: 'label-font-size', variable: '--slider-label-font-size' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'label-font-weight', variable: '--slider-label-font-weight' },
+    { label: 'line height', canBeLinked: true, groupKey: 'label-line-height', variable: '--slider-label-line-height' },
+    { label: 'font family', canBeLinked: true, groupKey: 'value-font-family', variable: '--slider-value-font-family' },
+    { label: 'font size', canBeLinked: true, groupKey: 'value-font-size', variable: '--slider-value-font-size' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'value-font-weight', variable: '--slider-value-font-weight' },
+    { label: 'line height', canBeLinked: true, groupKey: 'value-line-height', variable: '--slider-value-line-height' },
+  ];
+
+  export const allTokens: Token[] = [
+    ...variants.flatMap((v) => Object.values(variantStates(v)).flat()),
+    ...buildTypeGroupColorTokens(typeGroups, { component }),
+    ...typeGroupTokens,
+  ];
+
+  const linkableContexts = new Map<string, string>([
+    ...variants.flatMap((v) =>
+      Object.entries(variantStates(v)).flatMap(([state, list]) =>
+        list.filter((t) => t.canBeLinked).map((t) => [t.variable, `${v} ${state}`] as [string, string]),
+      ),
+    ),
+    ...typeGroupTokens
+      .filter((t) => t.canBeLinked)
+      .map((t) => [t.variable, t.variable.includes('-label-') ? 'label' : 'value'] as [string, string]),
+  ]);
+
+  const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+</script>
+
+<script lang="ts">
+  import Slider from '../../system/components/Slider.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../core/store/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import { buildSiblings } from './scaffolding/siblings';
+
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+  let visibleVariantStates = $derived((v: Variant) => Object.fromEntries(
+    Object.entries(variantStates(v)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>);
+
+  let value = $state(40);
+  let low = $state(20);
+  let high = $state(70);
+
+  function previewProps(activeState: string) {
+    return {
+      disabled: activeState === 'disabled',
+      forceClass: activeState === 'hover' ? 'force-hover' : '',
+    };
+  }
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Slider"
+  description="A number chosen by position on a track. Single moves one thumb to a value; range moves two thumbs to a low and a high bound."
+  tokens={allTokens}
+  {linked}
+  variants={variantOptions}
+>
+  {#each variants as v}
+    <VariantGroup
+      name={v}
+      title={v.charAt(0).toUpperCase() + v.slice(1)}
+      states={visibleVariantStates(v)}
+      typeGroups={v === 'single' ? typeGroups : undefined}
+      {component}
+      siblings={buildSiblings(variants, v, variantStates)}
+    >
+      {#snippet children({ activeState })}
+        {@const p = previewProps(activeState)}
+        <div class="slider-demo-stack">
+          {#if v === 'range'}
+            <Slider
+              variant="range"
+              label="Price"
+              {low}
+              {high}
+              disabled={p.disabled}
+              class={p.forceClass}
+              onrangechange={(l, h) => { low = l; high = h; }}
+            />
+          {:else}
+            <Slider label="Volume" {value} disabled={p.disabled} class={p.forceClass} onchange={(n) => (value = n)} />
+          {/if}
+        </div>
+      {/snippet}
+    </VariantGroup>
+  {/each}
+</ComponentEditorBase>
+
+<style>
+  .slider-demo-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+    width: 100%;
+    max-width: 32rem;
+  }
+</style>

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'tabbar';
 
@@ -81,14 +81,55 @@
     [`--tabbar-${s}-text-line-height`, `${s} tab`] as const,
   ]),
   ]);
+
+  // The hover tint is off unless a project turns it on: the gate holds a
+  // transparent layer, a no-op, until it holds the tint itself.
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'hover-tint',
+      variants: ['default'],
+      variable: () => '--tabbar-hover-tint-enabled',
+      values: ['var(--color-transparent)', 'var(--tabbar-hover-tint)'],
+      default: { default: 'var(--color-transparent)' },
+    },
+  ];
 </script>
 
 <script lang="ts">
   import TabBar from '../../system/components/TabBar.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../core/store/editorStore';
+  import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import Toggle from '../ui/Toggle.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+
+  // One switch. Turning the tint on also stands each hover surface down to its
+  // own base, so hover is the tint alone rather than a swap wearing a wash.
+  // Written as aliases rather than gated in CSS: a component token's value is
+  // substituted at :root, so it can never name a per-variant private var.
+  // Off clears the overrides, returning each surface to its shipped default.
+  const HOVER_SWAPS: readonly (readonly [hover: string, base: string])[] = [
+    ['--tabbar-hover-surface', '--tabbar-default-surface'],
+  ];
+  const TINT_ON = 'var(--tabbar-hover-tint)';
+  const TINT_OFF = 'var(--color-transparent)';
+
+  let tintOn = $derived.by(() => {
+    const ref = $editorState.components.tabbar?.aliases['--tabbar-hover-tint-enabled'];
+    return (ref?.kind === 'literal' ? ref.value : TINT_OFF) === TINT_ON;
+  });
+
+  function setTintOn(checked: boolean) {
+    setComponentAlias('tabbar', '--tabbar-hover-tint-enabled', {
+      kind: 'literal',
+      value: checked ? TINT_ON : TINT_OFF,
+    });
+    for (const [hover, base] of HOVER_SWAPS) {
+      if (checked) setComponentAlias('tabbar', hover, { kind: 'token', name: base });
+      else clearComponentAlias('tabbar', hover);
+    }
+  }
 
   let selectedDemoTab = $state('overview');
   const demoTabs = [
@@ -101,7 +142,12 @@
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
   let visibleStates = $derived(Object.fromEntries(
-    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+    Object.entries(states).map(([name, list]) => [
+      name,
+      withLinkedDisabled(list, linked.varSet).map((t) =>
+        tintOn && t.variable.endsWith('-hover-surface') ? { ...t, disabled: true } : t,
+      ),
+    ]),
   ) as Record<string, Token[]>);
 </script>
 
@@ -114,6 +160,20 @@
     {component}
     
   >
+    {#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>
+          <Toggle checked={tintOn} onchange={setTintOn} />
+        </div>
+        {#if tintOn}
+          <div class="property-row">
+            <span class="property-label">tint color</span>
+            <UIPaletteSelector variable="--tabbar-hover-tint" {component} showNone={false} />
+          </div>
+        {/if}
+      {/if}
+    {/snippet}
     {#snippet children({ activeState })}
         {@const forceClass = activeState === 'hover tab' ? 'force-hover' : ''}
       <TabBar tabs={demoTabs} selectedTab={selectedDemoTab} class={forceClass} on:tabChange={(e) => (selectedDemoTab = e.detail)} />

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

@@ -19,6 +19,7 @@ import MenuSelectEditor, { allTokens as menuSelectTokens } from './MenuSelectEdi
 import NotificationEditor, { allTokens as notificationTokens } from './NotificationEditor.svelte';
 import PanelEditor, { allTokens as panelTokens } from './PanelEditor.svelte';
 import ProgressBarEditor, { allTokens as progressBarTokens } from './ProgressBarEditor.svelte';
+import SliderEditor, { allTokens as sliderTokens } from './SliderEditor.svelte';
 import RadioButtonEditor, { allTokens as radioButtonTokens } from './RadioButtonEditor.svelte';
 import SectionDividerEditor, { allTokens as sectionDividerTokens, intrinsics as sectionDividerIntrinsics } from './SectionDividerEditor.svelte';
 import SegmentedControlEditor, { allTokens as segmentedControlTokens } from './SegmentedControlEditor.svelte';
@@ -320,6 +321,15 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     schema: progressBarTokens,
     origin: 'system',
   },
+  slider: {
+    id: 'slider',
+    label: 'Slider',
+    icon: 'fas fa-sliders',
+    sourceFile: 'src/system/components/Slider.svelte',
+    editorComponent: SliderEditor,
+    schema: sliderTokens,
+    origin: 'system',
+  },
 });
 
 /** Mutable map of consumer-registered components, populated by `registerComponent()`. */

package/src/editor/component-editor/scaffolding/ComponentFileManager.svelte

@@ -29,7 +29,7 @@
     productionTheme,
   } from '../../core/productionPulse';
   import {
-    adoptLook,
+    adoptTheme,
     getActiveTheme,
     getProductionTheme,
     listThemes,
@@ -239,7 +239,7 @@
   }
 
   /**
-   * Adopt ships the whole look, because production is one saved theme: flush
+   * Adopt ships the whole theme, because production is one saved theme: flush
    * this component, save the open theme, publish it. The protected Default
    * theme cannot record what shipped, so it prompts for a theme name first and
    * retries.
@@ -261,7 +261,7 @@
     try {
       if (wasDirty) await persist();
       await saveActiveTheme();
-      await adoptLook();
+      await adoptTheme();
       await refreshProduction();
       bumpProductionRevision();
       adoptFeedback = wasDirty
@@ -401,7 +401,7 @@
         </UISquareButton>
         <UIInfoPopover title="Component Configuration" ariaLabel="About Save and Adopt">
           <p>
-            <strong>Save</strong> keeps your edits in the theme you have open. The theme carries a copy of every component you changed, so the look travels as one file.
+            <strong>Save</strong> keeps your edits in the theme you have open. The theme carries a copy of every component you changed, so the theme travels as one file.
           </p>
           <p>
             <strong>Save As</strong> writes the component's settings to a file of their own, ready to load into any theme.

package/src/editor/core/components/aliasKinds.ts

@@ -21,36 +21,59 @@ export type TokenKind =
   | 'easing'
   | 'text-color';
 
-/** Suffix/prefix patterns mapped to kinds — the one source of truth for the
-    editor's selector layout and the `adjust` CLI, so the two cannot drift.
-    Order matters: `-text` must run before `-border`/`-surface` because `--text-*`
-    would otherwise match `surface`/`border` if any pattern overlapped. Variables
-    that don't match any pattern fall through to `text-color` (renders as a palette
-    picker). Tokens with unconventional suffixes should be renamed. */
-export const KIND_PATTERNS: ReadonlyArray<{ kind: TokenKind; matches: (v: string) => boolean }> = [
-  { kind: 'font-family',    matches: (v) => v.endsWith('-font-family') },
-  { kind: 'font-weight',    matches: (v) => v.endsWith('-font-weight') },
-  { kind: 'font-size',      matches: (v) => v.endsWith('-font-size') || v.endsWith('-icon-size') || v.endsWith('-thumb-size') },
-  { kind: 'line-height',    matches: (v) => v.endsWith('-line-height') },
-  { kind: 'letter-spacing', matches: (v) => v.endsWith('-letter-spacing') },
-  { kind: 'text-color',     matches: (v) => v.endsWith('-text') || v.startsWith('--text-') },
-  { kind: 'radius',         matches: (v) => v.endsWith('-radius') || v.startsWith('--radius-') },
-  { kind: 'divider-width',  matches: (v) => v.endsWith('-divider-width') || v.endsWith('-divider-thickness') },
-  { kind: 'divider-height', matches: (v) => v.endsWith('-divider-height') || v.endsWith('-track-height') },
-  { kind: 'divider-inset',  matches: (v) => v.endsWith('-divider-inset') },
-  { kind: 'dot-size',       matches: (v) => v.endsWith('-dot-size') },
-  { kind: 'blur',           matches: (v) => v.endsWith('-blur') || v.startsWith('--blur-') },
-  { kind: 'scale',          matches: (v) => v.endsWith('-scale') || v.startsWith('--scale-') },
-  { kind: 'shadow',         matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
-  { kind: 'padding',        matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
-  { kind: 'gap',            matches: (v) => v.endsWith('-gap') },
-  { kind: 'duration',       matches: (v) => v.endsWith('-duration') || v.startsWith('--duration-') },
-  { kind: 'easing',         matches: (v) => v.endsWith('-easing') || v.startsWith('--ease-') },
-  { kind: 'border-width',   matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.endsWith('-hairline-thickness') || v.startsWith('--border-width-') },
-  { kind: 'border',         matches: (v) => v.endsWith('-border') || v.startsWith('--border-') },
-  { kind: 'surface',        matches: (v) => v.endsWith('-surface') || v.startsWith('--surface-') },
+/** Suffix and prefix data mapped to kinds — the one source of truth for the
+    editor's selector layout, the `adjust` CLI, and `check-component`'s naming
+    rule, so the three cannot drift. `bin/check-component.mjs` reads the
+    `suffix:` arrays out of this file, which is why they are plain literals.
+
+    Order matters: `-text` must run before `-border`/`-surface`, and
+    `-accent-width` before `-accent`, because the first match wins. A variable
+    matching nothing falls through to `text-color` (a palette picker), but that
+    fall-through is a smell — `check-component` rejects an unrecognised suffix,
+    so add the name here rather than letting it drift. */
+export const KIND_RULES: ReadonlyArray<{
+  kind: TokenKind;
+  suffix?: readonly string[];
+  prefix?: readonly string[];
+}> = [
+  { kind: 'font-family',    suffix: ['-font-family'] },
+  { kind: 'font-weight',    suffix: ['-font-weight'] },
+  { kind: 'font-size',      suffix: ['-font-size', '-icon-size', '-thumb-size'] },
+  { kind: 'line-height',    suffix: ['-line-height'] },
+  { kind: 'letter-spacing', suffix: ['-letter-spacing'] },
+  // Element-named colour roles: the property *is* the element it paints.
+  { kind: 'text-color',     suffix: ['-text', '-label', '-icon', '-title', '-body', '-eyebrow',
+                                     '-description', '-hint', '-error', '-placeholder', '-value'],
+                            prefix: ['--text-'] },
+  { kind: 'radius',         suffix: ['-radius'], prefix: ['--radius-'] },
+  { kind: 'divider-width',  suffix: ['-divider-width', '-divider-thickness'] },
+  { kind: 'divider-height', suffix: ['-divider-height', '-track-height'] },
+  { kind: 'divider-inset',  suffix: ['-divider-inset', '-inset'] },
+  { kind: 'dot-size',       suffix: ['-dot-size'] },
+  { kind: 'blur',           suffix: ['-blur'], prefix: ['--blur-'] },
+  { kind: 'scale',          suffix: ['-scale'], prefix: ['--scale-'] },
+  { kind: 'shadow',         suffix: ['-shadow'], prefix: ['--shadow-'] },
+  { kind: 'padding',        suffix: ['-padding', '-margin'] },
+  { kind: 'gap',            suffix: ['-gap'] },
+  { kind: 'duration',       suffix: ['-duration'], prefix: ['--duration-'] },
+  { kind: 'easing',         suffix: ['-easing'], prefix: ['--ease-'] },
+  { kind: 'border-width',   suffix: ['-border-width', '-accent-width', '-hairline-thickness', '-thickness'],
+                            prefix: ['--border-width-'] },
+  { kind: 'border',         suffix: ['-border'], prefix: ['--border-'] },
+  // Fills. A tint is a wash over a surface, so it takes the surface picker: the
+  // full palette with an alpha, not just the tint stops it defaults to.
+  { kind: 'surface',        suffix: ['-surface', '-fill', '-divider', '-background', '-indicator',
+                                     '-thumb', '-accent', '-color', '-tint', '-opacity',
+                                     '-width', '-height', '-size'],
+                            prefix: ['--surface-', '--tint', '--color-'] },
 ];
 
+export const KIND_PATTERNS: ReadonlyArray<{ kind: TokenKind; matches: (v: string) => boolean }> =
+  KIND_RULES.map(({ kind, suffix = [], prefix = [] }) => ({
+    kind,
+    matches: (v: string) => suffix.some((s) => v.endsWith(s)) || prefix.some((p) => v.startsWith(p)),
+  }));
+
 export function rawKind(variable: string): TokenKind {
   for (const { kind, matches } of KIND_PATTERNS) {
     if (matches(variable)) return kind;