@motion-proto/live-tokens 0.67.1 → 0.69.0

package/src/editor/ui/sections/{OverlaysSection.svelte → WashesSection.svelte}

@@ -1,18 +1,19 @@
 <script lang="ts">
   /**
-   * Overlay + hover stops. Each stop binds an existing color token through
-   * `UIPaletteSelector`; the picker handles family/step selection and
-   * opacity, and writes route through `onwrite` into the overlays slice
-   * (see editorStore.makeDefaultOverlaysState). The slice fans the
-   * resulting color-mix expressions out to :root.
+   * Scrim + tint stops. A scrim dims what sits behind it; a tint shades the
+   * surface it sits on. Each stop binds an existing color token through
+   * `UIPaletteSelector`; the picker handles family/step selection and opacity,
+   * and writes route through `onwrite` into the washes slice
+   * (see editorStore.makeDefaultWashesState). The slice fans the resulting
+   * color-mix expressions out to :root.
    */
   import { editorState, mutate } from '../../core/store/editorStore';
-  import type { OverlayToken } from '../../core/store/editorTypes';
+  import type { WashToken } from '../../core/store/editorTypes';
   import {
-    makeDefaultOverlayTokens,
-    makeDefaultHoverTokens,
-    parseOverlayCss,
-  } from '../../core/themes/slices/overlays';
+    makeDefaultScrimTokens,
+    makeDefaultTintTokens,
+    parseWashCss,
+  } from '../../core/themes/slices/washes';
   import UIPaletteSelector from '../UIPaletteSelector.svelte';
 
   interface Props {
@@ -22,7 +23,7 @@
 
   let { copiedVar = null, oncopy }: Props = $props();
 
-  type Channel = 'overlay' | 'hover';
+  type Channel = 'scrim' | 'tint';
 
   function copy(v: string) { oncopy?.(v); }
 
@@ -31,41 +32,41 @@
    *  - bare `--name` → 100% opacity on that alias.
    *  - `color-mix(in srgb, var(--name) N%, transparent)` → alias + N%.
    *  - other (incl. `transparent`) → ignored; the picker's "None" option
-   *    doesn't apply to overlays. */
+   *    doesn't apply to a wash. */
   function handleWrite(channel: Channel, idx: number, value: string | null) {
     mutate(`${channel} ${idx} edit`, (s) => {
-      const arr = channel === 'overlay' ? s.overlays.tokens : s.overlays.hoverTokens;
+      const arr = channel === 'scrim' ? s.washes.scrims : s.washes.tints;
       const t = arr[idx];
       if (!t) return;
       if (value === null) {
-        const defaults = channel === 'overlay' ? makeDefaultOverlayTokens() : makeDefaultHoverTokens();
+        const defaults = channel === 'scrim' ? makeDefaultScrimTokens() : makeDefaultTintTokens();
         const d = defaults[idx];
         if (d) { t.alias = d.alias; t.opacity = d.opacity; }
         return;
       }
       if (value.startsWith('--')) { t.alias = value; t.opacity = 1; return; }
-      const parsed = parseOverlayCss(value);
+      const parsed = parseWashCss(value);
       if (parsed) { t.alias = parsed.alias; t.opacity = parsed.opacity; }
     });
   }
 
-  function copyCss(t: OverlayToken): string {
+  function copyCss(t: WashToken): string {
     const pct = Math.round(t.opacity * 100);
     return pct >= 100 ? `var(${t.alias})` : `color-mix(in srgb, var(${t.alias}) ${pct}%, transparent)`;
   }
 </script>
 
-<section class="section" id="overlays">
-  <h2 class="section-title">Overlays</h2>
+<section class="section" id="washes">
+  <h2 class="section-title">Washes</h2>
 
-  <h3 class="group-title">Dark Overlays</h3>
-  <div class="overlays-grid">
-    {#each $editorState.overlays.tokens as token, i (token.variable)}
-      <div class="overlay-row">
-        <div class="overlay-swatch-wrap">
-          <div class="overlay-swatch" style="background: var({token.variable});"></div>
+  <h3 class="group-title">Scrims</h3>
+  <div class="washes-grid">
+    {#each $editorState.washes.scrims as token, i (token.variable)}
+      <div class="wash-row">
+        <div class="wash-swatch-wrap">
+          <div class="wash-swatch" style="background: var({token.variable});"></div>
         </div>
-        <div class="overlay-meta">
+        <div class="wash-meta">
           <button
             class="token-variable copyable"
             class:copied={copiedVar === token.variable}
@@ -73,11 +74,11 @@
           >{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.label} — {Math.round(token.opacity * 100)}%</span>
         </div>
-        <div class="overlay-picker">
+        <div class="wash-picker">
           <UIPaletteSelector
             variable={token.variable}
             showNone={false}
-            onwrite={(v) => handleWrite('overlay', i, v)}
+            onwrite={(v) => handleWrite('scrim', i, v)}
           />
         </div>
         <button
@@ -91,14 +92,14 @@
     {/each}
   </div>
 
-  <h3 class="group-title">Hover Overlays</h3>
-  <div class="overlays-grid">
-    {#each $editorState.overlays.hoverTokens as token, i (token.variable)}
-      <div class="overlay-row">
-        <div class="overlay-swatch-wrap overlay-swatch-wrap--dark">
-          <div class="overlay-swatch" style="background: var({token.variable});"></div>
+  <h3 class="group-title">Tints</h3>
+  <div class="washes-grid">
+    {#each $editorState.washes.tints as token, i (token.variable)}
+      <div class="wash-row">
+        <div class="wash-swatch-wrap wash-swatch-wrap--dark">
+          <div class="wash-swatch" style="background: var({token.variable});"></div>
         </div>
-        <div class="overlay-meta">
+        <div class="wash-meta">
           <button
             class="token-variable copyable"
             class:copied={copiedVar === token.variable}
@@ -106,11 +107,11 @@
           >{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.label} — {Math.round(token.opacity * 100)}%</span>
         </div>
-        <div class="overlay-picker">
+        <div class="wash-picker">
           <UIPaletteSelector
             variable={token.variable}
             showNone={false}
-            onwrite={(v) => handleWrite('hover', i, v)}
+            onwrite={(v) => handleWrite('tint', i, v)}
           />
         </div>
         <button
@@ -148,13 +149,13 @@
     margin: 0;
   }
 
-  .overlays-grid {
+  .washes-grid {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-8);
   }
 
-  .overlay-row {
+  .wash-row {
     display: grid;
     grid-template-columns: 3.5rem minmax(10rem, 1fr) minmax(14rem, 1.5fr) auto;
     gap: var(--ui-space-12);
@@ -165,7 +166,7 @@
     border-radius: var(--ui-radius-md);
   }
 
-  .overlay-swatch-wrap {
+  .wash-swatch-wrap {
     width: 3.5rem;
     height: 3.5rem;
     border-radius: var(--ui-radius-sm);
@@ -182,7 +183,7 @@
     background-color: #fff;
   }
 
-  .overlay-swatch-wrap--dark {
+  .wash-swatch-wrap--dark {
     background-color: #222;
     background-image:
       linear-gradient(45deg, #333 25%, transparent 25%),
@@ -191,12 +192,12 @@
       linear-gradient(-45deg, transparent 75%, #333 75%);
   }
 
-  .overlay-swatch {
+  .wash-swatch {
     position: absolute;
     inset: 0;
   }
 
-  .overlay-meta {
+  .wash-meta {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-2);
@@ -220,7 +221,7 @@
     color: var(--ui-text-muted);
   }
 
-  .overlay-picker { min-width: 0; }
+  .wash-picker { min-width: 0; }
 
   .copy-css-btn {
     all: unset;

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 { SketchStyle } from '../../core/sketch/sketchStyles';
+  import type { SketchStyleSettings } from '../../core/sketch/sketchStyles';
 
   interface Props {
-    settings: SketchStyle;
+    settings: SketchStyleSettings;
     enabled: boolean;
   }
 

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/colors-and-type/autumn.json

@@ -2259,12 +2259,12 @@
     "--columns-max-width": "1440px",
     "--columns-gutter": "32px",
     "--columns-margin": "0px",
-    "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-    "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-    "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-    "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-    "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-    "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+    "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
+    "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
+    "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
+    "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
+    "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+    "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
     "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.25)",
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.25)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.25)",

package/src/live-tokens/data/colors-and-type/default.json

@@ -2290,12 +2290,12 @@
     "--columns-max-width": "1440px",
     "--columns-gutter": "32px",
     "--columns-margin": "0px",
-    "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-    "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-    "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-    "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-    "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-    "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+    "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
+    "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
+    "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
+    "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
+    "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+    "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
     "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",

package/src/live-tokens/data/colors-and-type/halloween.json

@@ -2306,12 +2306,12 @@
     "--columns-max-width": "1440px",
     "--columns-gutter": "32px",
     "--columns-margin": "0px",
-    "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-    "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-    "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-    "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-    "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-    "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+    "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
+    "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
+    "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
+    "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
+    "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+    "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
     "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",

package/src/live-tokens/data/colors-and-type/midnight-study.json

@@ -2302,12 +2302,12 @@
     "--columns-max-width": "1440px",
     "--columns-gutter": "32px",
     "--columns-margin": "0px",
-    "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-    "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-    "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-    "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-    "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-    "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+    "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
+    "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
+    "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
+    "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
+    "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+    "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
     "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",

package/src/live-tokens/data/colors-and-type/ocean.json

@@ -2259,12 +2259,12 @@
     "--columns-max-width": "1440px",
     "--columns-gutter": "32px",
     "--columns-margin": "0px",
-    "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-    "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-    "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-    "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-    "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-    "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+    "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
+    "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
+    "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
+    "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
+    "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+    "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
     "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",

package/src/live-tokens/data/colors-and-type/royal-velvet.json

@@ -2291,12 +2291,12 @@
     "--columns-max-width": "1440px",
     "--columns-gutter": "32px",
     "--columns-margin": "0px",
-    "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-    "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-    "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-    "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-    "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-    "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+    "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
+    "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
+    "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
+    "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
+    "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+    "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
     "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",

package/src/live-tokens/data/colors-and-type/sketchy.json

@@ -2245,12 +2245,12 @@
     "--columns-max-width": "1440px",
     "--columns-gutter": "32px",
     "--columns-margin": "0px",
-    "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-    "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-    "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-    "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-    "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-    "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+    "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
+    "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
+    "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
+    "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
+    "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+    "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
     "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",

package/src/live-tokens/data/colors-and-type/spring-meadow.json

@@ -2245,12 +2245,12 @@
     "--columns-max-width": "1440px",
     "--columns-gutter": "32px",
     "--columns-margin": "0px",
-    "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-    "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-    "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-    "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-    "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-    "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+    "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
+    "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
+    "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
+    "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
+    "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+    "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
     "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",

package/src/live-tokens/data/colors-and-type/sunset.json

@@ -2306,12 +2306,12 @@
     "--columns-max-width": "1440px",
     "--columns-gutter": "32px",
     "--columns-margin": "0px",
-    "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-    "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-    "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-    "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-    "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-    "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+    "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
+    "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
+    "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
+    "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
+    "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+    "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
     "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",

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"
-}
+}