@motion-proto/live-tokens 0.19.1 → 0.20.1

package/dist-plugin/index.cjs

@@ -52,6 +52,14 @@ function extractGlobalRootBody(source) {
   return bodies.join("\n");
 }
 
+// src/editor/core/themes/parsers/colorOpacity.ts
+var COLOR_OPACITY_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
+function parseColorOpacity(value) {
+  const m = value.trim().match(COLOR_OPACITY_RE);
+  if (!m) return null;
+  return { name: m[1], opacity: parseInt(m[2], 10) };
+}
+
 // src/editor/core/storage/files/versionedFileResourceClient.ts
 function sanitizeFileName(name) {
   return name.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9\-_]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "") || "unnamed";
@@ -1013,9 +1021,14 @@ function themeFileApi(opts) {
   }
   function extractAliasDeclarations(body) {
     const aliases = {};
-    const re = /(--[a-z0-9-]+)\s*:\s*var\((--[a-z0-9-]+)\)\s*;/gi;
+    const re = /(--[a-z0-9-]+)\s*:\s*([^;]+);/gi;
     let m;
-    while ((m = re.exec(body)) !== null) aliases[m[1]] = m[2];
+    while ((m = re.exec(body)) !== null) {
+      const value = m[2].trim();
+      const plain = value.match(/^var\((--[a-z0-9-]+)\)$/i);
+      if (plain) aliases[m[1]] = plain[1];
+      else if (parseColorOpacity(value)) aliases[m[1]] = value;
+    }
     return aliases;
   }
   function componentNameFromFile(filePath) {

package/dist-plugin/index.js

@@ -10,6 +10,14 @@ import {
 import fs2 from "fs";
 import path2 from "path";
 
+// src/editor/core/themes/parsers/colorOpacity.ts
+var COLOR_OPACITY_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
+function parseColorOpacity(value) {
+  const m = value.trim().match(COLOR_OPACITY_RE);
+  if (!m) return null;
+  return { name: m[1], opacity: parseInt(m[2], 10) };
+}
+
 // src/editor/core/storage/files/versionedFileResourceClient.ts
 function sanitizeFileName(name) {
   return name.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9\-_]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "") || "unnamed";
@@ -753,9 +761,14 @@ function themeFileApi(opts) {
   }
   function extractAliasDeclarations(body) {
     const aliases = {};
-    const re = /(--[a-z0-9-]+)\s*:\s*var\((--[a-z0-9-]+)\)\s*;/gi;
+    const re = /(--[a-z0-9-]+)\s*:\s*([^;]+);/gi;
     let m;
-    while ((m = re.exec(body)) !== null) aliases[m[1]] = m[2];
+    while ((m = re.exec(body)) !== null) {
+      const value = m[2].trim();
+      const plain = value.match(/^var\((--[a-z0-9-]+)\)$/i);
+      if (plain) aliases[m[1]] = plain[1];
+      else if (parseColorOpacity(value)) aliases[m[1]] = value;
+    }
     return aliases;
   }
   function componentNameFromFile(filePath) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.19.1",
+  "version": "0.20.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

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

@@ -26,7 +26,7 @@
   import { listManifests, saveAsManifest } from '../../core/manifests/manifestService';
   import type { ManifestMeta } from '../../core/themes/themeTypes';
   import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../../core/themes/migrations';
-  import type { CssVarRef } from '../../core/store/editorTypes';
+  import { refToDiskValue } from '../../core/store/cssVarRef';
   import { safeFetch } from '../../core/storage/storage';
   import { API_BASE } from '../../core/storage/apiBase';
   import { flashStatus } from '../../core/flashStatus';
@@ -126,12 +126,6 @@
     }
   }
 
-  function refToDiskValue(ref: CssVarRef): AliasDiskValue {
-    if (ref.kind === 'token') return ref.name;
-    if (ref.kind === 'literal') return ref.value;
-    return { kind: 'gradient', value: ref.value };
-  }
-
   function currentAliases(): Record<string, AliasDiskValue> {
     const slice = get(editorState).components[component];
     if (!slice) return {};

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

@@ -9,6 +9,7 @@
   import { mutate } from '../../core/store/editorStore';
   import { getDeclaredValue } from '../../core/palettes/tokenRegistry';
   import type { CssVarRef } from '../../core/store/editorTypes';
+  import { cssStringToRef, refToCss } from '../../core/store/cssVarRef';
   import { getEditorContext } from './editorContext';
   import type { Token, TypeGroupConfig } from './types';
   import type { Sibling } from './siblings';
@@ -112,9 +113,7 @@
       instead of falling back to its own family's default. */
   function declaredToRef(declared: string | null): CssVarRef | null {
     if (!declared) return null;
-    const m = declared.match(/^\s*var\((--[a-z0-9-]+)\)\s*$/i);
-    if (m) return { kind: 'token', name: m[1] };
-    return { kind: 'literal', value: declared };
+    return cssStringToRef(declared.trim());
   }
 
   /** Extract a transparency percentage from a `color-mix(in srgb, var(--X) N%, transparent)`
@@ -179,9 +178,8 @@
       const effectiveValue = (varName: string): string | null => {
         const ref = slice.aliases[varName];
         if (!ref) return getDeclaredValue(varName);
-        if (ref.kind === 'token') return `var(${ref.name})`;
-        if (ref.kind === 'literal') return ref.value;
-        return null;
+        if (ref.kind === 'gradient') return null;
+        return refToCss(ref);
       };
 
       const apply = (srcVar: string, dstVar: string) => {

package/src/editor/component-editor/scaffolding/linkedBlock.ts

@@ -5,11 +5,14 @@ import {
   editorState,
 } from '../../core/store/editorStore';
 import type { CssVarRef } from '../../core/store/editorTypes';
+import { refToCss } from '../../core/store/cssVarRef';
 import type { Token } from './types';
 
+/** Stable per-ref identity key: refs that render to the same CSS share a key,
+ *  so siblings with equal values bucket together regardless of ref kind. */
 function aliasKey(ref: CssVarRef | undefined): string {
   if (!ref) return '';
-  return ref.kind === 'token' ? `t:${ref.name}` : `v:${ref.value}`;
+  return refToCss(ref);
 }
 
 const TYPOGRAPHY_PROP_SUFFIXES = ['font-family', 'font-size', 'font-weight', 'line-height'] as const;

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

@@ -1,7 +1,7 @@
 import { get } from 'svelte/store';
 import type { AliasDiskValue, ComponentConfig } from '../themes/themeTypes';
 import { editorState, markComponentSaved } from '../store/editorStore';
-import type { CssVarRef } from '../store/editorTypes';
+import { refToDiskValue } from '../store/cssVarRef';
 import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../themes/migrations';
 import {
   listComponentConfigs,
@@ -24,11 +24,6 @@ export type SaveActiveComponentResult =
   | { ok: true; fileName: string; displayName: string }
   | { ok: false; reason: 'default' | 'no-state' | 'error'; error?: unknown };
 
-function refToDiskValue(ref: CssVarRef): AliasDiskValue {
-  if (ref.kind === 'token') return ref.name;
-  if (ref.kind === 'literal') return ref.value;
-  return { kind: 'gradient', value: ref.value };
-}
 
 export async function saveActiveComponentConfig(
   component: string,

package/src/editor/core/palettes/tokenRegistry.ts

@@ -23,7 +23,7 @@ import tokensCss from '../../../system/styles/tokens.css?raw';
 import { editorState } from '../store/editorStore';
 import type { EditorState } from '../store/editorTypes';
 import { extractGlobalRootBody } from '../themes/parsers/globalRootBlock';
-import { formatGradientValue } from '../themes/slices/gradients';
+import { refToCss } from '../store/cssVarRef';
 
 // Re-exported for tests and downstream consumers that previously imported it
 // from this module. The canonical implementation lives in `./parsers/globalRootBlock`
@@ -112,9 +112,7 @@ function buildOverlayRegistry(
   const overrides = new Map<string, string>();
   for (const slice of Object.values(components)) {
     for (const [varName, ref] of Object.entries(slice.aliases)) {
-      if (ref.kind === 'token') overrides.set(varName, `var(${ref.name})`);
-      else if (ref.kind === 'literal') overrides.set(varName, ref.value);
-      else overrides.set(varName, formatGradientValue(ref.value));
+      overrides.set(varName, refToCss(ref));
     }
   }
   const getDeclared = (v: string): string | null =>

package/src/editor/core/store/cssVarRef.ts

@@ -0,0 +1,87 @@
+/**
+ * The single classifier + renderer for `CssVarRef`. Every place that turns a
+ * CSS value string into a ref, or a ref back into CSS, routes through here so
+ * the three ref kinds (`token`, `literal`, `gradient`) are interpreted
+ * identically across the disk loader, the live-edit path, the registry, and the
+ * component renderer.
+ *
+ * A `token` may carry an optional `opacity` (a colour below 100%). Opacity
+ * serialization is delegated to `parsers/colorOpacity`, the one place that knows
+ * the `color-mix(in srgb, var(--token) NN%, transparent)` shape.
+ */
+import type { CssVarRef } from './editorTypes';
+import type { AliasDiskValue } from '../themes/themeTypes';
+import { formatGradientValue } from '../themes/slices/gradients';
+import { formatColorOpacity, parseColorOpacity } from '../themes/parsers/colorOpacity';
+
+/** True when a token carries a non-trivial opacity (a colour below 100%). */
+function hasOpacity(opacity: number | undefined): opacity is number {
+  return opacity != null && opacity < 100;
+}
+
+/** Render a ref to the CSS value string written to a custom property. */
+export function refToCss(ref: CssVarRef): string {
+  switch (ref.kind) {
+    case 'token':
+      return hasOpacity(ref.opacity) ? formatColorOpacity(ref.name, ref.opacity) : `var(${ref.name})`;
+    case 'literal':
+      return ref.value;
+    case 'gradient':
+      return formatGradientValue(ref.value);
+  }
+}
+
+/**
+ * Classify a CSS value string into a ref. Accepts a bare token name (`--x`,
+ * the disk convention), a wrapped alias (`var(--x)`, the declared-value form),
+ * a colour-opacity expression, or anything else (a raw literal). Never produces
+ * a gradient — gradients are stored as structured objects, not strings.
+ */
+export function cssStringToRef(value: string): CssVarRef {
+  const op = parseColorOpacity(value);
+  if (op) return { kind: 'token', name: op.name, opacity: op.opacity };
+  if (value.startsWith('--')) return { kind: 'token', name: value };
+  const wrapped = value.match(/^var\((--[a-z0-9-]+)\)$/);
+  if (wrapped) return { kind: 'token', name: wrapped[1] };
+  return { kind: 'literal', value };
+}
+
+/**
+ * Serialize a ref to its on-disk `AliasDiskValue`. Mirrors `refToCss` except a
+ * token is stored as its bare name (`--x`, not `var(--x)`) — the editor's disk
+ * convention — and a gradient is a structured object rather than a CSS string.
+ */
+export function refToDiskValue(ref: CssVarRef): AliasDiskValue {
+  switch (ref.kind) {
+    case 'token':
+      return hasOpacity(ref.opacity) ? formatColorOpacity(ref.name, ref.opacity) : ref.name;
+    case 'literal':
+      return ref.value;
+    case 'gradient':
+      return { kind: 'gradient', value: ref.value };
+  }
+}
+
+/** Structural equality across all ref kinds. */
+export function cssVarRefEqual(a: CssVarRef | undefined, b: CssVarRef | undefined): boolean {
+  if (!a || !b) return a === b;
+  if (a.kind !== b.kind) return false;
+  if (a.kind === 'token') {
+    const bt = b as { kind: 'token'; name: string; opacity?: number };
+    return a.name === bt.name && (a.opacity ?? 100) === (bt.opacity ?? 100);
+  }
+  if (a.kind === 'literal') return a.value === (b as { kind: 'literal'; value: string }).value;
+  const av = a.value;
+  const bv = (b as { kind: 'gradient'; value: typeof a.value }).value;
+  if (av.type !== bv.type || av.angle !== bv.angle || av.stops.length !== bv.stops.length) return false;
+  if ((av.aspectX ?? 1) !== (bv.aspectX ?? 1)) return false;
+  if ((av.aspectY ?? 1) !== (bv.aspectY ?? 1)) return false;
+  for (let i = 0; i < av.stops.length; i++) {
+    const sa = av.stops[i];
+    const sb = bv.stops[i];
+    if (sa.position !== sb.position || sa.color !== sb.color || (sa.opacity ?? 100) !== (sb.opacity ?? 100)) {
+      return false;
+    }
+  }
+  return true;
+}

package/src/editor/core/store/editorStore.ts

@@ -21,6 +21,7 @@
 import type { CssVarRef, EditorState, GradientAliasValue } from './editorTypes';
 import type { AliasDiskValue, Theme } from '../themes/themeTypes';
 import { KNOWN_COMPONENT_CONFIG_KEYS } from '../components/componentConfigKeys';
+import { cssStringToRef } from './cssVarRef';
 import {
   CURRENT_THEME_SCHEMA_VERSION,
   CURRENT_COMPONENT_SCHEMA_VERSION,
@@ -421,9 +422,7 @@ function splitAliasesAndConfig(
       if (config[key] === undefined) config[key] = value;
       continue;
     }
-    aliases[key] = value.startsWith('--')
-      ? { kind: 'token', name: value }
-      : { kind: 'literal', value };
+    aliases[key] = cssStringToRef(value);
   }
   return { aliases, config };
 }

package/src/editor/core/store/editorTypes.ts

@@ -100,7 +100,11 @@ export interface GradientAliasValue {
 }
 
 export type CssVarRef =
-  | { kind: 'token'; name: string }
+  /** An alias to a design token. `opacity` is an optional integer percent set
+   *  only for a colour carried below 100% (serializes to
+   *  `color-mix(in srgb, var(name) opacity%, transparent)`); absent means fully
+   *  opaque, which also covers every non-colour alias (radius, spacing, font). */
+  | { kind: 'token'; name: string; opacity?: number }
   | { kind: 'literal'; value: string }
   | { kind: 'gradient'; value: GradientAliasValue };
 

package/src/editor/core/themes/parsers/colorOpacity.ts

@@ -0,0 +1,41 @@
+/**
+ * The single source of truth for a design-token colour carried at reduced
+ * opacity. A colour token below 100% opacity serializes as:
+ *
+ *   color-mix(in srgb, var(--token) NN%, transparent)
+ *
+ * 100% opacity is NOT represented here — a fully opaque colour collapses to a
+ * plain `var(--token)` alias (`CssVarRef` kind `'token'`). Everything that
+ * reads, writes, or validates this form must go through `parseColorOpacity` /
+ * `formatColorOpacity` so the canonical shape lives in exactly one place.
+ *
+ * This module is intentionally dependency-free so the dev-server vite plugin
+ * (a separate build) can import it the same way it imports `globalRootBlock`.
+ */
+
+/** `opacity` is an integer percentage in [0, 100). */
+export interface ColorOpacity {
+  /** The design-token name, e.g. `--surface-neutral-lower`. */
+  name: string;
+  /** Integer percentage, 0–99 (100 is not an opacity colour — it's a token). */
+  opacity: number;
+}
+
+const COLOR_OPACITY_RE =
+  /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
+
+/**
+ * Parse a `color-mix(in srgb, var(--token) NN%, transparent)` string into its
+ * token name and integer opacity. Returns null for any other value (plain
+ * aliases, raw literals, gradients).
+ */
+export function parseColorOpacity(value: string): ColorOpacity | null {
+  const m = value.trim().match(COLOR_OPACITY_RE);
+  if (!m) return null;
+  return { name: m[1], opacity: parseInt(m[2], 10) };
+}
+
+/** Serialize a token + integer opacity back to the canonical color-mix string. */
+export function formatColorOpacity(name: string, opacity: number): string {
+  return `color-mix(in srgb, var(${name}) ${opacity}%, transparent)`;
+}

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

@@ -32,7 +32,7 @@
 import { writable, derived, get, type Readable } from 'svelte/store';
 import type { CssVarRef, EditorState } from '../../store/editorTypes';
 import { store, mutate } from '../../store/editorCore';
-import { formatGradientValue } from './gradients';
+import { refToCss, cssVarRefEqual } from '../../store/cssVarRef';
 import { CASCADING_COMPONENT_CONFIG_KEYS } from '../../components/componentConfigKeys';
 
 const EMPTY_COMPONENT_BASELINE = JSON.stringify({ aliases: {}, config: {} });
@@ -45,9 +45,7 @@ export function componentsToVars(components: EditorState['components']): Record<
   const out: Record<string, string> = {};
   for (const slice of Object.values(components)) {
     for (const [varName, ref] of Object.entries(slice.aliases)) {
-      if (ref.kind === 'token') out[varName] = `var(${ref.name})`;
-      else if (ref.kind === 'literal') out[varName] = ref.value;
-      else out[varName] = formatGradientValue(ref.value);
+      out[varName] = refToCss(ref);
     }
     for (const [key, value] of Object.entries(slice.config)) {
       if (CASCADING_COMPONENT_CONFIG_KEYS.has(key) && typeof value === 'string') {
@@ -248,25 +246,6 @@ export function getComponentPropertySiblings(component: string, varName: string)
   return siblings;
 }
 
-function cssVarRefEqual(a: CssVarRef | undefined, b: CssVarRef | undefined): boolean {
-  if (!a || !b) return a === b;
-  if (a.kind !== b.kind) return false;
-  if (a.kind === 'token') return a.name === (b as { kind: 'token'; name: string }).name;
-  if (a.kind === 'literal') return a.value === (b as { kind: 'literal'; value: string }).value;
-  // gradient: structural compare on type, angle, aspect axes, and stops.
-  const av = a.value;
-  const bv = (b as { kind: 'gradient'; value: typeof a.value }).value;
-  if (av.type !== bv.type || av.angle !== bv.angle || av.stops.length !== bv.stops.length) return false;
-  if ((av.aspectX ?? 1) !== (bv.aspectX ?? 1)) return false;
-  if ((av.aspectY ?? 1) !== (bv.aspectY ?? 1)) return false;
-  for (let i = 0; i < av.stops.length; i++) {
-    const sa = av.stops[i];
-    const sb = bv.stops[i];
-    if (sa.position !== sb.position || sa.color !== sb.color || (sa.opacity ?? 100) !== (sb.opacity ?? 100)) return false;
-  }
-  return true;
-}
-
 /** True iff `varName` is not individually opted out, has ≥2 declared siblings,
  *  and the linked siblings agree — either all sharing the same explicit alias,
  *  or all having no override (linked at the upstream default). */

package/src/editor/ui/UIPaletteSelector.svelte

@@ -6,6 +6,7 @@
   import { resolveAliasChain } from '../core/palettes/tokenRegistry';
   import { editorState } from '../core/store/editorStore';
   import { formatGradientStops } from '../core/themes/slices/gradients';
+  import { formatColorOpacity, parseColorOpacity } from '../core/themes/parsers/colorOpacity';
   import type { GradientToken } from '../core/store/editorTypes';
   import UITokenSelector from './UITokenSelector.svelte';
 
@@ -249,24 +250,19 @@
     return null;
   }
 
-  function parseOpacity(raw: string): { inner: string; opacity: number } | null {
-    const m = raw.match(/^color-mix\(in srgb,\s*(var\(--[a-z0-9-]+\))\s+(\d+)%,\s*transparent\)$/);
-    if (!m) return null;
-    return { inner: m[1], opacity: parseInt(m[2]) };
-  }
-
   function parseStatic(raw: string): { name: 'white' | 'black'; opacity: number } | null {
     const direct = raw.match(/^var\(--color-(white|black)\)$/);
     if (direct) return { name: direct[1] as 'white' | 'black', opacity: 100 };
-    const wrapped = raw.match(/^color-mix\(in srgb,\s*var\(--color-(white|black)\)\s+(\d+)%,\s*transparent\)$/);
-    if (wrapped) return { name: wrapped[1] as 'white' | 'black', opacity: parseInt(wrapped[2]) };
+    const op = parseColorOpacity(raw);
+    const m = op?.name.match(/^--color-(white|black)$/);
+    if (op && m) return { name: m[1] as 'white' | 'black', opacity: op.opacity };
     return null;
   }
 
   function buildValue(varName: string): string | null {
     if (varName === variable && opacity >= 100) return null;
     if (opacity >= 100) return varName;
-    return `color-mix(in srgb, var(${varName}) ${opacity}%, transparent)`;
+    return formatColorOpacity(varName, opacity);
   }
 
   function applyOpacity() {
@@ -399,9 +395,9 @@
     }
     chosenStatic = null;
 
-    const opacityParsed = parseOpacity(raw);
+    const opacityParsed = parseColorOpacity(raw);
     if (opacityParsed) {
-      const parsed = parseRef(opacityParsed.inner);
+      const parsed = parseRef(`var(${opacityParsed.name})`);
       if (parsed) {
         chosenCategory = parsed.category;
         chosenFamily = parsed.family;

package/src/editor/ui/UITokenSelector.svelte

@@ -3,6 +3,7 @@
   import type { Snippet } from 'svelte';
   import { setCssVar, removeCssVar, CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
   import type { CssVarRef } from '../core/store/editorTypes';
+  import { cssStringToRef } from '../core/store/cssVarRef';
   import {
     editorState,
     setComponentAlias,
@@ -116,14 +117,13 @@
     if (component) {
       const useLinked = isLinkedDisplay;
       if (semanticName) {
-        // Mirror splitAliasesAndConfig: a `--…` reference becomes a token
-        // (rendered as `var(name)`); anything else (color-mix expressions,
-        // `transparent`, gradient tokens already wrapped) is a literal whose
-        // value is emitted as-is. Storing complex CSS as a token would render
+        // Same classifier as the disk loader (cssStringToRef): a `--…`
+        // reference becomes a token (rendered as `var(name)`); a
+        // `color-mix(... var(--token) NN%, transparent)` becomes a colour ref;
+        // anything else (`transparent`, a materialized gradient) is a literal
+        // emitted as-is. Storing complex CSS as a token would render
         // `var(color-mix(...))`, which is invalid and breaks the preview.
-        const ref: CssVarRef = semanticName.startsWith('--')
-          ? { kind: 'token', name: semanticName }
-          : { kind: 'literal', value: semanticName };
+        const ref: CssVarRef = cssStringToRef(semanticName);
         if (useLinked) setComponentAliasLinked(component, variable, ref);
         else setComponentAlias(component, variable, ref);
       } else {

package/src/live-tokens/data/tokens.generated.css

@@ -1,7 +1,7 @@
 /* Generated by themeFileApi from the production theme and component configs. Do not edit. */
 /* tokens.css holds developer-authored defaults; this file holds editor overrides. */
 
-/* Production theme: my-theme */
+/* Production theme: default */
 :root:root {
   --gradient-1: linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%);
   --gradient-2: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-special-500) 100%);
@@ -54,10 +54,6 @@
   --dialog-secondary-hover-border-width: var(--border-width-1);
   --dialog-secondary-hover-radius: var(--radius-md);
   --dialog-secondary-hover-padding: var(--space-8);
-  --columns-count: 12;
-  --columns-max-width: 1440px;
-  --columns-gutter: 32px;
-  --columns-margin: 0px;
   --overlay-low: color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent);
   --overlay: color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent);
   --overlay-high: color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent);
@@ -69,6 +65,10 @@
   --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
   --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
   --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
+  --columns-count: 12;
+  --columns-max-width: 1440px;
+  --columns-gutter: 32px;
+  --columns-margin: 0px;
   --color-neutral-100: #dde6ec;
   --color-neutral-200: #c4cdd3;
   --color-neutral-300: #a8b1b7;
@@ -356,97 +356,3 @@
   --font-serif: "GFS Didot", serif;
   --font-mono: "fira-code", ui-monospace, "SF Mono", Menlo, Consolas, monospace, monospace;
 }
-
-/* Component aliases (production configs differing from defaults) */
-:root:root {
-  /* button (my-button) */
-  --button-primary-text-font-size: var(--font-size-md);
-  --button-primary-text-font-weight: var(--font-weight-semibold);
-  --button-primary-radius: var(--radius-xl);
-  --button-secondary-text-font-size: var(--font-size-md);
-  --button-secondary-text-font-weight: var(--font-weight-semibold);
-  --button-secondary-radius: var(--radius-xl);
-  --button-outline-text-font-size: var(--font-size-md);
-  --button-outline-text-font-weight: var(--font-weight-semibold);
-  --button-outline-radius: var(--radius-xl);
-  --button-success-text-font-size: var(--font-size-md);
-  --button-success-text-font-weight: var(--font-weight-semibold);
-  --button-success-border-width: var(--border-width-1);
-  --button-success-radius: var(--radius-xl);
-  --button-danger-text-font-size: var(--font-size-md);
-  --button-danger-text-font-weight: var(--font-weight-semibold);
-  --button-danger-border-width: var(--border-width-1);
-  --button-danger-radius: var(--radius-xl);
-  --button-warning-text-font-size: var(--font-size-md);
-  --button-warning-text-font-weight: var(--font-weight-semibold);
-  --button-warning-border-width: var(--border-width-1);
-  --button-warning-radius: var(--radius-xl);
-  --button-small-text-font-size: var(--font-size-sm);
-
-  /* callout (my-callout) */
-  --callout-info-border: var(--border-info-medium);
-  --callout-info-label-font-family: var(--font-sans);
-  --callout-info-label-font-size: var(--font-size-lg);
-  --callout-info-text-font-family: var(--font-sans);
-  --callout-info-text-font-size: var(--font-size-lg);
-  --callout-success-label-font-family: var(--font-sans);
-  --callout-success-label-font-size: var(--font-size-lg);
-  --callout-success-text-font-family: var(--font-sans);
-  --callout-success-text-font-size: var(--font-size-lg);
-  --callout-warning-label-font-family: var(--font-sans);
-  --callout-warning-label-font-size: var(--font-size-lg);
-  --callout-warning-text-font-family: var(--font-sans);
-  --callout-warning-text-font-size: var(--font-size-lg);
-  --callout-danger-label-font-family: var(--font-sans);
-  --callout-danger-label-font-size: var(--font-size-lg);
-  --callout-danger-text-font-family: var(--font-sans);
-  --callout-danger-text-font-size: var(--font-size-lg);
-
-  /* card (my-card) */
-  --card-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 70%, transparent);
-  --card-default-header-surface: color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent);
-  --card-default-title-font-size: var(--font-size-2xl);
-  --card-default-title-font-weight: var(--font-weight-medium);
-  --card-default-title-line-height: var(--line-height-md);
-  --card-default-icon-size: var(--icon-size-2xl);
-  --card-default-body-font-size: var(--font-size-xl);
-  --card-default-header-padding-top: var(--space-12);
-  --card-default-header-padding-right: var(--space-20);
-  --card-default-header-padding-bottom: var(--space-12);
-  --card-default-header-padding-left: var(--space-20);
-  --card-default-body-padding-top: var(--space-16);
-  --card-default-body-padding-right: var(--space-20);
-  --card-default-body-padding-bottom: var(--space-16);
-  --card-default-body-padding-left: var(--space-20);
-
-  /* codesnippet (my-code-snippet) */
-  --codesnippet-surface: color-mix(in srgb, var(--surface-neutral-lowest) 76%, transparent);
-  --codesnippet-border: var(--border-neutral);
-  --codesnippet-code-text: var(--text-brand-secondary);
-  --codesnippet-code-font-size: var(--font-size-md);
-
-  /* image (my-image) */
-  --image-default-radius: var(--radius-2xl);
-
-  /* imagelightbox (my-image-lightbox) */
-  --imagelightbox-tile-border: transparent;
-  --imagelightbox-overlay-surface: color-mix(in srgb, var(--color-neutral-950) 76%, transparent);
-
-  /* table (my-table) */
-  --table-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 57%, transparent);
-  --table-default-border: var(--border-neutral);
-  --table-default-border-width: var(--border-width-2);
-  --table-default-header-surface: var(--surface-neutral-lowest);
-  --table-default-header-font-size: var(--font-size-lg);
-  --table-default-header-font-weight: var(--font-weight-semibold);
-  --table-default-header-border: var(--border-neutral);
-  --table-default-cell-font-size: var(--font-size-md);
-  --table-default-cell-font-weight: var(--font-weight-medium);
-  --table-default-row-divider: var(--border-neutral-subtle);
-  --table-default-column-divider: var(--border-neutral-faint);
-  --table-default-column-divider-width: var(--border-width-1);
-
-  /* tooltip (my-tooltip) */
-  --tooltip-surface: color-mix(in srgb, var(--surface-canvas-lowest) 75%, transparent);
-  --tooltip-border-width: var(--border-width-1);
-}

package/src/system/components/Button.svelte

@@ -77,12 +77,12 @@
       --button-primary-surface: var(--surface-brand-high);
       --button-primary-text: var(--text-primary);
       --button-primary-text-font-family: var(--font-sans);
-      --button-primary-text-font-size: var(--font-size-sm);
-      --button-primary-text-font-weight: var(--font-weight-light);
+      --button-primary-text-font-size: var(--font-size-md);
+      --button-primary-text-font-weight: var(--font-weight-semibold);
       --button-primary-text-line-height: var(--line-height-sm);
       --button-primary-border: var(--border-brand);
       --button-primary-border-width: var(--border-width-1);
-      --button-primary-radius: var(--radius-md);
+      --button-primary-radius: var(--radius-xl);
       --button-primary-padding: var(--space-8);
       --button-primary-hover-surface: var(--surface-brand-higher);
       --button-primary-hover-text: var(--text-primary);
@@ -96,12 +96,12 @@
       --button-secondary-surface: var(--surface-neutral-high);
       --button-secondary-text: var(--text-primary);
       --button-secondary-text-font-family: var(--font-sans);
-      --button-secondary-text-font-size: var(--font-size-sm);
-      --button-secondary-text-font-weight: var(--font-weight-light);
+      --button-secondary-text-font-size: var(--font-size-md);
+      --button-secondary-text-font-weight: var(--font-weight-semibold);
       --button-secondary-text-line-height: var(--line-height-sm);
       --button-secondary-border: var(--border-neutral);
       --button-secondary-border-width: var(--border-width-1);
-      --button-secondary-radius: var(--radius-md);
+      --button-secondary-radius: var(--radius-xl);
       --button-secondary-padding: var(--space-8);
       --button-secondary-hover-surface: var(--surface-neutral-higher);
       --button-secondary-hover-text: var(--text-primary);
@@ -115,12 +115,12 @@
       --button-outline-surface: var(--color-transparent);
       --button-outline-text: var(--text-primary);
       --button-outline-text-font-family: var(--font-sans);
-      --button-outline-text-font-size: var(--font-size-sm);
-      --button-outline-text-font-weight: var(--font-weight-light);
+      --button-outline-text-font-size: var(--font-size-md);
+      --button-outline-text-font-weight: var(--font-weight-semibold);
       --button-outline-text-line-height: var(--line-height-sm);
       --button-outline-border: var(--border-neutral);
       --button-outline-border-width: var(--border-width-1);
-      --button-outline-radius: var(--radius-md);
+      --button-outline-radius: var(--radius-xl);
       --button-outline-padding: var(--space-8);
       --button-outline-hover-surface: var(--surface-neutral-lower);
       --button-outline-hover-text: var(--text-primary);
@@ -135,12 +135,12 @@
       --button-success-surface: var(--surface-success-low);
       --button-success-text: var(--text-success);
       --button-success-text-font-family: var(--font-sans);
-      --button-success-text-font-size: var(--font-size-sm);
-      --button-success-text-font-weight: var(--font-weight-light);
+      --button-success-text-font-size: var(--font-size-md);
+      --button-success-text-font-weight: var(--font-weight-semibold);
       --button-success-text-line-height: var(--line-height-sm);
       --button-success-border: var(--border-success);
-      --button-success-border-width: var(--border-width-2);
-      --button-success-radius: var(--radius-md);
+      --button-success-border-width: var(--border-width-1);
+      --button-success-radius: var(--radius-xl);
       --button-success-padding: var(--space-8);
       --button-success-hover-surface: var(--surface-success-higher);
       --button-success-hover-text: var(--text-primary);
@@ -154,12 +154,12 @@
       --button-danger-surface: var(--surface-danger-low);
       --button-danger-text: var(--text-danger);
       --button-danger-text-font-family: var(--font-sans);
-      --button-danger-text-font-size: var(--font-size-sm);
-      --button-danger-text-font-weight: var(--font-weight-light);
+      --button-danger-text-font-size: var(--font-size-md);
+      --button-danger-text-font-weight: var(--font-weight-semibold);
       --button-danger-text-line-height: var(--line-height-sm);
       --button-danger-border: var(--border-danger);
-      --button-danger-border-width: var(--border-width-2);
-      --button-danger-radius: var(--radius-md);
+      --button-danger-border-width: var(--border-width-1);
+      --button-danger-radius: var(--radius-xl);
       --button-danger-padding: var(--space-8);
       --button-danger-hover-surface: var(--surface-danger-high);
       --button-danger-hover-text: var(--text-primary);
@@ -173,12 +173,12 @@
       --button-warning-surface: var(--surface-warning-low);
       --button-warning-text: var(--text-warning);
       --button-warning-text-font-family: var(--font-sans);
-      --button-warning-text-font-size: var(--font-size-sm);
-      --button-warning-text-font-weight: var(--font-weight-light);
+      --button-warning-text-font-size: var(--font-size-md);
+      --button-warning-text-font-weight: var(--font-weight-semibold);
       --button-warning-text-line-height: var(--line-height-sm);
       --button-warning-border: var(--border-warning);
-      --button-warning-border-width: var(--border-width-2);
-      --button-warning-radius: var(--radius-md);
+      --button-warning-border-width: var(--border-width-1);
+      --button-warning-radius: var(--radius-xl);
       --button-warning-padding: var(--space-8);
       --button-warning-hover-surface: var(--surface-warning-high);
       --button-warning-hover-text: var(--text-primary);
@@ -193,7 +193,7 @@
          currently looks the same regardless of variant). Per-side padding
          overrides power split-padding edits at small. */
       --button-small-padding: var(--space-6);
-      --button-small-text-font-size: var(--font-size-xs);
+      --button-small-text-font-size: var(--font-size-sm);
       --button-small-text-font-weight: var(--font-weight-normal);
       --button-small-text-line-height: var(--line-height-sm);
       --button-small-icon-size: var(--font-size-xs);

package/src/system/components/Callout.svelte

@@ -27,19 +27,19 @@
   :global(:root) {
     /* Info */
     --callout-info-surface: var(--surface-info-lowest);
-    --callout-info-border: var(--border-info-subtle);
+    --callout-info-border: var(--border-info-medium);
     --callout-info-border-width: var(--border-width-1);
     --callout-info-accent-width: var(--border-width-4);
     --callout-info-radius: var(--radius-lg);
     --callout-info-padding: var(--space-12);
     --callout-info-label: var(--text-primary);
-    --callout-info-label-font-family: var(--font-serif);
-    --callout-info-label-font-size: var(--font-size-md);
+    --callout-info-label-font-family: var(--font-sans);
+    --callout-info-label-font-size: var(--font-size-lg);
     --callout-info-label-font-weight: var(--font-weight-bold);
     --callout-info-label-line-height: var(--line-height-md);
     --callout-info-text: var(--text-info);
-    --callout-info-text-font-family: var(--font-serif);
-    --callout-info-text-font-size: var(--font-size-md);
+    --callout-info-text-font-family: var(--font-sans);
+    --callout-info-text-font-size: var(--font-size-lg);
     --callout-info-text-font-weight: var(--font-weight-normal);
     --callout-info-text-line-height: var(--line-height-md);
 
@@ -51,13 +51,13 @@
     --callout-success-radius: var(--radius-lg);
     --callout-success-padding: var(--space-12);
     --callout-success-label: var(--text-primary);
-    --callout-success-label-font-family: var(--font-serif);
-    --callout-success-label-font-size: var(--font-size-md);
+    --callout-success-label-font-family: var(--font-sans);
+    --callout-success-label-font-size: var(--font-size-lg);
     --callout-success-label-font-weight: var(--font-weight-bold);
     --callout-success-label-line-height: var(--line-height-md);
     --callout-success-text: var(--text-success);
-    --callout-success-text-font-family: var(--font-serif);
-    --callout-success-text-font-size: var(--font-size-md);
+    --callout-success-text-font-family: var(--font-sans);
+    --callout-success-text-font-size: var(--font-size-lg);
     --callout-success-text-font-weight: var(--font-weight-normal);
     --callout-success-text-line-height: var(--line-height-md);
 
@@ -69,13 +69,13 @@
     --callout-warning-radius: var(--radius-lg);
     --callout-warning-padding: var(--space-12);
     --callout-warning-label: var(--text-primary);
-    --callout-warning-label-font-family: var(--font-serif);
-    --callout-warning-label-font-size: var(--font-size-md);
+    --callout-warning-label-font-family: var(--font-sans);
+    --callout-warning-label-font-size: var(--font-size-lg);
     --callout-warning-label-font-weight: var(--font-weight-bold);
     --callout-warning-label-line-height: var(--line-height-md);
     --callout-warning-text: var(--text-warning);
-    --callout-warning-text-font-family: var(--font-serif);
-    --callout-warning-text-font-size: var(--font-size-md);
+    --callout-warning-text-font-family: var(--font-sans);
+    --callout-warning-text-font-size: var(--font-size-lg);
     --callout-warning-text-font-weight: var(--font-weight-normal);
     --callout-warning-text-line-height: var(--line-height-md);
 
@@ -87,13 +87,13 @@
     --callout-danger-radius: var(--radius-lg);
     --callout-danger-padding: var(--space-12);
     --callout-danger-label: var(--text-primary);
-    --callout-danger-label-font-family: var(--font-serif);
-    --callout-danger-label-font-size: var(--font-size-md);
+    --callout-danger-label-font-family: var(--font-sans);
+    --callout-danger-label-font-size: var(--font-size-lg);
     --callout-danger-label-font-weight: var(--font-weight-bold);
     --callout-danger-label-line-height: var(--line-height-md);
     --callout-danger-text: var(--text-danger);
-    --callout-danger-text-font-family: var(--font-serif);
-    --callout-danger-text-font-size: var(--font-size-md);
+    --callout-danger-text-font-family: var(--font-sans);
+    --callout-danger-text-font-size: var(--font-size-lg);
     --callout-danger-text-font-weight: var(--font-weight-normal);
     --callout-danger-text-line-height: var(--line-height-md);
   }

package/src/system/components/Card.svelte

@@ -43,28 +43,36 @@
   @use '../styles/padding' as *;
 
   :global(:root) {
-    --card-default-surface: var(--surface-neutral-high);
+    --card-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 70%, transparent);
     --card-default-border: var(--border-neutral);
     --card-default-border-width: var(--border-width-1);
     --card-default-radius: var(--radius-lg);
     --card-default-header-padding: var(--space-16);
+    --card-default-header-padding-top: var(--space-12);
+    --card-default-header-padding-right: var(--space-20);
+    --card-default-header-padding-bottom: var(--space-12);
+    --card-default-header-padding-left: var(--space-20);
     --card-default-header-gap: var(--space-8);
     --card-default-body-padding: var(--space-16);
+    --card-default-body-padding-top: var(--space-16);
+    --card-default-body-padding-right: var(--space-20);
+    --card-default-body-padding-bottom: var(--space-16);
+    --card-default-body-padding-left: var(--space-20);
     --card-default-shadow: var(--shadow-sm);
     --card-default-blur: var(--blur-none);
-    --card-default-header-surface: var(--color-transparent);
+    --card-default-header-surface: color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent);
 
     --card-default-title: var(--text-primary);
     --card-default-title-font-family: var(--font-sans);
-    --card-default-title-font-size: var(--font-size-lg);
-    --card-default-title-font-weight: var(--font-weight-normal);
-    --card-default-title-line-height: var(--line-height-sm);
+    --card-default-title-font-size: var(--font-size-2xl);
+    --card-default-title-font-weight: var(--font-weight-medium);
+    --card-default-title-line-height: var(--line-height-md);
 
-    --card-default-icon-size: var(--icon-size-lg);
+    --card-default-icon-size: var(--icon-size-2xl);
 
     --card-default-body: var(--text-secondary);
     --card-default-body-font-family: var(--font-sans);
-    --card-default-body-font-size: var(--font-size-md);
+    --card-default-body-font-size: var(--font-size-xl);
     --card-default-body-font-weight: var(--font-weight-normal);
     --card-default-body-line-height: var(--line-height-md);
 

package/src/system/components/CodeSnippet.svelte

@@ -53,17 +53,17 @@
 <style>
   :global(:root) {
     /* Container. */
-    --codesnippet-surface: var(--surface-neutral-lower);
-    --codesnippet-border: var(--border-neutral-subtle);
+    --codesnippet-surface: color-mix(in srgb, var(--surface-neutral-lowest) 76%, transparent);
+    --codesnippet-border: var(--border-neutral);
     --codesnippet-border-width: var(--border-width-1);
     --codesnippet-radius: var(--radius-md);
     --codesnippet-padding: var(--space-16);
     --codesnippet-gap: var(--space-16);
 
     /* Code text. */
-    --codesnippet-code-text: var(--text-primary);
+    --codesnippet-code-text: var(--text-brand-secondary);
     --codesnippet-code-font-family: var(--font-mono);
-    --codesnippet-code-font-size: var(--font-size-sm);
+    --codesnippet-code-font-size: var(--font-size-md);
     --codesnippet-code-font-weight: var(--font-weight-normal);
     --codesnippet-code-line-height: var(--line-height-md);
 

package/src/system/components/Image.svelte

@@ -29,7 +29,7 @@
 
 <style>
   :global(:root) {
-    --image-default-radius: var(--radius-xl);
+    --image-default-radius: var(--radius-2xl);
     --image-default-border: var(--border-neutral);
     --image-default-border-width: var(--border-width-1);
     --image-default-shadow: var(--shadow-md);

package/src/system/components/ImageLightbox.svelte

@@ -409,7 +409,7 @@
     --imagelightbox-tile-shadow:           var(--shadow-md);
 
     /* overlay */
-    --imagelightbox-overlay-surface:       var(--overlay-high);
+    --imagelightbox-overlay-surface:       color-mix(in srgb, var(--color-neutral-950) 76%, transparent);
 
     /* chrome (toolbar + close button) */
     --imagelightbox-chrome-surface:        var(--surface-neutral-low);

package/src/system/components/Table.svelte

@@ -16,39 +16,39 @@
   :global(:root) {
     /* Wrapper */
     --table-default-radius: var(--radius-md);
-    --table-default-surface: var(--color-transparent);
-    --table-default-border: var(--border-canvas-subtle);
-    --table-default-border-width: var(--border-width-1);
+    --table-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 57%, transparent);
+    --table-default-border: var(--border-neutral);
+    --table-default-border-width: var(--border-width-2);
     --table-default-shadow: var(--shadow-md);
 
     /* Header */
-    --table-default-header-surface: var(--surface-canvas-low);
+    --table-default-header-surface: var(--surface-neutral-lowest);
     --table-default-header-text: var(--text-primary);
     --table-default-header-font-family: var(--font-sans);
-    --table-default-header-font-size: var(--font-size-sm);
-    --table-default-header-font-weight: var(--font-weight-normal);
+    --table-default-header-font-size: var(--font-size-lg);
+    --table-default-header-font-weight: var(--font-weight-semibold);
     --table-default-header-line-height: var(--line-height-xs);
     --table-default-header-padding: var(--space-12);
-    --table-default-header-border: var(--border-canvas-subtle);
+    --table-default-header-border: var(--border-neutral);
     --table-default-header-border-width: var(--border-width-1);
 
     /* Cell */
     --table-default-cell-text: var(--text-secondary);
     --table-default-cell-font-family: var(--font-sans);
-    --table-default-cell-font-size: var(--font-size-sm);
-    --table-default-cell-font-weight: var(--font-weight-normal);
+    --table-default-cell-font-size: var(--font-size-md);
+    --table-default-cell-font-weight: var(--font-weight-medium);
     --table-default-cell-line-height: var(--line-height-md);
     --table-default-cell-padding: var(--space-8);
 
     /* Row */
     --table-default-row-surface: var(--color-transparent);
-    --table-default-row-divider: var(--border-canvas-faint);
+    --table-default-row-divider: var(--border-neutral-subtle);
     --table-default-row-divider-width: var(--border-width-1);
     --table-default-row-stripe-surface: var(--color-transparent);
 
     /* Column */
-    --table-default-column-divider: var(--border-canvas-faint);
-    --table-default-column-divider-width: var(--border-width-0);
+    --table-default-column-divider: var(--border-neutral-faint);
+    --table-default-column-divider-width: var(--border-width-1);
   }
 
   .table-wrapper {

package/src/system/components/Tooltip.svelte

@@ -27,14 +27,14 @@
   @use '../styles/padding' as *;
 
   :global(:root) {
-    --tooltip-surface: var(--surface-neutral-highest);
+    --tooltip-surface: color-mix(in srgb, var(--surface-canvas-lowest) 75%, transparent);
     --tooltip-text: var(--text-primary);
     --tooltip-text-font-family: var(--font-sans);
     --tooltip-text-font-size: var(--font-size-sm);
     --tooltip-text-font-weight: var(--font-weight-normal);
     --tooltip-text-line-height: var(--line-height-md);
     --tooltip-border: var(--border-neutral);
-    --tooltip-border-width: var(--border-width-0);
+    --tooltip-border-width: var(--border-width-1);
     --tooltip-radius: var(--radius-md);
     --tooltip-padding: var(--space-6);
     --tooltip-shadow: var(--shadow-md);