@motion-proto/live-tokens 0.6.2 → 0.7.1

package/src/{components → system/components}/Table.svelte

@@ -11,9 +11,12 @@
 </div>
 
 <style lang="scss">
+  @use '../styles/padding' as *;
+
   :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-shadow: var(--shadow-md);
@@ -38,9 +41,10 @@
     --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-width: var(--border-width-1);
-    --table-default-row-stripe-surface: var(--surface-canvas-lower);
+    --table-default-row-stripe-surface: var(--color-transparent);
 
     /* Column */
     --table-default-column-divider: var(--border-canvas-faint);
@@ -51,6 +55,7 @@
     overflow-x: auto;
     margin: var(--space-12) 0;
     -webkit-overflow-scrolling: touch;
+    background: var(--table-default-surface);
     border: var(--table-default-border-width) solid var(--table-default-border);
     border-radius: var(--table-default-radius);
     box-shadow: var(--table-default-shadow);
@@ -70,7 +75,7 @@
     font-size: var(--table-default-header-font-size);
     font-weight: var(--table-default-header-font-weight);
     line-height: var(--table-default-header-line-height);
-    padding: var(--table-default-header-padding);
+    @include themed-padding(--table-default-header-padding);
     text-align: left;
     border-bottom: var(--table-default-header-border-width) solid var(--table-default-header-border);
     border-right: var(--table-default-column-divider-width) solid var(--table-default-column-divider);
@@ -78,6 +83,7 @@
   }
 
   .table-wrapper :global(td) {
+    background: var(--table-default-row-surface);
     color: var(--table-default-cell-text);
     font-family: var(--table-default-cell-font-family);
     font-size: var(--table-default-cell-font-size);
@@ -97,8 +103,16 @@
     border-right: none;
   }
 
+  /* Stripe is layered over the base row surface as a background-image, so a
+     translucent stripe color blends with the base instead of replacing it.
+     An opaque stripe still covers the base (visually identical to the old
+     replacement behavior); a fully transparent stripe leaves the base
+     untouched, which is the default out of the box. */
   .table-wrapper :global(tr:nth-child(even) td) {
-    background: var(--table-default-row-stripe-surface);
+    background-image: linear-gradient(
+      var(--table-default-row-stripe-surface),
+      var(--table-default-row-stripe-surface)
+    );
   }
 
   .table-wrapper :global(tr:last-child td) {

package/src/{components → system/components}/Tooltip.svelte

@@ -23,7 +23,9 @@
   {/if}
 </div>
 
-<style>
+<style lang="scss">
+  @use '../styles/padding' as *;
+
   :global(:root) {
     --tooltip-surface: var(--surface-neutral-highest);
     --tooltip-text: var(--text-primary);
@@ -50,7 +52,7 @@
     transform: translateX(-50%);
     background: var(--tooltip-surface);
     color: var(--tooltip-text);
-    padding: var(--tooltip-padding) calc(var(--tooltip-padding) * 2);
+    @include themed-padding(--tooltip-padding, $h: 2);
     border: var(--tooltip-border-width) solid var(--tooltip-border);
     border-radius: var(--tooltip-radius);
     font-family: var(--tooltip-text-font-family);
@@ -68,7 +70,7 @@
   .tooltip::after {
     content: '';
     position: absolute;
-    bottom: calc(-4px - var(--tooltip-border-width) * 1px);
+    bottom: calc(-4px - var(--tooltip-border-width));
     left: 50%;
     width: 8px;
     height: 8px;
@@ -86,7 +88,7 @@
 
   .tooltip.bottom::after {
     bottom: auto;
-    top: calc(-4px - var(--tooltip-border-width) * 1px);
+    top: calc(-4px - var(--tooltip-border-width));
     border-right: none;
     border-bottom: none;
     border-left: var(--tooltip-border-width) solid var(--tooltip-border);

package/src/system/styles/CONVENTIONS.md

@@ -0,0 +1,178 @@
+# Token naming conventions
+
+This project uses a **two-layer token system**. Read this before adding or renaming a CSS custom property.
+
+## Files in this directory
+
+Each file plays a distinct role. Don't merge them without understanding why they were split.
+
+| File | Scope | Tokens used | Loaded by | Notes |
+|---|---|---|---|---|
+| `tokens.css` | Themed pages | Defines `--color-*`, `--surface-*`, `--text-*`, `--space-*`, … | `main.ts` | **Runtime-edited.** The token editor rewrites this file via the `themeFileApi` Vite plugin. Starter content; consumers replace at will. |
+| `ui-editor.css` | Editor chrome only | Defines `--ui-*` (opaque grayscale, system fonts) | JS-imported by `Editor.svelte` and `ComponentEditorPage.svelte` | Deliberately isolated from the theme system so editor surfaces stay neutral while live theme edits flow through the components being edited. Never load globally. |
+| `ui-form-controls.css` | Editor chrome only | Consumes `--ui-*` only | JS-imported by `Editor.svelte` and `ComponentEditorPage.svelte` | `.ui-form-select` / `.ui-form-input` / `.ui-form-field-*` classes. Used by `ProjectFontsSection`, `FontStackEditor`, `DialogEditor`, `NotificationEditor`. Theme-immune — must not reference `--font-*`, `--surface-*`, etc. |
+| `site.css` | Themed pages | Consumes theme tokens | Page-imported by `Home.svelte` / `Demo.svelte` | Global typography for the landing/demo pages (unscoped `h1`, `p`, `a`, …). Never load on editor pages. Starter content. |
+| `fonts.css` + `fonts/` | Themed pages only | n/a (`@font-face` only) | `main.ts` | Build-special-cased: copied directly to `dist/` without processing so Vite doesn't inline woff2 files as base64. Starter content; editor's font invariant means these never affect chrome. |
+
+### Publishing layout
+
+The library publishes a small set of subpaths:
+
+- `./styles/ui-editor.css` — read-only window onto the editor's `--ui-*` token contract (for theming inspection or debugging). Consumers don't *need* to import this; the editor pages auto-load it.
+- `./starter/tokens.css`, `./starter/site.css`, `./starter/fonts.css` — replaceable starter content. Consumers can import as-is for a working default, or copy + edit.
+
+`ui-form-controls.css` is editor-internal and not exported — the editor pages script-import it themselves.
+
+### Editor font invariant
+
+Editor chrome uses **only** the `--ui-*` font namespace (`--ui-font-sans`, `--ui-font-mono`, `--ui-font-size-*`, etc.), which `ui-editor.css` defines as a pure system stack. No editor-namespace rule may reference `var(--font-sans)`, `var(--font-serif)`, `var(--font-display)`, or `var(--font-mono)` — those are the consumer's theme fonts and must not bleed into chrome. This invariant is what closes the "editor adopts consumer brand fonts" leak.
+
+### When to put a rule where
+
+- It defines a `--color-*` / `--surface-*` / `--space-*` / etc. → `tokens.css`.
+- It defines a `--ui-*` token → `ui-editor.css`.
+- It styles a bare element selector (`h1`, `p`, `blockquote`) on themed pages → `site.css`.
+- It styles editor chrome → put it in the component's own `<style>` block using `--ui-*` tokens; don't add a new global file.
+- It declares an `@font-face` → `fonts.css` (and add the woff2 to `fonts/`).
+
+## Layer 1 — theme tokens (`tokens.css`)
+
+Theme tokens are the design system's vocabulary. They describe colors, sizes, spacing, shadows, and motion: the things a designer reasons about independent of any one component. Components consume them, and themes in `themes/*.json` recolor or re-scale them.
+
+### Category-first naming
+
+Every theme token starts with a **category prefix**. The category tells you what *kind* of value lives at that key:
+
+| Category       | What it holds                                                   |
+|----------------|-----------------------------------------------------------------|
+| `--color-*`    | Primitive color palette (e.g. `--color-accent-500`)             |
+| `--surface-*`  | Fill/background colors, with elevation tiers                    |
+| `--border-*`   | Border colors, with emphasis tiers                              |
+| `--text-*`     | Text colors, with hierarchy tiers                               |
+| `--font-*`     | Font families and weights                                       |
+| `--font-size-*`| Font sizes (explicit subcategory to avoid colliding with families) |
+| `--space-*`    | Spacing scale, values encoded in the name (`--space-8` = 8px)   |
+| `--radius-*`   | Border radii (t-shirt scale)                                    |
+| `--shadow-*`   | Elevation shadows                                               |
+| `--ring-*`     | Focus rings (separate namespace from shadows)                   |
+| `--border-width-*` | Stroke widths                                               |
+| `--transition-*`, `--opacity-*`, `--z-*` | Animation, opacity, z-index scales    |
+| `--overlay-*`, `--hover-*` | Semantic overlay tints                                |
+| `--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`).
+
+### Families within a category
+
+Color categories (`--surface-*`, `--border-*`, `--text-*`) partition into **families**: `neutral`, `canvas`, `primary` (*→ brand, rename pending*), `accent`, `success`, `warning`, `danger`, `info`, `special`, `alternate`. Each family carries its own emphasis/elevation scale suited to its role: 7-step elevation for surfaces, 4-step emphasis for borders, 5-step hierarchy for text. They differ on purpose.
+
+### Scales
+
+Two shapes appear:
+
+- **T-shirt scale** (`-xs / -sm / -md / -lg / -xl / -2xl …`). Used for `--radius-*`, `--font-size-*`, `--shadow-*`, `--ring-focus-*`.
+- **Numeric scale.** `--color-*-100` through `--color-*-950` for palettes; `--space-4 / -8 / -16 / …` (value encoded in the name).
+
+Don't invent a third scale shape for a new category.
+
+## Layer 2 — component tokens (`component-configs/*/default.json` + component Svelte files)
+
+Component tokens *reference* theme tokens. They're how a component names its own slots: "my bar's surface color", "my selected option's border width". The config file records which theme alias is currently assigned to each slot.
+
+### The naming scheme
+
+```
+--<componentId>-<part>[-<state>][-<element>]-<property>
+```
+
+- **`componentId`.** The literal component ID. No abbreviations. The ID itself has no dashes (it's the file-system-safe form: `segmentedcontrol`, not `segmented-control`).
+- **`part`.** Which part of the component this slot belongs to: `bar`, `divider`, `option`, `selected`, `track`, `save`, `cancel`, etc.
+- **`state`.** Optional. The interaction state if more than default: `hover`, `disabled`, `active`, `focus`. States come **before** the property, never after.
+- **`element`.** Optional. A sub-element within the part: `dot`, `icon`, `label`, `text`.
+- **`property`.** Always last. Either a **theme role** (`surface`, `border`, `text`, `icon`, `label`, `fill`) or a **CSS property name** (`radius`, `border-width`, `font-weight`, `font-family`, `font-size`).
+
+### No abbreviations
+
+- `bg` → `surface` (matches the theme role name and the theme layer's full-word vocabulary).
+- `fg` → `text`.
+- Component IDs are never abbreviated. Use `--segmentedcontrol-*`, not `--segment-*` or `--sc-*`.
+
+### Property suffix vocabulary
+
+| Suffix         | Meaning                                                      |
+|----------------|--------------------------------------------------------------|
+| `-surface`     | Fill/background color                                        |
+| `-border`      | Border color                                                 |
+| `-text`        | Text color                                                   |
+| `-icon`        | Icon color                                                   |
+| `-label`       | Label text color                                             |
+| `-fill`        | Inner fill (distinct from outer surface)                     |
+| `-radius`      | Corner radius                                                |
+| `-border-width`| Stroke thickness                                             |
+| `-font-family` | Font family reference                                        |
+| `-font-weight` | Font weight reference                                        |
+| `-font-size`   | Font size reference                                          |
+| `-thickness`   | Alternative stroke dimension (used where `-width` would alias another token under name-based fallback grouping) |
+| `-height`      | Explicit height when `-width`'s sibling would collide under name-based fallback grouping |
+| `-color`       | Generic color when none of the role words fits (rare)        |
+
+**Why `thickness` and `height` sometimes stand in for `width`:** when an editor declares no explicit `groupKey` for a token, sibling grouping falls back to matching the final `-<property>` segment. If two unrelated slots both end in `-width` and neither has a `groupKey`, they get auto-linked. Either declare a `groupKey` per token in the editor (preferred) or use an alternative property word. The divider in SegmentedControl uses `--segmentedcontrol-divider-thickness` for legacy parity with the fallback rule, but it now also has `groupKey: 'divider-thickness'` declared in the editor. The `groupKey` is the source of truth.
+
+### State order matters
+
+State comes **before** the property, not after:
+
+```
+--inlineeditactions-save-hover-surface    ✓  state before property; siblings on `-surface`
+--inlineeditactions-save-surface-hover    ✗  breaks sibling matching and reads oddly
+```
+
+### Linked siblings (the link toggle)
+
+Tokens that share a `groupKey` form a **sibling set**. A property declared `canBeLinked: true` in the editor shows a link toggle that lets the user broadcast one value across every sibling. So in SegmentedControl:
+
+- `--segmentedcontrol-bar-border-width` and `--segmentedcontrol-selected-border-width` share `groupKey: 'border-width'`.
+- `--segmentedcontrol-option-text-font-weight`, `--segmentedcontrol-option-disabled-text-font-weight`, and `--segmentedcontrol-selected-text-font-weight` share `groupKey: 'font-weight'`.
+
+Editor authors declare `groupKey` per token in the editor's token list (and call `registerComponentSchema(component, tokens)` once at module load). The store consults the schema first; for unmigrated editors with no schema entry, it falls back to matching the last `-<property>` segment. Tokens with neither a `groupKey` nor a colliding name suffix are solo.
+
+Linkage is **dev-declared** — the editor schema is the source of truth for which variables share a `groupKey`. Users only choose whether to opt out of an existing link (per-property), never to add or reshape one.
+
+The `unlinked` array on a `ComponentSlice` stores the variable names the user has explicitly detached. The remaining declared siblings stay linked to each other; an unlinked variable rejoins via `setComponentAliasLinked` or `relinkComponentProperty`.
+
+### Typography slot scoping
+
+When a component declares more than one typography slot — e.g. a notification with separate `title` and `text` slots — every typography `groupKey` (`font-family`, `font-size`, `font-weight`, `line-height`) **must** include the slot name as a prefix:
+
+```
+groupKey: 'title-font-family', 'text-font-family'   ✓  one link tree per slot
+groupKey: 'font-family'                              ✗  silently links title and text together
+```
+
+A bare typography `groupKey` like `'font-family'` is fine when the component has only one typography slot (Button has only `text`; RadioButton only `label`; CollapsibleSection only `label`). Add a slot prefix the moment the component grows a second slot.
+
+`registerComponentSchema` emits a console warning at runtime if a single `groupKey` covers variables whose name-derived slots differ. Treat that warning as a build-time error.
+
+### When the last-dash fallback surprises you
+
+For tokens without an explicit `groupKey`, the store derives one by splitting on the last dash:
+
+- `--segmentedcontrol-option-text-font-weight` → fallback groupKey `weight`.
+
+So the fallback property is always the literal last segment. If you don't want a token to participate in the fallback grouping, declare an explicit `groupKey` (or omit `canBeLinked`).
+
+## Checklist for adding a new component token
+
+1. Does the value belong at the **theme layer**? (It's a color or scale that multiple components could reuse.) → Add it to `tokens.css` under the correct category, not here.
+2. Pick a **componentId** matching the one used in `component-configs/` and the editor's `const component = '...'` literal.
+3. Build the name as `--<componentId>-<part>[-<state>]-<property>`.
+4. Use **full words**: no `bg`, no shortened component IDs.
+5. Declare the slot in both the component's Svelte `<style>` (`--tok: var(--theme-alias);`) and the config JSON (`"--tok": "--theme-alias"`).
+6. If the slot should link across variants, add `canBeLinked: true` and `groupKey: '<your-key>'` in the editor's token list. Siblings are tokens that share the same `groupKey`. Pick a `groupKey` that names the kind of property (`radius`, `border-width`, `font-weight`, `font-family`, etc.); a unique key isolates a token from any other. For typography on multi-slot components, prefix the slot name (see "Typography slot scoping").
+7. Make sure the editor calls `registerComponentSchema(component, tokens)` once at module load so the store sees the explicit groupKeys.
+
+## What's still pending
+
+- **`primary` → `brand` rename.** Disambiguates the emphasis-tier, color-family, and component-variant uses of "primary." Tracked in `temp/primary-to-brand-rename.md`.
+- **Theme-layer cleanups** tracked in `temp/theme-token-improvements.md`: font-weight scale normalization, bare-word orphan audit, full `bg` → `canvas` sweep.

package/src/{styles → system/styles}/fonts.css

@@ -4,17 +4,20 @@
 /* Adobe Typekit — fira-code */
 @import url('https://use.typekit.net/jes8oow.css');
 
+/* Google Fonts — Arvo (display) */
+@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
 /* Local — Fraunces */
 @font-face {
   font-family: "Fraunces";
-  src: url('/src/styles/fonts/Fraunces/Fraunces-roman-latin.woff2') format('woff2');
+  src: url('/src/system/styles/fonts/Fraunces/Fraunces-roman-latin.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: "Fraunces";
-  src: url('/src/styles/fonts/Fraunces/Fraunces-italic-latin.woff2') format('woff2');
+  src: url('/src/system/styles/fonts/Fraunces/Fraunces-italic-latin.woff2') format('woff2');
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
@@ -23,7 +26,7 @@
 /* Local — Manrope */
 @font-face {
   font-family: "Manrope";
-  src: url('/src/styles/fonts/Manrope/Manrope-latin.woff2') format('woff2');
+  src: url('/src/system/styles/fonts/Manrope/Manrope-latin.woff2') format('woff2');
   font-weight: 200 800;
   font-style: normal;
   font-display: swap;

package/src/{styles → system/styles}/tokens.css

@@ -420,7 +420,7 @@
   --radius-full: 9999px;
 
   /* Border Width */
-  --border-width-0: 0;
+  --border-width-0: 0px;
   --border-width-1: 1px;
   --border-width-2: 2px;
   --border-width-3: 3px;
@@ -491,11 +491,11 @@
      ═══════════════════════════════════════════════════════ */
   --columns-count: 12;
   --columns-max-width: 1440px;
-  --columns-gutter: clamp(0.5rem, 1.5vw, 1.5rem);
-  --columns-margin: 0;
+  --columns-gutter: 11px;
+  --columns-margin: 0px;
 
   /* Font Families */
-  --font-display: "Fraunces", serif;
+  --font-display: "Arvo", "Fraunces", serif;
   --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, sans-serif;
   --font-serif: "Fraunces", serif;
   --font-mono: "fira-code", ui-monospace, "SF Mono", Menlo, Consolas, monospace, monospace;
@@ -666,16 +666,10 @@
   --card-default-title: var(--text-primary);
   --card-default-body: var(--text-secondary);
   --card-default-radius: var(--radius-lg);
-  --card-hover-surface: color-mix(in srgb, var(--surface-neutral-lower) 90%, transparent);
   --card-hover-border: var(--border-neutral);
-  --card-hover-title: var(--text-primary);
-  --card-hover-body: var(--text-secondary);
-  --card-hover-radius: var(--radius-lg);
   --card-hover-shadow: var(--shadow-sm);
   --card-default-shadow: var(--shadow-sm);
-  --card-hover-header-surface: var(--surface-neutral-high);
   --card-default-header-surface: var(--surface-neutral);
-  --card-hover-border-width: var(--border-width-1);
   --card-default-border-width: var(--border-width-1);
   --collapsiblesection-container-frame-surface: var(--surface-canvas-high);
   --collapsiblesection-container-frame-border-width: var(--border-width-3);
@@ -1301,24 +1295,150 @@
 
 /* component-aliases:start */
 :root:root {
-  /* button (default_01) */
-  --button-primary-radius: var(--radius-full);
-  --button-primary-hover-radius: var(--radius-full);
-  --button-primary-disabled-radius: var(--radius-full);
-  --button-secondary-radius: var(--radius-full);
-  --button-secondary-hover-radius: var(--radius-full);
-  --button-secondary-disabled-radius: var(--radius-full);
-  --button-outline-radius: var(--radius-full);
-  --button-outline-hover-radius: var(--radius-full);
-  --button-outline-disabled-radius: var(--radius-full);
-  --button-success-radius: var(--radius-full);
-  --button-success-hover-radius: var(--radius-full);
-  --button-success-disabled-radius: var(--radius-full);
-  --button-danger-radius: var(--radius-full);
-  --button-danger-hover-radius: var(--radius-full);
-  --button-danger-disabled-radius: var(--radius-full);
-  --button-warning-radius: var(--radius-full);
-  --button-warning-hover-radius: var(--radius-full);
-  --button-warning-disabled-radius: var(--radius-full);
+  /* badge (my-badge) */
+  --badge-primary-radius: var(--radius-md);
+  --badge-accent-radius: var(--radius-md);
+  --badge-neutral-radius: var(--radius-md);
+  --badge-alternate-radius: var(--radius-md);
+  --badge-canvas-radius: var(--radius-md);
+  --badge-special-radius: var(--radius-md);
+  --badge-success-radius: var(--radius-md);
+  --badge-warning-radius: var(--radius-md);
+  --badge-danger-radius: var(--radius-md);
+  --badge-info-radius: var(--radius-md);
+  /* callout (my-callout) */
+  --callout-info-border-width: var(--border-width-2);
+  --callout-info-label-font-family: var(--font-sans);
+  --callout-info-label-font-weight: var(--font-weight-semibold);
+  --callout-info-text-font-family: var(--font-sans);
+  --callout-success-border-width: var(--border-width-2);
+  --callout-success-label-font-family: var(--font-sans);
+  --callout-success-label-font-weight: var(--font-weight-semibold);
+  --callout-success-text-font-family: var(--font-sans);
+  --callout-warning-border-width: var(--border-width-2);
+  --callout-warning-label-font-family: var(--font-sans);
+  --callout-warning-label-font-weight: var(--font-weight-semibold);
+  --callout-warning-text-font-family: var(--font-sans);
+  --callout-danger-border-width: var(--border-width-2);
+  --callout-danger-label-font-family: var(--font-sans);
+  --callout-danger-label-font-weight: var(--font-weight-semibold);
+  --callout-danger-text-font-family: var(--font-sans);
+  /* card (my-card) */
+  --card-default-surface: var(color-mix(in srgb, var(--surface-neutral-low) 95%, transparent));
+  --card-default-header-surface: var(color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent));
+  --card-default-title-font-weight: var(--font-weight-semibold);
+  --card-default-header-padding-top: var(--space-8);
+  --card-default-header-padding-right: var(--space-16);
+  --card-default-header-padding-bottom: var(--space-8);
+  --card-default-header-padding-left: var(--space-16);
+  /* cornerbadge (my-corner-badge) */
+  --corner-badge-primary-text-font-size: var(--font-size-xs);
+  --corner-badge-accent-text-font-size: var(--font-size-xs);
+  --corner-badge-neutral-text-font-size: var(--font-size-xs);
+  --corner-badge-alternate-text-font-size: var(--font-size-xs);
+  --corner-badge-canvas-text-font-size: var(--font-size-xs);
+  --corner-badge-special-text-font-size: var(--font-size-xs);
+  --corner-badge-success-text-font-size: var(--font-size-xs);
+  --corner-badge-warning-text-font-size: var(--font-size-xs);
+  --corner-badge-danger-text-font-size: var(--font-size-xs);
+  --corner-badge-info-text-font-size: var(--font-size-xs);
+  /* dialog (my-dialog) */
+  --dialog-overlay-surface: var(color-mix(in srgb, var(--surface-neutral-lowest) 65%, transparent));
+  /* progressbar (my-progress-bar) */
+  --progressbar-primary-fill: var(--color-brand-400);
+  --progressbar-success-fill: var(--color-success-400);
+  --progressbar-warning-fill: var(--color-warning-400);
+  --progressbar-danger-fill: var(--color-danger-400);
+  --progressbar-info-fill: var(--color-info-400);
+  /* sectiondivider (my-section-divider) */
+  --sectiondivider-canvas-title-font-family: var(--font-sans);
+  --sectiondivider-canvas-title-font-weight: var(--font-weight-bold);
+  --sectiondivider-canvas-title-border-width: var(--border-width-6);
+  --sectiondivider-canvas-title-stroke-color: var(color-mix(in srgb, var(--surface-canvas-lowest) 30%, transparent));
+  --sectiondivider-canvas-gradient-stop-1-color: var(color-mix(in srgb, var(--surface-canvas-highest) 85%, transparent));
+  --sectiondivider-canvas-gradient-stop-1-position: var(0%);
+  --sectiondivider-canvas-gradient-stop-2-color: var(color-mix(in srgb, var(--surface-canvas-higher) 60%, transparent));
+  --sectiondivider-canvas-gradient-stop-2-position: var(35%);
+  --sectiondivider-canvas-gradient-stop-3-color: var(color-mix(in srgb, var(--surface-canvas) 75%, transparent));
+  --sectiondivider-canvas-gradient-stop-3-position: var(100%);
+  --sectiondivider-canvas-border: var(--border-canvas-medium);
+  --sectiondivider-canvas-border-width: var(--border-width-2);
+  --sectiondivider-neutral-title-font-family: var(--font-sans);
+  --sectiondivider-neutral-title-font-weight: var(--font-weight-bold);
+  --sectiondivider-neutral-title-border-width: var(--border-width-6);
+  --sectiondivider-neutral-title-stroke-color: var(color-mix(in srgb, var(--surface-neutral-lowest) 30%, transparent));
+  --sectiondivider-neutral-gradient-stop-1-color: var(color-mix(in srgb, var(--surface-neutral-highest) 85%, transparent));
+  --sectiondivider-neutral-gradient-stop-1-position: var(0%);
+  --sectiondivider-neutral-gradient-stop-2-color: var(color-mix(in srgb, var(--surface-neutral-higher) 60%, transparent));
+  --sectiondivider-neutral-gradient-stop-2-position: var(35%);
+  --sectiondivider-neutral-gradient-stop-3-color: var(color-mix(in srgb, var(--surface-neutral) 75%, transparent));
+  --sectiondivider-neutral-gradient-stop-3-position: var(100%);
+  --sectiondivider-neutral-border: var(--border-neutral-medium);
+  --sectiondivider-neutral-border-width: var(--border-width-2);
+  --sectiondivider-alternate-title-font-family: var(--font-sans);
+  --sectiondivider-alternate-title-font-weight: var(--font-weight-bold);
+  --sectiondivider-alternate-title-border-width: var(--border-width-6);
+  --sectiondivider-alternate-title-stroke-color: var(color-mix(in srgb, var(--surface-alternate-lowest) 30%, transparent));
+  --sectiondivider-alternate-gradient-stop-1-color: var(color-mix(in srgb, var(--surface-alternate-highest) 85%, transparent));
+  --sectiondivider-alternate-gradient-stop-1-position: var(0%);
+  --sectiondivider-alternate-gradient-stop-2-color: var(color-mix(in srgb, var(--surface-alternate-higher) 60%, transparent));
+  --sectiondivider-alternate-gradient-stop-2-position: var(35%);
+  --sectiondivider-alternate-gradient-stop-3-color: var(color-mix(in srgb, var(--surface-alternate) 75%, transparent));
+  --sectiondivider-alternate-gradient-stop-3-position: var(100%);
+  --sectiondivider-alternate-border: var(--border-alternate-medium);
+  --sectiondivider-alternate-border-width: var(--border-width-2);
+  --sectiondivider-primary-title-font-family: var(--font-sans);
+  --sectiondivider-primary-title-font-weight: var(--font-weight-bold);
+  --sectiondivider-primary-title-border-width: var(--border-width-6);
+  --sectiondivider-primary-title-stroke-color: var(color-mix(in srgb, var(--surface-brand-lowest) 30%, transparent));
+  --sectiondivider-primary-gradient-stop-1-color: var(color-mix(in srgb, var(--surface-brand-highest) 85%, transparent));
+  --sectiondivider-primary-gradient-stop-1-position: var(0%);
+  --sectiondivider-primary-gradient-stop-2-color: var(color-mix(in srgb, var(--surface-brand-higher) 60%, transparent));
+  --sectiondivider-primary-gradient-stop-2-position: var(35%);
+  --sectiondivider-primary-gradient-stop-3-color: var(color-mix(in srgb, var(--surface-brand) 75%, transparent));
+  --sectiondivider-primary-gradient-stop-3-position: var(100%);
+  --sectiondivider-primary-border: var(--border-brand-medium);
+  --sectiondivider-primary-border-width: var(--border-width-2);
+  --sectiondivider-accent-title-font-family: var(--font-sans);
+  --sectiondivider-accent-title-font-weight: var(--font-weight-bold);
+  --sectiondivider-accent-title-border-width: var(--border-width-6);
+  --sectiondivider-accent-title-stroke-color: var(color-mix(in srgb, var(--surface-accent-lowest) 30%, transparent));
+  --sectiondivider-accent-description: var(--text-accent);
+  --sectiondivider-accent-gradient-stop-1-color: var(color-mix(in srgb, var(--surface-accent-highest) 85%, transparent));
+  --sectiondivider-accent-gradient-stop-1-position: var(0%);
+  --sectiondivider-accent-gradient-stop-2-color: var(color-mix(in srgb, var(--surface-accent-higher) 60%, transparent));
+  --sectiondivider-accent-gradient-stop-2-position: var(35%);
+  --sectiondivider-accent-gradient-stop-3-color: var(color-mix(in srgb, var(--surface-accent-low) 75%, transparent));
+  --sectiondivider-accent-gradient-stop-3-position: var(100%);
+  --sectiondivider-accent-border: var(--border-accent-medium);
+  --sectiondivider-accent-border-width: var(--border-width-2);
+  --sectiondivider-special-title-font-family: var(--font-sans);
+  --sectiondivider-special-title-font-weight: var(--font-weight-bold);
+  --sectiondivider-special-title-border-width: var(--border-width-6);
+  --sectiondivider-special-title-stroke-color: var(color-mix(in srgb, var(--surface-special-lowest) 30%, transparent));
+  --sectiondivider-special-gradient-stop-1-color: var(color-mix(in srgb, var(--surface-special-highest) 85%, transparent));
+  --sectiondivider-special-gradient-stop-1-position: var(0%);
+  --sectiondivider-special-gradient-stop-2-color: var(color-mix(in srgb, var(--surface-special-higher) 60%, transparent));
+  --sectiondivider-special-gradient-stop-2-position: var(35%);
+  --sectiondivider-special-gradient-stop-3-color: var(color-mix(in srgb, var(--surface-special) 75%, transparent));
+  --sectiondivider-special-gradient-stop-3-position: var(100%);
+  --sectiondivider-special-border: var(--border-special-medium);
+  --sectiondivider-special-border-width: var(--border-width-2);
+  /* segmentedcontrol (my-segmented-control) */
+  --segmentedcontrol-bar-surface: var(--surface-neutral-lower);
+  --segmentedcontrol-option-text: var(--text-secondary);
+  --segmentedcontrol-option-hover-icon: var(--text-primary);
+  --segmentedcontrol-selected-surface: var(--surface-brand);
+  --segmentedcontrol-selected-text-font-weight: var(--font-weight-normal);
+  --segmentedcontrol-selected-icon: var(--text-primary);
+  --segmentedcontrol-selected-border: var(--border-brand-medium);
+  --segmentedcontrol-disabled-surface: var(transparent);
+  /* table (my-table) */
+  --table-default-header-surface: var(--surface-neutral-lower);
+  --table-default-header-font-weight: var(--font-weight-semibold);
+  --table-default-header-border: var(--border-neutral);
+  --table-default-row-divider: var(--border-neutral);
+  --table-default-row-stripe-surface: var(color-mix(in srgb, var(--surface-neutral-lower) 50%, transparent));
+  --table-default-row-surface: var(color-mix(in srgb, var(--surface-neutral) 70%, transparent));
 }
 /* component-aliases:end */

package/src/component-editor/ImageEditor.svelte

@@ -1,74 +0,0 @@
-<script module lang="ts">
-  import type { Token } from './scaffolding/types';
-
-  export const component = 'image';
-
-  // Single object: image frame.
-  const states: Record<string, Token[]> = {
-    image: [
-      { label: 'border color', groupKey: 'border', variable: '--image-default-border' },
-      { label: 'border width', groupKey: 'width', variable: '--image-default-border-width' },
-      { label: 'corner radius', groupKey: 'radius', variable: '--image-default-radius' },
-      { label: 'image shadow', groupKey: 'shadow', variable: '--image-default-shadow' },
-    ],
-  };
-
-  export const allTokens: Token[] = Object.values(states).flat();
-</script>
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import Image from '../components/Image.svelte';
-  import VariantGroup from './scaffolding/VariantGroup.svelte';
-  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import demoImageUrl from '../assets/offering.webp';
-  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
-  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
-  import { setCssVar } from '../lib/cssVarSync';
-
-  const bgVar = '--backdrop-image-surface';
-
-  onMount(() => {
-    if (!document.documentElement.style.getPropertyValue(bgVar)) {
-      setCssVar(bgVar, 'var(--surface-canvas)');
-    }
-  });
-</script>
-
-<ComponentEditorBase {component} title="Image" description="Framed image with rounded corners, border, and shadow. Import from <code>components/Image.svelte</code>" tokens={allTokens}>
-  {#snippet config()}
-  
-      <label class="backdrop-config">
-        <span>Sample background</span>
-        <div class="picker-slot">
-          <UIPaletteSelector variable={bgVar} />
-        </div>
-      </label>
-    
-  {/snippet}
-  <VariantGroup name="image" title="Image" {states} {component}>
-    <ShadowBackdrop mode="color" colorVariable={bgVar}>
-      <div class="image-demo-grid">
-        <Image src={demoImageUrl} alt="Demo" variant="banner" />
-      </div>
-    </ShadowBackdrop>
-  </VariantGroup>
-</ComponentEditorBase>
-
-<style>
-  .image-demo-grid {
-    display: grid;
-    place-items: center;
-  }
-  .backdrop-config {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-8);
-  }
-  .picker-slot {
-    min-width: 8rem;
-  }
-  .picker-slot :global(.ui-token-selector) {
-    width: 100%;
-  }
-</style>