@12-apps/ui 6.37.0 → 6.38.0

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 };
 };

package/src/components/feedback/TutorialOverlay/TutorialOverlay.tsx

@@ -4,35 +4,37 @@ import LinearProgress from '@mui/material/LinearProgress/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import Portal from '@mui/material/Portal/index.js';
 import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import type { FC} from 'react';
 import React, {  } from 'react';
 
 import { scrim, sheen } from '../../../tokens/ink';
 import { ABSOLUTE_INK } from '../../../tokens/ink.core';
+import { rem, remPx, rems } from '../../../tokens/relative';
 
 import { useTutorialOverlay } from './TutorialOverlay.hooks';
 import { TutorialStepBody } from './TutorialStepBody';
 import type { TutorialOverlayProps } from './TutorialOverlay.types';
 
-// Animation keyframes — static, so the ring's sheen is the absolute white.
-const pulseAnimation = keyframes`
+// Animation keyframes — the ring's sheen is the absolute white; its reach follows the type scale.
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0.7)};
   }
   70% {
-    box-shadow: 0 0 0 20px ${alpha(ABSOLUTE_INK.white, 0)};
+    box-shadow: 0 0 0 ${rem(theme, 20)} ${alpha(ABSOLUTE_INK.white, 0)};
   }
   100% {
     box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0)};
   }
 `;
 
-const floatAnimation = keyframes`
+const floatAnimation = (theme: Theme) => keyframes`
   0%, 100% {
     transform: translateY(0);
   }
   50% {
-    transform: translateY(-10px);
+    transform: translateY(${rem(theme, -10)});
   }
 `;
 
@@ -55,70 +57,74 @@ const Backdrop = styled(Box)(({ theme }) => ({
   right: 0,
   bottom: 0,
   background: scrim(theme, 0.7),
-  backdropFilter: 'blur(2px)' }));
+  backdropFilter: `blur(${rem(theme, 2)})` }));
 
 const Spotlight = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'bounds' && prop !== 'padding' })<{ bounds: globalThis.DOMRect; padding: number }>(({ theme, bounds, padding }) => ({
-  position: 'absolute',
-  top: bounds.top - padding,
-  left: bounds.left - padding,
-  width: bounds.width + padding * 2,
-  height: bounds.height + padding * 2,
-  borderRadius: 8,
-  border: `2px solid ${sheen(theme, 0.5)}`,
-  animation: `${pulseAnimation} 2s infinite`,
-  pointerEvents: 'none',
-  '&::before': {
-    content: '""',
+  shouldForwardProp: (prop) => prop !== 'bounds' && prop !== 'padding' })<{ bounds: globalThis.DOMRect; padding: number }>(({ theme, bounds, padding }) => {
+  // `bounds` is the target's measured rect; the design-px clearance joins it as px.
+  const clearance = remPx(theme, padding);
+  return {
     position: 'absolute',
-    inset: -2,
-    borderRadius: 8,
-    background: 'transparent',
-    boxShadow: `0 0 0 9999px ${scrim(theme, 0.7)}` } }));
+    top: bounds.top - clearance,
+    left: bounds.left - clearance,
+    width: bounds.width + clearance * 2,
+    height: bounds.height + clearance * 2,
+    borderRadius: rem(theme, 8),
+    border: `${rem(theme, 2)} solid ${sheen(theme, 0.5)}`,
+    animation: `${pulseAnimation(theme)} 2s infinite`,
+    pointerEvents: 'none',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      inset: rem(theme, -2),
+      borderRadius: rem(theme, 8),
+      background: 'transparent',
+      boxShadow: `${rems(theme, 0, 0, 0, 9999)} ${scrim(theme, 0.7)}` } };
+});
 
 const TooltipContainer = styled(Paper, {
   shouldForwardProp: (prop) => prop !== 'placement' })<{ placement: string }>(({ theme, placement }) => ({
   position: 'absolute',
-  maxWidth: 360,
+  maxWidth: rem(theme, 360),
   padding: theme.spacing(3),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-  backdropFilter: 'blur(20px)',
-  WebkitBackdropFilter: 'blur(20px)',
+  backdropFilter: `blur(${rem(theme, 20)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   boxShadow: theme.shadows[12],
-  animation: `${floatAnimation} 3s ease-in-out infinite`,
+  animation: `${floatAnimation(theme)} 3s ease-in-out infinite`,
   pointerEvents: 'auto',
   zIndex: theme.zIndex.modal + 101,
   '&::before': {
     content: '""',
     position: 'absolute',
-    width: 12,
-    height: 12,
+    width: rem(theme, 12),
+    height: rem(theme, 12),
     background: 'inherit',
     transform: 'rotate(45deg)',
     border: 'inherit',
     ...(placement === 'top' && {
-      bottom: -7,
+      bottom: rem(theme, -7),
       left: '50%',
-      marginLeft: -6,
+      marginLeft: rem(theme, -6),
       borderTop: 'none',
       borderLeft: 'none' }),
     ...(placement === 'bottom' && {
-      top: -7,
+      top: rem(theme, -7),
       left: '50%',
-      marginLeft: -6,
+      marginLeft: rem(theme, -6),
       borderBottom: 'none',
       borderRight: 'none' }),
     ...(placement === 'left' && {
-      right: -7,
+      right: rem(theme, -7),
       top: '50%',
-      marginTop: -6,
+      marginTop: rem(theme, -6),
       borderLeft: 'none',
       borderBottom: 'none' }),
     ...(placement === 'right' && {
-      left: -7,
+      left: rem(theme, -7),
       top: '50%',
-      marginTop: -6,
+      marginTop: rem(theme, -6),
       borderRight: 'none',
       borderTop: 'none' }) } }));
 
@@ -127,7 +133,7 @@ const ProgressBar = styled(LinearProgress)(({ theme }) => ({
   top: 0,
   left: 0,
   right: 0,
-  height: 4,
+  height: rem(theme, 4),
   zIndex: theme.zIndex.modal + 102,
   '& .MuiLinearProgress-bar': {
     background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)` } }));

package/src/components/feedback/TutorialOverlay/TutorialStepBody.tsx

@@ -12,6 +12,7 @@ import { alpha, styled } from '@mui/material/styles/index.js';
 import React, {  } from 'react';
 
 import { onMedia, uiInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 import type { TutorialOverlayProps } from './TutorialOverlay.types';
 import type { TutorialCopy } from '../../../copy';
@@ -27,8 +28,8 @@ const StepIndicator = styled(Box)(({ theme }) => ({
 
 const StepDot = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'active' && prop !== 'completed' })<{ active?: boolean; completed?: boolean }>(({ theme, active, completed }) => ({
-  width: 8,
-  height: 8,
+  width: rem(theme, 8),
+  height: rem(theme, 8),
   borderRadius: '50%',
   background: completed
     ? theme.palette.success.main

package/src/components/layout/Accordion/Accordion.styles.ts

@@ -1,6 +1,8 @@
 import { alpha } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 
+import { rem, rems } from '../../../tokens/relative';
+
 import type { AccordionVariant } from './Accordion.types';
 
 const BASE_TRANSITION = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
@@ -12,7 +14,7 @@ export const accordionVariantStyles = (theme: Theme, variant: AccordionVariant)
     case 'glass':
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.08),
-        backdropFilter: 'blur(24px) saturate(180%)',
+        backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
         border: `1px solid ${alpha(theme.palette.primary.main, 0.15)}`,
         borderRadius: theme.spacing(1.5),
         transition: BASE_TRANSITION,
@@ -22,8 +24,8 @@ export const accordionVariantStyles = (theme: Theme, variant: AccordionVariant)
         '&:hover': {
           backgroundColor: alpha(theme.palette.background.paper, 0.12),
           border: `1px solid ${alpha(theme.palette.primary.main, 0.25)}`,
-          transform: 'translateY(-1px)',
-          boxShadow: `0 8px 32px ${alpha(theme.palette.primary.main, 0.12)}`,
+          transform: `translateY(${rem(theme, -1)})`,
+          boxShadow: `${rems(theme, 0, 8, 32)} ${alpha(theme.palette.primary.main, 0.12)}`,
         },
         '&.Mui-expanded': {
           backgroundColor: alpha(theme.palette.background.paper, 0.15),
@@ -43,7 +45,7 @@ export const accordionVariantStyles = (theme: Theme, variant: AccordionVariant)
         },
         '&:hover': {
           borderColor: theme.palette.primary.main,
-          boxShadow: `0 0 0 1px ${alpha(theme.palette.primary.main, 0.1)}`,
+          boxShadow: `${rems(theme, 0, 0, 0, 1)} ${alpha(theme.palette.primary.main, 0.1)}`,
         },
         '&.Mui-expanded': {
           borderColor: theme.palette.primary.main,
@@ -62,11 +64,11 @@ export const accordionVariantStyles = (theme: Theme, variant: AccordionVariant)
         },
         '&:hover': {
           boxShadow: theme.shadows[4],
-          transform: 'translateY(-2px)',
+          transform: `translateY(${rem(theme, -2)})`,
         },
         '&.Mui-expanded': {
           boxShadow: theme.shadows[6],
-          transform: 'translateY(-1px)',
+          transform: `translateY(${rem(theme, -1)})`,
         },
       };
     default:

package/src/components/layout/Accordion/Accordion.tsx

@@ -6,6 +6,8 @@ import MuiAccordionSummary from '@mui/material/AccordionSummary/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem } from '../../../tokens/relative';
+
 import { accordionVariantStyles } from './Accordion.styles';
 import type { 
   AccordionActionsProps, 
@@ -66,7 +68,7 @@ export const AccordionSummary: React.FC<AccordionSummaryProps> = ({
       disabled={disabled}
       data-testid={testId}
       sx={{
-        minHeight: 56,
+        minHeight: rem(theme, 56),
         '& .MuiAccordionSummary-expandIconWrapper': {
           transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
           color: theme.palette.text.secondary,
@@ -82,13 +84,13 @@ export const AccordionSummary: React.FC<AccordionSummaryProps> = ({
           },
         },
         '&.Mui-focusVisible': {
-          outline: `2px solid ${theme.palette.primary.main}`,
-          outlineOffset: 2,
+          outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,
+          outlineOffset: rem(theme, 2),
         },
         // Enhanced keyboard navigation styles
         '&:focus-visible': {
-          outline: `2px solid ${theme.palette.primary.main}`,
-          outlineOffset: -2,
+          outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,
+          outlineOffset: rem(theme, -2),
         },
       }}
       {...props}
@@ -119,7 +121,7 @@ export const AccordionDetails: React.FC<AccordionDetailsProps> = ({
         '@keyframes fadeInUp': {
           '0%': {
             opacity: 0,
-            transform: 'translateY(8px)',
+            transform: `translateY(${rem(theme, 8)})`,
           },
           '100%': {
             opacity: 1,
@@ -150,12 +152,12 @@ export const AccordionActions: React.FC<AccordionActionsProps> = ({
         padding: theme.spacing(1, 2),
         borderTop: `1px solid ${alpha(theme.palette.divider, 0.08)}`,
         backgroundColor: alpha(theme.palette.background.paper, 0.5),
-        backdropFilter: 'blur(8px)',
+        backdropFilter: `blur(${rem(theme, 8)})`,
         // Animate button entries
         '& > *': {
           transition: 'all 0.2s ease-in-out',
           '&:hover': {
-            transform: 'translateY(-1px)',
+            transform: `translateY(${rem(theme, -1)})`,
           },
         },
       }}

package/src/components/layout/Box/Box.tsx

@@ -1,4 +1,5 @@
 import MuiBox from '@mui/material/Box/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import * as React from 'react';
 
@@ -6,26 +7,37 @@ import { resolveBoxLayout, splitBoxProps, type BoxLayout } from './box-layout';
 import type { BoxProps } from './Box.types';
 import { resolveTestId } from '../../../platform/test-id';
 import { useUiTheme } from '../../../provider/use-ui-theme';
+import { rem } from '../../../tokens/relative';
 
 /**
  * `sx` is not CSS: it reads a bare number on `padding`, `margin` or `gap` as
  * SPACING UNITS, on `borderRadius` as a multiple of `shape.borderRadius`, and a
  * `width` of `1` or less as a fraction. The resolver's numbers are already px,
- * so every one of them is written as a px string — otherwise a `p={2}` box
+ * so every one of them is written as a length string — otherwise a `p={2}` box
  * renders 128px of padding on the web and 16dp on native, which is the one
  * thing this component exists to rule out.
+ *
+ * Spacing, radius and the border are already the host theme's own px (read
+ * through `uiThemeFromMui`), so they stay px: through `rem` they would scale
+ * twice. `width`/`height` are the caller's design px, so they go through `rem`.
  */
 const PX_KEYS = new Set<keyof BoxLayout>([
   'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
   'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
-  'gap', 'borderRadius', 'borderWidth', 'width', 'height',
+  'gap', 'borderRadius', 'borderWidth',
 ]);
+const DESIGN_PX_KEYS = new Set<keyof BoxLayout>(['width', 'height']);
 
-export function layoutToSx(layout: BoxLayout): Record<string, string | number> {
+function lengthOf(theme: Theme, key: keyof BoxLayout, value: number): string | number {
+  if (DESIGN_PX_KEYS.has(key)) return rem(theme, value);
+  return PX_KEYS.has(key) ? `${value}px` : value;
+}
+
+export function layoutToSx(layout: BoxLayout, theme: Theme): Record<string, string | number> {
   return Object.fromEntries(
     Object.entries(layout).map(([key, value]) => [
       key,
-      typeof value === 'number' && PX_KEYS.has(key as keyof BoxLayout) ? `${value}px` : value,
+      typeof value === 'number' ? lengthOf(theme, key as keyof BoxLayout, value) : value,
     ]),
   );
 }
@@ -37,8 +49,9 @@ export function layoutToSx(layout: BoxLayout): Record<string, string | number> {
 export const Box = React.forwardRef<HTMLDivElement, BoxProps>(
   ({ children, sx, ...props }, ref) => {
     const theme = useUiTheme();
+    const muiTheme = useTheme();
     const { layout, rest } = splitBoxProps(props);
-    const resolved = layoutToSx(resolveBoxLayout(layout, theme)) as SxProps<Theme>;
+    const resolved = layoutToSx(resolveBoxLayout(layout, theme), muiTheme) as SxProps<Theme>;
     const testId = resolveTestId(layout);
     const merged: SxProps<Theme> = [
       resolved,