@recursica/mantine-adapter 0.35.0 → 0.36.0

package/src/components/Checkbox/Checkbox.module.css

@@ -103,10 +103,10 @@
 
   /* Standard unchecked state */
   background-color: var(
-    --recursica_ui-kit_components_checkbox_properties_colors_background-unchecked
+    --recursica_ui-kit_components_checkbox_variants_selection-states_unchecked_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_checkbox_properties_colors_border-unchecked
+    --recursica_ui-kit_components_checkbox_variants_selection-states_unchecked_properties_colors_border-color
   );
   transition: all 0.2s ease; /* HARDCODE: consider global transition token */
 }
@@ -115,46 +115,85 @@
 .input:checked,
 .inputChecked {
   background-color: var(
-    --recursica_ui-kit_components_checkbox_properties_colors_background-checked
+    --recursica_ui-kit_components_checkbox_variants_selection-states_checked_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_checkbox_properties_colors_border-checked
+    --recursica_ui-kit_components_checkbox_variants_selection-states_checked_properties_colors_border-color
   );
 }
 .input[data-indeterminate],
 .inputIndeterminate {
   background-color: var(
-    --recursica_ui-kit_components_checkbox_properties_colors_background-indeterminate
+    --recursica_ui-kit_components_checkbox_variants_selection-states_indeterminate_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_checkbox_properties_colors_border-indeterminate
+    --recursica_ui-kit_components_checkbox_variants_selection-states_indeterminate_properties_colors_border-color
   );
 }
 
-/* Disabled State */
+/* Disabled State (colors now differ per selection state, so each combination is mapped explicitly) */
 .input:disabled {
   cursor: not-allowed; /* HARDCODE: disabled state default */
+}
+.input:disabled:not(:checked):not([data-indeterminate]) {
+  opacity: var(
+    --recursica_ui-kit_components_checkbox_variants_selection-states_unchecked_variants_states_disabled_properties_opacity
+  );
+  background-color: var(
+    --recursica_ui-kit_components_checkbox_variants_selection-states_unchecked_variants_states_disabled_properties_colors_background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_checkbox_variants_selection-states_unchecked_variants_states_disabled_properties_colors_border-color
+  );
+}
+.input:checked:disabled {
+  opacity: var(
+    --recursica_ui-kit_components_checkbox_variants_selection-states_checked_variants_states_disabled_properties_opacity
+  );
+  background-color: var(
+    --recursica_ui-kit_components_checkbox_variants_selection-states_checked_variants_states_disabled_properties_colors_background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_checkbox_variants_selection-states_checked_variants_states_disabled_properties_colors_border-color
+  );
+}
+.input[data-indeterminate]:disabled {
   opacity: var(
-    --recursica_ui-kit_components_checkbox_properties_disabled-opacity
+    --recursica_ui-kit_components_checkbox_variants_selection-states_indeterminate_variants_states_disabled_properties_opacity
   );
   background-color: var(
-    --recursica_ui-kit_components_checkbox_properties_colors_disabled-background
+    --recursica_ui-kit_components_checkbox_variants_selection-states_indeterminate_variants_states_disabled_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_checkbox_properties_colors_disabled-border
+    --recursica_ui-kit_components_checkbox_variants_selection-states_indeterminate_variants_states_disabled_properties_colors_border-color
   );
 }
 
 .icon {
   width: var(--recursica_ui-kit_components_checkbox_properties_icon-size);
   height: var(--recursica_ui-kit_components_checkbox_properties_icon-size);
+}
+/* No icon-color token exists for the unchecked state (no icon is visible then) */
+.input:checked + .icon,
+.inputChecked + .icon {
+  color: var(
+    --recursica_ui-kit_components_checkbox_variants_selection-states_checked_properties_colors_icon-color
+  );
+}
+.input[data-indeterminate] + .icon,
+.inputIndeterminate + .icon {
+  color: var(
+    --recursica_ui-kit_components_checkbox_variants_selection-states_indeterminate_properties_colors_icon-color
+  );
+}
+.input:checked:disabled + .icon {
   color: var(
-    --recursica_ui-kit_components_checkbox_properties_colors_icon-color
+    --recursica_ui-kit_components_checkbox_variants_selection-states_checked_variants_states_disabled_properties_colors_icon-color
   );
 }
-.input:disabled + .icon {
+.input[data-indeterminate]:disabled + .icon {
   color: var(
-    --recursica_ui-kit_components_checkbox_properties_colors_disabled-icon
+    --recursica_ui-kit_components_checkbox_variants_selection-states_indeterminate_variants_states_disabled_properties_colors_icon-color
   );
 }
 
@@ -172,7 +211,7 @@
   word-wrap: break-word;
   white-space: normal;
   color: var(
-    --recursica_ui-kit_components_checkbox-item_properties_colors_text
+    --recursica_ui-kit_components_checkbox-item_properties_colors_text-color
   );
   font-family: var(
     --recursica_ui-kit_components_checkbox-item_properties_text_font-family
@@ -202,7 +241,7 @@
 .root:has(input:disabled) .label {
   cursor: not-allowed; /* HARDCODE: disabled interaction */
   opacity: var(
-    --recursica_ui-kit_components_checkbox-item_properties_disabled-opacity
+    --recursica_ui-kit_components_checkbox-item_variants_states_disabled_properties_opacity
   );
   color: var(
     --recursica_ui-kit_components_checkbox-item_properties_colors_disabled-text

package/src/components/Chip/Chip.module.css

@@ -6,12 +6,13 @@
 /* recursica-ignore: --recursica_ui-kit_components_chip_properties_close-icon-color */
 /* recursica-ignore: --recursica_ui-kit_components_chip_properties_leading-icon-color */
 /* recursica-ignore: --recursica_ui-kit_components_chip_properties_text-size */
-/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_leading-icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_selected-icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_icon */
-/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_leading-icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_leading-icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_selected-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_unselected_variants_states_error_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_unselected_variants_states_error_properties_colors_selected-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_unselected_variants_states_error_properties_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_selected_variants_states_error_properties_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_selected_variants_states_error_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_selected_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_unselected_properties_colors_selected-icon-color */
 
 /* HARDCODED VALUES
    border-style: solid;  (Baseline reset)
@@ -31,19 +32,19 @@
   /* Token properties */
   --chip-height: max-content; /* Sizing is driven by padding and line height */
   --chip-bg: var(
-    --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_background
+    --recursica_ui-kit_components_chip_variants_selection-states_unselected_properties_colors_background-color
   );
   --chip-border: var(
-    --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_border-color
+    --recursica_ui-kit_components_chip_variants_selection-states_unselected_properties_colors_border-color
   );
   --chip-text: var(
-    --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_text
+    --recursica_ui-kit_components_chip_variants_selection-states_unselected_properties_colors_text-color
   );
   --chip-icon: var(
-    --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_leading-icon-color
+    --recursica_ui-kit_components_chip_variants_selection-states_unselected_properties_colors_leading-icon-color
   );
   --chip-close: var(
-    --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_close-icon-color
+    --recursica_ui-kit_components_chip_variants_selection-states_unselected_properties_colors_close-icon-color
   );
 
   /* Override Mantine's internal variables */
@@ -118,55 +119,55 @@
 /* Default (Unselected) hover/active interactions (Mantine overrides) */
 .label.label[data-checked] {
   --chip-bg: var(
-    --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_background
+    --recursica_ui-kit_components_chip_variants_selection-states_selected_properties_colors_background-color
   );
   --chip-border: var(
-    --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_border-color
+    --recursica_ui-kit_components_chip_variants_selection-states_selected_properties_colors_border-color
   );
   --chip-text: var(
-    --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_text
+    --recursica_ui-kit_components_chip_variants_selection-states_selected_properties_colors_text-color
   );
   --chip-icon: var(
-    --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_selected-icon-color
+    --recursica_ui-kit_components_chip_variants_selection-states_selected_properties_colors_selected-icon-color
   );
   --chip-close: var(
-    --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_close-icon-color
+    --recursica_ui-kit_components_chip_variants_selection-states_selected_properties_colors_close-icon-color
   );
 }
 
 .root[data-error] .label.label {
   --chip-bg: var(
-    --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_background
+    --recursica_ui-kit_components_chip_variants_selection-states_unselected_variants_states_error_properties_colors_background-color
   );
   --chip-border: var(
-    --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_border-color
+    --recursica_ui-kit_components_chip_variants_selection-states_unselected_variants_states_error_properties_colors_border-color
   );
   --chip-text: var(
-    --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_text
+    --recursica_ui-kit_components_chip_variants_selection-states_unselected_variants_states_error_properties_colors_text-color
   );
   --chip-icon: var(
-    --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_icon
+    --recursica_ui-kit_components_chip_variants_selection-states_unselected_variants_states_error_properties_colors_leading-icon-color
   );
   --chip-close: var(
-    --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_close-icon-color
+    --recursica_ui-kit_components_chip_variants_selection-states_unselected_variants_states_error_properties_colors_close-icon-color
   );
 }
 
 .root[data-error] .label.label[data-checked] {
   --chip-bg: var(
-    --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_background
+    --recursica_ui-kit_components_chip_variants_selection-states_selected_variants_states_error_properties_colors_background-color
   );
   --chip-border: var(
-    --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_border-color
+    --recursica_ui-kit_components_chip_variants_selection-states_selected_variants_states_error_properties_colors_border-color
   );
   --chip-text: var(
-    --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_text
+    --recursica_ui-kit_components_chip_variants_selection-states_selected_variants_states_error_properties_colors_text-color
   );
   --chip-icon: var(
-    --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_selected-icon-color
+    --recursica_ui-kit_components_chip_variants_selection-states_selected_variants_states_error_properties_colors_selected-icon-color
   );
   --chip-close: var(
-    --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_close-icon-color
+    --recursica_ui-kit_components_chip_variants_selection-states_selected_variants_states_error_properties_colors_close-icon-color
   );
 }
 

package/src/components/DatePicker/DatePicker.module.css

@@ -1,10 +1,9 @@
 /* EXEMPTIONS:
-   - state-specific border-size variables are ignored because a uniform 1px border is applied globally to prevent 
-     unexpected layout shift or flickering during focus, disabled, or error state transitions. */
-/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_border-size */
+   - border-size variables are ignored because a uniform 1px border is applied globally to prevent
+     unexpected layout shift or flickering during focused, disabled, or error state transitions. */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_border-size */
 
 /* LAYOUT SPACING OVERRIDES:
    - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens. */
@@ -108,13 +107,13 @@
 
   /* Base State Default Execution */
   background-color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_date-picker_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_border-color
+    --recursica_ui-kit_components_date-picker_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_date-picker_properties_colors_text-color
   );
 
   outline: none;
@@ -161,7 +160,7 @@
   width: var(--recursica_ui-kit_components_date-picker_properties_icon-size);
   height: var(--recursica_ui-kit_components_date-picker_properties_icon-size);
   color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_leading-icon
+    --recursica_ui-kit_components_date-picker_properties_colors_leading-icon
   );
 }
 
@@ -170,23 +169,16 @@
 -------------------------------------- */
 
 /* Focus State Mapping (Triggered internally via browser pseudo-pseudo-class) */
+/* The token schema no longer provides per-component focus colors; apply the generic focus ring
+   tokens as a box-shadow ring instead of a color swap. */
 .input:focus-within,
 .input:focus {
-  border-color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_border-color
-  );
-  background-color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_background
-  );
-  color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_text
-  );
-}
-
-.root:focus-within .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_leading-icon
-  );
+  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);
 }
 
 /* Error State Mapping (Propagated strictly down from the wrapper DOM context) */
@@ -195,10 +187,10 @@
     --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_background
+    --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_background-color
   ) !important;
   color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_text
+    --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_text-color
   ) !important;
 }
 
@@ -214,10 +206,13 @@
     --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_background
+    --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_background-color
   ) !important;
   color: var(
-    --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_text
+    --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_text-color
+  ) !important;
+  opacity: var(
+    --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_opacity
   ) !important;
   cursor: not-allowed;
 }
@@ -236,7 +231,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: var(
       --recursica_ui-kit_components_hover-card-popover_properties_border-size
@@ -278,9 +273,9 @@
 .day[data-selected],
 .day[data-selected]:hover {
   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
   );
   color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-color
   );
 }

package/src/components/Dropdown/Dropdown.module.css

@@ -1,23 +1,36 @@
 /* EXEMPTIONS:
-   - state-specific border-size variables are ignored because a uniform 1px border is applied globally to prevent 
+   - border-size variables are ignored because a uniform 1px border is applied globally to prevent
      unexpected layout shift or flickering during focus, disabled, or error state transitions. */
-/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_border-size */
 
 /* LAYOUT SPACING OVERRIDES:
-   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens. */
+   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens.
+   - Also sets the --dropdown-control-{max,min}-width hooks consumed inline in Dropdown.tsx, since
+     the token schema no longer provides a single layout-agnostic min/max width. */
 .layoutOverride {
   --form-control-margin-bottom: var(
     --recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_top-bottom-margin
   );
+  --dropdown-control-max-width: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_max-width
+  );
+  --dropdown-control-min-width: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_min-width
+  );
 }
 
 .layoutOverride[data-form-layout="side-by-side"] {
   --form-control-margin-bottom: var(
     --recursica_ui-kit_components_dropdown_variants_layouts_side-by-side_properties_top-bottom-margin
   );
+  --dropdown-control-max-width: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_side-by-side_properties_max-width
+  );
+  --dropdown-control-min-width: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_side-by-side_properties_min-width
+  );
 }
 
 /* HARDCODED VALUES:
@@ -101,13 +114,13 @@
 
   /* Base State Default Execution */
   background-color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_dropdown_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_border-color
+    --recursica_ui-kit_components_dropdown_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_dropdown_properties_colors_text-color
   );
 
   outline: none;
@@ -153,13 +166,13 @@
   width: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
   height: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
   color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_leading-icon
+    --recursica_ui-kit_components_dropdown_properties_colors_leading-icon
   );
 }
 
 .section[data-position="right"] :global(svg) {
   color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_trailing-icon
+    --recursica_ui-kit_components_dropdown_properties_colors_trailing-icon
   );
 }
 
@@ -168,29 +181,16 @@
 -------------------------------------- */
 
 /* Focus State Mapping (Triggered internally via browser pseudo-pseudo-class) */
+/* The token schema no longer provides per-component focus colors; apply the generic focus ring
+   tokens as a box-shadow ring instead of a color swap. */
 .input:focus-within,
 .input:focus {
-  border-color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_border-color
-  );
-  background-color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_background
-  );
-  color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_text
-  );
-}
-
-.root:focus-within .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_leading-icon
-  );
-}
-
-.root:focus-within .section[data-position="right"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_trailing-icon
-  );
+  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);
 }
 
 /* Error State Mapping (Propagated strictly down from the wrapper DOM context) */
@@ -199,10 +199,10 @@
     --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_background
+    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_background-color
   ) !important;
   color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_text
+    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_text-color
   ) !important;
 }
 
@@ -224,10 +224,13 @@
     --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_background
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_background-color
   ) !important;
   color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_text
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_text-color
+  ) !important;
+  opacity: var(
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_opacity
   ) !important;
   cursor: not-allowed;
 }
@@ -250,12 +253,10 @@
 
 .dropdown {
   background-color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_dropdown_properties_colors_background-color
   );
   border: 1px solid
-    var(
-      --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_border-color
-    );
+    var(--recursica_ui-kit_components_dropdown_properties_colors_border-color);
   border-radius: var(
     --recursica_ui-kit_components_dropdown_properties_border-radius
   );
@@ -273,7 +274,7 @@
     --recursica_ui-kit_components_dropdown_properties_text_font-weight
   );
   color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_dropdown_properties_colors_text-color
   );
   padding: calc(
       var(--recursica_ui-kit_components_dropdown_properties_vertical-padding) *
@@ -283,14 +284,16 @@
   cursor: pointer;
 }
 
+/* No per-option selected/hovered tokens exist in the schema; use the generic overlay tint
+   (same technique as Table's row hover) to highlight the active option. */
 .option[data-selected="true"],
 .option[data-combobox-selected="true"],
 .option[data-hovered="true"],
 .option:hover {
-  background-color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_background
-  );
-  color: var(
-    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_text
+  background-color: color-mix(
+    in srgb,
+    var(--recursica_brand_states_hover_color)
+      calc(var(--recursica_brand_states_hover_opacity) * 100%),
+    transparent
   );
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -114,8 +114,8 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       <WithReadOnlyWrapper
         className={wrapperClass}
         style={injectedStyles}
-        controlMaxWidth="var(--recursica_ui-kit_components_dropdown_properties_max-width)"
-        controlMinWidth="var(--recursica_ui-kit_components_dropdown_properties_min-width)"
+        controlMaxWidth="var(--dropdown-control-max-width)"
+        controlMinWidth="var(--dropdown-control-min-width)"
         overStyled={overStyled as true}
         formLayout={formLayout}
         labelSize={labelSize}

package/src/components/FormControlWrapper/FormControlWrapper.module.css

@@ -3,28 +3,29 @@
 .root {
   /* Global Form Field Colors */
   --form-field-background: var(
-    --recursica_ui-kit_globals_form_field_colors_background
+    --recursica_ui-kit_globals_form_field_colors_background-color
   );
   --form-field-background-read-only: var(
-    --recursica_ui-kit_globals_form_field_colors_background-read-only
+    --recursica_ui-kit_globals_form_field_colors_background-color-read-only
   );
-  --form-field-border: var(--recursica_ui-kit_globals_form_field_colors_border);
-  --form-field-border-error: var(
-    --recursica_ui-kit_globals_form_field_colors_border-error
+  --form-field-border: var(
+    --recursica_ui-kit_globals_form_field_colors_border-color
   );
-  --form-field-border-focus: var(
-    --recursica_ui-kit_globals_form_field_colors_border-focus
+  --form-field-border-error: var(
+    --recursica_ui-kit_globals_form_field_colors_error-border-color
   );
   --form-field-border-selected: var(
     --recursica_ui-kit_globals_form_field_colors_border-selected
   );
   --form-field-disabled-background: var(
-    --recursica_ui-kit_globals_form_field_colors_disabled-background
+    --recursica_ui-kit_globals_form_field_colors_disabled-background-color
   );
   --form-field-disabled-text: var(
     --recursica_ui-kit_globals_form_field_colors_disabled-text
   );
-  --form-field-icon: var(--recursica_ui-kit_globals_form_field_colors_icon);
+  --form-field-icon: var(
+    --recursica_ui-kit_globals_form_field_colors_icon-color
+  );
   --form-field-placeholder-text-opacity: var(
     --recursica_ui-kit_globals_form_field_colors_placeholder-text-opacity
   );
@@ -33,15 +34,14 @@
   );
 
   /* Global Form Field Geometric Sizes */
+  /* No focus-specific border-color/border-size tokens exist anymore; components use the generic
+     --recursica_brand_states_focus_* ring tokens directly instead (see e.g. TextField.module.css). */
   --form-field-border-radius: var(
     --recursica_ui-kit_globals_form_field_size_border-radius
   );
   --form-field-border-size-default: var(
     --recursica_ui-kit_globals_form_field_size_border-size-default
   );
-  --form-field-border-size-focus: var(
-    --recursica_ui-kit_globals_form_field_size_border-size-focus
-  );
   --form-field-horizontal-padding: var(
     --recursica_ui-kit_globals_form_field_size_horizontal-padding
   );

package/src/components/HoverCard/HoverCard.module.css

@@ -19,7 +19,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/Label/Label.module.css

@@ -16,7 +16,7 @@
   align-items: baseline;
   box-sizing: border-box;
   margin: 0;
-  color: var(--recursica_ui-kit_components_label_properties_colors_text);
+  color: var(--recursica_ui-kit_components_label_properties_colors_text-color);
 }
 
 .root[data-alignment="left"] {
@@ -62,7 +62,9 @@
   margin-left: var(
     --recursica_ui-kit_components_label_properties_required-indicator-gap
   );
-  color: var(--recursica_ui-kit_components_label_properties_colors_asterisk);
+  color: var(
+    --recursica_ui-kit_components_label_properties_colors_asterisk-color
+  );
 
   /* Inherit identical typography bounds to prevent flex row line-height stretching */
   font-family: var(
@@ -139,5 +141,7 @@
 }
 
 .editIconWrapper[data-replaces-asterisk="true"] {
-  color: var(--recursica_ui-kit_components_label_properties_colors_asterisk);
+  color: var(
+    --recursica_ui-kit_components_label_properties_colors_asterisk-color
+  );
 }