@12-apps/ui 6.35.0 → 6.36.0

package/src/components/data-display/Progress/Progress.styles.ts

@@ -13,7 +13,7 @@ import {
 } from './Progress.metrics';
 import type { ProgressSize, ProgressVariant } from './Progress.types';
 import { softNeutral } from '../../../tokens/ink';
-import { sxRem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 // Define pulse animation. The stops and the two seconds are the shared metrics'
 // (`PULSE`), so the native `Progress` breathes on the same cadence.
@@ -51,17 +51,24 @@ export const getColorFromTheme = (theme: Theme, color: string): PaletteColor =>
 
 // Derived from the shared metrics, not restated: the native `Progress` reads
 // the same table, so the two renderers cannot disagree on a size.
-const SIZE_MAP: Record<ProgressSize, { height: number; circularSize: number; fontSize: (theme: Theme) => string }> =
-  Object.fromEntries(
-    Object.entries(PROGRESS_SIZES).map(([size, step]) => [
-      size,
-      { height: step.height, circularSize: step.circularSize, fontSize: sxRem(step.fontSize) },
-    ]),
-  ) as Record<ProgressSize, { height: number; circularSize: number; fontSize: (theme: Theme) => string }>;
+// The lengths stay design px (`…Px`) and go through `rem` where they are drawn.
+interface SizeStep {
+  heightPx: number;
+  circularSizePx: number;
+  fontSize: (theme: Theme) => string;
+}
+
+const SIZE_MAP: Record<ProgressSize, SizeStep> = Object.fromEntries(
+  Object.entries(PROGRESS_SIZES).map(([size, step]) => [
+    size,
+    { heightPx: step.height, circularSizePx: step.circularSize, fontSize: sxRem(step.fontSize) },
+  ]),
+) as Record<ProgressSize, SizeStep>;
 
 export const getSizeStyles = (size?: ProgressSize) => SIZE_MAP[size as ProgressSize] || SIZE_MAP.md;
 
 export const barVariantStyles = (
+  theme: Theme,
   variant: ProgressVariant | undefined,
   colorPalette: PaletteColor,
 ): CSSObject => {
@@ -75,7 +82,7 @@ export const barVariantStyles = (
     case 'glass':
       return {
         backgroundColor: alpha(colorPalette.main, GLASS_BAR_ALPHA),
-        backdropFilter: `blur(${GLASS_BLUR_PX}px)`,
+        backdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)})`,
         border: `1px solid ${alpha(colorPalette.main, GLASS_BAR_BORDER_ALPHA)}`,
       };
     default:
@@ -86,12 +93,13 @@ export const barVariantStyles = (
 // glow and pulse are independent flags. The three combinations used to be spelled
 // out one by one, but each is just the union of whichever flags are set.
 export const barEmphasisStyles = (
+  theme: Theme,
   colorPalette: PaletteColor,
   glow?: boolean,
   pulse?: boolean,
 ): CSSObject => ({
   ...(glow && {
-    boxShadow: `0 0 ${BAR_GLOW.blur}px ${BAR_GLOW.spread}px ${alpha(colorPalette.main, BAR_GLOW.alpha)}`,
+    boxShadow: `${rems(theme, 0, 0, BAR_GLOW.blur, BAR_GLOW.spread)} ${alpha(colorPalette.main, BAR_GLOW.alpha)}`,
     filter: `brightness(${GLOW_BRIGHTNESS})`,
   }),
   ...(pulse && {
@@ -100,12 +108,13 @@ export const barEmphasisStyles = (
 });
 
 export const circularEmphasisStyles = (
+  theme: Theme,
   colorPalette: PaletteColor,
   glow?: boolean,
   pulse?: boolean,
 ): CSSObject => ({
   ...(glow && {
-    filter: `drop-shadow(0 0 ${CIRCULAR_GLOW.blur}px ${alpha(colorPalette.main, CIRCULAR_GLOW.alpha)})`,
+    filter: `drop-shadow(${rems(theme, 0, 0, CIRCULAR_GLOW.blur)} ${alpha(colorPalette.main, CIRCULAR_GLOW.alpha)})`,
   }),
   ...(pulse && {
     animation: `${pulseAnimation} ${PULSE.durationMs / 1000}s infinite`,

package/src/components/data-display/Progress/Progress.tsx

@@ -15,6 +15,7 @@ import {
   pulseAnimation,
 } from './Progress.styles';
 import type { ProgressProps, ProgressSize, ProgressVariant } from './Progress.types';
+import { rem, rems } from '../../../tokens/relative';
 
 const StyledLinearProgress = styled(LinearProgress, {
   shouldForwardProp: (prop) =>
@@ -30,15 +31,15 @@ const StyledLinearProgress = styled(LinearProgress, {
   const sizeStyles = getSizeStyles(customSize);
 
   return {
-    height: sizeStyles.height,
-    borderRadius: sizeStyles.height / 2,
+    height: rem(theme, sizeStyles.heightPx),
+    borderRadius: rem(theme, sizeStyles.heightPx / 2),
     backgroundColor: alpha(colorPalette.main, 0.1),
 
     '& .MuiLinearProgress-bar': {
       borderRadius: 'inherit',
       transition: 'all 0.3s ease',
-      ...barVariantStyles(customVariant, colorPalette),
-      ...barEmphasisStyles(colorPalette, glow, pulse),
+      ...barVariantStyles(theme, customVariant, colorPalette),
+      ...barEmphasisStyles(theme, colorPalette, glow, pulse),
     },
   };
 });
@@ -54,7 +55,7 @@ const StyledCircularProgress = styled(CircularProgress, {
 
   return {
     color: colorPalette.main,
-    ...circularEmphasisStyles(colorPalette, glow, pulse),
+    ...circularEmphasisStyles(theme, colorPalette, glow, pulse),
   };
 });
 
@@ -80,14 +81,15 @@ const SegmentedProgress: React.FC<{
           data-testid={`${dataTestId}-segment-${index}`}
           sx={{
             flex: 1,
-            height: sizeStyles.height,
-            borderRadius: sizeStyles.height / 2,
+            height: rem(theme, sizeStyles.heightPx),
+            // In `sx` a numeric radius is a multiple of `shape.borderRadius` — relative already.
+            borderRadius: sizeStyles.heightPx / 2,
             backgroundColor:
               index < filledSegments ? colorPalette.main : alpha(colorPalette.main, 0.1),
             transition: 'all 0.3s ease',
             ...(glow &&
               index < filledSegments && {
-                boxShadow: `0 0 6px 1px ${alpha(colorPalette.main, 0.4)}`,
+                boxShadow: `${rems(theme, 0, 0, 6, 1)} ${alpha(colorPalette.main, 0.4)}`,
               }),
             ...(pulse &&
               index < filledSegments && {
@@ -154,6 +156,7 @@ const CircularView = React.forwardRef<
     },
     ref,
   ) => {
+    const theme = useTheme();
     const sizeStyles = getSizeStyles(size);
 
     return (
@@ -161,7 +164,7 @@ const CircularView = React.forwardRef<
         <StyledCircularProgress
           variant={value !== undefined ? 'determinate' : 'indeterminate'}
           value={displayValue}
-          size={circularSize || sizeStyles.circularSize}
+          size={rem(theme, circularSize || sizeStyles.circularSizePx)}
           thickness={thickness}
           customColor={color}
           glow={glow}

package/src/components/data-display/Sheet/Sheet.animations.ts

@@ -1,4 +1,6 @@
-import { keyframes } from '@mui/material/styles/index.js';
+import { keyframes, type Theme } from '@mui/material/styles/index.js';
+
+import { rem, rems } from '../../../tokens/relative';
 
 /** Spring physics used by the draggable variant's snap-point animation. */
 export const SPRING_CONFIG = {
@@ -13,32 +15,32 @@ export const DEFAULT_VELOCITY_THRESHOLD = 0.5;
 /** Drag resistance factor applied past the first and last snap points. */
 export const DEFAULT_DRAG_RESISTANCE = 0.3;
 
-export const pulseAnimation = keyframes`
+export const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.4);
   }
   70% {
-    box-shadow: 0 0 0 20px rgba(var(--pulse-color), 0);
+    box-shadow: 0 0 0 ${rem(theme, 20)} rgba(var(--pulse-color), 0);
   }
   100% {
     box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0);
   }
 `;
 
-export const shimmerAnimation = keyframes`
+export const shimmerAnimation = (theme: Theme) => keyframes`
   0% {
-    background-position: -1000px 0;
+    background-position: ${rem(theme, -1000)} 0;
   }
   100% {
-    background-position: 1000px 0;
+    background-position: ${rem(theme, 1000)} 0;
   }
 `;
 
-export const glowAnimation = keyframes`
+export const glowAnimation = (theme: Theme) => keyframes`
   0%, 100% {
-    box-shadow: 0 0 20px 5px rgba(var(--glow-color), 0.3);
+    box-shadow: ${rems(theme, 0, 0, 20, 5)} rgba(var(--glow-color), 0.3);
   }
   50% {
-    box-shadow: 0 0 35px 10px rgba(var(--glow-color), 0.5);
+    box-shadow: ${rems(theme, 0, 0, 35, 10)} rgba(var(--glow-color), 0.5);
   }
 `;

package/src/components/data-display/Sheet/Sheet.body.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import { SheetContent, SheetFooter, SheetHeader } from './Sheet.parts';
 import type { SheetProps } from './Sheet.types';
+import { sxRem } from '../../../tokens/relative';
 import { muiColor } from '../../../tokens/scales';
 
 export interface SheetBodyProps extends Pick<
@@ -49,7 +50,7 @@ const SheetLoading: React.FC<Pick<SheetBodyProps, 'color'>> = ({ color }) => (
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
-      minHeight: 200,
+      minHeight: sxRem(200),
     }}
   >
     <CircularProgress color={color === undefined ? undefined : muiColor(color, 'inherit')} />

package/src/components/data-display/Sheet/Sheet.parts.tsx

@@ -10,6 +10,7 @@ import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { scrim, sheen } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 import { withDefaults } from '../../../utils/withDefaults';
 
 import { shimmerAnimation } from './Sheet.animations';
@@ -26,8 +27,8 @@ import type {
  * decorative one stays a neutral bar.
  */
 const handleSx = (theme: Theme, isDraggable: boolean) => ({
-  width: isDraggable ? 48 : 32,
-  height: isDraggable ? 6 : 4,
+  width: rem(theme, isDraggable ? 48 : 32),
+  height: rem(theme, isDraggable ? 6 : 4),
   backgroundColor: alpha(theme.palette.text.primary, 0.3),
   borderRadius: 3,
   transition: theme.transitions.create(['all'], {
@@ -49,15 +50,15 @@ const handleSx = (theme: Theme, isDraggable: boolean) => ({
       ${sheen(theme, 0.3)},
       transparent
     )`,
-    animation: isDraggable ? `${shimmerAnimation} 2s infinite` : 'none',
+    animation: isDraggable ? `${shimmerAnimation(theme)} 2s infinite` : 'none',
   },
   ...(isDraggable && {
     backgroundColor: alpha(theme.palette.primary.main, 0.4),
-    boxShadow: `0 2px 4px ${alpha(theme.palette.primary.main, 0.2)}`,
+    boxShadow: `${rems(theme, 0, 2, 4)} ${alpha(theme.palette.primary.main, 0.2)}`,
     '&:hover': {
       backgroundColor: theme.palette.primary.main,
       transform: 'scaleX(1.15) scaleY(1.2)',
-      boxShadow: `0 3px 6px ${alpha(theme.palette.primary.main, 0.3)}`,
+      boxShadow: `${rems(theme, 0, 3, 6)} ${alpha(theme.palette.primary.main, 0.3)}`,
     },
   }),
 });
@@ -225,8 +226,8 @@ export const SheetOverlay: React.FC<SheetOverlayProps> = (props) => {
           // is given a no-op BackdropComponent) and must sit under the panel.
           zIndex: theme.zIndex.drawer - 1,
           backgroundColor: scrim(theme, blur ? 0.6 : 0.5),
-          backdropFilter: blur ? 'blur(8px) saturate(180%)' : 'none',
-          WebkitBackdropFilter: blur ? 'blur(8px) saturate(180%)' : 'none',
+          backdropFilter: blur ? `blur(${rem(theme, 8)}) saturate(180%)` : 'none',
+          WebkitBackdropFilter: blur ? `blur(${rem(theme, 8)}) saturate(180%)` : 'none',
           ...style,
         }}
       />

package/src/components/data-display/Sheet/Sheet.styles.ts

@@ -4,7 +4,9 @@ import type React from 'react';
 
 import { glowAnimation, pulseAnimation, shimmerAnimation } from './Sheet.animations';
 import type { SheetProps } from './Sheet.types';
+import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';
 import { shadowInk, sheen } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 import { accentFor } from '../../../tokens/scales';
 
 type Position = NonNullable<SheetProps['position']>;
@@ -15,18 +17,19 @@ type Color = NonNullable<SheetProps['color']>;
 const isHorizontalPosition = (position: Position) => position === 'left' || position === 'right';
 
 /**
- * Horizontal (left/right) sheets are viewport-aware: a px floor keeps the panel
+ * Horizontal (left/right) sheets are viewport-aware: a design-px floor (through
+ * `rem`) keeps the panel
  * usable, `…vw` lets the larger presets grow on wide screens (lg ≥32%, xl ≥40%
  * of the viewport), and the outer `min(92vw, …)` guarantees the panel never
  * overflows a small screen.
  */
-const HORIZONTAL_SIZES: Record<Size, string> = {
-  xs: 'min(92vw, 240px)',
-  sm: 'min(92vw, 320px)',
-  md: 'min(92vw, 400px)',
-  lg: 'min(92vw, max(560px, 32vw))',
-  xl: 'min(92vw, max(720px, 40vw))',
-  full: '100%',
+const HORIZONTAL_SIZES: Record<Size, (theme: Theme) => string> = {
+  xs: (theme) => `min(92vw, ${rem(theme, 240)})`,
+  sm: (theme) => `min(92vw, ${rem(theme, 320)})`,
+  md: (theme) => `min(92vw, ${rem(theme, 400)})`,
+  lg: (theme) => `min(92vw, max(${rem(theme, 560)}, 32vw))`,
+  xl: (theme) => `min(92vw, max(${rem(theme, 720)}, 40vw))`,
+  full: () => '100%',
 };
 
 /**
@@ -42,12 +45,12 @@ const HORIZONTAL_SIZES: Record<Size, string> = {
  * `full` is absent on purpose: it is not a ceiling, it is the whole viewport,
  * and `sizeStyles` answers it before it gets here.
  */
-const VERTICAL_SIZES: Record<Exclude<Size, 'full'>, string> = {
-  xs: 'min(200px, 100%)',
-  sm: 'min(300px, 100%)',
-  md: 'min(400px, 100%)',
-  lg: 'min(500px, 100%)',
-  xl: 'min(600px, 100%)',
+const VERTICAL_SIZES: Record<Exclude<Size, 'full'>, (theme: Theme) => string> = {
+  xs: (theme) => `min(${rem(theme, 200)}, 100%)`,
+  sm: (theme) => `min(${rem(theme, 300)}, 100%)`,
+  md: (theme) => `min(${rem(theme, 400)}, 100%)`,
+  lg: (theme) => `min(${rem(theme, 500)}, 100%)`,
+  xl: (theme) => `min(${rem(theme, 600)}, 100%)`,
 };
 
 /**
@@ -64,9 +67,10 @@ const VERTICAL_SIZES: Record<Exclude<Size, 'full'>, string> = {
  * this axis — and it becomes meaningful here for the first time: it used to
  * name the behaviour every bottom sheet already had.
  */
-const VERTICAL_MAX_WIDTH = 'min(100%, 640px)';
+const verticalMaxWidth = (theme: Theme): string => `min(100%, ${rem(theme, 640)})`;
 
 interface SizeStyleInput {
+  theme: Theme;
   position: Position;
   size: Size;
   isDraggableVariant: boolean;
@@ -74,13 +78,14 @@ interface SizeStyleInput {
 }
 
 const sizeStyles = ({
+  theme,
   position,
   size,
   isDraggableVariant,
   currentHeight,
 }: SizeStyleInput) => {
   if (isHorizontalPosition(position)) {
-    return { width: HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md };
+    return { width: (HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md)(theme) };
   }
 
   // `full` is not a size on the scale — it is THE WHOLE VIEWPORT, on both axes,
@@ -94,7 +99,7 @@ const sizeStyles = ({
   // variant needs it too — dragging moves the panel's height, never its width.
   // `marginInline` is what centres it: MUI pins the bottom paper `left: 0;
   // right: 0`, so a definite width plus auto margins resolves to the middle.
-  const cross = { width: VERTICAL_MAX_WIDTH, marginInline: 'auto' };
+  const cross = { width: verticalMaxWidth(theme), marginInline: 'auto' };
 
   // The draggable variant owns its own height: the snap point decides it, so a
   // preset would fight the drag.
@@ -108,7 +113,7 @@ const sizeStyles = ({
     // rather than left off so the rule survives a caller who set a height on a
     // previous render, and it is what lets the panel hug what it holds.
     height: 'auto',
-    maxHeight: VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md,
+    maxHeight: (VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md)(theme),
   };
 };
 
@@ -162,10 +167,10 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>
   draggable: ({ theme, elevation, accent }) => ({
     boxShadow: `
             ${theme.shadows[Math.min(elevation + 4, 24)]},
-            0 -2px 10px 0 ${shadowInk(theme, 0.1)}
+            ${rems(theme, 0, -2, 10, 0)} ${shadowInk(theme, 0.1)}
           `,
     border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
-    borderTop: `2px solid ${alpha(accent, 0.3)}`,
+    borderTop: `${rem(theme, 2)} solid ${alpha(accent, 0.3)}`,
     transition: theme.transitions.create(['transform', 'box-shadow', 'border-color'], {
       duration: theme.transitions.duration.shorter,
       easing: theme.transitions.easing.easeInOut,
@@ -175,12 +180,12 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>
 
   glass: ({ theme, glass }) => ({
     backgroundColor: alpha(theme.palette.background.paper, glass ? 0.75 : 0.95),
-    backdropFilter: 'blur(24px) saturate(180%)',
-    WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+    backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+    WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
     border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,
     boxShadow: `
-            0 8px 32px 0 ${shadowInk(theme, 0.15)},
-            inset 0 0 0 1px ${sheen(theme, 0.1)}
+            ${rems(theme, 0, 8, 32, 0)} ${shadowInk(theme, 0.15)},
+            inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${sheen(theme, 0.1)}
           `,
   }),
 
@@ -201,7 +206,7 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>
   elevated: ({ theme, elevation }) => ({
     boxShadow: `
             ${theme.shadows[elevation]},
-            0 20px 40px -15px ${shadowInk(theme, 0.15)}
+            ${rems(theme, 0, 20, 40, -15)} ${shadowInk(theme, 0.15)}
           `,
     transform: 'translateZ(0)',
     willChange: 'transform',
@@ -226,7 +231,7 @@ const shimmerOverlay = (theme: Theme) => ({
               ${sheen(theme, 0.2)},
               transparent
             )`,
-  animation: `${shimmerAnimation} 3s infinite`,
+  animation: `${shimmerAnimation(theme)} 3s infinite`,
 });
 
 /**
@@ -267,8 +272,8 @@ const variantStyles = (input: VariantStyleInput) => {
     ...baseSurface(input, accent),
     // glow first, then pulse: with both set the pulse keyframes win the shared
     // `animation` slot, which is the order the original spread produced.
-    ...(glow && { animation: `${glowAnimation} 2s ease-in-out infinite`, filter: 'brightness(1.05)' }),
-    ...(pulse && { animation: `${pulseAnimation} 2s infinite`, position: 'relative' as const }),
+    ...(glow && { animation: `${glowAnimation(theme)} 2s ease-in-out infinite`, filter: 'brightness(1.05)' }),
+    ...(pulse && { animation: `${pulseAnimation(theme)} 2s infinite`, position: 'relative' as const }),
     ...(rounded && roundedStyles(theme, position)),
     ...(SURFACES[variant] ?? SURFACES.default)({ ...input, accent }),
   };
@@ -289,7 +294,7 @@ interface PanelSxInput extends VariantStyleInput {
  * branches of its own — the cross-axis rule below is four on its own.
  */
 export const panelSx = (input: PanelSxInput): CSSObject => {
-  const { position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } =
+  const { theme, position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } =
     input;
 
   return {
@@ -301,7 +306,7 @@ export const panelSx = (input: PanelSxInput): CSSObject => {
     // `left: -100%` and a full-width panel put it off-screen; a 640px one puts
     // it on the backdrop beside the sheet.
     overflow: 'visible',
-    ...sizeStyles({ position, size, isDraggableVariant, currentHeight }),
+    ...sizeStyles({ theme, position, size, isDraggableVariant, currentHeight }),
     // A COLUMN, so `maxHeight` above can be a ceiling rather than a height: the
     // body is then a flex item that shrinks against it, and the scrolling falls
     // to `SheetContent` where it belongs. Without this the panel would clip a

package/src/components/data-display/StatCard/StatCard.tsx

@@ -15,7 +15,7 @@ import type {
   StatCardDeltaTone,
   StatCardProps,
 } from './StatCard.types';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** The arrow each direction renders (decorative — the text carries the meaning). */
 const DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {
@@ -134,7 +134,7 @@ function ValueRow({
     return (
       <Skeleton
         variant="rectangular"
-        height={28}
+        height={rem(theme, 28)}
         width="60%"
         borderRadius={4}
         data-testid={`${testId}-value-skeleton`}
@@ -167,12 +167,13 @@ function DeltaSlot({
   loading: boolean;
   testId: string;
 }): React.JSX.Element | null {
+  const theme = useTheme();
   if (!delta) return null;
   if (loading) {
     return (
       <Skeleton
         variant="rectangular"
-        height={16}
+        height={rem(theme, 16)}
         width="40%"
         borderRadius={4}
         data-testid={`${testId}-delta-skeleton`}

package/src/components/data-display/Stepper/Stepper.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import type { Step, StepItemProps, StepperProps } from './Stepper.types';
 import { neutralTones } from '../../../tokens/ink';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 import type { SizeValue } from '../../../tokens/scales';
 
 /**
@@ -56,9 +56,9 @@ const StepButton = styled(Button, {
     !['isActive', 'isCompleted', 'clickable', 'stepSize'].includes(prop as string),
 })<{ isActive: boolean; isCompleted: boolean; clickable: boolean; stepSize: SizeValue }>(
   ({ theme, isActive, isCompleted, clickable, stepSize }) => ({
-    minWidth: CIRCLE_SIZE[stepSize],
-    width: CIRCLE_SIZE[stepSize],
-    height: CIRCLE_SIZE[stepSize],
+    minWidth: rem(theme, CIRCLE_SIZE[stepSize]),
+    width: rem(theme, CIRCLE_SIZE[stepSize]),
+    height: rem(theme, CIRCLE_SIZE[stepSize]),
     borderRadius: '50%',
     padding: 0,
     backgroundColor: isCompleted
@@ -101,18 +101,18 @@ const StepConnector = styled(Box, {
     ...(orientation === 'horizontal'
       ? {
           flex: 1,
-          height: 2,
+          height: rem(theme, 2),
           // Vertically centered on the circle (circle/2 - 1 for the 2px line).
-          marginTop: CIRCLE_SIZE[size] / 2 - 1,
-          marginLeft: 8,
-          marginRight: 8,
-          minWidth: 24,
+          marginTop: rem(theme, CIRCLE_SIZE[size] / 2 - 1),
+          marginLeft: rem(theme, 8),
+          marginRight: rem(theme, 8),
+          minWidth: rem(theme, 24),
         }
       : {
-          width: 2,
-          height: 32,
-          marginTop: 8,
-          marginBottom: 8,
+          width: rem(theme, 2),
+          height: rem(theme, 32),
+          marginTop: rem(theme, 8),
+          marginBottom: rem(theme, 8),
           // Use margin auto to center horizontally
           marginLeft: 'auto',
           marginRight: 'auto',
@@ -122,9 +122,9 @@ const StepConnector = styled(Box, {
 
 const StepLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'orientation',
-})<{ orientation: 'horizontal' | 'vertical' }>(({ orientation }) => ({
+})<{ orientation: 'horizontal' | 'vertical' }>(({ theme, orientation }) => ({
   textAlign: 'center',
-  marginTop: orientation === 'horizontal' ? 8 : 0,
+  marginTop: orientation === 'horizontal' ? rem(theme, 8) : 0,
 }));
 
 type StepSize = SizeValue;
@@ -144,7 +144,7 @@ function stepClasses(isActive: boolean, isCompleted: boolean, optional?: boolean
 /** The circle content-column width per orientation/size. */
 function contentSx(orientation: 'horizontal' | 'vertical', size: StepSize) {
   return orientation === 'horizontal'
-    ? { minWidth: STEP_MIN_WIDTH[size], maxWidth: 150, flex: '0 1 auto' }
+    ? { minWidth: sxRem(STEP_MIN_WIDTH[size]), maxWidth: sxRem(150), flex: '0 1 auto' }
     : { flexShrink: 0 };
 }
 
@@ -196,7 +196,7 @@ const StepLabelBlock: React.FC<StepPartProps & { orientation: 'horizontal' | 've
   <StepLabel
     orientation={orientation}
     data-testid={`stepper-step-label-${index}`}
-    sx={size === 'sm' && orientation === 'horizontal' ? { mt: '2px' } : undefined}
+    sx={size === 'sm' && orientation === 'horizontal' ? { mt: sxRem(2) } : undefined}
   >
     <Typography
       variant={labelVariant}