@motion-proto/live-tokens 0.53.0 → 0.54.1

package/src/editor/core/themes/parsers/shadow.ts

@@ -0,0 +1,52 @@
+/**
+ * The single source of truth for the CSS form of a shadow scale token:
+ *
+ *   <x>px <y>px <blur>px <spread>px hsla(<h>, <s>%, <l>%, <a>)
+ *
+ * Everything that reads or writes that form goes through `parseShadowCss` /
+ * `shadowTokenCss`, so the theme generator (Node, no store) and the editor
+ * (store, DOM) agree on the shape without sharing a graph.
+ */
+import type { ShadowToken } from '../../store/editorTypes';
+
+export const SHADOW_VAR_NAMES = [
+  '--shadow-sm', '--shadow-md', '--shadow-lg', '--shadow-xl', '--shadow-2xl',
+] as const;
+
+/** What the CSS form needs; `ShadowToken` adds the editor's polar controls. */
+export type ShadowValue = Omit<ShadowToken, 'variable' | 'angle' | 'distance'>;
+
+export function computeShadowXY(angle: number, distance: number): { x: number; y: number } {
+  const rad = angle * (Math.PI / 180);
+  return {
+    x: Math.round(-distance * Math.cos(rad)),
+    y: Math.round(distance * Math.sin(rad)),
+  };
+}
+
+export function computeAngleDistance(x: number, y: number): { angle: number; distance: number } {
+  const distance = Math.round(Math.sqrt(x * x + y * y));
+  if (distance === 0) return { angle: 135, distance: 0 };
+  let angle = Math.atan2(y, -x) * (180 / Math.PI);
+  if (angle < 0) angle += 360;
+  return { angle: Math.round(angle), distance };
+}
+
+export function shadowTokenCss(t: ShadowValue): string {
+  return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
+}
+
+export function parseShadowCss(variable: string, raw: string): ShadowToken | null {
+  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(-?\d+)px\s+hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
+  if (!m) return null;
+  const x = parseInt(m[1], 10);
+  const y = parseInt(m[2], 10);
+  const blur = parseInt(m[3], 10);
+  const spread = parseInt(m[4], 10);
+  const hue = Math.round(parseFloat(m[5]));
+  const saturation = Math.round(parseFloat(m[6]));
+  const lightness = Math.round(parseFloat(m[7]));
+  const opacity = parseFloat(m[8]);
+  const { angle, distance } = computeAngleDistance(x, y);
+  return { variable, x, y, blur, spread, opacity, hue, saturation, lightness, angle, distance };
+}

package/src/editor/core/themes/slices/shadows.ts

@@ -10,53 +10,17 @@
 import { get } from 'svelte/store';
 import type { EditorState, ShadowToken } from '../../store/editorTypes';
 import { store, persist } from '../../store/editorCore';
+import { SHADOW_VAR_NAMES, computeShadowXY, parseShadowCss, shadowTokenCss } from '../parsers/shadow';
 
-export const SHADOW_VAR_NAMES = [
-  '--shadow-sm', '--shadow-md', '--shadow-lg', '--shadow-xl', '--shadow-2xl',
-] as const;
+export { SHADOW_VAR_NAMES, computeShadowXY, parseShadowCss, shadowTokenCss };
 
 // Identical literal set as SHADOW_VAR_NAMES — derived to avoid drift.
 export const SCALE_SHADOW_VARIABLES: ReadonlySet<string> = new Set(SHADOW_VAR_NAMES);
 
-export function computeShadowXY(angle: number, distance: number): { x: number; y: number } {
-  const rad = angle * (Math.PI / 180);
-  return {
-    x: Math.round(-distance * Math.cos(rad)),
-    y: Math.round(distance * Math.sin(rad)),
-  };
-}
-
-function computeAngleDistance(x: number, y: number): { angle: number; distance: number } {
-  const distance = Math.round(Math.sqrt(x * x + y * y));
-  if (distance === 0) return { angle: 135, distance: 0 };
-  let angle = Math.atan2(y, -x) * (180 / Math.PI);
-  if (angle < 0) angle += 360;
-  return { angle: Math.round(angle), distance };
-}
-
-export function shadowTokenCss(t: ShadowToken): string {
-  return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
-}
-
 export function defaultShadowOverride(): import('../../store/editorTypes').ShadowOverrideFlags {
   return { angle: false, opacity: false, color: false, distance: false, blur: false, size: false };
 }
 
-export function parseShadowCss(variable: string, raw: string): ShadowToken | null {
-  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(-?\d+)px\s+hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
-  if (!m) return null;
-  const x = parseInt(m[1], 10);
-  const y = parseInt(m[2], 10);
-  const blur = parseInt(m[3], 10);
-  const spread = parseInt(m[4], 10);
-  const hue = Math.round(parseFloat(m[5]));
-  const saturation = Math.round(parseFloat(m[6]));
-  const lightness = Math.round(parseFloat(m[7]));
-  const opacity = parseFloat(m[8]);
-  const { angle, distance } = computeAngleDistance(x, y);
-  return { variable, x, y, blur, spread, opacity, hue, saturation, lightness, angle, distance };
-}
-
 export function shadowsToVars(shadows: EditorState['shadows']): Record<string, string> {
   const out: Record<string, string> = {};
   for (const t of shadows.tokens) out[t.variable] = shadowTokenCss(t);

package/src/editor/ui/PaletteEditor.svelte

@@ -545,7 +545,7 @@
     {/snippet}
   </PaletteBase>
 
-  {#if paletteEditorOpen || (isEditingBase && panelOpen && editingColor)}
+  <UIReveal open={paletteEditorOpen || (isEditingBase && panelOpen && !!editingColor)}>
     <div class="swatch-grid" style="--swatch-cols: {paletteStepLightness.length + 2}">
       <div class="base-panel" style="grid-column: 2 / {paletteStepLightness.length + 2}">
         <ColorEditPanel
@@ -577,7 +577,7 @@
         </ColorEditPanel>
       </div>
     </div>
-  {/if}
+  </UIReveal>
 
   <!-- Palette + Text row -->
   <div class="scales-row">

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.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 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)"
   },
   "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.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 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)"
   },
   "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.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 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)"
   },
   "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.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 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)"
     },
     "fontSources": [
       {

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

@@ -2544,7 +2544,7 @@
       "name": "midnight-study",
       "component": "badge",
       "createdAt": "2026-05-01T08:28:00.345Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--badge-primary-surface": "--surface-brand",
         "--badge-primary-text": "--text-brand",
@@ -2555,7 +2555,7 @@
         "--badge-primary-text-line-height": "--line-height-none",
         "--badge-primary-border-width": "--border-width-1",
         "--badge-primary-radius": "--radius-full",
-        "--badge-primary-padding": "--space-4",
+        "--badge-primary-padding": "--space-6",
         "--badge-primary-shadow": "--shadow-none",
         "--badge-primary-blur": "--blur-none",
         "--badge-primary-icon-size": "--icon-size-sm",
@@ -2568,7 +2568,7 @@
         "--badge-accent-text-line-height": "--line-height-none",
         "--badge-accent-border-width": "--border-width-1",
         "--badge-accent-radius": "--radius-full",
-        "--badge-accent-padding": "--space-4",
+        "--badge-accent-padding": "--space-6",
         "--badge-accent-shadow": "--shadow-none",
         "--badge-accent-blur": "--blur-none",
         "--badge-accent-icon-size": "--icon-size-sm",
@@ -2581,7 +2581,7 @@
         "--badge-neutral-text-line-height": "--line-height-none",
         "--badge-neutral-border-width": "--border-width-1",
         "--badge-neutral-radius": "--radius-full",
-        "--badge-neutral-padding": "--space-4",
+        "--badge-neutral-padding": "--space-6",
         "--badge-neutral-shadow": "--shadow-none",
         "--badge-neutral-blur": "--blur-none",
         "--badge-neutral-icon-size": "--icon-size-sm",
@@ -2594,7 +2594,7 @@
         "--badge-alternate-text-line-height": "--line-height-none",
         "--badge-alternate-border-width": "--border-width-1",
         "--badge-alternate-radius": "--radius-full",
-        "--badge-alternate-padding": "--space-4",
+        "--badge-alternate-padding": "--space-6",
         "--badge-alternate-shadow": "--shadow-none",
         "--badge-alternate-blur": "--blur-none",
         "--badge-alternate-icon-size": "--icon-size-sm",
@@ -2607,7 +2607,7 @@
         "--badge-canvas-text-line-height": "--line-height-none",
         "--badge-canvas-border-width": "--border-width-1",
         "--badge-canvas-radius": "--radius-full",
-        "--badge-canvas-padding": "--space-4",
+        "--badge-canvas-padding": "--space-6",
         "--badge-canvas-shadow": "--shadow-none",
         "--badge-canvas-blur": "--blur-none",
         "--badge-canvas-icon-size": "--icon-size-sm",
@@ -2620,7 +2620,7 @@
         "--badge-special-text-line-height": "--line-height-none",
         "--badge-special-border-width": "--border-width-1",
         "--badge-special-radius": "--radius-full",
-        "--badge-special-padding": "--space-4",
+        "--badge-special-padding": "--space-6",
         "--badge-special-shadow": "--shadow-none",
         "--badge-special-blur": "--blur-none",
         "--badge-special-icon-size": "--icon-size-sm",
@@ -2633,7 +2633,7 @@
         "--badge-success-text-line-height": "--line-height-none",
         "--badge-success-border-width": "--border-width-1",
         "--badge-success-radius": "--radius-full",
-        "--badge-success-padding": "--space-4",
+        "--badge-success-padding": "--space-6",
         "--badge-success-shadow": "--shadow-none",
         "--badge-success-blur": "--blur-none",
         "--badge-success-icon-size": "--icon-size-sm",
@@ -2646,7 +2646,7 @@
         "--badge-warning-text-line-height": "--line-height-none",
         "--badge-warning-border-width": "--border-width-1",
         "--badge-warning-radius": "--radius-full",
-        "--badge-warning-padding": "--space-4",
+        "--badge-warning-padding": "--space-6",
         "--badge-warning-shadow": "--shadow-none",
         "--badge-warning-blur": "--blur-none",
         "--badge-warning-icon-size": "--icon-size-sm",
@@ -2659,7 +2659,7 @@
         "--badge-danger-text-line-height": "--line-height-none",
         "--badge-danger-border-width": "--border-width-1",
         "--badge-danger-radius": "--radius-full",
-        "--badge-danger-padding": "--space-4",
+        "--badge-danger-padding": "--space-6",
         "--badge-danger-shadow": "--shadow-none",
         "--badge-danger-blur": "--blur-none",
         "--badge-danger-icon-size": "--icon-size-sm",
@@ -2672,7 +2672,7 @@
         "--badge-info-text-line-height": "--line-height-none",
         "--badge-info-border-width": "--border-width-1",
         "--badge-info-radius": "--radius-full",
-        "--badge-info-padding": "--space-4",
+        "--badge-info-padding": "--space-6",
         "--badge-info-shadow": "--shadow-none",
         "--badge-info-blur": "--blur-none",
         "--badge-info-icon-size": "--icon-size-sm"
@@ -2682,7 +2682,7 @@
       "name": "midnight-study",
       "component": "button",
       "createdAt": "2026-05-10T19:28:06.893Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--button-primary-surface": "--surface-brand-high",
         "--button-primary-text": "--text-primary",
@@ -2693,7 +2693,7 @@
         "--button-primary-border": "--border-brand",
         "--button-primary-border-width": "--border-width-1",
         "--button-primary-radius": "--radius-full",
-        "--button-primary-padding": "--space-4",
+        "--button-primary-padding": "--space-8",
         "--button-primary-hover-surface": "--surface-brand-higher",
         "--button-primary-hover-text": "--text-primary",
         "--button-primary-hover-border": "--border-brand-strong",
@@ -2710,7 +2710,7 @@
         "--button-secondary-border": "--border-neutral",
         "--button-secondary-border-width": "--border-width-1",
         "--button-secondary-radius": "--radius-full",
-        "--button-secondary-padding": "--space-4",
+        "--button-secondary-padding": "--space-8",
         "--button-secondary-hover-surface": "--surface-neutral-higher",
         "--button-secondary-hover-text": "--text-primary",
         "--button-secondary-hover-border": "--border-neutral-strong",
@@ -2727,7 +2727,7 @@
         "--button-outline-border": "--border-neutral",
         "--button-outline-border-width": "--border-width-1",
         "--button-outline-radius": "--radius-full",
-        "--button-outline-padding": "--space-4",
+        "--button-outline-padding": "--space-8",
         "--button-outline-hover-surface": "--surface-neutral-lower",
         "--button-outline-hover-text": "--text-primary",
         "--button-outline-hover-border": "--border-neutral-strong",
@@ -2745,7 +2745,7 @@
         "--button-success-border": "--border-success",
         "--button-success-border-width": "--border-width-1",
         "--button-success-radius": "--radius-full",
-        "--button-success-padding": "--space-4",
+        "--button-success-padding": "--space-8",
         "--button-success-hover-surface": "--surface-success-higher",
         "--button-success-hover-text": "--text-primary",
         "--button-success-hover-border": "--border-success-strong",
@@ -2762,7 +2762,7 @@
         "--button-danger-border": "--border-danger",
         "--button-danger-border-width": "--border-width-1",
         "--button-danger-radius": "--radius-full",
-        "--button-danger-padding": "--space-4",
+        "--button-danger-padding": "--space-8",
         "--button-danger-hover-surface": "--surface-danger-high",
         "--button-danger-hover-text": "--text-primary",
         "--button-danger-hover-border": "--border-danger-medium",
@@ -2779,7 +2779,7 @@
         "--button-warning-border": "--border-warning",
         "--button-warning-border-width": "--border-width-1",
         "--button-warning-radius": "--radius-full",
-        "--button-warning-padding": "--space-4",
+        "--button-warning-padding": "--space-8",
         "--button-warning-hover-surface": "--surface-warning-high",
         "--button-warning-hover-text": "--text-primary",
         "--button-warning-hover-border": "--border-warning-medium",
@@ -2787,7 +2787,7 @@
         "--button-warning-disabled-text": "--text-tertiary",
         "--button-warning-disabled-border": "--border-neutral-faint",
         "--button-warning-icon-size": "--icon-size-md",
-        "--button-small-padding": "--space-4",
+        "--button-small-padding": "--space-6",
         "--button-small-text-font-size": "--font-size-sm",
         "--button-small-text-font-weight": "--font-weight-normal",
         "--button-small-text-line-height": "--line-height-tighter",
@@ -3008,14 +3008,14 @@
       "name": "midnight-study",
       "component": "cornerbadge",
       "createdAt": "2026-05-12T15:31:06.313Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--corner-badge-margin": "--space-0",
         "--corner-badge-outer-radius": "--radius-none",
         "--corner-badge-inner-radius": "--radius-none",
         "--corner-badge-h-axis-radius": "--radius-none",
         "--corner-badge-v-axis-radius": "--radius-none",
-        "--corner-badge-padding": "--space-4",
+        "--corner-badge-padding": "--space-6",
         "--corner-badge-text-font-family": "--font-sans",
         "--corner-badge-text-font-size": "--font-size-sm",
         "--corner-badge-text-font-weight": "--font-weight-medium",
@@ -3624,7 +3624,7 @@
       "name": "midnight-study",
       "component": "segmentedcontrol",
       "createdAt": "2026-04-28T21:13:17.669Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
         "--segmentedcontrol-bar-border": "--border-neutral",
@@ -3635,7 +3635,7 @@
         "--segmentedcontrol-divider-color": "--border-neutral",
         "--segmentedcontrol-divider-thickness": "--border-width-1",
         "--segmentedcontrol-divider-inset": "--space-6",
-        "--segmentedcontrol-option-padding": "--space-4",
+        "--segmentedcontrol-option-padding": "--space-6",
         "--segmentedcontrol-option-gap": "--space-6",
         "--segmentedcontrol-option-text": "--text-primary",
         "--segmentedcontrol-option-text-font-family": "--font-sans",
@@ -3672,7 +3672,7 @@
         "--segmentedcontrol-bar-small-radius": "--radius-md",
         "--segmentedcontrol-small-divider-inset": "--space-4",
         "--segmentedcontrol-small-divider-thickness": "--border-width-1",
-        "--segmentedcontrol-option-small-padding": "--space-4",
+        "--segmentedcontrol-option-small-padding": "--space-6",
         "--segmentedcontrol-option-small-gap": "--space-4",
         "--segmentedcontrol-option-small-icon-size": "--icon-size-sm",
         "--segmentedcontrol-option-small-text-font-size": "--font-size-sm",
@@ -3684,7 +3684,7 @@
       "name": "midnight-study",
       "component": "sidenavigation",
       "createdAt": "2026-05-25T19:34:09.771Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--sidenavigation-panel-surface": "--surface-canvas-lower",
         "--sidenavigation-panel-border": "--border-canvas-faint",
@@ -3776,7 +3776,7 @@
         "--sidenavigation-section-active-text-font-weight": "--font-weight-medium",
         "--sidenavigation-section-active-text-line-height": "--line-height-normal",
         "--sidenavigation-item-default-surface": "--color-transparent",
-        "--sidenavigation-item-default-padding": "--space-4",
+        "--sidenavigation-item-default-padding": "--space-6",
         "--sidenavigation-item-default-accent": "--color-transparent",
         "--sidenavigation-item-default-accent-width": "--border-width-3",
         "--sidenavigation-item-default-text": "--text-tertiary",
@@ -3785,7 +3785,7 @@
         "--sidenavigation-item-default-text-font-weight": "--font-weight-semibold",
         "--sidenavigation-item-default-text-line-height": "--line-height-normal",
         "--sidenavigation-item-hover-surface": "--surface-canvas",
-        "--sidenavigation-item-hover-padding": "--space-4",
+        "--sidenavigation-item-hover-padding": "--space-6",
         "--sidenavigation-item-hover-accent": "--color-transparent",
         "--sidenavigation-item-hover-accent-width": "--border-width-3",
         "--sidenavigation-item-hover-text": "--text-secondary",
@@ -3794,7 +3794,7 @@
         "--sidenavigation-item-hover-text-font-weight": "--font-weight-light",
         "--sidenavigation-item-hover-text-line-height": "--line-height-normal",
         "--sidenavigation-item-active-surface": "--surface-canvas-low",
-        "--sidenavigation-item-active-padding": "--space-4",
+        "--sidenavigation-item-active-padding": "--space-6",
         "--sidenavigation-item-active-accent": "--border-brand-medium",
         "--sidenavigation-item-active-accent-width": "--border-width-3",
         "--sidenavigation-item-active-text": "--text-primary",
@@ -3803,7 +3803,7 @@
         "--sidenavigation-item-active-text-font-weight": "--font-weight-normal",
         "--sidenavigation-item-active-text-line-height": "--line-height-normal",
         "--sidenavigation-footer-default-surface": "--color-transparent",
-        "--sidenavigation-footer-default-padding": "--space-4",
+        "--sidenavigation-footer-default-padding": "--space-6",
         "--sidenavigation-footer-default-gap": "--space-6",
         "--sidenavigation-footer-default-accent": "--color-transparent",
         "--sidenavigation-footer-default-accent-width": "--border-width-3",
@@ -3815,7 +3815,7 @@
         "--sidenavigation-footer-default-text-font-weight": "--font-weight-light",
         "--sidenavigation-footer-default-text-line-height": "--line-height-normal",
         "--sidenavigation-footer-hover-surface": "--surface-canvas",
-        "--sidenavigation-footer-hover-padding": "--space-4",
+        "--sidenavigation-footer-hover-padding": "--space-6",
         "--sidenavigation-footer-hover-gap": "--space-6",
         "--sidenavigation-footer-hover-accent": "--color-transparent",
         "--sidenavigation-footer-hover-accent-width": "--border-width-3",
@@ -3827,7 +3827,7 @@
         "--sidenavigation-footer-hover-text-font-weight": "--font-weight-light",
         "--sidenavigation-footer-hover-text-line-height": "--line-height-normal",
         "--sidenavigation-footer-active-surface": "--surface-canvas-low",
-        "--sidenavigation-footer-active-padding": "--space-4",
+        "--sidenavigation-footer-active-padding": "--space-6",
         "--sidenavigation-footer-active-gap": "--space-6",
         "--sidenavigation-footer-active-accent": "--border-brand-medium",
         "--sidenavigation-footer-active-accent-width": "--border-width-3",
@@ -3844,7 +3844,7 @@
       "name": "midnight-study",
       "component": "tabbar",
       "createdAt": "2026-05-12T01:57:26.390Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--tabbar-bar-divider": "--border-neutral-subtle",
         "--tabbar-bar-divider-thickness": "--border-width-1",
@@ -3858,7 +3858,7 @@
         "--tabbar-default-text-font-weight": "--font-weight-light",
         "--tabbar-default-text-line-height": "--line-height-normal",
         "--tabbar-default-icon-size": "--icon-size-md",
-        "--tabbar-default-padding": "--space-4",
+        "--tabbar-default-padding": "--space-6",
         "--tabbar-default-border": "--color-transparent",
         "--tabbar-default-surface": "--color-transparent",
         "--tabbar-default-tab-border-color": "--color-transparent",
@@ -3873,7 +3873,7 @@
         "--tabbar-hover-text-font-weight": "--font-weight-light",
         "--tabbar-hover-text-line-height": "--line-height-normal",
         "--tabbar-hover-icon-size": "--icon-size-md",
-        "--tabbar-hover-padding": "--space-4",
+        "--tabbar-hover-padding": "--space-6",
         "--tabbar-hover-border": "--color-transparent",
         "--tabbar-hover-tab-border-color": "--color-transparent",
         "--tabbar-hover-tab-border-width": "--border-width-0",
@@ -3888,7 +3888,7 @@
         "--tabbar-active-text-font-weight": "--font-weight-light",
         "--tabbar-active-text-line-height": "--line-height-normal",
         "--tabbar-active-icon-size": "--icon-size-md",
-        "--tabbar-active-padding": "--space-4",
+        "--tabbar-active-padding": "--space-6",
         "--tabbar-active-tab-border-color": "--color-transparent",
         "--tabbar-active-tab-border-width": "--border-width-0",
         "--tabbar-active-tab-top-radius": "--radius-none",
@@ -3900,7 +3900,7 @@
         "--tabbar-disabled-text-font-weight": "--font-weight-light",
         "--tabbar-disabled-text-line-height": "--line-height-normal",
         "--tabbar-disabled-icon-size": "--icon-size-md",
-        "--tabbar-disabled-padding": "--space-4",
+        "--tabbar-disabled-padding": "--space-6",
         "--tabbar-disabled-border": "--color-transparent",
         "--tabbar-disabled-surface": "--color-transparent",
         "--tabbar-disabled-tab-border-color": "--color-transparent",
@@ -3980,7 +3980,7 @@
       "name": "midnight-study",
       "component": "tooltip",
       "createdAt": "2026-04-18T02:43:11.333Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--tooltip-surface": "color-mix(in srgb, var(--surface-canvas-lowest) 75%, transparent)",
         "--tooltip-text": "--text-primary",
@@ -3991,10 +3991,10 @@
         "--tooltip-border": "--border-neutral",
         "--tooltip-border-width": "--border-width-1",
         "--tooltip-radius": "--radius-md",
-        "--tooltip-padding": "--space-4",
+        "--tooltip-padding": "--space-6",
         "--tooltip-shadow": "--shadow-md"
       }
     }
   },
   "componentSchemaVersion": 21
-}
+}

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.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 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)"
     },
     "fontSources": [
       {

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.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 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)"
     },
     "fontSources": [
       {

package/src/system/components/FloatingTokenTags.css

@@ -1,13 +1,15 @@
 /*
  * Decoupled from the design system: pills, knots, strings, balls, and
  * animations are hardcoded so token edits don't repaint our chrome. The
- * two exceptions are intentional and ARE the demo: the central box's
- * surface/radius/border (set inline) and the dropdown (rendered through
- * <MenuSelect>). File is global; keep selectors `ftt-` prefixed.
+ * 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.
+ * File is global; keep selectors `ftt-` prefixed.
  */
 
 .ftt-stage {
   --ftt-contrast-color: var(--color-white);
+  --ftt-string-opacity: 0.5;
   position: relative;
   width: 100%;
   height: 100%;
@@ -34,7 +36,7 @@
   border-color: #52726e;
   border-width: 2px;
   border-radius: 0.25rem;
-  box-shadow: 3px 3px 6px 0px hsla(237, 18%, 3%, 0.9);
+  box-shadow: var(--shadow-md);
   transition:
     background    300ms ease,
     border-color  300ms ease,
@@ -78,7 +80,7 @@
   stroke-width: 2;
   stroke-linecap: round;
   vector-effect: non-scaling-stroke;
-  opacity: 0.5;
+  opacity: var(--ftt-string-opacity);
   transition: opacity 150ms ease, stroke 150ms ease;
 }
 
@@ -177,17 +179,20 @@
   align-items: center;
   gap: 0.25rem;
   padding: 0.375rem 0.75rem;
-  /* Darkest stop stays ≥ #8f9090 so black text keeps ~6:1 AA contrast. */
+  /* Polished chrome, not brushed steel: the bands keep their spacing but sit
+     high in the scale, so the pill stays bright against a cream page. Keep
+     the darkest stop ≥ #8f9090 or the black label loses AA. */
   background: linear-gradient(
     135deg,
-    #e4e5e5 0%,
-    #a2a3a3 38%,
-    #cdcece 62%,
-    #8f9090 100%
+    #fbfbfb 0%,
+    #c9cbcb 38%,
+    #eff0f0 62%,
+    #b6b8b8 100%
   );
   color: #000;
-  border: 1px solid rgba(255, 255, 255, 0.55);
+  border: 1px solid rgba(86, 96, 104, 0.45);
   border-radius: 9999px;
+  box-shadow: var(--shadow-md);
   font-family: Manrope, system-ui, -apple-system, sans-serif;
   font-size: 0.875rem;
   font-weight: 600;