@12-apps/ui 6.34.0 → 6.36.0

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -35,6 +35,7 @@ import type { RangeFieldConfig, RangeValue } from './data-views-types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { fieldEdge } from '../../../tokens/field-edge';
+import { sxRem } from '../../../tokens/relative';
 
 
 
@@ -127,7 +128,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
         <Typography
           component="p"
           data-testid={`${testId}-inverted`}
-          sx={{ mt: 0.75, fontSize: '0.75rem', color: 'error.main' }}
+          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'error.main' }}
         >
           {copy.filters.rangeInvalid}
         </Typography>
@@ -139,7 +140,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
         <Typography
           component="p"
           data-testid={`${testId}-inclusive`}
-          sx={{ mt: 0.75, fontSize: '0.75rem', color: 'text.disabled' }}
+          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'text.disabled' }}
         >
           {copy.filters.rangeInclusiveNote}
         </Typography>
@@ -183,7 +184,7 @@ function ClearAffordance({
       }}
       sx={{ display: 'inline-flex', borderRadius: 999, p: 0.125, '&:hover': { bgcolor: 'action.selected' } }}
     >
-      <CloseIcon sx={{ fontSize: 14 }} />
+      <CloseIcon sx={{ fontSize: sxRem(14) }} />
     </Box>
   );
 }
@@ -228,15 +229,15 @@ function RangeTrigger<T extends Record<string, unknown>>({
           <ClearAffordance label={field.label} onClear={() => onChange({})} testId={`${testId}-clear-inline`} />
         ) : undefined
       }
-      endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
+      endIcon={<ChevronDownIcon sx={{ fontSize: sxRem(16) }} />}
       sx={{
         borderRadius: fieldRadiusPx,
         height: fieldHeight,
         px: 1.5,
-        maxWidth: 280,
+        maxWidth: sxRem(280),
         color: inverted ? 'error.main' : 'text.primary',
         fontWeight: 600,
-        fontSize: '0.8125rem',
+        fontSize: sxRem(13),
         textTransform: 'none',
         whiteSpace: 'nowrap',
         borderColor: (theme) => tone ?? fieldEdge(theme),
@@ -303,7 +304,7 @@ export function RangePill<T extends Record<string, unknown>>({
             empty grid with no explanation (FUT-668). */}
         {active && (
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mt: 1.5 }}>
-            <Typography component="span" sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
+            <Typography component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
               {rangeChipLabel(field, value)}
             </Typography>
             <Button
@@ -343,7 +344,7 @@ export function PanelRangeField<T extends Record<string, unknown>>({
   if (field.kind === "day") {
     return (
       <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-        <Typography component="span" sx={{ fontSize: "0.75rem", fontWeight: 500, color: "text.secondary" }}>
+        <Typography component="span" sx={{ fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }}>
           {field.label}
         </Typography>
         <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />

package/src/components/data-display/DataViews/data-views-scopes.tsx

@@ -4,6 +4,9 @@ import { useEffect, useMemo, useRef } from "react";
 
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { Box } from "../../../mui/Box";
+import type { Theme } from "@mui/material/styles/index.js";
+
+import { rem, sxRem } from "../../../tokens/relative";
 
 /**
  * SCOPES — a page-level partition rendered as a strip of tabs under the toolbar.
@@ -174,27 +177,31 @@ function useScrollActiveIntoView(value: string | undefined): React.RefObject<HTM
 }
 
 /** One tab's visual + a11y state, kept out of the strip's map for readability. */
-function scopeTabSx(active: boolean): Record<string, unknown> {
+const scopeTabSx = (active: boolean): Record<string, unknown> => {
   return {
     // A 44px min target: the strip is the first thing a thumb reaches on a phone.
-    minHeight: 44,
+    minHeight: sxRem(44),
     px: 1.5,
     py: 1,
     border: 0,
-    borderBottom: 2,
+    borderBottom: (theme: Theme) => `${rem(theme, 2)} solid`,
     borderStyle: "solid",
     borderColor: active ? "primary.main" : "transparent",
     background: "none",
     cursor: "pointer",
     whiteSpace: "nowrap",
     font: "inherit",
-    fontSize: "0.8125rem",
+    fontSize: sxRem(13),
     fontWeight: active ? 600 : 400,
     color: active ? "primary.main" : "text.secondary",
     "&:hover": { color: active ? "primary.main" : "text.primary" },
-    "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: -2 },
+    "&:focus-visible": {
+      outline: (theme: Theme) => `${rem(theme, 2)} solid`,
+      outlineColor: "primary.main",
+      outlineOffset: sxRem(-2),
+    },
   };
-}
+};
 
 /** The count badge. Rendered only when the server actually supplied a number. */
 function ScopeCount({
@@ -217,7 +224,7 @@ function ScopeCount({
         ml: 0.75,
         px: 0.75,
         borderRadius: 5,
-        fontSize: "0.6875rem",
+        fontSize: sxRem(11),
         fontWeight: 600,
         bgcolor: active ? "primary.main" : "action.selected",
         color: active ? "primary.contrastText" : "text.secondary",

package/src/components/data-display/DataViews/data-views-search.tsx

@@ -10,6 +10,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import IconButton from "@mui/material/IconButton/index.js";
 import InputAdornment from "@mui/material/InputAdornment/index.js";
 import TextField from "@mui/material/TextField/index.js";
+import type { Theme } from "@mui/material/styles/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { Box } from "../../../mui/Box";
@@ -17,6 +18,7 @@ import { fieldRadiusPx } from "../../../tokens/field-radius";
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { fieldHeight, fieldTextFieldStyles } from "../../../tokens/field-height";
 import { fieldEdge } from "../../../tokens/field-edge";
+import { rem, sxRem } from "../../../tokens/relative";
 
 /** How long the box waits after the last keystroke before it queries. */
 const SEARCH_DEBOUNCE_MS = 350;
@@ -32,8 +34,8 @@ const SEARCH_DEBOUNCE_MS = 350;
  * and if what is left would still be unreadable the bar hands it the whole
  * cluster instead (`searchTakeover`).
  */
-function boxWidth(fill: boolean): { flex: number; minWidth: number; maxWidth: number | "none" } {
-  return { flex: 1, minWidth: fill ? 0 : 200, maxWidth: fill ? "none" : 384 };
+function boxWidth(theme: Theme, fill: boolean): { flex: number; minWidth: number | string; maxWidth: string } {
+  return { flex: 1, minWidth: fill ? 0 : rem(theme, 200), maxWidth: fill ? "none" : rem(theme, 384) };
 }
 
 /**
@@ -152,7 +154,7 @@ export function InlineKeyword({
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
-            <SearchIcon sx={{ fontSize: 16, color: "text.secondary" }} />
+            <SearchIcon sx={{ fontSize: sxRem(16), color: "text.secondary" }} />
           </InputAdornment>
         ),
         endAdornment: draft ? (
@@ -164,7 +166,7 @@ export function InlineKeyword({
               onClick={() => setDraft("")}
               sx={{ p: 0.25 }}
             >
-              <CloseIcon sx={{ fontSize: 14 }} />
+              <CloseIcon sx={{ fontSize: sxRem(14) }} />
             </IconButton>
           </InputAdornment>
         ) : undefined,
@@ -172,7 +174,7 @@ export function InlineKeyword({
       // Takes the free space and gives it up first — step 3 of the ladder,
       // which needs no flag because flex does it (see `computeSplit`). The
       // corner is the theme's field radius, so the box matches the pills beside it.
-      sx={(theme) => ({ ...boxWidth(fill), ...fieldTextFieldStyles(theme) })}
+      sx={(theme) => ({ ...boxWidth(theme, fill), ...fieldTextFieldStyles(theme) })}
     />
   );
 }
@@ -212,16 +214,16 @@ export function CollapsedSearch({
         bgcolor: active ? "action.selected" : "background.paper",
       }}
     >
-      <SearchIcon sx={{ fontSize: 18 }} />
+      <SearchIcon sx={{ fontSize: sxRem(18) }} />
       {active && (
         <Box
           component="span"
           sx={{
             position: "absolute",
-            top: 2,
-            right: 2,
-            width: 6,
-            height: 6,
+            top: sxRem(2),
+            right: sxRem(2),
+            width: sxRem(6),
+            height: sxRem(6),
             borderRadius: "50%",
             bgcolor: "primary.main",
           }}

package/src/components/data-display/DataViews/data-views-toolbar.tsx

@@ -17,6 +17,7 @@ import { DataViewsExportMenu, type DataViewExport } from "./data-views-export";
 import { renderBulkActions } from "./data-views-grid-helpers";
 import type { RowAction } from "./data-views-types";
 import type { DataViewsController } from "./use-data-views-state";
+import { sxRem } from "../../../tokens/relative";
 
 export interface GridToolbarProps<T extends Record<string, unknown>> {
   testIdPrefix: string;
@@ -97,7 +98,7 @@ function ToolbarRightControls<T extends Record<string, unknown>>(props: GridTool
           <Divider
             orientation="vertical"
             flexItem
-            sx={{ height: 20, alignSelf: "center", mx: 0.5 }}
+            sx={{ height: sxRem(20), alignSelf: "center", mx: 0.5 }}
           />
         </>
       )}

package/src/components/data-display/DataViews/data-views-view-nav.tsx

@@ -32,6 +32,7 @@ import { Text } from "../../typography/Text";
 
 import type { DisplayPanelView } from "./data-views-display-panel";
 import type { SavedViewSummary } from "./data-views-types";
+import { sxRem } from "../../../tokens/relative";
 
 /** What the panel needs to drive the views without owning any of them. */
 export interface ViewNavHandlers {
@@ -59,7 +60,7 @@ const rowSx = {
   bgcolor: "transparent",
   cursor: "pointer",
   font: "inherit",
-  fontSize: "0.8125rem",
+  fontSize: sxRem(13),
   textAlign: "left",
   color: "text.primary",
   "&:hover": { bgcolor: "action.hover" },
@@ -190,7 +191,7 @@ export function ViewActions({
         type="button"
         onClick={onBack}
         data-testid={`${testIdPrefix}-view-actions-back`}
-        sx={{ ...rowSx, color: "text.secondary", fontSize: "0.75rem" }}
+        sx={{ ...rowSx, color: "text.secondary", fontSize: sxRem(12) }}
       >
         <ChevronLeftRoundedIcon fontSize="small" />
         <Box component="span" sx={{ flex: 1, fontWeight: 600, color: "text.primary" }}>
@@ -231,7 +232,7 @@ function ToggleContents({
           component="span"
           aria-label={copy.nav.unsavedChanges}
           data-testid={`${testIdPrefix}-display-dirty`}
-          sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }}
+          sx={{ height: sxRem(6), width: sxRem(6), borderRadius: "50%", bgcolor: "primary.main" }}
         />
       )}
       {interactive && (
@@ -259,7 +260,7 @@ function ViewToggle({
   const interactive = Boolean(view.nav);
   // One decision, not eight: a panel with no views renders the same row as
   // plain text rather than as a button that opens nothing.
-  const affordance = interactive
+  const affordanceSx = interactive
     ? { px: 0.75, py: 0.25, cursor: "pointer", "&:hover": { bgcolor: "action.hover" } }
     : { px: 0, py: 0, cursor: "default" };
   return (
@@ -278,9 +279,9 @@ function ViewToggle({
         border: 0,
         borderRadius: 1,
         font: "inherit",
-        fontSize: "0.75rem",
+        fontSize: sxRem(12),
         bgcolor: open ? "action.selected" : "transparent",
-        ...affordance,
+        ...affordanceSx,
       }}
     >
       <ToggleContents view={view} open={open} interactive={interactive} testIdPrefix={testIdPrefix} />
@@ -299,7 +300,7 @@ export function ViewHeader(props: {
   return (
     <Box sx={{ display: "flex", alignItems: "center", gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: "divider" }}>
       <Text variant="caption" as="span">
-        <Box component="span" sx={{ textTransform: "uppercase", letterSpacing: 0.5, color: "text.disabled" }}>
+        <Box component="span" sx={{ textTransform: "uppercase", letterSpacing: sxRem(0.5), color: "text.disabled" }}>
           {copy.nav.label}
         </Box>
       </Text>

package/src/components/data-display/DataViews/list-card-cells.tsx

@@ -3,6 +3,7 @@
 import { createContext, useContext, type ReactNode } from "react";
 
 import { Box } from "../../../mui/Box";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * THE CELL CONFIG — the list declares its columns once, every row obeys them.
@@ -126,14 +127,14 @@ function Cell<T extends Record<string, unknown>>({
     >
       <Box
         component="span"
-        sx={{ ...clamp, fontSize: 14, fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric }}
+        sx={{ ...clamp, fontSize: sxRem(14), fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric }}
       >
         {config.primary(row)}
       </Box>
       {secondary != null && (
         <Box
           component="span"
-          sx={{ ...clamp, fontSize: 12.5, lineHeight: 1.3, color: "text.secondary", ...numeric }}
+          sx={{ ...clamp, fontSize: sxRem(12.5), lineHeight: 1.3, color: "text.secondary", ...numeric }}
         >
           {secondary}
         </Box>

package/src/components/data-display/DataViews/save-view-preview.tsx

@@ -11,6 +11,7 @@ import { useDataViewsCopy } from "./data-views-copy-context";
 import { Box } from "../../../mui/Box";
 import { Stack } from "../../../mui/Stack";
 import { Text } from "../../typography/Text";
+import { sxRem } from "../../../tokens/relative";
 
 export interface PreviewBoxProps {
   preview: { filters: string[]; columns: string[]; sort: string[] };
@@ -31,7 +32,7 @@ function SummaryRow({
   return (
     <Box sx={{ display: "flex", gap: 1.5 }} data-testid={testId}>
       <Text variant="caption" as="span">
-        <Box component="span" sx={{ width: 116, flexShrink: 0, color: "text.secondary" }}>
+        <Box component="span" sx={{ width: sxRem(116), flexShrink: 0, color: "text.secondary" }}>
           {label}
         </Box>
       </Text>
@@ -53,7 +54,7 @@ export function PreviewBox({ preview, testIdPrefix }: PreviewBoxProps): React.JS
       <Text variant="caption" as="p">
         <Box
           component="span"
-          sx={{ display: "block", mb: 1, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600, color: "text.disabled" }}
+          sx={{ display: "block", mb: 1, textTransform: "uppercase", letterSpacing: sxRem(0.6), fontWeight: 600, color: "text.disabled" }}
         >
           {copy.saveView.previewHeading}
         </Box>

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

@@ -5,6 +5,7 @@ import { forwardRef } from 'react';
 
 import { useDateTimeParts } from './DateTimeDisplay.hooks';
 import type { DateTimeDisplayProps } from './DateTimeDisplay.types';
+import { sxRem } from '../../../tokens/relative';
 import type { SizeValue } from '../../../tokens/scales';
 
 /**
@@ -14,13 +15,13 @@ function getFontSizes(size: SizeValue) {
   switch (size) {
     case 'xs':
     case 'sm':
-      return { date: '0.75rem', time: '0.65rem' };
+      return { date: sxRem(12), time: sxRem(10.4) };
     case 'lg':
     case 'xl':
-      return { date: '1rem', time: '0.875rem' };
+      return { date: sxRem(16), time: sxRem(14) };
     case 'md':
     default:
-      return { date: '0.875rem', time: '0.75rem' };
+      return { date: sxRem(14), time: sxRem(12) };
   }
 }
 

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

@@ -1,6 +1,8 @@
 import Box from '@mui/material/Box/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
 import type { ReactNode } from 'react';
 
+import { rem } from '../../../tokens/relative';
 import { Text } from '../../typography/Text/Text';
 
 export interface DescriptionItemProps {
@@ -85,9 +87,9 @@ const containerSx = (isHorizontal: boolean, align: 'start' | 'center' | 'end') =
   textAlign: align,
 });
 
-const labelStyle = (isHorizontal: boolean) => ({
+const labelStyle = (theme: Theme, isHorizontal: boolean) => ({
   textTransform: 'uppercase' as const,
-  marginBottom: isHorizontal ? 0 : '0.25rem',
+  marginBottom: isHorizontal ? 0 : rem(theme, 4),
   minWidth: isHorizontal ? ('fit-content' as const) : undefined,
   flexShrink: isHorizontal ? 0 : undefined,
 });
@@ -105,6 +107,7 @@ export const DescriptionItem: React.FC<DescriptionItemProps> = ({
   className,
   'data-testid': dataTestId,
 }) => {
+  const theme = useTheme();
   const isHorizontal = orientation === 'horizontal';
   const testId = makeTestId(dataTestId);
 
@@ -118,7 +121,7 @@ export const DescriptionItem: React.FC<DescriptionItemProps> = ({
         variant="caption"
         size="xs"
         color="secondary"
-        style={labelStyle(isHorizontal)}
+        style={labelStyle(theme, isHorizontal)}
         data-testid={testId('label')}
       >
         {label}

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

@@ -27,6 +27,7 @@ import {
 } from './EmptyState.metrics';
 import type { EmptyStateProps, EmptyStateVariant } from './EmptyState.types';
 import { resolveTestId } from '../../../platform/test-id';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** The shared action list names its glyph; the web draws it with MUI's icon. */
 const ACTION_ICONS: Record<ActionIconName, React.ReactNode> = {
@@ -42,7 +43,7 @@ const Illustration: React.FC<{
   <Box
     data-testid={testId}
     sx={{
-      maxWidth: illustrationMaxWidth(variant),
+      maxWidth: sxRem(illustrationMaxWidth(variant)),
       width: '100%',
       height: 'auto',
       opacity: illustrationOpacity(variant),
@@ -73,7 +74,7 @@ const Actions: React.FC<{
           onClick={spec.onClick}
           startIcon={spec.icon && ACTION_ICONS[spec.icon]}
           data-testid={testId(spec.key)}
-          sx={{ minWidth: ACTION_MIN_WIDTH }}
+          sx={{ minWidth: sxRem(ACTION_MIN_WIDTH) }}
         >
           {spec.label}
         </Button>
@@ -130,7 +131,7 @@ const Content: React.FC<{
         sx={{
           fontWeight: theme.typography.fontWeightMedium,
           color: theme.palette.text.primary,
-          maxWidth: TITLE_MAX_WIDTH,
+          maxWidth: rem(theme, TITLE_MAX_WIDTH),
         }}
       >
         {title}
@@ -142,7 +143,7 @@ const Content: React.FC<{
           color="text.secondary"
           data-testid={testId('description')}
           sx={{
-            maxWidth: DESCRIPTION_MAX_WIDTH,
+            maxWidth: rem(theme, DESCRIPTION_MAX_WIDTH),
             lineHeight: DESCRIPTION_LINE_HEIGHT,
           }}
         >
@@ -192,7 +193,7 @@ export const EmptyState: React.FC<EmptyStateProps> = React.memo((props) => {
         justifyContent: 'center',
         textAlign: 'center',
         padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),
-        minHeight: EMPTY_STATE_MIN_HEIGHT,
+        minHeight: rem(theme, EMPTY_STATE_MIN_HEIGHT),
         gap: theme.spacing(EMPTY_STATE_GAP_UNITS),
       }}
     >

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

@@ -24,6 +24,7 @@ import {
 } from './ErrorState.metrics';
 import type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';
 import { resolveTestId } from '../../../platform/test-id';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const makeTestId =
   (dataTestId?: string) =>
@@ -49,14 +50,14 @@ const ErrorIcon: React.FC<{
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        width: ERROR_ICON_BOX,
-        height: ERROR_ICON_BOX,
+        width: rem(theme, ERROR_ICON_BOX),
+        height: rem(theme, ERROR_ICON_BOX),
         borderRadius: '50%',
         backgroundColor: color.light,
         opacity: ERROR_ICON_BOX_OPACITY,
       }}
     >
-      {icon || <Fallback sx={{ fontSize: ERROR_ICON_SIZE, color: color.main }} />}
+      {icon || <Fallback sx={{ fontSize: sxRem(ERROR_ICON_SIZE), color: color.main }} />}
     </Box>
   );
 };
@@ -92,7 +93,7 @@ const ErrorText: React.FC<{
         color="text.secondary"
         data-testid={testId('message')}
         sx={{
-          maxWidth: ERROR_MESSAGE_MAX_WIDTH,
+          maxWidth: rem(theme, ERROR_MESSAGE_MAX_WIDTH),
           lineHeight: ERROR_MESSAGE_LINE_HEIGHT,
         }}
       >
@@ -133,7 +134,7 @@ export const ErrorState: React.FC<ErrorStateProps> = React.memo((props) => {
         justifyContent: 'center',
         textAlign: 'center',
         padding: theme.spacing(ERROR_STATE_PADDING_UNITS),
-        minHeight: ERROR_STATE_MIN_HEIGHT,
+        minHeight: rem(theme, ERROR_STATE_MIN_HEIGHT),
         gap: theme.spacing(ERROR_STATE_GAP_UNITS),
       }}
     >
@@ -150,7 +151,7 @@ export const ErrorState: React.FC<ErrorStateProps> = React.memo((props) => {
           data-testid={testId('retry-button')}
           sx={{
             mt: theme.spacing(RETRY_MARGIN_TOP_UNITS),
-            minWidth: RETRY_MIN_WIDTH,
+            minWidth: rem(theme, RETRY_MIN_WIDTH),
           }}
         >
           {retryLabel}

package/src/components/data-display/FleetMap/FleetBody.tsx

@@ -1,7 +1,10 @@
 import Box from '@mui/material/Box/index.js';
 import Stack from '@mui/material/Stack/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem } from '../../../tokens/relative';
+
 import { FleetCanvas } from './FleetCanvas';
 import type { FleetMapState } from './FleetMap.hooks';
 import type { FleetMapCopy } from './FleetMap.types';
@@ -65,7 +68,7 @@ export function FleetBody({
           the six-width pass was taken at. */}
       <Box
         sx={{
-          flexBasis: { md: '280px', lg: '320px', xl: '380px' },
+          flexBasis: (theme: Theme) => ({ md: rem(theme, 280), lg: rem(theme, 320), xl: rem(theme, 380) }),
           flexShrink: 0,
           minWidth: 0,
           maxHeight: height,

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

@@ -1,9 +1,10 @@
 import Box from '@mui/material/Box/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { useTheme } from '@mui/material/styles/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { SR_ONLY_SX } from '../../form/Label/Label.styles';
+import { rem } from '../../../tokens/relative';
 import { EmptyState } from '../EmptyState/EmptyState';
 
 import { FleetBody } from './FleetBody';
@@ -15,8 +16,8 @@ import {
 } from './FleetMap.metrics';
 import type { FleetMapProps } from './FleetMap.types';
 
-/** The map's own default height. Overridable, and never a hardcoded viewport. */
-const DEFAULT_HEIGHT = '420px';
+/** The map's own default height, in design px. Overridable, and never a hardcoded viewport. */
+const defaultHeight = (theme: Theme): string => rem(theme, 420);
 
 /**
  * The reload announcement, and nothing else.
@@ -96,12 +97,13 @@ export const FleetMap: React.FC<FleetMapProps> = React.memo(
     onSelect,
     laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
     staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,
-    height = DEFAULT_HEIGHT,
+    height: heightProp,
     loading = false,
     className,
     dataTestId,
   }) => {
     const theme = useTheme();
+    const height = heightProp ?? defaultHeight(theme);
     const testId = dataTestId || 'fleet-map';
     const headingId = React.useId();
     const { ordered, active, centre, select, markers, onKeyDown } = useFleetMap(

package/src/components/data-display/FleetMap/FleetRoster.tsx

@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem } from '../../../tokens/relative';
 import { Skeleton } from '../../layout/Skeleton/Skeleton';
 
 import { freshnessOf } from './FleetMap.helpers';
@@ -196,8 +197,8 @@ function FleetRow({
         aria-hidden="true"
         data-testid={`${testId}-dot`}
         sx={{
-          width: FLEET_DOT.size,
-          height: FLEET_DOT.size,
+          width: rem(theme, FLEET_DOT.size),
+          height: rem(theme, FLEET_DOT.size),
           borderRadius: '50%',
           flexShrink: 0,
           backgroundColor: color,
@@ -229,13 +230,14 @@ function FleetRow({
  * against 12px on a re-themed host.
  */
 function FirstLoad({ testId }: { testId: string }): React.JSX.Element {
+  const theme = useTheme();
   return (
     <Stack spacing={FLEET_SKELETON.gapUnits} data-testid={`${testId}-skeleton`} aria-hidden="true">
       {Array.from({ length: FLEET_SKELETON.rows }, (_, row) => (
         <Skeleton
           key={row}
           variant="rectangular"
-          height={FLEET_SKELETON.height}
+          height={rem(theme, FLEET_SKELETON.height)}
           borderRadius={FLEET_SKELETON.radiusMultiple}
         />
       ))}
@@ -304,8 +306,8 @@ export function FleetRoster({
         overflowY: 'auto',
         minWidth: 0,
         '&:focus-visible': {
-          outline: `${FLEET_ROSTER.focusRingWidth}px solid ${theme.palette.primary.main}`,
-          outlineOffset: FLEET_ROSTER.focusRingOffset,
+          outline: `${rem(theme, FLEET_ROSTER.focusRingWidth)} solid ${theme.palette.primary.main}`,
+          outlineOffset: rem(theme, FLEET_ROSTER.focusRingOffset),
         },
       }}
     >