@12-apps/ui 6.37.0 → 6.39.0

package/src/components/feedback/Dialog/Dialog.styles.ts

@@ -15,7 +15,7 @@ import {
   DIALOG_WIDTH_PERCENT,
 } from './Dialog.metrics';
 import { scrim, shadowInk } from '../../../tokens/ink';
-import { shadowCss } from '../../../tokens/shadow';
+import { rem, rems } from '../../../tokens/relative';
 import { dynamicViewportHeight } from '../../../utils/viewport';
 
 /**
@@ -26,14 +26,14 @@ import { dynamicViewportHeight } from '../../../utils/viewport';
  * too — so a paper cannot be 800px wide on one side and 780 on the other.
  */
 
-// Define pulse animation
-const pulseAnimation = keyframes`
+// Define pulse animation — a function of the theme so the ring's spread follows the type scale.
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 ${DIALOG_PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, DIALOG_PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -56,17 +56,17 @@ interface VariantStyleOptions {
 function borderRadiusOf(theme: Theme, borderRadius: VariantStyleOptions['borderRadius']) {
   const units = DIALOG_RADIUS_UNITS[borderRadius] ?? DIALOG_RADIUS_UNITS.lg;
   // `none` is a bare 0 rather than `spacing(0)`, as this has always written it.
-  return units === 0 ? 0 : theme.spacing(units);
+  return units === 0 ? '0' : theme.spacing(units);
 }
 
-function maxWidthOf(size: VariantStyleOptions['size']): number {
-  return DIALOG_MAX_WIDTH[size] ?? DIALOG_MAX_WIDTH.md;
+function maxWidthOf(theme: Theme, size: VariantStyleOptions['size']): string {
+  return rem(theme, DIALOG_MAX_WIDTH[size] ?? DIALOG_MAX_WIDTH.md);
 }
 
 function baseStylesOf(theme: Theme, opts: VariantStyleOptions) {
   return {
     borderRadius: borderRadiusOf(theme, opts.borderRadius),
-    maxWidth: maxWidthOf(opts.size),
+    maxWidth: maxWidthOf(theme, opts.size),
     width: `${DIALOG_WIDTH_PERCENT}vw`,
     margin: theme.spacing(DIALOG_MARGIN_UNITS),
     transition: theme.transitions.create(
@@ -79,13 +79,7 @@ function baseStylesOf(theme: Theme, opts: VariantStyleOptions) {
 function glowStylesOf(theme: Theme, glow: boolean) {
   return glow
     ? {
-        boxShadow: shadowCss({
-          offsetX: 0,
-          offsetY: 0,
-          blurRadius: DIALOG_GLOW.blurRadius,
-          spreadDistance: 0,
-          color: alpha(theme.palette.primary.main, DIALOG_GLOW.alpha),
-        }),
+        boxShadow: `${rems(theme, 0, 0, DIALOG_GLOW.blurRadius)} ${alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)}`,
       }
     : {};
 }
@@ -104,7 +98,7 @@ function pulseStylesOf(theme: Theme, pulse: boolean) {
       borderRadius: 'inherit',
       backgroundColor: theme.palette.primary.main,
       opacity: DIALOG_PULSE.alpha,
-      animation: `${pulseAnimation} ${DIALOG_PULSE.durationMs / 1000}s infinite`,
+      animation: `${pulseAnimation(theme)} ${DIALOG_PULSE.durationMs / 1000}s infinite`,
       pointerEvents: 'none' as const,
       zIndex: DIALOG_PULSE.zIndex,
     },
@@ -116,7 +110,7 @@ function defaultVariantStyles(theme: Theme, opts: VariantStyleOptions) {
   const gradientStyles = opts.gradient
     ? {
         background: `linear-gradient(${DIALOG_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, DIALOG_GRADIENT.stopAlpha)}, ${alpha(theme.palette.secondary.main, DIALOG_GRADIENT.stopAlpha)})`,
-        backdropFilter: `blur(${DIALOG_GRADIENT.blurPx}px)`,
+        backdropFilter: `blur(${rem(theme, DIALOG_GRADIENT.blurPx)})`,
       }
     : {};
   return {
@@ -124,7 +118,7 @@ function defaultVariantStyles(theme: Theme, opts: VariantStyleOptions) {
     backgroundColor: opts.glass
       ? alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha)
       : theme.palette.background.paper,
-    backdropFilter: opts.glass ? `blur(${DIALOG_GLASS.blurPx}px)` : 'none',
+    backdropFilter: opts.glass ? `blur(${rem(theme, DIALOG_GLASS.blurPx)})` : 'none',
     border: opts.glass
       ? `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`
       : 'none',
@@ -142,15 +136,9 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
         ...baseStylesOf(theme, opts),
         ...decorations,
         backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),
-        backdropFilter: `blur(${DIALOG_GLASS.blurPx}px)`,
+        backdropFilter: `blur(${rem(theme, DIALOG_GLASS.blurPx)})`,
         border: `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`,
-        boxShadow: shadowCss({
-          offsetX: 0,
-          offsetY: DIALOG_GLASS.shadow.offsetY,
-          blurRadius: DIALOG_GLASS.shadow.blurRadius,
-          spreadDistance: 0,
-          color: shadowInk(theme, DIALOG_GLASS.shadow.alpha),
-        }),
+        boxShadow: `${rems(theme, 0, DIALOG_GLASS.shadow.offsetY, DIALOG_GLASS.shadow.blurRadius)} ${shadowInk(theme, DIALOG_GLASS.shadow.alpha)}`,
       };
     case 'fullscreen':
       return {
@@ -171,7 +159,7 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
         // panel's leading corners square.
         borderRadius: `${radius} 0 0 ${radius}`,
         margin: 0,
-        width: maxWidthOf(opts.size),
+        width: maxWidthOf(theme, opts.size),
         // Never wider than the screen: a 600px panel on a 375px phone put its
         // title and the start of every line off the left edge.
         maxWidth: '100%',
@@ -192,6 +180,6 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
 export function backdropSxOf(theme: Theme, glass: boolean) {
   return {
     backgroundColor: scrim(theme, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain),
-    backdropFilter: glass ? `blur(${DIALOG_BACKDROP.blurPx}px)` : 'none',
+    backdropFilter: glass ? `blur(${rem(theme, DIALOG_BACKDROP.blurPx)})` : 'none',
   };
 }

package/src/components/feedback/Modal/Modal.styles.ts

@@ -2,6 +2,7 @@ import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { scrim, shadowInk } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
 import type { ModalProps } from './Modal.types';
 
@@ -9,13 +10,13 @@ type Variant = NonNullable<ModalProps['variant']>;
 type Size = NonNullable<ModalProps['size']>;
 type Radius = NonNullable<ModalProps['borderRadius']>;
 
-const pulseAnimation = keyframes`
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 20px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 20)} currentColor;
     opacity: 0;
   }
   100% {
@@ -71,7 +72,7 @@ const pulseRing = (theme: Theme): CSSObject => ({
   borderRadius: 'inherit',
   backgroundColor: theme.palette.primary.main,
   opacity: 0.3,
-  animation: `${pulseAnimation} 2s infinite`,
+  animation: `${pulseAnimation(theme)} 2s infinite`,
   pointerEvents: 'none' as const,
   zIndex: -1,
 });
@@ -83,16 +84,16 @@ const surface = (theme: Theme, flags: ModalStyleFlags): CSSObject => {
   const isGlass = glass || variant === 'glass';
 
   const boxShadow = glow
-    ? `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}`
+    ? `${rems(theme, 0, 0, 40)} ${alpha(theme.palette.primary.main, 0.3)}`
     : isGlass
-      ? `0 8px 32px ${shadowInk(theme, 0.1)}`
+      ? `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`
       : theme.shadows[8];
 
   return {
     backgroundColor: isGlass
       ? alpha(theme.palette.background.paper, 0.1)
       : theme.palette.background.paper,
-    backdropFilter: isGlass ? 'blur(20px)' : gradient ? 'blur(10px)' : 'none',
+    backdropFilter: isGlass ? `blur(${rem(theme, 20)})` : gradient ? `blur(${rem(theme, 10)})` : 'none',
     border: isGlass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',
     boxShadow,
     ...(gradient && {
@@ -107,7 +108,7 @@ export const panelSx = (theme: Theme, flags: ModalStyleFlags): CSSObject => {
   return {
     // A pulsing panel positions its own ring, so it becomes the containing block.
     position: pulse ? ('relative' as const) : ('absolute' as const),
-    width: WIDTHS[size] ?? WIDTHS.md,
+    width: rem(theme, WIDTHS[size] ?? WIDTHS.md),
     maxWidth: '90vw',
     borderRadius: (RADII[borderRadius] ?? RADII.lg)(theme),
     outline: 0,
@@ -124,5 +125,5 @@ export const panelSx = (theme: Theme, flags: ModalStyleFlags): CSSObject => {
 
 export const backdropSx = (theme: Theme, isGlass: boolean): CSSObject => ({
   backgroundColor: scrim(theme, isGlass ? 0.2 : 0.5),
-  backdropFilter: isGlass ? 'blur(8px)' : 'none',
+  backdropFilter: isGlass ? `blur(${rem(theme, 8)})` : 'none',
 });

package/src/components/feedback/Modal/Modal.tsx

@@ -70,8 +70,9 @@ export const Modal: React.FC<ModalProps> = (props) => {
   );
 };
 
-export const ModalContent: React.FC<ModalContentProps> = ({ children, padding = 3, dataTestId }) => (
-  <Box sx={{ p: padding }} data-testid={dataTestId || 'modal-content'}>
+// `padding` is in spacing units; the default is applied in `sx`, where `p` reads it as one.
+export const ModalContent: React.FC<ModalContentProps> = ({ children, padding, dataTestId }) => (
+  <Box sx={{ p: padding ?? 3 }} data-testid={dataTestId || 'modal-content'}>
     {children}
   </Box>
 );

package/src/components/feedback/Sonner/Sonner.tsx

@@ -2,7 +2,7 @@ import Box from '@mui/material/Box/index.js';
 import Portal from '@mui/material/Portal/index.js';
 import React, { createContext, useCallback, useContext, useRef,useState, useMemo } from 'react';
 
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 import type { SonnerContextType, SonnerItem,SonnerProps } from './Sonner.types';
 
@@ -182,13 +182,13 @@ const SonnerToaster: React.FC<{
       <Box
         sx={{
           position: 'fixed',
-          top: 16,
-          right: 16,
+          top: sxRem(16),
+          right: sxRem(16),
           zIndex: 9999,
           display: 'flex',
           flexDirection: 'column',
           pointerEvents: 'none',
-          maxHeight: 'calc(100vh - 32px)',
+          maxHeight: (theme) => `calc(100vh - ${rem(theme, 32)})`,
           overflowY: 'auto',
           overflowX: 'hidden' }}
       >

package/src/components/feedback/Sonner/SonnerToast.tsx

@@ -14,12 +14,12 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { shadowInk } from '../../../tokens/ink';
-import { sxRem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 import type { SonnerItem } from './Sonner.types';
 import type { SonnerProps } from './Sonner.types';
 
-const renderToastIcon = (icon: SonnerProps['icon'], type: SonnerProps['type']) => {
+const renderToastIcon = (theme: Theme, icon: SonnerProps['icon'], type: SonnerProps['type']) => {
   if (icon) return icon;
 
   switch (type) {
@@ -32,7 +32,7 @@ const renderToastIcon = (icon: SonnerProps['icon'], type: SonnerProps['type']) =
     case 'info':
       return <InfoIcon sx={{ fontSize: sxRem(20), color: 'info.main' }} />;
     case 'loading':
-      return <CircularProgress size={16} />;
+      return <CircularProgress size={rem(theme, 16)} />;
     default:
       return null;
   }
@@ -72,9 +72,9 @@ const buildToastStyles = (
       return {
         ...baseStyles,
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-        boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,
+        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,
       };
 
     case 'minimal':
@@ -83,7 +83,7 @@ const buildToastStyles = (
         backgroundColor: theme.palette.background.default,
         border: 'none',
         boxShadow: 'none',
-        borderLeft: `4px solid ${theme.palette.primary.main}`,
+        borderLeft: `${rem(theme, 4)} solid ${theme.palette.primary.main}`,
         borderRadius: 0,
       };
 
@@ -178,14 +178,14 @@ export const SonnerToast: React.FC<SonnerItem & { onDismiss: (id: string) => voi
           ...buildToastStyles(theme, variant, visible),
           p: 2,
           mb: 1,
-          minWidth: 356,
-          maxWidth: 400,
+          minWidth: sxRem(356),
+          maxWidth: sxRem(400),
           display: 'flex',
           alignItems: 'flex-start',
           gap: 1.5,
         }}
       >
-        {renderToastIcon(icon, type)}
+        {renderToastIcon(theme, icon, type)}
 
         <ToastContent
           title={title}

package/src/components/feedback/StackedModal/StackedModal.parts.tsx

@@ -8,9 +8,10 @@ import DialogTitle from '@mui/material/DialogTitle/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import Skeleton from '@mui/material/Skeleton/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
+import { rem } from '../../../tokens/relative';
 import { safeAreaBottom } from '../../../utils/viewport';
 import {
   loadingOverlayStyles,
@@ -102,16 +103,19 @@ export const modalAriaIds = (
 export const ModalLoadingOverlay: FC<{ loadingText?: string; dataTestId?: string }> = ({
   loadingText,
   dataTestId,
-}) => (
-  <LoadingOverlay data-testid={testId(dataTestId, 'loading-overlay')}>
-    <CircularProgress size={40} data-testid={testId(dataTestId, 'loading-spinner')} />
-    {loadingText && (
-      <Typography variant="body2" sx={{ mt: 2 }} data-testid={testId(dataTestId, 'loading-text')}>
-        {loadingText}
-      </Typography>
-    )}
-  </LoadingOverlay>
-);
+}) => {
+  const theme = useTheme();
+  return (
+    <LoadingOverlay data-testid={testId(dataTestId, 'loading-overlay')}>
+      <CircularProgress size={rem(theme, 40)} data-testid={testId(dataTestId, 'loading-spinner')} />
+      {loadingText && (
+        <Typography variant="body2" sx={{ mt: 2 }} data-testid={testId(dataTestId, 'loading-text')}>
+          {loadingText}
+        </Typography>
+      )}
+    </LoadingOverlay>
+  );
+};
 
 interface ModalHeaderProps {
   titleId: string;
@@ -211,14 +215,17 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   </StyledDialogTitle>
 );
 
-const ContentSkeleton: FC = () => (
-  <Box sx={{ p: 3 }}>
-    <Skeleton variant="text" width="60%" height={32} />
-    <Skeleton variant="text" width="100%" />
-    <Skeleton variant="text" width="100%" />
-    <Skeleton variant="rectangular" height={200} sx={{ mt: 2 }} />
-  </Box>
-);
+const ContentSkeleton: FC = () => {
+  const theme = useTheme();
+  return (
+    <Box sx={{ p: 3 }}>
+      <Skeleton variant="text" width="60%" height={rem(theme, 32)} />
+      <Skeleton variant="text" width="100%" />
+      <Skeleton variant="text" width="100%" />
+      <Skeleton variant="rectangular" height={rem(theme, 200)} sx={{ mt: 2 }} />
+    </Box>
+  );
+};
 
 interface ModalBodyProps {
   descId: string;

package/src/components/feedback/StackedModal/StackedModal.styles.ts

@@ -1,6 +1,7 @@
 import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { scrim } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 import { dynamicViewportHeight } from '../../../utils/viewport';
 import type { ModalPanelRole, PanelMaxWidth } from './StackedModal.types';
 
@@ -53,14 +54,14 @@ const cap = (customMaxWidth?: PanelMaxWidth): number | null =>
   customMaxWidth ? MAX_WIDTH_PX[customMaxWidth] : null;
 
 /** One breakpoint's width: the viewport share, held under the optional px cap. */
-const panelWidth = (share: string, capPx: number | null): CSSObject =>
+const panelWidth = (theme: Theme, share: string, capPx: number | null): CSSObject =>
   capPx
-    ? { width: `min(${share}, ${capPx}px)`, maxWidth: `${capPx}px` }
+    ? { width: `min(${share}, ${rem(theme, capPx)})`, maxWidth: rem(theme, capPx) }
     : { width: share, maxWidth: share };
 
 const backdropStyles = (theme: Theme, modalRole?: ModalPanelRole): CSSObject => ({
   backgroundColor: scrim(theme, (modalRole && BACKDROP_ALPHA_BY_ROLE[modalRole]) ?? 0.5),
-  backdropFilter: modalRole === 'primary' ? 'blur(4px)' : 'none',
+  backdropFilter: modalRole === 'primary' ? `blur(${rem(theme, 4)})` : 'none',
 });
 
 /**
@@ -71,10 +72,11 @@ const backdropStyles = (theme: Theme, modalRole?: ModalPanelRole): CSSObject =>
  * prop, when given, caps it further.
  */
 const primaryPanelStyles = (theme: Theme, capPx: number | null): CSSObject => ({
-  [theme.breakpoints.down('sm')]: panelWidth('100%', capPx),
-  [theme.breakpoints.between('sm', 'lg')]: panelWidth('80vw', capPx),
-  [theme.breakpoints.up('lg')]: panelWidth('60vw', capPx),
-  '@media (min-width:2200px)': panelWidth('40vw', capPx),
+  [theme.breakpoints.down('sm')]: panelWidth(theme, '100%', capPx),
+  [theme.breakpoints.between('sm', 'lg')]: panelWidth(theme, '80vw', capPx),
+  [theme.breakpoints.up('lg')]: panelWidth(theme, '60vw', capPx),
+  // A viewport width, in the theme's breakpoint unit like the three above.
+  [theme.breakpoints.up(2200)]: panelWidth(theme, '40vw', capPx),
 });
 
 /** Panels below the top one expand to full width, producing the GTM stacking effect. */
@@ -101,8 +103,8 @@ const glassStyles = (theme: Theme, glass?: boolean, role?: ModalPanelRole): CSSO
   glass && role === 'primary'
     ? {
         backgroundColor: alpha(theme.palette.background.paper, 0.85),
-        backdropFilter: 'blur(10px)',
-        WebkitBackdropFilter: 'blur(10px)',
+        backdropFilter: `blur(${rem(theme, 10)})`,
+        WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
         border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
       }
     : {};

package/src/components/feedback/Toast/Toast.tsx

@@ -15,6 +15,8 @@ import Typography from '@mui/material/Typography/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
 import React, { createContext, useCallback,useContext, useState } from 'react';
 
+import { rem } from '../../../tokens/relative';
+
 import type { ToastContainerProps, ToastContextType, ToastItem,ToastProps } from './Toast.types';
 
 const ToastContext = createContext<ToastContextType | null>(null);
@@ -118,7 +120,7 @@ export const useToast = (): ToastContextType => {
   return context;
 };
 
-const renderVariantIcon = (variant: ToastProps['variant']) => {
+const renderVariantIcon = (theme: Theme, variant: ToastProps['variant']) => {
   switch (variant) {
     case 'success':
       return <SuccessIcon />;
@@ -129,7 +131,7 @@ const renderVariantIcon = (variant: ToastProps['variant']) => {
     case 'info':
       return <InfoIcon />;
     case 'promise':
-      return <CircularProgress size={20} />;
+      return <CircularProgress size={rem(theme, 20)} />;
     default:
       return null;
   }
@@ -151,7 +153,7 @@ const buildToastStyles = (theme: Theme, glass: boolean) => {
     return {
       ...baseStyles,
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
     };
   }
@@ -180,7 +182,7 @@ export const Toast: React.FC<ToastProps> = ({
   return (
     <Alert
       data-testid={dataTestId}
-      icon={renderVariantIcon(variant)}
+      icon={renderVariantIcon(theme, variant)}
       severity={toAlertSeverity(variant)}
       onClose={closable ? handleClose : undefined}
       action={
@@ -218,10 +220,11 @@ export const Toast: React.FC<ToastProps> = ({
 export const ToastContainer: React.FC<ToastContainerProps> = ({
   position = 'top-right',
   maxToasts = 5,
-  gap = 8,
+  gap,
   className,
   dataTestId = 'toast-container',
 }) => {
+  const theme = useTheme();
   const context = useContext(ToastContext);
   
   if (!context) {
@@ -236,8 +239,9 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({
       zIndex: 9999,
       display: 'flex',
       flexDirection: 'column',
-      gap: `${gap}px`,
-      padding: '16px',
+      // `gap` is design px (default 8), read through the type scale.
+      gap: rem(theme, gap ?? 8),
+      padding: rem(theme, 16),
       pointerEvents: 'none',
     };
 

package/src/components/feedback/TutorialOverlay/TutorialOverlay.geometry.ts

@@ -1,5 +1,3 @@
-const DEFAULT_PADDING = 16;
-
 export const getElementBounds = (selector: string): globalThis.DOMRect | null =>
   document.querySelector(selector)?.getBoundingClientRect() ?? null;
 
@@ -53,7 +51,8 @@ export const calculateTooltipPosition = (
   targetBounds: globalThis.DOMRect,
   tooltipBounds: globalThis.DOMRect,
   placement: string,
-  padding = DEFAULT_PADDING,
+  /** The clearance around the target, in px — the caller reads it through `remPx`. */
+  padding: number,
 ) => {
   const finalPlacement = placement === 'auto' ? pickPlacement(targetBounds) : placement;
   const offset = offsetFor(finalPlacement, targetBounds, tooltipBounds, padding);

package/src/components/feedback/TutorialOverlay/TutorialOverlay.hooks.ts

@@ -1,5 +1,8 @@
+import { useTheme } from '@mui/material/styles/index.js';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import { remPx } from '../../../tokens/relative';
+
 import { calculateTooltipPosition, getElementBounds } from './TutorialOverlay.geometry';
 import type { TutorialOverlayProps } from './TutorialOverlay.types';
 
@@ -49,6 +52,7 @@ const useTooltipPlacement = ({
   isVisible: boolean;
   preferredPosition?: string;
 }) => {
+  const theme = useTheme();
   const tooltipRef = useRef<HTMLDivElement>(null);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
   const [actualPlacement, setActualPlacement] = useState<string>('bottom');
@@ -60,11 +64,12 @@ const useTooltipPlacement = ({
       targetBounds,
       tooltipRef.current.getBoundingClientRect(),
       preferredPosition || 'auto',
+      remPx(theme, 16),
     );
 
     setTooltipPosition(position);
     setActualPlacement(placement);
-  }, [targetBounds, isVisible, preferredPosition]);
+  }, [targetBounds, isVisible, preferredPosition, theme]);
 
   return { tooltipRef, tooltipPosition, actualPlacement };
 };