@motion-proto/live-tokens 0.68.1 → 0.69.0

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;

package/src/system/components/IconButton.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
    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';
@@ -14,6 +17,7 @@
    }
 
    let {
+    hoverTint = undefined,
       disabled = false,
       type = 'button',
       variant = 'primary',
@@ -26,12 +30,18 @@
       onclick
    }: Props = $props();
 
+  // Per-instance override of the global hover-tint intrinsic; undefined leaves :root in charge.
+  let hoverTintValue = $derived(
+    hoverTint === undefined ? undefined : hoverTint ? 'var(--iconbutton-hover-tint)' : 'var(--color-transparent)',
+  );
+
    function handleClick(event: MouseEvent) {
       if (!disabled) onclick?.(event);
    }
 </script>
 
 <button
+  style:--iconbutton-hover-tint-enabled={hoverTintValue}
    bind:this={buttonRef}
    {type}
    class="icon-button {variant} {className}"
@@ -48,6 +58,11 @@
    @use '../styles/padding' as *;
 
    :global(:root) {
+     /* Hover tint: an optional wash over the hovered surface, one stop for the
+        whole component. Off by default; the gate holds the tint when enabled. */
+     --iconbutton-hover-tint: var(--tint);
+     --iconbutton-hover-tint-enabled: var(--color-transparent);
+
       /* Primary */
       --iconbutton-primary-surface: var(--surface-brand);
       --iconbutton-primary-icon: var(--text-primary);
@@ -89,7 +104,7 @@
       --iconbutton-outline-hover-surface: var(--surface-neutral-lower);
       --iconbutton-outline-hover-icon: var(--text-primary);
       --iconbutton-outline-hover-border: var(--border-neutral-strong);
-      --iconbutton-outline-active-surface: var(--hover);
+      --iconbutton-outline-active-surface: var(--surface-neutral-low);
       --iconbutton-outline-disabled-surface: var(--color-transparent);
       --iconbutton-outline-disabled-icon: var(--text-tertiary);
       --iconbutton-outline-disabled-border: var(--border-neutral-faint);
@@ -154,6 +169,7 @@
 
       &:hover:not(:disabled),
       &.force-hover:not(:disabled) {
+         background-image: linear-gradient(var(--iconbutton-hover-tint-enabled), var(--iconbutton-hover-tint-enabled));
          transform: translateY(-0.0625rem);
          box-shadow: var(--shadow-md);
       }
@@ -176,7 +192,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--iconbutton-primary-hover-surface);
+            background-color: var(--iconbutton-primary-hover-surface);
             border-color: var(--iconbutton-primary-hover-border);
             color: var(--iconbutton-primary-hover-icon);
          }
@@ -202,7 +218,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--iconbutton-secondary-hover-surface);
+            background-color: var(--iconbutton-secondary-hover-surface);
             border-color: var(--iconbutton-secondary-hover-border);
             color: var(--iconbutton-secondary-hover-icon);
          }
@@ -224,7 +240,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--iconbutton-outline-hover-surface);
+            background-color: var(--iconbutton-outline-hover-surface);
             border-color: var(--iconbutton-outline-hover-border);
             color: var(--iconbutton-outline-hover-icon);
          }
@@ -251,7 +267,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--iconbutton-success-hover-surface);
+            background-color: var(--iconbutton-success-hover-surface);
             border-color: var(--iconbutton-success-hover-border);
             color: var(--iconbutton-success-hover-icon);
          }
@@ -273,7 +289,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--iconbutton-danger-hover-surface);
+            background-color: var(--iconbutton-danger-hover-surface);
             border-color: var(--iconbutton-danger-hover-border);
             color: var(--iconbutton-danger-hover-icon);
          }
@@ -295,7 +311,7 @@
 
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
-            background: var(--iconbutton-warning-hover-surface);
+            background-color: var(--iconbutton-warning-hover-surface);
             border-color: var(--iconbutton-warning-hover-border);
             color: var(--iconbutton-warning-hover-icon);
          }

package/src/system/components/Image.svelte

@@ -65,8 +65,8 @@
   class="image"
   class:force-hover={forceHover}
   style:height={resolvedHeight}
-  style:--image-zoom-hover={contentHover}
-  style:--image-grow-hover={frameHover}
+  style:--image-zoom-enabled={contentHover}
+  style:--image-grow-enabled={frameHover}
 >
   <img {src} {alt} {srcset} {sizes} {loading} {decoding} />
 </div>
@@ -81,8 +81,8 @@
     /* Hover-scale targets. Contained mode (`overflowScaling`) scales the content within the
        masked frame; grow mode scales the whole frame so it grows past its box. Each is `none`
        (off) or `scale(var(--image-zoom-scale))` (on); only one is ever on at a time. */
-    --image-zoom-hover: none;
-    --image-grow-hover: none;
+    --image-zoom-enabled: none;
+    --image-grow-enabled: none;
   }
 
   .image {
@@ -106,11 +106,11 @@
 
   .image:hover,
   .image.force-hover {
-    transform: var(--image-grow-hover);
+    transform: var(--image-grow-enabled);
   }
 
   .image:hover img,
   .image.force-hover img {
-    transform: var(--image-zoom-hover);
+    transform: var(--image-zoom-enabled);
   }
 </style>

package/src/system/components/MenuSelect.svelte

@@ -9,6 +9,9 @@
   };
 
   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;
     items?: Item[];
     value?: string;
     /** Editor preview: force-hover one item by value. */
@@ -22,6 +25,7 @@
   }
 
   let {
+    hoverTint = undefined,
     items = [],
     value = $bindable(''),
     forceHoverValue = null,
@@ -30,6 +34,11 @@
     onchange,
   }: Props = $props();
 
+  // Per-instance override of the global hover-tint intrinsic; undefined leaves :root in charge.
+  let hoverTintValue = $derived(
+    hoverTint === undefined ? undefined : hoverTint ? 'var(--menuselect-hover-tint)' : 'var(--color-transparent)',
+  );
+
   // Dual-fire bridge — see Button.svelte for the deprecation timeline.
   const dispatch = createEventDispatcher<{ change: string }>();
 
@@ -41,6 +50,7 @@
 </script>
 
 <ul
+  style:--menuselect-hover-tint-enabled={hoverTintValue}
   class="menuselect"
   {role}
   style:min-width={minWidth}
@@ -71,6 +81,11 @@
   @use '../styles/padding' as *;
 
   :global(:root) {
+    /* Hover tint: an optional wash over the hovered surface, one stop for the
+       whole component. Off by default; the gate holds the tint when enabled. */
+    --menuselect-hover-tint: var(--tint);
+    --menuselect-hover-tint-enabled: var(--color-transparent);
+
     /* Menu panel */
     --menuselect-menu-surface: color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent);
     --menuselect-menu-border: var(--border-neutral-medium);
@@ -183,7 +198,8 @@
 
   .menuselect-item:hover:not(:disabled):not(.selected),
   .menuselect-item.force-hover:not(:disabled):not(.selected) {
-    background: var(--menuselect-hover-surface);
+    background-color: var(--menuselect-hover-surface);
+    background-image: linear-gradient(var(--menuselect-hover-tint-enabled), var(--menuselect-hover-tint-enabled));
     color: var(--menuselect-hover-text);
     font-family: var(--menuselect-hover-text-font-family);
     font-size: var(--menuselect-hover-text-font-size);

package/src/system/components/SegmentedControl.svelte

@@ -9,6 +9,9 @@
   };
 
   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;
     segments?: Segment[];
     value?: string;
     disabled?: boolean;
@@ -21,6 +24,7 @@
   }
 
   let {
+    hoverTint = undefined,
     segments = [],
     value = $bindable(''),
     disabled = false,
@@ -29,6 +33,11 @@
     onchange
   }: Props = $props();
 
+  // Per-instance override of the global hover-tint intrinsic; undefined leaves :root in charge.
+  let hoverTintValue = $derived(
+    hoverTint === undefined ? undefined : hoverTint ? 'var(--segmentedcontrol-hover-tint)' : 'var(--color-transparent)',
+  );
+
   // Dual-fire bridge — see Button.svelte for the deprecation timeline.
   const dispatch = createEventDispatcher<{ change: string }>();
 
@@ -39,7 +48,10 @@
   }
 </script>
 
-<div class="segmented-control" class:is-disabled={disabled} class:small={size === 'small'} role="radiogroup">
+<div
+  class="segmented-control" class:is-disabled={disabled} class:small={size === 'small'} role="radiogroup"
+  style:--segmentedcontrol-hover-tint-enabled={hoverTintValue}
+>
   {#each segments as seg, i (seg.value)}
     {#if i > 0}
       <span class="segment-divider" aria-hidden="true"></span>
@@ -64,6 +76,11 @@
   @use '../styles/padding' as *;
 
   :global(:root) {
+    /* Hover tint: an optional wash over the hovered surface, one stop for the
+       whole component. Off by default; the gate holds the tint when enabled. */
+    --segmentedcontrol-hover-tint: var(--tint);
+    --segmentedcontrol-hover-tint-enabled: var(--color-transparent);
+
     /* Bar (outer wrapper) */
     --segmentedcontrol-bar-surface: color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent);
     --segmentedcontrol-bar-border: var(--border-neutral);
@@ -252,13 +269,14 @@
 
   .segment:hover:not(:disabled):not(.selected),
   .segment.force-hover:not(:disabled):not(.selected) {
+    background-image: linear-gradient(var(--segmentedcontrol-hover-tint-enabled), var(--segmentedcontrol-hover-tint-enabled));
     --_text-color: var(--segmentedcontrol-option-hover-text);
     --_text-family: var(--segmentedcontrol-option-hover-text-font-family);
     --_text-size: var(--segmentedcontrol-option-hover-text-font-size);
     --_text-weight: var(--segmentedcontrol-option-hover-text-font-weight);
     --_text-line-height: var(--segmentedcontrol-option-hover-text-line-height);
     --_icon-color: var(--segmentedcontrol-option-hover-icon);
-    background: var(--segmentedcontrol-option-hover-surface);
+    background-color: var(--segmentedcontrol-option-hover-surface);
   }
 
   /* Outline (not border) so the selection ring sits outside the box model.

package/src/system/components/SideNavigation.svelte

@@ -26,6 +26,9 @@
   };
 
   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;
     sections?: SideNavSection[];
     footer?: SideNavFooter | undefined;
     titleLabel?: string;
@@ -51,6 +54,7 @@
   }
 
   let {
+    hoverTint = undefined,
     sections = [],
     footer = undefined,
     titleLabel = '',
@@ -66,6 +70,11 @@
     actions,
   }: Props = $props();
 
+  // Per-instance override of the global hover-tint intrinsic; undefined leaves :root in charge.
+  let hoverTintValue = $derived(
+    hoverTint === undefined ? undefined : hoverTint ? 'var(--sidenavigation-hover-tint)' : 'var(--color-transparent)',
+  );
+
   // Dual-fire bridge — see Button.svelte for the deprecation timeline.
   const dispatch = createEventDispatcher<{ toggle: void }>();
 
@@ -154,6 +163,7 @@
 </script>
 
 <aside
+  style:--sidenavigation-hover-tint-enabled={hoverTintValue}
   class="sidenavigation {className}"
   class:collapsed={!open}
   class:force-title-hover={forceHoverPart === 'title'}
@@ -241,6 +251,11 @@
   @use '../styles/padding' as *;
 
   :global(:root) {
+    /* Hover tint: an optional wash over the hovered surface, one stop for the
+       whole component. Off by default; the gate holds the tint when enabled. */
+    --sidenavigation-hover-tint: var(--tint);
+    --sidenavigation-hover-tint-enabled: var(--color-transparent);
+
     /* Panel — outer chrome + layout. No states. */
     --sidenavigation-panel-surface: var(--surface-canvas-lower);
     --sidenavigation-panel-border: var(--border-canvas-faint);
@@ -249,8 +264,8 @@
     --sidenavigation-panel-section-gap: var(--space-4);
     --sidenavigation-panel-item-padding: var(--space-32);
     --sidenavigation-panel-footer-gap: var(--space-16);
-    --sidenavigation-panel-open-width: 16rem;
-    --sidenavigation-panel-closed-width: 3rem;
+    --sidenavigation-panel-open-width: calc(var(--space-64) * 4);
+    --sidenavigation-panel-closed-width: calc(var(--space-64) * 0.75);
     --sidenavigation-open-duration: var(--duration-200);
     --sidenavigation-open-easing: var(--ease-out-quart);
     --sidenavigation-close-duration: var(--duration-150);
@@ -501,6 +516,7 @@
 
   .sn-title:hover:not(.active),
   .sidenavigation.force-title-hover .sn-title:not(.active) {
+    background-image: linear-gradient(var(--sidenavigation-hover-tint-enabled), var(--sidenavigation-hover-tint-enabled));
     --_surface: var(--sidenavigation-title-hover-surface);
     --_border: var(--sidenavigation-title-hover-border);
     --_border-width: var(--sidenavigation-title-hover-border-width);
@@ -603,6 +619,7 @@
 
   .sn-toggle:hover,
   .sidenavigation.force-toggle-hover .sn-toggle {
+    background-image: linear-gradient(var(--sidenavigation-hover-tint-enabled), var(--sidenavigation-hover-tint-enabled));
     --_surface: var(--sidenavigation-toggle-hover-surface);
     --_border: var(--sidenavigation-toggle-hover-border);
     --_border-width: var(--sidenavigation-toggle-hover-border-width);
@@ -658,6 +675,7 @@
   }
   .sn-section-header:hover:not(.active),
   .sn-section-header.force-hover:not(.active) {
+    background-image: linear-gradient(var(--sidenavigation-hover-tint-enabled), var(--sidenavigation-hover-tint-enabled));
     --_surface: var(--sidenavigation-section-hover-surface);
     --_indicator: var(--sidenavigation-section-hover-accent);
     --_indicator-width: var(--sidenavigation-section-hover-accent-width);
@@ -720,6 +738,7 @@
 
   .sn-item:hover:not(.active),
   .sn-item.force-hover:not(.active) {
+    background-image: linear-gradient(var(--sidenavigation-hover-tint-enabled), var(--sidenavigation-hover-tint-enabled));
     --_surface: var(--sidenavigation-item-hover-surface);
     --_padding: var(--sidenavigation-item-hover-padding);
     --_indicator: var(--sidenavigation-item-hover-accent);
@@ -781,6 +800,7 @@
 
   .sn-footer:hover:not(.active),
   .sidenavigation.force-footer-hover .sn-footer:not(.active) {
+    background-image: linear-gradient(var(--sidenavigation-hover-tint-enabled), var(--sidenavigation-hover-tint-enabled));
     --_surface: var(--sidenavigation-footer-hover-surface);
     --_padding: var(--sidenavigation-footer-hover-padding);
     --_gap: var(--sidenavigation-footer-hover-gap);