@motion-proto/live-tokens 0.94.2 → 0.94.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.94.3 — Demo bar chrome
+
+### Fixed
+
+- **The demo's Theme and Sketch bar stays legible in every theme.** The bar
+  painted from the open theme's scrim, and its selects were themed Buttons, so
+  a theme or sketchstyle could leave its labels unreadable. The bar now paints
+  as editor chrome from the `--ui-*` tokens, like the editor overlay, and
+  sketch mode leaves it alone. `ThemeSelect` and `SketchSelect` take a
+  `chrome` prop for the bar. Elsewhere they stay themed.
+
 ## 0.94.2 — Palette step confirm
 
 ### Fixed

package/package.json

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

package/src/demo/ChromeSelect.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import UIMenuButton from '../editor/ui/UIMenuButton.svelte';
+  import UIOptionList from '../editor/ui/UIOptionList.svelte';
+  import UIOptionItem from '../editor/ui/UIOptionItem.svelte';
+
+  interface Props {
+    label: string;
+    items: { value: string; label: string }[];
+    value: string;
+    /** Trigger text when `value` matches no item. Defaults to the label. */
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    onchange: (value: string) => void;
+  }
+
+  let {
+    label: heading,
+    items,
+    value,
+    placeholder = heading,
+    disabled = false,
+    error = '',
+    onchange,
+  }: Props = $props();
+
+  const selectedLabel = $derived(items.find((item) => item.value === value)?.label ?? placeholder);
+
+  function select(next: string, close: () => void): void {
+    close();
+    if (next === value) return;
+    onchange(next);
+  }
+</script>
+
+<!-- LabeledSelect's twin in the editor's --ui-* chrome. It needs an
+     .editor-page ancestor, which scopes those tokens and hosts the menu. -->
+<div class="chrome-select" inert={disabled || items.length === 0}>
+  <span class="chrome-select-label">{heading}</span>
+
+  <UIMenuButton header={heading} triggerClass="chrome-select-trigger" menuMinWidth="12rem">
+    {#snippet trigger()}
+      <span>{selectedLabel}</span>
+      <i class="fas fa-chevron-down" aria-hidden="true"></i>
+    {/snippet}
+    {#snippet children({ close })}
+      <UIOptionList>
+        {#each items as item (item.value)}
+          <UIOptionItem active={item.value === value} onclick={() => select(item.value, close)}>
+            {#snippet label()}{item.label}{/snippet}
+          </UIOptionItem>
+        {/each}
+      </UIOptionList>
+    {/snippet}
+  </UIMenuButton>
+
+  {#if error}
+    <span class="error" aria-live="polite">{error}</span>
+  {/if}
+</div>
+
+<style>
+  .chrome-select {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-8);
+  }
+
+  .chrome-select[inert] {
+    opacity: var(--ui-opacity-disabled);
+  }
+
+  .chrome-select-label {
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+  }
+
+  .chrome-select :global(.chrome-select-trigger) {
+    min-width: 9rem;
+    justify-content: space-between;
+    gap: var(--ui-space-12);
+    padding: var(--ui-space-6) var(--ui-space-10);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-high);
+    border: 1px solid var(--ui-border);
+    border-radius: var(--ui-radius-md);
+    transition:
+      background var(--ui-transition-fast),
+      border-color var(--ui-transition-fast);
+  }
+
+  .chrome-select :global(.chrome-select-trigger:hover),
+  .chrome-select :global(.chrome-select-trigger[aria-expanded='true']) {
+    background: var(--ui-surface-highest);
+    border-color: var(--ui-border-higher);
+  }
+
+  .chrome-select :global(.chrome-select-trigger .fa-chevron-down) {
+    font-size: 0.625rem;
+    color: var(--ui-text-secondary);
+  }
+
+  .error {
+    max-width: 20rem;
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-link-broken);
+  }
+</style>

package/src/demo/DemoBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import '../editor/styles/ui-editor.css';
   import ThemeSelect from './ThemeSelect.svelte';
   import SketchSelect from './SketchSelect.svelte';
 
@@ -11,11 +12,14 @@
   } = $props();
 </script>
 
-<div class="demo-bar">
+<!-- Editor chrome, like the overlay: the bar paints from --ui-*, so every
+     theme leaves it legible, and data-live-tokens-chrome keeps sketch mode off
+     it. .editor-page scopes the --ui-* tokens and hosts the selects' menus. -->
+<div class="demo-bar editor-page" data-live-tokens-chrome>
   <div class="bar">
     <div class="pickers">
-      <ThemeSelect inline size="small" onpick={onThemePick} />
-      <SketchSelect inline size="small" onpick={onSketchPick} />
+      <ThemeSelect chrome onpick={onThemePick} />
+      <SketchSelect chrome onpick={onSketchPick} />
     </div>
   </div>
 </div>
@@ -27,9 +31,9 @@
     left: 0;
     right: 0;
     z-index: var(--z-sticky);
-    background: var(--scrim-high);
-    backdrop-filter: blur(var(--blur-md));
-    border-bottom: var(--border-width-1) solid var(--tint-high);
+    --sketch-icon-off: none;
+    background: var(--ui-surface-lower);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   /* The bar repeats the demo's .kit grid, so its content lines up with the
@@ -64,9 +68,6 @@
   @media (max-width: 600px) {
     .demo-bar {
       position: static;
-      background: none;
-      backdrop-filter: none;
-      border-bottom: none;
     }
     .bar {
       padding: var(--space-64) var(--space-16) 0;

package/src/demo/SketchSelect.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
   import LabeledSelect from './LabeledSelect.svelte';
+  import ChromeSelect from './ChromeSelect.svelte';
   import { setSketch, sketchPick, sketchStyles, unsavedSketchStyle } from '../editor/core/sketch';
 
-  let { inline = false, size = 'default', onpick }: { inline?: boolean; size?: 'default' | 'small'; onpick?: (id: string | null) => void } = $props();
+  let {
+    inline = false,
+    size = 'default',
+    chrome = false,
+    onpick,
+  }: {
+    inline?: boolean;
+    size?: 'default' | 'small';
+    /** Paint in the editor's --ui-* chrome; needs an .editor-page ancestor. */
+    chrome?: boolean;
+    onpick?: (id: string | null) => void;
+  } = $props();
 
   // The empty string is the placeholder's value, so off needs a name of its own.
   const OFF = 'none';
@@ -45,14 +57,26 @@
   }
 </script>
 
-<LabeledSelect
-  {inline}
-  {size}
-  label="Sketch"
-  {items}
-  value={selected}
-  placeholder="Custom"
-  disabled={busy}
-  {error}
-  onchange={changeSketch}
-/>
+{#if chrome}
+  <ChromeSelect
+    label="Sketch"
+    {items}
+    value={selected}
+    placeholder="Custom"
+    disabled={busy}
+    {error}
+    onchange={changeSketch}
+  />
+{:else}
+  <LabeledSelect
+    {inline}
+    {size}
+    label="Sketch"
+    {items}
+    value={selected}
+    placeholder="Custom"
+    disabled={busy}
+    {error}
+    onchange={changeSketch}
+  />
+{/if}

package/src/demo/ThemeSelect.svelte

@@ -1,11 +1,23 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import LabeledSelect from './LabeledSelect.svelte';
+  import ChromeSelect from './ChromeSelect.svelte';
   import { listThemes, applyTheme } from '../editor/core/themes/themeService';
   import { openThemeSlug } from '../editor/core/store/editorConfigStore';
   import { carrySketch } from './sketchCarry';
 
-  let { inline = false, size = 'default', onpick }: { inline?: boolean; size?: 'default' | 'small'; onpick?: (fileName: string) => void } = $props();
+  let {
+    inline = false,
+    size = 'default',
+    chrome = false,
+    onpick,
+  }: {
+    inline?: boolean;
+    size?: 'default' | 'small';
+    /** Paint in the editor's --ui-* chrome; needs an .editor-page ancestor. */
+    chrome?: boolean;
+    onpick?: (fileName: string) => void;
+  } = $props();
 
   let themes = $state<{ value: string; label: string }[]>([]);
   let busy = $state(false);
@@ -40,13 +52,24 @@
 
 <!-- The open theme drives the selection, so applies from the Themes panel or
      another tab show up here too. -->
-<LabeledSelect
-  {inline}
-  {size}
-  label="Theme"
-  items={themes}
-  value={$openThemeSlug}
-  disabled={busy}
-  {error}
-  onchange={changeTheme}
-/>
+{#if chrome}
+  <ChromeSelect
+    label="Theme"
+    items={themes}
+    value={$openThemeSlug}
+    disabled={busy}
+    {error}
+    onchange={changeTheme}
+  />
+{:else}
+  <LabeledSelect
+    {inline}
+    {size}
+    label="Theme"
+    items={themes}
+    value={$openThemeSlug}
+    disabled={busy}
+    {error}
+    onchange={changeTheme}
+  />
+{/if}

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. |