@motion-proto/live-tokens 0.47.1 → 0.48.0

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

@@ -1,4 +1,4 @@
-/* Generated by themeFileApi from the production theme and component configs. Do not edit. */
+/* Generated by themeFileApi from the production theme. Do not edit. */
 /* tokens.css holds developer-authored defaults; this file holds editor overrides. */
 
 /* Production theme: default */
@@ -15,10 +15,7 @@
   --badge-trait-text-line-height: var(--line-height-none);
   --badge-trait-border: var(--border-brand-medium);
   --badge-trait-border-width: var(--border-width-1);
-  --badge-trait-radius: var(--radius-full);
-  --badge-trait-padding: var(--space-6);
   --badge-trait-shadow: transparent;
-  --sectiondivider-padding: var(--space-16);
   --sectiondivider-title: var(--text-primary);
   --sectiondivider-title-font-family: var(--font-display);
   --sectiondivider-title-font-size: var(--font-size-5xl);
@@ -35,25 +32,17 @@
   --dialog-primary-default-text: var(--text-primary);
   --dialog-primary-default-border: var(--border-neutral-medium);
   --dialog-primary-default-border-width: var(--border-width-1);
-  --dialog-primary-default-radius: var(--radius-md);
-  --dialog-primary-default-padding: var(--space-8);
   --dialog-primary-hover-surface: var(--surface-neutral-higher);
   --dialog-primary-hover-text: var(--text-primary);
   --dialog-primary-hover-border: var(--border-neutral-strong);
   --dialog-primary-hover-border-width: var(--border-width-1);
-  --dialog-primary-hover-radius: var(--radius-md);
-  --dialog-primary-hover-padding: var(--space-8);
   --dialog-secondary-default-text: var(--text-primary);
   --dialog-secondary-default-border: var(--border-neutral-medium);
   --dialog-secondary-default-border-width: var(--border-width-1);
-  --dialog-secondary-default-radius: var(--radius-md);
-  --dialog-secondary-default-padding: var(--space-8);
   --dialog-secondary-hover-surface: var(--surface-neutral-lower);
   --dialog-secondary-hover-text: var(--text-primary);
   --dialog-secondary-hover-border: var(--border-neutral-strong);
   --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;
@@ -69,17 +58,17 @@
   --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);
-  --color-brand-100: #ffbad3;
-  --color-brand-200: #ff98c1;
-  --color-brand-300: #ff7db4;
-  --color-brand-400: #ff5da7;
-  --color-brand-500: #fb2898;
-  --color-brand-600: #db0081;
-  --color-brand-700: #af0066;
-  --color-brand-800: #800049;
-  --color-brand-850: #54002e;
-  --color-brand-900: #2d0016;
-  --color-brand-950: #100005;
+  --color-brand-100: #ffe7ef;
+  --color-brand-200: #ffb5d1;
+  --color-brand-300: #ff7cb3;
+  --color-brand-400: #fb2898;
+  --color-brand-500: #d5007d;
+  --color-brand-600: #ab0064;
+  --color-brand-700: #85004c;
+  --color-brand-800: #610036;
+  --color-brand-850: #400022;
+  --color-brand-900: #21000f;
+  --color-brand-950: #070002;
   --surface-brand-lowest: #1d000c;
   --surface-brand-lower: #3e0020;
   --surface-brand-low: #620037;
@@ -93,21 +82,21 @@
   --border-brand-medium: #e9008a;
   --border-brand-strong: #ff6cad;
   --text-brand: #ff75b1;
-  --text-brand-secondary: #f61693;
-  --text-brand-tertiary: #b73373;
-  --text-brand-muted: #7b3854;
+  --text-brand-secondary: #df2d88;
+  --text-brand-tertiary: #953b63;
+  --text-brand-muted: #5c3846;
   --text-brand-disabled: #403337;
-  --color-accent-100: #98e1dd;
-  --color-accent-200: #73c3c0;
-  --color-accent-300: #43a29e;
-  --color-accent-400: #008582;
-  --color-accent-500: #006d6a;
-  --color-accent-600: #005856;
-  --color-accent-700: #004645;
-  --color-accent-800: #003634;
-  --color-accent-850: #002625;
-  --color-accent-900: #001615;
-  --color-accent-950: #000606;
+  --color-accent-100: #b4fffb;
+  --color-accent-200: #84e9e5;
+  --color-accent-300: #6ad0cc;
+  --color-accent-400: #50b8b4;
+  --color-accent-500: #329f9b;
+  --color-accent-600: #008582;
+  --color-accent-700: #006866;
+  --color-accent-800: #004b49;
+  --color-accent-850: #002f2e;
+  --color-accent-900: #001514;
+  --color-accent-950: #000202;
   --surface-accent-lowest: #000f0e;
   --surface-accent-lower: #002423;
   --surface-accent-low: #003c3b;
@@ -121,21 +110,21 @@
   --border-accent-medium: #259592;
   --border-accent-strong: #53bbb7;
   --text-accent: #62efea;
-  --text-accent-secondary: #5bbcb8;
-  --text-accent-tertiary: #508b88;
-  --text-accent-muted: #425d5c;
+  --text-accent-secondary: #5baba8;
+  --text-accent-tertiary: #4d7271;
+  --text-accent-muted: #3c4847;
   --text-accent-disabled: #313232;
-  --color-special-100: #d2c8ff;
-  --color-special-200: #b9a7ff;
-  --color-special-300: #a181ff;
-  --color-special-400: #8b5cf6;
-  --color-special-500: #773ee0;
-  --color-special-600: #641ccb;
-  --color-special-700: #5100aa;
-  --color-special-800: #3d0083;
-  --color-special-850: #29005e;
-  --color-special-900: #17003a;
-  --color-special-950: #060019;
+  --color-special-100: #efecff;
+  --color-special-200: #d3caff;
+  --color-special-300: #b9a7ff;
+  --color-special-400: #a282ff;
+  --color-special-500: #8b5cf6;
+  --color-special-600: #733ed8;
+  --color-special-700: #5c1bba;
+  --color-special-800: #430090;
+  --color-special-850: #2a005f;
+  --color-special-900: #130033;
+  --color-special-950: #03000d;
   --surface-special-lowest: #0f002b;
   --surface-special-lower: #250055;
   --surface-special-low: #3d0084;
@@ -149,21 +138,21 @@
   --border-special-medium: #8c5df8;
   --border-special-strong: #ac93ff;
   --text-special: #baa9ff;
-  --text-special-secondary: #9a75ff;
-  --text-special-tertiary: #745dba;
-  --text-special-muted: #504773;
+  --text-special-secondary: #8665e0;
+  --text-special-tertiary: #5c4e8b;
+  --text-special-muted: #3e3a4f;
   --text-special-disabled: #303032;
-  --color-canvas-100: #cecfe5;
-  --color-canvas-200: #b8b9cf;
-  --color-canvas-300: #a5a6bd;
-  --color-canvas-400: #9596ac;
-  --color-canvas-500: #85869d;
-  --color-canvas-600: #76768d;
-  --color-canvas-700: #65657c;
-  --color-canvas-800: #525269;
-  --color-canvas-850: #3c3c53;
-  --color-canvas-900: #1c1b32;
-  --color-canvas-950: #040215;
+  --color-canvas-100: #ecedff;
+  --color-canvas-200: #d0d0ed;
+  --color-canvas-300: #b6b6d2;
+  --color-canvas-400: #9c9db8;
+  --color-canvas-500: #84849e;
+  --color-canvas-600: #6b6c85;
+  --color-canvas-700: #53546c;
+  --color-canvas-800: #3c3c53;
+  --color-canvas-850: #25243a;
+  --color-canvas-900: #0f0e21;
+  --color-canvas-950: #02000b;
   --surface-canvas-lowest: #0a0523;
   --surface-canvas-lower: #1c1a37;
   --surface-canvas-low: #31304c;
@@ -177,14 +166,14 @@
   --border-canvas-medium: #80809b;
   --border-canvas-strong: #a4a5c0;
   --text-canvas: #9595c6;
-  --text-canvas-secondary: #7b7c9f;
-  --text-canvas-tertiary: #62637a;
-  --text-canvas-muted: #4b4b56;
+  --text-canvas-secondary: #6b6b89;
+  --text-canvas-tertiary: #4e4f5e;
+  --text-canvas-muted: #3c3c41;
   --text-canvas-disabled: #343435;
   --page-bg: #3c3c53;
   --page-bg-attachment: scroll;
   --color-neutral-100: #dde6ed;
-  --color-neutral-200: #c0c9d0;
+  --color-neutral-200: #c1c9d0;
   --color-neutral-300: #a5adb4;
   --color-neutral-400: #8a9299;
   --color-neutral-500: #70787e;
@@ -207,22 +196,22 @@
   --border-neutral-medium: #7c848b;
   --border-neutral-strong: #a0a9af;
   --text-primary: #ffffff;
-  --text-secondary: #dfe7ee;
-  --text-tertiary: #a3a8ad;
-  --text-muted: #6b6e70;
+  --text-secondary: #c2cacf;
+  --text-tertiary: #7e8285;
+  --text-muted: #4e4f50;
   --text-disabled: #383838;
   --text-inverted: #0f0f0f;
   --color-alternate-100: #eae3e0;
-  --color-alternate-200: #cec8c4;
-  --color-alternate-300: #b4adaa;
-  --color-alternate-400: #9a9491;
+  --color-alternate-200: #cfc8c5;
+  --color-alternate-300: #b5aeab;
+  --color-alternate-400: #9b9591;
   --color-alternate-500: #817b78;
-  --color-alternate-600: #696360;
-  --color-alternate-700: #514b49;
-  --color-alternate-800: #3a3532;
-  --color-alternate-850: #25201e;
-  --color-alternate-900: #110d0b;
-  --color-alternate-950: #030101;
+  --color-alternate-600: #67615e;
+  --color-alternate-700: #4e4845;
+  --color-alternate-800: #35302d;
+  --color-alternate-850: #1e1917;
+  --color-alternate-900: #090604;
+  --color-alternate-950: #000000;
   --surface-alternate-lowest: #100907;
   --surface-alternate-lower: #241d19;
   --surface-alternate-low: #39322f;
@@ -236,21 +225,21 @@
   --border-alternate-medium: #88827f;
   --border-alternate-strong: #ada6a3;
   --text-alternate: #ffffff;
-  --text-alternate-secondary: #f5efec;
-  --text-alternate-tertiary: #b2aeac;
-  --text-alternate-muted: #747271;
+  --text-alternate-secondary: #d6d0cd;
+  --text-alternate-tertiary: #8a8786;
+  --text-alternate-muted: #545352;
   --text-alternate-disabled: #3b3b3b;
-  --color-info-100: #9adbff;
-  --color-info-200: #00bbff;
-  --color-info-300: #009ed8;
-  --color-info-400: #0084b6;
-  --color-info-500: #006e98;
-  --color-info-600: #005a7d;
-  --color-info-700: #004764;
-  --color-info-800: #00364d;
-  --color-info-850: #002536;
-  --color-info-900: #001420;
-  --color-info-950: #00050b;
+  --color-info-100: #ddf2ff;
+  --color-info-200: #8fd7ff;
+  --color-info-300: #00bbff;
+  --color-info-400: #009dd7;
+  --color-info-500: #0081b1;
+  --color-info-600: #00678f;
+  --color-info-700: #004f6f;
+  --color-info-800: #003850;
+  --color-info-850: #002334;
+  --color-info-900: #00101a;
+  --color-info-950: #000205;
   --surface-info-lowest: #000d17;
   --surface-info-lower: #002232;
   --surface-info-low: #003951;
@@ -264,21 +253,21 @@
   --border-info-medium: #008ec3;
   --border-info-strong: #00b6f8;
   --text-info: #64caff;
-  --text-info-secondary: #009cd6;
-  --text-info-tertiary: #126e96;
-  --text-info-muted: #1f4255;
+  --text-info-secondary: #0083b4;
+  --text-info-tertiary: #1c506a;
+  --text-info-muted: #1d2c34;
   --text-info-disabled: #181a1b;
-  --color-success-100: #92e9a3;
-  --color-success-200: #6fcf85;
-  --color-success-300: #44b564;
-  --color-success-400: #009c45;
-  --color-success-500: #008238;
-  --color-success-600: #006a2d;
-  --color-success-700: #005422;
-  --color-success-800: #003f17;
-  --color-success-850: #002b0e;
-  --color-success-900: #001805;
-  --color-success-950: #000701;
+  --color-success-100: #c7ffd1;
+  --color-success-200: #77f194;
+  --color-success-300: #59d47a;
+  --color-success-400: #38b85f;
+  --color-success-500: #009c45;
+  --color-success-600: #007e36;
+  --color-success-700: #006128;
+  --color-success-800: #00461b;
+  --color-success-850: #002c0e;
+  --color-success-900: #001404;
+  --color-success-950: #000300;
   --surface-success-lowest: #001003;
   --surface-success-lower: #00270b;
   --surface-success-low: #004018;
@@ -292,21 +281,21 @@
   --border-success-medium: #059e46;
   --border-success-strong: #47c46b;
   --text-success: #88f2a0;
-  --text-success-secondary: #6fbf80;
-  --text-success-tertiary: #568d61;
-  --text-success-muted: #3e5f44;
+  --text-success-secondary: #2e974e;
+  --text-success-tertiary: #31673e;
+  --text-success-muted: #2c4530;
   --text-success-disabled: #263429;
-  --color-warning-100: #ffb01f;
-  --color-warning-200: #e39a00;
-  --color-warning-300: #c68600;
-  --color-warning-400: #ab7300;
-  --color-warning-500: #916100;
-  --color-warning-600: #784f00;
-  --color-warning-700: #5f3e00;
-  --color-warning-800: #482e00;
-  --color-warning-850: #321e00;
-  --color-warning-900: #1c0f00;
-  --color-warning-950: #090300;
+  --color-warning-100: #ffebd1;
+  --color-warning-200: #ffd08e;
+  --color-warning-300: #ffb01f;
+  --color-warning-400: #e09800;
+  --color-warning-500: #be8000;
+  --color-warning-600: #9b6800;
+  --color-warning-700: #784f00;
+  --color-warning-800: #563800;
+  --color-warning-850: #362100;
+  --color-warning-900: #190d00;
+  --color-warning-950: #040100;
   --surface-warning-lowest: #130900;
   --surface-warning-lower: #372200;
   --surface-warning-low: #613f00;
@@ -320,21 +309,21 @@
   --border-warning-medium: #af7600;
   --border-warning-strong: #df9700;
   --text-warning: #ffecd2;
-  --text-warning-secondary: #ffb22c;
-  --text-warning-tertiary: #c28e3e;
-  --text-warning-muted: #866d4a;
+  --text-warning-secondary: #eba633;
+  --text-warning-tertiary: #a17e4c;
+  --text-warning-muted: #685d4d;
   --text-warning-disabled: #4d4b4a;
-  --color-danger-100: #ffbeb8;
-  --color-danger-200: #ff8b84;
-  --color-danger-300: #f0494a;
-  --color-danger-400: #d10023;
-  --color-danger-500: #ac001b;
-  --color-danger-600: #8d0014;
-  --color-danger-700: #72000e;
-  --color-danger-800: #5a0009;
-  --color-danger-850: #420005;
-  --color-danger-900: #2a0002;
-  --color-danger-950: #110000;
+  --color-danger-100: #ffe9e6;
+  --color-danger-200: #ffc3bd;
+  --color-danger-300: #ff9a93;
+  --color-danger-400: #ff6a65;
+  --color-danger-500: #f0373e;
+  --color-danger-600: #d10023;
+  --color-danger-700: #a40019;
+  --color-danger-800: #78000f;
+  --color-danger-850: #4e0006;
+  --color-danger-900: #280002;
+  --color-danger-950: #080000;
   --surface-danger-lowest: #1f0001;
   --surface-danger-lower: #410004;
   --surface-danger-low: #67000c;
@@ -348,9 +337,9 @@
   --border-danger-medium: #ea3039;
   --border-danger-strong: #ff7872;
   --text-danger: #ff635f;
-  --text-danger-secondary: #f5042c;
-  --text-danger-tertiary: #b63536;
-  --text-danger-muted: #793d39;
+  --text-danger-secondary: #bb292f;
+  --text-danger-tertiary: #813b37;
+  --text-danger-muted: #543b39;
   --text-danger-disabled: #3c3939;
   --font-display: "Arvo", serif;
   --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, sans-serif;

package/src/system/styles/CONVENTIONS.md

@@ -37,7 +37,7 @@ Editor chrome uses **only** the `--ui-*` font namespace (`--ui-font-sans`, `--ui
 
 ## 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.
+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 the colors-and-type files in `colors-and-type/*.json` recolor or re-scale them.
 
 ### Category-first naming
 

package/src/system/styles/fonts.css

@@ -1,4 +1,4 @@
-/* Generated from the production theme by syncFontsToCss. Do not edit. */
+/* Generated from the production colors and type by syncFontsToCss. Do not edit. */
 /* Both fonts.css and fonts/ are in dist/, so relative paths work at runtime. */
 
 /* Adobe Typekit — fira-code */

package/template/README.md

@@ -18,16 +18,18 @@ This project follows the package's [recommended layout](https://github.com/motio
   a reserved `/live-tokens/*` namespace (so they never collide with your pages):
   `/live-tokens/editor` (theme tokens), `/live-tokens/components` (per-component
   aliases), and `/live-tokens/docs` (the user guide).
-- `src/system/styles/tokens.css` — your theme token vocabulary. The dev server
-  writes edits here when you use the in-browser editor.
+- `src/system/styles/tokens.css` — your theme token vocabulary. Hand-authored
+  and yours; the editor reads it but never writes it.
 - `src/styles/site.css` — themed page typography. Yours to edit.
 
 ## Editing live
 
 Run `npm run dev`, then click **Open Token Editor** on the home page (or visit
-`/live-tokens/editor`). Changes persist to `src/system/styles/tokens.css` and the JSON under
-`src/live-tokens/data/`. The editor is dev-only — `npm run build` ships plain
-CSS variables and the components you used, nothing else.
+`/live-tokens/editor`). Edits live in the JSON under `src/live-tokens/data/`:
+Save keeps them in a theme, and Adopt writes the theme into
+`src/live-tokens/data/tokens.generated.css`, the file your built site ships.
+The editor is dev-only — `npm run build` ships plain CSS variables and the
+components you used, nothing else.
 
 ## Adding components
 

package/template/_gitignore

@@ -5,12 +5,6 @@ dist-ssr
 *.log
 .npmrc
 
-# Editor-written backups stay local to each machine; the live JSON/CSS commit.
-src/live-tokens/data/themes/_backups/
-src/live-tokens/data/manifests/_backups/
-src/live-tokens/data/component-configs/*/_backups/
-src/system/styles/_backups/
-
 .DS_Store
 .vscode/*
 !.vscode/extensions.json

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

@@ -1,62 +0,0 @@
-import { get } from 'svelte/store';
-import type { AliasDiskValue, ComponentConfig } from '../themes/themeTypes';
-import { editorState, markComponentSaved } from '../store/editorStore';
-import { refToDiskValue } from '../store/cssVarRef';
-import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../themes/migrations';
-import {
-  listComponentConfigs,
-  saveComponentConfig,
-  setActiveComponentFile,
-} from './componentConfigService';
-
-/**
- * Save the current in-memory state of a component to its active file. Mirrors
- * the `persist` flow inside `ComponentFileManager.svelte` so callers without a
- * file-manager instance (e.g. an unsaved-components dialog upstream)
- * can save a dirty component without duplicating the schema-version + aliases
- * stringification logic.
- *
- * Refuses to overwrite `default` — that's the protected source-derived snapshot.
- * Callers that hit `{ ok: false, reason: 'default' }` should prompt for a new
- * name and re-route to a Save-As flow.
- */
-export type SaveActiveComponentResult =
-  | { ok: true; fileName: string; displayName: string }
-  | { ok: false; reason: 'default' | 'no-state' | 'error'; error?: unknown };
-
-
-export async function saveActiveComponentConfig(
-  component: string,
-): Promise<SaveActiveComponentResult> {
-  const slice = get(editorState).components[component];
-  if (!slice) return { ok: false, reason: 'no-state' };
-
-  try {
-    const list = await listComponentConfigs(component);
-    const fileName = list.activeFile;
-    if (fileName === 'default') return { ok: false, reason: 'default' };
-
-    const active = list.files.find((f) => f.fileName === fileName);
-    const displayName = active?.name ?? fileName;
-
-    const now = new Date().toISOString();
-    const aliases: Record<string, AliasDiskValue> = {};
-    for (const [k, ref] of Object.entries(slice.aliases)) aliases[k] = refToDiskValue(ref);
-
-    const data: ComponentConfig = {
-      name: displayName,
-      component,
-      createdAt: now,
-      updatedAt: now,
-      aliases,
-      config: { ...slice.config },
-      schemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION,
-    };
-    await saveComponentConfig(component, fileName, data);
-    await setActiveComponentFile(component, fileName);
-    markComponentSaved(component);
-    return { ok: true, fileName, displayName };
-  } catch (error) {
-    return { ok: false, reason: 'error', error };
-  }
-}