@recursica/mui-adapter 0.18.0 → 0.19.0

package/src/components/Avatar/Avatar.module.css

@@ -191,7 +191,7 @@ HARDCODED VALUES:
 
   /* Image variant styles */
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_image_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_image_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_avatar_variants_styles_image_properties_colors_border-color
@@ -248,7 +248,7 @@ HARDCODED VALUES:
     --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_solid_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_solid_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_solid_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_solid_properties_colors_border-color
@@ -263,7 +263,7 @@ HARDCODED VALUES:
     --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_outline_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_outline_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_outline_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_outline_properties_colors_border-color
@@ -278,7 +278,7 @@ HARDCODED VALUES:
     --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_ghost_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_ghost_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_ghost_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_ghost_properties_colors_border-color
@@ -303,7 +303,7 @@ HARDCODED VALUES:
     --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_solid_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_solid_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_solid_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_solid_properties_colors_border-color
@@ -318,7 +318,7 @@ HARDCODED VALUES:
     --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_outline_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_outline_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_outline_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_outline_properties_colors_border-color
@@ -333,7 +333,7 @@ HARDCODED VALUES:
     --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_ghost_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_ghost_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_ghost_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_ghost_properties_colors_border-color

package/src/components/Badge/Badge.module.css

@@ -68,49 +68,49 @@
 
 .root[data-variant="alert"] {
   background-color: var(
-    --recursica_ui-kit_components_badge_variants_styles_alert_properties_colors_background
+    --recursica_ui-kit_components_badge_variants_styles_alert_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_badge_variants_styles_alert_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_badge_variants_styles_alert_properties_colors_text
+    --recursica_ui-kit_components_badge_variants_styles_alert_properties_colors_text-color
   );
 }
 
 .root[data-variant="primary-color"] {
   background-color: var(
-    --recursica_ui-kit_components_badge_variants_styles_primary-color_properties_colors_background
+    --recursica_ui-kit_components_badge_variants_styles_primary-color_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_badge_variants_styles_primary-color_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_badge_variants_styles_primary-color_properties_colors_text
+    --recursica_ui-kit_components_badge_variants_styles_primary-color_properties_colors_text-color
   );
 }
 
 .root[data-variant="success"] {
   background-color: var(
-    --recursica_ui-kit_components_badge_variants_styles_success_properties_colors_background
+    --recursica_ui-kit_components_badge_variants_styles_success_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_badge_variants_styles_success_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_badge_variants_styles_success_properties_colors_text
+    --recursica_ui-kit_components_badge_variants_styles_success_properties_colors_text-color
   );
 }
 
 .root[data-variant="warning"] {
   background-color: var(
-    --recursica_ui-kit_components_badge_variants_styles_warning_properties_colors_background
+    --recursica_ui-kit_components_badge_variants_styles_warning_properties_colors_background-color
   );
   border-color: var(
     --recursica_ui-kit_components_badge_variants_styles_warning_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_badge_variants_styles_warning_properties_colors_text
+    --recursica_ui-kit_components_badge_variants_styles_warning_properties_colors_text-color
   );
 }
 

package/src/components/Button/Button.module.css

@@ -239,18 +239,8 @@
 }
 
 /* Disabled */
-.root[data-size="default"]:disabled,
-.root[data-size="default"]:global(.Mui-disabled) {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_disabled-opacity
-  );
-  cursor: not-allowed;
-}
-.root[data-size="small"]:disabled,
-.root[data-size="small"]:global(.Mui-disabled) {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_disabled-opacity
-  );
+.root:disabled,
+.root:global(.Mui-disabled) {
   cursor: not-allowed;
 }
 
@@ -264,21 +254,10 @@
   pointer-events: none;
   transition: opacity 150ms ease;
   opacity: 0;
-}
-.root[data-size="default"]::after {
-  background-color: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-color
-  );
-}
-.root[data-size="small"]::after {
-  background-color: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_hover-color
-  );
+  background-color: var(--recursica_brand_states_hover_color);
 }
 .root:hover:not(:disabled):not(:global(.Mui-disabled))::after {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
-  );
+  opacity: var(--recursica_brand_states_hover_opacity);
 }
 
 /* ==== VARIANTS ==== */
@@ -292,13 +271,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
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-color
   );
 }
 .root[data-variant="solid"] .iconWrapper {
@@ -306,12 +285,13 @@
     --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_icon-color
   );
 }
-.root[data-variant="solid"]:hover:not(:disabled):not(:global(.Mui-disabled)) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-hover
+.root[data-variant="solid"]:disabled,
+.root[data-variant="solid"]:global(.Mui-disabled) {
+  opacity: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_variants_states_disabled_properties_opacity
   );
   box-shadow: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_hover-elevation
+    --recursica_ui-kit_components_button_variants_styles_solid_variants_states_disabled_properties_elevation
   );
 }
 
@@ -324,13 +304,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
   );
 }
 .root[data-variant="outline"] .iconWrapper {
@@ -338,12 +318,13 @@
     --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_icon-color
   );
 }
-.root[data-variant="outline"]:hover:not(:disabled):not(:global(.Mui-disabled)) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-hover
+.root[data-variant="outline"]:disabled,
+.root[data-variant="outline"]:global(.Mui-disabled) {
+  opacity: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_variants_states_disabled_properties_opacity
   );
   box-shadow: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_hover-elevation
+    --recursica_ui-kit_components_button_variants_styles_outline_variants_states_disabled_properties_elevation
   );
 }
 
@@ -356,13 +337,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
   );
 }
 .root[data-variant="text"] .iconWrapper {
@@ -370,12 +351,13 @@
     --recursica_ui-kit_components_button_variants_styles_text_properties_colors_icon-color
   );
 }
-.root[data-variant="text"]:hover:not(:disabled):not(:global(.Mui-disabled)) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-hover
+.root[data-variant="text"]:disabled,
+.root[data-variant="text"]:global(.Mui-disabled) {
+  opacity: var(
+    --recursica_ui-kit_components_button_variants_styles_text_variants_states_disabled_properties_opacity
   );
   box-shadow: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_hover-elevation
+    --recursica_ui-kit_components_button_variants_styles_text_variants_states_disabled_properties_elevation
   );
 }
 

package/src/components/Card/Card.module.css

@@ -9,7 +9,7 @@
   --card-padding: var(--recursica_ui-kit_components_card_properties_padding);
 
   background-color: var(
-    --recursica_ui-kit_components_card_properties_colors_background
+    --recursica_ui-kit_components_card_properties_colors_background-color
   );
   border-radius: var(
     --recursica_ui-kit_components_card_properties_borders_border-radius
@@ -32,7 +32,7 @@
 
 .header {
   background-color: var(
-    --recursica_ui-kit_components_card_properties_colors_header-background
+    --recursica_ui-kit_components_card_properties_colors_header-background-color
   );
   padding: var(--recursica_ui-kit_components_card_properties_header-padding);
   color: var(--recursica_ui-kit_components_card_properties_colors_title);
@@ -81,7 +81,7 @@
 
 .footer {
   background-color: var(
-    --recursica_ui-kit_components_card_properties_colors_footer-background
+    --recursica_ui-kit_components_card_properties_colors_footer-background-color
   );
   padding: var(--recursica_ui-kit_components_card_properties_footer-padding);
   border-top: var(--recursica_ui-kit_components_card_properties_divider-size)

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,87 @@
 .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; MUI applies its
+   `disabled` classKey to the same root element as `root`, so `.root.disabled`
+   targets the actual disabled instance and cascades to the decorative
+   icon divs rendered inside it — mirrors the split now required by the
+   token schema, matching the mantine-adapter reference). */
 .input:disabled {
   cursor: not-allowed; /* HARDCODE: disabled state default */
+}
+.root.disabled .input:not(.inputChecked):not(.inputIndeterminate) {
+  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
+  );
+}
+.root.disabled .inputChecked {
+  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
+  );
+}
+.root.disabled .inputIndeterminate {
   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) */
+.inputChecked .icon {
+  color: var(
+    --recursica_ui-kit_components_checkbox_variants_selection-states_checked_properties_colors_icon-color
+  );
+}
+.inputIndeterminate .icon {
+  color: var(
+    --recursica_ui-kit_components_checkbox_variants_selection-states_indeterminate_properties_colors_icon-color
+  );
+}
+.root.disabled .inputChecked .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 {
+.root.disabled .inputIndeterminate .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 +213,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 +243,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
@@ -226,7 +267,7 @@
 .description[data-disabled="true"],
 .error[data-disabled="true"] {
   opacity: var(
-    --recursica_ui-kit_components_checkbox-item_properties_disabled-opacity
+    --recursica_ui-kit_components_checkbox-item_variants_states_disabled_properties_opacity
   );
 }
 

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

@@ -13,6 +13,18 @@
 /* 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 */
 
+/* Additional exemptions matching the reference mantine-adapter's Chip.module.css: per selection/error
+   state, Figma defines multiple icon-color slots (leading-icon-color, selected-icon-color, and for
+   error states also a generic icon-color), but each state only ever consumes ONE of them (leading
+   when unselected, selected when selected). The remaining "off" slots per state are intentionally
+   unused, same as in the mantine reference. */
+/* 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_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_unselected_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_unselected_variants_states_error_properties_colors_selected-icon-color */
+
 /* HARDCODED VALUES
    border-style: solid;  (Baseline reset)
    box-sizing: border-box; (Baseline reset)
@@ -33,19 +45,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
   );
 
   /* Container geometry */
@@ -126,55 +138,55 @@
 /* Default (Unselected) hover/active interactions (Mantine overrides) */
 .root.root[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.root[data-error] {
   --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.root[data-error][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
   );
 }