@12-apps/ui 6.38.0 → 6.39.1

package/src/components/data-display/DataViews/data-views-overflow.ts

@@ -1,16 +1,19 @@
 "use client";
 
+import { useTheme, type Theme } from "@mui/material/styles/index.js";
 import { useRef } from "react";
 
+import { remPx } from "../../../tokens/relative";
 import { splitToFit, useMeasuredWidth } from "../../utility/Overflow";
 import {
   estimateWidth,
   furnitureCost,
-  GAP,
   isRangeSet,
   pillText,
+  pricesFor,
   RESERVED,
   rightClusterCost,
+  type Prices,
 } from "./data-views-overflow-costs";
 import type { FilterFieldConfig, RangeFieldConfig, RangeValue } from "./data-views-types";
 
@@ -118,15 +121,16 @@ function isActiveField<T extends Record<string, unknown>>(
     : isRangeSet(ranges[field.id]);
 }
 
-/** Estimated rendered width of one control at its CURRENT value. */
+/** Estimated rendered width of one control at its CURRENT value, in px at `theme`'s scale. */
 function fieldWidth<T extends Record<string, unknown>>(
+  theme: Theme,
   field: OverflowField<T>,
   pills: Record<string, string[]>,
   ranges: Record<string, RangeValue>,
 ): number {
-  if (field.group === "pill") return estimateWidth(pillText(field, pills[field.id] ?? []), 0);
-  // A bounded range renders two number inputs beside its label.
-  return estimateWidth(field.label, isRangeSet(ranges[field.id]) ? 100 : 0);
+  if (field.group === "pill") return estimateWidth(theme, pillText(field, pills[field.id] ?? []), 0);
+  // A bounded range renders two number inputs (100 design px) beside its label.
+  return estimateWidth(theme, field.label, isRangeSet(ranges[field.id]) ? 100 : 0);
 }
 
 /** What one split costs on the bar, so the ladder below can price the next step. */
@@ -147,12 +151,16 @@ function splitFilters<T extends Record<string, unknown>>(
   furniture: number,
   /** Is the bar already down to icons? "Mais" shrinks with everything else. */
   compact: boolean,
+  /** Whose type scale every price is read at — the bar's own. */
+  theme: Theme,
 ): Split<T> {
   const active = all.filter((field) => isActiveField(field, pills, ranges));
   const idle = all.filter((field) => !isActiveField(field, pills, ranges));
+  const price = pricesFor(theme);
+  const gap = remPx(theme, RESERVED.betweenControls);
 
   // "Limpar" rides the end of the cluster whenever anything is applied.
-  const clearCost = active.length > 0 ? RESERVED.clearAll + GAP : 0;
+  const clearCost = active.length > 0 ? price.clearAll + gap : 0;
   // APPLIED FIRST, BUT NOT EXEMPT.
   //
   // Applied controls take the visible slots ahead of idle ones — that part was
@@ -170,13 +178,13 @@ function splitFilters<T extends Record<string, unknown>>(
   // one part of this that is not filter-shaped, and the part a second cluster
   // in the design system would otherwise have had to reimplement.
   const split = splitToFit(all, {
-    widthOf: (field) => fieldWidth(field, pills, ranges),
+    widthOf: (field) => fieldWidth(theme, field, pills, ranges),
     keyOf: (field) => field.id,
-    gap: GAP,
+    gap,
     available: width - furniture - clearCost,
     // The overflow button at the width it will actually have, which on a phone
     // is the icon-and-badge one.
-    overflowCost: compact ? RESERVED.overflowButtonCompact : RESERVED.overflowButton,
+    overflowCost: compact ? price.overflowButtonCompact : price.overflowButton,
     priority: [...active, ...idle],
   });
   return { ...split, used: split.used + clearCost };
@@ -206,6 +214,7 @@ function computeSplit<T extends Record<string, unknown>>(
   width: number,
   /** Does the host render "Exportar" beside "Exibir"? Half the cluster if not. */
   hasExport: boolean,
+  theme: Theme,
 ): Omit<OverflowSplit<T>, "barRef"> {
   // Unmeasured (SSR, or jsdom without a ResizeObserver) ⇒ degrade nothing.
   if (width === 0) {
@@ -219,9 +228,11 @@ function computeSplit<T extends Record<string, unknown>>(
       searchTakeover: false,
     };
   }
+  const price = pricesFor(theme);
   // Pass 1 prices the furniture at its widest — no rung has been taken yet.
-  let split = splitFilters(all, pills, ranges, width, furnitureCost(UNCOLLAPSED, hasExport), false);
-  let flags = ladderFlags(split, width, hasExport);
+  let budget = furnitureCost(price, UNCOLLAPSED, hasExport);
+  let split = splitFilters(all, pills, ranges, width, budget, false, theme);
+  let flags = ladderFlags(split, width, hasExport, price);
   // RE-SPEND WHAT THE LATER RUNGS FREED.
   //
   // Rungs 2/4/5 turn 200 + 96 + 216 of furniture into 44 + 0 + 140, and until
@@ -234,13 +245,12 @@ function computeSplit<T extends Record<string, unknown>>(
   // ladder FURTHER down, and a further rung can only make the furniture
   // cheaper again — so the budget decreases monotonically and the loop exits
   // the moment it stops moving. The bound is a backstop, not the exit.
-  let budget = furnitureCost(UNCOLLAPSED, hasExport);
   for (let pass = 0; pass < 3; pass += 1) {
-    const freed = furnitureCost(flags, hasExport);
+    const freed = furnitureCost(price, flags, hasExport);
     if (freed >= budget) break;
     budget = freed;
-    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls);
-    flags = ladderFlags(split, width, hasExport);
+    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls, theme);
+    flags = ladderFlags(split, width, hasExport, price);
   }
   return { inline: split.inline, overflow: split.overflow, ...flags };
 }
@@ -253,21 +263,22 @@ function ladderFlags<T extends Record<string, unknown>>(
   split: Split<T>,
   width: number,
   hasExport: boolean,
+  price: Prices,
 ): Omit<OverflowSplit<T>, "barRef" | "inline" | "overflow"> {
   const { overflow, used } = split;
-  const base = width - used - RESERVED.chrome;
+  const base = width - used - price.chrome;
 
   // Would the search still make its minimum with the labels on?
-  const compactControls = base - RESERVED.counter - rightClusterCost(hasExport, false) < RESERVED.search;
-  const rightCost = rightClusterCost(hasExport, compactControls);
+  const compactControls = base - price.counter - rightClusterCost(price, hasExport, false) < price.search;
+  const rightCost = rightClusterCost(price, hasExport, compactControls);
   // …and with them off?
-  const searchCollapsed = base - RESERVED.counter - rightCost < RESERVED.search;
+  const searchCollapsed = base - price.counter - rightCost < price.search;
   // Everything has collapsed and the row STILL overflows. The controls cannot
   // shrink further — they are `flexShrink: 0` precisely so an over-packed row
   // sheds rather than squeezes — so without this last rung they simply paint
   // outside the toolbar, which is what a narrow phone was doing.
   const counterHidden =
-    searchCollapsed && base - RESERVED.counter - rightCost < RESERVED.searchIcon;
+    searchCollapsed && base - price.counter - rightCost < price.searchIcon;
   // Step 6 — below even that, "Limpar" leaves the bar. It is the ONLY control
   // here with a second home: the overflow panel's footer carries "Limpar todos
   // os filtros", so nothing is lost, which is exactly why it goes before the
@@ -288,14 +299,14 @@ function ladderFlags<T extends Record<string, unknown>>(
   // pushed the box under `usableSearch`, and tipped a row that had ample space
   // to share into a full takeover.
   const overflowButton = compactControls
-    ? RESERVED.overflowButtonCompact
-    : RESERVED.overflowButton;
-  const shedRoom = width - RESERVED.chrome - (overflow.length > 0 ? overflowButton : 0);
-  const searchBoxRoom = shedRoom - (counterHidden ? 0 : RESERVED.counter) - rightCost;
+    ? price.overflowButtonCompact
+    : price.overflowButton;
+  const shedRoom = width - price.chrome - (overflow.length > 0 ? overflowButton : 0);
+  const searchBoxRoom = shedRoom - (counterHidden ? 0 : price.counter) - rightCost;
   // Below this a box is too narrow to read what you typed into it, and shrinking
   // further buys nothing; that is the only point at which taking the whole
   // cluster is worth losing the filters.
-  const searchTakeover = searchCollapsed && searchBoxRoom < RESERVED.usableSearch;
+  const searchTakeover = searchCollapsed && searchBoxRoom < price.usableSearch;
 
   return { compactControls, counterHidden, searchCollapsed, clearAllHidden, searchTakeover };
 }
@@ -336,16 +347,19 @@ export function useFilterOverflow<T extends Record<string, unknown>>(
   // first measurement lands (and forever under SSR or jsdom), which
   // `computeSplit` reads as "degrade nothing".
   const { ref: barRef, width } = useMeasuredWidth<HTMLDivElement>();
+  // The prices follow the theme's type scale, so the answer does too.
+  const theme = useTheme();
   const signature = JSON.stringify({
     ids: all.map((field) => field.id),
     pills,
     ranges,
     width,
     hasExport,
+    scale: remPx(theme, 1),
   });
   const cache = useRef<{ signature: string; split: ReturnType<typeof computeSplit<T>> } | null>(null);
   if (cache.current === null || (!frozen && cache.current.signature !== signature)) {
-    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport) };
+    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport, theme) };
   }
   return { ...cache.current.split, barRef };
 }

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

@@ -91,7 +91,7 @@ const SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {
       height={styleLength(theme, props.height || 200)}
       animation={props.skeletonProps.animation || 'pulse'}
       intensity={props.skeletonProps.intensity}
-      borderRadius={props.borderRadius}
+      borderRadius={styleLength(theme, props.borderRadius)}
       data-testid={`${props['data-testid']}-skeleton`}
     />
   );
@@ -169,7 +169,7 @@ const ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {
 
   return (
     <FallbackContainer
-      sx={{ width: sxLength(theme, width), height: sxLength(theme, height), borderRadius }}
+      sx={{ width: sxLength(theme, width), height: sxLength(theme, height), borderRadius: styleLength(theme, borderRadius) }}
       data-testid={`${testId}-fallback`}
     >
       {fallback}
@@ -211,7 +211,9 @@ export const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps)
       sx={{
         width: sxLength(theme, width || 'auto'),
         height: sxLength(theme, height || 'auto'),
-        borderRadius,
+        // The same px length the image gets (`metrics`): in `sx` a bare number
+        // would be a multiple of `shape.borderRadius`, and this box clips (FUT-2656).
+        borderRadius: metrics.borderRadius,
       }}
       data-testid={testId}
     >

package/src/components/data-display/LazyImage/LazyImage.types.ts

@@ -63,7 +63,9 @@ export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement
   objectPosition?: string;
 
   /**
-   * Border radius (number in pixels or CSS string)
+   * Border radius: a number is design px, scaled with the theme's type scale,
+   * and rounds the image, its clipping box, its skeleton and its fallback alike;
+   * a string is any CSS length and passes through untouched.
    */
   borderRadius?: number | string;
 

package/src/components/data-display/MapPreview/MapTiles.tsx

@@ -2,12 +2,14 @@ import { alpha, useTheme } from '@mui/material/styles/index.js';
 import type { FC } from 'react';
 import React from 'react';
 
-import { TILE_SIZE } from './mapProjection';
+import { rem } from '../../../tokens/relative';
+
+import { TILE_WORLD_UNITS } from './mapProjection';
 import { tileBackground } from './mapSurface';
 import type { MapType } from './MapPreview.types';
 
 // Two extra rows and columns so panning does not expose an edge.
-const VISIBLE_TILES = Math.ceil(800 / TILE_SIZE) + 2;
+const VISIBLE_TILES = Math.ceil(800 / TILE_WORLD_UNITS) + 2;
 // Tile coordinates are only legible once the grid is reasonably fine.
 const LABEL_MIN_ZOOM = 10;
 
@@ -23,6 +25,9 @@ export const MapTiles: FC<MapTilesProps> = ({ origin, zoom, mapType, panOffset }
   const borderOpacity = theme.palette.mode === 'dark' ? 0.15 : 0.1;
   const background = tileBackground(mapType, theme);
   const half = Math.floor(VISIBLE_TILES / 2);
+  // A tile is drawn at one design px per world unit, through the type scale.
+  const tile = rem(theme, TILE_WORLD_UNITS);
+  const grid = rem(theme, TILE_WORLD_UNITS * VISIBLE_TILES);
 
   return (
     <div
@@ -30,12 +35,14 @@ export const MapTiles: FC<MapTilesProps> = ({ origin, zoom, mapType, panOffset }
         position: 'absolute',
         top: '50%',
         left: '50%',
+        // The pan is pointer pixels dragged, so it stays px: the grid follows
+        // the cursor exactly, whatever the type scale.
         transform: `translate(calc(-50% + ${panOffset.x}px), calc(-50% + ${panOffset.y}px))`,
-        width: TILE_SIZE * VISIBLE_TILES,
-        height: TILE_SIZE * VISIBLE_TILES,
+        width: grid,
+        height: grid,
         display: 'grid',
-        gridTemplateColumns: `repeat(${VISIBLE_TILES}, ${TILE_SIZE}px)`,
-        gridTemplateRows: `repeat(${VISIBLE_TILES}, ${TILE_SIZE}px)`,
+        gridTemplateColumns: `repeat(${VISIBLE_TILES}, ${tile})`,
+        gridTemplateRows: `repeat(${VISIBLE_TILES}, ${tile})`,
         transition: 'transform 0.1s ease-out',
       }}
     >
@@ -48,14 +55,14 @@ export const MapTiles: FC<MapTilesProps> = ({ origin, zoom, mapType, panOffset }
           <div
             key={`tile-${tileX}-${tileY}`}
             style={{
-              width: TILE_SIZE,
-              height: TILE_SIZE,
+              width: tile,
+              height: tile,
               border: `1px solid ${alpha(theme.palette.divider, borderOpacity)}`,
               background,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              fontSize: '10px',
+              fontSize: rem(theme, 10),
               color: alpha(theme.palette.text.secondary, 0.3),
               fontFamily: 'monospace',
               userSelect: 'none',

package/src/components/data-display/MapPreview/mapProjection.ts

@@ -1,4 +1,9 @@
-export const TILE_SIZE = 256;
+/**
+ * One tile's extent in Web Mercator's world units at zoom 0 — the projection's
+ * own coordinate space, not a drawn length: the tile index it yields is the
+ * same at any drawn size. `MapTiles` draws one world unit as one design px.
+ */
+export const TILE_WORLD_UNITS = 256;
 
 // Metres covered by one pixel at zoom 0 on the equator; each zoom level halves it.
 const EQUATOR_METRES_PER_PIXEL = 156543.03392;
@@ -12,8 +17,8 @@ const project = (lat: number, lng: number) => {
   const boundedSiny = Math.max(-0.9999, Math.min(0.9999, siny));
 
   return {
-    x: TILE_SIZE * (0.5 + lng / 360),
-    y: TILE_SIZE * (0.5 - Math.log((1 + boundedSiny) / (1 - boundedSiny)) / (4 * Math.PI)),
+    x: TILE_WORLD_UNITS * (0.5 + lng / 360),
+    y: TILE_WORLD_UNITS * (0.5 - Math.log((1 + boundedSiny) / (1 - boundedSiny)) / (4 * Math.PI)),
   };
 };
 
@@ -22,8 +27,8 @@ export const getTileCoordinates = (lat: number, lng: number, zoom: number) => {
   const world = project(lat, lng);
 
   return {
-    x: Math.floor(Math.floor(world.x * scale) / TILE_SIZE),
-    y: Math.floor(Math.floor(world.y * scale) / TILE_SIZE),
+    x: Math.floor(Math.floor(world.x * scale) / TILE_WORLD_UNITS),
+    y: Math.floor(Math.floor(world.y * scale) / TILE_WORLD_UNITS),
   };
 };
 

package/src/components/data-display/Table/Table.helpers.ts

@@ -1,5 +1,12 @@
 import type { TableProps } from './Table.types';
 
+/**
+ * A virtualised row's height in design px: the caller's `rowHeight`, else 52.
+ * Resolved here rather than in {@link TABLE_DEFAULTS} so the one number is read
+ * where it is drawn (`rem`) and where the window is positioned with it (`remPx`).
+ */
+export const tableRowHeight = (rowHeight: number | undefined): number => rowHeight ?? 52;
+
 export const TABLE_DEFAULTS: Partial<TableProps> = {
   variant: 'default',
   stripeColor: 'neutral',
@@ -13,7 +20,6 @@ export const TABLE_DEFAULTS: Partial<TableProps> = {
   selectedRows: [],
   sortable: false,
   virtualScrolling: false,
-  rowHeight: 52,
   overscan: 5,
   responsive: false,
   showColumnToggle: true,

package/src/components/data-display/Table/Table.hooks.ts

@@ -2,22 +2,31 @@ import { useTheme } from '@mui/material/styles/index.js';
 import useMediaQuery from '@mui/material/useMediaQuery/index.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { rem, remPx } from '../../../tokens/relative';
+
 import type { ColumnConfig, TableProps } from './Table.types';
 
+/**
+ * The virtual window. `rowHeight` and `containerHeight` are design px: the
+ * window is computed in the px `scrollTop` is measured in (`remPx`), and what it
+ * hands back to draw with stays in design px (`offsetY`) or is CSS already
+ * (`totalHeight`), so the rows and the window share one pitch at any type scale.
+ */
 export const useVirtualScrolling = (
   data: Record<string, unknown>[],
   rowHeight: number,
   containerHeight: number,
   overscan: number = 5
 ) => {
+  const theme = useTheme();
   const [scrollTop, setScrollTop] = useState(0);
   
   const visibleItems = useMemo(() => {
-    const visibleHeight = containerHeight;
-    const startIndex = Math.floor(scrollTop / rowHeight);
+    const pitch = remPx(theme, rowHeight);
+    const startIndex = Math.floor(scrollTop / pitch);
     const endIndex = Math.min(
       data.length,
-      Math.ceil((scrollTop + visibleHeight) / rowHeight)
+      Math.ceil((scrollTop + remPx(theme, containerHeight)) / pitch)
     );
     
     const start = Math.max(0, startIndex - overscan);
@@ -27,10 +36,12 @@ export const useVirtualScrolling = (
       startIndex: start,
       endIndex: end,
       items: data.slice(start, end),
-      totalHeight: data.length * rowHeight,
+      /** Every row at the scaled pitch, as CSS. */
+      totalHeight: rem(theme, data.length * rowHeight),
+      /** Where the first mounted row sits, in design px. */
       offsetY: start * rowHeight,
     };
-  }, [data, rowHeight, containerHeight, scrollTop, overscan]);
+  }, [data, rowHeight, containerHeight, scrollTop, overscan, theme]);
 
   const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
     setScrollTop(e.currentTarget.scrollTop);

package/src/components/data-display/Table/Table.types.ts

@@ -22,7 +22,9 @@ export interface ColumnConfig {
   label: string;
   sortable?: boolean;
   filterable?: boolean;
+  /** A number is design px, scaled with the theme's type scale; a string is used as given. */
   width?: number | string;
+  /** Design px, scaled with the theme's type scale. */
   minWidth?: number;
   priority?: number; // 1 = highest priority, higher numbers = lower priority
   align?: 'left' | 'center' | 'right';
@@ -191,7 +193,8 @@ export interface TableProps extends Omit<MuiTableProps, 'variant'> {
   virtualScrolling?: boolean;
   
   /**
-   * Height of each row for virtual scrolling (required if virtualScrolling is true)
+   * Height of each row for virtual scrolling (default 52) — design px, scaled
+   * with the theme's type scale.
    */
   rowHeight?: number;
   
@@ -226,7 +229,8 @@ export interface TableProps extends Omit<MuiTableProps, 'variant'> {
   showColumnToggle?: boolean;
   
   /**
-   * Container height for virtual scrolling
+   * Container height for virtual scrolling (default 400). A number is design
+   * px, scaled with the theme's type scale; a string is used as given.
    */
   containerHeight?: number | string;
   

package/src/components/data-display/Table/TableParts.tsx

@@ -5,8 +5,12 @@ import TableCell from '@mui/material/TableCell/index.js';
 import TableHead from '@mui/material/TableHead/index.js';
 import TableRow from '@mui/material/TableRow/index.js';
 import TableSortLabel from '@mui/material/TableSortLabel/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
 import React, { useCallback } from 'react';
 
+import { rem } from '../../../tokens/relative';
+
+import { tableRowHeight } from './Table.helpers';
 import { useVirtualScrolling } from './Table.hooks';
 import { useTableRowRenderer } from './TableParts.hooks';
 import type { ColumnConfig, TableBodyProps, TableHeaderProps } from './Table.types';
@@ -23,6 +27,10 @@ const ariaSortFor = (
   return direction === 'asc' ? 'ascending' : 'descending';
 };
 
+/** A column's `width`/`minWidth` as CSS: a number is design px, a string as given. */
+const columnLength = (theme: Theme, value: number | string | undefined): string | undefined =>
+  typeof value === 'number' ? rem(theme, value) : value;
+
 // One header cell. Sorting is offered when the table is sortable and the column
 // has not opted out; aria-sort mirrors the visible indicator.
 const HeaderCell: React.FC<{
@@ -31,13 +39,17 @@ const HeaderCell: React.FC<{
   sortConfig?: { key: string; direction: 'asc' | 'desc' };
   onSort: (columnKey: string) => void;
 }> = ({ column, sortable, sortConfig, onSort }) => {
+  const theme = useTheme();
   const canSort = Boolean(sortable) && column.sortable !== false;
   const isSorted = sortConfig?.key === column.key;
 
   return (
     <TableCell
       align={column.align || 'left'}
-      style={{ minWidth: column.minWidth, width: column.width }}
+      style={{
+        minWidth: columnLength(theme, column.minWidth),
+        width: columnLength(theme, column.width),
+      }}
       aria-sort={ariaSortFor(canSort, isSorted, sortConfig?.direction)}
     >
       {canSort ? (
@@ -120,10 +132,12 @@ export const TableDataRow: React.FC<{
   rowData: Record<string, unknown>;
   rowKey: string | number;
   index: number;
+  /** Where a virtualised row sits, in design px — drawn through `rem`, like its height. */
   offsetY: number;
   columns: ColumnConfig[];
   selected: boolean;
   selectable?: boolean;
+  /** Design px; 52 when unset (`tableRowHeight`). */
   rowHeight?: number;
   onRowClick?: TableBodyProps['onRowClick'];
   onRowFocus?: TableBodyProps['onRowFocus'];
@@ -145,8 +159,9 @@ export const TableDataRow: React.FC<{
   onRowBlur,
   onSelect,
   virtualScrolling,
-  renderCell }) => (
-
+  renderCell }) => {
+  const theme = useTheme();
+  return (
       <TableRow
         key={String(rowKey)}
         selected={selected}
@@ -155,12 +170,12 @@ export const TableDataRow: React.FC<{
         onFocus={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowFocus?.(event, rowData)}
         onBlur={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowBlur?.(event, rowData)}
         style={virtualScrolling ? { 
-          transform: `translateY(${offsetY}px)`,
+          transform: `translateY(${rem(theme, offsetY)})`,
           position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
-          height: rowHeight } : undefined}
+          height: rem(theme, tableRowHeight(rowHeight)) } : undefined}
       >
         {selectable && (
           <TableCell padding="checkbox">
@@ -186,16 +201,19 @@ export const TableDataRow: React.FC<{
           );
         })}
       </TableRow>
-);
+  );
+};
 
 // Only the rows in view are rendered, positioned by absolute offset inside a
-// spacer sized to the full data set.
+// spacer sized to the full data set. `rowHeight`, `containerHeight` and every
+// offset are design px, drawn through `rem`.
 const VirtualisedBody: React.FC<{
   visibleItems: {
     items: Record<string, unknown>[];
     startIndex: number;
     offsetY: number;
-    totalHeight: number;
+    /** As CSS. */
+    totalHeight: string;
   };
   rowHeight: number;
   containerHeight: number;
@@ -205,12 +223,13 @@ const VirtualisedBody: React.FC<{
     index: number,
     offsetY?: number,
   ) => React.ReactNode;
-}> = ({ visibleItems, rowHeight, containerHeight, onScroll, renderTableRow }) => (
-
+}> = ({ visibleItems, rowHeight, containerHeight, onScroll, renderTableRow }) => {
+  const theme = useTheme();
+  return (
     <Box
       onScroll={onScroll}
       style={{
-        height: containerHeight,
+        height: rem(theme, containerHeight),
         overflow: 'auto',
         position: 'relative' }}
     >
@@ -224,8 +243,8 @@ const VirtualisedBody: React.FC<{
         )}
       </TableBody>
     </Box>
-  
-);
+  );
+};
 
 const PlainBody: React.FC<{
   data: TableBodyProps['data'];
@@ -238,35 +257,12 @@ const PlainBody: React.FC<{
 );
 
 // Enhanced Table Body Component  
-export const EnhancedTableBody: React.FC<TableBodyProps> = React.memo(({
-  data,
-  columns,
-  selectedRows = [],
-  onRowClick,
-  onRowFocus,
-  onRowBlur,
-  onSelectionChange,
-  rowKeyExtractor,
-  selectable,
-  renderRow,
-  renderCell,
-  virtualScrolling,
-  containerHeight,
-  rowHeight,
-  overscan = 5 }) => {
-  const renderTableRow = useTableRowRenderer({
-    columns,
-    selectedRows,
-    onRowClick,
-    onRowFocus,
-    onRowBlur,
-    onSelectionChange,
-    rowKeyExtractor,
-    selectable,
-    renderRow,
-    renderCell,
-    virtualScrolling,
-    rowHeight });
+export const EnhancedTableBody: React.FC<TableBodyProps> = React.memo((props) => {
+  const { data, virtualScrolling, containerHeight, overscan = 5 } = props;
+  // The row renderer takes the body's own props; its `rowHeight` stays the
+  // caller's design px, and the row resolves the default where it draws it.
+  const renderTableRow = useTableRowRenderer({ ...props, selectedRows: props.selectedRows ?? [] });
+  const rowHeight = tableRowHeight(props.rowHeight);
 
   const { visibleItems, handleScroll } = useVirtualScrolling(
     data, 

package/src/components/form/Calendar/Calendar.tsx

@@ -3,6 +3,8 @@ import Box from '@mui/material/Box/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import React from 'react';
 
+import { rem, sxRem } from '../../../tokens/relative';
+
 import { resolveCalendarProps } from './Calendar.helpers';
 import { useCalendar } from './Calendar.hooks';
 import type { CalendarProps } from './Calendar.types';
@@ -16,9 +18,9 @@ const containerSx = (monthsToShow: number): SxProps<Theme> => ({
   gap: 3,
   outline: 'none',
   '&:focus-within': {
-    outline: '2px solid',
+    outline: (theme: Theme) => `${rem(theme, 2)} solid`,
     outlineColor: 'primary.main',
-    outlineOffset: 2,
+    outlineOffset: sxRem(2),
   },
 });
 

package/src/components/form/Calendar/CalendarDay.tsx

@@ -3,9 +3,12 @@ import Box from '@mui/material/Box/index.js';
 import type { FC } from 'react';
 import React from 'react';
 
+import { rem, sxRem } from '../../../tokens/relative';
+
 import type { DayRenderArgs } from './Calendar.types';
 
-const CELL_SIZE = 40;
+/** A day cell's edge, 40 design px through the theme's type scale. */
+const CELL_SIZE = sxRem(40);
 
 interface DayState extends DayRenderArgs {
   outside: boolean;
@@ -72,9 +75,9 @@ const dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({
     backgroundColor: hoverBackgroundFor(day),
   },
   '&:focus': {
-    outline: '2px solid',
+    outline: (theme: Theme) => `${rem(theme, 2)} solid`,
     outlineColor: 'primary.main',
-    outlineOffset: 1,
+    outlineOffset: sxRem(1),
   },
 });