@12-apps/ui 6.35.0 → 6.36.0

package/src/components/data-display/Carousel/Carousel.slide.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import type { CarouselItem, CarouselProps } from './Carousel.types';
 import { onMedia, shadowInk } from '../../../tokens/ink';
+import { rems } from '../../../tokens/relative';
 
 export interface CarouselSlideProps {
   item: CarouselItem;
@@ -33,7 +34,7 @@ const SlideCaption: React.FC<Pick<CarouselItem, 'title' | 'description' | 'conte
         variant="h5"
         sx={(theme) => ({
           color: image ? onMedia(theme) : 'text.primary',
-          textShadow: image ? `0 2px 4px ${shadowInk(theme, 0.5)}` : 'none',
+          textShadow: image ? `0 ${rems(theme, 2, 4)} ${shadowInk(theme, 0.5)}` : 'none',
           mb: 1,
         })}
       >
@@ -46,7 +47,7 @@ const SlideCaption: React.FC<Pick<CarouselItem, 'title' | 'description' | 'conte
         variant="body1"
         sx={(theme) => ({
           color: image ? onMedia(theme) : 'text.secondary',
-          textShadow: image ? `0 1px 2px ${shadowInk(theme, 0.5)}` : 'none',
+          textShadow: image ? `0 ${rems(theme, 1, 2)} ${shadowInk(theme, 0.5)}` : 'none',
         })}
       >
         {description}

package/src/components/data-display/Carousel/Carousel.styles.ts

@@ -2,29 +2,49 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { CarouselProps } from './Carousel.types';
-import { accentFor, sxRem } from '../../../tokens/scales';
+import { accentFor, rem, sxRem } from '../../../tokens/scales';
 
 type Variant = NonNullable<CarouselProps['variant']>;
 type Size = NonNullable<CarouselProps['size']>;
 type Color = NonNullable<CarouselProps['color']>;
 
-const SIZES: Record<Size, { height: number; fontSize: (theme: Theme) => string }> = {
-  xs: { height: 200, fontSize: sxRem(12) },
-  sm: { height: 300, fontSize: sxRem(14) },
-  md: { height: 400, fontSize: sxRem(16) },
-  lg: { height: 500, fontSize: sxRem(18) },
-  xl: { height: 600, fontSize: sxRem(20) },
+const SIZES: Record<Size, { height: (theme: Theme) => string; fontSize: (theme: Theme) => string }> = {
+  xs: { height: sxRem(200), fontSize: sxRem(12) },
+  sm: { height: sxRem(300), fontSize: sxRem(14) },
+  md: { height: sxRem(400), fontSize: sxRem(16) },
+  lg: { height: sxRem(500), fontSize: sxRem(18) },
+  xl: { height: sxRem(600), fontSize: sxRem(20) },
 };
 
 const sizeStyles = (size: Size) => SIZES[size] ?? SIZES.md;
 
+/**
+ * The frame's box as CSS. A numeric `height`/`width` is design px, drawn
+ * through the type scale; an unset height is the documented 400. A numeric
+ * height is taken literally; any other falls back to the size preset, since a
+ * percentage cannot resolve against an unsized parent here. A string width
+ * passes through.
+ */
+export const frameBox = (
+  theme: Theme,
+  size: Size,
+  height: number | string | undefined,
+  width: number | string,
+): { width: string; height: string } => ({
+  width: typeof width === 'number' ? rem(theme, width) : width,
+  height: typeof height === 'number' || height === undefined
+    ? rem(theme, height ?? 400)
+    : sizeStyles(size).height(theme),
+});
+
 interface ContainerStyleInput {
   theme: Theme;
   variant: Variant;
   size: Size;
   color: Color;
-  height: number | string;
-  width: number | string;
+  /** The frame's box, resolved by {@link frameBox}. */
+  height: string;
+  width: string;
   glow: boolean;
   pulse: boolean;
   glass: boolean;
@@ -39,7 +59,7 @@ interface ContainerStyleInput {
 const SURFACES: Record<Variant, (input: ContainerStyleInput) => CSSObject> = {
   glass: ({ theme, color, glass }) => ({
     backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.9),
-    backdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,
   }),
 
@@ -59,26 +79,24 @@ const SURFACES: Record<Variant, (input: ContainerStyleInput) => CSSObject> = {
 };
 
 export const containerStyles = (input: ContainerStyleInput): CSSObject => {
-  const { theme, variant, size, color, height, width, glow, pulse } = input;
+  const { theme, variant, color, height, width, glow, pulse } = input;
   const accent = accentFor(theme, color).main;
 
   return {
     position: 'relative' as const,
     width,
-    // A numeric height is taken literally; anything else falls back to the size
-    // preset, since a percentage cannot resolve against an unsized parent here.
-    height: typeof height === 'number' ? height : sizeStyles(size).height,
+    height,
     overflow: 'hidden',
     borderRadius: theme.spacing(1),
     transition: theme.transitions.create(['all'], {
       duration: theme.transitions.duration.standard,
     }),
-    ...(glow && { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` }),
+    ...(glow && { boxShadow: `0 0 ${rem(theme, 30)} ${alpha(accent, 0.4)}` }),
     ...(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)}` },
       },
     }),

package/src/components/data-display/Carousel/Carousel.tsx

@@ -11,7 +11,7 @@ import { withDefaults } from '../../../utils/withDefaults';
 import { useCarouselNavigation } from './Carousel.hooks';
 import { CarouselChrome } from './Carousel.chrome';
 import { CarouselTrack } from './Carousel.slide';
-import { containerStyles } from './Carousel.styles';
+import { containerStyles, frameBox } from './Carousel.styles';
 import type { CarouselItem, CarouselProps } from './Carousel.types';
 import { muiColor } from '../../../tokens/scales';
 
@@ -33,7 +33,6 @@ const DEFAULTS = {
   gradient: false,
   loading: false,
   disabled: false,
-  height: 400,
   width: '100%',
   pauseOnHover: true,
   indicatorPosition: 'bottom',
@@ -80,7 +79,7 @@ export const Carousel: React.FC<CarouselProps> = (props) => {
   );
 
   const frameSx = containerStyles({
-    theme, variant, size, color, height, width, glow, pulse, glass, gradient,
+    theme, variant, size, color, ...frameBox(theme, size, height, width), glow, pulse, glass, gradient,
   });
 
   if (loading) {

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

@@ -7,10 +7,10 @@ import React from 'react';
 
 import type { ChartProps } from './Chart.types';
 import { ChartContainer } from './ChartComposables';
-import { getSizeStyles, getVariantStyles } from './chart-internals';
+import { getSizeStyles, getVariantStyles, plotHeightPx } from './chart-internals';
 import { renderChartByType } from './chart-renderers';
 import { uiInk } from '../../../tokens/ink';
-import { muiColor } from '../../../tokens/scales';
+import { muiColor, rem } from '../../../tokens/scales';
 
 /**
  * Prop-driven Recharts wrapper (line/bar/area/pie/radar/scatter/composed)
@@ -97,8 +97,8 @@ export const Chart: React.FC<ChartProps> = (props) => {
       />
       <ChartContainer
         responsive={props.responsive ?? true}
-        width={props.width ?? '100%'}
-        height={props.fillHeight === true ? '100%' : sizeStyles.height}
+        width={typeof props.width === 'number' ? rem(theme, props.width) : (props.width ?? '100%')}
+        height={props.fillHeight === true ? '100%' : plotHeightPx(props.size, props.height)}
         data-testid={`${dataTestId}-container`}
       >
         {renderChartByType(props, theme)}

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}