@womp/kookie-ui 0.25.1 → 0.26.0

package/src/components/accordion.css

@@ -30,7 +30,7 @@
 
 :where(.kui-AccordionRoot:where(.kui-variant-raised)) {
   background-color: var(--color-surface);
-  box-shadow: var(--shadow-2);
+  box-shadow: var(--surface-chrome);
 }
 
 :where(.kui-AccordionRoot:where(.kui-variant-soft)) {
@@ -158,7 +158,7 @@
 @media (hover: hover) {
   :where(.kui-AccordionRoot:where(.kui-variant-raised):hover) {
     background-color: var(--accent-2);
-    box-shadow: var(--shadow-2);
+    box-shadow: var(--surface-chrome);
   }
 }
 

package/src/components/avatar.css

@@ -389,7 +389,7 @@
     top: 0;
     color: var(--accent-ink);
     background-color: var(--color-surface);
-    box-shadow: var(--shadow-2);
+    box-shadow: var(--control-chrome);
   }
 
   &:where([data-disabled]) :where(.kui-AvatarFallback) {
@@ -405,7 +405,7 @@
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
       background-color: var(--neutral-2);
-      box-shadow: var(--shadow-2);
+      box-shadow: var(--control-chrome);
 
       & :where(.kui-AvatarFallback) {
         background-color: inherit;

package/src/components/chatbar.css

@@ -387,26 +387,25 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* Raised variant - uses --color-surface and shadow */
+/* Raised variant: a surface, as v2's composer is. It casts the surface role. */
 .kui-ChatbarBox:where(.kui-variant-raised) {
   --text-area-border-width: 0px;
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
 
   background-color: var(--color-surface);
-  box-shadow: var(--shadow-2);
+  box-shadow: var(--surface-chrome);
 
   /* Hover effects */
   @media (hover: hover) {
     &:where(:hover:not(:focus-within)):where(:not(.kui-ChatbarRoot:is([data-disabled], [data-readonly]) *)) {
       background-color: var(--accent-2);
-      box-shadow: var(--shadow-3);
     }
   }
 
   /* Focus state - accent ring */
   &:where(:focus-within) {
-    box-shadow: var(--shadow-2), 0 0 0 2px var(--v-focus-color, var(--focus-8));
+    box-shadow: var(--surface-chrome), 0 0 0 2px var(--v-focus-color, var(--focus-8));
   }
 }
 

package/src/components/checkbox-group.css

@@ -12,7 +12,7 @@
   width: fit-content;
 }
 
-/* The disabled cursor and colours live in the base mark, per variant. */
+/* The disabled cursor and colours live in the base mark. */
 .kui-CheckboxGroupItemCheckbox {
   &:where(:focus-visible)::before {
     outline: var(--focus-ring-width, 2px) solid var(--focus-8);

package/src/components/checkbox-group.tsx

@@ -41,7 +41,6 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
     {
       color = checkboxGroupRootPropDefs.color.default,
       size: sizeProp,
-      variant = checkboxGroupRootPropDefs.variant.default,
       ...props
     }: ScopedProps<CheckboxGroupRootProps>,
     forwardedRef,
@@ -54,7 +53,6 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
         scope={__scopeCheckboxGroup}
         color={color}
         size={size}
-        variant={variant}
       >
         <CheckboxGroupPrimitive.Root
           {...checkboxGroupScope}

package/src/components/checkbox.css

@@ -1,6 +1,6 @@
 @import './_internal/base-checkbox.css';
 
-/* The disabled cursor and colours live in the base mark, per variant. */
+/* The disabled cursor and colours live in the base mark. */
 .kui-CheckboxRoot {
   &:where(:focus-visible)::before {
     outline: var(--focus-ring-width, 2px) solid var(--focus-8);

package/src/components/chip.css

@@ -150,7 +150,7 @@
   position: relative;
   top: var(--raised-elevation-offset);
   color: var(--accent-ink);
-  box-shadow: var(--shadow-2);
+  box-shadow: var(--control-chrome);
 
   --raised-surface: var(--color-surface);
   background-color: var(--raised-surface);

package/src/components/popover.css

@@ -1,6 +1,6 @@
 .kui-PopoverContent {
   background-color: var(--color-surface);
-  box-shadow: var(--shadow-5);
+  box-shadow: var(--floating-chrome);
   min-width: var(--radix-popover-trigger-width);
   outline: 0;
   overflow: auto;

package/src/components/radio-group.props.tsx

@@ -1,21 +1,16 @@
-import { baseRadioPropDefs } from './_internal/base-radio.props.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-// The same list as Radio: a group offers exactly what its items can draw.
-const variants = baseRadioPropDefs.variant.values;
 
 const radioGroupRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
-  variant: PropDef<(typeof variants)[number]>;
 };
 
 export { radioGroupRootPropDefs };

package/src/components/radio-group.tsx

@@ -39,7 +39,6 @@ const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootPro
     {
       color = radioGroupRootPropDefs.color.default,
       size: sizeProp,
-      variant = radioGroupRootPropDefs.variant.default,
       ...props
     }: ScopedProps<RadioGroupRootProps>,
     forwardedRef
@@ -52,7 +51,6 @@ const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootPro
         scope={__scopeRadioGroup}
         color={color}
         size={size}
-        variant={variant}
       >
         <RadioGroupPrimitive.Root
           {...radioGroupScope}

package/src/components/segmented-control.css

@@ -171,7 +171,7 @@
     position: absolute;
     border-radius: max(calc(var(--border-width-standard) * 0.5), calc(var(--segmented-control-border-radius) - var(--border-width-standard)));
     background-color: var(--segmented-control-indicator-background-color);
-    box-shadow: var(--shadow-2);
+    box-shadow: var(--control-chrome);
     content: '';
   }
 
@@ -472,7 +472,10 @@
   .kui-SegmentedControlIndicator::before {
     background-color: Highlight;
   }
+  /* The browser paints a Canvas backplate behind forced text, which covered the chosen label
+   * with a white box. The chosen segment opts out and paints its own system pair. */
   .kui-SegmentedControlItem:where([data-state='on']) {
+    forced-color-adjust: none;
     color: HighlightText;
   }
   .kui-SegmentedControlRoot:where([data-disabled]),

package/src/components/select.css

@@ -53,7 +53,7 @@
   overflow: hidden;
   z-index: 200; /* Above dialogs (100) so select inside dialogs/sheets work */
   background-color: var(--color-surface);
-  box-shadow: var(--shadow-5);
+  box-shadow: var(--floating-chrome);
 
   &:where([data-side]) {
     min-width: var(--radix-select-trigger-width);
@@ -194,14 +194,13 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* raised */
+/* raised: the default. A field, as in v2: a flat soft fill with a faint edge, no shadow. */
 
 .kui-SelectTrigger:where(.kui-variant-raised) {
   position: relative;
-  top: var(--raised-elevation-offset);
   color: var(--accent-ink);
-  background-color: var(--color-surface);
-  box-shadow: var(--shadow-2);
+  background-color: var(--field-fill);
+  box-shadow: var(--control-chrome);
 
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
@@ -210,26 +209,21 @@
 
   @media (hover: hover) {
     &:where(:hover:not(:disabled)) {
-      background-color: var(--accent-2);
-      box-shadow: var(--shadow-2);
+      background-color: var(--field-fill-hover);
     }
   }
 
-  &:where([data-state='open']) {
-    background-color: var(--accent-3);
-  }
-
+  &:where([data-state='open']),
   &:where(:active:not([data-state='open'], [data-disabled])) {
-    background-color: var(--accent-3);
+    background-color: var(--neutral-5);
   }
 
   &:where(:disabled) {
     color: var(--neutral-a8);
-    background-color: var(--neutral-a3);
-    box-shadow: none;
+    background-color: var(--field-fill-disabled);
+    box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
     outline: none;
     cursor: default;
-    top: 0;
   }
 
   &:where([data-placeholder]) {
@@ -423,27 +417,16 @@
  * Only the border and the focus ring move; the fill stays the variant's.
  */
 .kui-SelectTrigger:where([aria-invalid='true']) {
-  &:where(:not(.kui-variant-raised)) {
-    box-shadow: inset 0 0 0 1px var(--red-6);
+  box-shadow: inset 0 0 0 1px var(--red-6);
 
-    @media (hover: hover) {
-      &:where(:hover:not(:disabled)) {
-        box-shadow: inset 0 0 0 1px var(--red-7);
-      }
-    }
-    &:where([data-state='open'], :active) {
+  @media (hover: hover) {
+    &:where(:hover:not(:disabled)) {
       box-shadow: inset 0 0 0 1px var(--red-7);
     }
   }
 
-  &:where(.kui-variant-raised) {
-    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
-
-    @media (hover: hover) {
-      &:where(:hover:not(:disabled)) {
-        box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
-      }
-    }
+  &:where([data-state='open'], :active) {
+    box-shadow: inset 0 0 0 1px var(--red-7);
   }
 
   &:where(:focus-visible) {

package/src/components/shell.css

@@ -249,13 +249,18 @@
   z-index: 1;
   pointer-events: none;
 
-  & > :where(*),
-  & > :where(.kui-Toolbar) > :where(*) {
+  & > :where(*) {
     pointer-events: auto;
   }
+  /* A Toolbar spans the row, and so may a cluster inside it. pointer-events inherits, so the
+     Toolbar passes clicks through and only its controls and groups take them back: the empty
+     stretch between them lets clicks reach the content. */
   & > :where(.kui-Toolbar) {
     pointer-events: none;
   }
+  & > :where(.kui-Toolbar) :where(.kui-ToolbarGroup, .kui-BaseButton, .kui-TextFieldRoot, .kui-SelectTrigger, .kui-SegmentedControlRoot, [href], [tabindex]) {
+    pointer-events: auto;
+  }
 }
 .kui-ShellPaneHeader[data-float] {
   top: 0;
@@ -460,7 +465,7 @@
   --kui-shell-row: 1 / -1;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
-  --kui-shell-shadow: var(--shadow-5);
+  --kui-shell-shadow: var(--dialog-chrome);
   --kui-shell-edge: 1px;
   --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
   --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -474,7 +479,7 @@
   --kui-shell-row: 2 / 3;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
-  --kui-shell-shadow: var(--shadow-4);
+  --kui-shell-shadow: var(--surface-chrome);
   --kui-shell-edge: 1px;
   --kui-shell-cap: initial;
   --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -507,7 +512,7 @@
   --kui-shell-row: 1 / -1;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
-  --kui-shell-shadow: var(--shadow-5);
+  --kui-shell-shadow: var(--dialog-chrome);
   --kui-shell-edge: 1px;
   --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
   --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -521,7 +526,7 @@
   --kui-shell-row: 2 / 3;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
-  --kui-shell-shadow: var(--shadow-4);
+  --kui-shell-shadow: var(--surface-chrome);
   --kui-shell-edge: 1px;
   --kui-shell-cap: initial;
   --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -562,7 +567,7 @@
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-shadow: var(--dialog-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -576,7 +581,7 @@
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-shadow: var(--surface-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -618,7 +623,7 @@
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-shadow: var(--dialog-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -632,7 +637,7 @@
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-shadow: var(--surface-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -674,7 +679,7 @@
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-shadow: var(--dialog-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -688,7 +693,7 @@
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-shadow: var(--surface-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -730,7 +735,7 @@
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-shadow: var(--dialog-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -744,7 +749,7 @@
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-shadow: var(--surface-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -786,7 +791,7 @@
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-shadow: var(--dialog-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -800,7 +805,7 @@
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-shadow: var(--surface-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -834,7 +839,7 @@
   --kui-shell-row: 2 / 3;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
-  --kui-shell-shadow: var(--shadow-4);
+  --kui-shell-shadow: var(--surface-chrome);
   --kui-shell-edge: 1px;
   --kui-shell-offset: var(--shell-rail-offset, 0px);
   --kui-shell-handle: none;
@@ -892,7 +897,7 @@
   margin: var(--shell-inset-gap);
   border-radius: var(--radius-surface-1);
   background: var(--color-page);
-  box-shadow: var(--shadow-2);
+  box-shadow: var(--surface-chrome);
 }
 
 /*

package/src/components/sidebar.css

@@ -337,6 +337,11 @@
   & :where(.kui-SidebarMenuButton) {
     flex: 1;
   }
+
+  /* A Toolbar fills the header, so its leading and trailing groups sit at the two ends. */
+  & > :where(.kui-Toolbar) {
+    flex: 1;
+  }
 }
 
 .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
@@ -351,6 +356,11 @@
   & :where(.kui-SidebarMenuButton) {
     flex: 1;
   }
+
+  /* A Toolbar fills the footer, so its leading and trailing groups sit at the two ends. */
+  & > :where(.kui-Toolbar) {
+    flex: 1;
+  }
 }
 
 /* Header/Footer Menu Button Support */
@@ -954,3 +964,13 @@
     color: var(--accent-solid-contrast);
   }
 }
+
+/* High contrast drops background colours, so the current row lost its only mark. It takes the
+ * system highlight pair instead, as a chosen segment does. */
+@media (forced-colors: active) {
+  .kui-SidebarMenuButton:where([data-active]) {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}

package/src/components/slider.css

@@ -81,7 +81,7 @@
     inset: calc(var(--slider-thumb-inset-factor) * var(--slider-thumb-overshoot-base, var(--slider-track-size)) * -1);
     background-color: var(--accent-solid-thumb);
     border-radius: var(--slider-thumb-radius);
-    box-shadow: var(--slider-thumb-box-shadow, var(--shadow-2));
+    box-shadow: var(--slider-thumb-box-shadow, var(--grip-chrome));
     cursor: pointer;
   }
 
@@ -142,54 +142,23 @@
 
 /***************************************************************************************************
  *                                                                                                 *
- * VARIANTS                                                                                        *
+ * THE LOOK                                                                                        *
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* surface */
+/* One look, as in v2. The track is the switch's well, a soft fill with no edge; the range is the
+ * accent solid; the thumb is the switch's grip. */
 
-.kui-SliderRoot:where(.kui-variant-surface) {
-  & :where(.kui-SliderTrack) {
-    background-color: var(--neutral-2);
-    box-shadow: inset 0 0 0 1px var(--neutral-6);
-
-    &:where([data-disabled]) {
-      box-shadow: inset 0 0 0 1px var(--neutral-5);
-    }
-  }
-
-  & :where(.kui-SliderRange) {
-    background-color: var(--accent-solid);
-  }
-}
-
-/* soft */
-
-.kui-SliderRoot:where(.kui-variant-soft) {
-  & :where(.kui-SliderTrack) {
-    background-color: var(--neutral-3);
-  }
-
-  & :where(.kui-SliderRange) {
-    background-color: var(--accent-solid);
-  }
+.kui-SliderTrack {
+  background-color: var(--color-track);
 }
 
-/* outline */
-
-.kui-SliderRoot:where(.kui-variant-outline) {
-  & :where(.kui-SliderTrack) {
-    /* Base state: no background, just border */
-    box-shadow: inset 0 0 0 1px var(--neutral-6);
-  }
-
-  & :where(.kui-SliderRange) {
-    background-color: var(--accent-solid);
-  }
+.kui-SliderRange {
+  background-color: var(--accent-solid);
 }
 
 /* all disabled Sliders: a colour remap, never opacity, and a default cursor.
- * These come after every variant at the same specificity, so they win by order. */
+ * These come after the look at the same specificity, so they win by order. */
 
 [data-disabled] {
   .kui-SliderRoot:where(&) {

package/src/components/slider.props.tsx

@@ -4,18 +4,15 @@ import { radiusPropDef } from '../props/radius.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['surface', 'soft', 'outline'] as const;
 
 const sliderPropDefs = {
   size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'surface' },
   showTickLabels: { type: 'boolean' },
   snapToTicks: { type: 'boolean' },
   ...colorPropDef,
   ...radiusPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
-  variant: PropDef<(typeof variants)[number]>;
   showTickLabels: PropDef<boolean>;
   snapToTicks: PropDef<boolean>;
 };

package/src/components/switch.css

@@ -30,13 +30,14 @@
 }
 
 .kui-SwitchThumb {
-  background-color: white;
+  /* The grip: the surface colour, near-white in dark. */
+  background-color: var(--color-thumb);
   position: absolute;
   inset-inline-start: var(--switch-thumb-inset);
   width: var(--switch-thumb-size);
   height: var(--switch-thumb-size);
   border-radius: 9999px;
-  box-shadow: var(--shadow-2);
+  box-shadow: var(--grip-chrome);
 
   &:where([data-state='checked']) {
     background-color: var(--accent-solid-thumb);
@@ -82,75 +83,33 @@
 
 /***************************************************************************************************
  *                                                                                                 *
- * VARIANTS                                                                                        *
+ * THE LOOK                                                                                        *
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* surface */
+/* One look, as in v2. Off, the track is a well: a soft fill with no edge. On, it is the accent
+ * solid. Hover is one step darker, press two. Disabled switches take neither. */
 
-.kui-SwitchRoot:where(.kui-variant-surface) {
+.kui-SwitchRoot {
   &::before {
-    background-color: var(--neutral-2);
-    box-shadow: inset 0 0 0 1px var(--neutral-6);
-  }
-
-  &:where([data-state='checked'])::before {
-    background-color: var(--accent-solid);
+    background-color: var(--color-track);
     box-shadow: none;
   }
-}
-
-/* soft */
-
-.kui-SwitchRoot:where(.kui-variant-soft) {
-  &::before {
-    background-color: var(--neutral-3);
-  }
 
   &:where([data-state='checked'])::before {
     background-color: var(--accent-solid);
   }
-}
-
-/* outline */
-
-.kui-SwitchRoot:where(.kui-variant-outline) {
-  &::before {
-    /* Base state: no background, just border */
-    box-shadow: inset 0 0 0 1px var(--neutral-6);
-  }
-
-  &:where([data-state='checked'])::before {
-    background-color: var(--accent-solid);
-    box-shadow: none;
-  }
-}
-
-/* Hover is one step up the variant's own ramp, press two. Disabled switches take neither. */
-
-.kui-SwitchRoot {
-  --switch-off-hover: var(--neutral-a2);
-  --switch-off-active: var(--neutral-a3);
-
-  &:where(.kui-variant-surface) {
-    --switch-off-hover: var(--neutral-3);
-    --switch-off-active: var(--neutral-4);
-  }
-  &:where(.kui-variant-soft) {
-    --switch-off-hover: var(--neutral-4);
-    --switch-off-active: var(--neutral-5);
-  }
 
   @media (hover: hover) {
     &:where(:hover:not([data-disabled]))::before {
-      background-color: var(--switch-off-hover);
+      background-color: var(--color-track-hover);
     }
     &:where(:hover:not([data-disabled]):is([data-state='checked']))::before {
       background-color: var(--accent-solid-hover);
     }
   }
   &:where(:active:not([data-disabled]))::before {
-    background-color: var(--switch-off-active);
+    background-color: var(--color-track-active);
   }
   &:where(:active:not([data-disabled]):is([data-state='checked']))::before {
     background-color: var(--accent-solid-active);
@@ -158,7 +117,7 @@
 }
 
 /* all disabled Switches: a colour remap, never opacity, and a default cursor.
- * These come after every variant at the same specificity, so they win by order. */
+ * These come after the look at the same specificity, so they win by order. */
 
 [data-disabled] {
   .kui-SwitchRoot:where(&) {