@motion-proto/live-tokens 0.67.0 → 0.68.1

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

@@ -14,18 +14,19 @@
   import {
     sketchEnabled,
     setSketchEnabled,
-    sketchOffLook,
-    sketchStyleName,
+    sketchOffTheme,
+    selectedSketchStyleId,
     sketchDirty,
     sketchSettings,
-    selectSketchStyle,
     updateSketchSettings,
     refreshSavedSketchStyles,
     saveCurrentSketchStyle,
     saveSelectedSketchStyle,
     deleteSavedSketchStyle,
   } from '../../core/sketch/sketchStore';
-  import { sketchLooks } from '../../core/sketch/sketchRegistry';
+  import { sketchStyles } from '../../core/sketch/sketchRegistry';
+  import { setSketch, unsavedSketchStyle } from '../../core/sketch';
+  import { THEME_SKETCH_ID } from '../../core/sketch/sketchStyles';
 
   interface Props {
     /** The rail's last jump. A fresh object per click, not a bare id, so
@@ -38,8 +39,13 @@
 
   let s = $derived($sketchSettings);
 
+  /** The theme's own style sits in the grid like any other row, but it is the
+      one row with no file behind it, so Save has nothing to write over. Save As
+      is what gives it one, after which it is an ordinary sketchstyle. */
+  let onUnsavedSketchStyle = $derived($selectedSketchStyleId === THEME_SKETCH_ID);
+
   // 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
+  // Save As is the gesture actually on offer there, so the off-style copy has
   // to name it instead.
   let activeIsProtected = $derived($openThemeSlug === 'default');
 
@@ -50,7 +56,7 @@
 
   /** All closed to start: twenty-odd dials in one scroll is a wall, and the
       summary on each trigger row answers most questions without opening
-      anything. Each section then stands alone, because shaping a look means
+      anything. Each section then stands alone, because shaping a style means
       reaching between them — the border's detail against the noise it
       multiplies, the fill's travel against the border's.
 
@@ -124,43 +130,49 @@
   });
 
   /** Shipped and saved sketchstyles are one choice, so they share one radio
-      group: picking a saved one clears the shipped selection natively. */
+      group: picking a saved one clears the shipped selection natively.
+
+      Picks go through `setSketch`, the same door a page picker uses, so one is
+      the whole gesture: the style is applied, the effect comes on, and the
+      page's own picker follows. Selecting without applying would leave the two
+      pickers disagreeing about what the page is drawn with. */
   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: onUnsavedSketchStyle
+            ? 'Modified from settings this theme carries. Save As keeps them as a sketchstyle.'
+            : `Modified from ${s.label}. Save it to keep it.`,
+        }
       : { name: s.label, blurb: s.blurb || 'Your saved sketchstyle.' },
   );
 
-  let selectedLook = $derived($sketchLooks.find((l) => l.id === $sketchStyleName));
+  let selectedSketchStyle = $derived($sketchStyles.find((l) => l.id === $selectedSketchStyleId));
   /** Offered whenever the dials have moved off the sketchstyle they name. A
-      look backed by a project file is written over. A shipped one's file lives
+      style backed by a project file is written over. A shipped one's file lives
       in the package, so saving it writes this project's own under the same
       name, which is how a project comes to own its Pencil: the id is the same,
       so the new file takes the shipped one's place in the grid rather than
       sitting beside it. Nothing is lost either way, since deleting that file
       uncovers the packaged one again. */
-  let canSave = $derived(!!selectedLook && $sketchDirty);
+  let canSave = $derived(!!selectedSketchStyle && $sketchDirty);
   let saveTitle = $derived(
-    !selectedLook
-      ? 'Pick a sketchstyle to save over'
-      : !$sketchDirty
-        ? 'No changes to save'
-        : selectedLook.source === 'file'
-          ? `Save over ${selectedLook.label}`
-          : `Keep these dials as this project's ${selectedLook.label}`,
+    onUnsavedSketchStyle
+      ? 'These settings belong to no sketchstyle file. Save As keeps them as one.'
+      : !selectedSketchStyle
+        ? 'Pick a sketchstyle to save over'
+        : !$sketchDirty
+          ? 'No changes to save'
+          : `Save over ${selectedSketchStyle.label}`,
   );
 
   function saveInPlace() {
-    if (!selectedLook) return;
-    runStyleAction(
-      selectedLook.source === 'file'
-        ? saveSelectedSketchStyle()
-        : saveCurrentSketchStyle(selectedLook.label),
-    );
+    if (!selectedSketchStyle) return;
+    runStyleAction(saveSelectedSketchStyle());
   }
 
   let naming = $state(false);
@@ -324,9 +336,9 @@
       <div class="readout" aria-live="polite">
         <span class="readout-name">{active.name}</span>
         <p class="readout-blurb">{active.blurb}</p>
-        {#if $sketchOffLook}
+        {#if $sketchOffTheme}
           {#if $sketchEnabled}
-            <p class="readout-off-look">
+            <p class="readout-off-style">
               {#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.
@@ -336,7 +348,7 @@
               {/if}
             </p>
           {:else}
-            <p class="readout-off-look">
+            <p class="readout-off-style">
               The theme carries a sketchstyle this page is not painting. Saving now would drop
               it.
             </p>
@@ -345,25 +357,39 @@
       </div>
 
       <div class="presets">
-        {#each $sketchLooks as look (look.id)}
+        {#if $unsavedSketchStyle}
+          <div class="saved-item">
+            <label class="preset">
+              <input
+                type="radio"
+                name={STYLE_RADIO_GROUP}
+                value={$unsavedSketchStyle.id}
+                checked={onUnsavedSketchStyle}
+                onchange={() => setSketch(THEME_SKETCH_ID)}
+              />
+              <span class="preset-name">{$unsavedSketchStyle.label}</span>
+            </label>
+          </div>
+        {/if}
+        {#each $sketchStyles as style (style.id)}
           <div class="saved-item">
             <label class="preset">
               <input
                 type="radio"
                 name={STYLE_RADIO_GROUP}
-                value={look.id}
-                checked={$sketchStyleName === look.id}
-                onchange={() => selectSketchStyle(look.id)}
+                value={style.id}
+                checked={$selectedSketchStyleId === style.id}
+                onchange={() => setSketch(style.id)}
               />
-              <span class="preset-name">{look.label}</span>
+              <span class="preset-name">{style.label}</span>
             </label>
-            {#if look.source === 'file'}
+            {#if style.source === 'file'}
               <button
                 type="button"
                 class="saved-delete"
-                title="Delete {look.label}"
-                aria-label="Delete {look.label}"
-                onclick={() => runStyleAction(deleteSavedSketchStyle(look.id))}
+                title="Delete {style.label}"
+                aria-label="Delete {style.label}"
+                onclick={() => runStyleAction(deleteSavedSketchStyle(style.id))}
               ><i class="fas fa-xmark"></i></button>
             {/if}
           </div>
@@ -665,7 +691,7 @@
               />
             </div>
           </div>
-          {#if !s.maskBlobLinked}
+          {#if s.maskBlobX !== s.maskBlobY}
             <SketchDial
               label="Rotation" value={s.maskAngle} min={0} max={180} step={1}
               readout={`${blobAngle}°`}
@@ -1097,7 +1123,7 @@
     color: var(--ui-text-secondary);
   }
 
-  .readout-off-look {
+  .readout-off-style {
     margin: var(--ui-space-2) 0 0;
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-weight-medium);

package/src/live-tokens/data/sketch-styles/dry.json

@@ -21,11 +21,11 @@
     "pooling": 1.5,
     "strokeInk": 0.4,
     "maskOn": true,
-    "maskBlobX": 150,
-    "maskBlobY": 150,
+    "maskBlobX": 170,
+    "maskBlobY": 170,
     "maskBlobLinked": true,
     "maskAngle": 0,
-    "maskOutputMin": 0.24,
+    "maskOutputMin": 0.57,
     "maskOutputMax": 0.91,
     "maskOctaves": 2,
     "maskGrain": "fractal",
@@ -42,6 +42,6 @@
     "iconMaskOn": true,
     "iconMaskScale": 3.8
   },
-  "updatedAt": "2026-08-28T15:47:36.934Z",
+  "updatedAt": "2026-08-28T21:19:51.383Z",
   "createdAt": "2026-08-28T15:47:36.934Z"
-}
+}

package/src/live-tokens/data/sketch-styles/hatched.json

@@ -20,15 +20,15 @@
     "pressureMod": 0.45,
     "pooling": 0.8,
     "strokeInk": 1,
-    "maskOn": false,
-    "maskBlobX": 100,
-    "maskBlobY": 100,
-    "maskBlobLinked": true,
-    "maskAngle": 0,
-    "maskOutputMin": 0.45,
+    "maskOn": true,
+    "maskBlobX": 10,
+    "maskBlobY": 600,
+    "maskBlobLinked": false,
+    "maskAngle": 150,
+    "maskOutputMin": 0.35,
     "maskOutputMax": 1,
     "maskOctaves": 2,
-    "maskGrain": "fractal",
+    "maskGrain": "turbulence",
     "maskPosterize": 1,
     "maskSoftness": 1.5,
     "jitterX": 1.5,
@@ -42,6 +42,6 @@
     "iconMaskOn": false,
     "iconMaskScale": 1
   },
-  "updatedAt": "2026-08-28T15:47:36.934Z",
+  "updatedAt": "2026-08-28T21:17:18.232Z",
   "createdAt": "2026-08-28T15:47:36.934Z"
-}
+}

package/src/live-tokens/data/sketch-styles/napkin.json

@@ -25,16 +25,16 @@
     "maskBlobY": 150,
     "maskBlobLinked": true,
     "maskAngle": 0,
-    "maskOutputMin": 0.43,
-    "maskOutputMax": 0.95,
+    "maskOutputMin": 0.62,
+    "maskOutputMax": 1,
     "maskOctaves": 2,
     "maskGrain": "fractal",
     "maskPosterize": 2,
-    "maskSoftness": 10,
+    "maskSoftness": 5,
     "jitterX": 6,
     "jitterY": 6,
     "jitterRot": 1.8,
-    "jitterScale": 0.1,
+    "jitterScale": 0.075,
     "cornerSpread": 20,
     "cornerTravel": 17,
     "iconTravel": 2.25,

package/src/live-tokens/data/sketch-styles/pencil.json

@@ -2,7 +2,7 @@
   "name": "Pencil",
   "settings": {
     "label": "Pencil",
-    "blurb": "Two graphite passes on their own seeds, so the outline disagrees with itself the way a hand coming back round does. Tight grain, little else.",
+    "blurb": "Two graphite passes on their own seeds, so the outline disagrees with itself the way a hand coming back round does. The grain is drawn long and on the diagonal, the way a pencil shades.",
     "fillTravel": 0.75,
     "strokeTravel": 1.25,
     "wobble": 30,
@@ -44,4 +44,4 @@
   },
   "updatedAt": "2026-08-28T14:35:06.291Z",
   "createdAt": "2026-08-28T14:35:06.291Z"
-}
+}

package/src/live-tokens/data/themes/autumn.json

@@ -2,7 +2,7 @@
   "name": "Autumn",
   "createdAt": "2026-08-13T10:21:46.867Z",
   "updatedAt": "2026-08-19T22:39:32.785Z",
-  "schemaVersion": 4,
+  "schemaVersion": 5,
   "colorsAndType": {
     "name": "Autumn",
     "createdAt": "2026-08-12T20:21:21.128Z",

package/src/live-tokens/data/themes/halloween.json

@@ -2,7 +2,7 @@
   "name": "Halloween",
   "createdAt": "2026-08-13T10:21:46.867Z",
   "updatedAt": "2026-08-19T22:39:32.785Z",
-  "schemaVersion": 4,
+  "schemaVersion": 5,
   "colorsAndType": {
     "name": "Halloween",
     "createdAt": "2026-08-12T20:13:46.209Z",

package/src/live-tokens/data/themes/midnight-study.json

@@ -2,7 +2,7 @@
   "name": "Midnight Study",
   "createdAt": "2026-08-13T10:21:46.867Z",
   "updatedAt": "2026-08-27T17:03:51.623Z",
-  "schemaVersion": 4,
+  "schemaVersion": 5,
   "colorsAndType": {
     "name": "Midnight Study",
     "createdAt": "2026-08-27T17:01:37.984Z",

package/src/live-tokens/data/themes/ocean.json

@@ -2,7 +2,7 @@
   "name": "Ocean",
   "createdAt": "2026-08-13T10:21:46.867Z",
   "updatedAt": "2026-08-19T22:39:32.785Z",
-  "schemaVersion": 4,
+  "schemaVersion": 5,
   "colorsAndType": {
     "name": "Ocean",
     "createdAt": "2026-08-12T20:13:46.322Z",

package/src/live-tokens/data/themes/royal-velvet.json

@@ -2,7 +2,7 @@
   "name": "Royal Velvet",
   "createdAt": "2026-08-13T10:21:46.867Z",
   "updatedAt": "2026-08-19T22:39:32.785Z",
-  "schemaVersion": 4,
+  "schemaVersion": 5,
   "colorsAndType": {
     "name": "Royal Velvet",
     "createdAt": "2026-08-12T20:26:16.137Z",

package/src/live-tokens/data/themes/sketchy.json

@@ -2,7 +2,7 @@
   "name": "Sketchy",
   "createdAt": "2026-08-25T01:11:16.870Z",
   "updatedAt": "2026-08-26T10:04:53.000Z",
-  "schemaVersion": 4,
+  "schemaVersion": 5,
   "colorsAndType": {
     "name": "Sketchy",
     "createdAt": "2026-08-25T01:21:09.181Z",

package/src/live-tokens/data/themes/spring-meadow.json

@@ -2,7 +2,7 @@
   "name": "Spring Meadow",
   "createdAt": "2026-08-13T10:21:46.867Z",
   "updatedAt": "2026-08-19T22:39:32.785Z",
-  "schemaVersion": 4,
+  "schemaVersion": 5,
   "colorsAndType": {
     "name": "Spring Meadow",
     "createdAt": "2026-08-12T20:13:46.433Z",

package/src/live-tokens/data/themes/sunset.json

@@ -2,7 +2,7 @@
   "name": "Sunset",
   "createdAt": "2026-08-13T10:21:46.867Z",
   "updatedAt": "2026-08-19T22:39:32.785Z",
-  "schemaVersion": 4,
+  "schemaVersion": 5,
   "colorsAndType": {
     "name": "Sunset",
     "createdAt": "2026-08-12T20:13:46.488Z",

package/src/system/backdrop/backdrop.ts

@@ -16,7 +16,7 @@ export const BACKDROP_ATTRIBUTE = 'data-backdrop';
 
 /** Relative luminance at or above which a backdrop counts as light. Sits
     between the palest shipped dark theme (~0.03) and the darkest light one
-    (~0.6), so no shipped look lands near the line. */
+    (~0.6), so no shipped sketchstyle lands near the line. */
 export const LIGHT_BACKDROP = 0.2;
 
 /** A fill this see-through says nothing about what shows through it, so the

package/src/system/components/SectionDivider.svelte

@@ -3,7 +3,7 @@
 
   import { onMount, tick } from 'svelte';
 
-  /** Size variant. Each variant owns everything that defines its look:
+  /** Size variant. Each variant owns everything that defines its style:
    *  typography, geometry, colors AND the intrinsic display properties
    *  (alignment, eyebrow visibility, description visibility, hairline
    *  position). Every intrinsic flows through `:root` CSS vars so a designer