@motion-proto/live-tokens 0.58.0 → 0.60.0

package/src/editor/overlay/ColumnsOverlay.svelte

@@ -58,7 +58,10 @@
 {/if}
 
 <style>
+  /* Sketch mode scopes itself to the host document root, and these guides live
+     there too. The effect is for the page being measured, not for the ruler. */
   .columns-overlay {
+    --sketch-icon-off: none;
     position: fixed;
     inset: 0;
     pointer-events: none;

package/src/editor/ui/ColorEditPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { hexToOklch, oklchToHex, gamutClamp } from '../core/palettes/oklch';
-  import InlineEditActions from '../../system/components/InlineEditActions.svelte';
-  import Button from '../../system/components/Button.svelte';
+  import UIInlineEditActions from './UIInlineEditActions.svelte';
+  import UIPillButton from './UIPillButton.svelte';
 
   
 
@@ -15,6 +15,8 @@
     /** Hide the confirm/cancel actions for live-apply consumers (Colors view
      *  readout) where edits commit through the store as they happen. */
     hideActions?: boolean;
+    /** Greys the confirm/cancel pair out while no edit is pending. */
+    actionsDisabled?: boolean;
     /** Hide the preview square where the surrounding view already shows the
      *  color (Colors view: wheel, swatches and derived scale all do). */
     hidePreview?: boolean;
@@ -43,6 +45,7 @@
     highlighted = false,
     showRemoveOverride = false,
     hideActions = false,
+    actionsDisabled = false,
     hidePreview = false,
     onConfirm = () => {},
     onCancel = () => {},
@@ -171,16 +174,17 @@
     {#if !hideActions}
       <div class="hsl-panel-actions">
         {#if showRemoveOverride}
-          <Button
-            variant="danger"
-            size="small"
-            icon="fas fa-trash"
-            on:click={onRemoveOverride}
-          >Remove override</Button>
+          <UIPillButton
+            size="compact"
+            variant="outline"
+            icon="fa-trash"
+            onclick={onRemoveOverride}
+          >Remove override</UIPillButton>
         {/if}
-        <InlineEditActions
+        <UIInlineEditActions
           onSave={onConfirm}
           onCancel={onCancel}
+          disabled={actionsDisabled}
           saveTitle="Apply changes"
           cancelTitle="Discard changes"
         />

package/src/editor/ui/PaletteEditor.svelte

@@ -203,6 +203,14 @@
 
   function startBaseEdit() {
     if (editing.kind === 'editingBase') { confirmEdit(); return; }
+    ensureBaseSession();
+  }
+
+  // The base panel applies every change straight to the store, so its
+  // confirm/cancel pair needs a session to act on. Opening one lazily on the
+  // first touch keeps the panel's mere presence from clipping the undo floor.
+  function ensureBaseSession() {
+    if (editing.kind === 'editingBase') return;
     editing = { kind: 'editingBase' };
     openSession();
   }
@@ -626,18 +634,18 @@
         <ColorEditPanel
           title={basePanelTitle}
           showRemoveOverride={false}
-          hideActions={!isEditingBase}
+          actionsDisabled={!isEditingBase}
           hidePreview
           hue={baseColor.h}
           chroma={baseColor.c}
           lightness={baseColor.l * 100}
           chromaMax={BASE_CHROMA_MAX}
           chromaHint={neutral ? NEUTRAL_CALM_CHROMA : undefined}
-          onHueChromaChange={(h, c, l) => setBaseColor(label, { l: l / 100, c, h })}
+          onHueChromaChange={(h, c, l) => { ensureBaseSession(); setBaseColor(label, { l: l / 100, c, h }); }}
           onConfirm={confirmEdit}
           onCancel={cancelEdit}
           onRemoveOverride={() => {}}
-          onSliderStart={() => beginSliderGesture(`edit ${label} base`)}
+          onSliderStart={() => { ensureBaseSession(); beginSliderGesture(`edit ${label} base`); }}
         />
       </div>
     </div>

package/src/editor/ui/UIInlineEditActions.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  interface Props {
+    onSave: () => void | Promise<void>;
+    onCancel: () => void;
+    disabled?: boolean;
+    saveTitle?: string;
+    cancelTitle?: string;
+  }
+
+  let {
+    onSave,
+    onCancel,
+    disabled = false,
+    saveTitle = 'Save',
+    cancelTitle = 'Cancel'
+  }: Props = $props();
+</script>
+
+<div class="ui-inline-actions">
+  <button
+    class="ui-ia ui-ia-save"
+    type="button"
+    {disabled}
+    title={saveTitle}
+    aria-label={saveTitle}
+    onclick={onSave}
+  ><i class="fas fa-check" aria-hidden="true"></i></button>
+  <button
+    class="ui-ia ui-ia-cancel"
+    type="button"
+    {disabled}
+    title={cancelTitle}
+    aria-label={cancelTitle}
+    onclick={onCancel}
+  ><i class="fas fa-xmark" aria-hidden="true"></i></button>
+</div>
+
+<style>
+  .ui-inline-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-4);
+  }
+
+  /* Sized to the 1.5rem chrome buttons it sits beside (eyedropper, swatch). */
+  .ui-ia {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border-radius: var(--ui-radius-sm);
+    font-size: var(--ui-font-size-xs);
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background var(--ui-transition-fast),
+      border-color var(--ui-transition-fast),
+      color var(--ui-transition-fast);
+  }
+
+  .ui-ia-save {
+    background: linear-gradient(180deg, rgba(90, 168, 94, 0.35) 0%, rgba(90, 168, 94, 0.18) 100%);
+    border: 1px solid rgba(90, 168, 94, 0.6);
+    color: var(--ui-text-primary);
+  }
+
+  .ui-ia-save:hover:not(:disabled) {
+    background: linear-gradient(180deg, rgba(90, 168, 94, 0.48) 0%, rgba(90, 168, 94, 0.26) 100%);
+    border-color: rgba(90, 168, 94, 0.78);
+  }
+
+  .ui-ia-cancel {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: var(--ui-text-secondary);
+  }
+
+  .ui-ia-cancel:hover:not(:disabled) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border-color: rgba(255, 255, 255, 0.5);
+    color: var(--ui-text-primary);
+  }
+
+  .ui-ia:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
+  }
+
+  .ui-ia:disabled {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
+    border-color: rgba(255, 255, 255, 0.14);
+    color: var(--ui-text-disabled);
+    cursor: not-allowed;
+  }
+</style>

package/src/editor/ui/UIPaletteSelector.svelte

@@ -45,6 +45,10 @@
      *  Slots that must always paint something (e.g. overlay backdrops) opt
      *  out — picking None would just degenerate to opacity 0. */
     showNone?: boolean;
+    /** Opacity floor, 0-100. Declared on tokens whose surface floats over
+     *  arbitrary page content (a dropdown panel) and must stay legible there.
+     *  A floor also retires "None", which would defeat it. */
+    minOpacity?: number;
     onchange?: () => void;
     /** Forwarded to UITokenSelector — when set, writes route through this
      *  callback instead of the DOM. See UITokenSelector.onwrite. */
@@ -59,10 +63,14 @@
     selectionsLocked = false,
     familyFilter = null,
     showNone = true,
+    minOpacity = 0,
     onchange,
     onwrite,
   }: Props = $props();
 
+  const clampOpacity = (n: number) => Math.max(minOpacity, Math.min(100, Math.round(n)));
+  let noneAllowed = $derived(showNone && minOpacity <= 0);
+
   type Category = 'palette' | 'surface' | 'border' | 'text';
 
   const families = [
@@ -270,7 +278,7 @@
   }
 
   function applyOpacity() {
-    opacity = Math.max(0, Math.min(100, Math.round(opacity)));
+    opacity = clampOpacity(opacity);
     if (chosenStatic !== null) {
       selector?.writeOverride(buildValue(`--color-${chosenStatic}`));
       onchange?.();
@@ -394,7 +402,7 @@
       chosenCategory = null;
       chosenFamily = null;
       chosenStep = null;
-      opacity = staticParsed.opacity;
+      opacity = clampOpacity(staticParsed.opacity);
       return;
     }
     chosenStatic = null;
@@ -406,7 +414,7 @@
         chosenCategory = parsed.category;
         chosenFamily = parsed.family;
         chosenStep = parsed.step;
-        opacity = opacityParsed.opacity;
+        opacity = clampOpacity(opacityParsed.opacity);
         return;
       }
     }
@@ -597,8 +605,8 @@
   {#snippet subheader()}
     <div  class="opacity-control" class:hidden={chosenGradient !== null}>
       <span class="opacity-label">opacity</span>
-      <input type="range" min="0" max="100" bind:value={opacity} class="opacity-slider" oninput={applyOpacity} />
-      <input type="number" min="0" max="100" bind:value={opacity} class="opacity-input" onchange={applyOpacity} />
+      <input type="range" min={minOpacity} max="100" bind:value={opacity} class="opacity-slider" oninput={applyOpacity} />
+      <input type="number" min={minOpacity} max="100" bind:value={opacity} class="opacity-input" onchange={applyOpacity} />
       <span class="opacity-unit">%</span>
     </div>
   {/snippet}
@@ -616,7 +624,7 @@
             <div class="static-swatch static-swatch--black"></div>
             <span class="static-label">Black</span>
           </button>
-          {#if showNone}
+          {#if noneAllowed}
             <button class="static-chip" class:active={chosenNone} onclick={() => selectNone(close)}>
               <div class="static-swatch static-swatch--none"></div>
               <span class="static-label">None</span>

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

@@ -2265,11 +2265,11 @@
     "--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)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.25)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.25)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.25)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.25)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.25)"
+    "--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)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.25)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.25)"
   },
   "fontSources": [
     {

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

@@ -2296,11 +2296,11 @@
     "--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)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--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)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
   },
   "fontSources": [
     {

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

@@ -2312,11 +2312,11 @@
     "--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)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--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)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
   },
   "fontSources": [
     {

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

@@ -2312,11 +2312,11 @@
     "--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)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--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)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
   },
   "fontSources": [
     {

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

@@ -2265,11 +2265,11 @@
     "--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)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+    "--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)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
   },
   "fontSources": [
     {

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

@@ -2297,11 +2297,11 @@
     "--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)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--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)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
   },
   "fontSources": [
     {

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

@@ -2251,11 +2251,11 @@
     "--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)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+    "--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)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
   },
   "fontSources": [
     {

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

@@ -2251,11 +2251,11 @@
     "--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)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+    "--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)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
   },
   "fontSources": [
     {

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

@@ -2312,11 +2312,11 @@
     "--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)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--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)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
   },
   "fontSources": [
     {

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

@@ -2270,11 +2270,11 @@
       "--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)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.25)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.25)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.25)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.25)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.25)"
+      "--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)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.25)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.25)"
     },
     "fontSources": [
       {
@@ -3279,7 +3279,7 @@
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent)",
+        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
         "--menuselect-menu-border": "--border-neutral-medium",
         "--menuselect-menu-border-width": "--border-width-1",
         "--menuselect-menu-radius": "--radius-xl",

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

@@ -2317,11 +2317,11 @@
       "--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)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--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)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
     },
     "fontSources": [
       {
@@ -3318,7 +3318,7 @@
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent)",
+        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
         "--menuselect-menu-border": "--border-neutral-medium",
         "--menuselect-menu-border-width": "--border-width-3",
         "--menuselect-menu-radius": "--radius-none",

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

@@ -2317,11 +2317,11 @@
       "--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)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--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)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
     },
     "fontSources": [
       {
@@ -3325,7 +3325,7 @@
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent)",
+        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
         "--menuselect-menu-border": "--border-neutral-medium",
         "--menuselect-menu-border-width": "--border-width-1",
         "--menuselect-menu-radius": "--radius-md",

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

@@ -2270,11 +2270,11 @@
       "--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)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+      "--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)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
     },
     "fontSources": [
       {
@@ -3278,7 +3278,7 @@
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent)",
+        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
         "--menuselect-menu-border": "--border-neutral-medium",
         "--menuselect-menu-border-width": "--border-width-1",
         "--menuselect-menu-radius": "--radius-xl",

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

@@ -2302,11 +2302,11 @@
       "--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)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--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)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
     },
     "fontSources": [
       {
@@ -3309,7 +3309,7 @@
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent)",
+        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
         "--menuselect-menu-border": "--border-neutral-medium",
         "--menuselect-menu-border-width": "--border-width-2",
         "--menuselect-menu-radius": "--radius-md",

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

@@ -2256,11 +2256,11 @@
       "--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)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+      "--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)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
     },
     "fontSources": [
       {
@@ -3292,7 +3292,7 @@
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
       "aliases": {
-        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent)",
+        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
         "--menuselect-menu-border": "--border-neutral-medium",
         "--menuselect-menu-border-width": "--border-width-1",
         "--menuselect-menu-radius": "--radius-none",

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

@@ -2256,11 +2256,11 @@
       "--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)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+      "--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)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
     },
     "fontSources": [
       {
@@ -3265,7 +3265,7 @@
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent)",
+        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
         "--menuselect-menu-border": "--border-neutral-medium",
         "--menuselect-menu-border-width": "--border-width-1",
         "--menuselect-menu-radius": "--radius-lg",