@recursica/mui-adapter 0.18.0 → 0.19.0

package/dist/src/components/Tree/Tree.d.ts

@@ -1,9 +1,13 @@
 import { default as React } from 'react';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
-export interface TreeProps extends React.ComponentPropsWithoutRef<"div"> {
-    overStyled?: boolean;
-}
+import { RecursicaTreeProps } from '@recursica/adapter-common';
+export type TreeProps = RecursicaOverStyled<RecursicaTreeProps & Omit<React.ComponentPropsWithoutRef<"ul">, "children">>;
 /**
- * Placeholder component for Tree (Coming Soon).
+ * Recursively renders hierarchical `data` as an expandable/selectable tree.
+ *
+ * **Recursica Abstract:**
+ * Wraps `@mui/x-tree-view`'s `RichTreeView` with a fully custom item renderer so every visual
+ * aspect (row box model, selected/unselected colors and typography, indent, item spacing)
+ * comes from Recursica's `tree` design tokens rather than MUI's defaults.
  */
-export declare const Tree: React.ForwardRefExoticComponent<RecursicaOverStyled<TreeProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLUListElement>>;

package/llms.txt

@@ -44,6 +44,7 @@ Each component has its own `USAGE.md` documenting its props, adapter-specific be
 - [Group](src/components/Group/USAGE.md)
 - [HoverCard](src/components/HoverCard/USAGE.md)
 - [Label](src/components/Label/USAGE.md)
+- [Layer](src/components/Layer/USAGE.md)
 - [Link](src/components/Link/USAGE.md)
 - [Loader](src/components/Loader/USAGE.md)
 - [Menu](src/components/Menu/USAGE.md)
@@ -53,6 +54,7 @@ Each component has its own `USAGE.md` documenting its props, adapter-specific be
 - [Panel](src/components/Panel/USAGE.md)
 - [Radio](src/components/Radio/USAGE.md)
 - [ReadOnlyField](src/components/ReadOnlyField/USAGE.md)
+- [RecursicaThemeProvider](src/components/RecursicaThemeProvider/USAGE.md)
 - [SegmentedControl](src/components/SegmentedControl/USAGE.md)
 - [Slider](src/components/Slider/USAGE.md)
 - [Stack](src/components/Stack/USAGE.md)

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mui-adapter"
   },
-  "version": "0.18.0",
+  "version": "0.19.0",
   "publishConfig": {
     "access": "public"
   },
@@ -64,6 +64,7 @@
     "@chromatic-com/storybook": "^5.1.1",
     "@eslint/js": "^9.25.0",
     "@mui/lab": "^7.0.1-beta.25",
+    "@mui/x-tree-view": "^9.11.0",
     "@recursica/recursica-postcss-vars": "*",
     "@recursica/storybook-template": "*",
     "@recursica/token-analyzer": "*",
@@ -107,12 +108,16 @@
     "@emotion/styled": "^11.14.0",
     "@mui/lab": "^7.0.1-beta.25",
     "@mui/material": "^7.3.0",
+    "@mui/x-tree-view": "^9.11.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "peerDependenciesMeta": {
     "@mui/lab": {
       "optional": true
+    },
+    "@mui/x-tree-view": {
+      "optional": true
     }
   }
 }

package/src/components/Accordion/Accordion.module.css

@@ -1,3 +1,11 @@
+/* EXEMPTIONS:
+   - accordion-header open-appearance background-color/border-color are ignored because Forge does
+     not apply a visual swap on expand, even though the token schema defines "open" appearance
+     colors distinct from "closed" (see .control below, which intentionally keeps a constant
+     background/border across collapsed/expanded). Mirrors the mantine-adapter reference. */
+/* recursica-ignore: --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_background-color */
+/* recursica-ignore: --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_border-color */
+
 /* ==== ACCORDION CONTAINER ==== */
 .root {
   box-sizing: border-box;
@@ -16,7 +24,7 @@
     --recursica_ui-kit_components_accordion_properties_colors_border-color
   );
   background-color: var(
-    --recursica_ui-kit_components_accordion_properties_colors_background
+    --recursica_ui-kit_components_accordion_properties_colors_background-color
   );
   box-shadow: var(--recursica_ui-kit_components_accordion_properties_elevation);
 
@@ -31,7 +39,8 @@
 /* ==== ACCORDION ITEM ==== */
 .item {
   box-sizing: border-box;
-  margin: 0;
+  margin: var(--recursica_ui-kit_components_accordion-item_properties_margin);
+  padding: var(--recursica_ui-kit_components_accordion-item_properties_padding);
   position: relative;
   transition: all 0.2s ease;
 
@@ -40,13 +49,13 @@
 
   border-style: solid;
   border-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_item-border-color
+    --recursica_ui-kit_components_accordion-item_properties_colors_border-color
   );
   border-width: var(
-    --recursica_ui-kit_components_accordion-item_properties_item-border-size
+    --recursica_ui-kit_components_accordion-item_properties_border-size
   );
   border-bottom-color: var(
-    --recursica_ui-kit_components_accordion_properties_colors_divider
+    --recursica_ui-kit_components_accordion_properties_colors_divider-color
   );
   border-bottom-width: var(
     --recursica_ui-kit_components_accordion_properties_divider-size
@@ -55,18 +64,11 @@
     --recursica_ui-kit_components_accordion-item_properties_border-radius
   );
   box-shadow: var(
-    --recursica_ui-kit_components_accordion-item_properties_elevation-item
-  );
-
-  background-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_background-collapsed
-  );
-}
-.item:global(.Mui-expanded) {
-  background-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_background-expanded
+    --recursica_ui-kit_components_accordion-item_properties_elevation
   );
 }
+/* The collapsed/expanded background now lives on accordion-header (open/closed appearance),
+   applied via .control below, rather than on the item wrapper itself. */
 .noDivider {
   border-bottom: none !important;
   border-bottom-width: 0 !important;
@@ -81,48 +83,75 @@
   justify-content: space-between;
 
   /* Re-apply gap defined by UI Kit for icons vs text */
-  gap: var(--recursica_ui-kit_components_accordion-item_properties_icon-gap);
+  gap: var(--recursica_ui-kit_components_accordion-header_properties_icon-gap);
 
   /* Strip Mantine's baked padding directly */
   padding: var(
-      --recursica_ui-kit_components_accordion-item_properties_header-vertical-padding
+      --recursica_ui-kit_components_accordion-header_properties_vertical-padding
     )
     var(
-      --recursica_ui-kit_components_accordion-item_properties_header-horizontal-padding
+      --recursica_ui-kit_components_accordion-header_properties_horizontal-padding
     );
-  background-color: transparent;
+
+  /* Background is intentionally constant across collapsed/expanded (Forge doesn't apply a
+     background swap on expand, even though the token schema defines an "open" appearance color) */
+  background-color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_background-color
+  );
+
+  /* Header's own border box, constant across collapsed/expanded (only its closed-state
+     border-color is used, matching the background decision above) */
+  border-style: solid;
+  border-width: var(
+    --recursica_ui-kit_components_accordion-header_properties_border-size
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_accordion-header_properties_border-radius
+  );
+  border-color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_border-color
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_accordion-header_properties_elevation
+  );
 
   transition: background-color 0.15s ease;
   position: relative;
   z-index: 1;
   color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_text
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_text-color
   );
 
   /* Header Typography */
   font-family: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_font-family
+    --recursica_ui-kit_components_accordion-header_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_font-size
+    --recursica_ui-kit_components_accordion-header_properties_text_font-size
   );
   font-weight: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_font-weight
+    --recursica_ui-kit_components_accordion-header_properties_text_font-weight
   );
   font-style: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_font-style
+    --recursica_ui-kit_components_accordion-header_properties_text_font-style
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_letter-spacing
+    --recursica_ui-kit_components_accordion-header_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_line-height
+    --recursica_ui-kit_components_accordion-header_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_text-decoration
+    --recursica_ui-kit_components_accordion-header_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_text-transform
+    --recursica_ui-kit_components_accordion-header_properties_text_text-transform
+  );
+}
+
+.item:global(.Mui-expanded) .control {
+  color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_text-color
   );
 }
 
@@ -139,11 +168,14 @@
   margin: 0 !important;
 }
 
-/* Mantine natively places hover states on the control node. 
-   We explicitly override it with our layer hover tokens via an overlay ::after structure
-   so we can cleanly utilize the hover-opacity token! */
+/* Mantine natively places hover states on the control node. We explicitly re-apply our own
+   constant background (MUI's native :hover CSS would otherwise show through) and use an
+   overlay ::after structure with the generic hover tokens for the actual hover tint; no per-item
+   hover-color/hover-opacity tokens exist anymore. */
 .control:hover {
-  background-color: transparent;
+  background-color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_background-color
+  );
 }
 .control::after {
   content: "";
@@ -152,16 +184,12 @@
   border-radius: inherit;
   z-index: -1;
   pointer-events: none;
-  background-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_hover-color
-  );
+  background-color: var(--recursica_brand_states_hover_color);
   opacity: 0;
   transition: opacity 150ms ease;
 }
 .control:hover:not(:disabled)::after {
-  opacity: var(
-    --recursica_ui-kit_components_accordion-item_properties_hover-opacity
-  );
+  opacity: var(--recursica_brand_states_hover_opacity);
 }
 
 /* Label logic inside the Control wrapper */
@@ -176,13 +204,13 @@
 .chevron {
   flex-shrink: 0;
   width: var(
-    --recursica_ui-kit_components_accordion-item_properties_icon-right-size
+    --recursica_ui-kit_components_accordion-header_properties_icon-right-size
   );
   height: var(
-    --recursica_ui-kit_components_accordion-item_properties_icon-right-size
+    --recursica_ui-kit_components_accordion-header_properties_icon-right-size
   );
   color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_icon
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_icon-color
   );
   margin: 0;
   transition: transform 200ms ease;
@@ -197,6 +225,9 @@
 }
 .item:global(.Mui-expanded) .chevron {
   transform: rotate(180deg);
+  color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_icon-color
+  );
 }
 
 /* ==== LEFT ICON / CUSTOM ICONS ==== */
@@ -206,13 +237,18 @@
   align-items: center;
   justify-content: center;
   width: var(
-    --recursica_ui-kit_components_accordion-item_properties_icon-left-size
+    --recursica_ui-kit_components_accordion-header_properties_icon-left-size
   );
   height: var(
-    --recursica_ui-kit_components_accordion-item_properties_icon-left-size
+    --recursica_ui-kit_components_accordion-header_properties_icon-left-size
+  );
+  color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_icon-color
   );
+}
+.item:global(.Mui-expanded) .iconLeftWrapper {
   color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_icon
+    --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_icon-color
   );
 }
 .iconLeftWrapper > * {
@@ -225,24 +261,24 @@
 .panel {
   box-sizing: border-box;
   margin: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-margin
+    --recursica_ui-kit_components_accordion-content_properties_margin
   );
   padding: 0; /* Overriding dynamic layout structure */
   background-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_content-background
+    --recursica_ui-kit_components_accordion-content_properties_colors_background-color
   );
   border-style: solid;
   border-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_content-border-color
+    --recursica_ui-kit_components_accordion-content_properties_colors_border-color
   );
   border-width: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-border-size
+    --recursica_ui-kit_components_accordion-content_properties_border-size
   );
   border-radius: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-border-radius
+    --recursica_ui-kit_components_accordion-content_properties_border-radius
   );
   box-shadow: var(
-    --recursica_ui-kit_components_accordion-item_properties_elevation-content
+    --recursica_ui-kit_components_accordion-content_properties_elevation
   );
 }
 
@@ -251,44 +287,44 @@
   /* Strip Mantine padding and apply logic directly mapped */
   padding: 0
     var(
-      --recursica_ui-kit_components_accordion-item_properties_content-horizontal-padding
+      --recursica_ui-kit_components_accordion-content_properties_horizontal-padding
     )
     var(
-      --recursica_ui-kit_components_accordion-item_properties_content-bottom-padding
+      --recursica_ui-kit_components_accordion-content_properties_bottom-padding
     );
 
   /* Apply offset gap explicitly calculated below header */
   padding-top: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-top-padding
+    --recursica_ui-kit_components_accordion-content_properties_top-padding
   );
 
   color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_content-text
+    --recursica_ui-kit_components_accordion-content_properties_colors_text-color
   );
 
   /* Content Typography */
   font-family: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_font-family
+    --recursica_ui-kit_components_accordion-content_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_font-size
+    --recursica_ui-kit_components_accordion-content_properties_text_font-size
   );
   font-weight: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_font-weight
+    --recursica_ui-kit_components_accordion-content_properties_text_font-weight
   );
   font-style: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_font-style
+    --recursica_ui-kit_components_accordion-content_properties_text_font-style
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_letter-spacing
+    --recursica_ui-kit_components_accordion-content_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_line-height
+    --recursica_ui-kit_components_accordion-content_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_text-decoration
+    --recursica_ui-kit_components_accordion-content_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_text-transform
+    --recursica_ui-kit_components_accordion-content_properties_text_text-transform
   );
 }

package/src/components/Autocomplete/Autocomplete.module.css

@@ -7,21 +7,34 @@
 /* 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:
-   - border-width: 1px. Native geometric boundary for the input box.
    - border-style: solid. Native structural rendering rule.
    - outline: none. Bypassing browser focus rings to rely strictly on Recursica focus states natively.
    - flex/layout: display: flex on the root wrapper safely encapsulating internal section rendering.
@@ -31,9 +44,7 @@
   display: flex;
   position: relative;
   width: 100% !important; /* Override MUI default 300px width */
-  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(
@@ -66,9 +77,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
   ) !important;
@@ -84,7 +93,9 @@
   border-radius: var(
     --recursica_ui-kit_components_autocomplete_properties_border-radius
   );
-  border-width: 1px;
+  border-width: var(
+    --recursica_ui-kit_components_autocomplete_properties_border-size
+  );
   border-style: solid;
 
   /* Strict Typography Unification */
@@ -115,13 +126,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;
@@ -175,13 +186,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
   );
 }
 
@@ -189,11 +200,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
@@ -212,7 +223,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(
@@ -226,6 +237,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"],
@@ -235,11 +248,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
   );
 }
 
@@ -248,29 +261,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) */
@@ -279,10 +279,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
   );
 }
 
@@ -304,10 +304,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
   );
 }
 

package/src/components/Autocomplete/Autocomplete.tsx

@@ -122,8 +122,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}