@motion-proto/live-tokens 0.6.2 → 0.7.1

package/src/system/components/MenuSelect.svelte

@@ -0,0 +1,229 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  type Item = {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+  };
+
+  interface Props {
+    items?: Item[];
+    value?: string;
+    /** Editor preview: force-hover one item by value. */
+    forceHoverValue?: string | null;
+    /** Min-width of the menu panel, any CSS length. */
+    minWidth?: string;
+    /** ARIA role on the wrapper. `listbox` for select-like menus; `menu` for command menus. */
+    role?: 'listbox' | 'menu';
+    /** Selection callback. */
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    items = [],
+    value = $bindable(''),
+    forceHoverValue = null,
+    minWidth = undefined,
+    role = 'listbox',
+    onchange,
+  }: Props = $props();
+
+  // Dual-fire bridge — see Button.svelte for the deprecation timeline.
+  const dispatch = createEventDispatcher<{ change: string }>();
+
+  function select(v: string) {
+    value = v;
+    onchange?.(v);
+    dispatch('change', v);
+  }
+</script>
+
+<ul
+  class="menuselect"
+  {role}
+  style:min-width={minWidth}
+>
+  {#each items as item (item.value)}
+    <li>
+      <button
+        type="button"
+        class="menuselect-item"
+        class:selected={value === item.value}
+        class:force-hover={forceHoverValue === item.value}
+        disabled={item.disabled}
+        role={role === 'listbox' ? 'option' : 'menuitem'}
+        aria-selected={role === 'listbox' ? value === item.value : undefined}
+        onclick={() => select(item.value)}
+      >
+        {#if item.icon}<i class="menuselect-icon {item.icon}" aria-hidden="true"></i>{/if}
+        <span class="menuselect-label">{item.label}</span>
+        {#if value === item.value}
+          <i class="menuselect-indicator fas fa-check" aria-hidden="true"></i>
+        {/if}
+      </button>
+    </li>
+  {/each}
+</ul>
+
+<style lang="scss">
+  @use '../styles/padding' as *;
+
+  :global(:root) {
+    /* Menu panel */
+    --menuselect-menu-surface: var(--surface-neutral-lower);
+    --menuselect-menu-border: var(--border-neutral-faint);
+    --menuselect-menu-border-width: var(--border-width-1);
+    --menuselect-menu-radius: var(--radius-md);
+    --menuselect-menu-padding: var(--space-4);
+    --menuselect-menu-gap: var(--space-2);
+    --menuselect-menu-shadow: var(--shadow-md);
+
+    /* Item geometry (shared across states — link on by default) */
+    --menuselect-item-radius: var(--radius-sm);
+    --menuselect-item-padding: var(--space-8);
+
+    /* Default item */
+    --menuselect-default-surface: var(--color-transparent);
+    --menuselect-default-text: var(--text-secondary);
+    --menuselect-default-text-font-family: var(--font-sans);
+    --menuselect-default-text-font-size: var(--font-size-sm);
+    --menuselect-default-text-font-weight: var(--font-weight-normal);
+    --menuselect-default-text-line-height: var(--line-height-sm);
+    --menuselect-default-icon: var(--text-tertiary);
+    --menuselect-default-icon-size: var(--icon-size-sm);
+
+    /* Hover item */
+    --menuselect-hover-surface: var(--surface-neutral-higher);
+    --menuselect-hover-text: var(--text-primary);
+    --menuselect-hover-text-font-family: var(--font-sans);
+    --menuselect-hover-text-font-size: var(--font-size-sm);
+    --menuselect-hover-text-font-weight: var(--font-weight-normal);
+    --menuselect-hover-text-line-height: var(--line-height-sm);
+    --menuselect-hover-icon: var(--text-primary);
+    --menuselect-hover-icon-size: var(--icon-size-sm);
+
+    /* Selected item */
+    --menuselect-selected-surface: var(--surface-brand-low);
+    --menuselect-selected-text: var(--text-primary);
+    --menuselect-selected-text-font-family: var(--font-sans);
+    --menuselect-selected-text-font-size: var(--font-size-sm);
+    --menuselect-selected-text-font-weight: var(--font-weight-semibold);
+    --menuselect-selected-text-line-height: var(--line-height-sm);
+    --menuselect-selected-icon: var(--text-brand);
+    --menuselect-selected-icon-size: var(--icon-size-sm);
+    --menuselect-selected-indicator: var(--text-brand);
+
+    /* Disabled item */
+    --menuselect-disabled-surface: var(--color-transparent);
+    --menuselect-disabled-text: var(--text-tertiary);
+    --menuselect-disabled-text-font-family: var(--font-sans);
+    --menuselect-disabled-text-font-size: var(--font-size-sm);
+    --menuselect-disabled-text-font-weight: var(--font-weight-normal);
+    --menuselect-disabled-text-line-height: var(--line-height-sm);
+    --menuselect-disabled-icon: var(--text-tertiary);
+    --menuselect-disabled-icon-size: var(--icon-size-sm);
+  }
+
+  .menuselect {
+    list-style: none;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--menuselect-menu-gap);
+    @include themed-padding(--menuselect-menu-padding);
+    background: var(--menuselect-menu-surface);
+    border: var(--menuselect-menu-border-width) solid var(--menuselect-menu-border);
+    border-radius: var(--menuselect-menu-radius);
+    box-shadow: var(--menuselect-menu-shadow);
+    width: max-content;
+  }
+
+  .menuselect li {
+    display: block;
+  }
+
+  .menuselect-item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: var(--space-8);
+    @include themed-padding(--menuselect-item-padding);
+    background: var(--menuselect-default-surface);
+    border: 0;
+    border-radius: var(--menuselect-item-radius);
+    color: var(--menuselect-default-text);
+    font-family: var(--menuselect-default-text-font-family);
+    font-size: var(--menuselect-default-text-font-size);
+    font-weight: var(--menuselect-default-text-font-weight);
+    line-height: var(--menuselect-default-text-line-height);
+    text-align: left;
+    cursor: pointer;
+    transition: background var(--duration-150), color var(--duration-150);
+  }
+
+  .menuselect-icon {
+    font-size: var(--menuselect-default-icon-size);
+    color: var(--menuselect-default-icon);
+    width: 1em;
+    text-align: center;
+    transition: color var(--duration-150), font-size var(--duration-150);
+  }
+
+  .menuselect-label {
+    flex: 1 1 auto;
+  }
+
+  .menuselect-indicator {
+    margin-left: var(--space-8);
+    color: var(--menuselect-selected-indicator);
+    font-size: var(--menuselect-default-icon-size);
+  }
+
+  .menuselect-item:hover:not(:disabled):not(.selected),
+  .menuselect-item.force-hover:not(:disabled):not(.selected) {
+    background: var(--menuselect-hover-surface);
+    color: var(--menuselect-hover-text);
+    font-family: var(--menuselect-hover-text-font-family);
+    font-size: var(--menuselect-hover-text-font-size);
+    font-weight: var(--menuselect-hover-text-font-weight);
+    line-height: var(--menuselect-hover-text-line-height);
+  }
+
+  .menuselect-item:hover:not(:disabled):not(.selected) .menuselect-icon,
+  .menuselect-item.force-hover:not(:disabled):not(.selected) .menuselect-icon {
+    color: var(--menuselect-hover-icon);
+    font-size: var(--menuselect-hover-icon-size);
+  }
+
+  .menuselect-item.selected {
+    background: var(--menuselect-selected-surface);
+    color: var(--menuselect-selected-text);
+    font-family: var(--menuselect-selected-text-font-family);
+    font-size: var(--menuselect-selected-text-font-size);
+    font-weight: var(--menuselect-selected-text-font-weight);
+    line-height: var(--menuselect-selected-text-line-height);
+  }
+
+  .menuselect-item.selected .menuselect-icon {
+    color: var(--menuselect-selected-icon);
+    font-size: var(--menuselect-selected-icon-size);
+  }
+
+  .menuselect-item:disabled {
+    background: var(--menuselect-disabled-surface);
+    color: var(--menuselect-disabled-text);
+    font-family: var(--menuselect-disabled-text-font-family);
+    font-size: var(--menuselect-disabled-text-font-size);
+    font-weight: var(--menuselect-disabled-text-font-weight);
+    line-height: var(--menuselect-disabled-text-line-height);
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .menuselect-item:disabled .menuselect-icon {
+    color: var(--menuselect-disabled-icon);
+    font-size: var(--menuselect-disabled-icon-size);
+  }
+</style>

package/src/{components → system/components}/ProgressBar.svelte

@@ -3,7 +3,6 @@
     value?: number;
     label?: string;
     variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
-    size?: 'default' | 'compact';
     showIcon?: boolean;
   }
 
@@ -11,7 +10,6 @@
     value = 0,
     label = '',
     variant = 'primary',
-    size = 'default',
     showIcon = true
   }: Props = $props();
 
@@ -19,7 +17,7 @@
   let isComplete = $derived(clampedValue >= 100);
 </script>
 
-<div class="progress {variant}" class:compact={size === 'compact'}>
+<div class="progress {variant}" class:has-label={!!label} class:has-icon={showIcon && isComplete}>
   {#if label}
     <div class="progress-label">
       <span>{label}</span>
@@ -133,28 +131,46 @@
   }
 
   .progress {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-6);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "track";
+    row-gap: var(--space-6);
     width: 100%;
   }
 
+  .progress.has-label {
+    grid-template-areas:
+      "label"
+      "track";
+  }
+
+  .progress.has-icon {
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: var(--space-8);
+    grid-template-areas: "track icon";
+  }
+
+  .progress.has-label.has-icon {
+    grid-template-areas:
+      "label ."
+      "track icon";
+  }
+
   .progress-label {
+    grid-area: label;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
   .progress-track {
+    grid-area: track;
+    align-self: center;
     width: 100%;
     overflow: hidden;
     border-style: solid;
   }
 
-  .compact .progress-track {
-    height: calc(var(--progress-track-height, var(--space-4)) * 0.5);
-  }
-
   .progress-fill {
     height: 100%;
     transition: width 0.4s ease;
@@ -296,8 +312,10 @@
   }
 
   .progress-icon {
+    grid-area: icon;
+    align-self: center;
     color: var(--text-success);
     font-size: var(--icon-size-md);
-    text-align: right;
+    line-height: 1;
   }
 </style>

package/src/{components → system/components}/SegmentedControl.svelte

@@ -126,7 +126,22 @@
     border-radius: var(--segmentedcontrol-bar-radius);
   }
 
+  /* Font + color properties are declared once on `.segment` and rebound per
+     state via the `--_*` custom properties below. State classes only change
+     the bindings; the actual `font-*` declarations never move. When two
+     states resolve to the same final value the computed font is identical
+     and the browser has no reason to re-shape — which is what kept the
+     selected segment shifting by a whole pixel even after the border was
+     swapped for an outline. */
   .segment {
+    --_text-color: var(--segmentedcontrol-option-text);
+    --_text-family: var(--segmentedcontrol-option-text-font-family);
+    --_text-size: var(--segmentedcontrol-option-text-font-size);
+    --_text-weight: var(--segmentedcontrol-option-text-font-weight);
+    --_text-line-height: var(--segmentedcontrol-option-text-line-height);
+    --_icon-color: var(--segmentedcontrol-option-icon);
+    --_icon-size: var(--segmentedcontrol-option-icon-size);
+
     display: inline-flex;
     align-items: center;
     gap: var(--space-8);
@@ -134,19 +149,19 @@
     background: transparent;
     border: 0;
     border-radius: var(--segmentedcontrol-selected-radius);
-    color: var(--segmentedcontrol-option-text);
-    font-family: var(--segmentedcontrol-option-text-font-family);
-    font-size: var(--segmentedcontrol-option-text-font-size);
-    font-weight: var(--segmentedcontrol-option-text-font-weight);
-    line-height: var(--segmentedcontrol-option-text-line-height);
+    color: var(--_text-color);
+    font-family: var(--_text-family);
+    font-size: var(--_text-size);
+    font-weight: var(--_text-weight);
+    line-height: var(--_text-line-height);
     cursor: pointer;
     transition: background var(--duration-150), color var(--duration-150);
     position: relative;
   }
 
   .segment i {
-    font-size: var(--segmentedcontrol-option-icon-size);
-    color: var(--segmentedcontrol-option-icon);
+    font-size: var(--_icon-size);
+    color: var(--_icon-color);
     transition: color var(--duration-150);
   }
 
@@ -166,52 +181,43 @@
 
   .segment:hover:not(:disabled):not(.selected),
   .segment.force-hover:not(:disabled):not(.selected) {
+    --_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);
+    --_icon-size: var(--segmentedcontrol-option-hover-icon-size);
     background: var(--segmentedcontrol-option-hover-surface);
-    color: var(--segmentedcontrol-option-hover-text);
-    font-family: var(--segmentedcontrol-option-hover-text-font-family);
-    font-size: var(--segmentedcontrol-option-hover-text-font-size);
-    font-weight: var(--segmentedcontrol-option-hover-text-font-weight);
-    line-height: var(--segmentedcontrol-option-hover-text-line-height);
-  }
-
-  .segment:hover:not(:disabled):not(.selected) i,
-  .segment.force-hover:not(:disabled):not(.selected) i {
-    color: var(--segmentedcontrol-option-hover-icon);
-    font-size: var(--segmentedcontrol-option-hover-icon-size);
   }
 
+  /* Outline (not border) so the selection ring sits outside the box model.
+     A real border would force a padding compensation calc, and the resulting
+     sub-pixel flex layout would shift the selected segment by a whole pixel
+     against its neighbors. Outline is paint-only and leaves geometry alone. */
   .segment.selected {
+    --_text-color: var(--segmentedcontrol-selected-text);
+    --_text-family: var(--segmentedcontrol-selected-text-font-family);
+    --_text-size: var(--segmentedcontrol-selected-text-font-size);
+    --_text-weight: var(--segmentedcontrol-selected-text-font-weight);
+    --_text-line-height: var(--segmentedcontrol-selected-text-line-height);
+    --_icon-color: var(--segmentedcontrol-selected-icon);
+    --_icon-size: var(--segmentedcontrol-selected-icon-size);
     background: var(--segmentedcontrol-selected-surface);
-    border: var(--segmentedcontrol-selected-border-width) solid var(--segmentedcontrol-selected-border);
-    border-radius: var(--segmentedcontrol-selected-radius);
-    color: var(--segmentedcontrol-selected-text);
-    font-family: var(--segmentedcontrol-selected-text-font-family);
-    font-size: var(--segmentedcontrol-selected-text-font-size);
-    font-weight: var(--segmentedcontrol-selected-text-font-weight);
-    line-height: var(--segmentedcontrol-selected-text-line-height);
-    /* Account for border so the pill doesn't shift adjacent segments */
-    padding: calc(var(--space-6) - var(--segmentedcontrol-selected-border-width))
-      calc(var(--space-16) - var(--segmentedcontrol-selected-border-width));
-  }
-
-  .segment.selected i {
-    color: var(--segmentedcontrol-selected-icon);
-    font-size: var(--segmentedcontrol-selected-icon-size);
+    outline: var(--segmentedcontrol-selected-border-width) solid var(--segmentedcontrol-selected-border);
+    outline-offset: calc(var(--segmentedcontrol-selected-border-width) * -1);
   }
 
   .segment:disabled {
+    --_text-color: var(--segmentedcontrol-disabled-text);
+    --_text-family: var(--segmentedcontrol-disabled-text-font-family);
+    --_text-size: var(--segmentedcontrol-disabled-text-font-size);
+    --_text-weight: var(--segmentedcontrol-disabled-text-font-weight);
+    --_text-line-height: var(--segmentedcontrol-disabled-text-line-height);
+    --_icon-color: var(--segmentedcontrol-disabled-icon);
+    --_icon-size: var(--segmentedcontrol-disabled-icon-size);
     background: var(--segmentedcontrol-disabled-surface);
-    color: var(--segmentedcontrol-disabled-text);
-    font-family: var(--segmentedcontrol-disabled-text-font-family);
-    font-size: var(--segmentedcontrol-disabled-text-font-size);
-    font-weight: var(--segmentedcontrol-disabled-text-font-weight);
-    line-height: var(--segmentedcontrol-disabled-text-line-height);
     opacity: 0.4;
     cursor: not-allowed;
   }
-
-  .segment:disabled i {
-    color: var(--segmentedcontrol-disabled-icon);
-    font-size: var(--segmentedcontrol-disabled-icon-size);
-  }
 </style>

package/src/{components → system/components}/TabBar.svelte

@@ -140,91 +140,107 @@
     margin-bottom: var(--tabbar-bar-bottom-margin);
   }
 
+  /* Per-state tokens are bound to `--_*` custom properties below. The actual
+     layout-affecting declarations (padding, border, border-radius, font-*)
+     are written exactly once on `.tab`, so a hover/active state change can
+     only repaint, not relayout. When two states resolve to the same value,
+     the computed property is identical and no reshape is triggered. The
+     `transition: all` of the old rule has also been narrowed to paint-only
+     properties — otherwise it would try to animate layout changes between
+     states that happen to differ in tokens. */
   .tab {
+    --_text-color: var(--tabbar-default-text);
+    --_text-family: var(--tabbar-default-text-font-family);
+    --_text-size: var(--tabbar-default-text-font-size);
+    --_text-weight: var(--tabbar-default-text-font-weight);
+    --_text-line-height: var(--tabbar-default-text-line-height);
+    --_icon-size: var(--tabbar-default-icon-size);
+    --_surface: var(--tabbar-default-surface);
+    --_indicator-color: var(--tabbar-default-border);
+    --_padding: var(--tabbar-default-padding);
+    --_border-color: var(--tabbar-default-tab-border-color);
+    --_border-width: var(--tabbar-default-tab-border-width);
+    --_top-radius: var(--tabbar-default-tab-top-radius);
+    --_bottom-radius: var(--tabbar-default-tab-bottom-radius);
+
     display: inline-flex;
     align-items: center;
     gap: var(--space-6);
-    @include themed-padding(--tabbar-default-padding, $h: 2);
-    background: var(--tabbar-default-surface);
-    border: var(--tabbar-default-tab-border-width) solid var(--tabbar-default-tab-border-color);
-    /* indicator accent — owns the bottom edge */
-    border-bottom: var(--tabbar-bar-indicator-thickness) solid var(--tabbar-default-border);
-    border-radius: var(--tabbar-default-tab-top-radius) var(--tabbar-default-tab-top-radius) var(--tabbar-default-tab-bottom-radius) var(--tabbar-default-tab-bottom-radius);
-    color: var(--tabbar-default-text);
-    font-family: var(--tabbar-default-text-font-family);
-    font-size: var(--tabbar-default-text-font-size);
-    font-weight: var(--tabbar-default-text-font-weight);
-    line-height: var(--tabbar-default-text-line-height);
+    padding: var(--_padding) calc(var(--_padding) * 2);
+    background: var(--_surface);
+    border: var(--_border-width) solid var(--_border-color);
+    /* Indicator accent owns the bottom edge. Thickness is constant across
+       states (--tabbar-bar-indicator-thickness), only color rebinds. */
+    border-bottom: var(--tabbar-bar-indicator-thickness) solid var(--_indicator-color);
+    border-radius: var(--_top-radius) var(--_top-radius) var(--_bottom-radius) var(--_bottom-radius);
+    color: var(--_text-color);
+    font-family: var(--_text-family);
+    font-size: var(--_text-size);
+    font-weight: var(--_text-weight);
+    line-height: var(--_text-line-height);
     cursor: pointer;
-    transition: all var(--duration-150);
+    transition:
+      background var(--duration-150),
+      color var(--duration-150),
+      border-color var(--duration-150);
     position: relative;
   }
 
+  .tab i {
+    font-size: var(--_icon-size);
+  }
+
   .tab:hover:not(:disabled):not(.active),
   .tab-bar.force-hover .tab:not(:disabled):not(.active) {
-    color: var(--tabbar-hover-text);
-    background: var(--tabbar-hover-surface);
-    border-color: var(--tabbar-hover-tab-border-color);
-    border-width: var(--tabbar-hover-tab-border-width);
-    /* indicator accent owns the bottom edge */
-    border-bottom: var(--tabbar-bar-indicator-thickness) solid var(--tabbar-hover-border);
-    border-radius: var(--tabbar-hover-tab-top-radius) var(--tabbar-hover-tab-top-radius) var(--tabbar-hover-tab-bottom-radius) var(--tabbar-hover-tab-bottom-radius);
-    font-family: var(--tabbar-hover-text-font-family);
-    font-size: var(--tabbar-hover-text-font-size);
-    font-weight: var(--tabbar-hover-text-font-weight);
-    line-height: var(--tabbar-hover-text-line-height);
-    @include themed-padding(--tabbar-hover-padding, $h: 2);
+    --_text-color: var(--tabbar-hover-text);
+    --_text-family: var(--tabbar-hover-text-font-family);
+    --_text-size: var(--tabbar-hover-text-font-size);
+    --_text-weight: var(--tabbar-hover-text-font-weight);
+    --_text-line-height: var(--tabbar-hover-text-line-height);
+    --_icon-size: var(--tabbar-hover-icon-size);
+    --_surface: var(--tabbar-hover-surface);
+    --_indicator-color: var(--tabbar-hover-border);
+    --_padding: var(--tabbar-hover-padding);
+    --_border-color: var(--tabbar-hover-tab-border-color);
+    --_border-width: var(--tabbar-hover-tab-border-width);
+    --_top-radius: var(--tabbar-hover-tab-top-radius);
+    --_bottom-radius: var(--tabbar-hover-tab-bottom-radius);
   }
 
   .tab.active {
-    color: var(--tabbar-active-text);
-    background: var(--tabbar-active-surface);
-    border-color: var(--tabbar-active-tab-border-color);
-    border-width: var(--tabbar-active-tab-border-width);
-    /* indicator accent owns the bottom edge */
-    border-bottom: var(--tabbar-bar-indicator-thickness) solid var(--tabbar-active-border);
-    border-radius: var(--tabbar-active-tab-top-radius) var(--tabbar-active-tab-top-radius) var(--tabbar-active-tab-bottom-radius) var(--tabbar-active-tab-bottom-radius);
-    font-family: var(--tabbar-active-text-font-family);
-    font-size: var(--tabbar-active-text-font-size);
-    font-weight: var(--tabbar-active-text-font-weight);
-    line-height: var(--tabbar-active-text-line-height);
-    @include themed-padding(--tabbar-active-padding, $h: 2);
+    --_text-color: var(--tabbar-active-text);
+    --_text-family: var(--tabbar-active-text-font-family);
+    --_text-size: var(--tabbar-active-text-font-size);
+    --_text-weight: var(--tabbar-active-text-font-weight);
+    --_text-line-height: var(--tabbar-active-text-line-height);
+    --_icon-size: var(--tabbar-active-icon-size);
+    --_surface: var(--tabbar-active-surface);
+    --_indicator-color: var(--tabbar-active-border);
+    --_padding: var(--tabbar-active-padding);
+    --_border-color: var(--tabbar-active-tab-border-color);
+    --_border-width: var(--tabbar-active-tab-border-width);
+    --_top-radius: var(--tabbar-active-tab-top-radius);
+    --_bottom-radius: var(--tabbar-active-tab-bottom-radius);
   }
 
   .tab:disabled {
-    color: var(--tabbar-disabled-text);
-    background: var(--tabbar-disabled-surface);
-    border-color: var(--tabbar-disabled-tab-border-color);
-    border-width: var(--tabbar-disabled-tab-border-width);
-    /* indicator accent owns the bottom edge */
-    border-bottom: var(--tabbar-bar-indicator-thickness) solid var(--tabbar-disabled-border);
-    border-radius: var(--tabbar-disabled-tab-top-radius) var(--tabbar-disabled-tab-top-radius) var(--tabbar-disabled-tab-bottom-radius) var(--tabbar-disabled-tab-bottom-radius);
-    font-family: var(--tabbar-disabled-text-font-family);
-    font-size: var(--tabbar-disabled-text-font-size);
-    font-weight: var(--tabbar-disabled-text-font-weight);
-    line-height: var(--tabbar-disabled-text-line-height);
-    @include themed-padding(--tabbar-disabled-padding, $h: 2);
+    --_text-color: var(--tabbar-disabled-text);
+    --_text-family: var(--tabbar-disabled-text-font-family);
+    --_text-size: var(--tabbar-disabled-text-font-size);
+    --_text-weight: var(--tabbar-disabled-text-font-weight);
+    --_text-line-height: var(--tabbar-disabled-text-line-height);
+    --_icon-size: var(--tabbar-disabled-icon-size);
+    --_surface: var(--tabbar-disabled-surface);
+    --_indicator-color: var(--tabbar-disabled-border);
+    --_padding: var(--tabbar-disabled-padding);
+    --_border-color: var(--tabbar-disabled-tab-border-color);
+    --_border-width: var(--tabbar-disabled-tab-border-width);
+    --_top-radius: var(--tabbar-disabled-tab-top-radius);
+    --_bottom-radius: var(--tabbar-disabled-tab-bottom-radius);
     cursor: not-allowed;
   }
 
   .tab.icon-only {
     padding: var(--space-8) var(--space-12);
   }
-
-  .tab:hover:not(:disabled):not(.active) i,
-  .tab-bar.force-hover .tab:not(:disabled):not(.active) i {
-    font-size: var(--tabbar-hover-icon-size);
-  }
-
-  .tab.active i {
-    font-size: var(--tabbar-active-icon-size);
-  }
-
-  .tab:disabled i {
-    font-size: var(--tabbar-disabled-icon-size);
-  }
-
-  .tab i {
-    font-size: var(--tabbar-default-icon-size);
-  }
 </style>