@motion-proto/live-tokens 0.67.1 → 0.69.0

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",
@@ -2250,12 +2250,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)",
@@ -2641,6 +2641,9 @@
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--button-hover-tint": "--tint",
+        "--button-hover-tint-enabled": "--color-transparent",
+        "--button-shimmer": "--shimmer-on",
         "--button-primary-surface": "--surface-brand",
         "--button-primary-text": "--text-primary",
         "--button-primary-text-font-family": "--font-sans",
@@ -2688,7 +2691,7 @@
         "--button-outline-hover-surface": "--surface-neutral-lower",
         "--button-outline-hover-text": "--text-primary",
         "--button-outline-hover-border": "--border-neutral-strong",
-        "--button-outline-active-surface": "--hover",
+        "--button-outline-active-surface": "--tint",
         "--button-outline-disabled-surface": "--color-transparent",
         "--button-outline-disabled-text": "--text-tertiary",
         "--button-outline-disabled-border": "--border-neutral-faint",
@@ -2860,8 +2863,8 @@
         "--card-default-body-line-height": "--line-height-normal",
         "--card-hover-border": "--border-neutral-strong",
         "--card-hover-shadow": "--shadow-md",
-        "--card-hover-border-active": "--card-default-border",
-        "--card-hover-shadow-active": "--card-default-shadow"
+        "--card-hover-border-enabled": "--card-default-border",
+        "--card-hover-shadow-enabled": "--card-default-shadow"
       }
     },
     "codesnippet": {
@@ -3015,7 +3018,7 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-overlay-surface": "--overlay-high",
+        "--dialog-scrim-surface": "--scrim-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-2",
@@ -3050,6 +3053,8 @@
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--iconbutton-hover-tint": "--tint",
+        "--iconbutton-hover-tint-enabled": "--color-transparent",
         "--iconbutton-primary-surface": "--surface-brand",
         "--iconbutton-primary-icon": "--text-primary",
         "--iconbutton-primary-border": "--border-brand",
@@ -3086,7 +3091,7 @@
         "--iconbutton-outline-hover-surface": "--surface-neutral-lower",
         "--iconbutton-outline-hover-icon": "--text-primary",
         "--iconbutton-outline-hover-border": "--border-neutral-strong",
-        "--iconbutton-outline-active-surface": "--hover",
+        "--iconbutton-outline-active-surface": "--tint",
         "--iconbutton-outline-disabled-surface": "--color-transparent",
         "--iconbutton-outline-disabled-icon": "--text-tertiary",
         "--iconbutton-outline-disabled-border": "--border-neutral-faint",
@@ -3266,6 +3271,8 @@
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--menuselect-hover-tint": "--tint",
+        "--menuselect-hover-tint-enabled": "--color-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",
@@ -3584,6 +3591,8 @@
       "createdAt": "2026-04-28T21:13:17.669Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--segmentedcontrol-hover-tint": "--tint",
+        "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
         "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
         "--segmentedcontrol-bar-border": "--border-neutral",
         "--segmentedcontrol-bar-border-width": "--border-width-1",
@@ -3644,6 +3653,8 @@
       "createdAt": "2026-05-25T19:34:09.771Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--sidenavigation-hover-tint": "--tint",
+        "--sidenavigation-hover-tint-enabled": "--color-transparent",
         "--sidenavigation-panel-surface": "--surface-canvas-lower",
         "--sidenavigation-panel-border": "--border-canvas-faint",
         "--sidenavigation-panel-border-width": "--border-width-1",
@@ -3804,6 +3815,8 @@
       "createdAt": "2026-05-12T01:57:26.390Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--tabbar-hover-tint": "--tint",
+        "--tabbar-hover-tint-enabled": "--color-transparent",
         "--tabbar-bar-divider": "--border-neutral-subtle",
         "--tabbar-bar-divider-thickness": "--border-width-1",
         "--tabbar-bar-top-margin": "--space-4",
@@ -3840,7 +3853,7 @@
         "--tabbar-hover-indicator-border-width": "--border-width-2",
         "--tabbar-active-text": "--text-primary",
         "--tabbar-active-border": "--color-brand-500",
-        "--tabbar-active-surface": "--overlay-low",
+        "--tabbar-active-surface": "--tint-low",
         "--tabbar-active-text-font-family": "--font-sans",
         "--tabbar-active-text-font-size": "--font-size-md",
         "--tabbar-active-text-font-weight": "--font-weight-light",
@@ -3952,7 +3965,62 @@
         "--tooltip-padding": "--space-10",
         "--tooltip-shadow": "--shadow-md"
       }
+    },
+    "slider": {
+      "name": "spring-meadow",
+      "component": "slider",
+      "createdAt": "2026-09-02T10:55:50.831Z",
+      "updatedAt": "2026-09-02T10:55:50.831Z",
+      "aliases": {
+        "--slider-single-track-surface": "--surface-neutral-lowest",
+        "--slider-single-track-border": "--border-neutral-subtle",
+        "--slider-single-track-border-width": "--border-width-1",
+        "--slider-single-track-height": "--space-8",
+        "--slider-single-track-radius": "--radius-full",
+        "--slider-single-fill": "--surface-brand-high",
+        "--slider-single-thumb-surface": "--surface-neutral-highest",
+        "--slider-single-thumb-border": "--border-brand",
+        "--slider-single-thumb-border-width": "--border-width-2",
+        "--slider-single-thumb-size": "--font-size-lg",
+        "--slider-single-thumb-radius": "--radius-full",
+        "--slider-single-thumb-shadow": "--shadow-sm",
+        "--slider-single-hover-thumb-surface": "--surface-brand-high",
+        "--slider-single-hover-thumb-border": "--border-brand-strong",
+        "--slider-single-disabled-track-surface": "--surface-neutral-lower",
+        "--slider-single-disabled-fill": "--surface-neutral",
+        "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
+        "--slider-single-disabled-thumb-border": "--border-neutral",
+        "--slider-range-track-surface": "--surface-neutral-lowest",
+        "--slider-range-track-border": "--border-neutral-subtle",
+        "--slider-range-track-border-width": "--border-width-1",
+        "--slider-range-track-height": "--space-8",
+        "--slider-range-track-radius": "--radius-full",
+        "--slider-range-fill": "--surface-brand-high",
+        "--slider-range-thumb-surface": "--surface-neutral-highest",
+        "--slider-range-thumb-border": "--border-brand",
+        "--slider-range-thumb-border-width": "--border-width-2",
+        "--slider-range-thumb-size": "--font-size-lg",
+        "--slider-range-thumb-radius": "--radius-full",
+        "--slider-range-thumb-shadow": "--shadow-sm",
+        "--slider-range-hover-thumb-surface": "--surface-brand-high",
+        "--slider-range-hover-thumb-border": "--border-brand-strong",
+        "--slider-range-disabled-track-surface": "--surface-neutral-lower",
+        "--slider-range-disabled-fill": "--surface-neutral",
+        "--slider-range-disabled-thumb-surface": "--surface-neutral-lower",
+        "--slider-range-disabled-thumb-border": "--border-neutral",
+        "--slider-label-gap": "--space-6",
+        "--slider-label": "--text-secondary",
+        "--slider-label-font-family": "--font-sans",
+        "--slider-label-font-size": "--font-size-md",
+        "--slider-label-font-weight": "--font-weight-normal",
+        "--slider-label-line-height": "--line-height-normal",
+        "--slider-value": "--text-tertiary",
+        "--slider-value-font-family": "--font-mono",
+        "--slider-value-font-size": "--font-size-md",
+        "--slider-value-font-weight": "--font-weight-normal",
+        "--slider-value-line-height": "--line-height-normal"
+      }
     }
   },
-  "componentSchemaVersion": 21
+  "componentSchemaVersion": 25
 }

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",
@@ -2311,12 +2311,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)",
@@ -2693,6 +2693,9 @@
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--button-hover-tint": "--tint",
+        "--button-hover-tint-enabled": "--color-transparent",
+        "--button-shimmer": "--shimmer-on",
         "--button-primary-surface": "--surface-brand",
         "--button-primary-text": "--text-primary",
         "--button-primary-text-font-family": "--font-sans",
@@ -2740,7 +2743,7 @@
         "--button-outline-hover-surface": "--surface-neutral-lower",
         "--button-outline-hover-text": "--text-primary",
         "--button-outline-hover-border": "--border-neutral-strong",
-        "--button-outline-active-surface": "--hover",
+        "--button-outline-active-surface": "--tint",
         "--button-outline-disabled-surface": "--color-transparent",
         "--button-outline-disabled-text": "--text-tertiary",
         "--button-outline-disabled-border": "--border-neutral-faint",
@@ -2912,8 +2915,8 @@
         "--card-default-body-line-height": "--line-height-normal",
         "--card-hover-border": "--border-neutral-strong",
         "--card-hover-shadow": "--shadow-md",
-        "--card-hover-border-active": "--card-default-border",
-        "--card-hover-shadow-active": "--card-default-shadow"
+        "--card-hover-border-enabled": "--card-default-border",
+        "--card-hover-shadow-enabled": "--card-default-shadow"
       }
     },
     "codesnippet": {
@@ -3067,7 +3070,7 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-overlay-surface": "--overlay-high",
+        "--dialog-scrim-surface": "--scrim-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-2",
@@ -3102,6 +3105,8 @@
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--iconbutton-hover-tint": "--tint",
+        "--iconbutton-hover-tint-enabled": "--color-transparent",
         "--iconbutton-primary-surface": "--surface-brand",
         "--iconbutton-primary-icon": "--text-primary",
         "--iconbutton-primary-border": "--border-brand",
@@ -3138,7 +3143,7 @@
         "--iconbutton-outline-hover-surface": "--surface-neutral-lower",
         "--iconbutton-outline-hover-icon": "--text-primary",
         "--iconbutton-outline-hover-border": "--border-neutral-strong",
-        "--iconbutton-outline-active-surface": "--hover",
+        "--iconbutton-outline-active-surface": "--tint",
         "--iconbutton-outline-disabled-surface": "--color-transparent",
         "--iconbutton-outline-disabled-icon": "--text-tertiary",
         "--iconbutton-outline-disabled-border": "--border-neutral-faint",
@@ -3318,6 +3323,8 @@
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--menuselect-hover-tint": "--tint",
+        "--menuselect-hover-tint-enabled": "--color-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",
@@ -3636,6 +3643,8 @@
       "createdAt": "2026-04-28T21:13:17.669Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--segmentedcontrol-hover-tint": "--tint",
+        "--segmentedcontrol-hover-tint-enabled": "--color-transparent",
         "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
         "--segmentedcontrol-bar-border": "--border-neutral",
         "--segmentedcontrol-bar-border-width": "--border-width-1",
@@ -3696,6 +3705,8 @@
       "createdAt": "2026-05-25T19:34:09.771Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--sidenavigation-hover-tint": "--tint",
+        "--sidenavigation-hover-tint-enabled": "--color-transparent",
         "--sidenavigation-panel-surface": "--surface-canvas-lower",
         "--sidenavigation-panel-border": "--border-canvas-faint",
         "--sidenavigation-panel-border-width": "--border-width-1",
@@ -3856,6 +3867,8 @@
       "createdAt": "2026-05-12T01:57:26.390Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
+        "--tabbar-hover-tint": "--tint",
+        "--tabbar-hover-tint-enabled": "--color-transparent",
         "--tabbar-bar-divider": "--border-neutral-subtle",
         "--tabbar-bar-divider-thickness": "--border-width-1",
         "--tabbar-bar-top-margin": "--space-2",
@@ -3892,7 +3905,7 @@
         "--tabbar-hover-indicator-border-width": "--border-width-2",
         "--tabbar-active-text": "--text-primary",
         "--tabbar-active-border": "--color-brand-500",
-        "--tabbar-active-surface": "--overlay-low",
+        "--tabbar-active-surface": "--tint-low",
         "--tabbar-active-text-font-family": "--font-sans",
         "--tabbar-active-text-font-size": "--font-size-md",
         "--tabbar-active-text-font-weight": "--font-weight-light",
@@ -4004,7 +4017,62 @@
         "--tooltip-padding": "--space-8",
         "--tooltip-shadow": "--shadow-md"
       }
+    },
+    "slider": {
+      "name": "sunset",
+      "component": "slider",
+      "createdAt": "2026-09-02T10:55:50.831Z",
+      "updatedAt": "2026-09-02T10:55:50.831Z",
+      "aliases": {
+        "--slider-single-track-surface": "--surface-neutral-lowest",
+        "--slider-single-track-border": "--border-neutral-subtle",
+        "--slider-single-track-border-width": "--border-width-1",
+        "--slider-single-track-height": "--space-8",
+        "--slider-single-track-radius": "--radius-full",
+        "--slider-single-fill": "--surface-brand-high",
+        "--slider-single-thumb-surface": "--surface-neutral-highest",
+        "--slider-single-thumb-border": "--border-brand",
+        "--slider-single-thumb-border-width": "--border-width-2",
+        "--slider-single-thumb-size": "--font-size-lg",
+        "--slider-single-thumb-radius": "--radius-full",
+        "--slider-single-thumb-shadow": "--shadow-sm",
+        "--slider-single-hover-thumb-surface": "--surface-brand-high",
+        "--slider-single-hover-thumb-border": "--border-brand-strong",
+        "--slider-single-disabled-track-surface": "--surface-neutral-lower",
+        "--slider-single-disabled-fill": "--surface-neutral",
+        "--slider-single-disabled-thumb-surface": "--surface-neutral-lower",
+        "--slider-single-disabled-thumb-border": "--border-neutral",
+        "--slider-range-track-surface": "--surface-neutral-lowest",
+        "--slider-range-track-border": "--border-neutral-subtle",
+        "--slider-range-track-border-width": "--border-width-1",
+        "--slider-range-track-height": "--space-8",
+        "--slider-range-track-radius": "--radius-full",
+        "--slider-range-fill": "--surface-brand-high",
+        "--slider-range-thumb-surface": "--surface-neutral-highest",
+        "--slider-range-thumb-border": "--border-brand",
+        "--slider-range-thumb-border-width": "--border-width-2",
+        "--slider-range-thumb-size": "--font-size-lg",
+        "--slider-range-thumb-radius": "--radius-full",
+        "--slider-range-thumb-shadow": "--shadow-sm",
+        "--slider-range-hover-thumb-surface": "--surface-brand-high",
+        "--slider-range-hover-thumb-border": "--border-brand-strong",
+        "--slider-range-disabled-track-surface": "--surface-neutral-lower",
+        "--slider-range-disabled-fill": "--surface-neutral",
+        "--slider-range-disabled-thumb-surface": "--surface-neutral-lower",
+        "--slider-range-disabled-thumb-border": "--border-neutral",
+        "--slider-label-gap": "--space-6",
+        "--slider-label": "--text-secondary",
+        "--slider-label-font-family": "--font-sans",
+        "--slider-label-font-size": "--font-size-md",
+        "--slider-label-font-weight": "--font-weight-normal",
+        "--slider-label-line-height": "--line-height-normal",
+        "--slider-value": "--text-tertiary",
+        "--slider-value-font-family": "--font-mono",
+        "--slider-value-font-size": "--font-size-md",
+        "--slider-value-font-weight": "--font-weight-normal",
+        "--slider-value-line-height": "--line-height-normal"
+      }
     }
   },
-  "componentSchemaVersion": 21
+  "componentSchemaVersion": 25
 }

package/src/live-tokens/data/tokens.generated.css

@@ -47,12 +47,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/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/Button.svelte

@@ -2,6 +2,9 @@
    import { createEventDispatcher } from 'svelte';
 
    interface Props {
+    /** Wash the hovered surface with the theme's tint. `undefined` inherits the
+        global default; `true`/`false` force this instance on/off. */
+    hoverTint?: boolean | undefined;
       disabled?: boolean;
       type?: 'button' | 'submit' | 'reset';
       variant?: 'primary' | 'secondary' | 'outline' | 'success' | 'danger' | 'warning';
@@ -19,6 +22,7 @@
    }
 
    let {
+    hoverTint = undefined,
       disabled = false,
       type = 'button',
       variant = 'primary',
@@ -34,6 +38,11 @@
       children
    }: Props = $props();
 
+  // Per-instance override of the global hover-tint intrinsic; undefined leaves :root in charge.
+  let hoverTintValue = $derived(
+    hoverTint === undefined ? undefined : hoverTint ? 'var(--button-hover-tint)' : 'var(--color-transparent)',
+  );
+
    // Dual-fire bridge: keeps Svelte-4-style `<Button on:click={fn}>` consumers
    // working until 0.6.0. Remove the dispatcher and this comment in 0.6.0.
    const dispatch = createEventDispatcher();
@@ -47,6 +56,7 @@
 </script>
 
 <button
+  style:--button-hover-tint-enabled={hoverTintValue}
    bind:this={buttonRef}
    {type}
    class="button {variant} {className}"
@@ -70,8 +80,15 @@
    @use '../styles/padding' as *;
 
    :global(:root) {
-      /* Shared — set to `none` to disable the hover shimmer sweep */
-      --button-shimmer: block;
+     /* Hover tint: an optional wash over the hovered surface, one stop for the
+        whole component. Off by default. Turning it on is one switch that moves
+        both gates: the tint gate takes the tint, and the swap gate falls back to
+        each variant's own base surface, so the tint owns hover on its own. */
+     --button-hover-tint: var(--tint);
+     --button-hover-tint-enabled: var(--color-transparent);
+
+      /* Shared — the shimmer sweep's display, gated by the editor's switch. */
+      --button-shimmer: var(--shimmer-on);
 
       /* Primary */
       --button-primary-surface: var(--surface-brand);
@@ -125,7 +142,7 @@
       --button-outline-hover-surface: var(--surface-neutral-lower);
       --button-outline-hover-text: var(--text-primary);
       --button-outline-hover-border: var(--border-neutral-strong);
-      --button-outline-active-surface: var(--hover);
+      --button-outline-active-surface: var(--surface-neutral-low);
       --button-outline-disabled-surface: var(--color-transparent);
       --button-outline-disabled-text: var(--text-tertiary);
       --button-outline-disabled-border: var(--border-neutral-faint);
@@ -233,6 +250,7 @@
 
       &:hover:not(:disabled),
       &.force-hover:not(:disabled) {
+         background-image: linear-gradient(var(--button-hover-tint-enabled), var(--button-hover-tint-enabled));
          transform: translateY(-0.0625rem);
          box-shadow: var(--shadow-md);
       }
@@ -271,7 +289,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--button-primary-hover-surface);
+            background-color: var(--button-primary-hover-surface);
             border-color: var(--button-primary-hover-border);
             color: var(--button-primary-hover-text);
          }
@@ -309,7 +327,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--button-secondary-hover-surface);
+            background-color: var(--button-secondary-hover-surface);
             border-color: var(--button-secondary-hover-border);
             color: var(--button-secondary-hover-text);
          }
@@ -343,7 +361,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--button-outline-hover-surface);
+            background-color: var(--button-outline-hover-surface);
             border-color: var(--button-outline-hover-border);
             color: var(--button-outline-hover-text);
          }
@@ -382,7 +400,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--button-success-hover-surface);
+            background-color: var(--button-success-hover-surface);
             border-color: var(--button-success-hover-border);
             color: var(--button-success-hover-text);
          }
@@ -416,7 +434,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--button-danger-hover-surface);
+            background-color: var(--button-danger-hover-surface);
             border-color: var(--button-danger-hover-border);
             color: var(--button-danger-hover-text);
          }
@@ -450,7 +468,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--button-warning-hover-surface);
+            background-color: var(--button-warning-hover-surface);
             border-color: var(--button-warning-hover-border);
             color: var(--button-warning-hover-text);
          }
@@ -498,7 +516,7 @@
          font-size: var(--font-size-sm);
          opacity: 0.9;
          padding: var(--space-2) var(--space-6);
-         background: var(--overlay-low);
+         background: var(--tint-low);
          border-radius: var(--radius-sm);
          margin-left: var(--space-4);
       }

package/src/system/components/Card.svelte

@@ -54,8 +54,8 @@
   class:bare={variant === 'bare'}
   class:compact={size === 'compact'}
   style:--card-color={iconColor}
-  style:--card-hover-border-active={hoverBorder}
-  style:--card-hover-shadow-active={hoverShadow}
+  style:--card-hover-border-enabled={hoverBorder}
+  style:--card-hover-shadow-enabled={hoverShadow}
 >
   {#if showHeader}
     <div class="card-header">
@@ -121,8 +121,8 @@
     /* Global "Use hover" intrinsic: the active hover values default to the resting
        tokens (hover off). The editor checkbox / a per-instance `hover` prop swap
        these to the `--card-hover-*` tokens to turn hover on. */
-    --card-hover-border-active: var(--card-default-border);
-    --card-hover-shadow-active: var(--card-default-shadow);
+    --card-hover-border-enabled: var(--card-default-border);
+    --card-hover-shadow-enabled: var(--card-default-shadow);
   }
 
   .card {
@@ -138,8 +138,8 @@
   }
 
   .card:hover {
-    border-color: var(--card-hover-border-active);
-    box-shadow: var(--card-hover-shadow-active);
+    border-color: var(--card-hover-border-enabled);
+    box-shadow: var(--card-hover-shadow-enabled);
   }
 
   /* Editor preview hook: paint hover tokens directly, ignoring the on/off gate. */

package/src/system/components/Dialog.svelte

@@ -166,8 +166,8 @@
 
 <style>
   :global(:root) {
-    /* Overlay */
-    --dialog-overlay-surface: var(--overlay-high);
+    /* Scrim */
+    --dialog-scrim-surface: var(--scrim-high);
 
     /* Dialog frame */
     --dialog-surface: var(--surface-neutral-lowest);
@@ -214,7 +214,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--dialog-overlay-surface);
+    background: var(--dialog-scrim-surface);
     display: flex;
     justify-content: center;
     align-items: center;