@12-apps/ui 6.35.0 → 6.37.0

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

@@ -26,6 +26,7 @@ import {
 } from './LoadingState.metrics';
 import type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';
 import { resolveTestId } from '../../../platform/test-id';
+import { rem } from '../../../tokens/relative';
 
 interface ViewProps {
   message?: string;
@@ -79,7 +80,7 @@ const SkeletonView: React.FC<ViewProps> = ({
             key={`skeleton-row-${index}`}
             variant="rectangular"
             animation="wave"
-            height={SKELETON_ROW_HEIGHT[size]}
+            height={rem(theme, SKELETON_ROW_HEIGHT[size])}
             // The last row is short, so the block reads as a paragraph of text.
             width={index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH}
             borderRadius={SKELETON_RADIUS}
@@ -113,12 +114,12 @@ const SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds })
         alignItems: 'center',
         justifyContent: 'center',
         padding: theme.spacing(SPINNER_PADDING_UNITS),
-        minHeight: SPINNER_MIN_HEIGHT,
+        minHeight: rem(theme, SPINNER_MIN_HEIGHT),
         gap: theme.spacing(SPINNER_GAP_UNITS),
       }}
     >
       <CircularProgress
-        size={SIZE_MAP[size].spinner}
+        size={rem(theme, SIZE_MAP[size].spinner)}
         data-testid={testIds.named('spinner')}
       />
       <LoadingMessage message={message} size={size} testIds={testIds} />

package/src/components/data-display/MapPreview/MapControlBar.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import { MAX_ZOOM, MIN_ZOOM } from './MapPreview.constants';
 import type { MapType } from './MapPreview.types';
 import type { MapPreviewCopy } from '../../../copy';
+import { rem } from '../../../tokens/relative';
 
 // Kept module-local: the inferred type of a styled() component cannot be named
 // across a module boundary here (TS2742).
@@ -28,8 +29,8 @@ const MapControls = styled(Box)(({ theme }) => ({
 
 const ControlButton = styled(IconButton)(({ theme }) => ({
   background: alpha(theme.palette.background.paper, 0.95),
-  backdropFilter: 'blur(10px)',
-  WebkitBackdropFilter: 'blur(10px)',
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   boxShadow: theme.shadows[2],
   // Kept clickable while disabled so hover tooltips still work at the limits.

package/src/components/data-display/MapPreview/MapDecorations.tsx

@@ -8,9 +8,9 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { getScaleDistance } from './mapProjection';
-import { BOUNCE_KEYFRAMES } from './mapSurface';
+import { bounceKeyframes } from './mapSurface';
 import { shadowInk } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 // Decorative only: these give the mock surface something to look like without
 // standing in for real map data.
@@ -75,7 +75,7 @@ export const MapCentreMarker: FC = () => {
         left: '50%',
         transform: 'translate(-50%, -100%)',
         zIndex: 2,
-        filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,
+        filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`,
       }}
     >
       <LocationIcon
@@ -83,7 +83,7 @@ export const MapCentreMarker: FC = () => {
           fontSize: rem(theme, 36),
           color: theme.palette.error.main,
           animation: 'bounce 2s infinite',
-          '@keyframes bounce': BOUNCE_KEYFRAMES,
+          '@keyframes bounce': bounceKeyframes(theme),
         }}
       />
     </Box>
@@ -111,20 +111,20 @@ export const MapScaleBar: FC<{ zoom: number }> = ({ zoom }) => {
     >
       <Box
         sx={{
-          width: 40,
-          height: 2,
+          width: rem(theme, 40),
+          height: rem(theme, 2),
           background: theme.palette.text.secondary,
           position: 'relative',
           // The end caps that make the bar read as a measurement.
           '&::before, &::after': {
             content: '""',
             position: 'absolute',
-            width: 2,
-            height: 6,
+            width: rem(theme, 2),
+            height: rem(theme, 6),
             background: theme.palette.text.secondary,
           },
-          '&::before': { left: 0, top: -2 },
-          '&::after': { right: 0, top: -2 },
+          '&::before': { left: 0, top: rem(theme, -2) },
+          '&::after': { right: 0, top: rem(theme, -2) },
         }}
       />
       <Typography variant="caption">{getScaleDistance(zoom)}</Typography>
@@ -141,8 +141,8 @@ export const MapCompass: FC = () => {
         position: 'absolute',
         top: theme.spacing(2),
         left: theme.spacing(2),
-        width: 40,
-        height: 40,
+        width: rem(theme, 40),
+        height: rem(theme, 40),
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',

package/src/components/data-display/MapPreview/MapLayers.tsx

@@ -37,8 +37,7 @@ export const MapLayers: FC<MapLayersProps> = ({ settings, zoom, mapType, search,
       {settings.showHeatmap && settings.heatmapData.length > 0 && (
         <HeatmapOverlay
           points={settings.heatmapData}
-          width={HEATMAP_VIEWBOX.width}
-          height={HEATMAP_VIEWBOX.height}
+          viewBox={HEATMAP_VIEWBOX}
         />
       )}
 

package/src/components/data-display/MapPreview/MapMarkers.tsx

@@ -8,9 +8,9 @@ import React from 'react';
 
 import { MARKER_PIXELS_PER_DEGREE } from './MapPreview.constants';
 import type { LatLng, MapMarker } from './MapPreview.types';
-import { BOUNCE_KEYFRAMES } from './mapSurface';
+import { bounceKeyframes } from './mapSurface';
 import { shadowInk } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -20,8 +20,8 @@ const CoordinatesDisplay = styled(Box)(({ theme }) => ({
   left: theme.spacing(2),
   padding: theme.spacing(1, 1.5),
   background: alpha(theme.palette.background.paper, 0.95),
-  backdropFilter: 'blur(10px)',
-  WebkitBackdropFilter: 'blur(10px)',
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   borderRadius: theme.shape.borderRadius,
   zIndex: 1,
@@ -49,8 +49,8 @@ export const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) =
             top: '50%',
             left: '50%',
             transform: `translate(
-              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,
-              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px
+              ${rem(theme, (markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE)},
+              ${rem(theme, -(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE)}
             )`,
             zIndex: 3,
             cursor: markerItem.onClick ? 'pointer' : 'default',
@@ -63,9 +63,9 @@ export const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) =
               sx={{
                 fontSize: rem(theme, 32),
                 color: theme.palette.error.main,
-                filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,
+                filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`,
                 animation: animated ? 'bounce 2s infinite' : 'none',
-                '@keyframes bounce': BOUNCE_KEYFRAMES,
+                '@keyframes bounce': bounceKeyframes(theme),
               }}
             />
           </Tooltip>

package/src/components/data-display/MapPreview/MapOverlays.tsx

@@ -14,20 +14,23 @@ const OVERLAY_STYLE: CSSProperties = {
   zIndex: 1,
 };
 
-const MAX_HEAT_RADIUS = 30;
+// The hottest point's circle `r`, in the viewBox's user units: it scales with the
+// SVG box, which fills the map, so it is not a CSS length.
+const MAX_HEAT_R = 30;
 const MAX_HEAT_OPACITY = 0.3;
 const DEGREES_TO_PIXELS = 10;
 
 export interface HeatmapOverlayProps {
   points: HeatmapPoint[];
-  width: number;
-  height: number;
+  /** The drawing's user-space extent — the `viewBox`, not a CSS size. */
+  viewBox: { width: number; height: number };
 }
 
 // Each point's weight drives both its radius and its opacity, so denser areas
 // read hotter where circles overlap.
-export const HeatmapOverlay: FC<HeatmapOverlayProps> = ({ points, width, height }) => {
+export const HeatmapOverlay: FC<HeatmapOverlayProps> = ({ points, viewBox }) => {
   const theme = useTheme();
+  const { width, height } = viewBox;
 
   if (points.length === 0) return null;
 
@@ -38,7 +41,7 @@ export const HeatmapOverlay: FC<HeatmapOverlayProps> = ({ points, width, height
           key={`${point.lat}-${point.lng}-${index}`}
           cx={width / 2 + point.lng * DEGREES_TO_PIXELS}
           cy={height / 2 - point.lat * DEGREES_TO_PIXELS}
-          r={MAX_HEAT_RADIUS * point.weight}
+          r={MAX_HEAT_R * point.weight}
           fill={theme.palette.error.main}
           opacity={MAX_HEAT_OPACITY * point.weight}
         />

package/src/components/data-display/MapPreview/MapPreview.helpers.ts

@@ -3,11 +3,11 @@ import { alpha } from '@mui/material/styles/index.js';
 
 import { DEFAULT_ZOOM } from './MapPreview.constants';
 import type { MapPreviewProps } from './MapPreview.types';
+import { rem } from '../../../tokens/relative';
 
 type MapDefaultedKeys =
   | 'markers'
   | 'marker'
-  | 'height'
   | 'interactive'
   | 'zoom'
   | 'mapType'
@@ -26,7 +26,6 @@ export type ResolvedMapPreviewProps = MapPreviewProps &
 const MAP_PREVIEW_DEFAULTS: Pick<MapPreviewProps, MapDefaultedKeys> = {
   markers: [],
   marker: true,
-  height: '400px',
   interactive: false,
   zoom: DEFAULT_ZOOM,
   mapType: 'roadmap',
@@ -56,8 +55,8 @@ export const glassStyles = (variant: MapPreviewProps['variant'], theme: Theme) =
   variant === 'glass'
     ? {
         background: alpha(theme.palette.background.paper, 0.7),
-        backdropFilter: 'blur(20px)',
-        WebkitBackdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${rem(theme, 20)})`,
+        WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
       }
     : {};

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

@@ -10,6 +10,7 @@ import { MapLayers } from './MapLayers';
 import { MapCoordinates, MapMarkers } from './MapMarkers';
 import { StaticMapView } from './StaticMapView';
 import { useMapPreview } from './useMapPreview';
+import { rem } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -38,7 +39,8 @@ export const MapPreview: FC<MapPreviewProps> = (componentProps) => {
   const theme = useTheme();
   const { containerRef, view, controls, pointer, search, handleMapClick } = useMapPreview(props);
 
-  const height = controls.isFullscreen ? '100vh' : props.height;
+  // The map's own default height is 400 design px, through the theme's type scale.
+  const height = controls.isFullscreen ? '100vh' : (props.height ?? rem(theme, 400));
   const grabbing = pointer.isDragging || pointer.isPanning;
 
   return (

package/src/components/data-display/MapPreview/MapSearchBar.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 
 import { fieldRadius } from '../../../tokens/field-radius';
 import { fieldControlStyles } from '../../../tokens/field-height';
+import { rem } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -18,15 +19,15 @@ const SearchBar = styled(Box)(({ theme }) => ({
   transform: 'translateX(-50%)',
   zIndex: 2,
   width: '90%',
-  maxWidth: 400,
+  maxWidth: rem(theme, 400),
 }));
 
 const SearchField = styled(TextField)(({ theme }) => ({
   ...fieldControlStyles(theme),
   '& .MuiOutlinedInput-root': {
     background: alpha(theme.palette.background.paper, 0.95),
-    backdropFilter: 'blur(10px)',
-    WebkitBackdropFilter: 'blur(10px)',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
     borderRadius: fieldRadius(theme),
     '& fieldset': {
       borderColor: alpha(theme.palette.divider, 0.2),

package/src/components/data-display/MapPreview/mapSurface.ts

@@ -3,6 +3,7 @@ import { alpha } from '@mui/material/styles/index.js';
 
 import type { MapType } from './MapPreview.types';
 import { neutralTones, uiInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const toneGradient = (from: string, to: string, opacity = 1): string =>
   `linear-gradient(135deg, ${alpha(from, opacity)} 0%, ${alpha(to, opacity)} 100%)`;
@@ -32,7 +33,8 @@ export const tileBackground = (mapType: MapType, theme: Theme): string => {
   return toneGradient(tones.surface, tones.faint, 0.5);
 };
 
-export const BOUNCE_KEYFRAMES = {
-  '0%, 100%': { transform: 'translateY(0)' },
-  '50%': { transform: 'translateY(-10px)' },
-} as const;
+export const bounceKeyframes = (theme: Theme) =>
+  ({
+    '0%, 100%': { transform: 'translateY(0)' },
+    '50%': { transform: `translateY(${rem(theme, -10)})` },
+  }) as const;

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 { sxRem } from '../../../tokens/relative';
+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: (theme: Theme) => string }> =
-  Object.fromEntries(
-    Object.entries(PROGRESS_SIZES).map(([size, step]) => [
-      size,
-      { height: step.height, circularSize: step.circularSize, fontSize: sxRem(step.fontSize) },
-    ]),
-  ) as Record<ProgressSize, { height: number; circularSize: number; fontSize: (theme: Theme) => 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')} />