@motion-proto/live-tokens 0.18.3 → 0.19.1

package/README.md

@@ -26,12 +26,14 @@ npm install @motion-proto/live-tokens
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { themeFileApi } from '@motion-proto/live-tokens/vite-plugin';
 
 export default defineConfig({
   plugins: [
-    svelte(),
+    // vitePreprocess compiles the shipped components' `<style lang="scss">`
+    // blocks — install `sass` alongside it.
+    svelte({ preprocess: vitePreprocess() }),
     themeFileApi({
       tokensCssPath: 'src/system/styles/tokens.css',
     }),
@@ -205,10 +207,10 @@ mount(App, { target: document.getElementById('app')! });
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 export default defineConfig({
-  plugins: [svelte()],
+  plugins: [svelte({ preprocess: vitePreprocess() })],
 });
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.18.3",
+  "version": "0.19.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -92,14 +92,13 @@
     "prepublishOnly": "npm run check:no-style-imports && npm run check:editor-font-isolation && npm run build:lib && npm run check:smoke-install"
   },
   "peerDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.0",
     "sass": "^1.0",
     "svelte": "^5",
-    "svelte-preprocess": "^6.0",
     "vite": "^8"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@tsconfig/svelte": "^5.0.8",
     "@types/node": "^25.9.1",
     "happy-dom": "^20.9.0",
     "highlight.js": "^11.11.1",
@@ -108,7 +107,6 @@
     "sass": "^1.98.0",
     "svelte": "^5.55.5",
     "svelte-check": "^4.4.8",
-    "svelte-preprocess": "^6.0.3",
     "tsup": "^8.5.1",
     "typescript": "~6.0.3",
     "vite": "^8.0.14",

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

@@ -52,8 +52,8 @@
   // since family/weight/color don't differ.
   const smallStates: Record<string, Token[]> = {
     'control bar': [
-      { label: 'divider inset', groupKey: 'small-divider-inset', variable: '--segmentedcontrol-divider-small-inset' },
-      { label: 'divider width', groupKey: 'small-thickness', variable: '--segmentedcontrol-divider-small-thickness' },
+      { label: 'divider inset', groupKey: 'small-divider-inset', variable: '--segmentedcontrol-small-divider-inset' },
+      { label: 'divider width', groupKey: 'small-divider-thickness', variable: '--segmentedcontrol-small-divider-thickness' },
       { label: 'corner radius', groupKey: 'small-radius', variable: '--segmentedcontrol-bar-small-radius' },
       { label: 'padding', variable: '--segmentedcontrol-bar-small-padding', groupKey: 'bar-small-padding' },
     ],

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

@@ -16,6 +16,7 @@
       { label: 'bottom radius', canBeLinked: true, groupKey: 'tab-bottom-radius', variable: `--tabbar-${s}-tab-bottom-radius` },
       { label: 'border color', canBeLinked: true, groupKey: 'tab-border-color', variable: `--tabbar-${s}-tab-border-color` },
       { label: 'border width', canBeLinked: true, groupKey: 'tab-border-width', variable: `--tabbar-${s}-tab-border-width` },
+      { label: 'indicator width', canBeLinked: true, groupKey: 'indicator-border-width', variable: `--tabbar-${s}-indicator-border-width` },
     ];
   }
   function tabStateTypeGroups(s: TabState): TypeGroupConfig[] {
@@ -35,7 +36,6 @@
     bar: [
       { label: 'divider color', groupKey: 'bar-divider', variable: '--tabbar-bar-divider' },
       { label: 'divider thickness', groupKey: 'bar-divider-thickness', variable: '--tabbar-bar-divider-thickness' },
-      { label: 'indicator thickness', groupKey: 'bar-indicator-thickness', variable: '--tabbar-bar-indicator-thickness' },
       { label: 'space above', groupKey: 'bar-top-margin', variable: '--tabbar-bar-top-margin' },
       // Consumed via `padding-bottom: var(--tabbar-bar-bottom-padding)` — a
       // one-axis read. Splitting would produce top/left/right values that have

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

@@ -8,15 +8,14 @@
   // on top of that baseline.
   const states: Record<string, Token[]> = {
     default: [
-      { label: 'track surface',     variable: '--toggle-track-surface' },
-      { label: 'track border',      variable: '--toggle-track-border' },
-      { label: 'track border width',variable: '--toggle-track-border-width' },
+      { label: 'thumb size',        variable: '--toggle-thumb-size' },
+      { label: 'track padding',     variable: '--toggle-track-padding' },
       { label: 'track radius',      variable: '--toggle-track-radius' },
-      { label: 'track width',       variable: '--toggle-track-width' },
-      { label: 'track thickness',   variable: '--toggle-track-thickness' },
-      { label: 'thumb surface',     variable: '--toggle-thumb-surface' },
+      { label: 'track border width',variable: '--toggle-track-border-width' },
+      { label: 'track border',      variable: '--toggle-track-border' },
+      { label: 'track surface',     variable: '--toggle-track-surface' },
       { label: 'thumb border',      variable: '--toggle-thumb-border' },
-      { label: 'thumb size',        variable: '--toggle-thumb-size' },
+      { label: 'thumb surface',     variable: '--toggle-thumb-surface' },
       { label: 'label text',        variable: '--toggle-label-text' },
       { label: 'label font family', variable: '--toggle-label-font-family' },
       { label: 'label font size',   variable: '--toggle-label-font-size' },

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

@@ -89,7 +89,7 @@
   const KIND_PATTERNS: Array<{ kind: Kind; matches: (v: string) => boolean }> = [
     { kind: 'font-family',    matches: (v) => v.endsWith('-font-family') },
     { kind: 'font-weight',    matches: (v) => v.endsWith('-font-weight') },
-    { kind: 'font-size',      matches: (v) => v.endsWith('-font-size') || v.endsWith('-icon-size') },
+    { kind: 'font-size',      matches: (v) => v.endsWith('-font-size') || v.endsWith('-icon-size') || v.endsWith('-thumb-size') },
     { kind: 'line-height',    matches: (v) => v.endsWith('-line-height') },
     { kind: 'letter-spacing', matches: (v) => v.endsWith('-letter-spacing') },
     { kind: 'text-color',     matches: (v) => v.endsWith('-text') || v.startsWith('--text-') },

package/src/editor/core/themes/migrations/2026-05-29-segmentedcontrol-small-divider-rename.ts

@@ -0,0 +1,36 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-29, segmentedcontrol):
+ *
+ * Moves `small` ahead of `divider` in the small-size divider tokens so the
+ * picker's suffix matcher recognises them. With `-small-` as an infix, the
+ * variable's tail is `-small-thickness` / `-small-inset` — neither of which
+ * is in `KIND_PATTERNS`, so the editor falls back to rendering them as
+ * colour pickers. Reordering to `--segmentedcontrol-small-divider-*` puts
+ * `-divider-thickness` / `-divider-inset` at the suffix, where the picker
+ * classifies them as a stroke width and a divider inset respectively.
+ *
+ *   --segmentedcontrol-divider-small-thickness → --segmentedcontrol-small-divider-thickness
+ *   --segmentedcontrol-divider-small-inset     → --segmentedcontrol-small-divider-inset
+ */
+
+const RENAMES: Record<string, string> = {
+  '--segmentedcontrol-divider-small-thickness': '--segmentedcontrol-small-divider-thickness',
+  '--segmentedcontrol-divider-small-inset': '--segmentedcontrol-small-divider-inset',
+};
+
+export const componentMigration_2026_05_29_segmentedcontrolSmallDividerRename: Migration = {
+  id: '2026-05-29-segmentedcontrol-small-divider-rename',
+  fromVersion: 18,
+  toVersion: 19,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'segmentedcontrol') return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMES[key] ?? key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-29-tabbar-indicator-thickness-to-per-state-width.ts

@@ -0,0 +1,43 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-29, tabbar):
+ *
+ * Moves the indicator stroke width from a bar-level token to a per-state
+ * token, mirroring how indicator color already rebinds per state. Also
+ * renames the suffix from `-thickness` to `-border-width` so the editor's
+ * suffix-based picker classifies it as a width input instead of a color.
+ *
+ *   --tabbar-bar-indicator-thickness  →  --tabbar-{state}-indicator-border-width
+ *                                         for state in default/hover/active/disabled.
+ *
+ * The bar-level value seeds every state, preserving the visual default
+ * (all four states had the same effective indicator width since only
+ * color rebinds in the old model). Unset → falls back to `--border-width-2`
+ * to match the new component default.
+ */
+
+const TABBAR_STATES = ['default', 'hover', 'active', 'disabled'] as const;
+const OLD_KEY = '--tabbar-bar-indicator-thickness';
+const FALLBACK = '--border-width-2';
+
+export const componentMigration_2026_05_29_tabbarIndicatorThicknessToPerStateWidth: Migration = {
+  id: '2026-05-29-tabbar-indicator-thickness-to-per-state-width',
+  fromVersion: 17,
+  toVersion: 18,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'tabbar') return { ...rawVars };
+    const seed = rawVars[OLD_KEY] ?? FALLBACK;
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (key === OLD_KEY) continue;
+      out[key] = value;
+    }
+    for (const state of TABBAR_STATES) {
+      const newKey = `--tabbar-${state}-indicator-border-width`;
+      if (!(newKey in out)) out[newKey] = seed;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-29-toggle-derive-track-from-thumb.ts

@@ -0,0 +1,41 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-29, toggle):
+ *
+ * Drops the explicit track dimensions and replaces them with a single
+ * `track-padding` knob. The runtime CSS now derives:
+ *
+ *   track-width  = thumb-size * 2 + track-padding * 2
+ *   track-height = thumb-size     + track-padding * 2
+ *
+ * so width and thickness are no longer authorable — they're a function of
+ * thumb-size (picked from the font-size scale) and the new padding token.
+ *
+ *   --toggle-track-width      → dropped (derived)
+ *   --toggle-track-thickness  → dropped (derived)
+ *   --toggle-track-padding    → seeded with --space-2 if absent
+ *
+ * `--toggle-thumb-size` is left untouched. Pre-existing `--space-*` values
+ * still render as valid lengths; the editor's font-size picker just won't
+ * highlight them as a known entry until the user re-picks.
+ */
+
+export const componentMigration_2026_05_29_toggleDeriveTrackFromThumb: Migration = {
+  id: '2026-05-29-toggle-derive-track-from-thumb',
+  fromVersion: 19,
+  toVersion: 20,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'toggle') return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (key === '--toggle-track-width' || key === '--toggle-track-thickness') continue;
+      out[key] = value;
+    }
+    if (!('--toggle-track-padding' in out)) {
+      out['--toggle-track-padding'] = '--space-2';
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/index.ts

@@ -54,6 +54,9 @@ import {
   themeMigration_2026_05_26_dropOverlayExtraStops,
   componentMigration_2026_05_26_dropOverlayExtraStops,
 } from './2026-05-26-drop-overlay-extra-stops';
+import { componentMigration_2026_05_29_tabbarIndicatorThicknessToPerStateWidth } from './2026-05-29-tabbar-indicator-thickness-to-per-state-width';
+import { componentMigration_2026_05_29_segmentedcontrolSmallDividerRename } from './2026-05-29-segmentedcontrol-small-divider-rename';
+import { componentMigration_2026_05_29_toggleDeriveTrackFromThumb } from './2026-05-29-toggle-derive-track-from-thumb';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
@@ -80,6 +83,9 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_05_25_cornerbadgeFlattenVariants,
   themeMigration_2026_05_26_dropOverlayExtraStops,
   componentMigration_2026_05_26_dropOverlayExtraStops,
+  componentMigration_2026_05_29_tabbarIndicatorThicknessToPerStateWidth,
+  componentMigration_2026_05_29_segmentedcontrolSmallDividerRename,
+  componentMigration_2026_05_29_toggleDeriveTrackFromThumb,
 ];
 
 function countFor(kind: 'theme' | 'component-config'): number {

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

@@ -383,6 +383,25 @@
   --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);

package/src/system/components/SegmentedControl.svelte

@@ -127,8 +127,8 @@
        values so existing state-specific cascades flow through unchanged. */
     --segmentedcontrol-bar-small-padding: var(--space-2);
     --segmentedcontrol-bar-small-radius: var(--radius-md);
-    --segmentedcontrol-divider-small-inset: var(--space-4);
-    --segmentedcontrol-divider-small-thickness: var(--border-width-1);
+    --segmentedcontrol-small-divider-inset: var(--space-4);
+    --segmentedcontrol-small-divider-thickness: var(--border-width-1);
     --segmentedcontrol-option-small-padding: var(--space-6);
     --segmentedcontrol-option-small-gap: var(--space-6);
     --segmentedcontrol-option-small-icon-size: var(--icon-size-sm);
@@ -163,8 +163,8 @@
     --segmentedcontrol-bar-padding-left: var(--segmentedcontrol-bar-small-padding-left);
     --segmentedcontrol-bar-radius: var(--segmentedcontrol-bar-small-radius);
 
-    --segmentedcontrol-divider-inset: var(--segmentedcontrol-divider-small-inset);
-    --segmentedcontrol-divider-thickness: var(--segmentedcontrol-divider-small-thickness);
+    --segmentedcontrol-divider-inset: var(--segmentedcontrol-small-divider-inset);
+    --segmentedcontrol-divider-thickness: var(--segmentedcontrol-small-divider-thickness);
 
     --segmentedcontrol-option-padding: var(--segmentedcontrol-option-small-padding);
     --segmentedcontrol-option-padding-top: var(--segmentedcontrol-option-small-padding-top);

package/src/system/components/TabBar.svelte

@@ -64,7 +64,6 @@
     /* Bar */
     --tabbar-bar-divider: var(--border-neutral-subtle);
     --tabbar-bar-divider-thickness: var(--border-width-1);
-    --tabbar-bar-indicator-thickness: var(--border-width-2);
     --tabbar-bar-top-margin: var(--space-0);
     --tabbar-bar-bottom-padding: var(--space-0);
     --tabbar-bar-bottom-margin: var(--space-0);
@@ -84,6 +83,7 @@
     --tabbar-default-tab-border-width: var(--border-width-0);
     --tabbar-default-tab-top-radius: var(--radius-none);
     --tabbar-default-tab-bottom-radius: var(--radius-none);
+    --tabbar-default-indicator-border-width: var(--border-width-2);
 
     /* Hover tab */
     --tabbar-hover-text: var(--text-secondary);
@@ -99,6 +99,7 @@
     --tabbar-hover-tab-border-width: var(--border-width-0);
     --tabbar-hover-tab-top-radius: var(--radius-none);
     --tabbar-hover-tab-bottom-radius: var(--radius-none);
+    --tabbar-hover-indicator-border-width: var(--border-width-2);
 
     /* Active tab */
     --tabbar-active-text: var(--text-primary);
@@ -114,6 +115,7 @@
     --tabbar-active-tab-border-width: var(--border-width-0);
     --tabbar-active-tab-top-radius: var(--radius-none);
     --tabbar-active-tab-bottom-radius: var(--radius-none);
+    --tabbar-active-indicator-border-width: var(--border-width-2);
 
     /* Disabled tab */
     --tabbar-disabled-text: var(--text-disabled);
@@ -129,6 +131,7 @@
     --tabbar-disabled-tab-border-width: var(--border-width-0);
     --tabbar-disabled-tab-top-radius: var(--radius-none);
     --tabbar-disabled-tab-bottom-radius: var(--radius-none);
+    --tabbar-disabled-indicator-border-width: var(--border-width-2);
   }
 
   .tab-bar {
@@ -157,6 +160,7 @@
     --_icon-size: var(--tabbar-default-icon-size);
     --_surface: var(--tabbar-default-surface);
     --_indicator-color: var(--tabbar-default-border);
+    --_indicator-width: var(--tabbar-default-indicator-border-width);
     --_padding: var(--tabbar-default-padding);
     --_border-color: var(--tabbar-default-tab-border-color);
     --_border-width: var(--tabbar-default-tab-border-width);
@@ -169,9 +173,10 @@
     padding: var(--_padding) calc(var(--_padding) * 2);
     background: var(--_surface);
     border: var(--_border-width) solid var(--_border-color);
-    /* Indicator accent owns the bottom edge. Thickness is constant across
-       states (--tabbar-bar-indicator-thickness), only color rebinds. */
-    border-bottom: var(--tabbar-bar-indicator-thickness) solid var(--_indicator-color);
+    /* Indicator accent owns the bottom edge. Both width and color rebind
+       per state — `--tabbar-{state}-indicator-border-width` and
+       `--tabbar-{state}-border` (the indicator color slot). */
+    border-bottom: var(--_indicator-width) solid var(--_indicator-color);
     border-radius: var(--_top-radius) var(--_top-radius) var(--_bottom-radius) var(--_bottom-radius);
     color: var(--_text-color);
     font-family: var(--_text-family);
@@ -200,6 +205,7 @@
     --_icon-size: var(--tabbar-hover-icon-size);
     --_surface: var(--tabbar-hover-surface);
     --_indicator-color: var(--tabbar-hover-border);
+    --_indicator-width: var(--tabbar-hover-indicator-border-width);
     --_padding: var(--tabbar-hover-padding);
     --_border-color: var(--tabbar-hover-tab-border-color);
     --_border-width: var(--tabbar-hover-tab-border-width);
@@ -216,6 +222,7 @@
     --_icon-size: var(--tabbar-active-icon-size);
     --_surface: var(--tabbar-active-surface);
     --_indicator-color: var(--tabbar-active-border);
+    --_indicator-width: var(--tabbar-active-indicator-border-width);
     --_padding: var(--tabbar-active-padding);
     --_border-color: var(--tabbar-active-tab-border-color);
     --_border-width: var(--tabbar-active-tab-border-width);
@@ -232,6 +239,7 @@
     --_icon-size: var(--tabbar-disabled-icon-size);
     --_surface: var(--tabbar-disabled-surface);
     --_indicator-color: var(--tabbar-disabled-border);
+    --_indicator-width: var(--tabbar-disabled-indicator-border-width);
     --_padding: var(--tabbar-disabled-padding);
     --_border-color: var(--tabbar-disabled-tab-border-color);
     --_border-width: var(--tabbar-disabled-tab-border-width);

package/src/system/components/Toggle.svelte

@@ -55,11 +55,10 @@
     --toggle-track-border: var(--border-neutral);
     --toggle-track-border-width: var(--border-width-1);
     --toggle-track-radius: var(--radius-full);
-    --toggle-track-width: var(--space-32);
-    --toggle-track-thickness: var(--space-16);
+    --toggle-track-padding: var(--space-2);
     --toggle-thumb-surface: var(--surface-neutral-highest);
     --toggle-thumb-border: var(--border-neutral-strong);
-    --toggle-thumb-size: var(--space-12);
+    --toggle-thumb-size: var(--font-size-md);
     --toggle-label-text: var(--text-primary);
     --toggle-label-font-family: var(--font-sans);
     --toggle-label-font-size: var(--font-size-sm);
@@ -97,12 +96,16 @@
   }
   .toggle:disabled { cursor: not-allowed; }
 
+  /* Track geometry derives from the thumb. Width fits two thumb-widths plus
+     padding on each side; height fits one thumb plus the same padding. The
+     thumb's "on" travel is then exactly one thumb-width, regardless of
+     thumb-size or padding. Border sits outside (content-box default). */
   .track {
     position: relative;
     flex: none;
     display: inline-block;
-    width: var(--toggle-track-width);
-    height: var(--toggle-track-thickness);
+    width: calc(var(--toggle-thumb-size) * 2 + var(--toggle-track-padding) * 2);
+    height: calc(var(--toggle-thumb-size) + var(--toggle-track-padding) * 2);
     background: var(--toggle-track-surface);
     border: var(--toggle-track-border-width) solid var(--toggle-track-border);
     border-radius: var(--toggle-track-radius);
@@ -112,7 +115,7 @@
   .thumb {
     position: absolute;
     top: 50%;
-    left: var(--space-2);
+    left: var(--toggle-track-padding);
     width: var(--toggle-thumb-size);
     height: var(--toggle-thumb-size);
     transform: translateY(-50%);
@@ -145,8 +148,8 @@
     border-color: var(--toggle-on-track-border);
   }
   .toggle.on .thumb {
-    /* Calc keeps thumb flush with the right edge as track width and thumb size change. */
-    left: calc(var(--toggle-track-width) - var(--toggle-thumb-size) - var(--space-2) - (var(--toggle-track-border-width) * 2));
+    /* Mirror of the off-position calc: travel is exactly one thumb-width. */
+    left: calc(var(--toggle-thumb-size) + var(--toggle-track-padding));
     background: var(--toggle-on-thumb-surface);
     border-color: var(--toggle-on-thumb-border);
   }