@recursica/mui-adapter 0.18.0 → 0.19.0

package/src/components/TextArea/TextArea.module.css

@@ -1,23 +1,36 @@
 /* EXEMPTIONS:
-   - state-specific border-size variables are ignored because a uniform 1px border is applied globally to prevent 
-     unexpected layout shift or flickering during focus, disabled, or error state transitions. */
-/* recursica-ignore: --recursica_ui-kit_components_textarea_variants_states_default_properties_border-size */
+   - border-size variables are ignored because a uniform 1px border is applied globally to prevent
+     unexpected layout shift or flickering during focused, disabled, or error state transitions. */
+/* recursica-ignore: --recursica_ui-kit_components_textarea_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_textarea_variants_states_disabled_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_textarea_variants_states_error_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_textarea_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 --textarea-control-{max,min}-width hooks consumed inline in TextArea.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_textarea_variants_layouts_stacked_properties_top-bottom-margin
   );
+  --textarea-control-max-width: var(
+    --recursica_ui-kit_components_textarea_variants_layouts_stacked_properties_max-width
+  );
+  --textarea-control-min-width: var(
+    --recursica_ui-kit_components_textarea_variants_layouts_stacked_properties_min-width
+  );
 }
 
 .layoutOverride[data-form-layout="side-by-side"] {
   --form-control-margin-bottom: var(
     --recursica_ui-kit_components_textarea_variants_layouts_side-by-side_properties_top-bottom-margin
   );
+  --textarea-control-max-width: var(
+    --recursica_ui-kit_components_textarea_variants_layouts_side-by-side_properties_max-width
+  );
+  --textarea-control-min-width: var(
+    --recursica_ui-kit_components_textarea_variants_layouts_side-by-side_properties_min-width
+  );
 }
 
 /* HARDCODED VALUES:
@@ -95,13 +108,13 @@
 
   /* Base State Default Execution */
   background-color: var(
-    --recursica_ui-kit_components_textarea_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_textarea_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_textarea_variants_states_default_properties_colors_border-color
+    --recursica_ui-kit_components_textarea_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_textarea_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_textarea_properties_colors_text-color
   );
 
   outline: none;
@@ -119,17 +132,16 @@
 -------------------------------------- */
 
 /* Focus State Mapping (Triggered internally via browser focus rules) */
+/* 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_textarea_variants_states_focus_properties_colors_border-color
-  );
-  background-color: var(
-    --recursica_ui-kit_components_textarea_variants_states_focus_properties_colors_background
-  );
-  color: var(
-    --recursica_ui-kit_components_textarea_variants_states_focus_properties_colors_text
-  );
+  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) */
@@ -138,10 +150,10 @@
     --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_background
+    --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_background-color
   ) !important;
   color: var(
-    --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_text
+    --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_text-color
   ) !important;
 }
 
@@ -151,10 +163,13 @@
     --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_background
+    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_background-color
   ) !important;
   color: var(
-    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_text
+    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_text-color
+  ) !important;
+  opacity: var(
+    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_opacity
   ) !important;
   cursor: not-allowed;
 }

package/src/components/TextArea/TextArea.tsx

@@ -105,8 +105,8 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       <WithReadOnlyWrapper
         className={wrapperClass}
         style={style as React.CSSProperties}
-        controlMaxWidth="var(--recursica_ui-kit_components_textarea_properties_max-width)"
-        controlMinWidth="var(--recursica_ui-kit_components_textarea_properties_min-width)"
+        controlMaxWidth="var(--textarea-control-max-width)"
+        controlMinWidth="var(--textarea-control-min-width)"
         overStyled={overStyled as true}
         formLayout={formLayout}
         labelSize={labelSize}

package/src/components/TextField/TextField.module.css

@@ -7,21 +7,34 @@
 /* recursica-ignore: --recursica_ui-kit_components_text-field_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 --text-field-control-{max,min}-width hooks consumed inline in TextField.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_text-field_variants_layouts_stacked_properties_top-bottom-margin
   );
+  --text-field-control-max-width: var(
+    --recursica_ui-kit_components_text-field_variants_layouts_stacked_properties_max-width
+  );
+  --text-field-control-min-width: var(
+    --recursica_ui-kit_components_text-field_variants_layouts_stacked_properties_min-width
+  );
 }
 
 .layoutOverride[data-form-layout="side-by-side"] {
   --form-control-margin-bottom: var(
     --recursica_ui-kit_components_text-field_variants_layouts_side-by-side_properties_top-bottom-margin
   );
+  --text-field-control-max-width: var(
+    --recursica_ui-kit_components_text-field_variants_layouts_side-by-side_properties_max-width
+  );
+  --text-field-control-min-width: var(
+    --recursica_ui-kit_components_text-field_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.
@@ -65,18 +78,20 @@
   border-radius: var(
     --recursica_ui-kit_components_text-field_properties_border-radius
   );
-  border-width: 1px;
+  border-width: var(
+    --recursica_ui-kit_components_text-field_properties_border-size
+  );
   border-style: solid;
 
   /* Base State Default Execution */
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_text-field_properties_colors_background-color
   );
   border-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_border-color
+    --recursica_ui-kit_components_text-field_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_text-field_properties_colors_text-color
   );
 
   /* Override MUI/Mantine native Input variables governing section spacing padding mathematics safely */
@@ -170,13 +185,13 @@
   width: var(--recursica_ui-kit_components_text-field_properties_icon-size);
   height: var(--recursica_ui-kit_components_text-field_properties_icon-size);
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_leading-icon
+    --recursica_ui-kit_components_text-field_properties_colors_leading-icon
   );
 }
 
 .section[data-position="right"] :global(svg) {
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_trailing-icon
+    --recursica_ui-kit_components_text-field_properties_colors_trailing-icon
   );
 }
 
@@ -185,29 +200,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 (matches mantine-adapter reference). */
 .root:focus-within,
 .root:focus {
-  border-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_border-color
-  );
-  background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_background
-  );
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_text
-  );
-}
-
-.root:focus-within .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_leading-icon
-  );
-}
-
-.root:focus-within .section[data-position="right"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_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) */
@@ -216,10 +218,10 @@
     --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_border-color
   );
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_background
+    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_background-color
   );
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_text
+    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_text-color
   );
 }
 
@@ -241,10 +243,13 @@
     --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_border-color
   );
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_background
+    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_background-color
   );
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_text
+    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_text-color
+  );
+  opacity: var(
+    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_opacity
   );
   cursor: not-allowed;
 }

package/src/components/TextField/TextField.tsx

@@ -126,8 +126,8 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       <WithReadOnlyWrapper
         className={wrapperClass}
         style={style as React.CSSProperties}
-        controlMaxWidth="var(--recursica_ui-kit_components_text-field_properties_max-width)"
-        controlMinWidth="var(--recursica_ui-kit_components_text-field_properties_min-width)"
+        controlMaxWidth="var(--text-field-control-max-width)"
+        controlMinWidth="var(--text-field-control-min-width)"
         overStyled={overStyled as true}
         formLayout={formLayout}
         labelSize={labelSize}

package/src/components/Timeline/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,5 @@
+# Timeline Implementation Notes
+
+- **`TimelineItem.tsx`'s `classes` prop likely does nothing (needs follow-up):** `TimelineItem.tsx` passes `classes={{ item: styles.item, itemBody: styles.itemBody, itemContent: styles.itemContent, itemBullet: styles.itemBullet, itemTitle: styles.itemTitle }}` to `MuiTimelineItem`. But `@mui/lab`'s `TimelineItem` only defines these class slots (see `node_modules/@mui/lab/TimelineItem/timelineItemClasses.d.ts`): `root`, `positionLeft`, `positionRight`, `positionAlternate`, `positionAlternateReverse`, `missingOppositeContent`. There is no `item`/`itemBody`/`itemContent`/`itemBullet`/`itemTitle` slot — `useUtilityClasses` in `TimelineItem.js` builds its class list from a fixed `slots` object keyed only by those real slot names and passes it through `composeClasses`, which ignores any other keys on the `classes` object we pass in. So `.item`, `.itemBody`, `.itemContent`, `.itemBullet`, and `.itemTitle` in `Timeline.module.css` (lines with those selectors) are not actually attached to any rendered element today — they're dead CSS.
+  - Discovered 2026-08-06 while wiring up the `--recursica_ui-kit_components_timeline_properties_item-gap` token (see changeset `fix-mui-adapter-broken-tokens`). That specific fix didn't depend on these classes — it uses `gap` on `.root` (a real, correctly-applied slot), which spaces direct `<li>` children regardless of their own class — so it's unaffected by this bug and needed no workaround.
+  - **Needs a real fix later:** likely means auditing which of `.item`/`.itemBody`/`.itemContent`/`.itemBullet`/`.itemTitle`'s rules are actually load-bearing (vs. now-inert overrides of Mantine's naming that never carried over structurally to MUI), and either (a) finding the correct way to target those parts under MUI's actual DOM (e.g. `:global()` selectors against MUI's own internal class names, similar to the pattern used elsewhere in this adapter for `TableCell`/`TableRow`), or (b) restructuring `TimelineItem.tsx` to apply these as plain `className`s on wrapper elements it already renders internally, since `classes` won't work for slots MUI doesn't define.

package/src/components/Timeline/Timeline.module.css

@@ -7,17 +7,18 @@
 .root {
   display: flex;
   flex-direction: column;
+  gap: var(--recursica_ui-kit_components_timeline_properties_item-gap);
 }
 
 .item {
   /* Mantine uses these vars to calculate the exact left: position of the connector line */
   --tl-line-width: var(
-    --recursica_ui-kit_components_timeline_properties_inactive-connector-size
+    --recursica_ui-kit_components_timeline_variants_selection-states_inactive_properties_connector-size
   ) !important;
 
   &[data-active] {
     --tl-line-width: var(
-      --recursica_ui-kit_components_timeline_properties_active-connector-size
+      --recursica_ui-kit_components_timeline_variants_selection-states_active_properties_connector-size
     ) !important;
   }
 
@@ -47,20 +48,20 @@
   /* Inactive connector */
   &::before {
     border-left-width: var(
-      --recursica_ui-kit_components_timeline_properties_inactive-connector-size
+      --recursica_ui-kit_components_timeline_variants_selection-states_inactive_properties_connector-size
     ) !important;
     border-left-color: var(
-      --recursica_ui-kit_components_timeline_properties_colors_inactive-connector-color
+      --recursica_ui-kit_components_timeline_variants_selection-states_inactive_properties_colors_connector-color
     ) !important;
   }
 
   /* Active connector */
   &[data-active]::before {
     border-left-width: var(
-      --recursica_ui-kit_components_timeline_properties_active-connector-size
+      --recursica_ui-kit_components_timeline_variants_selection-states_active_properties_connector-size
     ) !important;
     border-left-color: var(
-      --recursica_ui-kit_components_timeline_properties_colors_active-connector-color
+      --recursica_ui-kit_components_timeline_variants_selection-states_active_properties_colors_connector-color
     ) !important;
   }
 }
@@ -89,18 +90,18 @@
     ) !important;
 
     background-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_inactive-background
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_variants_selection-states_inactive_properties_colors_background-color
     ) !important;
     border-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_inactive-border-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_variants_selection-states_inactive_properties_colors_border-color
     ) !important;
   }
   :global(.mantine-Timeline-item)[data-variant="default"][data-active] & {
     background-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_active-background
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_variants_selection-states_active_properties_colors_background-color
     ) !important;
     border-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_active-border-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_variants_selection-states_active_properties_colors_border-color
     ) !important;
   }
 
@@ -120,13 +121,13 @@
     ) !important;
 
     background-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_inactive-background
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_variants_selection-states_inactive_properties_colors_background-color
     ) !important;
     border-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_inactive-border-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_variants_selection-states_inactive_properties_colors_border-color
     ) !important;
     color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_inactive-icon-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_variants_selection-states_inactive_properties_colors_icon-color
     ) !important;
 
     /* Propagate icon size */
@@ -144,13 +145,13 @@
   }
   :global(.mantine-Timeline-item)[data-variant="icon"][data-active] & {
     background-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_active-background
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_variants_selection-states_active_properties_colors_background-color
     ) !important;
     border-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_active-border-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_variants_selection-states_active_properties_colors_border-color
     ) !important;
     color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_active-icon-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_variants_selection-states_active_properties_colors_icon-color
     ) !important;
   }
 
@@ -170,13 +171,13 @@
     ) !important;
 
     background-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_inactive-background
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_variants_selection-states_inactive_properties_colors_background-color
     ) !important;
     border-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_inactive-border-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_variants_selection-states_inactive_properties_colors_border-color
     ) !important;
     color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_inactive-icon-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_variants_selection-states_inactive_properties_colors_icon-color
     ) !important;
 
     font-size: var(
@@ -194,13 +195,13 @@
   :global(.mantine-Timeline-item)[data-variant="icon-alternative"][data-active]
     & {
     background-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_active-background
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_variants_selection-states_active_properties_colors_background-color
     ) !important;
     border-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_active-border-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_variants_selection-states_active_properties_colors_border-color
     ) !important;
     color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_active-icon-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_variants_selection-states_active_properties_colors_icon-color
     ) !important;
   }
 
@@ -214,25 +215,25 @@
       --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_border-size
     ) !important;
     opacity: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_inactive-avatar-opacity
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_variants_selection-states_inactive_properties_avatar-opacity
     ) !important;
 
     background-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_inactive-background
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_variants_selection-states_inactive_properties_colors_background-color
     ) !important;
     border-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_inactive-border-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_variants_selection-states_inactive_properties_colors_border-color
     ) !important;
   }
   :global(.mantine-Timeline-item)[data-variant="avatar"][data-active] & {
     opacity: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_active-avatar-opacity
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_variants_selection-states_active_properties_avatar-opacity
     ) !important;
     background-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_active-background
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_variants_selection-states_active_properties_colors_background-color
     ) !important;
     border-color: var(
-      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_active-border-color
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_variants_selection-states_active_properties_colors_border-color
     ) !important;
   }
 }
@@ -270,13 +271,13 @@
 
   /* Inactive Title Color */
   color: var(
-    --recursica_ui-kit_components_timeline_properties_colors_inactive-title-color
+    --recursica_ui-kit_components_timeline_variants_selection-states_inactive_properties_colors_title-color
   ) !important;
 
   /* Active Title Color */
   :global(.mantine-Timeline-item)[data-active] & {
     color: var(
-      --recursica_ui-kit_components_timeline_properties_colors_active-title-color
+      --recursica_ui-kit_components_timeline_variants_selection-states_active_properties_colors_title-color
     ) !important;
   }
 }
@@ -319,12 +320,12 @@
   );
 
   color: var(
-    --recursica_ui-kit_components_timeline_properties_colors_inactive-description-color
+    --recursica_ui-kit_components_timeline_variants_selection-states_inactive_properties_colors_description-color
   );
 
   :global(.mantine-Timeline-item)[data-active] & {
     color: var(
-      --recursica_ui-kit_components_timeline_properties_colors_active-description-color
+      --recursica_ui-kit_components_timeline_variants_selection-states_active_properties_colors_description-color
     );
   }
 }
@@ -356,12 +357,12 @@
   );
 
   color: var(
-    --recursica_ui-kit_components_timeline_properties_colors_inactive-timestamp-color
+    --recursica_ui-kit_components_timeline_variants_selection-states_inactive_properties_colors_timestamp-color
   );
 
   :global(.mantine-Timeline-item)[data-active] & {
     color: var(
-      --recursica_ui-kit_components_timeline_properties_colors_active-timestamp-color
+      --recursica_ui-kit_components_timeline_variants_selection-states_active_properties_colors_timestamp-color
     );
   }
 }

package/src/components/Toast/Toast.module.css

@@ -6,7 +6,7 @@
 /* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-3 */
 
 /* HARDCODED VALUES:
-   - border-style: none. To ensure the notification doesn't render unwanted borders unless specified.
+   - border-style: solid. Baseline so the per-variant border-color tokens actually render.
  */
 
 /* ======================================
@@ -14,7 +14,14 @@
    ====================================== */
 
 .root {
-  border-style: none; /* HARDCODE: Reset to ensure clean shadow boundaries */
+  border-radius: var(
+    --recursica_ui-kit_components_toast_properties_border-radius
+  );
+  border-width: var(--recursica_ui-kit_components_toast_properties_border-size);
+  border-style: solid; /* HARDCODE: baseline so border-color tokens render */
+  border-color: var(
+    --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_border-color
+  );
   box-shadow: var(
     --recursica_ui-kit_components_toast_properties_elevation_layer-0
   );
@@ -26,7 +33,7 @@
 
   /* Default Variant (Base) */
   background-color: var(
-    --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_background
+    --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_background-color
   );
   gap: var(--recursica_ui-kit_components_toast_properties_spacing);
 
@@ -43,7 +50,7 @@
     background-color: transparent !important; /* Remove Mantine's native circle background */
 
     color: var(
-      --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_text
+      --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_text-color
     );
   }
 
@@ -53,7 +60,7 @@
   & .title,
   & .description {
     color: var(
-      --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_text
+      --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_text-color
     );
   }
   & .closeButton {
@@ -65,18 +72,21 @@
   /* Error Variant styling */
   &[data-variant="error"] {
     background-color: var(
-      --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_background
+      --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_background-color
+    );
+    border-color: var(
+      --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_border-color
     );
 
     & .icon {
       color: var(
-        --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_text
+        --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_text-color
       ) !important;
     }
     & .title,
     & .description {
       color: var(
-        --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_text
+        --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_text-color
       );
     }
     & .closeButton {
@@ -89,18 +99,21 @@
   /* Success Variant styling */
   &[data-variant="success"] {
     background-color: var(
-      --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_background
+      --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_background-color
+    );
+    border-color: var(
+      --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_border-color
     );
 
     & .icon {
       color: var(
-        --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_text
+        --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_text-color
       ) !important;
     }
     & .title,
     & .description {
       color: var(
-        --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_text
+        --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_text-color
       );
     }
     & .closeButton {

package/src/components/Tooltip/Tooltip.module.css

@@ -23,7 +23,7 @@
 
 .tooltip {
   background-color: var(
-    --recursica_ui-kit_components_tooltip_properties_colors_background
+    --recursica_ui-kit_components_tooltip_properties_colors_background-color
   );
   border-style: solid; /* HARDCODE: Mantine Box does not set border-style natively */
   border-width: var(
@@ -76,7 +76,9 @@
     --recursica_ui-kit_components_tooltip_properties_text_text-transform
   );
 
-  color: var(--recursica_ui-kit_components_tooltip_properties_colors_text);
+  color: var(
+    --recursica_ui-kit_components_tooltip_properties_colors_text-color
+  );
 }
 
 /* ======================================

package/src/components/Tree/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,21 @@
+# Tree Implementation Notes
+
+- **New dependency: `@mui/x-tree-view`.** Neither `@mui/material` nor `@mui/lab` (already a peer dep, used for Timeline) ships a tree component. `@mui/x-tree-view`'s free/MIT community edition (`RichTreeView` + `TreeItem` building blocks) was added as an optional peer + dev dependency (mirroring how `@mui/lab` is declared), confirmed with the user before adding since it's a new external dependency, not a mechanical port.
+
+- **`RichTreeView` over `SimpleTreeView`.** `SimpleTreeView` is composable/children-based (you hand-write nested `<TreeItem>` JSX); `RichTreeView` is data-driven (`items` prop), matching Mantine's `data`-prop shape and our `RecursicaTreeProps.data` API far more directly. No conversion needed for `id`/`children` (bridged via `getItemId`), only `getItemLabel`.
+
+- **Fully custom `slots.item` (`CustomTreeItem`), not the default `TreeItem`.** Every visual property comes from `Tree.module.css` rather than `@mui/x-tree-view`'s own default styles (which apply real theme palette colors for hover/selected/focused states that would otherwise fight our tokens). `CustomTreeItem` is built from the officially-documented low-level building blocks (`useTreeItem`, `TreeItemProvider`, `TreeItemRoot`, `TreeItemContent`, `TreeItemIconContainer`, `TreeItemGroupTransition`, `TreeItemLabel`, `TreeItemIcon`) — the same pattern MUI X's own docs use for "rich"/custom tree items — rather than rebuilding keyboard/focus/ARIA handling from scratch.
+
+- **`getItemLabel` only ever sees a string; the real `React.ReactNode` label comes from `useTreeItemModel`.** `RichTreeView`'s internal model requires `getItemLabel(item): string` (used for its own a11y/typeahead search), so a non-string `RecursicaTreeNode.label` is coerced to `item.value` there — this string is _never actually rendered_. Inside `CustomTreeItem`, `useTreeItemModel<RecursicaTreeNode>(itemId)` retrieves the **original** untransformed node (real `label: ReactNode` included), which is what actually gets rendered in `<TreeItemLabel>`. This is the documented MUI X mechanism for rich/custom tree item content — not a workaround.
+
+- **`TreeItemContent` requires a `status` prop.** Its styled-component variant system reads `status: UseTreeItemStatus` directly (not just via `getContentProps()`'s spread) — omitting it is a compile error, not just a missing visual detail.
+
+- **Indentation: preserve MUI's own depth formula, override only the base.** MUI computes each row's `padding-left` as `calc(<base> + --TreeView-itemChildrenIndentation * --TreeView-itemDepth)`, with `--TreeView-itemChildrenIndentation` set as an **inline style** on the root `<ul>` (see `useTreeViewRootProps` in `@mui/x-tree-view/internals`). `Tree.module.css` overrides that CSS variable with `!important` (same category of override as the mantine-adapter's `--level-offset`, itself modeled on this adapter's own Timeline `--mantine-spacing-xl` / `--tl-line-width` precedent — inline styles beat plain stylesheet rules regardless of specificity, so `!important` is required, not optional). `.row`'s own `padding-left` then reuses the same `calc(... + --TreeView-itemChildrenIndentation * --TreeView-itemDepth)` formula, just substituting our `horizontal-padding` token as the base instead of MUI's theme spacing — so per-level indentation keeps working, only its amount changes.
+
+- **No `!important` needed for color/hover/selected/disabled overrides.** Unlike the CSS-variable overrides above, these come from `@mui/x-tree-view`'s own Emotion-generated _stylesheet_ rules (not inline styles). Because this app's `<StyledEngineProvider injectFirst>` setup (required per `SETUP.md`, already configured in `.storybook/preview.tsx`) injects MUI's baseline styles before our CSS Modules, our classes win via normal DOM source order — matching `COMPONENT_DEV_GUIDE.md`'s explicit "no `!important`" rule for this category, and the existing `Button`/`Menu` precedent in this adapter.
+
+- **`expandOnClick`/`selectOnClick` are approximated, not exact.** Mantine's `Tree` has two independent boolean toggles for these. `@mui/x-tree-view` only has `expansionTrigger: 'content' | 'iconContainer'` (does clicking the row content expand it, or only the icon container?) and `disableSelection` (turns off selection everywhere, not just on a content click). Mapping used: `expansionTrigger = expandOnClick ? "content" : "iconContainer"`, `disableSelection = !selectOnClick`. The specific combination "clicking anywhere expands, but nothing is ever selectable via click" has no exact MUI equivalent beyond `disableSelection` — documented here rather than silently diverging without explanation.
+
+- **Deliberately not implemented (no tokens back them):** checkbox/indeterminate node state (`@mui/x-tree-view` supports `checkboxSelection`, but the Figma UI Kit's `tree` tokens only define `selected`/`unselected`, not a checked state) and per-node `disabled` (no token, and no `disabled` field in `RecursicaTreeNode`). Matches the mantine-adapter implementation's same decision.
+
+- **KNOWN GAP (2026-08-06): Forge's own preview shows a red chevron with more chevron-to-label spacing than what's currently implemented here.** Same finding as the mantine-adapter implementation (see its `IMPLEMENTATION_NOTES.md`) — re-verified against both the compiled `recursica_variables_scoped.css` and the raw `recursica_ui-kit.json` (synced the same day): the `tree` schema has no `icon-color` property at all, and `button-node-gap` (used as `.row`'s `gap`) resolves to exactly 4px. Not a mapping bug on our side. Needs a Forge/design follow-up (a bound icon-color variable and a confirmed intended gap value) before this can be fixed with a real token.