@recursica/mantine-adapter 0.35.1 → 0.36.0

package/src/components/Pagination/Pagination.module.css

@@ -145,13 +145,13 @@
     --recursica_ui-kit_components_button_variants_styles_outline_properties_elevation
   );
   background-color: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_background
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-color
   );
 }
 
@@ -160,13 +160,8 @@
   cursor: not-allowed;
 }
 
-.control:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-hover
-  );
-}
-
-/* Hover Overlay */
+/* Hover Overlay: no per-variant hover-color/hover-opacity tokens exist anymore; use the
+   generic overlay tokens shared across components (same as Button). */
 .control::after {
   content: "";
   position: absolute;
@@ -176,15 +171,11 @@
   pointer-events: none;
   transition: opacity 150ms ease;
   opacity: 0;
-  background-color: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-color
-  );
+  background-color: var(--recursica_brand_states_hover_color);
 }
 
 .control:hover:not(:disabled)::after {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
-  );
+  opacity: var(--recursica_brand_states_hover_opacity);
 }
 
 /* Active Style: Solid */
@@ -196,19 +187,13 @@
     --recursica_ui-kit_components_button_variants_styles_solid_properties_elevation
   );
   background-color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_background
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text
-  );
-}
-
-.control[data-active]:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-hover
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-color
   );
 }
 
@@ -221,13 +206,13 @@
     --recursica_ui-kit_components_button_variants_styles_text_properties_elevation
   );
   background-color: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_background
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_button_variants_styles_text_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-color
   );
 
   /* Also explicitly inherit navigation sizes incase they differ from pages */
@@ -246,24 +231,6 @@
     );
 }
 
-.control[data-variant="text"]:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-hover
-  );
-}
-
-/* Hover Overlay for Navigation */
-.control[data-variant="text"]::after {
-  background-color: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-color
-  );
-}
-.control[data-variant="text"]:hover:not(:disabled)::after {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
-  );
-}
-
 /* Dots */
 .dots {
   display: inline-flex;

package/src/components/Panel/Panel.module.css

@@ -12,7 +12,7 @@
 
 .content {
   background-color: var(
-    --recursica_ui-kit_components_panel_properties_colors_background
+    --recursica_ui-kit_components_panel_properties_colors_background-color
   );
   border-style: solid;
   border-width: var(--recursica_ui-kit_components_panel_properties_border-size);
@@ -43,7 +43,7 @@
 
 .header {
   background-color: var(
-    --recursica_ui-kit_components_panel_properties_colors_header-footer-background
+    --recursica_ui-kit_components_panel_properties_colors_header-background-color
   );
   padding: var(
       --recursica_ui-kit_components_panel_properties_header-footer-vertical-padding
@@ -154,7 +154,7 @@
 
 .footer {
   background-color: var(
-    --recursica_ui-kit_components_panel_properties_colors_header-footer-background
+    --recursica_ui-kit_components_panel_properties_colors_footer-background-color
   );
   padding: var(
       --recursica_ui-kit_components_panel_properties_header-footer-vertical-padding

package/src/components/Popover/Popover.module.css

@@ -14,7 +14,7 @@
 
 .dropdown {
   background-color: var(
-    --recursica_ui-kit_components_hover-card-popover_properties_colors_background
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_background-color
   );
   border-style: solid; /* HARDCODE: Mantine Paper does not set border-style natively */
   border-width: var(

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,6 +226,6 @@
     --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
   );
 }

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

@@ -46,7 +46,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(
     --recursica_ui-kit_components_read-only-field_properties_min-height

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

@@ -7,7 +7,7 @@
 
 .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
@@ -42,50 +42,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;
@@ -131,50 +131,50 @@
 /* Indicator (the moving selected block) */
 .root .indicator {
   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[data-active] .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/IMPLEMENTATION_NOTES.md

@@ -47,3 +47,12 @@ This document contains specific design decisions, architectural constraints, and
 - If `showInput` is enabled, the floating `.currentValue` is hidden since the active value is already displayed and editable within the adjacent numeric text input, avoiding visual redundancy.
 - In `side-by-side` form layouts, the `.currentValue` is positioned inline (static positioning) to the right of the max label rather than floating above it, centered vertically with the max label and aligned right to the container. This uses CSS flexbox ordering (`order: 2` for `.currentValue` and `order: 1` for `.minMaxGuide`) to visually swap their positions while preserving clean, semantic DOM ordering.
 - To ensure perfect, pixel-perfect vertical track alignment between sliders that show numeric text inputs (`showInput={true}`) and sliders that display the active inline value (`showInput={false}`), the `.currentValue` element is globally given a width equal to the input width (`var(--recursica_ui-kit_components_slider_properties_input-width)`) and right-aligned (`text-align: right`). In `side-by-side` layouts, `.rightGuideContainer`'s flex gap is also matched to the horizontal input-to-track gap (`var(--recursica_ui-kit_components_slider_properties_input-gap)`), making the horizontal space occupied by the rightmost elements exactly identical in both component modes.
+
+## 6. Focus Treatment (Generic State Tokens)
+
+**Decision:** The token schema dropped the component-level `focus` state entirely. Only a narrower `active` state remains, covering `colors_track`/`colors_step-indicator-color` for the track/mark while any part of the slider has focus-within.
+**Implementation:**
+
+- Thumb, icon, and numeric input no longer have per-component focus colors. Instead they get a focus _ring_ built from the generic `--recursica_brand_states_focus_{border-size,color,margin,blur}` tokens, applied as a `box-shadow` (crisp inner ring at `border-size` plus a soft outer glow using `blur`/`margin`) rather than a color swap.
+- The thumb's focus box-shadow layers the ring on top of its existing `thumb-elevation` shadow rather than replacing it.
+- `.sliderMark[data-filled]` has no default-state "-active" step-indicator token anymore (only `disabled`/`error` define one); it reuses `colors_track-active` so filled marks stay visually tied to the filled portion of the track. Worth a design review if a distinct filled-mark color is expected.

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

@@ -4,8 +4,11 @@
  * - 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/icon/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.
  */
-/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-border-size */
 
 /* ==========================================
    1. Baseline, Reset & Layout Overrides
@@ -48,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);
 }
 
 /* ==========================================
@@ -68,13 +69,13 @@
     --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
   );
 }
 
 .sliderBar {
   background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_default_properties_colors_track-active
+    --recursica_ui-kit_components_slider_properties_colors_track-active
   );
 }
 
@@ -89,7 +90,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;
@@ -99,13 +100,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 {
@@ -120,15 +121,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
   );
 }
 
@@ -239,17 +242,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
@@ -296,18 +297,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 */
@@ -358,31 +353,29 @@
    ========================================== */
 
 /* 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_focus_properties_colors_track
+    --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_focus_properties_colors_step-indicator-color
-  );
-}
-
-.sliderRoot:has(.sliderThumb:focus) .sliderMark[data-filled],
-.sliderRoot:focus-within .sliderMark[data-filled] {
-  background-color: var(
-    --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_step-indicator-color-active
+    --recursica_ui-kit_components_slider_variants_states_active_properties_colors_step-indicator-color
   );
 }
 
 .sliderContainer:focus-within .iconWrapper {
-  color: var(
-    --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_icon-color
-  );
+  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);
 }
 
 /* Disabled state */
@@ -426,12 +419,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
@@ -483,7 +479,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
@@ -280,7 +280,7 @@
 /* Completed State */
 .root .stepIcon[data-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
@@ -313,7 +313,7 @@
 /* Current State (Progressing) */
 .root .stepIcon[data-progress] {
   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