@recursica/mantine-adapter 0.35.0 → 0.36.0

package/src/components/AutoComplete/AutoComplete.module.css

@@ -1,23 +1,36 @@
 /* EXEMPTIONS:
-   - state-specific border-size variables are ignored because the input box uses a uniform static boundary to prevent 
-     unexpected layout shifts or flickering when switching between active, focused, or error states. */
-/* recursica-ignore: --recursica_ui-kit_components_autocomplete_variants_states_default_properties_border-size */
+   - border-size variables are ignored because the input box uses a uniform static boundary to prevent
+     unexpected layout shifts or flickering when switching between focused, disabled, or error states. */
+/* recursica-ignore: --recursica_ui-kit_components_autocomplete_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_autocomplete_variants_states_disabled_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_autocomplete_variants_states_error_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_autocomplete_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 --autocomplete-control-{max,min}-width hooks consumed inline in AutoComplete.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_autocomplete_variants_layouts_stacked_properties_top-bottom-margin
   );
+  --autocomplete-control-max-width: var(
+    --recursica_ui-kit_components_autocomplete_variants_layouts_stacked_properties_max-width
+  );
+  --autocomplete-control-min-width: var(
+    --recursica_ui-kit_components_autocomplete_variants_layouts_stacked_properties_min-width
+  );
 }
 
 .layoutOverride[data-form-layout="side-by-side"] {
   --form-control-margin-bottom: var(
     --recursica_ui-kit_components_autocomplete_variants_layouts_side-by-side_properties_top-bottom-margin
   );
+  --autocomplete-control-max-width: var(
+    --recursica_ui-kit_components_autocomplete_variants_layouts_side-by-side_properties_max-width
+  );
+  --autocomplete-control-min-width: var(
+    --recursica_ui-kit_components_autocomplete_variants_layouts_side-by-side_properties_min-width
+  );
 }
 
 /* HARDCODED VALUES:
@@ -31,9 +44,7 @@
   display: flex;
   position: relative;
   width: 100%;
-  min-height: var(
-    --recursica_ui-kit_components_autocomplete_properties_min-height
-  );
+  min-height: var(--recursica_ui-kit_components_autocomplete_properties_height);
 
   /* Override Mantine native Input variables governing section spacing padding mathematics safely */
   --input-left-section-size: calc(
@@ -59,9 +70,7 @@
   margin: 0;
 
   /* Box Geometry */
-  min-height: var(
-    --recursica_ui-kit_components_autocomplete_properties_min-height
-  );
+  min-height: var(--recursica_ui-kit_components_autocomplete_properties_height);
   padding-top: var(
     --recursica_ui-kit_components_autocomplete_properties_vertical-padding
   );
@@ -108,13 +117,13 @@
 
   /* Base State Default Execution */
   background-color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_autocomplete_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_default_properties_colors_border-color
+    --recursica_ui-kit_components_autocomplete_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_autocomplete_properties_colors_text-color
   );
 
   outline: none;
@@ -161,13 +170,13 @@
   width: var(--recursica_ui-kit_components_autocomplete_properties_icon-size);
   height: var(--recursica_ui-kit_components_autocomplete_properties_icon-size);
   color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_default_properties_colors_leading-icon
+    --recursica_ui-kit_components_autocomplete_properties_colors_leading-icon
   );
 }
 
 .section[data-position="right"] :global(svg) {
   color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_default_properties_colors_trailing-icon
+    --recursica_ui-kit_components_autocomplete_properties_colors_trailing-icon
   );
 }
 
@@ -175,11 +184,11 @@
 /* We want to make sure the dropdown inherits font correctly. */
 .dropdown {
   background-color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_autocomplete_properties_colors_background-color
   );
   border: 1px solid
     var(
-      --recursica_ui-kit_components_autocomplete_variants_states_default_properties_colors_border-color
+      --recursica_ui-kit_components_autocomplete_properties_colors_border-color
     );
   border-radius: var(
     --recursica_ui-kit_components_autocomplete_properties_border-radius
@@ -198,7 +207,7 @@
     --recursica_ui-kit_components_autocomplete_properties_text_font-weight
   );
   color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_autocomplete_properties_colors_text-color
   );
   padding: calc(
       var(
@@ -212,6 +221,8 @@
   cursor: pointer;
 }
 
+/* No per-option selected/hovered tokens exist in the schema; use the generic overlay tint
+   (same technique as Table/Dropdown) to highlight the active option. */
 .option[data-selected="true"],
 .option[data-selected],
 .option[data-combobox-selected="true"],
@@ -221,11 +232,11 @@
 .option[data-hovered="true"],
 .option[data-hovered],
 .option:hover {
-  background-color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_focus_properties_colors_background
-  );
-  color: var(
-    --recursica_ui-kit_components_autocomplete_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
   );
 }
 
@@ -234,29 +245,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_autocomplete_variants_states_focus_properties_colors_border-color
-  );
-  background-color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_focus_properties_colors_background
-  );
-  color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_focus_properties_colors_text
-  );
-}
-
-.root:focus-within .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_focus_properties_colors_leading-icon
-  );
-}
-
-.root:focus-within .section[data-position="right"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_autocomplete_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) */
@@ -265,10 +263,10 @@
     --recursica_ui-kit_components_autocomplete_variants_states_error_properties_colors_border-color
   );
   background-color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_error_properties_colors_background
+    --recursica_ui-kit_components_autocomplete_variants_states_error_properties_colors_background-color
   );
   color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_error_properties_colors_text
+    --recursica_ui-kit_components_autocomplete_variants_states_error_properties_colors_text-color
   );
 }
 
@@ -290,10 +288,13 @@
     --recursica_ui-kit_components_autocomplete_variants_states_disabled_properties_colors_border-color
   );
   background-color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_disabled_properties_colors_background
+    --recursica_ui-kit_components_autocomplete_variants_states_disabled_properties_colors_background-color
   );
   color: var(
-    --recursica_ui-kit_components_autocomplete_variants_states_disabled_properties_colors_text
+    --recursica_ui-kit_components_autocomplete_variants_states_disabled_properties_colors_text-color
+  );
+  opacity: var(
+    --recursica_ui-kit_components_autocomplete_variants_states_disabled_properties_opacity
   );
   cursor: not-allowed;
 }

package/src/components/AutoComplete/AutoComplete.tsx

@@ -121,8 +121,8 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(
       <WithReadOnlyWrapper
         className={wrapperClass}
         style={style as React.CSSProperties}
-        controlMaxWidth="var(--recursica_ui-kit_components_autocomplete_properties_max-width)"
-        controlMinWidth="var(--recursica_ui-kit_components_autocomplete_properties_min-width)"
+        controlMaxWidth="var(--autocomplete-control-max-width)"
+        controlMinWidth="var(--autocomplete-control-min-width)"
         overStyled={overStyled as true}
         formLayout={formLayout}
         labelSize={labelSize}

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

@@ -282,16 +282,7 @@
 }
 
 /* Disabled */
-.root[data-size="default"]:disabled {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_disabled-opacity
-  );
-  cursor: not-allowed;
-}
-.root[data-size="small"]:disabled {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_disabled-opacity
-  );
+.root:disabled {
   cursor: not-allowed;
 }
 
@@ -305,26 +296,10 @@
   pointer-events: none;
   transition: opacity 150ms ease;
   opacity: 0;
+  background-color: var(--recursica_brand_states_hover_color);
 }
-.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
-  );
-}
-.root[data-size="default"]:hover:not(:disabled)::after {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
-  );
-}
-.root[data-size="small"]:hover:not(:disabled)::after {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_hover-opacity
-  );
+.root:hover:not(:disabled)::after {
+  opacity: var(--recursica_brand_states_hover_opacity);
 }
 /* ==== VARIANTS ==== */
 
@@ -337,13 +312,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
   );
 
   .iconWrapper {
@@ -352,26 +327,12 @@
     );
   }
 }
-.root[data-variant="solid"]:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-hover
-  );
-  border-color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_border-color-hover
-  );
-  box-shadow: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_hover-elevation
-  );
-
-  .iconWrapper {
-    color: var(
-      --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_icon-color-hover
-    );
-  }
-}
 .root[data-variant="solid"]: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_disabled-elevation
+    --recursica_ui-kit_components_button_variants_styles_solid_variants_states_disabled_properties_elevation
   );
 }
 
@@ -384,13 +345,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
   );
 
   .iconWrapper {
@@ -399,26 +360,12 @@
     );
   }
 }
-.root[data-variant="outline"]:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-hover
-  );
-  border-color: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_border-color-hover
-  );
-  box-shadow: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_hover-elevation
-  );
-
-  .iconWrapper {
-    color: var(
-      --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_icon-color-hover
-    );
-  }
-}
 .root[data-variant="outline"]: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_disabled-elevation
+    --recursica_ui-kit_components_button_variants_styles_outline_variants_states_disabled_properties_elevation
   );
 }
 
@@ -431,13 +378,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
   );
 
   .iconWrapper {
@@ -446,25 +393,11 @@
     );
   }
 }
-.root[data-variant="text"]:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-hover
-  );
-  border-color: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_border-color-hover
-  );
-  box-shadow: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_hover-elevation
-  );
-
-  .iconWrapper {
-    color: var(
-      --recursica_ui-kit_components_button_variants_styles_text_properties_colors_icon-color-hover
-    );
-  }
-}
 .root[data-variant="text"]: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_disabled-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);
@@ -69,7 +69,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)