@recursica/mui-adapter 0.18.0 → 0.19.0

package/src/components/Radio/Radio.module.css

@@ -112,10 +112,10 @@
 
   /* Standard unchecked state */
   background-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_background-unselected
+    --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_border-unselected
+    --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_properties_colors_border-color
   );
   transition: all 0.2s ease; /* HARDCODE: consider global transition token */
 }
@@ -123,24 +123,37 @@
 /* Checked State */
 .root .radio:checked {
   background-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_background-selected
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_border-selected
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_properties_colors_border-color
   );
 }
 
-/* Disabled State */
+/* Disabled State (colors now differ per selection state, so each combination is mapped explicitly) */
 .root .radio:disabled {
   cursor: not-allowed; /* HARDCODE: disabled state default */
+}
+.root .radio:disabled:not(:checked) {
   opacity: var(
-    --recursica_ui-kit_components_radio-button_properties_disabled-opacity
+    --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_variants_states_disabled_properties_opacity
   );
   background-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_disabled-background
+    --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_variants_states_disabled_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_disabled-border
+    --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_variants_states_disabled_properties_colors_border-color
+  );
+}
+.root .radio:checked:disabled {
+  opacity: var(
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_variants_states_disabled_properties_opacity
+  );
+  background-color: var(
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_variants_states_disabled_properties_colors_background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_variants_states_disabled_properties_colors_border-color
   );
 }
 
@@ -151,14 +164,18 @@
   pointer-events: none;
   width: var(--recursica_ui-kit_components_radio-button_properties_icon-size);
   height: var(--recursica_ui-kit_components_radio-button_properties_icon-size);
+}
+/* No icon-color token exists for the unselected state (no icon is visible then) */
+.root .radio:checked + .iconWrapper .icon,
+.root .radio:checked + .icon {
   color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_icon-color
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_properties_colors_icon-color
   );
 }
-.root .radio:disabled + .iconWrapper .icon,
-.root .radio:disabled + .icon {
+.root .radio:checked:disabled + .iconWrapper .icon,
+.root .radio:checked:disabled + .icon {
   color: var(
-    --recursica_ui-kit_components_radio-button_properties_colors_disabled-icon
+    --recursica_ui-kit_components_radio-button_variants_selection-states_selected_variants_states_disabled_properties_colors_icon-color
   );
 }
 
@@ -176,7 +193,7 @@
   word-wrap: break-word;
   white-space: normal;
   color: var(
-    --recursica_ui-kit_components_radio-button-item_properties_colors_text
+    --recursica_ui-kit_components_radio-button-item_properties_colors_text-color
   );
   font-family: var(
     --recursica_ui-kit_components_radio-button-item_properties_text_font-family
@@ -209,7 +226,7 @@
     --recursica_ui-kit_components_radio-button-item_properties_colors_disabled-text
   );
   opacity: var(
-    --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity
+    --recursica_ui-kit_components_radio-button-item_variants_states_disabled_properties_opacity
   );
 }
 
@@ -230,6 +247,6 @@
 .root .description[data-disabled="true"],
 .root .error[data-disabled="true"] {
   opacity: var(
-    --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity
+    --recursica_ui-kit_components_radio-button-item_variants_states_disabled_properties_opacity
   );
 }

package/src/components/ReadOnlyField/ReadOnlyField.module.css

@@ -45,7 +45,7 @@
     --recursica_ui-kit_components_read-only-field_properties_text_text-transform
   );
   color: var(
-    --recursica_ui-kit_components_read-only-field_properties_colors_text
+    --recursica_ui-kit_components_read-only-field_properties_colors_text-color
   );
 
   min-height: var(

package/src/components/RecursicaThemeProvider/USAGE.md

@@ -0,0 +1,60 @@
+# RecursicaThemeProvider - Usage Guide
+
+This document describes how to integrate and use `RecursicaThemeProvider` in your projects using `@recursica/mui-adapter`.
+
+> [!NOTE] > `RecursicaThemeProvider` is defined once in `@recursica/adapter-common` and re-exported here so it shares the exact same behavior across every Recursica adapter.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { RecursicaThemeProvider } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import { StyledEngineProvider } from "@mui/material/styles";
+import { RecursicaThemeProvider } from "@recursica/mui-adapter";
+
+function App() {
+  return (
+    <StyledEngineProvider injectFirst>
+      <RecursicaThemeProvider theme="light">
+        {/* Your App Components */}
+      </RecursicaThemeProvider>
+    </StyledEngineProvider>
+  );
+}
+```
+
+By default, `RecursicaThemeProvider` also wraps `children` in a base [`Layer`](../Layer/USAGE.md) (`layer={0}`), so surface/border/elevation variables resolve immediately — no separate `Layer` needed for the page background.
+
+If you want to place the base layer yourself (e.g. to use `contentsOnly`, or to control exactly where layer 0 starts in the tree), opt out with `initLayer0={false}`:
+
+```tsx
+import { RecursicaThemeProvider, Layer } from "@recursica/mui-adapter";
+
+<RecursicaThemeProvider theme="light" initLayer0={false}>
+  <Layer layer={0}>{/* Your App Components */}</Layer>
+</RecursicaThemeProvider>;
+```
+
+---
+
+## 3. Design System Integration
+
+> [!IMPORTANT]
+>
+> - **Required for setup**: `RecursicaThemeProvider` must wrap your entire application, once, near the root, inside `<StyledEngineProvider injectFirst>`. See [SETUP.md](../../../SETUP.md) for the full setup sequence.
+> - **`initLayer0` (default `true`)**: Automatically wraps `children` in a layer-0 [`Layer`](../Layer/USAGE.md). `RecursicaThemeProvider` itself only sets `data-recursica-theme` (`"light"` or `"dark"`, defaults to `"light"`) on `document.documentElement` — without a `Layer` in the tree (either the automatic one or one you add yourself with `initLayer0={false}`), none of Recursica's surface CSS variables resolve.
+> - **Runtime theme switching**: Changing the `theme` prop re-runs the effect and updates `data-recursica-theme` immediately, so you can drive light/dark switching from application state.
+
+---
+
+## 4. Key Integration Features & Constraints
+
+`RecursicaThemeProvider` also wires up the `overStyled` development-mode visual auditing helper (see [OVERSTYLING.md](../../../OVERSTYLING.md)) — `recursica.toggleOverStyled()` in the browser console only works once this provider has mounted.

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -4,9 +4,17 @@
    - Scope prefix .root to enforce Figma tokens over Mantine's inline calculation without using !important
 */
 
+/* EXEMPTIONS:
+   - segmented-control-item_properties_item_border-radius is ignored because the item border-radius
+     is fully governed by the per-selection-state tokens (unselected/selected `properties_border-radius`,
+     already applied to `.label` and `.control.Mui-selected` below); this generic, state-agnostic radius
+     token has no distinct consumption site without conflicting with those state-specific overrides.
+     The Mantine reference adapter exempts this same variable for the same reason. */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius */
+
 .root {
   background-color: var(
-    --recursica_ui-kit_components_segmented-control_properties_colors_background
+    --recursica_ui-kit_components_segmented-control_properties_colors_background-color
   );
   border: var(
       --recursica_ui-kit_components_segmented-control_properties_border-size
@@ -41,50 +49,50 @@
     --recursica_ui-kit_components_segmented-control-item_properties_item_height
   );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-radius
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_border-radius
   );
 
   border: var(
-      --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-size
+      --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_border-size
     )
     solid
     var(
-      --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_border-color
+      --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_colors_border-color
     );
   background-color: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_background
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_colors_background-color
   );
   box-shadow: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected_elevation
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_elevation
   );
 
   font-family: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-family
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-size
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_font-size
   );
   font-style: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-style
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_font-style
   );
   font-weight: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-weight
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_letter-spacing
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_line-height
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-decoration
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-transform
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_text_text-transform
   );
 
   color: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_text-color
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_unselected_properties_colors_text-color
   );
 
   display: flex;
@@ -130,50 +138,50 @@
 /* Indicator mapping (MUI ToggleButton applies .Mui-selected to the button instead of rendering a sliding indicator) */
 .root .control.Mui-selected {
   background-color: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_background
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_colors_background-color
   );
   border: var(
-      --recursica_ui-kit_components_segmented-control-item_properties_selected_border-size
+      --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_border-size
     )
     solid
     var(
-      --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_border-color
+      --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_colors_border-color
     );
   box-shadow: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected_elevation
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_elevation
   );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected_border-radius
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_border-radius
   );
 }
 
 /* Selected label text color override */
 .root .control.Mui-selected .label {
   color: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_text-color
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_colors_text-color
   );
   font-family: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-family
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-size
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_font-size
   );
   font-style: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-style
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_font-style
   );
   font-weight: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-weight
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_letter-spacing
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_line-height
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-decoration
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-transform
+    --recursica_ui-kit_components_segmented-control-item_variants_selection-states_selected_properties_text_text-transform
   );
 }

package/src/components/Slider/Slider.module.css

@@ -4,6 +4,10 @@
  * - flex-grow: 1; flex-shrink: 0; (Layout control structures)
  * - transform: translateX(-50%); (Mantine's standard step marks positioning alignment offset)
  * - outline: none; border-style: solid; (Standard focus reset and border outlines)
+ * - Focus ring on thumb/input: the token schema no longer provides per-component focus
+ *   colors for these (only `active` covers track/step-indicator-color). We apply the generic
+ *   --recursica_brand_states_focus_* ring tokens (border-size/color/margin/blur) as a box-shadow
+ *   ring instead of a color swap.
  */
 
 /* ==========================================
@@ -47,9 +51,7 @@
   flex-shrink: 0;
   width: var(--recursica_ui-kit_components_slider_properties_icon-size);
   height: var(--recursica_ui-kit_components_slider_properties_icon-size);
-  color: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_colors_icon-color
-  );
+  color: var(--recursica_ui-kit_components_slider_properties_colors_icon-color);
 }
 
 /* ==========================================
@@ -72,7 +74,7 @@
     --recursica_ui-kit_components_slider_properties_track-border-radius
   );
   background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_colors_track
+    --recursica_ui-kit_components_slider_properties_colors_track
   );
 }
 
@@ -84,7 +86,7 @@
     --recursica_ui-kit_components_slider_properties_track-border-radius
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_colors_track-active
+    --recursica_ui-kit_components_slider_properties_colors_track-active
   ) !important;
   border: none !important;
 }
@@ -100,7 +102,7 @@
     --recursica_ui-kit_components_slider_properties_thumb-elevation
   );
   background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_colors_thumb
+    --recursica_ui-kit_components_slider_properties_colors_thumb
   );
   border: none;
   cursor: pointer;
@@ -117,13 +119,13 @@
 .sliderThumb:focus,
 .sliderThumb:focus-visible {
   outline: none;
-  background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_thumb
-  );
-  box-shadow: 0 0 0 2px
-    var(
-      --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_track-active
-    );
+  box-shadow:
+    var(--recursica_ui-kit_components_slider_properties_thumb-elevation),
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color);
 }
 
 .sliderMark {
@@ -138,15 +140,17 @@
     --recursica_ui-kit_components_slider_properties_step-indicator-border-radius
   );
   background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_colors_step-indicator-color
+    --recursica_ui-kit_components_slider_properties_colors_step-indicator-color
   );
   transform: translateX(-50%);
   border: none;
 }
 
 .sliderMark[data-filled] {
+  /* No default-state "-active" step-indicator token exists anymore (only disabled/error define
+     one); reusing the active-track color keeps filled marks visually tied to the filled track. */
   background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_colors_step-indicator-color-active
+    --recursica_ui-kit_components_slider_properties_colors_track-active
   );
 }
 
@@ -282,17 +286,15 @@
   );
   border-style: solid;
   border-width: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_input-border-size
+    --recursica_ui-kit_components_slider_properties_input-border-size
   );
   border-color: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_colors_input-border-color
+    --recursica_ui-kit_components_slider_properties_colors_input-border-color
   );
   background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_colors_input-background
-  );
-  color: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_colors_input-text
+    --recursica_ui-kit_components_slider_properties_colors_input-background-color
   );
+  color: var(--recursica_ui-kit_components_slider_properties_colors_input-text);
 
   font-family: var(
     --recursica_ui-kit_components_slider_properties_input-text_font-family
@@ -339,18 +341,12 @@
 
 .inputField:focus {
   outline: none;
-  background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_input-background
-  );
-  border-color: var(
-    --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_input-border-color
-  );
-  color: var(
-    --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_input-text
-  );
-  border-width: var(
-    --recursica_ui-kit_components_slider_variants_states_focus_properties_input-border-size
-  );
+  box-shadow:
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color);
 }
 
 /* Chrome, Safari, Edge, Opera: Hide number spin buttons */
@@ -400,6 +396,23 @@
    6. State-Specific Overrides (Disabled, Error)
    ========================================== */
 
+/* Focus states */
+/* The token schema's `active` state (not a separate `focus` state) now covers track/step-indicator
+   color while focus is within the slider; there is no `active` override for the filled mark. */
+.sliderRoot:has(.sliderThumb:focus) .sliderTrack,
+.sliderRoot:focus-within .sliderTrack {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_active_properties_colors_track
+  );
+}
+
+.sliderRoot:has(.sliderThumb:focus) .sliderMark,
+.sliderRoot:focus-within .sliderMark {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_active_properties_colors_step-indicator-color
+  );
+}
+
 /* Disabled state */
 .sliderContainer[data-disabled="true"] .iconWrapper {
   color: var(
@@ -441,12 +454,15 @@
 
 .sliderContainer[data-disabled="true"] {
   color: var(--form-field-disabled-text);
+  opacity: var(
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_opacity
+  );
 }
 
 .inputField:disabled {
   cursor: not-allowed;
   background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_input-background
+    --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_input-background-color
   );
   border-color: var(
     --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_input-border-color
@@ -498,7 +514,7 @@
 
 .inputField[data-error="true"] {
   background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_input-background
+    --recursica_ui-kit_components_slider_variants_states_error_properties_colors_input-background-color
   );
   border-color: var(
     --recursica_ui-kit_components_slider_variants_states_error_properties_colors_input-border-color

package/src/components/Stepper/Stepper.module.css

@@ -267,7 +267,7 @@
   /* Font details are implicitly mapped by sizes, but colors map to states */
   /* Upcoming State (Pending) - Default */
   background-color: var(
-    --recursica_ui-kit_components_stepper_properties_colors_upcoming-indicator-background
+    --recursica_ui-kit_components_stepper_properties_colors_upcoming-indicator-background-color
   );
   border-color: var(
     --recursica_ui-kit_components_stepper_properties_colors_upcoming-indicator-border-color
@@ -281,7 +281,7 @@
 .root .stepIcon.Mui-completed,
 .root .stepIcon:has(.Mui-completed) {
   background-color: var(
-    --recursica_ui-kit_components_stepper_properties_colors_completed-indicator-background
+    --recursica_ui-kit_components_stepper_properties_colors_completed-indicator-background-color
   );
   border-color: var(
     --recursica_ui-kit_components_stepper_properties_colors_completed-indicator-border-color
@@ -316,7 +316,7 @@
 .root .stepIcon.Mui-active,
 .root .stepIcon:has(.Mui-active) {
   background-color: var(
-    --recursica_ui-kit_components_stepper_properties_colors_current-indicator-background
+    --recursica_ui-kit_components_stepper_properties_colors_current-indicator-background-color
   );
   border-color: var(
     --recursica_ui-kit_components_stepper_properties_colors_current-indicator-border-color

package/src/components/Switch/Switch.module.css

@@ -25,8 +25,17 @@
 
 .root:has(input:disabled) {
   cursor: not-allowed;
+}
+
+/* Track/thumb dim per selection state; label dims via its own (single, state-agnostic) token */
+.root:has(input:checked:disabled) .track {
+  opacity: var(
+    --recursica_ui-kit_components_switch_variants_selection-states_selected_variants_states_disabled_properties_opacity
+  );
+}
+.root:has(input:disabled):not(:has(input:checked)) .track {
   opacity: var(
-    --recursica_ui-kit_components_switch-item_properties_disabled-opacity
+    --recursica_ui-kit_components_switch_variants_selection-states_unselected_variants_states_disabled_properties_opacity
   );
 }
 
@@ -39,12 +48,12 @@
 /* HARDCODE: disable native hover color transitions applied by Mantine */
 .track:hover {
   background-color: var(
-    --recursica_ui-kit_components_switch_properties_colors_track-unselected
+    --recursica_ui-kit_components_switch_variants_selection-states_unselected_properties_colors_track-color
   );
 }
 .root input:checked + .track:hover {
   background-color: var(
-    --recursica_ui-kit_components_switch_properties_colors_track-selected
+    --recursica_ui-kit_components_switch_variants_selection-states_selected_properties_colors_track-color
   );
 }
 
@@ -55,7 +64,7 @@
     --recursica_ui-kit_components_switch_properties_track-border-radius
   );
   background-color: var(
-    --recursica_ui-kit_components_switch_properties_colors_track-unselected
+    --recursica_ui-kit_components_switch_variants_selection-states_unselected_properties_colors_track-color
   );
   box-shadow: var(
     --recursica_ui-kit_components_switch_properties_track-elevation
@@ -79,7 +88,7 @@
 
 .root input:checked + .track {
   background-color: var(
-    --recursica_ui-kit_components_switch_properties_colors_track-selected
+    --recursica_ui-kit_components_switch_variants_selection-states_selected_properties_colors_track-color
   );
   border-color: transparent;
 }
@@ -91,7 +100,7 @@
     --recursica_ui-kit_components_switch_properties_thumb-border-radius
   );
   background-color: var(
-    --recursica_ui-kit_components_switch_properties_colors_thumb-unselected
+    --recursica_ui-kit_components_switch_variants_selection-states_unselected_properties_colors_thumb-color
   );
   box-shadow: var(
     --recursica_ui-kit_components_switch_properties_thumb-elevation
@@ -103,7 +112,7 @@
 
 .root input:checked + .track .thumb {
   background-color: var(
-    --recursica_ui-kit_components_switch_properties_colors_thumb-selected
+    --recursica_ui-kit_components_switch_variants_selection-states_selected_properties_colors_thumb-color
   );
 }
 
@@ -114,6 +123,11 @@
     --recursica_ui-kit_components_switch-item_properties_label-max-width
   );
 }
+.root:has(input:disabled) .labelWrapper {
+  opacity: var(
+    --recursica_ui-kit_components_switch-item_variants_states_disabled_properties_opacity
+  );
+}
 
 .label {
   font-family: var(
@@ -140,7 +154,9 @@
   text-decoration: var(
     --recursica_ui-kit_components_switch-item_properties_text_text-decoration
   );
-  color: var(--recursica_ui-kit_components_switch-item_properties_colors_text);
+  color: var(
+    --recursica_ui-kit_components_switch-item_properties_colors_text-color
+  );
   cursor: inherit;
 }
 
@@ -167,7 +183,7 @@
 .description[data-disabled="true"],
 .error[data-disabled="true"] {
   opacity: var(
-    --recursica_ui-kit_components_switch-item_properties_disabled-opacity
+    --recursica_ui-kit_components_switch-item_variants_states_disabled_properties_opacity
   );
 }
 
@@ -195,7 +211,7 @@
   opacity: 0;
   transform: scale(0.5);
   color: var(
-    --recursica_ui-kit_components_switch_properties_colors_icon-selected
+    --recursica_ui-kit_components_switch_variants_selection-states_selected_properties_colors_icon-color
   );
 }
 
@@ -203,7 +219,7 @@
   opacity: 1;
   transform: scale(1);
   color: var(
-    --recursica_ui-kit_components_switch_properties_colors_icon-unselected
+    --recursica_ui-kit_components_switch_variants_selection-states_unselected_properties_colors_icon-color
   );
 }