@recursica/mantine-adapter 0.21.0 → 0.22.0

package/src/components/Radio/Radio.stories.tsx

@@ -18,6 +18,9 @@ The \`Radio\` component represents a fundamental standalone boolean selection no
     },
   },
   argTypes: {
+    disabled: {
+      control: "boolean",
+    },
     checked: {
       control: "boolean",
     },

package/src/components/Radio/RadioGroup.tsx

@@ -99,14 +99,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
             defaultValue={defaultValue}
           >
             <div className={styles.groupRoot} data-layout={formLayout}>
-              {React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                  return React.cloneElement(child as React.ReactElement<any>, {
-                    disabled: readOnly || (child.props as any).disabled,
-                  });
-                }
-                return child;
-              })}
+              {children}
             </div>
           </MantineRadio.Group>
         }

package/src/components/ReadOnlyField/ReadOnlyField.module.css

@@ -1,3 +1,17 @@
+/* LAYOUT SPACING OVERRIDES:
+   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens. */
+.layoutOverride {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_read-only-field_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_read-only-field_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+}
+
 /* HARDCODED VALUES:
    - margin: 0; padding: overrides native paragraph margins mapping back to form element flows.
 */

package/src/components/ReadOnlyField/ReadOnlyField.tsx

@@ -14,6 +14,7 @@ import {
   FormControlWrapper,
 } from "../FormControlWrapper/FormControlWrapper";
 import { ReadOnlyTextField } from "./ReadOnlyTextField";
+import styles from "./ReadOnlyField.module.css";
 
 export interface RecursicaReadOnlyFieldProps
   extends Omit<
@@ -40,7 +41,15 @@ export type ReadOnlyFieldProps =
  */
 export const ReadOnlyField = forwardRef<HTMLDivElement, ReadOnlyFieldProps>(
   function ReadOnlyField(
-    { value, type = "text", emptyValueComponent, overStyled = false, ...rest },
+    {
+      value,
+      type = "text",
+      emptyValueComponent,
+      overStyled = false,
+      className,
+      style,
+      ...rest
+    },
     ref,
   ) {
     let content: React.ReactNode = null;
@@ -87,10 +96,16 @@ export const ReadOnlyField = forwardRef<HTMLDivElement, ReadOnlyFieldProps>(
         break;
     }
 
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
     return (
       <FormControlWrapper
         ref={ref}
         overStyled={overStyled as true}
+        className={wrapperClass}
+        style={style}
         {...(sanitizedProps as any)}
       >
         {content}

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -1,77 +1,104 @@
 /* HARDCODED VALUES:
    - border-style: solid; on container and indicator
    - background-color: transparent; on label hover (overriding Mantine)
-   - !important usage to strictly enforce Figma tokens over Mantine's inline calculation
+   - Scope prefix .root to enforce Figma tokens over Mantine's inline calculation without using !important
 */
 
 .root {
   background-color: var(
-    --recursica_ui-kit_components_segmented-control_properties_container_colors_background
-  ) !important;
+    --recursica_ui-kit_components_segmented-control_properties_colors_background
+  );
   border: var(
-      --recursica_ui-kit_components_segmented-control_properties_container_border-size
+      --recursica_ui-kit_components_segmented-control_properties_border-size
     )
     solid
     var(
-      --recursica_ui-kit_components_segmented-control_properties_container_colors_border-color
+      --recursica_ui-kit_components_segmented-control_properties_colors_border-color
     );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control_properties_container_border-radius
-  ) !important;
+    --recursica_ui-kit_components_segmented-control_properties_border-radius
+  );
   padding: var(
-      --recursica_ui-kit_components_segmented-control_properties_container_padding-vertical
+      --recursica_ui-kit_components_segmented-control_properties_padding-vertical
     )
     var(
-      --recursica_ui-kit_components_segmented-control_properties_container_padding-horizontal
-    ) !important;
+      --recursica_ui-kit_components_segmented-control_properties_padding-horizontal
+    );
   box-shadow: var(
-    --recursica_ui-kit_components_segmented-control_properties_container_elevation
+    --recursica_ui-kit_components_segmented-control_properties_elevation,
+    none
   );
   gap: var(--recursica_ui-kit_components_segmented-control_properties_item-gap);
 }
 
-.label {
+.root .label {
   padding-left: var(
     --recursica_ui-kit_components_segmented-control-item_properties_item_padding-horizontal
-  ) !important;
+  );
   padding-right: var(
     --recursica_ui-kit_components_segmented-control-item_properties_item_padding-horizontal
-  ) !important;
+  );
   height: var(
     --recursica_ui-kit_components_segmented-control-item_properties_item_height
-  ) !important;
+  );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
-  ) !important;
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-radius,
+    var(
+      --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
+    )
+  );
+
+  border: var(
+      --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_border-color
+    );
+  background-color: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_background
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_elevation
+  );
 
   font-family: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_font-family
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-family,
+    inherit
   );
   font-size: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_font-size
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-size,
+    inherit
   );
   font-style: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_font-style
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-style,
+    inherit
   );
   font-weight: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_font-weight
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-weight,
+    inherit
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_letter-spacing
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_letter-spacing,
+    inherit
   );
   line-height: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_line-height
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_line-height,
+    inherit
   );
   text-decoration: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_text-decoration
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-decoration,
+    inherit
   );
   text-transform: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_text-transform
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-transform,
+    inherit
   );
 
   color: var(
-    --recursica_ui-kit_components_segmented-control_properties_colors_text
-  ) !important;
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_text-color,
+    inherit
+  );
 
   display: flex;
   align-items: center;
@@ -79,7 +106,7 @@
 }
 
 /* Mantine natively wraps label contents in an innerLabel span */
-.label :global(.mantine-SegmentedControl-innerLabel) {
+.root .label :global(.mantine-SegmentedControl-innerLabel) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -88,7 +115,7 @@
   );
 }
 
-.label svg {
+.root .label svg {
   width: var(
     --recursica_ui-kit_components_segmented-control-item_properties_item_icon-size
   );
@@ -99,40 +126,78 @@
 }
 
 /* Mantine adds a background on hover, we must strictly strip it */
-.label:hover {
-  background-color: transparent !important;
+.root .label:hover {
+  background-color: transparent;
 }
 
 /* Mantine adds separators via ::before on the .control */
-.control::before {
+.root .control::before {
   background-color: var(
     --recursica_ui-kit_components_segmented-control_properties_colors_divider-color
-  ) !important;
+  );
+  width: var(
+    --recursica_ui-kit_components_segmented-control_properties_divider-size
+  );
 }
 
 /* Indicator (the moving selected block) */
-.indicator {
+.root .indicator {
   background-color: var(
     --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_background
-  ) !important;
+  );
   border: var(
       --recursica_ui-kit_components_segmented-control-item_properties_selected_border-size
     )
     solid
     var(
       --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_border-color
-    ) !important;
+    );
   box-shadow: var(
     --recursica_ui-kit_components_segmented-control-item_properties_selected_elevation
-  ) !important;
+  );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
-  ) !important;
+    --recursica_ui-kit_components_segmented-control-item_properties_selected_border-radius,
+    var(
+      --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
+    )
+  );
 }
 
 /* Selected label text color override */
-.control[data-active] .label {
+.root .control[data-active] .label {
   color: var(
     --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_text-color
-  ) !important;
+  );
+  font-family: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-family,
+    inherit
+  );
+  font-size: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-size,
+    inherit
+  );
+  font-style: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-style,
+    inherit
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-weight,
+    inherit
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_letter-spacing,
+    inherit
+  );
+  line-height: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_line-height,
+    inherit
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-decoration,
+    inherit
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-transform,
+    inherit
+  );
 }

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -21,9 +21,7 @@ const meta: Meta<typeof SegmentedControl> = {
     fullWidth: {
       control: "boolean",
     },
-    disabled: {
-      control: "boolean",
-    },
+    disabled: { table: { disable: true } },
     data: { table: { disable: true } },
     defaultChecked: { table: { disable: true } },
   },
@@ -37,7 +35,6 @@ export const Default: Story = {
     data: ["React", "Angular", "Vue", "Svelte"],
     orientation: "horizontal",
     fullWidth: false,
-    disabled: false,
   },
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: any) => {

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -14,12 +14,23 @@ export interface RecursicaSegmentedControlProps {
   orientation?: "horizontal" | "vertical";
   /** If true, the control will take up the full width of its container */
   fullWidth?: boolean;
+  /**
+   * SegmentedControl should NOT be allowed to be disabled by design.
+   * This component explicitly disables the `disabled` prop.
+   */
+  disabled?: never;
 }
 
 export type SegmentedControlProps = RecursicaOverStyled<
   Omit<
     MantineSegmentedControlProps,
-    "variant" | "size" | "radius" | "color" | "classNames" | "className"
+    | "variant"
+    | "size"
+    | "radius"
+    | "color"
+    | "classNames"
+    | "className"
+    | "disabled"
   > & {
     className?: string;
     classNames?: Partial<Record<string, string>>;
@@ -70,9 +81,12 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
     ref,
   ) {
     const sanitizedProps = filterStylingProps(rest, overStyled);
-    const stylingParams = useSegmentedControlClassNames(
-      sanitizedProps as Record<string, unknown>,
-    );
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    // Explicitly prevent consumers from bypassing the disabled restriction
+    delete restRecord["disabled"];
+
+    const stylingParams = useSegmentedControlClassNames(restRecord);
 
     return (
       <MantineSegmentedControl

package/src/components/Slider/Slider.module.css

@@ -0,0 +1,89 @@
+/*
+ * EXEMPTIONS:
+ * - Slider is a "Coming Soon" stub component.
+ * - It renders a placeholder and has no active implementation or CSS stylesheet yet.
+ * - The following tokens generated by Figma are ignored until the component is fully built.
+ */
+
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-border-size */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-gap */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-height */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-padding-left */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-padding-right */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-padding-vertical */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-width */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_min-max-label_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_min-max-label_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_min-max-label_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_min-max-label_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_min-max-label_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_min-max-label_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_min-max-label_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_min-max-label_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_read-only-value_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_read-only-value_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_read-only-value_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_read-only-value_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_read-only-value_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_read-only-value_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_read-only-value_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_read-only-value_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_step-indicator-border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_step-indicator-width */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_thumb-border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_thumb-elevation */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_thumb-size */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_track-border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_track-height */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_default_properties_input-border-size */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_disabled_properties_input-border-size */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_error_properties_input-border-size */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_focus_properties_input-border-size */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_default_properties_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_default_properties_colors_input-background */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_default_properties_colors_input-border-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_default_properties_colors_input-text */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_default_properties_colors_step-indicator-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_default_properties_colors_step-indicator-color-active */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_default_properties_colors_thumb */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_default_properties_colors_track */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_default_properties_colors_track-active */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_input-background */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_input-border-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_input-text */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_step-indicator-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_step-indicator-color-active */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_thumb */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_track */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_disabled_properties_colors_track-active */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_error_properties_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_error_properties_colors_input-background */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_error_properties_colors_input-border-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_error_properties_colors_input-text */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_error_properties_colors_step-indicator-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_error_properties_colors_step-indicator-color-active */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_error_properties_colors_thumb */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_error_properties_colors_track */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_error_properties_colors_track-active */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_input-background */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_input-border-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_input-text */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_step-indicator-color */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_step-indicator-color-active */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_thumb */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_track */
+/* recursica-ignore: --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_track-active */

package/src/components/Stepper/Stepper.module.css

@@ -108,8 +108,29 @@
   --stepper-border-radius: var(
     --recursica_ui-kit_components_stepper_variants_sizes_large_properties_indicator-border-radius
   );
+  --stepper-font-family: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_large_properties_step-number-text_font-family
+  );
   --stepper-font-size: var(
-    --recursica_ui-kit_components_stepper_variants_sizes_large_properties_step-number-font-size
+    --recursica_ui-kit_components_stepper_variants_sizes_large_properties_step-number-text_font-size
+  );
+  --stepper-font-style: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_large_properties_step-number-text_font-style
+  );
+  --stepper-font-weight: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_large_properties_step-number-text_font-weight
+  );
+  --stepper-letter-spacing: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_large_properties_step-number-text_letter-spacing
+  );
+  --stepper-line-height: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_large_properties_step-number-text_line-height
+  );
+  --stepper-text-decoration: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_large_properties_step-number-text_text-decoration
+  );
+  --stepper-text-transform: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_large_properties_step-number-text_text-transform
   );
   --stepper-svg-size: var(
     --recursica_ui-kit_components_stepper_variants_sizes_large_properties_completed-icon-size
@@ -129,8 +150,29 @@
   --stepper-border-radius: var(
     --recursica_ui-kit_components_stepper_variants_sizes_small_properties_indicator-border-radius
   );
+  --stepper-font-family: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_small_properties_step-number-text_font-family
+  );
   --stepper-font-size: var(
-    --recursica_ui-kit_components_stepper_variants_sizes_small_properties_step-number-font-size
+    --recursica_ui-kit_components_stepper_variants_sizes_small_properties_step-number-text_font-size
+  );
+  --stepper-font-style: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_small_properties_step-number-text_font-style
+  );
+  --stepper-font-weight: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_small_properties_step-number-text_font-weight
+  );
+  --stepper-letter-spacing: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_small_properties_step-number-text_letter-spacing
+  );
+  --stepper-line-height: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_small_properties_step-number-text_line-height
+  );
+  --stepper-text-decoration: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_small_properties_step-number-text_text-decoration
+  );
+  --stepper-text-transform: var(
+    --recursica_ui-kit_components_stepper_variants_sizes_small_properties_step-number-text_text-transform
   );
   --stepper-svg-size: var(
     --recursica_ui-kit_components_stepper_variants_sizes_small_properties_completed-icon-size
@@ -209,7 +251,16 @@
   min-height: var(--stepper-indicator-size);
   border-width: var(--stepper-border-size);
   border-radius: 50%; /* Override Figma token to ensure perfectly circular indicators */
+
+  font-family: var(--stepper-font-family);
   font-size: var(--stepper-font-size);
+  font-style: var(--stepper-font-style);
+  font-weight: var(--stepper-font-weight);
+  letter-spacing: var(--stepper-letter-spacing);
+  line-height: var(--stepper-line-height);
+  text-decoration: var(--stepper-text-decoration);
+  text-transform: var(--stepper-text-transform);
+
   display: flex;
   align-items: center;
   justify-content: center;