@recursica/mui-adapter 0.18.1 → 0.19.0

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
   );
 }