@12-apps/ui 6.35.0 → 6.37.0

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

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