@recursica/mui-adapter 0.18.0 → 0.19.0

package/src/components/Menu/Menu.module.css

@@ -1,16 +1,17 @@
 /* EXEMPTIONS:
-   - colors_selected-item_supporting-text-color is ignored because selected menu items do not render 
-     supporting secondary text, making selected state overrides for supporting text colors obsolete. */
-/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_selected-item_supporting-text-color */
+   - colors_supporting-text-color (selected variant) is ignored because selected menu items do not render
+     supporting secondary text, making the selected-state override for supporting text colors obsolete. */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_supporting-text-color */
 
 /* HARDCODED VALUES:
    - border-style: solid. Structural rendering rule for the dropdown border (Mantine uses Paper which may not set border natively).
-   - opacity: 0.5 on disabled items. Recursica has no dedicated disabled-opacity token for menu items.
    - NOTE: overflow is intentionally NOT set on .dropdown. Mantine renders sub-menu dropdowns
      inside the parent dropdown DOM tree using Floating UI absolute positioning. Setting
      overflow: hidden clips sub-menus; overflow-y: auto causes unwanted scrollbars.
    - All structural layout (flex, cursor, pointer-events on disabled) is deferred to Mantine's
      native behavior. We only override visual design tokens (colors, typography, spacing, borders).
+   - Hover overlay: the schema no longer provides per-item hover-color/hover-opacity tokens; the
+     overlay now uses the generic --recursica_brand_states_hover_* tokens shared across components.
 */
 
 /* ======================================
@@ -19,7 +20,7 @@
 
 .dropdown {
   background-color: var(
-    --recursica_ui-kit_components_menu_properties_colors_background
+    --recursica_ui-kit_components_menu_properties_colors_background-color
   );
   border-style: solid; /* HARDCODE: Mantine Paper does not set border-style natively */
   border-width: var(--recursica_ui-kit_components_menu_properties_border-size);
@@ -34,10 +35,7 @@
   min-width: var(--recursica_ui-kit_components_menu_properties_min-width);
   max-height: var(--recursica_ui-kit_components_menu_properties_max-height);
   max-width: var(--recursica_ui-kit_components_menu_properties_max-width);
-
-  /* HARDCODE: Figma UI Kit does not export padding tokens for the Menu container itself. 
-     If added in the future, it would be mapped here. */
-  padding: 8px;
+  padding: var(--recursica_ui-kit_components_menu_properties_padding);
 }
 
 /* ======================================
@@ -55,6 +53,7 @@
   border-radius: var(
     --recursica_ui-kit_components_menu-item_properties_border-radius
   );
+  margin-bottom: var(--recursica_ui-kit_components_menu_properties_item-gap);
 
   /* Typography */
   font-family: var(
@@ -84,22 +83,27 @@
 
   /* Default State: Unselected */
   background-color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_background
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_background-color
   );
   color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_text
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_text-color
   );
   opacity: 1;
 }
+.item:last-of-type {
+  margin-bottom: 0;
+}
 
 /* Override Mantine's native hover background to use our overlay technique */
 .item:hover {
   background-color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_background
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_background-color
   );
 }
 
-/* Hover overlay using ::after pseudo-element (same technique as Accordion) */
+/* Hover overlay using ::after pseudo-element (same technique as Accordion); no per-item
+   hover-color/hover-opacity tokens exist anymore, so this uses the generic overlay tokens
+   uniformly regardless of selection state. */
 .item::after {
   content: "";
   position: absolute;
@@ -107,58 +111,46 @@
   border-radius: inherit;
   z-index: 0;
   pointer-events: none;
-  background-color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_hover-color
-  );
+  background-color: var(--recursica_brand_states_hover_color);
   opacity: 0;
   transition: opacity 150ms ease;
 }
 
 .item:hover:not([data-disabled])::after {
-  opacity: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_hover-opacity
-  );
+  opacity: var(--recursica_brand_states_hover_opacity);
 }
 
 /* Selected item state */
 .item[data-selected] {
   background-color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_background
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_background-color
   );
   color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_text
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_text-color
   );
   opacity: 1;
 }
 
-.item[data-selected]::after {
-  background-color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_hover-color
-  );
-}
-
 /* Hovered item state (keyboard navigation) */
 .item[data-hovered] {
   background-color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_background
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_background-color
   );
 }
 .item[data-hovered]::after {
-  opacity: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_hover-opacity
-  );
+  opacity: var(--recursica_brand_states_hover_opacity);
 }
 
-.item[data-hovered][data-selected]::after {
+/* Disabled item (opacity differs depending on selection state) */
+.item[data-disabled]:not([data-selected]) {
   opacity: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_hover-opacity
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_variants_states_disabled_properties_opacity
   );
 }
 
-/* Disabled item */
-.item[data-disabled] {
+.item[data-disabled][data-selected] {
   opacity: var(
-    --recursica_ui-kit_components_menu-item_properties_disabled-opacity
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_variants_states_disabled_properties_opacity
   );
 }
 
@@ -192,7 +184,7 @@
     --recursica_ui-kit_components_menu-item_properties_icon-text-gap
   );
   color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_leading-icon-color
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_leading-icon-color
   );
 }
 
@@ -205,19 +197,19 @@
   );
   margin-left: var(--recursica_ui-kit_components_menu-item_properties_text-gap);
   color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_trailing-icon-color
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_trailing-icon-color
   );
 }
 
 .item[data-selected] .itemSection[data-position="left"] {
   color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_leading-icon-color
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_leading-icon-color
   );
 }
 
 .item[data-selected] .itemSection[data-position="right"] {
   color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_trailing-icon-color
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_trailing-icon-color
   );
 }
 
@@ -271,7 +263,7 @@
   );
 
   color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_supporting-text-color
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_supporting-text-color
   );
   opacity: 0.7;
 }

package/src/components/Modal/Modal.module.css

@@ -1,9 +1,13 @@
 /* EXEMPTIONS:
-   - content-style and header-style parent variables represent raw JSON styling objects rather than 
+   - content-style and header-style parent variables represent raw JSON styling objects rather than
      direct CSS variables and cannot be applied directly in standard CSS files.
-     Sub-properties are fully and individually mapped to elements natively. */
+     Sub-properties are fully and individually mapped to elements natively.
+   - header/footer background-color are ignored because .header/.footer are intentionally
+     transparent (inheriting .content's background), matching Panel's header/footer treatment. */
 /* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style */
 /* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_footer-background-color */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_header-background-color */
 
 .root {
 }
@@ -37,7 +41,7 @@
 
   /* Appearance */
   background-color: var(
-    --recursica_ui-kit_components_modal_properties_colors_background
+    --recursica_ui-kit_components_modal_properties_colors_content-background-color
   );
   box-shadow: var(--recursica_ui-kit_components_modal_properties_elevation);
 
@@ -47,8 +51,12 @@
 }
 
 .header {
-  padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
-    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+  padding: var(
+      --recursica_ui-kit_components_modal_properties_header-footer-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_modal_properties_header-footer-horizontal-padding
+    );
   background-color: transparent; /* Inherit from content */
 }
 
@@ -93,8 +101,12 @@
 }
 
 .scrollArea {
-  padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
-    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+  padding: var(
+      --recursica_ui-kit_components_modal_properties_content-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_modal_properties_content-horizontal-padding
+    );
 
   /* Internal scrolling */
   flex: 1 1 auto;
@@ -137,11 +149,11 @@
   /* Smooth divider transitions */
   transition: border-color 0.15s ease;
   border-top: var(
-      --recursica_ui-kit_components_modal_properties_scroll-divider-thickness
+      --recursica_ui-kit_components_modal_properties_scroll-divider-size
     )
     solid transparent;
   border-bottom: var(
-      --recursica_ui-kit_components_modal_properties_scroll-divider-thickness
+      --recursica_ui-kit_components_modal_properties_scroll-divider-size
     )
     solid transparent;
 }
@@ -159,8 +171,12 @@
 }
 
 .footer {
-  padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
-    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+  padding: var(
+      --recursica_ui-kit_components_modal_properties_header-footer-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_modal_properties_header-footer-horizontal-padding
+    );
   background-color: transparent;
   display: flex;
   justify-content: flex-end;

package/src/components/NumberInput/NumberInput.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_number-input_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_number-input_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_number-input_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 --number-input-control-{max,min}-width hooks consumed inline in NumberInput.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_number-input_variants_layouts_stacked_properties_top-bottom-margin
   );
+  --number-input-control-max-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_stacked_properties_max-width
+  );
+  --number-input-control-min-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_stacked_properties_min-width
+  );
 }
 
 .layoutOverride[data-form-layout="side-by-side"] {
   --form-control-margin-bottom: var(
     --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_top-bottom-margin
   );
+  --number-input-control-max-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_max-width
+  );
+  --number-input-control-min-width: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_min-width
+  );
 }
 
 /* HARDCODED VALUES:
@@ -109,13 +122,13 @@
 
   /* Base State Default Execution */
   background-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_number-input_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_border-color
+    --recursica_ui-kit_components_number-input_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_number-input_properties_colors_text-color
   );
 
   outline: none;
@@ -162,13 +175,13 @@
   width: var(--recursica_ui-kit_components_number-input_properties_icon-size);
   height: var(--recursica_ui-kit_components_number-input_properties_icon-size);
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_leading-icon
+    --recursica_ui-kit_components_number-input_properties_colors_leading-icon
   );
 }
 
 .section[data-position="right"] :global(svg) {
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_trailing-icon
+    --recursica_ui-kit_components_number-input_properties_colors_trailing-icon
   );
 }
 
@@ -188,7 +201,7 @@
   border: none;
   background: transparent;
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_trailing-icon
+    --recursica_ui-kit_components_number-input_properties_colors_trailing-icon
   );
 }
 
@@ -201,30 +214,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_number-input_variants_states_focus_properties_colors_border-color
-  );
-  background-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_background
-  );
-  color: var(
-    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_text
-  );
-}
-
-.root:focus-within .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_leading-icon
-  );
-}
-
-.root:focus-within .section[data-position="right"] :global(svg),
-.root:focus-within .control {
-  color: var(
-    --recursica_ui-kit_components_number-input_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) */
@@ -233,10 +232,10 @@
     --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_background
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_background-color
   ) !important;
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_text
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_text-color
   ) !important;
 }
 
@@ -259,10 +258,13 @@
     --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_background
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_background-color
   ) !important;
   color: var(
-    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_text
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_text-color
+  ) !important;
+  opacity: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_opacity
   ) !important;
   cursor: not-allowed;
 }

package/src/components/NumberInput/NumberInput.tsx

@@ -110,8 +110,8 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       <WithReadOnlyWrapper
         className={wrapperClass}
         style={style as React.CSSProperties}
-        controlMaxWidth="var(--recursica_ui-kit_components_number-input_properties_max-width)"
-        controlMinWidth="var(--recursica_ui-kit_components_number-input_properties_min-width)"
+        controlMaxWidth="var(--number-input-control-max-width)"
+        controlMinWidth="var(--number-input-control-min-width)"
         overStyled={overStyled as true}
         formLayout={formLayout}
         labelSize={labelSize}

package/src/components/Pagination/Pagination.module.css

@@ -145,13 +145,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
   );
 }
 
@@ -160,13 +160,8 @@
   cursor: not-allowed;
 }
 
-.control:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-hover
-  );
-}
-
-/* Hover Overlay */
+/* Hover Overlay: no per-variant hover-color/hover-opacity tokens exist anymore; use the
+   generic overlay tokens shared across components (same as Button). */
 .control::after {
   content: "";
   position: absolute;
@@ -176,15 +171,11 @@
   pointer-events: none;
   transition: opacity 150ms ease;
   opacity: 0;
-  background-color: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-color
-  );
+  background-color: var(--recursica_brand_states_hover_color);
 }
 
 .control:hover:not(:disabled)::after {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
-  );
+  opacity: var(--recursica_brand_states_hover_opacity);
 }
 
 /* Active Style: Solid */
@@ -196,19 +187,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
-  );
-}
-
-.control[data-active]:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-hover
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-color
   );
 }
 
@@ -221,13 +206,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
   );
 
   /* Also explicitly inherit navigation sizes incase they differ from pages */
@@ -246,24 +231,6 @@
     );
 }
 
-.control[data-variant="text"]:hover:not(:disabled) {
-  color: var(
-    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-hover
-  );
-}
-
-/* Hover Overlay for Navigation */
-.control[data-variant="text"]::after {
-  background-color: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-color
-  );
-}
-.control[data-variant="text"]:hover:not(:disabled)::after {
-  opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
-  );
-}
-
 /* Dots */
 .dots {
   display: inline-flex;

package/src/components/Panel/Panel.module.css

@@ -12,7 +12,7 @@
 
 .content {
   background-color: var(
-    --recursica_ui-kit_components_panel_properties_colors_background
+    --recursica_ui-kit_components_panel_properties_colors_background-color
   );
   border-style: solid;
   border-width: var(--recursica_ui-kit_components_panel_properties_border-size);
@@ -43,7 +43,7 @@
 
 .header {
   background-color: var(
-    --recursica_ui-kit_components_panel_properties_colors_header-footer-background
+    --recursica_ui-kit_components_panel_properties_colors_header-background-color
   );
   padding: var(
       --recursica_ui-kit_components_panel_properties_header-footer-vertical-padding
@@ -154,7 +154,7 @@
 
 .footer {
   background-color: var(
-    --recursica_ui-kit_components_panel_properties_colors_header-footer-background
+    --recursica_ui-kit_components_panel_properties_colors_footer-background-color
   );
   padding: var(
       --recursica_ui-kit_components_panel_properties_header-footer-vertical-padding