@recursica/mantine-adapter 0.35.0 → 0.36.0

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

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;
 }
 
@@ -174,7 +190,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
   );
 }
 
@@ -182,7 +198,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
   );
 }
 

package/src/components/Table/Table.module.css

@@ -75,18 +75,13 @@
 }
 
 /* Hover rows */
+/* Table's dedicated highlight-on-hover token was removed from the schema; hover feedback now
+   uses the generic cross-component overlay tokens instead. */
 .root tbody tr:hover td {
   background-color: color-mix(
     in srgb,
-    var(
-        --recursica_ui-kit_components_table_properties_colors_highlight-on-hover-color
-      )
-      calc(
-        var(
-            --recursica_ui-kit_components_table_properties_opacities_highlight-on-hover-opacity
-          ) *
-          100%
-      ),
+    var(--recursica_brand_states_hover_color)
+      calc(var(--recursica_brand_states_hover_opacity) * 100%),
     transparent
   );
 }
@@ -97,10 +92,10 @@
 
 .root thead th {
   background-color: var(
-    --recursica_ui-kit_components_table-header_properties_colors_cell-color-enabled
+    --recursica_ui-kit_components_table-header_properties_colors_cell-color
   );
   color: var(
-    --recursica_ui-kit_components_table-header_properties_colors_text-color-enabled
+    --recursica_ui-kit_components_table-header_properties_colors_text-color
   );
   padding: var(
       --recursica_ui-kit_components_table-header_properties_padding-vertical
@@ -207,10 +202,13 @@
 /* Disabled Header */
 .root thead th[data-disabled="true"] {
   background-color: var(
-    --recursica_ui-kit_components_table-header_properties_colors_cell-color-disabled
+    --recursica_ui-kit_components_table-header_variants_states_disabled_properties_colors_cell-color
   );
   color: var(
-    --recursica_ui-kit_components_table-header_properties_colors_text-color-disabled
+    --recursica_ui-kit_components_table-header_variants_states_disabled_properties_colors_text-color
+  );
+  opacity: var(
+    --recursica_ui-kit_components_table-header_variants_states_disabled_properties_opacity
   );
 }
 
@@ -229,10 +227,10 @@
 
 .root tbody td {
   background-color: var(
-    --recursica_ui-kit_components_table-cell_properties_colors_cell-color-enabled
+    --recursica_ui-kit_components_table-cell_properties_colors_cell-color
   );
   color: var(
-    --recursica_ui-kit_components_table-cell_properties_colors_text-color-enabled
+    --recursica_ui-kit_components_table-cell_properties_colors_text-color
   );
   padding: var(
       --recursica_ui-kit_components_table-cell_properties_padding-vertical
@@ -305,10 +303,13 @@
 .root tbody tr[data-disabled="true"] td,
 .root tbody td[data-disabled="true"] {
   background-color: var(
-    --recursica_ui-kit_components_table-cell_properties_colors_cell-color-disabled
+    --recursica_ui-kit_components_table-cell_variants_states_disabled_properties_colors_cell-color
   );
   color: var(
-    --recursica_ui-kit_components_table-cell_properties_colors_text-color-disabled
+    --recursica_ui-kit_components_table-cell_variants_states_disabled_properties_colors_text-color
+  );
+  opacity: var(
+    --recursica_ui-kit_components_table-cell_variants_states_disabled_properties_opacity
   );
 }
 
@@ -318,10 +319,10 @@
 
 .root tfoot td {
   background-color: var(
-    --recursica_ui-kit_components_table-footer_properties_colors_cell-color-enabled
+    --recursica_ui-kit_components_table-footer_properties_colors_cell-color
   );
   color: var(
-    --recursica_ui-kit_components_table-footer_properties_colors_text-color-enabled
+    --recursica_ui-kit_components_table-footer_properties_colors_text-color
   );
   padding: var(
       --recursica_ui-kit_components_table-footer_properties_padding-vertical
@@ -380,13 +381,44 @@
     );
 }
 
+/* Currency formatted footer cell layout override */
+.root tfoot td[data-currency="true"] {
+  font-family: var(
+    --recursica_ui-kit_components_table-footer_properties_currency-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-footer_properties_currency-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-footer_properties_currency-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-footer_properties_currency-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-footer_properties_currency-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-footer_properties_currency-style_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-footer_properties_currency-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-footer_properties_currency-style_text-transform
+  );
+}
+
 /* Disabled Footer Row/Cells */
 .root tfoot tr[data-disabled="true"] td,
 .root tfoot td[data-disabled="true"] {
   background-color: var(
-    --recursica_ui-kit_components_table-footer_properties_colors_cell-color-disabled
+    --recursica_ui-kit_components_table-footer_variants_states_disabled_properties_colors_cell-color
   );
   color: var(
-    --recursica_ui-kit_components_table-footer_properties_colors_text-color-disabled
+    --recursica_ui-kit_components_table-footer_variants_states_disabled_properties_colors_text-color
+  );
+  opacity: var(
+    --recursica_ui-kit_components_table-footer_variants_states_disabled_properties_opacity
   );
 }