@12-apps/ui 6.35.0 → 6.36.0

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} />}

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),
   };
 }

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

@@ -30,6 +30,7 @@
 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';
 
 
 /**
@@ -254,7 +255,7 @@ export function DayBoundInput({
       // The placeholder occupies the space an un-shrunk label would render into.
       InputLabelProps={{ shrink: true }}
       inputProps={dayInputProps(testId, describedBy)}
-      sx={[{ width: 165 }, fieldTextFieldStyles]}
+      sx={[{ width: sxRem(165) }, fieldTextFieldStyles]}
     />
   );
 }

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

@@ -6,6 +6,7 @@ import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownR
 // share with the "Mais" FILTER trigger — see the note there.
 import DisplaySettingsRoundedIcon from "@mui/icons-material/DisplaySettingsRounded";
 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";
@@ -23,7 +24,7 @@ import {
 import type { SavedViewSummary } from "./data-views-types";
 import { DisplayTab, SortTab } from "./data-views-display-tabs";
 import type { DataViewsController } from "./use-data-views-state";
-import { sxRem } from "../../../tokens/relative";
+import { rem, sxRem } from "../../../tokens/relative";
 
 /**
  * "EXIBIR" — one panel for every question about how the list is READ.
@@ -209,7 +210,7 @@ function PanelSurface<T extends Record<string, unknown>>({
           />
           {/* Constrained + scrolled: the columns list is unbounded, and a panel
               taller than the viewport puts its own save button off screen. */}
-          <Box sx={{ maxHeight: 320, minHeight: 220, overflowY: "auto" }}>
+          <Box sx={{ maxHeight: sxRem(320), minHeight: sxRem(220), overflowY: "auto" }}>
             {nav ? (
               <ViewsBody
                 nav={nav}
@@ -283,7 +284,7 @@ function DisplayTrigger({
           </Box>
         )}
         {dirty && (
-          <Box component="span" sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }} />
+          <Box component="span" sx={{ height: sxRem(6), width: sxRem(6), borderRadius: "50%", bgcolor: "primary.main" }} />
         )}
         {/* The chevron goes with the label. Once the control is a bare icon it
             is already unmistakably a button, and on the rung where that happens
@@ -334,7 +335,7 @@ export function DataViewsDisplayPanel<T extends Record<string, unknown>>({
         onClose={close}
         anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
         transformOrigin={{ vertical: "top", horizontal: "right" }}
-        slotProps={{ paper: { sx: { width: 320, maxWidth: "calc(100vw - 32px)" } } }}
+        slotProps={{ paper: { sx: { width: sxRem(320), maxWidth: (theme: Theme) => `calc(100vw - ${rem(theme, 32)})` } } }}
       >
         <PanelSurface
           c={c}

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

@@ -207,7 +207,7 @@ function SortFieldRow({
     >
       <Box
         component="span"
-        sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: active ? "primary.main" : "action.disabled" }}
+        sx={{ height: sxRem(6), width: sxRem(6), borderRadius: "50%", bgcolor: active ? "primary.main" : "action.disabled" }}
       />
       <Box component="span" sx={{ flex: 1, minWidth: 0 }}>
         {label}
@@ -232,22 +232,22 @@ function SortFieldRow({
 function densityTiles(
   layout: DataViewsLayout,
   copy: DataViewsCopy,
-): { value: DataViewsDensity; label: string; gap: number; columns: number }[] {
+): { value: DataViewsDensity; label: string; gap: (theme: Theme) => string; columns: number }[] {
   // A layout the pack does not key falls back to the table's words rather
   // than rendering three blank tiles — a host adding a layout should still see
   // a usable control while it writes the labels for it.
   const labels = copy.display.densityLabels[layout] ?? copy.display.densityLabels.table;
   return [
-    { value: "compact", label: labels?.compact ?? "compact", gap: 2, columns: 4 },
-    { value: "cozy", label: labels?.cozy ?? "cozy", gap: 5, columns: 3 },
-    { value: "comfortable", label: labels?.comfortable ?? "comfortable", gap: 8, columns: 2 },
+    { value: "compact", label: labels?.compact ?? "compact", gap: sxRem(2), columns: 4 },
+    { value: "cozy", label: labels?.cozy ?? "cozy", gap: sxRem(5), columns: 3 },
+    { value: "comfortable", label: labels?.comfortable ?? "comfortable", gap: sxRem(8), columns: 2 },
   ];
 }
 
 /** The preview for one density tile, in the terms that layout's density is in. */
 function densityGlyph(
   layout: DataViewsLayout,
-  tile: { gap: number; columns: number },
+  tile: { gap: (theme: Theme) => string; columns: number },
   active: boolean,
 ): React.JSX.Element {
   if (layout === "cards") return <GridGlyph n={tile.columns} active={active} />;

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

@@ -1,8 +1,10 @@
 "use client";
 
 import { createContext, useContext, type ReactNode } from "react";
+import type { Theme } from "@mui/material/styles/index.js";
 
 import { Box } from "../../../mui/Box";
+import { rem, sxRem } from "../../../tokens/relative";
 
 /**
  * DRAGGING, OWNED BY THE CONTAINER AND NOT BY THE CARD.
@@ -138,8 +140,8 @@ export function DropIndicator({ edge }: { edge: "before" | "after" }): React.JSX
         // Centred ON the gap rather than inside the card: the item lands
         // BETWEEN two rows, and a rule sitting within one of them reads as
         // "into this row" instead.
-        ...(edge === "before" ? { top: -2 } : { bottom: -2 }),
-        height: 3,
+        ...(edge === "before" ? { top: sxRem(-2) } : { bottom: sxRem(-2) }),
+        height: sxRem(3),
         borderRadius: 2,
         bgcolor: "primary.main",
         pointerEvents: "none",
@@ -174,8 +176,8 @@ export function DragHandle({
       {...handleProps}
       sx={{
         display: "inline-grid",
-        gridTemplateColumns: "repeat(2, 3px)",
-        gap: "2px",
+        gridTemplateColumns: (theme: Theme) => `repeat(2, ${rem(theme, 3)})`,
+        gap: sxRem(2),
         flexShrink: 0,
         p: 0.5,
         borderRadius: 1,
@@ -190,7 +192,7 @@ export function DragHandle({
         <Box
           key={index}
           component="span"
-          sx={{ width: 3, height: 3, borderRadius: "50%", bgcolor: "currentColor" }}
+          sx={{ width: sxRem(3), height: sxRem(3), borderRadius: "50%", bgcolor: "currentColor" }}
         />
       ))}
     </Box>

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

@@ -5,6 +5,7 @@ import InboxRoundedIcon from "@mui/icons-material/InboxRounded";
 
 import { Button } from "../../form/Button";
 import { Box } from "../../../mui/Box";
+import { sxRem } from "../../../tokens/relative";
 import { Text } from "../../typography/Text";
 
 import { useDataViewsCopy } from "./data-views-copy-context";
@@ -70,7 +71,7 @@ export function DataViewsEmpty({
             </Box>
           </Text>
           <Text variant="caption" as="p">
-            <Box component="span" sx={{ display: "block", mt: 0.5, mb: 2, color: "text.secondary", maxWidth: 380 }}>
+            <Box component="span" sx={{ display: "block", mt: 0.5, mb: 2, color: "text.secondary", maxWidth: sxRem(380) }}>
               {copy.grid.emptyFilteredHint}
             </Box>
           </Text>

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

@@ -4,6 +4,7 @@ import DownloadRoundedIcon from "@mui/icons-material/DownloadRounded";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import Popover from "@mui/material/Popover/index.js";
+import { useTheme, type Theme } from "@mui/material/styles/index.js";
 import { useState } from "react";
 
 import { useDataViewsCopy } from "./data-views-copy-context";
@@ -12,7 +13,7 @@ import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
 import type { DataViewQuery } from "./data-views-types";
-import { sxRem } from "../../../tokens/relative";
+import { rem, sxRem } from "../../../tokens/relative";
 
 /**
  * EXPORT — the current QUERY, never the rendered page.
@@ -96,6 +97,7 @@ function ExportTrigger({
   compact?: boolean;
 }): React.JSX.Element {
   const copy = useDataViewsCopy();
+  const theme = useTheme();
   return (
     <Button
       variant="outline"
@@ -109,7 +111,7 @@ function ExportTrigger({
       title={compact ? copy.export.trigger : undefined}
     >
       <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
-        {busy ? <CircularProgress size={14} /> : <DownloadRoundedIcon fontSize="small" />}
+        {busy ? <CircularProgress size={rem(theme, 14)} /> : <DownloadRoundedIcon fontSize="small" />}
         {!compact && (
           <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
             {copy.export.triggerLabel}
@@ -246,7 +248,7 @@ export function DataViewsExportMenu({
         onClose={() => setAnchor(null)}
         anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
         transformOrigin={{ vertical: "top", horizontal: "right" }}
-        slotProps={{ paper: { sx: { width: 260, maxWidth: "calc(100vw - 32px)" } } }}
+        slotProps={{ paper: { sx: { width: sxRem(260), maxWidth: (theme: Theme) => `calc(100vw - ${rem(theme, 32)})` } } }}
       >
         <ExportPanel
           formats={config.formats ?? ALL_FORMATS}

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

@@ -1,6 +1,9 @@
 "use client";
 
+import type { Theme } from "@mui/material/styles/index.js";
+
 import { Box } from "../../../mui/Box";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * Miniature previews of what a layout or a density setting DOES.
@@ -16,19 +19,19 @@ import { Box } from "../../../mui/Box";
  */
 
 /** The glyph's own footprint, so every tile in a picker lines up. */
-const FRAME = { width: 32, height: 24, display: "flex" } as const;
+const FRAME = { width: sxRem(32), height: sxRem(24), display: "flex" } as const;
 
 /** Active tiles use the accent; the rest stay muted so the choice reads at a glance. */
 function barColor(active: boolean): string {
   return active ? "primary.main" : "action.disabled";
 }
 
-/** Three rows at a given gap — the density preview for the table and list. */
-export function RowsGlyph({ gap, active }: { gap: number; active: boolean }): React.JSX.Element {
+/** Three rows at a given gap (through the type scale) — the density preview for the table and list. */
+export function RowsGlyph({ gap, active }: { gap: (theme: Theme) => string; active: boolean }): React.JSX.Element {
   return (
-    <Box sx={{ ...FRAME, flexDirection: "column", justifyContent: "center", gap: `${gap}px` }}>
+    <Box sx={{ ...FRAME, flexDirection: "column", justifyContent: "center", gap }}>
       {[0, 1, 2].map((index) => (
-        <Box key={index} sx={{ height: 2, width: "100%", borderRadius: 1, bgcolor: barColor(active) }} />
+        <Box key={index} sx={{ height: sxRem(2), width: "100%", borderRadius: 1, bgcolor: barColor(active) }} />
       ))}
     </Box>
   );
@@ -37,7 +40,7 @@ export function RowsGlyph({ gap, active }: { gap: number; active: boolean }): Re
 /** A dense block grid — the table layout. */
 export function TableGlyph({ active }: { active: boolean }): React.JSX.Element {
   return (
-    <Box sx={{ ...FRAME, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "2px" }}>
+    <Box sx={{ ...FRAME, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: sxRem(2) }}>
       {Array.from({ length: 9 }).map((_, index) => (
         <Box
           key={index}
@@ -51,12 +54,12 @@ export function TableGlyph({ active }: { active: boolean }): React.JSX.Element {
 /** Full-width rows each carrying a leading mark — the list layout. */
 export function ListGlyph({ active }: { active: boolean }): React.JSX.Element {
   return (
-    <Box sx={{ ...FRAME, flexDirection: "column", justifyContent: "center", gap: "4px" }}>
+    <Box sx={{ ...FRAME, flexDirection: "column", justifyContent: "center", gap: sxRem(4) }}>
       {[0, 1, 2].map((index) => (
         <Box
           key={index}
           sx={{
-            height: 5,
+            height: sxRem(5),
             width: "100%",
             borderRadius: 0.5,
             bgcolor: barColor(active),
@@ -65,7 +68,7 @@ export function ListGlyph({ active }: { active: boolean }): React.JSX.Element {
             alignItems: "center",
           }}
         >
-          <Box sx={{ ml: "2px", height: 3, width: 3, borderRadius: "50%", bgcolor: "background.paper" }} />
+          <Box sx={{ ml: sxRem(2), height: sxRem(3), width: sxRem(3), borderRadius: "50%", bgcolor: "background.paper" }} />
         </Box>
       ))}
     </Box>
@@ -79,7 +82,7 @@ export function ListGlyph({ active }: { active: boolean }): React.JSX.Element {
  */
 export function GridGlyph({ n = 3, active }: { n?: number; active: boolean }): React.JSX.Element {
   return (
-    <Box sx={{ ...FRAME, display: "grid", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: "2px" }}>
+    <Box sx={{ ...FRAME, display: "grid", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: sxRem(2) }}>
       {Array.from({ length: n * 2 }).map((_, index) => (
         <Box key={index} sx={{ borderRadius: 0.5, bgcolor: barColor(active) }} />
       ))}
@@ -95,7 +98,7 @@ export function GridGlyph({ n = 3, active }: { n?: number; active: boolean }): R
  */
 export function ColumnsGlyph({ n, active }: { n: number; active: boolean }): React.JSX.Element {
   return (
-    <Box sx={{ ...FRAME, gap: "2px" }}>
+    <Box sx={{ ...FRAME, gap: sxRem(2) }}>
       {Array.from({ length: n }).map((_, column) => (
         <Box key={column} sx={{ flex: 1, borderRadius: 0.5, bgcolor: barColor(active) }} />
       ))}
@@ -106,11 +109,11 @@ export function ColumnsGlyph({ n, active }: { n: number; active: boolean }): Rea
 /** Three columns of decreasing height — the board. */
 export function BoardGlyph({ active }: { active: boolean }): React.JSX.Element {
   return (
-    <Box sx={{ ...FRAME, gap: "2px" }}>
+    <Box sx={{ ...FRAME, gap: sxRem(2) }}>
       {[3, 2, 1].map((count, column) => (
-        <Box key={column} sx={{ flex: 1, display: "flex", flexDirection: "column", gap: "2px" }}>
+        <Box key={column} sx={{ flex: 1, display: "flex", flexDirection: "column", gap: sxRem(2) }}>
           {Array.from({ length: count }).map((_, index) => (
-            <Box key={index} sx={{ height: 5, borderRadius: 0.5, bgcolor: barColor(active) }} />
+            <Box key={index} sx={{ height: sxRem(5), borderRadius: 0.5, bgcolor: barColor(active) }} />
           ))}
         </Box>
       ))}

package/src/components/data-display/DataViews/data-views-grid-helpers.tsx

@@ -1,9 +1,12 @@
 "use client";
 
+import type { Theme } from "@mui/material/styles/index.js";
+
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { type GridColumn } from "../DataGrid";
 import { type SortFieldDefinition } from "../../layout/ContentToolbar";
 import { Box } from "../../../mui/Box";
+import { rem, sxRem } from "../../../tokens/relative";
 import { Button } from "../../form/Button";
 import { DropdownMenu, type DropdownMenuItem } from "../../navigation/DropdownMenu";
 
@@ -89,12 +92,12 @@ export function buildRowActionsColumn<T extends Record<string, unknown>>(
     // so it needs room for just one or two icons.
     width: leading ? 72 : 44,
     cell: ({ row }) => (
-      <span style={{ display: "inline-flex", alignItems: "center", gap: 2, justifyContent: "flex-end" }}>
+      <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: sxRem(2), justifyContent: "flex-end" }}>
         {leading?.(row)}
         {renderRowMenu
           ? renderRowMenu(row)
           : renderAutoKebab(kebabActions, row, testIdPrefix, getRowId)}
-      </span>
+      </Box>
     ),
   };
 }
@@ -264,9 +267,9 @@ export function togglePillValues(current: string[] | undefined, value: string, c
  */
 export function cardGridTracks(targetWidth: number) {
   return {
-    gridTemplateColumns: {
+    gridTemplateColumns: (theme: Theme) => ({
       xs: "1fr",
-      sm: `repeat(auto-fill, minmax(${targetWidth}px, 1fr))`,
-    },
+      sm: `repeat(auto-fill, minmax(${rem(theme, targetWidth)}, 1fr))`,
+    }),
   };
 }