@recursica/mantine-adapter 0.35.0 → 0.36.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

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

@@ -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_text-field_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_text-field_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_text-field_variants_states_disabled_properties_border-size */
 /* recursica-ignore: --recursica_ui-kit_components_text-field_variants_states_error_properties_border-size */
-/* 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:
@@ -108,13 +121,13 @@
 
   /* 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
   );
 
   outline: none;
@@ -161,13 +174,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
   );
 }
 
@@ -176,29 +189,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_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) */
@@ -207,10 +207,10 @@
     --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_border-color
   ) !important;
   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
   ) !important;
   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
   ) !important;
 }
 
@@ -232,10 +232,13 @@
     --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_border-color
   ) !important;
   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
   ) !important;
   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
+  ) !important;
+  opacity: var(
+    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_opacity
   ) !important;
   cursor: not-allowed;
 }

package/src/components/TextField/TextField.tsx

@@ -101,8 +101,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/Timeline.module.css

@@ -7,17 +7,24 @@
 .root {
   display: flex;
   flex-direction: column;
+  /* Mantine drives item spacing (.item's margin-top) AND the connector line's bridging offset
+     (.item::before's negative bottom) off the SAME --mantine-spacing-xl variable. Overriding it
+     here (rather than adding a flex gap) keeps both in sync automatically instead of introducing
+     a visible break in the connector line. */
+  --mantine-spacing-xl: 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 +54,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 +96,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 +127,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 +151,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 +177,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 +201,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 +221,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 +277,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 +326,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 +363,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.
  */
 
 /* ======================================
@@ -19,7 +19,9 @@
   );
   border-width: var(--recursica_ui-kit_components_toast_properties_border-size);
   border-style: solid;
-  border-color: transparent;
+  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
   );
@@ -31,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);
 
@@ -48,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
     );
   }
 
@@ -58,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 {
@@ -70,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 {
@@ -94,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,17 @@
+# Tree Implementation Notes
+
+- **Fully custom `renderNode`, not Mantine's default row markup.** Mantine's `Tree` renders each node as `<li {...getStyles("node")}>{renderNode ? renderNode(payload) : <div {...elementProps}>{node.label}</div>}{subtree}</li>`. We always pass a custom `renderNode` (never rely on the fallback) so every visual property — box model, colors, typography, the expand chevron — is fully token-driven rather than inheriting Mantine's own `Tree.module.css` defaults (which include Mantine's own light/dark `[data-selected]` background using its own gray palette).
+
+- **`elementProps` already carries the important behavioral wiring.** Mantine's `renderNode` payload includes an `elementProps` object with `onClick` (combined expand+select handler, respecting `expandOnClick`/`selectOnClick`), `data-selected`, `data-value`, and `data-hovered` (set on keyboard/mouse hover via Mantine's internal `hoveredNode` state). We spread these directly onto our own `.row` div rather than reimplementing click/keyboard behavior — only the `className` is overridden with our own token-driven class.
+
+- **The chevron is a decorative element inside the same clickable row, not a separate `<button>`.** The design tokens include a `button-node-gap` token (implying a "button" next to the node label in Figma), but structurally the whole row is already the click target via `elementProps.onClick` (which correctly bundles Mantine's `expandOnClick`/`selectOnClick` logic). Making the chevron its own nested interactive `<button>` inside an `<li>` that Mantine already treats as keyboard-focusable (`tabIndex`, arrow-key handling in `TreeNode.tsx`) would create nested-focusable-element accessibility problems for no real benefit. `button-node-gap` is used as the CSS `gap` between the (decorative) chevron and the label inside `.row` instead.
+
+- **No dedicated icon-color/icon-size token exists for Tree.** The expand chevron is an inline SVG using `stroke="currentColor"`, sized at `1em` (relative to the row's own tokened `font-size`). This means it automatically tracks whichever text-color token (selected/unselected) is active on `.row` — no new token was invented, and no hardcoded color was used.
+
+- **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.** Re-verified against both the compiled `recursica_variables_scoped.css` and the raw `recursica_ui-kit.json` (synced the same day) — the `tree` schema genuinely has no `icon-color` property anywhere (only `background-color`/`border-color`/`text-color` per selection state, and neither references any red/`core-colors.alert` palette), and `button-node-gap` resolves to `brand.dimensions.general.sm` = 4px, which is exactly what `.row`'s `gap` uses. This was confirmed _not_ to be a mapping bug on our side. Most likely explanation: the chevron in the Figma source isn't bound to a variable at all (Forge previews commonly flag unbound properties in a warning color), and/or its real icon asset has different intrinsic spacing than our hand-drawn placeholder glyph. 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 rather than a hardcoded guess.
+
+- **`--level-offset` override needs `!important`.** Mantine's `Tree` computes each node's indent via a `--level-offset` CSS variable, resolved internally through its `createVarsResolver` mechanism and applied as a scoped rule on the root `<ul>` (same category of override as `Timeline`'s `--mantine-spacing-xl` / `--tl-line-width`). We override it on `.root` with `!important` to reliably beat Mantine's own generated rule regardless of stylesheet insertion order, rather than passing a `levelOffset` prop from TSX (which would mean setting a design-token value from TSX, against `COMPONENT_DEV_GUIDE.md`'s "no custom properties set from TSX for styling" rule).
+
+- **`onSelectedChange` is a Recursica addition, not a Mantine API.** Mantine's `useTree()` controller tracks `selectedState` but has no change callback of its own. We watch `tree.selectedState` with a `useEffect` and fire `onSelectedChange` when it changes. This is a behavioral callback, not a design-token reactivity concern, so it doesn't conflict with `COMPONENT_DEV_GUIDE.md §7`'s rule against using `useEffect` for token/styling reactivity.
+
+- **Deliberately not implemented (no tokens back them):** checkbox/indeterminate node state (Mantine's `Tree` supports `checkNode`/`isNodeIndeterminate`, 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 Mantine's `TreeNodeData` either). If either is needed later, it needs a token/schema addition first, not a component-level workaround.