@12-apps/ui 6.34.0 → 6.36.0

package/src/components/data-display/TimingDiagram/TimingDiagram.views.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 
 import type { TimingData } from './TimingDiagram.types';
 import { onMedia, sheen, uiInk } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
 export type PhaseKey = 'dns' | 'connect' | 'ssl' | 'request' | 'response';
 
@@ -36,7 +37,8 @@ export interface TimingViewProps {
   animated: boolean;
   showLabels: boolean;
   showTooltips: boolean;
-  height: number;
+  /** The waterfall's plot height in design px — drawn through `rem`. */
+  plotHeightPx: number;
 }
 
 export const formatTime = (ms: number): string => {
@@ -77,31 +79,31 @@ const WaterfallContainer = styled(Box)(({ theme }) => ({
 
 const WaterfallBar = styled(Box, {
   shouldForwardProp: (prop) =>
-    !['phaseColor', 'offset', 'width', 'animated'].includes(prop as string),
+    !['phaseColor', 'offset', 'widthPct', 'animated'].includes(prop as string),
 })<{
   phaseColor: string;
   offset: number;
-  width: number;
+  widthPct: number;
   animated: boolean;
-}>(({ theme, phaseColor, offset, width, animated }) => ({
+}>(({ theme, phaseColor, offset, widthPct, animated }) => ({
   position: 'absolute',
-  height: 32,
+  height: rem(theme, 32),
   left: `${offset}%`,
-  width: `${width}%`,
+  width: `${widthPct}%`,
   background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,
   borderRadius: theme.shape.borderRadius,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   color: theme.palette.getContrastText(phaseColor),
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 500,
-  boxShadow: `0 2px 8px ${alpha(phaseColor, 0.3)}`,
+  boxShadow: `${rems(theme, 0, 2, 8)} ${alpha(phaseColor, 0.3)}`,
   transition: animated ? 'all 0.5s ease' : 'none',
   animation: animated ? 'slideIn 0.5s ease' : 'none',
   '@keyframes slideIn': {
     from: {
-      transform: 'translateX(-20px)',
+      transform: `translateX(${rem(theme, -20)})`,
       opacity: 0,
     },
     to: {
@@ -110,8 +112,8 @@ const WaterfallBar = styled(Box, {
     },
   },
   '&:hover': {
-    transform: 'translateY(-2px)',
-    boxShadow: `0 4px 12px ${alpha(phaseColor, 0.5)}`,
+    transform: `translateY(${rem(theme, -2)})`,
+    boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(phaseColor, 0.5)}`,
     zIndex: 10,
   },
 }));
@@ -125,7 +127,7 @@ const TimelineAxis = styled(Box)(({ theme }) => ({
 }));
 
 const TimeLabel = styled(Typography)(({ theme }) => ({
-  fontSize: '0.7rem',
+  fontSize: rem(theme, 11.2),
   color: theme.palette.text.secondary,
   fontWeight: 500,
 }));
@@ -137,14 +139,14 @@ export const WaterfallView: FC<TimingViewProps> = ({
   animated,
   showLabels,
   showTooltips,
-  height,
+  plotHeightPx,
 }) => {
   const theme = useTheme();
   // Each bar starts where the previous one ended, so the row reads as a timeline.
   let offset = 0;
 
   return (
-    <WaterfallContainer style={{ height: height + 40 }} data-variant="waterfall">
+    <WaterfallContainer style={{ height: rem(theme, plotHeightPx + 40) }} data-variant="waterfall">
       {phases.map((phase, index) => {
         const width = widthOf(percentages, phase);
         const currentOffset = offset;
@@ -158,11 +160,11 @@ export const WaterfallView: FC<TimingViewProps> = ({
             data-testid={`timing-segment-${phase.key}`}
             phaseColor={colorOf(theme, phase)}
             offset={currentOffset}
-            width={width}
+            widthPct={width}
             animated={animated}
             data-animated={animated.toString()}
             style={{
-              top: index * 8,
+              top: rem(theme, index * 8),
               width: `${width}%`,
               left: `${currentOffset}%`,
             }}
@@ -173,7 +175,7 @@ export const WaterfallView: FC<TimingViewProps> = ({
           </WaterfallBar>,
         );
       })}
-      <TimelineAxis style={{ marginTop: height }}>
+      <TimelineAxis style={{ marginTop: rem(theme, plotHeightPx) }}>
         <TimeLabel>0ms</TimeLabel>
         <TimeLabel>{formatTime(data.total / 2)}</TimeLabel>
         <TimeLabel>{formatTime(data.total)}</TimeLabel>
@@ -187,7 +189,7 @@ const StackedBar = styled(Box, {
 })<{ animated: boolean }>(({ theme, animated }) => ({
   display: 'flex',
   width: '100%',
-  height: 40,
+  height: rem(theme, 40),
   borderRadius: theme.shape.borderRadius,
   overflow: 'hidden',
   boxShadow: theme.shadows[2],
@@ -203,15 +205,15 @@ const StackedBar = styled(Box, {
 }));
 
 const StackedSegment = styled(Box, {
-  shouldForwardProp: (prop) => !['phaseColor', 'width'].includes(prop as string),
-})<{ phaseColor: string; width: number }>(({ theme, phaseColor, width }) => ({
-  width: `${width}%`,
+  shouldForwardProp: (prop) => !['phaseColor', 'widthPct'].includes(prop as string),
+})<{ phaseColor: string; widthPct: number }>(({ theme, phaseColor, widthPct }) => ({
+  width: `${widthPct}%`,
   background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   color: onMedia(theme),
-  fontSize: '0.7rem',
+  fontSize: rem(theme, 11.2),
   fontWeight: 600,
   position: 'relative',
   transition: 'all 0.3s ease',
@@ -243,7 +245,7 @@ export const StackedView: FC<TimingViewProps> = ({
               key={phase.key}
               data-testid={`timing-segment-${phase.key}`}
               phaseColor={colorOf(theme, phase)}
-              width={width}
+              widthPct={width}
               style={{ width: `${width}%` }}
             >
               {showLabels && width > 10 && (
@@ -273,29 +275,29 @@ const HorizontalBar = styled(Box)(({ theme }) => ({
 }));
 
 const HorizontalSegment = styled(Box, {
-  shouldForwardProp: (prop) => !['phaseColor', 'width', 'animated'].includes(prop as string),
+  shouldForwardProp: (prop) => !['phaseColor', 'widthPct', 'animated'].includes(prop as string),
 })<{
   phaseColor: string;
-  width: number;
+  widthPct: number;
   animated: boolean;
 }>(({ theme, phaseColor, animated }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(2),
   '& .label': {
-    minWidth: 80,
-    fontSize: '0.85rem',
+    minWidth: rem(theme, 80),
+    fontSize: rem(theme, 13.6),
     fontWeight: 500,
     color: theme.palette.text.secondary,
   },
   '& .bar': {
     flex: 1,
-    height: 24,
+    height: rem(theme, 24),
     borderRadius: theme.shape.borderRadius,
     background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,
     position: 'relative',
     overflow: 'hidden',
-    boxShadow: `0 2px 6px ${alpha(phaseColor, 0.25)}`,
+    boxShadow: `${rems(theme, 0, 2, 6)} ${alpha(phaseColor, 0.25)}`,
     ...(animated && {
       '&::after': {
         content: '""',
@@ -314,9 +316,9 @@ const HorizontalSegment = styled(Box, {
     }),
   },
   '& .value': {
-    minWidth: 60,
+    minWidth: rem(theme, 60),
     textAlign: 'right',
-    fontSize: '0.85rem',
+    fontSize: rem(theme, 13.6),
     fontWeight: 600,
     color: phaseColor,
   },
@@ -337,7 +339,7 @@ export const HorizontalView: FC<TimingViewProps> = ({
           key={phase.key}
           data-testid={`timing-segment-${phase.key}`}
           phaseColor={colorOf(theme, phase)}
-          width={widthOf(percentages, phase)}
+          widthPct={widthOf(percentages, phase)}
           animated={animated}
           data-animated={animated.toString()}
         >

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

@@ -5,6 +5,7 @@ import React from 'react';
 
 import type { TooltipProps } from './Tooltip.types';
 import { absoluteInk, neutralTones } from '../../../tokens/ink';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -23,12 +24,14 @@ const pulseAnimation = keyframes`
 `;
 
 const SIZE_MAP = {
-  sm: { fontSize: '0.75rem', padding: '4px 8px' },
-  md: { fontSize: '0.875rem', padding: '6px 12px' },
-  lg: { fontSize: '1rem', padding: '8px 16px' },
+  sm: { fontSize: sxRem(12), padding: (theme: Theme) => rems(theme, 4, 8) },
+  md: { fontSize: sxRem(14), padding: (theme: Theme) => rems(theme, 6, 12) },
+  lg: { fontSize: sxRem(16), padding: (theme: Theme) => rems(theme, 8, 16) },
 } as const;
 
-const getSizeStyles = (size?: string): { fontSize: string; padding: string } =>
+const getSizeStyles = (
+  size?: string,
+): { fontSize: (theme: Theme) => string; padding: (theme: Theme) => string } =>
   SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;
 
 const variantStyles = (theme: Theme, variant?: string): CSSObject => {
@@ -53,7 +56,7 @@ const variantStyles = (theme: Theme, variant?: string): CSSObject => {
     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.divider, 0.2)}`,
         color: theme.palette.text.primary,
       };
@@ -66,7 +69,7 @@ const variantStyles = (theme: Theme, variant?: string): CSSObject => {
 // out one by one, but each is just the union of whichever flags are set.
 const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({
   ...(glow && {
-    boxShadow: `0 0 15px 3px ${alpha(theme.palette.primary.main, 0.4)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,
     filter: 'brightness(1.05)',
   }),
   ...(pulse && {
@@ -101,8 +104,8 @@ const StyledTooltip = styled(MuiTooltip, {
   return {
     '& .MuiTooltip-tooltip': {
       borderRadius: theme.spacing(1),
-      fontSize: sizeStyles.fontSize,
-      padding: sizeStyles.padding,
+      fontSize: sizeStyles.fontSize(theme),
+      padding: sizeStyles.padding(theme),
       fontWeight: 500,
       transition: 'all 0.3s ease',
       position: 'relative',
@@ -117,6 +120,17 @@ const StyledTooltip = styled(MuiTooltip, {
   };
 });
 
+/**
+ * The tooltip's cap: 300 design px unless the caller says otherwise. `sx` has
+ * always read a number of 1 or less as a fraction of the parent, and that stays so.
+ */
+const tooltipCap =
+  (maxWidth: number | undefined) =>
+  (theme: Theme): string => {
+    const cap = maxWidth ?? 300;
+    return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
+  };
+
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   (
     {
@@ -124,7 +138,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
       size = 'md',
       glow = false,
       pulse = false,
-      maxWidth = 300,
+      maxWidth,
       dataTestId,
       children,
       ...props
@@ -151,7 +165,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
         disableTouchListener={false}
         slotProps={{
           tooltip: {
-            sx: { maxWidth },
+            sx: { maxWidth: tooltipCap(maxWidth) },
             role: 'tooltip',
             ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),
           },

package/src/components/feedback/Sonner/Sonner.tsx

@@ -2,6 +2,8 @@ import Box from '@mui/material/Box/index.js';
 import Portal from '@mui/material/Portal/index.js';
 import React, { createContext, useCallback, useContext, useRef,useState, useMemo } from 'react';
 
+import { sxRem } from '../../../tokens/relative';
+
 import type { SonnerContextType, SonnerItem,SonnerProps } from './Sonner.types';
 
 const SonnerContext = createContext<SonnerContextType | null>(null);
@@ -196,7 +198,7 @@ const SonnerToaster: React.FC<{
               p: 1,
               mb: 0.5,
               textAlign: 'center',
-              fontSize: '0.75rem',
+              fontSize: sxRem(12),
               color: 'text.secondary',
               pointerEvents: 'none' }}
           >

package/src/components/feedback/Sonner/SonnerToast.tsx

@@ -14,6 +14,7 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { shadowInk } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 
 import type { SonnerItem } from './Sonner.types';
 import type { SonnerProps } from './Sonner.types';
@@ -23,13 +24,13 @@ const renderToastIcon = (icon: SonnerProps['icon'], type: SonnerProps['type']) =
 
   switch (type) {
     case 'success':
-      return <SuccessIcon sx={{ fontSize: 20, color: 'success.main' }} />;
+      return <SuccessIcon sx={{ fontSize: sxRem(20), color: 'success.main' }} />;
     case 'error':
-      return <ErrorIcon sx={{ fontSize: 20, color: 'error.main' }} />;
+      return <ErrorIcon sx={{ fontSize: sxRem(20), color: 'error.main' }} />;
     case 'warning':
-      return <WarningIcon sx={{ fontSize: 20, color: 'warning.main' }} />;
+      return <WarningIcon sx={{ fontSize: sxRem(20), color: 'warning.main' }} />;
     case 'info':
-      return <InfoIcon sx={{ fontSize: 20, color: 'info.main' }} />;
+      return <InfoIcon sx={{ fontSize: sxRem(20), color: 'info.main' }} />;
     case 'loading':
       return <CircularProgress size={16} />;
     default:
@@ -115,7 +116,7 @@ const ToastContent: React.FC<{
     )}
 
     {description && (
-      <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>
+      <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: sxRem(14) }}>
         {description}
       </Typography>
     )}
@@ -139,7 +140,7 @@ const ToastActionButton: React.FC<{
     size="small"
     onClick={action.onClick}
     variant={buttonVariant}
-    sx={{ fontSize: '0.75rem', py: 0.5, px: 1.5 }}
+    sx={{ fontSize: sxRem(12), py: 0.5, px: 1.5 }}
   >
     {action.label}
   </Button>

package/src/components/form/AddressAutocomplete/AddressOption.tsx

@@ -5,6 +5,7 @@ import type { FC, HTMLAttributes } from 'react';
 import React from 'react';
 
 import type { AddressOptionValue } from './AddressAutocomplete.types';
+import { rem } from '../../../tokens/relative';
 
 // Module-local: styled() components cannot be exported across a module boundary
 // here without tripping TS2742.
@@ -28,13 +29,13 @@ const LocationIconWrapper = styled(Box)(({ theme }) => ({
 const AddressText = styled(Box)(({ theme }) => ({
   flex: 1,
   '& .primary': {
-    fontSize: '0.9rem',
+    fontSize: rem(theme, 14.4),
     fontWeight: 500,
     color: theme.palette.text.primary,
     marginBottom: theme.spacing(0.25),
   },
   '& .secondary': {
-    fontSize: '0.8rem',
+    fontSize: rem(theme, 12.8),
     color: theme.palette.text.secondary,
   },
 }));

package/src/components/form/Button/Button.styles.ts

@@ -4,7 +4,8 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { BUTTON_SIZES, ICON_ONLY_PADDING as ICON_ONLY_PADDING_PX } from './Button.metrics';
 import { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, controlNeutral } from '../../../tokens/ink';
-import { inkOver, px } from '../../../tokens/theme';
+import { rem } from '../../../tokens/relative';
+import { inkOver } from '../../../tokens/theme';
 
 // Define pulse animation globally
 const pulseAnimation = keyframes`
@@ -62,17 +63,25 @@ export const getColorFromTheme = (theme: Theme, color: string): ColorPalette =>
   };
 };
 
+/** A size's padding shorthand and its type in design px, read through the type scale. */
+interface WebButtonSize {
+  padding: string;
+  fontPx: number;
+}
+
 // Derived from `Button.metrics.ts`, which the native `Button` reads too — one
 // table, so a size cannot differ between the renderers.
-const SIZE_MAP: Record<string, CSSObject> = Object.fromEntries(
+const SIZE_MAP: Record<string, WebButtonSize> = Object.fromEntries(
   Object.entries(BUTTON_SIZES).map(([size, m]) => [
     size,
-    { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontSize: px(m.fontSize) },
+    { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontPx: m.fontSize },
   ]),
 );
 
 /** What an unrecognised size falls back to, named so indexing can never be undefined. */
-const DEFAULT_SIZE: CSSObject = SIZE_MAP.md as CSSObject;
+const DEFAULT_SIZE: WebButtonSize = SIZE_MAP.md as WebButtonSize;
+
+const sizeOf = (size: string): WebButtonSize => SIZE_MAP[size] ?? DEFAULT_SIZE;
 
 /**
  * A BUTTON THAT IS ONLY AN ICON IS SQUARE.
@@ -91,10 +100,10 @@ const ICON_ONLY_PADDING: Record<string, string> = Object.fromEntries(
   Object.entries(ICON_ONLY_PADDING_PX).map(([size, padding]) => [size, `${padding}px`]),
 );
 
-const iconOnlySize = (size: string): CSSObject => ({
+const iconOnlySize = (theme: Theme, size: string): CSSObject => ({
   minWidth: 0,
   padding: ICON_ONLY_PADDING[size] ?? ICON_ONLY_PADDING.md,
-  fontSize: SIZE_MAP[size]?.fontSize ?? DEFAULT_SIZE.fontSize,
+  fontSize: rem(theme, sizeOf(size).fontPx),
   '& .MuiButton-startIcon, & .MuiButton-endIcon': { margin: 0 },
 });
 
@@ -110,8 +119,9 @@ export const buttonSize =
   (size: string, iconOnly: boolean) =>
   (theme: Theme): CSSObject => {
     const height = fieldHeight(theme, asFieldSize(size));
-    if (iconOnly) return { ...iconOnlySize(size), padding: 0, minWidth: height, minHeight: height };
-    return { ...(SIZE_MAP[size] ?? DEFAULT_SIZE), minHeight: height, paddingTop: 0, paddingBottom: 0 };
+    if (iconOnly) return { ...iconOnlySize(theme, size), padding: 0, minWidth: height, minHeight: height };
+    const { padding, fontPx } = sizeOf(size);
+    return { padding, fontSize: rem(theme, fontPx), minHeight: height, paddingTop: 0, paddingBottom: 0 };
   };
 
 /**

package/src/components/form/Button/Button.tsx

@@ -1,12 +1,14 @@
 import MuiButton from '@mui/material/Button/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import * as React from 'react';
 
 import { resolveButtonProps } from './Button.helpers';
 import { BUTTON_ICON_GLYPH_SIZE } from './Button.metrics';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { fieldRadius } from '../../../tokens/field-radius';
+import { rem } from '../../../tokens/relative';
 import {
   buttonEmphasisStyles,
   buttonVariantStyles,
@@ -93,10 +95,10 @@ const muiColorFor = (color: NonNullable<ButtonProps['color']>): MuiButtonColor =
  * document order and never by specificity. Inline wins both, and it sits on the
  * one element we already render for this glyph.
  *
- * A number, not `px()`: React writes `font-size: 20px`, which is exactly the
- * declaration MUI was emitting before.
+ * Through the theme's type scale (FUT-2594): `1.25rem` at MUI's defaults, which
+ * is the 20px MUI was emitting before at a 16px root.
  */
-const ICON_GLYPH_STYLE = { fontSize: BUTTON_ICON_GLYPH_SIZE } as const;
+const iconGlyphStyle = (theme: Theme) => ({ fontSize: rem(theme, BUTTON_ICON_GLYPH_SIZE) });
 
 /**
  * An icon and nothing else — the shape that should render square.
@@ -158,11 +160,12 @@ const ButtonRoot = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const ownTestId = resolveTestId(others, 'button');
     const testId = (suffix: string) => childTestId(others, suffix, 'button');
     const props = withoutTestIdProps(others);
+    const theme = useTheme();
 
     // Wrap icon with testId if provided
     const iconWithTestId =
       !loading && icon ? (
-        <span data-testid={testId('icon')} style={ICON_GLYPH_STYLE}>
+        <span data-testid={testId('icon')} style={iconGlyphStyle(theme)}>
           {icon}
         </span>
       ) : undefined;

package/src/components/form/CategorySelect/CategoryPanelFoot.tsx

@@ -6,13 +6,14 @@ import Button from '@mui/material/Button/index.js';
 import type { CategorySelectCopy } from '../../../copy';
 import { footerSx, METRICS } from './CategorySelect.styles';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { sxRem } from '../../../tokens/relative';
 
 const buttonSx = (sheet: boolean) =>
   ({
     height: sheet ? METRICS.sheetFooterButton : METRICS.footerButton,
     padding: '0 13px',
     borderRadius: fieldRadiusPx,
-    fontSize: 12.5,
+    fontSize: sxRem(12.5),
     fontWeight: 600,
     textTransform: 'none',
     minWidth: 0,
@@ -45,7 +46,7 @@ export function CategoryMultiFoot({
 }: MultiFootProps): React.JSX.Element {
   return (
     <Box sx={footerSx} data-testid={`${dataTestId}-footer`}>
-      <Box component="span" sx={{ fontSize: 12, color: 'text.secondary' }}>
+      <Box component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
         {copy.footer.selectedCount(count)}
       </Box>
       <Box sx={{ display: 'flex', gap: '6px' }}>
@@ -85,7 +86,7 @@ export function CategorySingleFoot({
 }): React.JSX.Element {
   return (
     <Box sx={footerSx} data-testid={`${dataTestId}-footer`}>
-      <Box component="span" sx={{ fontSize: 12, color: 'text.secondary' }}>
+      <Box component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
         {copy.footer.singleHint}
       </Box>
       <Button

package/src/components/form/CategorySelect/CategoryPanelHead.tsx

@@ -16,6 +16,7 @@ import {
 import type { CategorySelectionChip } from './CategorySelect.types';
 import { fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { sxRem } from '../../../tokens/relative';
 
 interface PanelHeadProps {
   query: string;
@@ -37,7 +38,7 @@ const searchFieldSx = {
     width: '100%',
     height: fieldHeight,
     padding: '0 30px 0 32px',
-    fontSize: 13,
+    fontSize: sxRem(13),
     border: fieldBorder,
     borderRadius: fieldRadiusPx,
     background: 'background.paper',
@@ -63,7 +64,7 @@ const clearButtonSx = {
   display: 'grid',
   placeItems: 'center',
   cursor: 'pointer',
-  fontSize: 12,
+  fontSize: sxRem(12),
   padding: 0,
   lineHeight: 1,
 } as const;
@@ -121,7 +122,7 @@ export function CategoryPanelHead({
             alignItems: 'center',
             gap: '10px',
             marginTop: '8px',
-            fontSize: 12,
+            fontSize: sxRem(12),
           }}
         >
           {quickActions}

package/src/components/form/CategorySelect/CategoryQuickActions.tsx

@@ -4,6 +4,7 @@ import Box from '@mui/material/Box/index.js';
 import { useMemo } from 'react';
 
 import type { CategorySelectCopy } from '../../../copy';
+import { sxRem } from '../../../tokens/relative';
 
 import { collectBranchIds, collectLeafIds } from './category-tree';
 import type { CategorySelectState } from './useCategorySelect';
@@ -14,7 +15,7 @@ const linkButtonSx = {
   border: 0,
   padding: 0,
   font: 'inherit',
-  fontSize: 12,
+  fontSize: sxRem(12),
   color: 'primary.main',
   cursor: 'pointer',
   fontWeight: 550,

package/src/components/form/CategorySelect/CategorySelect.styles.ts

@@ -4,6 +4,7 @@ import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, uiInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 /**
  * The prototype's METRICS, verbatim.
@@ -64,7 +65,7 @@ export const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSOb
     background: selected ? brand.soft : theme.palette.background.paper,
     color: selected ? brand.ink : theme.palette.text.primary,
     font: 'inherit',
-    fontSize: 13,
+    fontSize: rem(theme, 13),
     cursor: 'pointer',
     maxWidth: '100%',
     transition: 'border-color .12s, box-shadow .12s',
@@ -82,7 +83,7 @@ export const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSOb
 /** The count pill inside the trigger. */
 export const triggerCountSx = (theme: Theme): CSSObject => ({
   fontWeight: 600,
-  fontSize: 11,
+  fontSize: rem(theme, 11),
   lineHeight: 1,
   background: theme.palette.primary.main,
   color: theme.palette.primary.contrastText,
@@ -165,7 +166,7 @@ export const pinnedSx = (theme: Theme): CSSObject => ({
 
 export const pinnedLabelSx = (theme: Theme): CSSObject => ({
   fontWeight: 600,
-  fontSize: 10,
+  fontSize: rem(theme, 10),
   lineHeight: 1,
   letterSpacing: '.08em',
   textTransform: 'uppercase',
@@ -188,7 +189,7 @@ export const chipSx = (theme: Theme): CSSObject => {
     display: 'inline-flex',
     alignItems: 'center',
     gap: '5px',
-    fontSize: 12,
+    fontSize: rem(theme, 12),
     background: brand.soft,
     color: brand.ink,
     border: `1px solid ${brand.edge}`,
@@ -206,7 +207,7 @@ export const chipSx = (theme: Theme): CSSObject => {
       display: 'grid',
       placeItems: 'center',
       opacity: 0.65,
-      fontSize: 13,
+      fontSize: rem(theme, 13),
       lineHeight: 1,
       '&:hover': { background: alpha(theme.palette.primary.main, 0.16), opacity: 1 },
     },
@@ -263,13 +264,13 @@ export const rowNameSx = (theme: Theme, isCategory: boolean): CSSObject => ({
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  fontSize: 13.5,
+  fontSize: rem(theme, 13.5),
   fontWeight: isCategory ? 600 : 450,
   color: isCategory ? theme.palette.text.primary : theme.palette.text.secondary,
 });
 
 export const rowMetaSx = (theme: Theme, selected: boolean): CSSObject => ({
-  font: '500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace',
+  font: `500 ${rem(theme, 11)}/1 ui-monospace, SFMono-Regular, Menlo, monospace`,
   color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
   fontWeight: selected ? 600 : 500,
   flex: '0 0 auto',
@@ -335,7 +336,7 @@ export const radioSx = (theme: Theme, on: boolean): CSSObject => ({
 
 export const sectionHeadSx = (theme: Theme): CSSObject => ({
   fontWeight: 600,
-  fontSize: 10,
+  fontSize: rem(theme, 10),
   lineHeight: 1,
   letterSpacing: '.08em',
   textTransform: 'uppercase',
@@ -360,10 +361,10 @@ export const emptySx = (theme: Theme): CSSObject => ({
   '& strong': {
     display: 'block',
     color: theme.palette.text.primary,
-    fontSize: 13.5,
+    fontSize: rem(theme, 13.5),
     marginBottom: '4px',
   },
-  '& p': { margin: '0 0 12px', fontSize: 12.5, lineHeight: 1.5 },
+  '& p': { margin: '0 0 12px', fontSize: rem(theme, 12.5), lineHeight: 1.5 },
 });
 
 /** Skeleton row used while the catalogue loads. */