@12-apps/ui 6.34.0 → 6.36.0

package/src/components/data-display/Lightbox/Lightbox.constants.ts

@@ -1,6 +1,7 @@
 import type { Theme } from '@mui/material/styles/index.js';
 
 import { onMedia, scrim, sheen } from '../../../tokens/ink';
+import { remPx, sxRem } from '../../../tokens/relative';
 
 export const MIN_ZOOM = 0.5;
 export const MAX_ZOOM = 5;
@@ -9,9 +10,14 @@ export const ZOOM_STEP = 1.2;
 export const WHEEL_ZOOM_FACTOR = 0.01;
 
 export const DEFAULT_AUTOPLAY_INTERVAL_MS = 4000;
-export const MIN_SWIPE_DISTANCE = 50;
 export const OVERLAY_Z_INDEX = 1000;
 
+/**
+ * How far a finger must travel to count as a swipe: 50 design px, in the px a
+ * touch event reports, so it moves with the theme's type scale.
+ */
+export const minSwipeDistance = (theme: Theme): number => remPx(theme, 50);
+
 const SCRIM = (theme: Theme): string => scrim(theme, 0.5);
 const SCRIM_HOVER = (theme: Theme): string => scrim(theme, 0.7);
 
@@ -39,7 +45,7 @@ export const captionSx = {
 
 export const counterSx = {
   color: onMedia,
-  fontSize: '0.875rem',
+  fontSize: sxRem(14),
   backgroundColor: SCRIM,
   borderRadius: 1,
 } as const;

package/src/components/data-display/Lightbox/Lightbox.hooks.ts

@@ -1,11 +1,12 @@
+import { useTheme } from '@mui/material/styles/index.js';
 import type React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import {
   DEFAULT_AUTOPLAY_INTERVAL_MS,
   MAX_ZOOM,
-  MIN_SWIPE_DISTANCE,
   MIN_ZOOM,
+  minSwipeDistance,
   WHEEL_ZOOM_FACTOR,
   ZOOM_STEP,
 } from './Lightbox.constants';
@@ -224,6 +225,7 @@ export const useSwipe = ({
   next: () => void;
   close: () => void;
 }) => {
+  const theme = useTheme();
   const touchStartRef = useRef<{ x: number; y: number } | null>(null);
 
   const handleTouchStart = useCallback((event: React.TouchEvent) => {
@@ -240,19 +242,20 @@ export const useSwipe = ({
 
       const deltaX = touch.clientX - start.x;
       const deltaY = touch.clientY - start.y;
+      const swipe = minSwipeDistance(theme);
 
       // Whichever axis moved further decides what the gesture meant.
       if (Math.abs(deltaX) > Math.abs(deltaY)) {
-        if (Math.abs(deltaX) > MIN_SWIPE_DISTANCE) {
+        if (Math.abs(deltaX) > swipe) {
           if (deltaX > 0) prev();
           else next();
         }
         return;
       }
 
-      if (deltaY > MIN_SWIPE_DISTANCE) close();
+      if (deltaY > swipe) close();
     },
-    [prev, next, close],
+    [prev, next, close, theme],
   );
 
   return { handleTouchStart, handleTouchEnd };

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

@@ -14,13 +14,14 @@ import { LightboxStage } from './LightboxStage';
 import { LightboxThumbnails } from './LightboxThumbnails';
 import { useLightbox } from './useLightbox';
 import { scrim } from '../../../tokens/ink';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const DIALOG_STATIC_PROPS = {
   maxWidth: false,
   fullScreen: true,
   TransitionComponent: Fade,
   TransitionProps: { timeout: 300 },
-  PaperProps: { sx: { background: (theme: Theme) => scrim(theme, 0.9), backdropFilter: 'blur(2px)' } },
+  PaperProps: { sx: { background: (theme: Theme) => scrim(theme, 0.9), backdropFilter: (theme: Theme) => `blur(${rem(theme, 2)})` } },
   'aria-label': 'Lightbox',
   'aria-labelledby': 'lightbox-title',
   role: 'dialog',
@@ -49,7 +50,7 @@ export const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentP
       data-testid={dataTestId || 'lightbox'}
     >
       {/* Visually hidden title for screen readers */}
-      <Typography id="lightbox-title" variant="h6" sx={{ position: 'absolute', left: -10000 }}>
+      <Typography id="lightbox-title" variant="h6" sx={{ position: 'absolute', left: sxRem(-10000) }}>
         Lightbox - {currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`}
       </Typography>
 

package/src/components/data-display/Lightbox/LightboxControls.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 
 import { navButtonSx, OVERLAY_Z_INDEX, overlayButtonSx } from './Lightbox.constants';
 import { useLightboxCopy } from './lightbox-copy-context';
+import { sxRem } from '../../../tokens/relative';
 
 type TestId = (suffix: string) => string;
 
@@ -24,7 +25,7 @@ export const LightboxCloseButton: FC<{ testId: TestId; onClose: () => void }> =
   return (
   <IconButton
     onClick={onClose}
-    sx={{ ...overlayButtonSx, position: 'absolute', top: 16, right: 16, zIndex: OVERLAY_Z_INDEX }}
+    sx={{ ...overlayButtonSx, position: 'absolute', top: sxRem(16), right: sxRem(16), zIndex: OVERLAY_Z_INDEX }}
     aria-label={copy.close}
     data-testid={testId('close')}
   >
@@ -37,7 +38,7 @@ const arrowSx = (side: 'left' | 'right') =>
   ({
     ...navButtonSx,
     position: 'absolute',
-    [side]: 16,
+    [side]: sxRem(16),
     top: '50%',
     transform: 'translateY(-50%)',
     zIndex: OVERLAY_Z_INDEX,
@@ -102,8 +103,8 @@ export const LightboxZoomControls: FC<LightboxZoomControlsProps> = ({
   <Box
     sx={{
       position: 'absolute',
-      top: 16,
-      left: 16,
+      top: sxRem(16),
+      left: sxRem(16),
       display: 'flex',
       flexDirection: 'column',
       gap: 1,
@@ -152,7 +153,7 @@ export const LightboxAutoplayButton: FC<LightboxAutoplayButtonProps> = ({
     sx={{
       ...overlayButtonSx,
       position: 'absolute',
-      top: 16,
+      top: sxRem(16),
       left: '50%',
       transform: 'translateX(-50%)',
       zIndex: OVERLAY_Z_INDEX,

package/src/components/data-display/Lightbox/LightboxStage.tsx

@@ -2,12 +2,14 @@ import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import DialogContent from '@mui/material/DialogContent/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 
 import { captionSx, counterSx } from './Lightbox.constants';
 import type { LightboxItem } from './Lightbox.types';
 import { onMedia } from '../../../tokens/ink';
+import { rems, sxRem } from '../../../tokens/relative';
 
 type TestId = (suffix: string) => string;
 
@@ -23,6 +25,24 @@ export interface LightboxStageProps {
   thumbnailStrip: ReactNode;
 }
 
+const STAGE_SX = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 0,
+  position: 'relative',
+  height: '100vh',
+  overflow: 'hidden',
+} as const;
+
+const MEDIA_BOX_SX = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+} as const;
+
 // The viewport itself: the media, whatever floats over it, and the filmstrip.
 export const LightboxStage: FC<LightboxStageProps> = ({
   items,
@@ -36,15 +56,7 @@ export const LightboxStage: FC<LightboxStageProps> = ({
   thumbnailStrip,
 }) => (
   <DialogContent
-    sx={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 0,
-      position: 'relative',
-      height: '100vh',
-      overflow: 'hidden',
-    }}
+    sx={STAGE_SX}
     data-testid={testId('content')}
   >
     {isLoading && (
@@ -55,13 +67,7 @@ export const LightboxStage: FC<LightboxStageProps> = ({
     )}
 
     <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%',
-      }}
+      sx={MEDIA_BOX_SX}
       data-testid={testId('image-container')}
     >
       {media}
@@ -74,7 +80,7 @@ export const LightboxStage: FC<LightboxStageProps> = ({
           ...captionSx,
           position: 'absolute',
           // Sit above the filmstrip when there is one.
-          bottom: thumbnails ? 120 : 16,
+          bottom: sxRem(thumbnails ? 120 : 16),
           left: '50%',
           transform: 'translateX(-50%)',
           maxWidth: '80vw',
@@ -88,7 +94,13 @@ export const LightboxStage: FC<LightboxStageProps> = ({
 
     {items.length > 1 && (
       <Typography
-        sx={{ ...counterSx, position: 'absolute', top: 70, right: 16, padding: '4px 8px' }}
+        sx={{
+          ...counterSx,
+          position: 'absolute',
+          top: sxRem(70),
+          right: sxRem(16),
+          padding: (theme: Theme) => rems(theme, 4, 8),
+        }}
         aria-live="polite"
         data-testid={testId('counter')}
       >

package/src/components/data-display/Lightbox/LightboxThumbnails.tsx

@@ -7,9 +7,12 @@ import React from 'react';
 import { thumbnailStripSx } from './Lightbox.constants';
 import type { LightboxItem } from './Lightbox.types';
 import { onMedia, sheen } from '../../../tokens/ink';
+import { rem, sxRem } from '../../../tokens/relative';
 
-const THUMB_WIDTH = 60;
-const THUMB_HEIGHT = 40;
+/** One filmstrip frame, in design px. */
+const THUMB = { widthPx: 60, heightPx: 40 } as const;
+
+const frame = (theme: Theme, color: string): string => `${rem(theme, 2)} solid ${color}`;
 
 const VideoThumbnail: FC = () => (
   <Box
@@ -22,7 +25,7 @@ const VideoThumbnail: FC = () => (
       justifyContent: 'center',
     }}
   >
-    <PlayIcon sx={{ color: onMedia, fontSize: 16 }} />
+    <PlayIcon sx={{ color: onMedia, fontSize: sxRem(16) }} />
   </Box>
 );
 
@@ -43,7 +46,7 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
     sx={{
       ...thumbnailStripSx,
       position: 'absolute',
-      bottom: 16,
+      bottom: sxRem(16),
       left: '50%',
       transform: 'translateX(-50%)',
       display: 'flex',
@@ -59,14 +62,14 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
         key={`${item.src}-${index}`}
         onClick={() => onSelect(index)}
         sx={{
-          width: THUMB_WIDTH,
-          height: THUMB_HEIGHT,
+          width: sxRem(THUMB.widthPx),
+          height: sxRem(THUMB.heightPx),
           cursor: 'pointer',
-          border: currentIndex === index ? (theme: Theme) => `2px solid ${onMedia(theme)}` : '2px solid transparent',
+          border: (theme: Theme) => frame(theme, currentIndex === index ? onMedia(theme) : 'transparent'),
           borderRadius: 0.5,
           overflow: 'hidden',
           flexShrink: 0,
-          '&:hover': { border: (theme: Theme) => `2px solid ${sheen(theme, 0.7)}` },
+          '&:hover': { border: (theme: Theme) => frame(theme, sheen(theme, 0.7)) },
         }}
         data-testid={testId(`thumbnail-${index}`)}
       >

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,8 +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, rems } from '../../../tokens/relative';
 
 // Decorative only: these give the mock surface something to look like without
 // standing in for real map data.
@@ -50,7 +51,7 @@ const DecorativePin: FC<{ top: string; left: string }> = ({ top, left }) => {
 
   return (
     <Box sx={{ position: 'absolute', top, left, opacity: 0.6 }}>
-      <PlaceIcon sx={{ fontSize: 20, color: theme.palette.primary.main }} />
+      <PlaceIcon sx={{ fontSize: rem(theme, 20), color: theme.palette.primary.main }} />
     </Box>
   );
 };
@@ -74,15 +75,15 @@ 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
         sx={{
-          fontSize: 36,
+          fontSize: rem(theme, 36),
           color: theme.palette.error.main,
           animation: 'bounce 2s infinite',
-          '@keyframes bounce': BOUNCE_KEYFRAMES,
+          '@keyframes bounce': bounceKeyframes(theme),
         }}
       />
     </Box>
@@ -104,26 +105,26 @@ export const MapScaleBar: FC<{ zoom: number }> = ({ zoom }) => {
         padding: theme.spacing(0.5, 1),
         background: alpha(theme.palette.background.paper, 0.9),
         borderRadius: theme.shape.borderRadius,
-        fontSize: '0.75rem',
+        fontSize: rem(theme, 12),
         color: theme.palette.text.secondary,
       }}
     >
       <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>
@@ -140,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',
@@ -151,7 +152,7 @@ export const MapCompass: FC = () => {
       }}
     >
       <NavigationIcon
-        sx={{ fontSize: 24, color: theme.palette.primary.main, transform: 'rotate(-45deg)' }}
+        sx={{ fontSize: rem(theme, 24), color: theme.palette.primary.main, transform: 'rotate(-45deg)' }}
       />
     </Box>
   );

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,8 +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, rems } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -19,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,
@@ -48,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',
@@ -60,11 +61,11 @@ export const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) =
           <Tooltip title={markerItem.description || markerItem.title || ''}>
             <LocationIcon
               sx={{
-                fontSize: 32,
+                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;