@12-apps/ui 6.35.0 → 6.36.0

package/src/components/data-display/DataViews/data-views-more-filters.tsx

@@ -8,6 +8,7 @@ import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownR
 // which. On a phone, where both are icon-only, they were indistinguishable.
 import FilterAltRoundedIcon from "@mui/icons-material/FilterAltRounded";
 import Popover from "@mui/material/Popover/index.js";
+import type { Theme } from "@mui/material/styles/index.js";
 import { useState } from "react";
 
 import { useDataViewsCopy } from "./data-views-copy-context";
@@ -17,7 +18,7 @@ import { Text } from "../../typography/Text";
 
 import { fieldClearing, MoreGroup, type MoreFieldProps } from "./data-views-more-fields";
 import type { OverflowField } from "./data-views-overflow";
-import { sxRem } from "../../../tokens/relative";
+import { rem, sxRem } from "../../../tokens/relative";
 
 /**
  * "MAIS" — the filter overflow: its trigger, its panel and its footer. What
@@ -126,7 +127,7 @@ function MoreHeading(): React.JSX.Element {
       }}
     >
       <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.filters.moreHeading}
         </Box>
       </Text>
@@ -239,7 +240,7 @@ export function MoreFilters<T extends Record<string, unknown>>({
           onOpenChange?.(false);
         }}
         anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-        slotProps={{ paper: { sx: { width: 300, maxWidth: "calc(100vw - 32px)" } } }}
+        slotProps={{ paper: { sx: { width: sxRem(300), maxWidth: (theme: Theme) => `calc(100vw - ${rem(theme, 32)})` } } }}
       >
         <Box data-testid={`${rest.testIdPrefix}-more-panel`}>
           <MoreHeading />
@@ -247,7 +248,7 @@ export function MoreFilters<T extends Record<string, unknown>>({
               contents are told to shrink into it. A horizontal scrollbar here
               means something refused to, which is a bug to fix rather than a
               scrollbar to live with. */}
-          <Box sx={{ maxHeight: 320, overflowY: "auto", overflowX: "hidden", p: 1.5, minWidth: 0 }}>
+          <Box sx={{ maxHeight: sxRem(320), overflowY: "auto", overflowX: "hidden", p: 1.5, minWidth: 0 }}>
             {fields.map((field) => (
               <MoreGroup key={field.id} field={field} {...rest} />
             ))}

package/src/components/data-display/DataViews/data-views-number-input.tsx

@@ -39,6 +39,7 @@ import Box from '@mui/material/Box/index.js';
 import TextField from '@mui/material/TextField/index.js';
 import React, { useEffect, useState } from 'react';
 import { fieldTextFieldStyles } from '../../../tokens/field-height';
+import { sxRem } from '../../../tokens/relative';
 
 /** Everything this field lets through: digits and the two separators. */
 const ALLOWED = /[^\d.,]/g;
@@ -163,7 +164,7 @@ export function NumberBoundInput({
             }
           : undefined
       }
-      sx={[{ width: 140 }, fieldTextFieldStyles]}
+      sx={[{ width: sxRem(140) }, fieldTextFieldStyles]}
     />
   );
 }

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

@@ -234,7 +234,7 @@ function RangeTrigger<T extends Record<string, unknown>>({
         borderRadius: fieldRadiusPx,
         height: fieldHeight,
         px: 1.5,
-        maxWidth: 280,
+        maxWidth: sxRem(280),
         color: inverted ? 'error.main' : 'text.primary',
         fontWeight: 600,
         fontSize: sxRem(13),

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

@@ -4,7 +4,9 @@ import { useEffect, useMemo, useRef } from "react";
 
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { Box } from "../../../mui/Box";
-import { sxRem } from "../../../tokens/relative";
+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.
@@ -175,14 +177,14 @@ 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",
@@ -193,9 +195,13 @@ function scopeTabSx(active: boolean): Record<string, unknown> {
     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({

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,7 +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 { sxRem } from "../../../tokens/relative";
+import { rem, sxRem } from "../../../tokens/relative";
 
 /** How long the box waits after the last keystroke before it queries. */
 const SEARCH_DEBOUNCE_MS = 350;
@@ -33,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) };
 }
 
 /**
@@ -173,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) })}
     />
   );
 }
@@ -219,10 +220,10 @@ export function CollapsedSearch({
           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

@@ -232,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 && (
@@ -260,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 (
@@ -281,7 +281,7 @@ function ViewToggle({
         font: "inherit",
         fontSize: sxRem(12),
         bgcolor: open ? "action.selected" : "transparent",
-        ...affordance,
+        ...affordanceSx,
       }}
     >
       <ToggleContents view={view} open={open} interactive={interactive} testIdPrefix={testIdPrefix} />
@@ -300,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/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,7 +24,7 @@ import {
 } from './ErrorState.metrics';
 import type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';
 import { resolveTestId } from '../../../platform/test-id';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const makeTestId =
   (dataTestId?: string) =>
@@ -50,8 +50,8 @@ 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,
@@ -93,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,
         }}
       >
@@ -134,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),
       }}
     >
@@ -151,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),
         },
       }}
     >

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

@@ -1,12 +1,14 @@
-import { keyframes } from '@mui/material/styles/index.js';
+import { keyframes, type Theme } from '@mui/material/styles/index.js';
 
-export const pulseAnimation = keyframes`
+import { rem } from '../../../tokens/relative';
+
+export 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% {
@@ -15,10 +17,10 @@ export const pulseAnimation = keyframes`
   }
 `;
 
-export const slideInUp = keyframes`
+export const slideInUp = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(8px);
+    transform: translateY(${rem(theme, 8)});
   }
   to {
     opacity: 1;
@@ -26,10 +28,10 @@ export const slideInUp = keyframes`
   }
 `;
 
-export const slideInDown = keyframes`
+export const slideInDown = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(-8px);
+    transform: translateY(${rem(theme, -8)});
   }
   to {
     opacity: 1;
@@ -37,10 +39,10 @@ export const slideInDown = keyframes`
   }
 `;
 
-export const slideInLeft = keyframes`
+export const slideInLeft = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(8px);
+    transform: translateX(${rem(theme, 8)});
   }
   to {
     opacity: 1;
@@ -48,10 +50,10 @@ export const slideInLeft = keyframes`
   }
 `;
 
-export const slideInRight = keyframes`
+export const slideInRight = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(-8px);
+    transform: translateX(${rem(theme, -8)});
   }
   to {
     opacity: 1;

package/src/components/data-display/HoverCard/HoverCard.content.tsx

@@ -2,16 +2,18 @@ import Avatar from '@mui/material/Avatar/index.js';
 import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem, sxRem } from '../../../tokens/relative';
+
 import type { HoverCardProps } from './HoverCard.types';
 
 const LoadingContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  minHeight: 80,
+  minHeight: rem(theme, 80),
   color: theme.palette.text.secondary,
 }));
 
@@ -39,12 +41,12 @@ const CardAvatar: React.FC<{ avatar: HoverCardProps['avatar'] }> = ({ avatar })
   if (!avatar) return null;
 
   if (typeof avatar === 'string') {
-    return <Avatar src={avatar} sx={{ width: 48, height: 48, mr: 2 }} />;
+    return <Avatar src={avatar} sx={{ width: sxRem(48), height: sxRem(48), mr: 2 }} />;
   }
 
   const element = avatar as React.ReactElement<{ sx?: object }>;
   return React.cloneElement(element, {
-    sx: { width: 48, height: 48, mr: 2, ...element.props.sx },
+    sx: { width: sxRem(48), height: sxRem(48), mr: 2, ...element.props.sx },
   });
 };
 
@@ -124,13 +126,14 @@ export const HoverCardContent: React.FC<HoverCardContentProps> = (props) => {
   const { variant, title, description, avatar, loading, loadingComponent, children, dataTestId } =
     props;
   const { loadingText } = props;
+  const theme = useTheme();
 
   if (loading) {
     return (
       <LoadingContainer>
         {loadingComponent || (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <CircularProgress size={20} />
+            <CircularProgress size={rem(theme, 20)} />
             <Typography variant="body2">{loadingText}</Typography>
           </Box>
         )}