@motion-proto/live-tokens 0.62.0 → 0.64.0

package/src/editor/ui/ThemePanel.svelte

@@ -58,6 +58,7 @@
     markComponentSaved,
   } from '../core/store/editorStore';
   import { openThemeSlug } from '../core/store/editorConfigStore';
+  import { sketchOffLook, themeSketchStyle } from '../core/sketch/sketchStore';
   import { editorView } from '../core/store/editorViewStore';
   import {
     componentActiveRevision,
@@ -83,6 +84,9 @@
   let { showComponentsLink = true }: Props = $props();
 
   let canOpenComponents = $derived(showComponentsLink && $editorView !== 'components');
+  // showComponentsLink=false marks the ThemePanel that renders outside the
+  // view switcher (ComponentEditorPage), where neither pill can navigate.
+  let canOpenSketchStyle = $derived(showComponentsLink && $editorView !== 'sketch');
 
   let files: ThemeMeta[] = $state([]);
   let colorsFiles: ColorsAndTypeMeta[] = $state([]);
@@ -104,7 +108,7 @@
   let dirtyComponentCount = $derived(
     Object.values($componentDirty).filter(Boolean).length,
   );
-  let unsavedEdits = $derived($colorsAndTypeDirty || dirtyComponentCount > 0);
+  let unsavedEdits = $derived($colorsAndTypeDirty || dirtyComponentCount > 0 || $sketchOffLook);
 
   async function refreshFiles() {
     try {
@@ -120,6 +124,10 @@
       if (active) {
         openThemeSlug.set(active._fileName ?? 'default');
         currentDisplayName = active.name ?? $openThemeSlug;
+        // Deleting the open theme repoints active without going through Load
+        // or Save, both of which already set this; this is the path that
+        // makes sketchStore's "set by every path that opens a theme" true.
+        themeSketchStyle.set(active.sketchStyle);
       }
     } catch {
       // silent
@@ -177,6 +185,10 @@
     editorView.set('components');
   }
 
+  function openSketchStyle() {
+    editorView.set('sketch');
+  }
+
   onMount(async () => {
     await refreshFiles();
     await refreshActive();
@@ -851,6 +863,40 @@
         </UIPillButton>
       {/if}
     </div>
+
+    <div class="part-head part-static">
+      <span class="part-label">Sketchstyle</span>
+      <span class="part-summary">
+        <span class="part-summary-sep">·</span>
+        {#if $sketchOffLook}
+          <span>off the theme</span>
+        {:else if $themeSketchStyle}
+          <span class="part-summary-text">{$themeSketchStyle.label}</span>
+        {:else}
+          <span>none</span>
+        {/if}
+      </span>
+      {#if canOpenSketchStyle}
+        <UIPillButton
+          size="compact"
+          icon="fa-pen-nib"
+          title="Open the Sketchstyle view"
+          onclick={openSketchStyle}
+        >
+          Open
+        </UIPillButton>
+      {/if}
+      <UIInfoPopover title="Sketchstyle" ariaLabel="About the sketchstyle">
+        <p>
+          <strong>Sketchstyle</strong> is part of the theme, the same way colors and type are.
+          It travels with the theme when you save, load or share it.
+        </p>
+        <p>
+          It does not reach a production build. Adopt publishes the crisp look; the drawing
+          stays a preview.
+        </p>
+      </UIInfoPopover>
+    </div>
   </div>
 </div>
 

package/src/editor/ui/sections/textStyles.ts

@@ -64,6 +64,20 @@ export const TEXT_STYLES: TextStyle[] = [
     defaultElement: 'small',
     preview: 'Captions and secondary text.',
   },
+  {
+    name: 'editorial-xl',
+    label: 'Editorial XL',
+    prefix: '--editorial-xl',
+    defaultElement: 'editorial-xl',
+    preview: 'Pull quotes and opening statements.',
+  },
+  {
+    name: 'editorial-lg',
+    label: 'Editorial LG',
+    prefix: '--editorial-lg',
+    defaultElement: 'editorial-lg',
+    preview: 'Standfirsts and section ledes.',
+  },
   {
     name: 'editorial-md',
     label: 'Editorial MD',
@@ -76,7 +90,7 @@ export const TEXT_STYLES: TextStyle[] = [
     label: 'Editorial SM',
     prefix: '--editorial-sm',
     defaultElement: 'editorial-sm',
-    preview: 'Standfirsts, pull quotes, and asides.',
+    preview: 'Captions, credits, and asides.',
   },
   {
     name: 'code',

package/src/editor/ui/sketch/SketchPreview.svelte

@@ -6,10 +6,10 @@
   import Callout from '../../../system/components/Callout.svelte';
   import Toggle from '../../../system/components/Toggle.svelte';
   import { setSketchScope } from '../../core/sketch/sketchLayer';
-  import type { SketchSettings } from '../../core/sketch/sketchPresets';
+  import type { SketchStyle } from '../../core/sketch/sketchStyles';
 
   interface Props {
-    settings: SketchSettings;
+    settings: SketchStyle;
     enabled: boolean;
   }
 
@@ -42,7 +42,7 @@
         <p>Fill and outline displace on different noise seeds, so they disagree at the edges.</p>
       </Card>
       <Card title="Second card">
-        <p>Same size and same preset. A different seed keeps the silhouette from repeating.</p>
+        <p>Same size and same sketchstyle. A different seed keeps the silhouette from repeating.</p>
       </Card>
     </div>
   </section>

package/src/editor/ui/sketch/SketchTab.svelte

@@ -10,20 +10,23 @@
   import UIPillButton from '../UIPillButton.svelte';
   import UIReveal, { REVEAL_MS } from '../UIReveal.svelte';
   import { scrollSectionIntoView } from '../scrollSection';
-  import { SKETCH_PRESETS } from '../../core/sketch/sketchPresets';
+  import { SKETCH_STYLES } from '../../core/sketch/sketchStyles';
+  import { openThemeSlug } from '../../core/store/editorConfigStore';
   import {
     sketchEnabled,
-    sketchPreset,
+    setSketchEnabled,
+    sketchOffLook,
+    sketchStyleName,
     sketchDirty,
     sketchSettings,
-    selectSketchPreset,
+    selectSketchStyle,
     updateSketchSettings,
-    userSketchPresets,
-    refreshUserPresets,
-    selectUserSketchPreset,
-    saveCurrentAsSketchPreset,
-    deleteUserSketchPreset,
-    USER_PRESET_PREFIX,
+    savedSketchStyles,
+    refreshSavedSketchStyles,
+    selectSavedSketchStyle,
+    saveCurrentSketchStyle,
+    deleteSavedSketchStyle,
+    USER_STYLE_PREFIX,
   } from '../../core/sketch/sketchStore';
 
   interface Props {
@@ -37,6 +40,11 @@
 
   let s = $derived($sketchSettings);
 
+  // Save is disabled for the protected Default theme (ThemePanel.svelte);
+  // Save As is the gesture actually on offer there, so the off-look copy has
+  // to name it instead.
+  let activeIsProtected = $derived($openThemeSlug === 'default');
+
   type SectionKey = 'border' | 'fill' | 'shape' | 'icons' | 'noise';
 
   const SECTION_KEYS: SectionKey[] = ['border', 'fill', 'shape', 'icons', 'noise'];
@@ -81,8 +89,8 @@
   const ROUGHNESS = ['smooth', 'grainy', 'rough'] as const;
 
   /** A layer's own wavelength: the multiple, and the length it resolves to
-      against the shared wave. The ratio is what a preset carries; the pixels
-      are what you can picture. */
+      against the shared wave. The ratio is what a sketchstyle carries; the
+      pixels are what you can picture. */
   const against = (multiple: number) => `${Math.round(s.wobble * multiple)}px`;
 
   /** The wave's shape, named rather than numbered: 1 is the field as the filter
@@ -110,52 +118,52 @@
       + (s.waveform > 1 ? ` · ${waveformLabel(s.waveform)}` : ''),
   });
 
-  /** Shipped and saved presets are one choice, so they share one radio group:
-      picking a saved one clears the shipped selection natively. */
-  const PRESET_RADIO_GROUP = 'sketch-preset';
+  /** Shipped and saved sketchstyles are one choice, so they share one radio
+      group: picking a saved one clears the shipped selection natively. */
+  const STYLE_RADIO_GROUP = 'sketchstyle';
 
   /** What the readout under the grid says. The selection survives a dial move,
       so the base keeps its name here and the blurb reports the drift instead. */
   let active = $derived(
     $sketchDirty
       ? { name: s.label, blurb: `Modified from ${s.label}. Save it to keep it.` }
-      : { name: s.label, blurb: s.blurb || 'Your saved preset.' },
+      : { name: s.label, blurb: s.blurb || 'Your saved sketchstyle.' },
   );
 
   let naming = $state(false);
   let draftName = $state('');
-  let presetError = $state('');
+  let styleError = $state('');
 
   onMount(() => {
-    // No dev plugin (a built preview, say) means no saved presets. That is a
-    // missing door, not a fault worth reporting in the tab.
-    refreshUserPresets().catch(() => {});
+    // No dev plugin (a built preview, say) means no saved sketchstyles. That
+    // is a missing door, not a fault worth reporting in the tab.
+    refreshSavedSketchStyles().catch(() => {});
   });
 
   function startNaming() {
-    draftName = s.label && $sketchPreset.startsWith(USER_PRESET_PREFIX) ? s.label : '';
-    presetError = '';
+    draftName = s.label && $sketchStyleName.startsWith(USER_STYLE_PREFIX) ? s.label : '';
+    styleError = '';
     naming = true;
   }
 
   async function commitSave(e: SubmitEvent) {
     e.preventDefault();
     try {
-      await saveCurrentAsSketchPreset(draftName);
+      await saveCurrentSketchStyle(draftName);
       naming = false;
       draftName = '';
-      presetError = '';
+      styleError = '';
     } catch (err) {
-      presetError = err instanceof Error ? err.message : 'Save failed';
+      styleError = err instanceof Error ? err.message : 'Save failed';
     }
   }
 
-  async function runPresetAction(action: Promise<unknown>) {
+  async function runStyleAction(action: Promise<unknown>) {
     try {
       await action;
-      presetError = '';
+      styleError = '';
     } catch (err) {
-      presetError = err instanceof Error ? err.message : 'That did not work';
+      styleError = err instanceof Error ? err.message : 'That did not work';
     }
   }
 
@@ -229,19 +237,20 @@
 <div class="sketch-tab">
   <header class="head">
     <div class="head-row">
-      <h2 class="section-title">Sketch</h2>
+      <h2 class="section-title">Sketchstyle</h2>
       <div class="switch">
         <Toggle
           label="Sketch mode"
           labelFirst
           checked={$sketchEnabled}
-          onchange={(v) => sketchEnabled.set(v)}
+          onchange={setSketchEnabled}
         />
         <UIInfoPopover title="Sketch mode">
           <p>
-            An effect layer over the active theme. It reads no theme values and writes none:
-            each component's fill and outline are redrawn from the tokens that component
-            already owns, then pushed around a shared noise field.
+            An effect layer over the active theme. It repaints each component's fill and
+            outline from the tokens that component already owns, then pushes them around a
+            shared noise field. Save in the Theme panel folds the dials into the open theme,
+            or Save As when the open theme is Motion Proto, the read-only built-in one.
           </p>
           <p>
             While it is on, the effect applies to the page behind this editor as well as to the
@@ -255,28 +264,46 @@
       <div class="readout" aria-live="polite">
         <span class="readout-name">{active.name}</span>
         <p class="readout-blurb">{active.blurb}</p>
+        {#if $sketchOffLook}
+          {#if $sketchEnabled}
+            <p class="readout-off-look">
+              {#if activeIsProtected}
+                Motion Proto is read-only, and these dials are ahead of it. Use Save As in the
+                Theme panel to keep them in a new theme.
+              {:else}
+                These dials are ahead of the saved theme. Save it in the Theme panel to fold them
+                in.
+              {/if}
+            </p>
+          {:else}
+            <p class="readout-off-look">
+              The theme carries a sketchstyle this page is not painting. Saving now would drop
+              it.
+            </p>
+          {/if}
+        {/if}
       </div>
 
       <div class="presets">
-        {#each Object.entries(SKETCH_PRESETS) as [name, preset] (name)}
+        {#each Object.entries(SKETCH_STYLES) as [name, style] (name)}
           <label class="preset">
             <input
               type="radio"
-              name={PRESET_RADIO_GROUP}
+              name={STYLE_RADIO_GROUP}
               value={name}
-              checked={$sketchPreset === name}
-              onchange={() => selectSketchPreset(name)}
+              checked={$sketchStyleName === name}
+              onchange={() => selectSketchStyle(name)}
             />
-            <span class="preset-name">{preset.label}</span>
+            <span class="preset-name">{style.label}</span>
           </label>
         {/each}
       </div>
 
       <div class="saved">
         <div class="saved-head">
-          <span class="band-label">Saved</span>
+          <span class="band-label">Saved sketchstyles</span>
           <UIPillButton size="compact" icon="fa-floppy-disk" onclick={startNaming}>
-            Save current
+            Save as sketchstyle…
           </UIPillButton>
         </div>
 
@@ -286,8 +313,8 @@
             <input
               class="save-name"
               bind:value={draftName}
-              placeholder="Preset name"
-              aria-label="Preset name"
+              placeholder="Sketchstyle name"
+              aria-label="Sketchstyle name"
               autofocus
             />
             <UIPillButton size="compact" variant="primary" type="submit">Save</UIPillButton>
@@ -295,17 +322,17 @@
           </form>
         {/if}
 
-        {#if $userSketchPresets.length > 0}
+        {#if $savedSketchStyles.length > 0}
           <div class="presets">
-            {#each $userSketchPresets as saved (saved.fileName)}
+            {#each $savedSketchStyles as saved (saved.fileName)}
               <div class="saved-item">
                 <label class="preset">
                   <input
                     type="radio"
-                    name={PRESET_RADIO_GROUP}
-                    value={USER_PRESET_PREFIX + saved.fileName}
-                    checked={$sketchPreset === USER_PRESET_PREFIX + saved.fileName}
-                    onchange={() => runPresetAction(selectUserSketchPreset(saved.fileName))}
+                    name={STYLE_RADIO_GROUP}
+                    value={USER_STYLE_PREFIX + saved.fileName}
+                    checked={$sketchStyleName === USER_STYLE_PREFIX + saved.fileName}
+                    onchange={() => runStyleAction(selectSavedSketchStyle(saved.fileName))}
                   />
                   <span class="preset-name">{saved.name}</span>
                 </label>
@@ -314,15 +341,15 @@
                   class="saved-delete"
                   title="Delete {saved.name}"
                   aria-label="Delete {saved.name}"
-                  onclick={() => runPresetAction(deleteUserSketchPreset(saved.fileName))}
+                  onclick={() => runStyleAction(deleteSavedSketchStyle(saved.fileName))}
                 ><i class="fas fa-xmark"></i></button>
               </div>
             {/each}
           </div>
         {/if}
 
-        {#if presetError}
-          <p class="saved-error">{presetError}</p>
+        {#if styleError}
+          <p class="saved-error">{styleError}</p>
         {/if}
       </div>
     </div>
@@ -793,9 +820,9 @@
   }
 
 
-  /* Grid, saved band and readout are one control: which preset is on, and what
-     that preset is. Splitting them left the description reading as a stray
-     caption under the tab. */
+  /* Grid, saved band and readout are one control: which sketchstyle is on, and
+     what that sketchstyle is. Splitting them left the description reading as a
+     stray caption under the tab. */
   .picker {
     display: flex;
     flex-direction: column;
@@ -988,6 +1015,13 @@
     color: var(--ui-text-secondary);
   }
 
+  .readout-off-look {
+    margin: var(--ui-space-2) 0 0;
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-medium);
+    color: var(--ui-text-primary);
+  }
+
   .dormant {
     margin: 0;
     font-size: var(--ui-font-size-sm);

package/src/system/components/FloatingTokenTags.css

@@ -3,12 +3,14 @@
  * animations are hardcoded so token edits don't repaint our chrome. The
  * exceptions are intentional and ARE the demo: the central box's
  * surface/radius/border (set inline), the dropdown (rendered through
- * <MenuSelect>), and elevation, which reads from the --shadow-* scale.
+ * <MenuSelect>), elevation, which reads from the --shadow-* scale, and the
+ * zap colour, which tracks --text-accent so the beam stays on-theme.
  * File is global; keep selectors `ftt-` prefixed.
  */
 
 .ftt-stage {
   --ftt-contrast-color: var(--color-white);
+  --ftt-zap-color: var(--text-accent);
   --ftt-string-opacity: 0.5;
   position: relative;
   width: 100%;
@@ -85,7 +87,7 @@
 }
 
 .ftt-string.ftt-live {
-  stroke: #ff8eeb;
+  stroke: var(--ftt-zap-color);
   opacity: 1;
 }
 
@@ -103,18 +105,18 @@
 }
 
 /* --- Energy ball ---------------------------------------------------------- */
-/* Colour must match `.ftt-string.ftt-live` so the beam reads as a continuous
-   trail, not a colour-shifting projectile. */
+/* Shares --ftt-zap-color with `.ftt-string.ftt-live` so the beam reads as a
+   continuous trail, not a colour-shifting projectile. */
 .ftt-energy-ball {
   position: absolute;
   width: 0.875rem;
   height: 0.875rem;
   translate: -50% -50%;
   border-radius: 9999px;
-  background: #ff8eeb;
+  background: var(--ftt-zap-color);
   box-shadow:
-    0 0 8px  2px #ff8eeb,
-    0 0 18px 4px #ff8eeb;
+    0 0 8px  2px var(--ftt-zap-color),
+    0 0 18px 4px var(--ftt-zap-color);
   pointer-events: none;
   opacity: 0;
   z-index: 6;
@@ -233,7 +235,7 @@
   z-index: 30;
 }
 .ftt-tag-trigger:focus-visible {
-  outline: 2px solid #f31fdb;
+  outline: 2px solid var(--ftt-zap-color);
   outline-offset: 3px;
   border-radius: 9999px;
 }

package/src/system/styles/tokens.css

@@ -681,8 +681,23 @@
   --code-line-height: var(--line-height-normal);
   --code-letter-spacing: var(--letter-spacing-normal);
 
-  /* Editorial — the long-reading role. Each step mirrors its body counterpart
-     until the stack is repointed. */
+  /* Editorial — the long-reading role. `md` is the reading step and takes the
+     most open leading; every step away from it tightens by one, so a lede or a
+     pull quote is not set at reading leading. Sizes stay inside the xs–xl band
+     the responsive scale leaves constant, so an article does not resize itself
+     between breakpoints. */
+  --editorial-xl-font-family: var(--font-editorial);
+  --editorial-xl-font-size: var(--font-size-xl);
+  --editorial-xl-font-weight: var(--font-weight-normal);
+  --editorial-xl-line-height: var(--line-height-tighter);
+  --editorial-xl-letter-spacing: var(--letter-spacing-normal);
+
+  --editorial-lg-font-family: var(--font-editorial);
+  --editorial-lg-font-size: var(--font-size-lg);
+  --editorial-lg-font-weight: var(--font-weight-normal);
+  --editorial-lg-line-height: var(--line-height-tight);
+  --editorial-lg-letter-spacing: var(--letter-spacing-normal);
+
   --editorial-md-font-family: var(--font-editorial);
   --editorial-md-font-size: var(--font-size-md);
   --editorial-md-font-weight: var(--font-weight-normal);