@12-apps/ui 6.37.0 → 6.39.0

package/src/components/layout/Resizable/Resizable.tsx

@@ -2,7 +2,15 @@ import Box from '@mui/material/Box/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React, { useMemo } from 'react';
 
-import { defaultHandles, handleStyle, resolveResizableProps } from './Resizable.helpers';
+import { remPx } from '../../../tokens/relative';
+
+import {
+  axisPx,
+  defaultHandles,
+  handleStyle,
+  resolveResizableProps,
+  startSizePx,
+} from './Resizable.helpers';
 import { useResize } from './Resizable.hooks';
 import type { ResizableProps } from './Resizable.types';
 
@@ -10,8 +18,8 @@ export const Resizable: React.FC<ResizableProps> = (rawProps) => {
   const {
     children,
     variant,
-    width: initialWidth,
-    height: initialHeight,
+    width,
+    height,
     minWidth,
     maxWidth,
     minHeight,
@@ -24,18 +32,20 @@ export const Resizable: React.FC<ResizableProps> = (rawProps) => {
     ...rest
   } = resolveResizableProps(rawProps);
   const theme = useTheme();
+  // Keyed apart: a new `start` re-seats the box, which a changed clamp must not do.
+  const start = useMemo(() => startSizePx(theme, width, height), [theme, width, height]);
   const bounds = useMemo(
     () => ({
-      width: { min: minWidth, max: maxWidth },
-      height: { min: minHeight, max: maxHeight },
+      width: axisPx(theme, minWidth, maxWidth),
+      height: axisPx(theme, minHeight, maxHeight),
     }),
-    [minWidth, maxWidth, minHeight, maxHeight],
+    [theme, minWidth, maxWidth, minHeight, maxHeight],
   );
 
   const { size, isResizing, activeHandle, handleMouseDown } = useResize({
-    width: initialWidth,
-    height: initialHeight,
+    start,
     bounds,
+    pxPerDesignPx: remPx(theme, 1),
     disabled,
     onResize,
   });
@@ -49,6 +59,8 @@ export const Resizable: React.FC<ResizableProps> = (rawProps) => {
       data-testid={dataTestId}
       sx={{
         position: 'relative',
+        // The live size: the start and the clamp came through `remPx`, the rest
+        // is pointer pixels dragged, so it is px as it stands.
         width: size.width,
         height: size.height,
         border: `1px solid ${theme.palette.divider}`,

package/src/components/layout/Resizable/Resizable.types.ts

@@ -14,12 +14,22 @@ export type ResizeHandle =
 export interface ResizableProps {
   children: ReactNode;
   variant?: ResizableVariant;
+  /** Starting width (default 200). Design px, scaled with the theme's type scale. */
   width?: number;
+  /** Starting height (default 200). Design px, scaled with the theme's type scale. */
   height?: number;
+  /** Narrowest a drag can make it (default 50). Design px, scaled with the theme's type scale. */
   minWidth?: number;
+  /** Widest a drag can make it (default 1000). Design px, scaled with the theme's type scale. */
   maxWidth?: number;
+  /** Shortest a drag can make it (default 50). Design px, scaled with the theme's type scale. */
   minHeight?: number;
+  /** Tallest a drag can make it (default 1000). Design px, scaled with the theme's type scale. */
   maxHeight?: number;
+  /**
+   * Fired on every drag step with the new size, in design px — the unit `width`
+   * and `height` take, so feeding it back keeps a controlled box where it is.
+   */
   onResize?: (width: number, height: number) => void;
   disabled?: boolean;
   handles?: ResizeHandle[];

package/src/components/layout/ScrollArea/ScrollArea.helpers.ts

@@ -10,7 +10,6 @@ type ScrollAreaDefaultedKeys =
   | 'smoothScroll'
   | 'variant'
   | 'scrollToTopButton'
-  | 'scrollToTopThreshold'
   | 'contentPadding'
   | 'alwaysShowScrollbar'
   | 'disabled'
@@ -30,7 +29,6 @@ const SCROLL_AREA_DEFAULTS: Pick<ScrollAreaProps, ScrollAreaDefaultedKeys> = {
   smoothScroll: true,
   variant: 'default',
   scrollToTopButton: false,
-  scrollToTopThreshold: 100,
   contentPadding: 0,
   alwaysShowScrollbar: false,
   disabled: false,

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

@@ -3,17 +3,28 @@ import { alpha } from '@mui/material/styles/index.js';
 
 import type { ScrollAreaProps } from './ScrollArea.types';
 import { neutralTones, sheen } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
+/** The scrollbar's thickness in design px, per `scrollbarSize`; `default` is the fallback. */
 const SCROLLBAR_SIZES: Record<string, number> = {
   thin: 8,
   thick: 16,
+  default: 12,
 };
 
-const DEFAULT_SCROLLBAR_SIZE = 12;
-
 // thin/thick are the named ends of the scale; anything else takes the default.
 const getScrollbarSize = (scrollbarSize?: string): number =>
-  scrollbarSize ? (SCROLLBAR_SIZES[scrollbarSize] ?? DEFAULT_SCROLLBAR_SIZE) : DEFAULT_SCROLLBAR_SIZE;
+  (scrollbarSize ? SCROLLBAR_SIZES[scrollbarSize] : undefined) ?? SCROLLBAR_SIZES.default!;
+
+/**
+ * A size 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; a string is as given.
+ */
+export const sizeCss = (theme: Theme, value: number | string | undefined): string | undefined => {
+  if (typeof value !== 'number') return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+};
 
 const getScrollbarColors = ({
   theme,
@@ -75,11 +86,12 @@ export const getOverflowStyle = ({
 
 // Scrollbar chrome shared by every variant. autoHide fades the thumb out when
 // the area is idle, which is why the colours are parameters rather than read
-// from the variant directly.
-const autoHideScrollbarStyles = ({
+// from the variant directly. An `sx` object (it is spread into the viewport's
+// `sx`), so a number on `borderRadius` is a multiple of `shape.borderRadius`.
+const autoHideScrollbarSx = ({
   thumbColor,
   trackColor,
-  size,
+  thickness,
   orientation,
   shouldShowScrollbar,
   theme,
@@ -87,24 +99,24 @@ const autoHideScrollbarStyles = ({
 }: {
   thumbColor: string;
   trackColor: string;
-  size: number;
+  thickness: number;
   orientation?: ScrollAreaProps['orientation'];
   shouldShowScrollbar: boolean;
   theme: Theme;
   scrollbarSize?: string;
 }) => ({
     '&::-webkit-scrollbar': {
-      width: orientation !== 'horizontal' ? size : '100%',
-      height: orientation !== 'vertical' ? size : '100%',
+      width: orientation !== 'horizontal' ? rem(theme, thickness) : '100%',
+      height: orientation !== 'vertical' ? rem(theme, thickness) : '100%',
     },
     '&::-webkit-scrollbar-track': {
       background: shouldShowScrollbar ? trackColor : 'transparent',
-      borderRadius: size / 2,
+      borderRadius: thickness / 2,
       transition: 'background 0.3s ease',
     },
     '&::-webkit-scrollbar-thumb': {
       background: shouldShowScrollbar ? thumbColor : 'transparent',
-      borderRadius: size / 2,
+      borderRadius: thickness / 2,
       transition: 'background 0.3s ease',
       '&:hover': {
         background: shouldShowScrollbar ? theme.palette.primary.main : 'transparent',
@@ -127,34 +139,35 @@ const autoHideScrollbarStyles = ({
 type VariantArgs = {
   theme: Theme;
   colors: { scrollbar: string; track: string };
-  size: number;
+  thickness: number;
   orientation?: ScrollAreaProps['orientation'];
   shouldShowScrollbar: boolean;
   scrollbarSize?: string;
 };
 
 // One entry per scrollbar look. overlay floats above the content, glass tints
-// it, and the default delegates to the shared auto-hide chrome.
-const VARIANT_SCROLLBARS: Record<string, (args: VariantArgs) => CSSObject> = {
-  overlay: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => ({
+// it, and the default delegates to the shared auto-hide chrome. Each is an `sx`
+// object, like the chrome.
+const VARIANT_SCROLLBAR_SX: Record<string, (args: VariantArgs) => CSSObject> = {
+  overlay: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => ({
           '&::-webkit-scrollbar': {
-            width: orientation !== 'horizontal' ? size : '100%',
-            height: orientation !== 'vertical' ? size : '100%',
+            width: orientation !== 'horizontal' ? rem(theme, thickness) : '100%',
+            height: orientation !== 'vertical' ? rem(theme, thickness) : '100%',
             position: 'absolute',
             right: 0,
             top: 0,
           },
           '&::-webkit-scrollbar-track': {
             background: 'transparent',
-            borderRadius: size / 2,
+            borderRadius: thickness / 2,
           },
           '&::-webkit-scrollbar-thumb': {
             background: shouldShowScrollbar
               ? alpha(colors.scrollbar, 0.5)
               : 'transparent',
-            borderRadius: size / 2,
+            borderRadius: thickness / 2,
             transition: 'background 0.3s ease',
-            border: '2px solid transparent',
+            border: `${rem(theme, 2)} solid transparent`,
             backgroundClip: 'padding-box',
             '&:hover': {
               background: shouldShowScrollbar ? theme.palette.primary.main : 'transparent',
@@ -178,14 +191,14 @@ const VARIANT_SCROLLBARS: Record<string, (args: VariantArgs) => CSSObject> = {
   // Firefox property) keeps the solid palette colour rather than the gradient —
   // a gradient is not a valid value there, which is why the original picked
   // colors.scrollbar for it.
-  glass: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => {
+  glass: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => {
     const glassThumbColor = `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.3)}, ${alpha(theme.palette.secondary.main, 0.3)})`;
     const glassTrackColor = alpha(theme.palette.background.paper, 0.1);
 
-    const base = autoHideScrollbarStyles({
+    const base = autoHideScrollbarSx({
       thumbColor: glassThumbColor,
       trackColor: glassTrackColor,
-      size,
+      thickness,
       orientation,
       shouldShowScrollbar,
       theme,
@@ -196,26 +209,26 @@ const VARIANT_SCROLLBARS: Record<string, (args: VariantArgs) => CSSObject> = {
       ...base,
       '&::-webkit-scrollbar-track': {
         ...(base['&::-webkit-scrollbar-track'] as object),
-        backdropFilter: shouldShowScrollbar ? 'blur(5px)' : 'none',
+        backdropFilter: shouldShowScrollbar ? `blur(${rem(theme, 5)})` : 'none',
       },
       '&::-webkit-scrollbar-thumb': {
         ...(base['&::-webkit-scrollbar-thumb'] as object),
         boxShadow: shouldShowScrollbar
-          ? `inset 0 0 6px ${sheen(theme, 0.3)}`
+          ? `inset ${rems(theme, 0, 0, 6)} ${sheen(theme, 0.3)}`
           : 'none',
       },
       scrollbarColor: shouldShowScrollbar
         ? `${colors.scrollbar} ${glassTrackColor}`
         : 'transparent transparent',
-      backdropFilter: 'blur(10px)',
+      backdropFilter: `blur(${rem(theme, 10)})`,
     };
   },
 
-  default: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) =>
-    autoHideScrollbarStyles({
+  default: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) =>
+    autoHideScrollbarSx({
       thumbColor: colors.scrollbar,
       trackColor: colors.track,
-      size,
+      thickness,
       orientation,
       shouldShowScrollbar,
       theme,
@@ -241,9 +254,9 @@ export const getVariantStyles = ({
   shouldShowScrollbar: boolean;
 }) => {
   const colors = getScrollbarColors({ theme, variant, scrollbarColor, scrollbarTrackColor });
-  const size = getScrollbarSize(scrollbarSize);
+  const thickness = getScrollbarSize(scrollbarSize);
 
-  const build = VARIANT_SCROLLBARS[variant ?? 'default'] ?? VARIANT_SCROLLBARS.default!;
+  const build = VARIANT_SCROLLBAR_SX[variant ?? 'default'] ?? VARIANT_SCROLLBAR_SX.default!;
 
-  return build({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize });
+  return build({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize });
 };

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, remPx, 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';
@@ -101,6 +105,7 @@ const useScrollArea = (
     scrollToTopThreshold,
     smoothScroll } = props;
 
+  const theme = useTheme();
   const { scrollRef, setScrollRef, containerDimensions } = useObservedScrollRef({
     externalScrollRef,
     onResize });
@@ -117,12 +122,13 @@ const useScrollArea = (
       noteScroll();
 
       if (scrollToTopButton && scrollRef.current) {
-        setShowScrollToTop(scrollRef.current.scrollTop > scrollToTopThreshold);
+        // 100 design px unless the caller says, in the px `scrollTop` is measured in.
+        setShowScrollToTop(scrollRef.current.scrollTop > remPx(theme, scrollToTopThreshold ?? 100));
       }
 
       onScroll?.(event);
     },
-    [disabled, noteScroll, scrollToTopButton, scrollToTopThreshold, onScroll, scrollRef],
+    [disabled, noteScroll, scrollToTopButton, scrollToTopThreshold, onScroll, scrollRef, theme],
   );
 
   const scrollToTop = useCallback(() => {
@@ -175,13 +181,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 +199,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 +249,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 +258,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/ScrollArea.types.ts

@@ -63,7 +63,10 @@ export interface ScrollAreaBase extends Omit<BoxProps, 'ref'> {
   /** Scroll event handler */
   onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
 
-  /** Threshold for showing scroll-to-top button (in pixels) */
+  /**
+   * How far down the scroll-to-top button appears (default 100) — design px,
+   * scaled with the theme's type scale.
+   */
   scrollToTopThreshold?: number;
 
   /** Custom scrollbar color */

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