@12-apps/ui 6.34.0 → 6.36.0

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

@@ -1,20 +1,21 @@
 import type { PaperProps } from '@mui/material/Paper/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import MuiPopover from '@mui/material/Popover/index.js';
-import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
+import { alpha, keyframes, styled, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { PopoverProps } from './Popover.types';
 import { shadowInk } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
 // Define pulse animation
-const pulseAnimation = keyframes`
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 10px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;
     opacity: 0;
   }
   100% {
@@ -45,9 +46,9 @@ const StyledPaper = styled(Paper, {
 
   ...(customVariant === '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)}`,
-    boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,
+    boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,
   }),
 
   ...(customVariant === 'arrow' && {
@@ -58,7 +59,7 @@ const StyledPaper = styled(Paper, {
 
   // Glow effect
   ...(glow && !pulse && {
-    boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
     filter: 'brightness(1.05)',
   }),
 
@@ -75,7 +76,7 @@ const StyledPaper = styled(Paper, {
       borderRadius: 'inherit',
       backgroundColor: theme.palette.primary.main,
       opacity: 0.1,
-      animation: `${pulseAnimation} 2s infinite`,
+      animation: `${pulseAnimation(theme)} 2s infinite`,
       pointerEvents: 'none',
       zIndex: -1,
     },
@@ -84,7 +85,7 @@ const StyledPaper = styled(Paper, {
   // Both glow and pulse
   ...(glow && pulse && {
     position: 'relative',
-    boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
     filter: 'brightness(1.05)',
     '&::after': {
       content: '""',
@@ -96,19 +97,30 @@ const StyledPaper = styled(Paper, {
       borderRadius: 'inherit',
       backgroundColor: theme.palette.primary.main,
       opacity: 0.1,
-      animation: `${pulseAnimation} 2s infinite`,
+      animation: `${pulseAnimation(theme)} 2s infinite`,
       pointerEvents: 'none',
       zIndex: -1,
     },
   }),
 }));
 
+/**
+ * The paper's cap: 400 design px unless the caller says otherwise. `sx` has
+ * always read a number of 1 or less as a fraction of the parent, and that stays so.
+ */
+const popoverCap =
+  (maxWidth: number | undefined) =>
+  (theme: Theme): string => {
+    const cap = maxWidth ?? 400;
+    return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
+  };
+
 export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
   ({
     variant = 'default',
     glow = false,
     pulse = false,
-    maxWidth = 400,
+    maxWidth,
     dataTestId,
     children,
     ...props
@@ -121,7 +133,7 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
           customVariant: variant,
           glow,
           pulse,
-          sx: { maxWidth },
+          sx: { maxWidth: popoverCap(maxWidth) },
           ...props.PaperProps,
         } as PaperProps & { customVariant?: string; glow?: boolean; pulse?: boolean }}
         {...props}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -15,6 +15,7 @@ import type {
   StatCardDeltaTone,
   StatCardProps,
 } from './StatCard.types';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** The arrow each direction renders (decorative — the text carries the meaning). */
 const DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {
@@ -69,7 +70,7 @@ function DeltaRow({ delta, testId }: { delta: StatCardDelta; testId: string }):
     >
       {/* The arrow duplicates what the aria-label already says, so it is hidden
           from assistive tech rather than read twice. */}
-      <Icon aria-hidden="true" sx={{ fontSize: '1rem', color }} />
+      <Icon aria-hidden="true" sx={{ fontSize: sxRem(16), color }} />
       <Typography
         variant="body2"
         component="span"
@@ -133,7 +134,7 @@ function ValueRow({
     return (
       <Skeleton
         variant="rectangular"
-        height={28}
+        height={rem(theme, 28)}
         width="60%"
         borderRadius={4}
         data-testid={`${testId}-value-skeleton`}
@@ -166,12 +167,13 @@ function DeltaSlot({
   loading: boolean;
   testId: string;
 }): React.JSX.Element | null {
+  const theme = useTheme();
   if (!delta) return null;
   if (loading) {
     return (
       <Skeleton
         variant="rectangular"
-        height={16}
+        height={rem(theme, 16)}
         width="40%"
         borderRadius={4}
         data-testid={`${testId}-delta-skeleton`}