@12-apps/ui 6.35.0 → 6.37.0

package/src/components/data-display/Chart/ChartComposables.tsx

@@ -5,6 +5,8 @@ import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 import { Legend, ResponsiveContainer, Tooltip } from 'recharts';
 
+import { rem, remPx, sxRem } from '../../../tokens/relative';
+
 /**
  * Raw chart composables (Squire's ChartConfig pattern, MUI-themed): a
  * responsive container plus themed tooltip/legend content renderers. The
@@ -19,7 +21,8 @@ export const ChartLegend = Legend;
 
 export interface ChartContainerProps {
   /**
-   * A number of pixels, or a PERCENTAGE of the box this container is given.
+   * A number of pixels (design px, drawn through the theme's type scale), or
+   * a PERCENTAGE of the box this container is given.
    *
    * The difference is not cosmetic: Recharts sizes the chart from the number
    * when it is one and only MEASURES its own box when it is a percentage
@@ -28,6 +31,7 @@ export interface ChartContainerProps {
    * blank space under the plot — until the height is handed over as a percent.
    */
   height: number | `${number}%`;
+  /** Design px when a number, through the type scale; a string is as given. */
   width?: number | string;
   responsive?: boolean;
   children: React.ReactElement;
@@ -42,15 +46,22 @@ export const ChartContainer: React.FC<ChartContainerProps> = ({
   children,
   'data-testid': dataTestId,
 }) => {
+  const theme = useTheme();
   if (!responsive) {
+    const box = {
+      width: typeof width === 'number' ? rem(theme, width) : width,
+      height: typeof height === 'number' ? rem(theme, height) : height,
+    };
     return (
-      <Box sx={{ width, height }} data-testid={dataTestId}>
+      <Box sx={box} data-testid={dataTestId}>
         {children}
       </Box>
     );
   }
+  // Recharts takes a number as px and only measures its box for a percentage.
+  const plot = { height: typeof height === 'number' ? remPx(theme, height) : height };
   return (
-    <ResponsiveContainer width="100%" height={height} data-testid={dataTestId}>
+    <ResponsiveContainer width="100%" {...plot} data-testid={dataTestId}>
       {children}
     </ResponsiveContainer>
   );
@@ -94,7 +105,7 @@ export const ChartTooltipContent: React.FC<ChartTooltipContentProps> = ({
         <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <Box
             component="span"
-            sx={{ width: 10, height: 10, borderRadius: '2px', backgroundColor: entry.color, flexShrink: 0 }}
+            sx={{ width: sxRem(10), height: sxRem(10), borderRadius: sxRem(2), backgroundColor: entry.color, flexShrink: 0 }}
           />
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {entry.name}
@@ -121,7 +132,7 @@ export const ChartLegendContent: React.FC<ChartLegendContentProps> = ({ payload
         <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
           <Box
             component="span"
-            sx={{ width: 10, height: 10, borderRadius: '2px', backgroundColor: entry.color, flexShrink: 0 }}
+            sx={{ width: sxRem(10), height: sxRem(10), borderRadius: sxRem(2), backgroundColor: entry.color, flexShrink: 0 }}
           />
           <Typography variant="caption" sx={{ color: 'text.secondary' }}>
             {entry.value}

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

@@ -1,4 +1,7 @@
+import type { Theme } from '@mui/material/styles/index.js';
+
 import type { ChartDataPoint, ChartProps } from './Chart.types';
+import { remPx } from '../../../tokens/relative';
 
 /**
  * Cartesian axis + bar geometry: the rules that keep a chart readable rather
@@ -25,10 +28,6 @@ import type { ChartDataPoint, ChartProps } from './Chart.types';
 const DEFAULT_MAX_CATEGORY_TICKS = 8;
 /** Category tick labels longer than this are truncated with an ellipsis. */
 const DEFAULT_TICK_LABEL_MAX_CHARS = 12;
-/** Bar corner radius, px. */
-const DEFAULT_BAR_RADIUS = 3;
-/** Cap on a single bar's thickness, px. */
-const DEFAULT_MAX_BAR_WIDTH = 38;
 
 /**
  * Thin a category axis to at most `maxTicks` labels, keeping every nth.
@@ -89,9 +88,9 @@ export interface CartesianAxisConfig {
 
 /** Resolved geometry for bar series. */
 export interface BarGeometry {
-  /** Per-corner radius, top corners only; `0` for stacked segments. */
+  /** Per-corner radius in rendered px, top corners only; `0` for stacked segments. */
   radius: number | [number, number, number, number];
-  /** Cap on a bar's thickness, px — also what keeps bars off the frame. */
+  /** Cap on a bar's thickness in rendered px — also what keeps bars off the frame. */
   maxBarSize: number;
 }
 
@@ -107,12 +106,17 @@ export function resolveAxisConfig(props: ChartProps, tickMargin: number): Cartes
   };
 }
 
-export function resolveBarGeometry(props: ChartProps): BarGeometry {
-  const radius = props.barRadius ?? DEFAULT_BAR_RADIUS;
+/**
+ * The bar geometry Recharts takes as px numbers, from design px through the
+ * type scale: a 3px corner and a 38px thickness cap unless the caller says
+ * otherwise.
+ */
+export function resolveBarGeometry(props: ChartProps, theme: Theme): BarGeometry {
+  const radius = remPx(theme, props.barRadius ?? 3);
   return {
     // A stacked segment rounded on its top corners tears a notch out of the
     // segment above it, so stacks stay square.
     radius: props.stacked ? 0 : [radius, radius, 0, 0],
-    maxBarSize: props.maxBarWidth ?? DEFAULT_MAX_BAR_WIDTH,
+    maxBarSize: remPx(theme, props.maxBarWidth ?? 38),
   };
 }

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

@@ -10,6 +10,7 @@ import {
   resolveSeries,
   type SizeStyles,
 } from './chart-internals';
+import { remPx } from '../../../tokens/relative';
 
 /**
  * Everything the per-type renderers in `chart-renderers.tsx` read, resolved
@@ -64,12 +65,26 @@ export function buildChartContext(props: ChartProps, theme: Theme): ChartRenderC
     gridStroke,
     gridOpacity,
     axisConfig: resolveAxisConfig(props, sizeStyles.tickMargin),
-    barGeometry: resolveBarGeometry(props),
+    barGeometry: resolveBarGeometry(props, theme),
     animationDuration: (props.animate ?? true) ? (props.animationDuration ?? 1500) : 0,
     commonProps: {
       data: props.data,
-      margin: { top: 20, right: 30, left: 20, bottom: 20, ...props.margin },
+      margin: {
+        top: remPx(theme, 20),
+        right: remPx(theme, 30),
+        left: remPx(theme, 20),
+        bottom: remPx(theme, 20),
+        ...marginPx(theme, props.margin),
+      },
       onClick: handleChartClick,
     },
   };
 }
+
+/** A caller's margin is in design px (the prop's contract); Recharts takes px numbers. */
+function marginPx(theme: Theme, margin: ChartProps['margin']): ChartProps['margin'] {
+  if (!margin) return undefined;
+  return Object.fromEntries(
+    Object.entries(margin).map(([side, px]) => [side, typeof px === 'number' ? remPx(theme, px) : px]),
+  );
+}

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, sxRem } 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, sxRem } 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,19 +28,34 @@ export interface SizeStyles {
   tickMargin: number;
 }
 
-type SizePreset = Omit<SizeStyles, 'fontSize'> & { fontSize: (theme: Theme) => string };
+/** 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: { height: 200, fontSize: sxRem(12), tickMargin: 10 },
-  sm: { height: 300, fontSize: sxRem(14), tickMargin: 12 },
-  md: { height: 400, fontSize: sxRem(16), tickMargin: 14 },
-  lg: { height: 500, fontSize: sxRem(18), tickMargin: 16 },
-  xl: { height: 600, fontSize: sxRem(20), tickMargin: 18 },
+  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 },
 };
 
+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 = SIZE_PRESETS[size ?? 'md'] ?? SIZE_PRESETS.md;
-  return { ...preset, fontSize: preset.fontSize(theme), height: height ?? preset.height };
+  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[] {
@@ -68,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)}` },
         },
       }
@@ -87,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/base-card.tsx

@@ -23,7 +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 } from "../../../tokens/relative";
+import { rem, sxRem } from "../../../tokens/relative";
 
 export interface BaseCardProps extends CardSurfaceProps {
   /** Extra body content below the caption (chips, meta). Optional. */
@@ -72,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",
@@ -91,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.
@@ -118,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 };
 }
 
@@ -133,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()}
@@ -147,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()}
         >
@@ -356,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,7 +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 { sxRem } from "../../../tokens/relative";
+import type { Theme } from "@mui/material/styles/index.js";
+
+import { rem, sxRem } from "../../../tokens/relative";
 
 /**
  * WHAT SITS IN EACH RAIL.
@@ -150,7 +152,7 @@ export function ListCardMeta({
   return (
     <Box
       data-slot="meta"
-      sx={{
+      sx={(theme) => ({
         display: "flex",
         alignItems: "center",
         justifyContent: "space-evenly",
@@ -161,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}`}>
@@ -209,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 {
@@ -305,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} />}