@12-apps/ui 6.36.0 → 6.38.0

package/src/components/form/Textarea/Textarea.tsx

@@ -2,7 +2,7 @@ import Box from '@mui/material/Box/index.js';
 import FormHelperText from '@mui/material/FormHelperText/index.js';
 import InputLabel from '@mui/material/InputLabel/index.js';
 import TextareaAutosize from '@mui/material/TextareaAutosize/index.js';
-import { alpha, styled } from '@mui/material/styles/index.js';
+import { alpha, styled, useTheme } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 import React, { lazy, Suspense, useState } from 'react';
 
@@ -33,7 +33,7 @@ import type { TextareaProps } from './Textarea.types';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { FIELD_BORDER_WIDTH, fieldBorder } from '../../../tokens/field-height';
-import { rem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 // Interface for styled component props
 interface StyledTextareaProps {
@@ -66,11 +66,11 @@ const StyledTextarea = styled(TextareaAutosize, {
   const errorColor = theme.palette.error;
 
   const sizeMap = {
-    xs: { padding: '6px 8px', fontSize: rem(theme, 12), minHeight: '60px' },
-    sm: { padding: '8px 10px', fontSize: rem(theme, 14), minHeight: '80px' },
-    md: { padding: '10px 12px', fontSize: rem(theme, 16), minHeight: '100px' },
-    lg: { padding: '12px 14px', fontSize: rem(theme, 18), minHeight: '120px' },
-    xl: { padding: '14px 16px', fontSize: rem(theme, 20), minHeight: '140px' } };
+    xs: { padding: rems(theme, 6, 8), fontSize: rem(theme, 12), minHeight: rem(theme, 60) },
+    sm: { padding: rems(theme, 8, 10), fontSize: rem(theme, 14), minHeight: rem(theme, 80) },
+    md: { padding: rems(theme, 10, 12), fontSize: rem(theme, 16), minHeight: rem(theme, 100) },
+    lg: { padding: rems(theme, 12, 14), fontSize: rem(theme, 18), minHeight: rem(theme, 120) },
+    xl: { padding: rems(theme, 14, 16), fontSize: rem(theme, 20), minHeight: rem(theme, 140) } };
 
   const baseStyles = {
     width: '100%',
@@ -97,7 +97,7 @@ const StyledTextarea = styled(TextareaAutosize, {
     '&:focus': {
       borderColor: error ? errorColor.main : colorPalette.main,
       backgroundColor: theme.palette.background.paper,
-      boxShadow: `inset 0 0 0 1px ${error ? errorColor.main : colorPalette.main}, 0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };
+      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${error ? errorColor.main : colorPalette.main}, 0 0 0 ${rem(theme, 3)} ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };
 
   // Glass morphism effect
   return {
@@ -112,9 +112,9 @@ const StyledLabel = styled(InputLabel, {
   color: error ? theme.palette.error.main : theme.palette.text.primary,
   ...(glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: 'blur(10px)',
-    padding: '4px 8px',
-    borderRadius: '4px',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    padding: rems(theme, 4, 8),
+    borderRadius: rem(theme, 4),
     border: `1px solid ${fieldEdge(theme)}`,
     display: 'inline-block' }) }));
 
@@ -133,8 +133,6 @@ const StyledLabel = styled(InputLabel, {
 
 // Rich text toolbar styling
 
-const ICON_GUTTER = '40px';
-
 const TEXTAREA_DEFAULTS = {
   variant: 'default',
   color: 'primary',
@@ -191,8 +189,8 @@ const TextareaIcon: React.FC<{
   <Box
     sx={{
       position: 'absolute',
-      top: '12px',
-      ...(iconPosition === 'start' ? { left: '12px' } : { right: '12px' }),
+      top: sxRem(12),
+      ...(iconPosition === 'start' ? { left: sxRem(12) } : { right: sxRem(12) }),
       color: 'text.secondary',
       pointerEvents: 'none',
       zIndex: 1 }}
@@ -229,6 +227,19 @@ function RichVariant({
   );
 }
 
+// Same gap either side; only which side it applies to changes. The previous
+// version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose
+// two branches were identical. The icon's gutter is 40px at the design scale.
+function withIconGutter(
+  theme: Theme,
+  style: React.CSSProperties | undefined,
+  hasIcon: boolean,
+  iconPosition: TextareaProps['iconPosition'],
+): React.CSSProperties {
+  if (!hasIcon) return { ...style };
+  return { ...style, [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: rem(theme, 40) };
+}
+
 export const Textarea: React.FC<TextareaProps> = (textareaProps) => {
   const {
     variant,
@@ -255,17 +266,12 @@ export const Textarea: React.FC<TextareaProps> = (textareaProps) => {
   // key to optional, which would lose what the variant union already proved.
   const { richEditorCopy } = textareaProps;
 
+  const theme = useTheme();
   const [richTextValue, setRichTextValue] = useState('');
   const hasIcon = Boolean(icon);
   const testId = dataTestId || dataTestIdCamelCase;
 
-  const textareaStyle = {
-    ...style,
-    // Same gap either side; only which side it applies to changes. The previous
-    // version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose
-    // two branches were identical.
-    ...(hasIcon && {
-      [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: ICON_GUTTER }) };
+  const textareaStyle = withIconGutter(theme, style, hasIcon, iconPosition);
 
   // If rich text variant, use the rich text editor
   if (variant === 'rich' && richEditorCopy) {

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -22,7 +22,7 @@ import type { RichEditorToolbarCopy } from '../../../copy';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   display: 'flex',
@@ -33,9 +33,9 @@ const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   background: glass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
   ...(glass && {
-    backdropFilter: 'blur(15px)' }),
+    backdropFilter: `blur(${rem(theme, 15)})` }),
   '& .MuiDivider-root': {
-    height: 24,
+    height: rem(theme, 24),
     margin: `0 ${theme.spacing(1)}` } }));
 
 const ToolbarButton = styled(IconButton, {
@@ -63,8 +63,8 @@ const ToolbarButton = styled(IconButton, {
   '&:hover': {
     color: theme.palette.primary.main,
     backgroundColor: alpha(theme.palette.primary.main, 0.15),
-    transform: 'translateY(-1px)',
-    animation: `${floatAnimation} 1.5s ease-in-out infinite`,
+    transform: `translateY(${rem(theme, -1)})`,
+    animation: `${floatAnimation(theme)} 1.5s ease-in-out infinite`,
 
     '&::before': {
       width: '100%',
@@ -87,10 +87,10 @@ const CharacterCount = styled(Box)<{ limit?: number; count: number }>(({ theme,
       : isWarning
         ? theme.palette.warning.main
         : theme.palette.text.secondary,
-    padding: '2px 6px',
+    padding: rems(theme, 2, 6),
     borderRadius: theme.spacing(0.5),
     backgroundColor: alpha(theme.palette.background.paper, 0.8),
-    backdropFilter: 'blur(10px)',
+    backdropFilter: `blur(${rem(theme, 10)})`,
     transition: 'all 0.3s ease' };
 });
 
@@ -108,7 +108,7 @@ const ContentEditableDiv = styled('div')<{
   const engaged = error ? errorColor.main : colorPalette.main;
 
   return {
-    minHeight: '120px',
+    minHeight: rem(theme, 120),
     padding: theme.spacing(1.5),
     borderRadius: `0 0 ${fieldRadius(theme)}px ${fieldRadius(theme)}px`,
     border: `${FIELD_BORDER_WIDTH}px solid ${error || focused ? engaged : fieldEdge(theme)}`,
@@ -125,7 +125,7 @@ const ContentEditableDiv = styled('div')<{
     cursor: 'text',
 
     ...(glass && {
-      backdropFilter: 'blur(20px)' }),
+      backdropFilter: `blur(${rem(theme, 20)})` }),
 
     '&:hover': {
       backgroundColor: glass
@@ -136,7 +136,7 @@ const ContentEditableDiv = styled('div')<{
     // moves), as every other field's does, under the halo.
     '&:focus': {
       borderColor: engaged,
-      boxShadow: `inset 0 0 0 1px ${engaged}, 0 0 0 3px ${alpha(engaged, 0.1)}` },
+      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${engaged}, 0 0 0 ${rem(theme, 3)} ${alpha(engaged, 0.1)}` },
 
     '& > *': {
       margin: '0.5em 0' },

package/src/components/form/Toggle/Toggle.styles.ts

@@ -4,17 +4,17 @@ import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.
 import { fieldRadius } from '../../../tokens/field-radius';
 import { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, controlNeutral, sheen } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
-const glowAnimation = keyframes`
-  0% { box-shadow: 0 0 5px currentColor; }
-  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
-  100% { box-shadow: 0 0 5px currentColor; }
+const glowAnimation = (theme: Theme) => keyframes`
+  0% { box-shadow: 0 0 ${rem(theme, 5)} currentColor; }
+  50% { box-shadow: 0 0 ${rem(theme, 15)} currentColor, 0 0 ${rem(theme, 25)} currentColor; }
+  100% { box-shadow: 0 0 ${rem(theme, 5)} currentColor; }
 `;
 
-const floatAnimation = keyframes`
+const floatAnimation = (theme: Theme) => keyframes`
   0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-2px); }
+  50% { transform: translateY(${rem(theme, -2)}); }
 `;
 
 interface TogglePalette {
@@ -57,18 +57,21 @@ export const getColorFromTheme = (theme: Theme, color: string): TogglePalette =>
   };
 };
 
-/** Each size's padding and type; the type is design px, read through the type scale. */
-const SIZE_MAP: Record<string, { padding: string; fontPx: number }> = {
-  xs: { padding: '4px 8px', fontPx: 12 },
-  sm: { padding: '6px 12px', fontPx: 14 },
-  md: { padding: '8px 16px', fontPx: 16 },
-  lg: { padding: '10px 20px', fontPx: 18 },
-  xl: { padding: '12px 24px', fontPx: 20 },
+/**
+ * Each size's padding (vertical, horizontal) and type, in design px, read
+ * through the type scale.
+ */
+const SIZE_MAP: Record<string, { paddingPx: readonly [number, number]; fontPx: number }> = {
+  xs: { paddingPx: [4, 8], fontPx: 12 },
+  sm: { paddingPx: [6, 12], fontPx: 14 },
+  md: { paddingPx: [8, 16], fontPx: 16 },
+  lg: { paddingPx: [10, 20], fontPx: 18 },
+  xl: { paddingPx: [12, 24], fontPx: 20 },
 };
 
 const sizeStyles = (theme: Theme, customSize: string): CSSObject => {
   const size = SIZE_MAP[customSize];
-  return size ? { padding: size.padding, fontSize: rem(theme, size.fontPx) } : {};
+  return size ? { padding: rems(theme, ...size.paddingPx), fontSize: rem(theme, size.fontPx) } : {};
 };
 
 export const baseStyles = (
@@ -103,9 +106,9 @@ export const baseStyles = (
   '&:hover': {
     backgroundColor: alpha(colorPalette.main, 0.08),
     borderColor: colorPalette.main,
-    transform: 'translateY(-1px)',
-    boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,
-    animation: `${floatAnimation} 2s ease-in-out infinite`,
+    transform: `translateY(${rem(theme, -1)})`,
+    boxShadow: `0 ${rems(theme, 4, 8)} ${alpha(colorPalette.main, 0.15)}`,
+    animation: `${floatAnimation(theme)} 2s ease-in-out infinite`,
 
     '&::before': {
       width: '100%',
@@ -121,7 +124,7 @@ export const baseStyles = (
     backgroundColor: colorPalette.main,
     color: colorPalette.contrastText || absoluteInk(theme).white,
     borderColor: colorPalette.main,
-    boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,
+    boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(colorPalette.main, 0.3)}`,
 
     '&::after': {
       content: '""',
@@ -136,8 +139,8 @@ export const baseStyles = (
 
     '&:hover': {
       backgroundColor: colorPalette.dark,
-      transform: 'translateY(-2px) scale(1.02)',
-      boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`,
+      transform: `translateY(${rem(theme, -2)}) scale(1.02)`,
+      boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(colorPalette.main, 0.4)}`,
     },
   },
 
@@ -158,7 +161,7 @@ export const variantStyles = (
     case 'outline':
       return {
         backgroundColor: 'transparent',
-        border: `2px solid ${colorPalette.main}`,
+        border: `${rem(theme, 2)} solid ${colorPalette.main}`,
         color: colorPalette.main,
 
         '&.Mui-selected': {
@@ -197,7 +200,7 @@ export const effectStyles = (
 ): CSSObject => ({
   ...(glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   }),
 
@@ -205,7 +208,7 @@ export const effectStyles = (
     '&.Mui-selected': {
       background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,
       backgroundSize: '200% 200%',
-      animation: `${floatAnimation} 3s ease-in-out infinite`,
+      animation: `${floatAnimation(theme)} 3s ease-in-out infinite`,
       border: 'none',
 
       '&:hover': {
@@ -216,8 +219,8 @@ export const effectStyles = (
 
   ...(glow && {
     '&.Mui-selected': {
-      animation: `${glowAnimation} 2s ease-in-out infinite`,
-      boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`,
+      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+      boxShadow: `0 0 ${rem(theme, 15)} ${alpha(colorPalette.main, 0.6)}`,
     },
   }),
 });

package/src/components/form/Toggle/Toggle.tsx

@@ -1,5 +1,5 @@
 import ToggleButton from '@mui/material/ToggleButton/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import {
@@ -10,6 +10,8 @@ import {
 } from './Toggle.styles';
 import type { ToggleProps } from './Toggle.types';
 
+import { rem } from '../../../tokens/relative';
+
 const StyledToggle = styled(ToggleButton, {
   shouldForwardProp: (prop) =>
     !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient'].includes(
@@ -56,6 +58,7 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
     },
     ref,
   ) => {
+    const theme = useTheme();
     const testIds = {
       container: dataTestId,
       icon: dataTestId ? `${dataTestId}-icon` : undefined,
@@ -75,7 +78,7 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
       >
         {icon && (
           <span
-            style={{ marginRight: children ? '8px' : '0' }}
+            style={{ marginRight: children ? rem(theme, 8) : '0' }}
             data-testid={testIds.icon}
           >
             {icon}

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -6,14 +6,14 @@ import type { Theme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import type { ToggleGroupProps } from './ToggleGroup.types';
-import { cssLengthToPx } from '../../../tokens/css-units';
-import { asFieldSize, fieldHeight } from '../../../tokens/field-height';
+import { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { controlNeutral } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, remPx, rems } from '../../../tokens/relative';
+import { cssLengthToPx } from '../../../tokens/css-units';
 
-const GLASS_PADDING = 4;
-const GLASS_BORDER = 1;
+/** The glass frame's padding (4px at the design scale); its border is the field hairline. */
+const glassPadding = (theme: Theme): string => rem(theme, 4);
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
@@ -41,6 +41,10 @@ const getColorFromTheme = (theme: Theme, color: string) => {
   };
 };
 
+/** The glass frame's radius: the field radius plus its padding, the buttons' margin and its border. */
+const glassFrameRadius = (theme: Theme): number =>
+  fieldRadius(theme) + remPx(theme, 4) + cssLengthToPx(theme.spacing(0.5), 4) + FIELD_BORDER_WIDTH;
+
 const StyledToggleGroup = styled(ToggleButtonGroup, {
   shouldForwardProp: (prop) => !['customColor', 'customSize', 'glass'].includes(prop as string),
 })<{
@@ -52,13 +56,12 @@ const StyledToggleGroup = styled(ToggleButtonGroup, {
   // around them is inset by its padding, the buttons' margin and its border,
   // and rounds by that much more so the two corners stay concentric.
   const radius = fieldRadius(theme);
-  const inset = GLASS_PADDING + cssLengthToPx(theme.spacing(0.5), 4) + GLASS_BORDER;
   return {
     backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',
-    backdropFilter: glass ? 'blur(20px)' : 'none',
-    borderRadius: glass ? radius + inset : radius,
-    padding: glass ? GLASS_PADDING : 0,
-    border: glass ? `${GLASS_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',
+    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',
+    borderRadius: glass ? glassFrameRadius(theme) : radius,
+    padding: glass ? glassPadding(theme) : 0,
+    border: glass ? `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',
 
     '& .MuiToggleButtonGroup-grouped': {
       margin: theme.spacing(0.5),
@@ -88,11 +91,11 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
     const colorPalette = getColorFromTheme(theme, color);
 
     const sizeMap = {
-      xs: { padding: '4px 8px', fontSize: rem(theme, 12) },
-      sm: { padding: '6px 12px', fontSize: rem(theme, 14) },
-      md: { padding: '8px 16px', fontSize: rem(theme, 16) },
-      lg: { padding: '10px 20px', fontSize: rem(theme, 18) },
-      xl: { padding: '12px 24px', fontSize: rem(theme, 20) },
+      xs: { padding: rems(theme, 4, 8), fontSize: rem(theme, 12) },
+      sm: { padding: rems(theme, 6, 12), fontSize: rem(theme, 14) },
+      md: { padding: rems(theme, 8, 16), fontSize: rem(theme, 16) },
+      lg: { padding: rems(theme, 10, 20), fontSize: rem(theme, 18) },
+      xl: { padding: rems(theme, 12, 24), fontSize: rem(theme, 20) },
     };
 
     return (

package/src/components/form/UploadButton/UploadButton.parts.tsx

@@ -21,7 +21,7 @@ const HOVER_TINT = 0x05 / 0xff;
 const GHOST_HOVER_TINT = 0x08 / 0xff;
 import type { UploadButtonCopy } from '../../../copy';
 import type { UploadButtonProps } from './UploadButton.types';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** Shared shape for the two trigger variants. */
 export interface TriggerProps {
@@ -55,7 +55,7 @@ export function UploadDropzone({
       {...drag}
       onClick={onOpen}
       sx={{
-        border: `2px dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,
+        border: `${rem(theme, 2)} dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,
         borderRadius: 2,
         padding: 3,
         textAlign: 'center',
@@ -149,6 +149,7 @@ function UploadAnnouncer({
   progress: number;
   error: string | null;
 }): React.ReactElement {
+  const theme = useTheme();
   return (
     <div
       aria-live="polite"
@@ -156,9 +157,9 @@ function UploadAnnouncer({
       className="sr-only"
       style={{
         position: 'absolute',
-        left: '-10000px',
-        width: '1px',
-        height: '1px',
+        left: rem(theme, -10000),
+        width: rem(theme, 1),
+        height: rem(theme, 1),
         overflow: 'hidden',
       }}
     >

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,