@12-apps/ui 6.34.0 → 6.36.0

package/src/components/data-display/Chart/chart-internals.ts

@@ -3,7 +3,7 @@ import type { CSSProperties } from 'react';
 
 import type { ChartProps, ChartSeries } from './Chart.types';
 import { uiInk } from '../../../tokens/ink';
-import { accentFor} from '../../../tokens/scales';
+import { accentFor, rem, remPx, sxRem } from '../../../tokens/scales';
 
 /**
  * Non-JSX internals of the prop-driven Chart: size/variant styling, palette
@@ -12,10 +12,12 @@ import { accentFor} from '../../../tokens/scales';
  */
 
 export interface SizeStyles {
+  /** The plot's height in rendered px — Recharts sizes from a number — through the type scale. */
   height: number;
   fontSize: string;
   /**
-   * Gap between an axis line and its tick labels, px.
+   * Gap between an axis line and its tick labels, in rendered px, through the
+   * type scale.
    *
    * Recharts' default of 2 is not enough. The bottom VALUE tick is centred on
    * the x-axis line, so its text box reaches ~0.79em BELOW that line, while
@@ -26,17 +28,34 @@ export interface SizeStyles {
   tickMargin: number;
 }
 
-const SIZE_PRESETS: Record<NonNullable<ChartProps['size']>, SizeStyles> = {
-  xs: { height: 200, fontSize: '0.75rem', tickMargin: 10 },
-  sm: { height: 300, fontSize: '0.875rem', tickMargin: 12 },
-  md: { height: 400, fontSize: '1rem', tickMargin: 14 },
-  lg: { height: 500, fontSize: '1.125rem', tickMargin: 16 },
-  xl: { height: 600, fontSize: '1.25rem', tickMargin: 18 },
+/** One size step, in design px: the plot's height, its type size and its tick margin. */
+interface SizePreset {
+  heightPx: number;
+  fontSize: (theme: Theme) => string;
+  tickMarginPx: number;
+}
+
+const SIZE_PRESETS: Record<NonNullable<ChartProps['size']>, SizePreset> = {
+  xs: { heightPx: 200, fontSize: sxRem(12), tickMarginPx: 10 },
+  sm: { heightPx: 300, fontSize: sxRem(14), tickMarginPx: 12 },
+  md: { heightPx: 400, fontSize: sxRem(16), tickMarginPx: 14 },
+  lg: { heightPx: 500, fontSize: sxRem(18), tickMarginPx: 16 },
+  xl: { heightPx: 600, fontSize: sxRem(20), tickMarginPx: 18 },
 };
 
-export function getSizeStyles(size: ChartProps['size'], height?: number): SizeStyles {
-  const preset = SIZE_PRESETS[size ?? 'md'] ?? SIZE_PRESETS.md;
-  return { ...preset, height: height ?? preset.height };
+const presetOf = (size: ChartProps['size']): SizePreset => SIZE_PRESETS[size ?? 'md'] ?? SIZE_PRESETS.md;
+
+/** The plot's height in design px: the explicit `height`, else the size's preset. */
+export const plotHeightPx = (size: ChartProps['size'], height?: number): number =>
+  height ?? presetOf(size).heightPx;
+
+export function getSizeStyles(theme: Theme, size: ChartProps['size'], height?: number): SizeStyles {
+  const preset = presetOf(size);
+  return {
+    height: remPx(theme, plotHeightPx(size, height)),
+    fontSize: preset.fontSize(theme),
+    tickMargin: remPx(theme, preset.tickMarginPx),
+  };
 }
 
 export function getDefaultColors(theme: Theme, variant: ChartProps['variant'], colors?: string[]): string[] {
@@ -66,13 +85,13 @@ interface VariantOptions {
 
 function effectStyles(theme: Theme, options: VariantOptions): SxStyles {
   const accent = accentFor(theme, options.color).main;
-  const glow = options.glow ? { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` } : {};
+  const glow = options.glow ? { boxShadow: `0 0 ${rem(theme, 30)} ${alpha(accent, 0.4)}` } : {};
   const pulse = options.pulse
     ? {
         animation: 'pulse 2s infinite',
         '@keyframes pulse': {
           '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },
-          '70%': { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },
+          '70%': { boxShadow: `0 0 0 ${rem(theme, 20)} ${alpha(accent, 0)}` },
           '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },
         },
       }
@@ -85,7 +104,7 @@ function variantSurface(theme: Theme, options: VariantOptions): SxStyles {
     case 'glass':
       return {
         backgroundColor: alpha(theme.palette.background.paper, options.glass ? 0.1 : 0.9),
-        backdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
       };
     case 'gradient':

package/src/components/data-display/Chart/chart-renderers.tsx

@@ -29,6 +29,7 @@ import type { ChartProps, ChartSeries } from './Chart.types';
 import { ChartLegendContent, ChartTooltipContent } from './ChartComposables';
 import { buildChartContext, type ChartRenderContext } from './chart-context';
 import { uiInk } from '../../../tokens/ink';
+import { remPx } from '../../../tokens/relative';
 
 /**
  * Per-type Recharts renderers for the prop-driven Chart, dispatched from a
@@ -198,7 +199,7 @@ function renderPie(ctx: ChartRenderContext): React.ReactElement {
         cx="50%"
         cy="50%"
         outerRadius={ctx.sizeStyles.height / 3}
-        innerRadius={props.innerRadius ?? 0}
+        innerRadius={remPx(ctx.theme, props.innerRadius ?? 0)}
         fill={ctx.chartColors[0]}
         label={props.showValues ?? false}
         animationDuration={ctx.animationDuration}

package/src/components/data-display/Chip/Chip.styles.tsx

@@ -7,6 +7,7 @@ import { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';
 import { CHIP_SIZES, CHIP_TRANSITION_EASING, CHIP_TRANSITION_MS, HOVER_LIFT_PX, HOVER_SHADOW } from './Chip.metrics';
 import type { ChipProps } from './Chip.types';
 import { shadowInk } from '../../../tokens/ink';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 /**
  * A chip is not a native control, so the two keyboard conventions it stands in
@@ -35,7 +36,7 @@ export const avatarFor = (
   }
   if (avatarSrc) {
     const { avatarSize } = CHIP_SIZES.medium;
-    return <Avatar src={avatarSrc} sx={{ width: avatarSize, height: avatarSize }} />;
+    return <Avatar src={avatarSrc} sx={{ width: sxRem(avatarSize), height: sxRem(avatarSize) }} />;
   }
   return undefined;
 };
@@ -49,7 +50,7 @@ interface ChipStyleArgs {
 
 /** The lift's shadow, per mode — the same numbers the native chip reads. */
 const hoverShadow = (theme: Theme): string =>
-  `0 ${HOVER_SHADOW.offsetY}px ${HOVER_SHADOW.blur}px ${shadowInk(
+  `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(
     theme,
     theme.palette.mode === 'dark' ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight,
   )}`;
@@ -81,7 +82,7 @@ export const chipStyles = ({
       }),
     '&:hover': {
       ...(lifts && {
-        transform: `translateY(-${HOVER_LIFT_PX}px)`,
+        transform: (theme: Theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,
         boxShadow: (theme: Theme) => hoverShadow(theme),
       }),
     },

package/src/components/data-display/DataGrid/DataGrid.states.tsx

@@ -20,6 +20,8 @@ import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import type React from 'react';
 
+import { sxRem } from '../../../tokens/relative';
+
 /** Shared by all three: the same box, the same role, the same id. */
 interface PlaceholderProps {
   dataTestId?: string;
@@ -54,7 +56,7 @@ function Placeholder({
         alignItems: 'center',
         flexDirection: 'column',
         gap: 2,
-        height: 200,
+        height: sxRem(200),
       }}
       aria-label={ariaLabel}
       role="grid"

package/src/components/data-display/DataViews/DataViewsBoard.tsx

@@ -1,10 +1,13 @@
 "use client";
 
+import { useTheme, type Theme } from "@mui/material/styles/index.js";
+
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
 import type { DataViewCardSelection } from "./data-views-types";
+import { rem } from "../../../tokens/relative";
 
 /**
  * One column of the board — a single value of the grouping field, with the label
@@ -179,7 +182,8 @@ interface BoardColumnProps<T extends Record<string, unknown>> {
   selectedIds: Set<string | number>;
   onToggleId: (id: string | number) => void;
   cardScale: number;
-  width: number;
+  /** The column's width as CSS, already through the type scale. */
+  width: string;
   testId: string;
 }
 
@@ -201,12 +205,12 @@ function BoardColumn<T extends Record<string, unknown>>({
     <Box
       data-testid={testId}
       sx={{
-        flex: `0 0 ${width}px`,
+        flex: `0 0 ${width}`,
         minWidth: width,
         display: "flex",
         flexDirection: "column",
         gap: 1,
-        borderTop: 3,
+        borderTop: (theme: Theme) => `${rem(theme, 3)} solid`,
         borderStyle: "solid",
         borderColor: toneColor(column.tone),
         borderRadius: 1,
@@ -257,10 +261,13 @@ interface DataViewsBoardProps<T extends Record<string, unknown>> {
   dataTestId?: string;
 }
 
-/** The board's column width at scale 1; the zoom slider multiplies it. */
-const BASE_COLUMN_WIDTH = 240;
-/** Never narrower than this, however far the zoom is wound down (touch targets). */
-const MIN_COLUMN_WIDTH = 220;
+/**
+ * The board's column width: 240 design px at scale 1, which the zoom slider
+ * multiplies, and never narrower than 220 however far the zoom is wound down
+ * (touch targets) — through the type scale.
+ */
+const columnWidth = (theme: Theme, cardScale: number): string =>
+  rem(theme, Math.max(220, Math.round(240 * cardScale)));
 
 /**
  * The BOARD layout: the loaded page distributed into columns of the entity's own
@@ -287,8 +294,9 @@ export function DataViewsBoard<T extends Record<string, unknown>>({
   dataTestId,
 }: DataViewsBoardProps<T>): React.JSX.Element {
   const copy = useDataViewsCopy();
+  const theme = useTheme();
   const columns = groupRows(rows, board);
-  const width = Math.max(MIN_COLUMN_WIDTH, Math.round(BASE_COLUMN_WIDTH * cardScale));
+  const width = columnWidth(theme, cardScale);
   const testId = dataTestId ? `${dataTestId}-board` : "data-views-board";
   return (
     <Box sx={{ mt: 1.5 }}>

package/src/components/data-display/DataViews/SaveViewModal.tsx

@@ -22,6 +22,7 @@ import type {
   FilterFieldConfig,
   SavedViewSummary,
 } from "./data-views-types";
+import { sxRem } from "../../../tokens/relative";
 
 /** The values the modal collects (the current view state is captured by the parent). */
 export interface SaveViewPayload {
@@ -92,7 +93,7 @@ function FlagRow({
       <Box sx={{ mt: 0.25, color: "text.disabled", display: "flex" }}>{icon}</Box>
       <Box sx={{ minWidth: 0, flex: 1 }}>
         <Text variant="body" as="span">
-          <Box component="span" sx={{ display: "block", fontSize: "0.875rem" }}>
+          <Box component="span" sx={{ display: "block", fontSize: sxRem(14) }}>
             {title}
           </Box>
         </Text>

package/src/components/data-display/DataViews/base-card.tsx

@@ -23,6 +23,7 @@ import {
 } from "./card-surface";
 import { CARD_ASPECT_RATIOS, type CardAspectRatio } from "./data-views-types";
 import { useDataViewsCopy } from "./data-views-copy-context";
+import { rem, sxRem } from "../../../tokens/relative";
 
 export interface BaseCardProps extends CardSurfaceProps {
   /** Extra body content below the caption (chips, meta). Optional. */
@@ -71,13 +72,13 @@ export interface BaseCardProps extends CardSurfaceProps {
  * its track physically and lays its contents out in the unscaled box behind it
  * — which is what "the whole card grows together" was always meant to mean.
  */
-function cardSx(opts: {
+const cardSx = (opts: {
   aspectRatio: CardAspectRatio;
   pad: number;
   scale: number;
   interactive: boolean;
   draggable: boolean;
-}): CardSx {
+}): CardSx => {
   const { aspectRatio, pad, scale, interactive, draggable } = opts;
   return {
     position: "relative",
@@ -90,14 +91,15 @@ function cardSx(opts: {
     cursor: draggable ? "grab" : interactive ? "pointer" : undefined,
     ...(draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {}),
   };
-}
+};
 
 /**
  * How far the first block in flow must start below the tile's top edge to clear
- * the absolute overlays: their 4px inset plus the checkbox's 38px hit area (20px
- * glyph in MUI's 9px padding), which is the taller of the two corners.
+ * the absolute overlays, in MUI spacing units: their 4px inset plus the
+ * checkbox's 38px hit area (20px glyph in MUI's 9px padding), which is the
+ * taller of the two corners — 42px at 8px a unit.
  */
-const OVERLAY_BAND_PX = 42;
+const OVERLAY_BAND_UNITS = 42 / 8;
 
 /**
  * The top margin each stacked slot needs, in MUI spacing units.
@@ -117,7 +119,7 @@ function contentGaps(opts: {
 }): { body: number; caption: number } {
   const { hasMedia, hasBody, overlays, pad } = opts;
   const gap = pad * 0.5;
-  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_PX / 8 - pad) : 0;
+  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_UNITS - pad) : 0;
   return { body: hasMedia ? gap : clear, caption: hasMedia || hasBody ? gap : clear };
 }
 
@@ -132,7 +134,7 @@ function CardOverlays({
   return (
     <>
       {onToggleSelect && (
-        <Box sx={{ position: "absolute", top: 4, left: 4, zIndex: 2 }}>
+        <Box sx={{ position: "absolute", top: sxRem(4), left: sxRem(4), zIndex: 2 }}>
           <Checkbox
             checked={selected}
             onChange={() => onToggleSelect()}
@@ -146,7 +148,7 @@ function CardOverlays({
       )}
       {menu && (
         <Box
-          sx={{ position: "absolute", top: 4, right: 4, zIndex: 2 }}
+          sx={{ position: "absolute", top: sxRem(4), right: sxRem(4), zIndex: 2 }}
           // Acting on the menu must never trigger the card's own click.
           onClick={(event) => event.stopPropagation()}
         >
@@ -220,6 +222,7 @@ function CardCaption({
   subtitle?: ReactNode;
   topGap: number;
 }): React.JSX.Element {
+  const theme = useTheme();
   return (
     <Box sx={{ mt: topGap, minWidth: 0 }}>
       {title != null && (
@@ -230,7 +233,7 @@ function CardCaption({
           as="p"
           style={{
             lineHeight: 1.15,
-            fontSize: "0.95rem",
+            fontSize: rem(theme, 15.2),
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
@@ -354,7 +357,7 @@ export function BaseCard(props: BaseCardProps): React.JSX.Element {
           the same corner as a control that toggles selection means every drag
           starts with a near-miss on it. */}
       {drag.draggable && (
-        <Box sx={{ position: "absolute", bottom: 4, left: 4, zIndex: 2 }}>
+        <Box sx={{ position: "absolute", bottom: sxRem(4), left: sxRem(4), zIndex: 2 }}>
           <DragHandle
             handleProps={drag.handleProps}
             gated={drag.handleProps !== undefined}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useTheme } from "@mui/material/styles/index.js";
+import { useTheme, type Theme } from "@mui/material/styles/index.js";
 
 import {
   CARD_RADIUS,
@@ -14,6 +14,7 @@ import { DENSITY_ROW_PADDING } from "./data-views-layout-context";
 import { RAIL_COUNT, RAIL_GAP, railsTemplateFor, useListRails } from "./list-card-rails";
 import { STACK_BREAK } from "./base-list-card-slots";
 import type { BaseListCardProps } from "./base-list-card";
+import { rem } from "../../../tokens/relative";
 
 /**
  * THE ROW'S GEOMETRY AND SURFACE, split from the component at the size gate.
@@ -60,6 +61,21 @@ function clickKeys(onClick: () => void) {
  * 1.4 all four rows keep identical rail edges, because subgrid tracks and the
  * zoom that reads them are the same for every row.
  */
+/** What {@link rowSx} needs to know about the row it lays out. */
+interface RowSxOptions {
+  inGroup: boolean;
+  railCount: number;
+  cellTemplate: string | null;
+  gutters: { disclose: boolean; drag: boolean; select: boolean };
+  metaColumns: number;
+  pad: number;
+  padY: number;
+  scale: number;
+  divider: boolean;
+  interactive: boolean;
+  draggable: boolean;
+}
+
 /**
  * DIVIDER COMPOSES WITH THE VARIANT — it changes the row's SHAPE, not its
  * surface.
@@ -74,19 +90,7 @@ function clickKeys(onClick: () => void) {
  * A variant that draws no border of its own gets the neutral rule from
  * {@link rowStyles}.
  */
-export function rowSx(opts: {
-  inGroup: boolean;
-  railCount: number;
-  cellTemplate: string | null;
-  gutters: { disclose: boolean; drag: boolean; select: boolean };
-  metaColumns: number;
-  pad: number;
-  padY: number;
-  scale: number;
-  divider: boolean;
-  interactive: boolean;
-  draggable: boolean;
-}): Record<string, unknown> {
+export const rowSx = (theme: Theme, opts: RowSxOptions): Record<string, unknown> => {
   const { inGroup, railCount, cellTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable } = opts;
   return {
     position: "relative",
@@ -118,7 +122,12 @@ export function rowSx(opts: {
     ...(draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {}),
     ...(interactive ? { "&:hover": { backgroundColor: "action.hover" } } : {}),
     // A real focus ring, which a clickable <div> never had.
-    "&:focus-visible": { outline: 2, outlineStyle: "solid", outlineColor: "primary.main", outlineOffset: 2 },
+    "&:focus-visible": {
+      outline: `${rem(theme, 2)} solid`,
+      outlineStyle: "solid",
+      outlineColor: "primary.main",
+      outlineOffset: rem(theme, 2),
+    },
     // TWO-LINE, below the point where the shared rails stop helping.
     //
     // The standard mobile transaction row: what the record IS and what it COST
@@ -133,7 +142,7 @@ export function rowSx(opts: {
     // The MENU stays in the top-right corner at every width. It is the row's
     // one fixed landmark — an overflow that moves to the second line on a phone
     // is an overflow nobody finds twice.
-    [`@container (max-width: ${STACK_BREAK}px)`]: {
+    [`@container (max-width: ${rem(theme, STACK_BREAK)})`]: {
       gridTemplateColumns: "auto auto minmax(0, 1fr) max-content",
       ...(inGroup ? { gridColumn: `span ${RAIL_COUNT}` } : {}),
       rowGap: 0.75,
@@ -151,7 +160,7 @@ export function rowSx(opts: {
       ? { borderRadius: 0, borderWidth: 0, borderBottomWidth: 1, borderStyle: "solid" }
       : {}),
   };
-}
+};
 
 /**
  * A selectable full-width row: a marker, a title over a subtitle, labelled
@@ -258,10 +267,10 @@ export function rowStyles(
   shell: ReturnType<typeof useRowShell>,
   cellTemplate: string | null,
 ): Record<string, unknown> {
-  const { group, selectable, drag, reserve, pad, padY, scale, acts } = shell;
+  const { theme, group, selectable, drag, reserve, pad, padY, scale, acts } = shell;
   return {
     ...rowSurface(props, shell),
-    ...rowSx({
+    ...rowSx(theme, {
       inGroup: group !== null,
       railCount: group?.railCount ?? RAIL_COUNT,
       cellTemplate,

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

@@ -5,6 +5,7 @@ import IconButton from "@mui/material/IconButton/index.js";
 
 import { Checkbox } from "../../form/Checkbox";
 import { Box } from "../../../mui/Box";
+import { sxRem } from "../../../tokens/relative";
 
 import { DragHandle, useDragItem } from "./data-views-drag";
 import { useDataViewsCopy } from "./data-views-copy-context";
@@ -28,7 +29,7 @@ import { useDataViewsCopy } from "./data-views-copy-context";
  * optical inset is not, so the padding is cancelled with a negative margin and
  * the glyph lands where the row's own padding says it should.
  */
-const CHECKBOX_PAD = "-9px";
+const CHECKBOX_PAD = sxRem(-9);
 
 /** The grip. Its gutter is reserved only when the list says to reserve it. */
 export function DragSlot({

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

@@ -6,6 +6,9 @@ import { DescriptionItem, type DescriptionItemProps } from "../DescriptionItem";
 import { RAIL_GAP_PX } from "./list-card-rails";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
+import type { Theme } from "@mui/material/styles/index.js";
+
+import { rem, sxRem } from "../../../tokens/relative";
 
 /**
  * WHAT SITS IN EACH RAIL.
@@ -60,7 +63,7 @@ export function ListCardCaption({
             sx={{
               display: "block",
               lineHeight: 1.2,
-              fontSize: "0.9rem",
+              fontSize: sxRem(14.4),
               color: "inherit",
               textDecoration: "none",
               ...CLAMP,
@@ -104,7 +107,7 @@ function MetaRule(): React.JSX.Element {
         color: "text.disabled",
         opacity: 0.5,
         userSelect: "none",
-        fontSize: "0.875rem",
+        fontSize: sxRem(14),
         // A cancelled row strikes the whole meta cluster, and a struck `|` is a
         // dagger. The rule is punctuation, not data — nothing to void.
         textDecoration: "none",
@@ -149,7 +152,7 @@ export function ListCardMeta({
   return (
     <Box
       data-slot="meta"
-      sx={{
+      sx={(theme) => ({
         display: "flex",
         alignItems: "center",
         justifyContent: "space-evenly",
@@ -160,8 +163,8 @@ export function ListCardMeta({
         whiteSpace: "nowrap",
         ...TABULAR,
         // Rung 1 of the ladder.
-        [`@container (max-width: ${META_BREAK}px)`]: { display: "none" },
-      }}
+        [`@container (max-width: ${rem(theme, META_BREAK)})`]: { display: "none" },
+      })}
     >
       {items.map((item, index) => (
         <Fragment key={`${item.label}-${index}`}>
@@ -208,10 +211,10 @@ export function ListCardMeta({
  * `META_BREAK` the cluster (and its rule) are gone, so the gap comes back —
  * otherwise the value would sit straight against the title.
  */
-const VALUE_FLUSH = {
-  marginLeft: `-${RAIL_GAP_PX}px`,
-  [`@container (max-width: ${META_BREAK}px)`]: { marginLeft: 0 },
-} as const;
+const valueFlush = (theme: Theme) => ({
+  marginLeft: rem(theme, -RAIL_GAP_PX),
+  [`@container (max-width: ${rem(theme, META_BREAK)})`]: { marginLeft: 0 },
+});
 
 /** The value, on its own rail, never truncated and never shunted by the chip. */
 function ListCardValue({ value }: { value: ReactNode }): React.JSX.Element {
@@ -219,7 +222,7 @@ function ListCardValue({ value }: { value: ReactNode }): React.JSX.Element {
     <Text variant="body" size="sm" weight="medium" as="span">
       <Box
         component="span"
-        sx={{ fontSize: "0.875rem", whiteSpace: "nowrap", ...TABULAR }}
+        sx={{ fontSize: sxRem(14), whiteSpace: "nowrap", ...TABULAR }}
       >
         {value}
       </Box>
@@ -304,10 +307,10 @@ export function ListCardTail({
     <>
       <Box
         data-slot="value"
-        sx={{
+        sx={(theme) => ({
           textAlign: "right",
-          ...(separated && value != null ? VALUE_FLUSH : {}),
-        }}
+          ...(separated && value != null ? valueFlush(theme) : {}),
+        })}
         data-testid={testId("value")}
       >
         {value != null && <ListCardValue value={value} />}

package/src/components/data-display/DataViews/card-surface.ts

@@ -2,6 +2,7 @@ import { alpha, keyframes, type CSSObject, type Theme } from "@mui/material/styl
 
 import { fadeInScaleAnimation } from "../Badge/Badge.animations";
 import { shadowInk } from "../../../tokens/ink";
+import { rem, rems, sxRem } from "../../../tokens/relative";
 
 /**
  * A plain style object, not MUI's `SxProps`.
@@ -138,7 +139,7 @@ export interface CardSurfaceProps {
  * 3px takes the hard point off the corner without being seen as a curve.
  * `divider` rows override it back to 0; a bottom rule has no corners to round.
  */
-export const CARD_RADIUS = "3px";
+export const CARD_RADIUS = sxRem(3);
 
 /** Every slot's test id, derived from the card's one. */
 export function slotTestIds(testId: string | undefined): (slot: string) => string | undefined {
@@ -191,12 +192,12 @@ function variantSx(variant: CardSurfaceVariant, theme: Theme): CardSx {
     // over an image or a gradient the blur does the rest.
     return {
       backgroundColor: alpha(theme.palette.background.paper, 0.55),
-      backdropFilter: "blur(8px)",
+      backdropFilter: `blur(${rem(theme, 8)})`,
       // `divider` as-is. NOT `alpha(divider, …)`: MUI's `alpha` REPLACES the
       // channel rather than scaling it, and `divider` is already a 12% black —
       // so asking for 80% of it produced an 80% black slab of a border.
       borderColor: theme.palette.divider,
-      boxShadow: `0 1px 3px ${shadowInk(theme, 0.1)}`,
+      boxShadow: `0 ${rems(theme, 1, 3)} ${shadowInk(theme, 0.1)}`,
     };
   }
   return {};
@@ -224,14 +225,14 @@ const MOTION_OK = "@media (prefers-reduced-motion: no-preference)";
  * under reduced-motion, cannot bleed into a neighbour, and stacks cleanly
  * however many rows raise their hand. It is where operational tables land.
  */
-function accentBar(main: string): CardSx {
+function accentBar(theme: Theme, main: string): CardSx {
   return {
     "&::before": {
       content: '""',
       position: "absolute",
       insetInlineStart: 0,
       insetBlock: 0,
-      width: 3,
+      width: rem(theme, 3),
       borderStartStartRadius: "inherit",
       borderEndStartRadius: "inherit",
       backgroundColor: main,
@@ -256,12 +257,12 @@ function accentBar(main: string): CardSx {
  * light is somewhere else. It stays legible on a dark canvas, where the old
  * bloom was the brightest thing on the screen.
  */
-function liftSx(main: string): CardSx {
+function liftSx(theme: Theme, main: string): CardSx {
   return {
     boxShadow: [
-      `0 0 0 1px ${alpha(main, 0.45)}`,
-      `0 1px 2px ${alpha(main, 0.12)}`,
-      `0 8px 20px -6px ${alpha(main, 0.3)}`,
+      `0 0 0 ${rem(theme, 1)} ${alpha(main, 0.45)}`,
+      `0 ${rems(theme, 1, 2)} ${alpha(main, 0.12)}`,
+      `0 ${rems(theme, 8, 20, -6)} ${alpha(main, 0.3)}`,
     ].join(", "),
   };
 }
@@ -278,7 +279,7 @@ function liftSx(main: string): CardSx {
  * box-shadow keyframe repaints every frame, and fifty of them drop frames on
  * exactly the tablet a restaurant floor uses. This one is compositor-only.
  */
-function pulseSx(main: string): CardSx {
+function pulseSx(theme: Theme, main: string): CardSx {
   return {
     [MOTION_OK]: {
       "&::after": {
@@ -286,7 +287,7 @@ function pulseSx(main: string): CardSx {
         position: "absolute",
         inset: 0,
         borderRadius: "inherit",
-        border: `2px solid ${main}`,
+        border: `${rem(theme, 2)} solid ${main}`,
         animation: `${pulseRing} 1.6s ease-out 6`,
         pointerEvents: "none",
       },
@@ -295,18 +296,18 @@ function pulseSx(main: string): CardSx {
 }
 
 /** The emphasis treatments, in the terms the shape can actually carry. */
-function emphasisSx(emphasis: CardEmphasis, main: string, shape: CardShape): CardSx {
+function emphasisSx(theme: Theme, emphasis: CardEmphasis, main: string, shape: CardShape): CardSx {
   if (emphasis === "attention") {
     // The bar on both; the lift only where there is room for it to spread.
     return {
-      ...accentBar(main),
-      ...(shape === "tile" ? liftSx(main) : {}),
-      ...pulseSx(main),
+      ...accentBar(theme, main),
+      ...(shape === "tile" ? liftSx(theme, main) : {}),
+      ...pulseSx(theme, main),
     };
   }
   if (emphasis === "new") {
     return {
-      ...accentBar(main),
+      ...accentBar(theme, main),
       [MOTION_OK]: { animation: `${fadeInScaleAnimation} 240ms ease-out` },
     };
   }
@@ -370,10 +371,10 @@ export function cardSurfaceStyles(
     ...(showSelected
       ? {
           borderColor: `${color}.main`,
-          boxShadow: `inset 0 0 0 1px ${main}`,
+          boxShadow: `inset 0 0 0 ${rem(theme, 1)} ${main}`,
           backgroundColor: "action.selected",
         }
       : {}),
-    ...emphasisSx(emphasis, main, props.shape),
+    ...emphasisSx(theme, emphasis, main, props.shape),
   };
 }