@12-apps/ui 6.36.0 → 6.38.0

package/src/components/layout/ScrollArea/ScrollArea.tsx

@@ -4,11 +4,15 @@ import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Fab from '@mui/material/Fab/index.js';
 import Zoom from '@mui/material/Zoom/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import type { FC } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import { rem, sxRem } from '../../../tokens/relative';
+
 import type { ResolvedScrollAreaProps } from './ScrollArea.helpers';
 import { resolveScrollAreaProps } from './ScrollArea.helpers';
+import { sizeCss } from './ScrollArea.styles';
 import type { ScrollAreaProps } from './ScrollArea.types';
 import { ScrollAreaContent } from './ScrollAreaContent';
 import { ScrollViewport } from './ScrollViewport';
@@ -175,13 +179,13 @@ const ScrollToTopFab: FC<{
         onClick={onClick}
         sx={{
           position: 'absolute',
-          bottom: 16,
-          right: 16,
+          bottom: sxRem(16),
+          right: sxRem(16),
           zIndex: 1,
           backgroundColor: glass
             ? alpha(theme.palette.primary.main, 0.2)
             : theme.palette.primary.main,
-          backdropFilter: glass ? 'blur(10px)' : 'none',
+          backdropFilter: glass ? `blur(${rem(theme, 10)})` : 'none',
           '&:hover': {
             backgroundColor: glass
               ? alpha(theme.palette.primary.main, 0.3)
@@ -193,16 +197,33 @@ const ScrollToTopFab: FC<{
   );
 };
 
+/** The outer box: its size props through the type scale, then the caller's `sx`. */
+function outerBoxSx(
+  theme: Theme,
+  size: Pick<ScrollAreaProps, 'width' | 'height' | 'maxHeight' | 'maxWidth'>,
+  sx: ScrollAreaProps['sx'],
+): SxProps<Theme> {
+  return {
+    position: 'relative',
+    width: sizeCss(theme, size.width),
+    height: sizeCss(theme, size.height),
+    maxHeight: sizeCss(theme, size.maxHeight),
+    maxWidth: sizeCss(theme, size.maxWidth),
+    ...sx,
+  } as SxProps<Theme>;
+}
+
 export const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {
+  const theme = useTheme();
   const resolved = resolveScrollAreaProps(componentProps);
   const {
     regionLabel,
     scrollToTopLabel,
     children,
-    width,
-    height,
-    maxHeight,
-    maxWidth,
+    width: _width,
+    height: _height,
+    maxHeight: _maxHeight,
+    maxWidth: _maxWidth,
     orientation: _orientation,
     scrollbarSize: _scrollbarSize,
     autoHide,
@@ -226,14 +247,8 @@ export const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {
     ...props
   } = resolved;
 
-  const {
-    scrollRef,
-    setScrollRef,
-    isScrolling,
-    showScrollToTop,
-    containerDimensions,
-    handleScroll,
-    scrollToTop } = useScrollArea({ ...resolved, externalScrollRef });
+  const { scrollRef, setScrollRef, isScrolling, showScrollToTop, containerDimensions, handleScroll, scrollToTop } =
+    useScrollArea({ ...resolved, externalScrollRef });
 
   // Auto-hide keeps the scrollbar out of the way until the user is scrolling.
   const shouldShowScrollbar = alwaysShowScrollbar || !autoHide || isScrolling;
@@ -241,7 +256,7 @@ export const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {
   return (
     <Box
       data-testid={testId}
-      sx={{ position: 'relative', width, height, maxHeight, maxWidth, ...sx }}
+      sx={outerBoxSx(theme, resolved, sx)}
       {...props}
     >
       <ScrollViewport

package/src/components/layout/ScrollArea/ScrollAreaContent.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '@mui/material/styles/index.js';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 
-const EMPTY_MIN_HEIGHT = 200;
+import { rem } from '../../../tokens/relative';
 
 const EmptyState: FC<{ children: ReactNode }> = ({ children }) => {
   const theme = useTheme();
@@ -15,7 +15,7 @@ const EmptyState: FC<{ children: ReactNode }> = ({ children }) => {
         alignItems: 'center',
         justifyContent: 'center',
         height: '100%',
-        minHeight: EMPTY_MIN_HEIGHT,
+        minHeight: rem(theme, 200),
         color: theme.palette.text.secondary,
       }}
     >

package/src/components/layout/ScrollArea/ScrollViewport.tsx

@@ -3,7 +3,9 @@ import { useTheme } from '@mui/material/styles/index.js';
 import type { FC, ReactNode, UIEvent } from 'react';
 import React from 'react';
 
-import { getOverflowStyle, getVariantStyles } from './ScrollArea.styles';
+import { rem } from '../../../tokens/relative';
+
+import { getOverflowStyle, getVariantStyles, sizeCss } from './ScrollArea.styles';
 import type { ResolvedScrollAreaProps } from './ScrollArea.helpers';
 
 export interface ScrollViewportProps
@@ -63,7 +65,7 @@ export const ScrollViewport: FC<ScrollViewportProps> = ({
         width: '100%',
         height: '100%',
         // Use an explicit maxHeight when height is 'auto', else inherit.
-        maxHeight: height === 'auto' && maxHeight ? maxHeight : '100%',
+        maxHeight: height === 'auto' && maxHeight ? sizeCss(theme, maxHeight) : '100%',
         padding: contentPadding,
         opacity: loading ? 0.5 : 1,
         pointerEvents: disabled || loading ? 'none' : 'auto',
@@ -71,8 +73,8 @@ export const ScrollViewport: FC<ScrollViewportProps> = ({
         '&:focus': {
           outline: 'none',
           '&:focus-visible': {
-            outline: `2px solid ${theme.palette.primary.main}`,
-            outlineOffset: -2,
+            outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,
+            outlineOffset: rem(theme, -2),
           },
         },
         ...getOverflowStyle({ disabled, orientation }),

package/src/components/layout/Separator/Separator.styles.ts

@@ -6,6 +6,8 @@ import type {
   SeparatorSize,
   SeparatorVariant,
 } from './Separator.types';
+import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';
+import { rem } from '../../../tokens/relative';
 
 const THICKNESS_PX: Record<SeparatorSize, number> = {
   xs: 1,
@@ -59,7 +61,7 @@ const gradientBackground = (
 // a parent's border shorthand cannot leak through.
 const borderEdges = (
   isHorizontal: boolean,
-  thickness: number,
+  thickness: string,
   style: 'dashed' | 'dotted' | 'solid',
   color: string,
 ): CSSObject => {
@@ -90,41 +92,60 @@ const borderEdges = (
 type SeparatorStyleArgs = Required<
   Pick<SeparatorProps, 'variant' | 'orientation' | 'size'>
 > &
-  Pick<SeparatorProps, 'color' | 'margin' | 'length'>;
+  Pick<SeparatorProps, 'color' | 'length'> & {
+    /** From {@link separatorBlockMargin}, which both the plain and the labelled separator read. */
+    blockMargin: string;
+  };
 
 /**
  * The separator's margin, on the axis it separates along only: above and below
  * a horizontal rule, either side of a vertical one. A margin given as a string
- * carries its own units; a number is pixels.
+ * carries its own units; a number is design px, through the type scale.
  *
  * The LABELLED separator uses this too. It used to hand the number straight to
  * `sx.margin`, where a number is SPACING UNITS — `md`'s 16 drew 128px on all
  * four sides, against 16px above and below for the unlabelled one.
  */
 export const separatorBlockMargin = (
+  theme: Theme,
   size: SeparatorSize,
   margin: number | string | undefined,
   isHorizontal: boolean,
 ): string => {
   const value = separatorMargin(size, margin);
-  const length = typeof value === 'string' ? value : `${value}px`;
+  const length = typeof value === 'string' ? value : rem(theme, value);
   return isHorizontal ? `${length} 0` : `0 ${length}`;
 };
 
+/**
+ * The rule's extent along its axis. It lands in `sx`, which reads a number of 1
+ * or less as a fraction of the parent, and that stays so; any other number is
+ * design px, through the type scale. Unset (or `0`/`''`) is the full run.
+ */
+const ruleLength = (theme: Theme, length: SeparatorProps['length']): string => {
+  if (!length) return '100%';
+  if (typeof length === 'string') return length;
+  return length <= 1 ? `${length * 100}%` : rem(theme, length);
+};
+
 export const separatorStyles = (
   theme: Theme,
-  { variant, orientation, size, color, margin, length }: SeparatorStyleArgs,
+  { variant, orientation, size, color, blockMargin, length }: SeparatorStyleArgs,
 ): CSSObject => {
   const isHorizontal = orientation === 'horizontal';
-  const thickness = separatorThickness(size);
+  // `xs` is the 1px hairline: it stays one device-independent pixel at every
+  // root size, like every other hairline in the package; heavier rules scale.
+  const thicknessPx = separatorThickness(size);
+  const thickness = thicknessPx === FIELD_BORDER_WIDTH ? `${FIELD_BORDER_WIDTH}px` : rem(theme, thicknessPx);
+  const along = ruleLength(theme, length);
   const resolvedColor = color || theme.palette.divider;
 
   const baseStyles: CSSObject = {
     display: 'flex',
     alignItems: 'center',
-    margin: separatorBlockMargin(size, margin, isHorizontal),
-    width: isHorizontal ? length || '100%' : `${thickness}px`,
-    height: isHorizontal ? `${thickness}px` : length || '100%',
+    margin: blockMargin,
+    width: isHorizontal ? along : thickness,
+    height: isHorizontal ? thickness : along,
     boxSizing: 'border-box',
   };
 

package/src/components/layout/Separator/Separator.tsx

@@ -18,10 +18,11 @@ export const Separator: React.FC<SeparatorProps> = ({
   'data-testid': dataTestId,
 }) => {
   const theme = useTheme();
-  const styles = separatorStyles(theme, { variant, orientation, size, color, margin, length });
+  const isHorizontal = orientation === 'horizontal';
+  const blockMargin = separatorBlockMargin(theme, size, margin, isHorizontal);
+  const styles = separatorStyles(theme, { variant, orientation, size, color, blockMargin, length });
 
   if (children) {
-    const isHorizontal = orientation === 'horizontal';
     // The rules either side of the label sit INSIDE the row, which carries the
     // margin; their own would add it a second time.
     const ruleStyles = { ...styles, margin: 0 };
@@ -36,7 +37,7 @@ export const Separator: React.FC<SeparatorProps> = ({
         sx={{
           display: 'flex',
           alignItems: 'center',
-          margin: separatorBlockMargin(size, margin, isHorizontal),
+          margin: blockMargin,
           flexDirection: isHorizontal ? 'row' : 'column',
           gap: theme.spacing(2),
         }}

package/src/components/layout/SettingsLayout/SettingsLayout.items.tsx

@@ -8,9 +8,11 @@ import ListItemIcon from '@mui/material/ListItemIcon/index.js';
 import ListItemText from '@mui/material/ListItemText/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { atLeastRail, TOUCH_TARGET } from './SettingsLayout.styles';
+import { rem } from '../../../tokens/relative';
 import { SettingsStatusMarker } from './SettingsStatusMarker';
 import type {
   SettingsLayoutProps,
@@ -84,7 +86,7 @@ export function SettingsRailItem({
   // below the breakpoint. Above it, the row goes back to rail density.
   const touchFloor =
     variant === 'drilldown'
-      ? { minHeight: TOUCH_TARGET, [atLeastRail(theme, breakpoint)]: { minHeight: 'auto' } }
+      ? { minHeight: rem(theme, TOUCH_TARGET), [atLeastRail(theme, breakpoint)]: { minHeight: 'auto' } }
       : null;
   const shared = {
     'data-testid': `${testIdPrefix}-item-${item.id}`,
@@ -161,7 +163,7 @@ interface RailGroupProps extends RailShape {
  * the rail column never does, so the second column is undone at exactly the
  * width where this stops being the page.
  */
-function indexListSx(shape: RailShape) {
+function indexListSx(shape: RailShape): Extract<SxProps<Theme>, (theme: Theme) => unknown> | null {
   if (shape.variant !== 'drilldown' || !shape.atIndex) return null;
   return (theme: import('@mui/material').Theme) => ({
     display: 'grid',

package/src/components/layout/SettingsLayout/SettingsLayout.rail.tsx

@@ -10,7 +10,8 @@ import Typography from '@mui/material/Typography/index.js';
 import React from 'react';
 
 import { SettingsRailGroup, type RailShape } from './SettingsLayout.items';
-import { atLeastRail, displayAcrossRail, RAIL_WIDTH, TOUCH_TARGET } from './SettingsLayout.styles';
+import { atLeastRail, displayAcrossRail, railWidth, TOUCH_TARGET } from './SettingsLayout.styles';
+import { rem, sxRem } from '../../../tokens/relative';
 import type {
   SettingsEmptySearchAction,
   SettingsLayoutProps,
@@ -54,7 +55,7 @@ function SettingsRailToggle({
         justifyContent: 'space-between',
         gap: 1,
         width: '100%',
-        minHeight: TOUCH_TARGET,
+        minHeight: rem(theme, TOUCH_TARGET),
         px: 1.5,
         py: 1,
         mb: 1,
@@ -116,7 +117,7 @@ function SettingsSearchEmpty({
             action.onClear?.();
           }}
           data-testid={`${testIdPrefix}-empty-action`}
-          sx={{ mt: 1.5, minHeight: TOUCH_TARGET }}
+          sx={{ mt: 1.5, minHeight: sxRem(TOUCH_TARGET) }}
         >
           {action.label}
         </Button>
@@ -248,8 +249,8 @@ export function SettingsRail({
         width: '100%',
         [atLeastRail(theme, breakpoint)]: {
           display: 'block',
-          flex: `0 0 ${RAIL_WIDTH}px`,
-          width: RAIL_WIDTH,
+          flex: `0 0 ${railWidth(theme)}`,
+          width: railWidth(theme),
           borderRight: `1px solid ${theme.palette.divider}`,
           pr: 2,
           // Its own scrollbar, so a settings area with twenty categories does

package/src/components/layout/SettingsLayout/SettingsLayout.styles.ts

@@ -1,17 +1,19 @@
-import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+import type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';
+
+import { rem, sxRem } from '../../../tokens/relative';
 
 import type { SettingsNavStatus, SettingsRailBreakpoint } from './SettingsLayout.types';
 
-/** Fixed width of the left navigation rail once it has its own column. */
-export const RAIL_WIDTH = 300;
+/** Fixed width of the left navigation rail once it has its own column (300 design px). */
+export const railWidth = (theme: Theme): string => rem(theme, 300);
 
 /** Visually hidden, still read aloud — for text a marker's colour cannot carry. */
-export const SR_ONLY_SX: CSSObject = {
+export const SR_ONLY_SX: SxProps<Theme> = {
   position: 'absolute',
-  width: '1px',
-  height: '1px',
+  width: sxRem(1),
+  height: sxRem(1),
   padding: 0,
-  margin: '-1px',
+  margin: sxRem(-1),
   overflow: 'hidden',
   clip: 'rect(0, 0, 0, 0)',
   whiteSpace: 'nowrap',

package/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Box from '@mui/material/Box/index.js';
-import type { Theme } from '@mui/material/styles/index.js';
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import React, { useMemo, useState } from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';
@@ -47,7 +47,7 @@ const DEFAULTS = {
 } satisfies Partial<SettingsLayoutProps>;
 
 /** Stacked below the rail's breakpoint, two columns at and above it. */
-function shellSx(breakpoint: SettingsLayoutProps['railBreakpoint'], fillHeight: boolean) {
+function shellSx(breakpoint: SettingsLayoutProps['railBreakpoint'], fillHeight: boolean): SxProps<Theme> {
   return (theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column' as const,

package/src/components/layout/SettingsLayout/SettingsPanel.tsx

@@ -66,7 +66,7 @@ function BackLink({
         ...displayAcrossRail(theme, breakpoint, "inline-flex", "none"),
         alignItems: "center",
         gap: 0.5,
-        minHeight: TOUCH_TARGET,
+        minHeight: rem(theme, TOUCH_TARGET),
         pr: 1,
         textDecoration: "none",
         color: "text.secondary",

package/src/components/layout/SettingsLayout/SettingsSectionChips.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useRef, type RefObject } from 'react';
 
 import { SettingsStatusMarker } from './SettingsStatusMarker';
 import { TOUCH_TARGET } from './SettingsLayout.styles';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /**
  * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.
@@ -15,7 +15,7 @@ import { rem } from '../../../tokens/relative';
  * with the least room for either, so the pill is sized to its text rather than
  * to the thumb — and the thumb is served by the hit area instead.
  */
-const CHIP_HEIGHT = 34;
+const CHIP_HEIGHT = sxRem(34);
 import type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';
 
 export interface SettingsSectionChipsProps {
@@ -146,7 +146,7 @@ function SectionChip({
           insetInlineEnd: 0,
           top: '50%',
           transform: 'translateY(-50%)',
-          height: TOUCH_TARGET,
+          height: rem(theme, TOUCH_TARGET),
         },
       }}
     >

package/src/components/layout/SettingsLayout/SettingsSectionHeader.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { displayAcrossRail, TOUCH_TARGET } from './SettingsLayout.styles';
 import type { SettingsLayoutProps, SettingsRailBreakpoint } from './SettingsLayout.types';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** One line that must not wrap, whatever the section is called. */
 const CLIP = {
@@ -142,8 +142,8 @@ export function SettingsSectionHeader({
           display: 'inline-flex',
           alignItems: 'center',
           justifyContent: 'center',
-          width: TOUCH_TARGET,
-          height: TOUCH_TARGET,
+          width: rem(theme, TOUCH_TARGET),
+          height: rem(theme, TOUCH_TARGET),
           border: 1,
           borderColor: 'divider',
           borderRadius: 2,

package/src/components/layout/SettingsLayout/SettingsStatusMarker.tsx

@@ -61,8 +61,8 @@ export function SettingsStatusMarker({
       <Box
         component="span"
         sx={{
-          width: 8,
-          height: 8,
+          width: sxRem(8),
+          height: sxRem(8),
           borderRadius: '50%',
           flex: '0 0 auto',
           bgcolor: STATUS_COLOR[status],

package/src/components/layout/Sidebar/Sidebar.tsx

@@ -1,5 +1,6 @@
 import Box from '@mui/material/Box/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type {
@@ -9,14 +10,22 @@ import type {
   SidebarProps,
 } from './Sidebar.types';
 import { shadowInk } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
+
+/**
+ * A width prop as CSS. `sx` reads a number of 1 or less as a fraction of the
+ * parent, and that stays so; any other number is design px, through the type scale.
+ */
+const widthCss = (theme: Theme, value: number): string =>
+  value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
 
 export const Sidebar: React.FC<SidebarProps> = ({
   children,
   variant = 'fixed',
   open = true,
   onToggle: _onToggle,
-  width = 280,
-  collapsedWidth = 64,
+  width,
+  collapsedWidth,
   position = 'left',
   className,
   dataTestId = 'sidebar',
@@ -27,7 +36,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
   const theme = useTheme();
 
   const isCollapsed = variant === 'collapsible' && !open;
-  const currentWidth = isCollapsed ? collapsedWidth : width;
+  // Design px: 280 open, 64 collapsed, unless the caller says otherwise.
+  const currentWidth = isCollapsed ? (collapsedWidth ?? 64) : (width ?? 280);
 
   const getVariantStyles = () => {
     switch (variant) {
@@ -44,9 +54,9 @@ export const Sidebar: React.FC<SidebarProps> = ({
       case 'glass':
         return {
           backgroundColor: alpha(theme.palette.background.paper, 0.1),
-          backdropFilter: 'blur(20px)',
+          backdropFilter: `blur(${rem(theme, 20)})`,
           border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-          boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,
+          boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,
         };
       case 'collapsible':
         return {
@@ -69,7 +79,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
       data-testid={dataTestId}
       {...rest}
       sx={{
-        width: currentWidth,
+        width: widthCss(theme, currentWidth),
         height: '100vh',
         display: 'flex',
         flexDirection: 'column',

package/src/components/layout/Skeleton/Skeleton.styles.ts

@@ -14,6 +14,7 @@ import {
   SKELETON_INTENSITY_OPACITY,
 } from './Skeleton.metrics';
 import { modeInk, shadowInk, sheen } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
 type SkeletonVariant = NonNullable<SkeletonProps['variant']>;
 type SkeletonIntensity = NonNullable<SkeletonProps['intensity']>;
@@ -57,9 +58,9 @@ const glassmorphismStyles = (theme: Theme): CSSObject => ({
   background: `linear-gradient(135deg,
         ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM)} 0%,
         ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_TO)} 100%)`,
-  backdropFilter: `blur(${GLASS_BLUR_PX}px)`,
+  backdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)})`,
   border: `1px solid ${alpha(theme.palette.divider, GLASS_BORDER_ALPHA)}`,
-  boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${shadowInk(theme, GLASS_SHADOW.alpha)}`,
+  boxShadow: `${rems(theme, 0, GLASS_SHADOW.offsetY, GLASS_SHADOW.blur, 0)} ${shadowInk(theme, GLASS_SHADOW.alpha)}`,
 });
 
 // The sweep is a pseudo-element sliding across the box, so the box has to clip it
@@ -96,7 +97,16 @@ interface SkeletonStyleArgs {
   style?: React.CSSProperties;
 }
 
-export const skeletonStyles = (
+/**
+ * A `width`/`height` for MUI's `Skeleton`, which writes it into an inline
+ * `style`: a number there is px, so it is design px through the type scale.
+ * The caller keeps a `0` as `0` (see `Skeleton.tsx`).
+ */
+export const skeletonLength = (theme: Theme, value: number | string | undefined): string | undefined =>
+  typeof value === 'number' ? rem(theme, value) : value;
+
+/** The skeleton's `sx` — so a number on `borderRadius` is a multiple of `shape.borderRadius`. */
+export const skeletonSx = (
   theme: Theme,
   { intensity, borderRadius, glassmorphism, shimmer, style }: SkeletonStyleArgs,
 ): CSSObject => ({

package/src/components/layout/Skeleton/Skeleton.tsx

@@ -9,7 +9,8 @@ import {
   defaultDimensions,
   muiAnimationFor,
   muiVariantFor,
-  skeletonStyles,
+  skeletonLength,
+  skeletonSx,
 } from './Skeleton.styles';
 import type { SkeletonProps } from './Skeleton.types';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
@@ -49,9 +50,10 @@ export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
     <MuiSkeleton
       variant={muiVariantFor(variant)}
       animation={muiAnimationFor(variant, animation)}
-      width={finalWidth}
-      height={finalHeight}
-      sx={skeletonStyles(theme, {
+      // A `0` stays `0`: MUI reads a falsy size as "size from children".
+      width={finalWidth === 0 ? 0 : skeletonLength(theme, finalWidth)}
+      height={finalHeight === 0 ? 0 : skeletonLength(theme, finalHeight)}
+      sx={skeletonSx(theme, {
         intensity,
         borderRadius,
         glassmorphism,

package/src/components/layout/Spacer/Spacer.tsx

@@ -1,10 +1,22 @@
 import Box from '@mui/material/Box/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { SPACER_FLEX_GROW, SPACER_FLEX_SHRINK, spacerDimensions } from './Spacer.metrics';
 import type { SpacerProps } from './Spacer.types';
 import { resolveTestId } from '../../../platform/test-id';
+import { rem } from '../../../tokens/relative';
+
+/**
+ * An explicit `width`/`height` as CSS. `sx` reads a number of 1 or less as a
+ * fraction of the parent, and that stays so; any other number is design px,
+ * through the type scale; a string is as given.
+ */
+const spacerLength = (theme: Theme, value: number | string | undefined): string | undefined => {
+  if (typeof value !== 'number') return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+};
 
 export const Spacer: React.FC<SpacerProps> = ({
   size,
@@ -19,7 +31,10 @@ export const Spacer: React.FC<SpacerProps> = ({
 
   // From the shared metrics, not a table of our own: the native `Spacer` reads
   // the same units, so the two renderers cannot disagree on a step.
-  const dimensions = spacerDimensions({ size, direction, width, height }, (units) => theme.spacing(units));
+  const dimensions = spacerDimensions(
+    { size, direction, width: spacerLength(theme, width), height: spacerLength(theme, height) },
+    (units) => theme.spacing(units),
+  );
 
   return (
     <Box

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -27,7 +27,8 @@ import type {
 import { fieldTextFieldStyles } from '../../../tokens/field-height';
 import { sxRem } from '../../../tokens/relative';
 
-const PANEL_WIDTH = 280;
+/** The open panel's width, 280 design px through the type scale. */
+const PANEL_WIDTH = sxRem(280);
 
 /**
  * Compound filter-panel system, MUI port of the reference `TableFilter`. Provides

package/src/components/navigation/AppHeader/AppHeader.brand.tsx

@@ -23,8 +23,8 @@ function markSx(
   { edge, round, showLogo, seed }: { edge: number; round: boolean; showLogo: boolean; seed: string },
 ): Record<string, unknown> {
   return {
-    width: edge,
-    height: edge,
+    width: rem(theme, edge),
+    height: rem(theme, edge),
     flex: '0 0 auto',
     overflow: 'hidden',
     borderRadius: round ? '50%' : '30%',