@motion-proto/live-tokens 0.94.2 → 0.95.0

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

@@ -1,6 +1,6 @@
 /* Generated by themeFileApi from the production theme. Do not edit. */
 /* tokens.css holds developer-authored defaults; this file holds editor overrides. */
-/* Bake fingerprint: 2c683a9cbf8a9e66 */
+/* Bake fingerprint: f72b7c717f550cbd */
 
 /* Production theme: default */
 :root:root {
@@ -8,10 +8,7 @@
   --gradient-2: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-special-500) 100%);
   --gradient-3: linear-gradient(90deg, var(--color-success-500) 0%, var(--color-info-500) 100%);
   --gradient-4: linear-gradient(45deg, var(--color-danger-500) 0%, var(--color-warning-500) 100%);
-  --columns-count: 12;
   --columns-max-width: 1440px;
-  --columns-gutter: 32px;
-  --columns-margin: 0px;
   --scrim-color: var(--surface-neutral-lowest);
   --scrim-opacity-low: 0.7;
   --scrim-opacity: 0.8;

package/src/system/components/SectionDivider.svelte

@@ -436,8 +436,11 @@
     letter-spacing: var(--_divider-title-letter-spacing);
   }
 
+  /* The rows carry their own padding tokens, so a content-box 100% would run
+     past the divider by that padding. */
   .title-row {
     display: flex;
+    box-sizing: border-box;
     width: 100%;
     justify-content: var(--_divider-justify);
     align-items: center;
@@ -463,6 +466,7 @@
      flow entirely. */
   .description-row {
     display: var(--_divider-description-display);
+    box-sizing: border-box;
     width: 100%;
     justify-content: var(--_divider-justify);
     align-items: center;

package/src/system/styles/CONVENTIONS.md

@@ -9,7 +9,7 @@ Each file plays a distinct role. Don't merge them without understanding why they
 | 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-editor.css` | Editor chrome only | Defines `--ui-*` (opaque grayscale, system fonts) | JS-imported by `Editor.svelte`, `ComponentEditorPage.svelte`, `ColorsPage.svelte`, and the demo's `DemoBar.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` | Consumer-facing starter typography for the landing page (unscoped `h1`, `p`, `a`, …). Never load on editor pages. Replaceable starter content — users edit or replace this file to style their own site. Components that slot consumer content (Card body, CollapsibleSection content, SectionKit) defend their body typography against these global rules with `@include slot-prose` (from `styles/_slot-prose.scss`): the mixin pins only the owned type axes (font-family, font-size, font-weight, line-height, color) plus list spacing onto slotted `p`/`ul`/`ol`/`li`, while `a`, `strong`, font-style, letter-spacing and text-transform are left to inherit the page (links stay links, a consumer's italics survive). `prose={false}` opts a slot out entirely, and the `check:slot-prose` guard fails the build on a hand-rolled copy of the pin. The demo page no longer imports it; the demo uses scoped classes and component-owned slot typography instead. |
 | `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. |

package/src/system/styles/tokens.css

@@ -497,13 +497,24 @@
   --scale-xl: 1.2;
   --scale-2xl: 1.25;
 
-  /* COLUMN LAYOUT — 12-col grid. Drives the dev overlay; consume via
+  /* COLUMN LAYOUT. Twelve columns at every width; each viewport sets its own
+     gutter and margin. --columns-gutter and --columns-margin read the desktop
+     values, and the 767px and 480px blocks at the foot of this file re-point
+     them to the tablet and phone values. Drives the dev overlay; consume via
      grid-template-columns: repeat(var(--columns-count), 1fr) etc.
-     --columns-margin = side gutters (0 = flush). */
+     --columns-margin = the page grid's inline padding. With box-sizing:
+     content-box the columns span --columns-max-width and the margin sits
+     outside them. */
   --columns-count: 12;
   --columns-max-width: 1440px;
-  --columns-gutter: clamp(0.5rem, 1.5vw, 1.5rem);
-  --columns-margin: 0;
+  --columns-desktop-gutter: 32px;
+  --columns-desktop-margin: 32px;
+  --columns-tablet-gutter: 24px;
+  --columns-tablet-margin: 24px;
+  --columns-phone-gutter: 16px;
+  --columns-phone-margin: 16px;
+  --columns-gutter: var(--columns-desktop-gutter);
+  --columns-margin: var(--columns-desktop-margin);
 
   /* Font Families */
   --font-display: "Arvo", serif;
@@ -1088,6 +1099,17 @@
   }
 }
 
+/* RESPONSIVE COLUMN GRID. The grid takes its tablet gutter and margin at
+   767px and narrower, and its phone gutter and margin at 480px and narrower.
+   This block precedes the 480px block, so the phone values win on a phone. */
+
+@media (max-width: 767px) {
+  :root {
+    --columns-gutter: var(--columns-tablet-gutter);
+    --columns-margin: var(--columns-tablet-margin);
+  }
+}
+
 @media (max-width: 480px) {
   :root {
     --font-size-2xl: 1.25rem;    /* 20px */
@@ -1133,5 +1155,9 @@
     --code-xs-font-size: var(--code-xs-phone-font-size);
     --code-2xs-font-size: var(--code-2xs-phone-font-size);
     --eyebrow-font-size: var(--eyebrow-phone-font-size);
+
+    /* The column grid's phone values. */
+    --columns-gutter: var(--columns-phone-gutter);
+    --columns-margin: var(--columns-phone-margin);
   }
 }

package/template/src/main.ts

@@ -18,9 +18,9 @@ const sketchFiles = import.meta.glob<{ name?: string; settings: unknown }>(
   { eager: true, import: 'default' },
 );
 
-const sketchLooks = Object.entries(sketchFiles).map(([path, file]) => {
+const sketchStyles = Object.entries(sketchFiles).map(([path, file]) => {
   const id = path.split('/').pop()!.replace('.json', '');
   return { id, label: file.name || id, settings: file.settings };
 });
 
-bootLiveTokens(App, '#app', { sketchLooks });
+bootLiveTokens(App, '#app', { sketchStyles });

package/template/src/pages/Home.svelte

@@ -34,9 +34,11 @@
     display: grid;
     grid-template-columns: repeat(var(--columns-count), 1fr);
     column-gap: var(--columns-gutter);
+    box-sizing: content-box;
     max-width: var(--columns-max-width);
     margin: 0 auto;
-    padding: var(--space-48) var(--space-32);
+    padding-block: var(--space-48);
+    padding-inline: var(--columns-margin);
     min-height: 100vh;
     align-content: center;
   }
@@ -58,16 +60,17 @@
     margin-top: var(--space-20);
   }
 
-  /* The theme's own column gutter alone exceeds a phone's width at 12
-     columns, so every page has to collapse to one column below 768px. */
+  /* Spans count twelfths at every width, and a narrow screen widens them. */
   @media (max-width: 767px) {
-    .home {
-      grid-template-columns: 1fr;
-      column-gap: 0;
-    }
-
     .stub {
       grid-column: 1 / -1;
     }
   }
+
+  @media (max-width: 600px) {
+    .actions {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
 </style>

package/template/vite.config.ts

@@ -5,9 +5,13 @@ import { themeFileApi } from '@motion-proto/live-tokens/vite-plugin';
 export default defineConfig({
   plugins: [
     svelte({ preprocess: vitePreprocess() }),
-    // In dev, persists editor changes to src/system/styles/tokens.css and the
-    // JSON under src/live-tokens/data/. In `vite build`, runs the design checks
-    // first and stops the build on an error.
+    // In dev, persists editor changes to the JSON under src/live-tokens/data/,
+    // and Adopt writes src/live-tokens/data/tokens.generated.css. In
+    // `vite build`, runs the design checks
+    // first and stops the build on an error, then writes each token whose value
+    // never changes at runtime as its value. `productionCss: false` keeps every
+    // token a variable, and `productionCss: { keep: [...] }` keeps the names a
+    // script assembles at runtime.
     themeFileApi({ tokensCssPath: 'src/system/styles/tokens.css' }),
   ],
 });