@motion-proto/live-tokens 0.67.1 → 0.69.0

package/src/system/components/Slider.svelte

@@ -0,0 +1,348 @@
+<!--
+  Slider.svelte — 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. Both
+  variants share the track, fill, and thumb tokens, linked in the editor so an
+  edit to one moves the other unless deliberately unlinked.
+-->
+<script module lang="ts">
+  export const sliderVariants = ['single', 'range'] as const;
+  export type SliderVariant = typeof sliderVariants[number];
+</script>
+
+<script lang="ts">
+  interface Props {
+    variant?: SliderVariant;
+    /** The `single` thumb. */
+    value?: number;
+    /** The `range` thumbs. */
+    low?: number;
+    high?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    disabled?: boolean;
+    /** Editor preview hook — adds `.force-hover` so hover tokens paint without a real pointer. */
+    class?: string;
+    onchange?: (value: number) => void;
+    onrangechange?: (low: number, high: number) => void;
+  }
+
+  let {
+    variant = 'single',
+    value = 50,
+    low = 25,
+    high = 75,
+    min = 0,
+    max = 100,
+    step = 1,
+    label = '',
+    disabled = false,
+    class: className = '',
+    onchange,
+    onrangechange,
+  }: Props = $props();
+
+  const span = $derived(Math.max(max - min, Number.EPSILON));
+  const percent = (n: number) => Math.min(100, Math.max(0, ((n - min) / span) * 100));
+
+  const fillStart = $derived(variant === 'range' ? percent(low) : 0);
+  const fillEnd = $derived(variant === 'range' ? percent(high) : percent(value));
+  const readout = $derived(variant === 'range' ? `${low} – ${high}` : `${value}`);
+
+  function onSingleInput(event: Event) {
+    onchange?.(Number((event.currentTarget as HTMLInputElement).value));
+  }
+  // Each thumb is its own input, so a thumb dragged past its partner is held at
+  // the partner's value rather than crossing it.
+  function onLowInput(event: Event) {
+    const next = Math.min(Number((event.currentTarget as HTMLInputElement).value), high);
+    onrangechange?.(next, high);
+  }
+  function onHighInput(event: Event) {
+    const next = Math.max(Number((event.currentTarget as HTMLInputElement).value), low);
+    onrangechange?.(low, next);
+  }
+</script>
+
+<div class="slider {variant} {className}" class:disabled class:has-label={!!label}>
+  {#if label}
+    <div class="slider-label">
+      <span>{label}</span>
+      <span class="slider-value">{readout}</span>
+    </div>
+  {/if}
+  <div class="slider-track">
+    <div class="slider-fill" style:--_from={fillStart / 100} style:--_to={fillEnd / 100}></div>
+    {#if variant === 'range'}
+      <input
+        type="range"
+        class="thumb low"
+        {min}
+        {max}
+        {step}
+        value={low}
+        {disabled}
+        aria-label={label ? `${label} minimum` : 'Minimum'}
+        oninput={onLowInput}
+      />
+      <span class="cap" style:--_at={fillStart / 100} aria-hidden="true"></span>
+      <input
+        type="range"
+        class="thumb high"
+        {min}
+        {max}
+        {step}
+        value={high}
+        {disabled}
+        aria-label={label ? `${label} maximum` : 'Maximum'}
+        oninput={onHighInput}
+      />
+      <span class="cap" style:--_at={fillEnd / 100} aria-hidden="true"></span>
+    {:else}
+      <input
+        type="range"
+        class="thumb"
+        {min}
+        {max}
+        {step}
+        {value}
+        {disabled}
+        aria-label={label || 'Value'}
+        oninput={onSingleInput}
+      />
+      <span class="cap" style:--_at={fillEnd / 100} aria-hidden="true"></span>
+    {/if}
+  </div>
+</div>
+
+<style>
+  :global(:root) {
+    /* Single: one thumb. */
+    --slider-single-track-surface: var(--surface-neutral-lowest);
+    --slider-single-track-border: var(--border-neutral-subtle);
+    --slider-single-track-border-width: var(--border-width-1);
+    --slider-single-track-height: var(--space-8);
+    --slider-single-track-radius: var(--radius-full);
+    --slider-single-fill: var(--surface-brand-high);
+    --slider-single-thumb-surface: var(--surface-neutral-highest);
+    --slider-single-thumb-border: var(--border-brand);
+    --slider-single-thumb-border-width: var(--border-width-2);
+    --slider-single-thumb-size: var(--font-size-lg);
+    --slider-single-thumb-radius: var(--radius-full);
+    --slider-single-thumb-shadow: var(--shadow-sm);
+    --slider-single-hover-thumb-surface: var(--surface-brand-high);
+    --slider-single-hover-thumb-border: var(--border-brand-strong);
+    --slider-single-disabled-track-surface: var(--surface-neutral-lower);
+    --slider-single-disabled-fill: var(--surface-neutral);
+    --slider-single-disabled-thumb-surface: var(--surface-neutral-lower);
+    --slider-single-disabled-thumb-border: var(--border-neutral);
+
+    /* Range: two thumbs bounding a fill. */
+    --slider-range-track-surface: var(--surface-neutral-lowest);
+    --slider-range-track-border: var(--border-neutral-subtle);
+    --slider-range-track-border-width: var(--border-width-1);
+    --slider-range-track-height: var(--space-8);
+    --slider-range-track-radius: var(--radius-full);
+    --slider-range-fill: var(--surface-brand-high);
+    --slider-range-thumb-surface: var(--surface-neutral-highest);
+    --slider-range-thumb-border: var(--border-brand);
+    --slider-range-thumb-border-width: var(--border-width-2);
+    --slider-range-thumb-size: var(--font-size-lg);
+    --slider-range-thumb-radius: var(--radius-full);
+    --slider-range-thumb-shadow: var(--shadow-sm);
+    --slider-range-hover-thumb-surface: var(--surface-brand-high);
+    --slider-range-hover-thumb-border: var(--border-brand-strong);
+    --slider-range-disabled-track-surface: var(--surface-neutral-lower);
+    --slider-range-disabled-fill: var(--surface-neutral);
+    --slider-range-disabled-thumb-surface: var(--surface-neutral-lower);
+    --slider-range-disabled-thumb-border: var(--border-neutral);
+
+    /* Label and value readout, shared by both variants. */
+    --slider-label-gap: var(--space-6);
+    --slider-label: var(--text-secondary);
+    --slider-label-font-family: var(--font-sans);
+    --slider-label-font-size: var(--font-size-md);
+    --slider-label-font-weight: var(--font-weight-normal);
+    --slider-label-line-height: var(--line-height-normal);
+    --slider-value: var(--text-tertiary);
+    --slider-value-font-family: var(--font-mono);
+    --slider-value-font-size: var(--font-size-md);
+    --slider-value-font-weight: var(--font-weight-normal);
+    --slider-value-line-height: var(--line-height-normal);
+  }
+
+  .slider {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--slider-label-gap);
+    width: 100%;
+  }
+
+  .slider-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .slider-label > span {
+    color: var(--slider-label);
+    font-family: var(--slider-label-font-family);
+    font-size: var(--slider-label-font-size);
+    font-weight: var(--slider-label-font-weight);
+    line-height: var(--slider-label-line-height);
+  }
+
+  .slider-label > .slider-value {
+    color: var(--slider-value);
+    font-family: var(--slider-value-font-family);
+    font-size: var(--slider-value-font-size);
+    font-weight: var(--slider-value-font-weight);
+    line-height: var(--slider-value-line-height);
+  }
+
+  /* The inputs sit on top of the track and are invisible apart from their
+     native thumb, which is kept for the pointer and the keyboard but drawn
+     transparent; the visible thumb is the `.cap` beside each input, placed on
+     the same travel the native thumb has (it stays inside the input's box, so
+     its centre runs from half a thumb in to half a thumb from the end). */
+  .slider-track {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    margin-block: calc((var(--_thumb-size) - var(--_track-height)) / 2);
+    border-style: solid;
+    transition: background var(--duration-150), border-color var(--duration-150);
+    --_origin: calc(var(--_thumb-size) / 2 - var(--_track-border-width));
+    --_travel: calc(100% + var(--_track-border-width) * 2 - var(--_thumb-size));
+  }
+
+  .slider.single .slider-track {
+    --_track-height: var(--slider-single-track-height);
+    --_track-border-width: var(--slider-single-track-border-width);
+    --_thumb-size: var(--slider-single-thumb-size);
+    --_thumb-surface: var(--slider-single-thumb-surface);
+    --_thumb-border: var(--slider-single-thumb-border);
+    --_thumb-border-width: var(--slider-single-thumb-border-width);
+    --_thumb-radius: var(--slider-single-thumb-radius);
+    --_thumb-shadow: var(--slider-single-thumb-shadow);
+    height: var(--slider-single-track-height);
+    background: var(--slider-single-track-surface);
+    border-color: var(--slider-single-track-border);
+    border-width: var(--slider-single-track-border-width);
+    border-radius: var(--slider-single-track-radius);
+  }
+  .slider.range .slider-track {
+    --_track-height: var(--slider-range-track-height);
+    --_track-border-width: var(--slider-range-track-border-width);
+    --_thumb-size: var(--slider-range-thumb-size);
+    --_thumb-surface: var(--slider-range-thumb-surface);
+    --_thumb-border: var(--slider-range-thumb-border);
+    --_thumb-border-width: var(--slider-range-thumb-border-width);
+    --_thumb-radius: var(--slider-range-thumb-radius);
+    --_thumb-shadow: var(--slider-range-thumb-shadow);
+    height: var(--slider-range-track-height);
+    background: var(--slider-range-track-surface);
+    border-color: var(--slider-range-track-border);
+    border-width: var(--slider-range-track-border-width);
+    border-radius: var(--slider-range-track-radius);
+  }
+  .slider.single.disabled .slider-track { background: var(--slider-single-disabled-track-surface); }
+  .slider.range.disabled .slider-track { background: var(--slider-range-disabled-track-surface); }
+
+  .slider-fill {
+    position: absolute;
+    top: calc(-1 * var(--_track-border-width));
+    bottom: calc(-1 * var(--_track-border-width));
+    left: calc(var(--_origin) + var(--_travel) * var(--_from));
+    width: calc(var(--_travel) * (var(--_to) - var(--_from)));
+    transition: background var(--duration-150);
+  }
+  .slider.single .slider-fill {
+    left: calc(-1 * var(--_track-border-width));
+    width: calc(var(--_origin) + var(--_track-border-width) + var(--_travel) * var(--_to));
+    background: var(--slider-single-fill);
+    border-radius: var(--slider-single-track-radius);
+  }
+  .slider.range .slider-fill {
+    background: var(--slider-range-fill);
+    border-radius: var(--slider-range-track-radius);
+  }
+  .slider.single.disabled .slider-fill { background: var(--slider-single-disabled-fill); }
+  .slider.range.disabled .slider-fill { background: var(--slider-range-disabled-fill); }
+
+  .thumb {
+    position: absolute;
+    top: 50%;
+    left: calc(-1 * var(--_track-border-width));
+    width: calc(100% + var(--_track-border-width) * 2);
+    height: var(--_thumb-size);
+    margin: 0;
+    padding: 0;
+    transform: translateY(-50%);
+    appearance: none;
+    background: transparent;
+    pointer-events: none;
+    cursor: pointer;
+  }
+  .thumb:disabled { cursor: not-allowed; }
+  .thumb::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+    opacity: 0;
+    pointer-events: auto;
+  }
+  .thumb::-moz-range-thumb {
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+    border: 0;
+    opacity: 0;
+    pointer-events: auto;
+  }
+  .thumb::-webkit-slider-runnable-track,
+  .thumb::-moz-range-track {
+    background: transparent;
+    border: 0;
+  }
+  .thumb:focus-visible { outline: none; }
+
+  .cap {
+    position: absolute;
+    top: 50%;
+    left: calc(var(--_origin) + var(--_travel) * var(--_at));
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+    box-sizing: border-box;
+    transform: translate(-50%, -50%);
+    background: var(--_thumb-surface);
+    border: var(--_thumb-border-width) solid var(--_thumb-border);
+    border-radius: var(--_thumb-radius);
+    box-shadow: var(--_thumb-shadow);
+    pointer-events: none;
+    transition: background var(--duration-150), border-color var(--duration-150);
+  }
+  .thumb:focus-visible + .cap {
+    outline: var(--_thumb-border-width) solid var(--_thumb-border);
+    outline-offset: var(--_thumb-border-width);
+  }
+
+  .slider.single .thumb:hover + .cap,
+  .slider.single.force-hover .cap {
+    --_thumb-surface: var(--slider-single-hover-thumb-surface);
+    --_thumb-border: var(--slider-single-hover-thumb-border);
+  }
+  .slider.range .thumb:hover + .cap,
+  .slider.range.force-hover .cap {
+    --_thumb-surface: var(--slider-range-hover-thumb-surface);
+    --_thumb-border: var(--slider-range-hover-thumb-border);
+  }
+  .slider.single .thumb:disabled + .cap {
+    --_thumb-surface: var(--slider-single-disabled-thumb-surface);
+    --_thumb-border: var(--slider-single-disabled-thumb-border);
+  }
+  .slider.range .thumb:disabled + .cap {
+    --_thumb-surface: var(--slider-range-disabled-thumb-surface);
+    --_thumb-border: var(--slider-range-disabled-thumb-border);
+  }
+</style>

package/src/system/components/TabBar.svelte

@@ -9,6 +9,9 @@
   }
 
   interface Props {
+    /** Wash the hovered surface with the theme's tint. `undefined` inherits the
+        global default; `true`/`false` force this instance on/off. */
+    hoverTint?: boolean | undefined;
     tabs?: Tab[];
     selectedTab?: string;
     iconOnly?: boolean;
@@ -18,6 +21,7 @@
   }
 
   let {
+    hoverTint = undefined,
     tabs = [],
     selectedTab = '',
     iconOnly = false,
@@ -25,6 +29,11 @@
     ontabChange
   }: Props = $props();
 
+  // Per-instance override of the global hover-tint intrinsic; undefined leaves :root in charge.
+  let hoverTintValue = $derived(
+    hoverTint === undefined ? undefined : hoverTint ? 'var(--tabbar-hover-tint)' : 'var(--color-transparent)',
+  );
+
   // Dual-fire bridge — see Button.svelte for the deprecation timeline.
   const dispatch = createEventDispatcher<{
     tabChange: string;
@@ -38,7 +47,10 @@
   }
 </script>
 
-<div class="tab-bar {className}">
+<div
+  class="tab-bar {className}"
+  style:--tabbar-hover-tint-enabled={hoverTintValue}
+>
   {#each tabs as tab}
     <button
       class="tab"
@@ -61,6 +73,11 @@
   @use '../styles/padding' as *;
 
   :global(:root) {
+    /* Hover tint: an optional wash over the hovered surface, one stop for the
+       whole component. Off by default; the gate holds the tint when enabled. */
+    --tabbar-hover-tint: var(--tint);
+    --tabbar-hover-tint-enabled: var(--color-transparent);
+
     /* Bar */
     --tabbar-bar-divider: var(--border-neutral-subtle);
     --tabbar-bar-divider-thickness: var(--border-width-1);
@@ -104,7 +121,7 @@
     /* Active tab */
     --tabbar-active-text: var(--text-primary);
     --tabbar-active-border: var(--color-brand-500);
-    --tabbar-active-surface: var(--overlay-low);
+    --tabbar-active-surface: var(--tint-low);
     --tabbar-active-text-font-family: var(--font-sans);
     --tabbar-active-text-font-size: var(--font-size-md);
     --tabbar-active-text-font-weight: var(--font-weight-light);
@@ -197,6 +214,7 @@
 
   .tab:hover:not(:disabled):not(.active),
   .tab-bar.force-hover .tab:not(:disabled):not(.active) {
+    background-image: linear-gradient(var(--tabbar-hover-tint-enabled), var(--tabbar-hover-tint-enabled));
     --_text-color: var(--tabbar-hover-text);
     --_text-family: var(--tabbar-hover-text-font-family);
     --_text-size: var(--tabbar-hover-text-font-size);

package/src/system/styles/CONVENTIONS.md

@@ -57,11 +57,11 @@ Every theme token starts with a **category prefix**. The category tells you what
 | `--ring-*`     | Focus rings (separate namespace from shadows)                   |
 | `--border-width-*` | Stroke widths                                               |
 | `--transition-*`, `--opacity-*`, `--z-*` | Animation, opacity, z-index scales    |
-| `--overlay-*`, `--hover-*` | Semantic overlay tints                                |
+| `--scrim-*`, `--tint-*` | Scrims dim what is behind them; tints shade a surface |
 | `--gradient-*` | Named gradients                                                 |
 | `--columns-*`, `--page-*` | Page-level layout primitives                         |
 
-**Rule: a bare one-word token belongs to *some* category.** If you find yourself writing `--overlay` or `--border`, make sure the category is obvious and it's the canonical default. Otherwise pick a longer name that slots it into its family (e.g. `--border-neutral`).
+**Rule: a bare one-word token belongs to *some* category.** If you find yourself writing `--scrim` or `--border`, make sure the category is obvious and it's the canonical default. Otherwise pick a longer name that slots it into its family (e.g. `--border-neutral`).
 
 ### Families within a category
 

package/src/system/styles/tokens.css

@@ -266,10 +266,18 @@
   --surface-danger-higher: oklch(0.5836 0.1757 24.75);
   --surface-danger-highest: oklch(0.6696 0.1423 24.72);
 
-  /* Overlays — semi-transparent washes for backdrops and pressed-state fills. */
-  --overlay-low: rgba(20, 3, 0, 0.38);
-  --overlay: rgba(20, 3, 0, 0.51);
-  --overlay-high: rgba(20, 3, 0, 0.64);
+  /* Scrims — translucent layers that dim what sits behind them. A scrim is not
+     a tint: it darkens the content underneath, it does not shade a surface. */
+  --scrim-low: rgba(20, 3, 0, 0.38);
+  --scrim: rgba(20, 3, 0, 0.51);
+  --scrim-high: rgba(20, 3, 0, 0.64);
+
+  /* Tints — translucent washes that shade the surface they sit on, for a hover
+     or an active row. The theme aliases these to the text color, so a tint
+     lightens a dark theme and darkens a light one without picking a direction. */
+  --tint-low: rgba(255, 255, 255, 0.05);
+  --tint: rgba(255, 255, 255, 0.1);
+  --tint-high: rgba(255, 255, 255, 0.15);
 
   /* BORDERS — 5-point scales, faint → strong. */
 

package/template/package.json

@@ -5,9 +5,10 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "npm run check:design && vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:design": "live-tokens check-page && live-tokens check-component"
   },
   "dependencies": {
     "@motion-proto/live-tokens": "__LT_VERSION__"

package/template/src/pages/Home.svelte

@@ -59,7 +59,7 @@
 
   code {
     background: var(--surface-neutral-high);
-    padding: 2px 6px;
+    padding: var(--space-2) var(--space-6);
     border-radius: var(--radius-sm);
     font-family: var(--font-mono, monospace);
     font-size: 0.9em;

package/src/editor/core/themes/slices/overlays.ts

@@ -1,101 +0,0 @@
-/**
- * Overlays slice — overlay + hover stops, each stored as `{alias, opacity}`.
- * Emits as `color-mix(in srgb, var(<alias>) <pct>%, transparent)` so the
- * overlay tints automatically follow the aliased source token (a brand-color
- * shift propagates without re-editing every overlay).
- *
- * Defaults diverge from tokens.css by design: the editor starts from a
- * neutral alias and tokens.css continues to win until first edit (see
- * `overlaysEqualsDefault`).
- */
-import type { EditorState, OverlayToken } from '../../store/editorTypes';
-
-export function makeDefaultOverlayTokens(): OverlayToken[] {
-  return [
-    { variable: '--overlay-low',  label: 'Low',  alias: '--surface-neutral-lowest', opacity: 0.38 },
-    { variable: '--overlay',      label: 'Base', alias: '--surface-neutral-lowest', opacity: 0.51 },
-    { variable: '--overlay-high', label: 'High', alias: '--surface-neutral-lowest', opacity: 0.64 },
-  ];
-}
-
-export function makeDefaultHoverTokens(): OverlayToken[] {
-  return [
-    { variable: '--hover-low',  label: 'Low',  alias: '--text-primary', opacity: 0.05 },
-    { variable: '--hover',      label: 'Base', alias: '--text-primary', opacity: 0.1  },
-    { variable: '--hover-high', label: 'High', alias: '--text-primary', opacity: 0.15 },
-  ];
-}
-
-export function makeDefaultOverlaysState(): EditorState['overlays'] {
-  return {
-    tokens: makeDefaultOverlayTokens(),
-    hoverTokens: makeDefaultHoverTokens(),
-  };
-}
-
-export const OVERLAY_VAR_NAMES = [
-  '--overlay-low', '--overlay', '--overlay-high',
-  '--hover-low', '--hover', '--hover-high',
-] as const;
-
-export function overlayTokenToCss(t: OverlayToken): string {
-  const pct = Math.round(t.opacity * 100);
-  if (pct >= 100) return `var(${t.alias})`;
-  return `color-mix(in srgb, var(${t.alias}) ${pct}%, transparent)`;
-}
-
-const COLOR_MIX_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
-const PLAIN_VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
-
-export function parseOverlayCss(raw: string): { alias: string; opacity: number } | null {
-  const s = raw.trim();
-  const mix = s.match(COLOR_MIX_RE);
-  if (mix) {
-    const pct = parseInt(mix[2], 10);
-    if (!Number.isFinite(pct)) return null;
-    return { alias: mix[1], opacity: Math.max(0, Math.min(100, pct)) / 100 };
-  }
-  const plain = s.match(PLAIN_VAR_RE);
-  if (plain) return { alias: plain[1], opacity: 1 };
-  return null;
-}
-
-export function overlaysToVars(o: EditorState['overlays']): Record<string, string> {
-  const out: Record<string, string> = {};
-  for (const t of o.tokens) out[t.variable] = overlayTokenToCss(t);
-  for (const t of o.hoverTokens) out[t.variable] = overlayTokenToCss(t);
-  return out;
-}
-
-export function applyOverlayVarsToState(overlays: EditorState['overlays'], vars: Record<string, string>): void {
-  const applyTo = (list: OverlayToken[]) => {
-    for (const t of list) {
-      const raw = vars[t.variable];
-      if (!raw) continue;
-      const parsed = parseOverlayCss(raw);
-      if (!parsed) continue;
-      t.alias = parsed.alias;
-      t.opacity = parsed.opacity;
-    }
-  };
-  applyTo(overlays.tokens);
-  applyTo(overlays.hoverTokens);
-}
-
-/**
- * Loader: route overlay/hover entries from a freshly-loaded theme's vars
- * bag into `next.overlays` and remove them from the bag — but only when the
- * value parses as the new format (color-mix / plain var). Legacy rgba values
- * pass through to the cssVars bag so the DOM still paints them; the user's
- * next edit in the picker promotes them to the typed slice.
- */
-export function loadOverlaysFromVars(
-  next: EditorState,
-  rawVars: Record<string, string>,
-): void {
-  applyOverlayVarsToState(next.overlays, rawVars);
-  for (const name of OVERLAY_VAR_NAMES) {
-    const raw = rawVars[name];
-    if (raw && parseOverlayCss(raw) !== null) delete rawVars[name];
-  }
-}