@12-apps/ui 6.37.0 → 6.39.0

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/form/Calendar/Calendar.tsx

@@ -3,6 +3,8 @@ import Box from '@mui/material/Box/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import React from 'react';
 
+import { rem, sxRem } from '../../../tokens/relative';
+
 import { resolveCalendarProps } from './Calendar.helpers';
 import { useCalendar } from './Calendar.hooks';
 import type { CalendarProps } from './Calendar.types';
@@ -16,9 +18,9 @@ const containerSx = (monthsToShow: number): SxProps<Theme> => ({
   gap: 3,
   outline: 'none',
   '&:focus-within': {
-    outline: '2px solid',
+    outline: (theme: Theme) => `${rem(theme, 2)} solid`,
     outlineColor: 'primary.main',
-    outlineOffset: 2,
+    outlineOffset: sxRem(2),
   },
 });
 

package/src/components/form/Calendar/CalendarDay.tsx

@@ -3,9 +3,12 @@ import Box from '@mui/material/Box/index.js';
 import type { FC } from 'react';
 import React from 'react';
 
+import { rem, sxRem } from '../../../tokens/relative';
+
 import type { DayRenderArgs } from './Calendar.types';
 
-const CELL_SIZE = 40;
+/** A day cell's edge, 40 design px through the theme's type scale. */
+const CELL_SIZE = sxRem(40);
 
 interface DayState extends DayRenderArgs {
   outside: boolean;
@@ -72,9 +75,9 @@ const dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({
     backgroundColor: hoverBackgroundFor(day),
   },
   '&:focus': {
-    outline: '2px solid',
+    outline: (theme: Theme) => `${rem(theme, 2)} solid`,
     outlineColor: 'primary.main',
-    outlineOffset: 1,
+    outlineOffset: sxRem(1),
   },
 });
 

package/src/components/form/Calendar/CalendarMonth.tsx

@@ -6,12 +6,15 @@ import Typography from '@mui/material/Typography/index.js';
 import type { FC } from 'react';
 import React from 'react';
 
+import { sxRem } from '../../../tokens/relative';
+
 import { getMonthName } from './Calendar.dates';
 import type { CalendarProps, MonthMatrix } from './Calendar.types';
 import type { DayCellContext } from './CalendarDayCell';
 import { CalendarDayCell } from './CalendarDayCell';
 
-const SPACER_WIDTH = 32;
+/** The nav spacer's width and the weekday row's height, 32 design px through the type scale. */
+const SPACER_WIDTH = sxRem(32);
 
 const GRID_SX = { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0.5 } as const;
 
@@ -66,7 +69,7 @@ const WeekdayHeader: FC<{ weekdayNames: string[] }> = ({ weekdayNames }) => (
           alignItems: 'center',
           justifyContent: 'center',
           height: SPACER_WIDTH,
-          fontSize: '0.875rem',
+          fontSize: sxRem(14),
           fontWeight: 'bold',
           color: 'text.secondary',
         }}
@@ -109,7 +112,7 @@ export const CalendarMonth: FC<CalendarMonthProps> = ({
        January's 5th and February's. Without a per-month hook a test can only
        reach a day positionally, which is exactly what the flakiness gate
        refuses. Additive: `calendar-grid` below is unchanged. */
-    <Box sx={{ minWidth: 280 }} data-testid={`calendar-month-${monthIndex}`}>
+    <Box sx={{ minWidth: sxRem(280) }} data-testid={`calendar-month-${monthIndex}`}>
       <MonthNavHeader
         title={title}
         showPrevious={monthIndex === 0}

package/src/components/form/Switch/Switch.metrics.ts

@@ -87,12 +87,26 @@ export const MUI_SHADOWS: Record<number, string> = {
   3: ELEVATION_SHADOWS[3],
 };
 
-/** The iOS thumb's own three-layer shadow, which the web writes out literally. */
-export const IOS_THUMB_SHADOW = `0 3px 1px 0 ${alpha(SWITCH_BLACK, 0.04)}, 0 3px 8px 0 ${alpha(SWITCH_BLACK, 0.12)}, 0 1px 0 0 ${alpha(SWITCH_BLACK, 0.08)}`;
+/**
+ * How a shadow builder writes one of its lengths. Native takes the px as they
+ * stand ({@link AS_PX}); the web hands in its type scale (`rem`), so the iOS
+ * shadows scale with the theme like every other length it draws.
+ */
+export type ShadowLength = (px: number) => string;
+
+/** A length written as the px it was drawn at — what native reads. */
+export const AS_PX: ShadowLength = (value) => `${value}px`;
+
+/** The iOS thumb's own three-layer shadow. */
+export const iosThumbShadow = (length: ShadowLength = AS_PX): string =>
+  `0 ${length(3)} ${length(1)} 0 ${alpha(SWITCH_BLACK, 0.04)}, 0 ${length(3)} ${length(8)} 0 ${alpha(SWITCH_BLACK, 0.12)}, 0 ${length(1)} 0 0 ${alpha(SWITCH_BLACK, 0.08)}`;
+
+/** {@link iosThumbShadow} in px, as native draws it. */
+export const IOS_THUMB_SHADOW = iosThumbShadow();
 
-/** The iOS track's inset hairline. */
-export const iosTrackShadow = (): string =>
-  `inset 0 0 0 0.5px ${alpha(SWITCH_BLACK, 0.1)}, inset 0 2px 3px ${alpha(SWITCH_BLACK, 0.12)}`;
+/** The iOS track's inset hairline and inner shade. */
+export const iosTrackShadow = (length: ShadowLength = AS_PX): string =>
+  `inset 0 0 0 ${length(0.5)} ${alpha(SWITCH_BLACK, 0.1)}, inset 0 ${length(2)} ${length(3)} ${alpha(SWITCH_BLACK, 0.12)}`;
 
 /** The resting track: a black wash on iOS, the disabled ink elsewhere. */
 export const TRACK_ALPHA = { ios: 0.1, android: 0.2, other: 0.3 } as const;

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

@@ -12,7 +12,6 @@ import {
 import {
   DISABLED,
   IOS_BASE_OFFSET,
-  IOS_THUMB_SHADOW,
   IOS_TRAVEL_INSET,
   SWITCH_GLASS,
   SWITCH_GLOW,
@@ -30,6 +29,7 @@ import {
   TRACK_LABEL,
   TRACK_RADIUS,
   geometryOf,
+  iosThumbShadow,
   iosTrackShadow,
   lookOf,
   seconds,
@@ -108,7 +108,9 @@ const lengthOrPercent = (theme: Theme, value: number | string): string =>
   typeof value === 'number' ? rem(theme, value) : value;
 
 const thumbShadow = (theme: Theme, look: SwitchLook): string =>
-  look === 'ios' ? IOS_THUMB_SHADOW : (theme.shadows[THUMB_ELEVATION[look]] ?? 'none');
+  look === 'ios'
+    ? iosThumbShadow((px) => rem(theme, px))
+    : (theme.shadows[THUMB_ELEVATION[look]] ?? 'none');
 
 /** The ripple that expands from the thumb on hover. */
 const rippleOverlay = (palette: ColorPalette): CSSObject => ({
@@ -356,7 +358,7 @@ const trackSx = (
     opacity: 1,
     transition: `all ${seconds(SWITCH_TRANSITION.ms)} ${SWITCH_TRANSITION.easing}`,
     position: 'relative',
-    boxShadow: look === 'ios' ? iosTrackShadow() : 'none',
+    boxShadow: look === 'ios' ? iosTrackShadow((px) => rem(theme, px)) : 'none',
     ...(glass && {
       backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.trackAlpha),
       backdropFilter: `blur(${rem(theme, SWITCH_GLASS.trackBlur)})`,

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,

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

@@ -17,19 +17,20 @@ import {
   neumorphicShadows,
 } from './Card.metrics';
 import { neutralTones, shadowInk, sheen } from '../../../tokens/ink';
-import { shadowCss, shadowListCss } from '../../../tokens/shadow';
+import { rem, rems } from '../../../tokens/relative';
+import type { UiShadow } from '../../../tokens/shadow';
 
 type BorderRadius = CardBorderRadius;
 
 // Define pulse animation. The 15px spread and the 2s period are the shared
 // metrics, so the native ring grows by exactly as much for exactly as long.
-const pulseAnimation = keyframes`
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 ${CARD_PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, CARD_PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -38,11 +39,20 @@ const pulseAnimation = keyframes`
   }
 `;
 
-const borderRadiusFor = (theme: Theme, radius: BorderRadius): number | string => {
+/**
+ * A shared-metrics shadow as CSS, every length through the type scale: the text
+ * `shadowCss` writes (a bare `0`, no zero spread) with rem in place of px.
+ */
+const shadowRem = (theme: Theme, shadow: UiShadow): string => {
+  const spread = shadow.spreadDistance === 0 ? [] : [shadow.spreadDistance];
+  return `${rems(theme, shadow.offsetX, shadow.offsetY, shadow.blurRadius, ...spread)} ${shadow.color}`;
+};
+
+const borderRadiusFor = (theme: Theme, radius: BorderRadius): string => {
   if (radius === 'full') return CARD_RADIUS_FULL;
   const units = CARD_RADIUS_UNITS[radius] ?? CARD_RADIUS_UNITS.md;
   // `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);
 };
 
 const pulseSurface = (theme: Theme): CSSObject => ({
@@ -58,7 +68,7 @@ const pulseSurface = (theme: Theme): CSSObject => ({
     borderRadius: 'inherit',
     backgroundColor: theme.palette.primary.main,
     opacity: CARD_PULSE.alpha,
-    animation: `${pulseAnimation} ${CARD_PULSE.durationMs / 1000}s infinite`,
+    animation: `${pulseAnimation(theme)} ${CARD_PULSE.durationMs / 1000}s infinite`,
     pointerEvents: 'none',
     zIndex: CARD_PULSE.zIndex,
   },
@@ -77,7 +87,7 @@ const neumorphicShadow = (theme: Theme, lifted: boolean): string => {
           sheen(theme, lifted ? light.far.lifted : light.far.rest),
         ];
 
-  return shadowListCss(neumorphicShadows(lifted, near, far));
+  return neumorphicShadows(lifted, near, far).map((shadow) => shadowRem(theme, shadow)).join(', ');
 };
 
 const sectionBackground = (theme: Theme, lifted: boolean): string => {
@@ -87,13 +97,7 @@ const sectionBackground = (theme: Theme, lifted: boolean): string => {
 
 const glowShadow = (theme: Theme, lifted: boolean): string => {
   const { blurRadius, alpha: opacity } = lifted ? CARD_GLOW.lifted : CARD_GLOW.rest;
-  return shadowCss({
-    offsetX: 0,
-    offsetY: 0,
-    blurRadius,
-    spreadDistance: 0,
-    color: alpha(theme.palette.primary.main, opacity),
-  });
+  return `${rems(theme, 0, 0, blurRadius)} ${alpha(theme.palette.primary.main, opacity)}`;
 };
 
 interface Surface {
@@ -121,15 +125,9 @@ const VARIANT_SURFACES: Record<CardVariant, (theme: Theme, lifted: boolean) => S
   glass: (theme, lifted) => ({
     surface: {
       backgroundColor: alpha(theme.palette.background.paper, CARD_GLASS.backgroundAlpha.rest),
-      backdropFilter: `blur(${CARD_GLASS.blurPx}px)`,
+      backdropFilter: `blur(${rem(theme, CARD_GLASS.blurPx)})`,
       border: `${CARD_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, CARD_GLASS.borderAlpha.rest)}`,
-      boxShadow: shadowCss({
-        offsetX: 0,
-        offsetY: CARD_GLASS.shadow.offsetY,
-        blurRadius: CARD_GLASS.shadow.blurRadius,
-        spreadDistance: 0,
-        color: shadowInk(theme, CARD_GLASS.shadow.alpha),
-      }),
+      boxShadow: `${rems(theme, 0, CARD_GLASS.shadow.offsetY, CARD_GLASS.shadow.blurRadius)} ${shadowInk(theme, CARD_GLASS.shadow.alpha)}`,
     },
     hover: {
       backgroundColor: alpha(
@@ -143,13 +141,7 @@ const VARIANT_SURFACES: Record<CardVariant, (theme: Theme, lifted: boolean) => S
     surface: {
       background: cardGradient(theme, false),
       color: theme.palette.primary.contrastText,
-      boxShadow: shadowCss({
-        offsetX: 0,
-        offsetY: CARD_GRADIENT.shadow.offsetY,
-        blurRadius: CARD_GRADIENT.shadow.blurRadius,
-        spreadDistance: 0,
-        color: alpha(theme.palette.primary.main, CARD_GRADIENT.shadow.alpha),
-      }),
+      boxShadow: `${rems(theme, 0, CARD_GRADIENT.shadow.offsetY, CARD_GRADIENT.shadow.blurRadius)} ${alpha(theme.palette.primary.main, CARD_GRADIENT.shadow.alpha)}`,
     },
     hover: { background: cardGradient(theme, lifted) },
   }),
@@ -215,7 +207,7 @@ export const cardStyles = (
     ...(pulse && pulseSurface(theme)),
     ...chosen.surface,
     '&:hover': {
-      ...(interactive && { transform: `translateY(-${CARD_INTERACTIVE_LIFT}px)` }),
+      ...(interactive && { transform: `translateY(${rem(theme, -CARD_INTERACTIVE_LIFT)})` }),
       ...(glow && { boxShadow: glowShadow(theme, true) }),
       ...chosen.hover,
     },