@12-apps/ui 6.36.0 → 6.37.0

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

@@ -2,16 +2,17 @@
 
 import Box from '@mui/material/Box/index.js';
 import Button from '@mui/material/Button/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 
 import type { CategorySelectCopy } from '../../../copy';
 import { footerSx, METRICS } from './CategorySelect.styles';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
-import { sxRem } from '../../../tokens/relative';
+import { rems, sxRem } from '../../../tokens/relative';
 
 const buttonSx = (sheet: boolean) =>
   ({
-    height: sheet ? METRICS.sheetFooterButton : METRICS.footerButton,
-    padding: '0 13px',
+    height: sxRem(sheet ? METRICS.sheetFooterButtonPx : METRICS.footerButtonPx),
+    padding: (theme: Theme) => rems(theme, 0, 13),
     borderRadius: fieldRadiusPx,
     fontSize: sxRem(12.5),
     fontWeight: 600,
@@ -49,7 +50,7 @@ export function CategoryMultiFoot({
       <Box component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
         {copy.footer.selectedCount(count)}
       </Box>
-      <Box sx={{ display: 'flex', gap: '6px' }}>
+      <Box sx={{ display: 'flex', gap: sxRem(6) }}>
         <Button
           variant="outlined"
           disabled={count === 0}

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

@@ -3,7 +3,7 @@
 import type { CategorySelectCopy } from '../../../copy';
 import Box from '@mui/material/Box/index.js';
 import InputBase from '@mui/material/InputBase/index.js';
-import { alpha, type Theme } from '@mui/material/styles/index.js';
+import { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';
 
 import { SearchGlyph } from './CategoryIcons';
 import {
@@ -16,7 +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';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 interface PanelHeadProps {
   query: string;
@@ -37,7 +37,7 @@ const searchFieldSx = {
   '& input': {
     width: '100%',
     height: fieldHeight,
-    padding: '0 30px 0 32px',
+    padding: (theme: Theme) => rems(theme, 0, 30, 0, 32),
     fontSize: sxRem(13),
     border: fieldBorder,
     borderRadius: fieldRadiusPx,
@@ -47,16 +47,16 @@ const searchFieldSx = {
       outline: 'none',
       borderColor: 'primary.main',
       // 0x26 of 0xFF: the ring's old hex-alpha suffix, kept exact.
-      boxShadow: (theme: Theme) => `0 0 0 3px ${alpha(theme.palette.primary.main, 0x26 / 0xff)}`,
+      boxShadow: (theme: Theme) => `0 0 0 ${rem(theme, 3)} ${alpha(theme.palette.primary.main, 0x26 / 0xff)}`,
     },
   },
 } as const;
 
 const clearButtonSx = {
   position: 'absolute',
-  right: 7,
-  width: 20,
-  height: 20,
+  right: sxRem(7),
+  width: sxRem(20),
+  height: sxRem(20),
   border: 0,
   background: 'action.selected',
   color: 'text.secondary',
@@ -80,15 +80,16 @@ export function CategoryPanelHead({
   dataTestId,
   copy,
 }: PanelHeadProps): React.JSX.Element {
+  const theme = useTheme();
   return (
     <Box sx={(theme) => panelHeadSx(theme, sheet)}>
       <Box sx={searchFieldSx}>
         <SearchGlyph
           style={{
             position: 'absolute',
-            left: 10,
-            width: 15,
-            height: 15,
+            left: rem(theme, 10),
+            width: rem(theme, 15),
+            height: rem(theme, 15),
             opacity: 0.55,
             pointerEvents: 'none',
           }}
@@ -120,8 +121,8 @@ export function CategoryPanelHead({
           sx={{
             display: 'flex',
             alignItems: 'center',
-            gap: '10px',
-            marginTop: '8px',
+            gap: sxRem(10),
+            marginTop: sxRem(8),
             fontSize: sxRem(12),
           }}
         >

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

@@ -9,6 +9,7 @@ import { categoryCheckState, isLeafCategory, leavesOf } from './category-tree';
 import { CategorySectionHeading, CategoryTreeRow } from './CategoryRows';
 import { emptySx, listSx, skeletonSx } from './CategorySelect.styles';
 import type { CategoryGroup } from './CategorySelect.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** The design sets these labels in sentence case, not MUI's default caps. */
 const SENTENCE_CASE = { textTransform: 'none' } as const;
@@ -96,7 +97,7 @@ function NoResults({
     <Box sx={emptySx} data-testid={`${dataTestId}-no-results`}>
       <strong>{copy.noResults.title(query)}</strong>
       <p>{copy.noResults.hint}</p>
-      <Box sx={{ display: 'flex', gap: '6px', justifyContent: 'center' }}>
+      <Box sx={{ display: 'flex', gap: sxRem(6), justifyContent: 'center' }}>
         <Button variant="outlined" size="small" sx={SENTENCE_CASE} onClick={onClearQuery}>
           {copy.noResults.clearSearch}
         </Button>
@@ -221,7 +222,7 @@ export function CategoryPanelList(props: PanelListProps): React.JSX.Element {
       aria-multiselectable={props.single ? undefined : true}
       tabIndex={-1}
       data-testid={`${dataTestId}-list`}
-      sx={listSx(sheet)}
+      sx={(theme) => listSx(theme, sheet)}
     >
       {body()}
     </Box>

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

@@ -4,6 +4,7 @@ import Drawer from '@mui/material/Drawer/index.js';
 import Popover from '@mui/material/Popover/index.js';
 
 import { stackedOverlayZIndex } from '../../../tokens/layers';
+import { sxRem } from '../../../tokens/relative';
 
 /** Chrome-free surface props: the panel draws its own border and shadow. */
 const BARE_PAPER = { background: 'transparent', boxShadow: 'none' } as const;
@@ -64,7 +65,7 @@ export function CategoryPanelSurface({
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
       marginThreshold={8}
       sx={ABOVE_SHEETS}
-      slotProps={{ paper: { sx: { ...BARE_PAPER, marginTop: '6px', overflow: 'visible' } } }}
+      slotProps={{ paper: { sx: { ...BARE_PAPER, marginTop: sxRem(6), overflow: 'visible' } } }}
     >
       {children}
     </Popover>

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

@@ -19,6 +19,7 @@ import {
   sectionHeadSx,
 } from './CategorySelect.styles';
 import type { CategorySelectOption } from './CategorySelect.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** A label with the search hit marked. */
 export function HighlightedName({
@@ -104,7 +105,7 @@ function RowDisclosure({
   'option' | 'expanded' | 'branch' | 'onToggleExpanded' | 'dataTestId' | 'copy'
 >): React.JSX.Element {
   if (!branch) {
-    return <Box sx={{ width: METRICS.chevronButton, flex: '0 0 auto' }} />;
+    return <Box sx={{ width: sxRem(METRICS.chevronButtonPx), flex: '0 0 auto' }} />;
   }
   return (
     <Box
@@ -129,7 +130,7 @@ function RowControl({
   checkState,
   single,
 }: Pick<CategoryTreeRowProps, 'checkState' | 'single'>): React.JSX.Element {
-  if (!checkState) return <Box sx={{ width: METRICS.boxSize, flex: '0 0 auto' }} />;
+  if (!checkState) return <Box sx={{ width: sxRem(METRICS.boxSizePx), flex: '0 0 auto' }} />;
   // Single-select commits the moment a row is chosen, so the control is a radio
   // there: a checkbox would promise the accumulation this mode does not do.
   if (single) return <CategoryRadio on={checkState === 'on'} />;
@@ -181,7 +182,7 @@ export function CategoryTreeRow({
       aria-selected={checkState ? checkState === 'on' : undefined}
       aria-expanded={branch ? expanded : undefined}
       data-testid={rowTestId(dataTestId, depth, option.id)}
-      sx={(theme) => ({ ...rowSx(theme, active, sheet), ...rowIndent(depth) })}
+      sx={(theme) => ({ ...rowSx(theme, active, sheet), ...rowIndent(theme, depth) })}
       onClick={onActivate}
     >
       <RowDisclosure

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

@@ -4,15 +4,17 @@ 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';
+import { rem, rems } from '../../../tokens/relative';
 
 /**
- * The prototype's METRICS, verbatim.
+ * The prototype's METRICS, verbatim, in the design's px.
  *
  * Every number here is lifted from the approved design and is intentionally
- * absolute rather than derived from `theme.spacing`: the design is specified on
- * a half-pixel type scale (13.5px rows, 1.5px checkbox borders) that an 8px
- * spacing grid cannot express without rounding the look away.
+ * not derived from `theme.spacing`: the design is specified on a half-pixel
+ * type scale (13.5px rows, 1.5px checkbox borders) that an 8px spacing grid
+ * cannot express without rounding the look away. Each is drawn through
+ * `rem()` (the theme's type scale) where it is read, so it follows a density
+ * mode exactly — `sheetBreakpoint` excepted, which is a media-query width.
  *
  * The trigger's CORNER and HEIGHT are the other exception: it is a field, so it
  * takes the theme's field radius and field height (`tokens/field-radius`,
@@ -25,19 +27,19 @@ import { rem } from '../../../tokens/relative';
  * prototype's own values.
  */
 export const METRICS = {
-  panelWidth: 340,
-  panelRadius: 14,
-  listMaxHeight: 290,
-  sheetListMaxHeight: 340,
-  rowHeight: 36,
-  sheetRowHeight: 42,
-  rowRadius: 8,
-  boxSize: 18,
-  chevronButton: 22,
+  panelWidthPx: 340,
+  panelRadiusPx: 14,
+  listMaxHeightPx: 290,
+  sheetListMaxHeightPx: 340,
+  rowHeightPx: 36,
+  sheetRowHeightPx: 42,
+  rowRadiusPx: 8,
+  boxSizePx: 18,
+  chevronButtonPx: 22,
   /** Extra left padding per level of nesting. */
-  rowIndentStep: 14,
-  footerButton: 32,
-  sheetFooterButton: 38,
+  rowIndentStepPx: 14,
+  footerButtonPx: 32,
+  sheetFooterButtonPx: 38,
   /** Below this width the panel becomes a bottom sheet. */
   sheetBreakpoint: 480,
 } as const;
@@ -57,9 +59,9 @@ export const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSOb
   return {
     display: 'flex',
     alignItems: 'center',
-    gap: '8px',
+    gap: rem(theme, 8),
     height: fieldHeight(theme),
-    padding: '0 10px 0 12px',
+    padding: rems(theme, 0, 10, 0, 12),
     borderRadius: fieldRadiusPx(theme),
     border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,
     background: selected ? brand.soft : theme.palette.background.paper,
@@ -69,12 +71,12 @@ export const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSOb
     cursor: 'pointer',
     maxWidth: '100%',
     transition: 'border-color .12s, box-shadow .12s',
-    boxShadow: open ? `0 0 0 3px ${brand.ring}` : 'none',
+    boxShadow: open ? `0 0 0 ${rem(theme, 3)} ${brand.ring}` : 'none',
     '&:hover': { borderColor: open || selected ? brand.edge : theme.palette.text.disabled },
     '&:focus-visible': {
       outline: 'none',
       borderColor: brand.main,
-      boxShadow: `0 0 0 3px ${alpha(brand.main, 0.18)}`,
+      boxShadow: `0 0 0 ${rem(theme, 3)} ${alpha(brand.main, 0.18)}`,
     },
     '&:disabled': { opacity: 0.5, cursor: 'default' },
   };
@@ -87,20 +89,20 @@ export const triggerCountSx = (theme: Theme): CSSObject => ({
   lineHeight: 1,
   background: theme.palette.primary.main,
   color: theme.palette.primary.contrastText,
-  borderRadius: '999px',
-  padding: '3px 6px',
-  minWidth: 18,
+  borderRadius: rem(theme, 999),
+  padding: rems(theme, 3, 6),
+  minWidth: rem(theme, 18),
   textAlign: 'center',
 });
 
 /** The trigger's inline clear (×) and the chevron. */
 export const triggerClearSx = (theme: Theme): CSSObject => ({
-  width: 20,
-  height: 20,
+  width: rem(theme, 20),
+  height: rem(theme, 20),
   flex: '0 0 auto',
   border: 0,
   background: 'transparent',
-  borderRadius: '5px',
+  borderRadius: rem(theme, 5),
   display: 'grid',
   placeItems: 'center',
   cursor: 'pointer',
@@ -110,9 +112,9 @@ export const triggerClearSx = (theme: Theme): CSSObject => ({
   '&:hover': { background: alpha(absoluteInk(theme).black, 0.08), opacity: 1 },
 });
 
-export const triggerChevronSx = (open: boolean): CSSObject => ({
-  width: 14,
-  height: 14,
+export const triggerChevronSx = (theme: Theme, open: boolean): CSSObject => ({
+  width: rem(theme, 14),
+  height: rem(theme, 14),
   flex: '0 0 auto',
   opacity: 0.55,
   transition: 'transform .15s',
@@ -121,12 +123,12 @@ export const triggerChevronSx = (open: boolean): CSSObject => ({
 
 /** The floating panel. */
 export const panelSx = (theme: Theme): CSSObject => ({
-  width: METRICS.panelWidth,
+  width: rem(theme, METRICS.panelWidthPx),
   maxWidth: '100%',
   background: theme.palette.background.paper,
   border: `1px solid ${theme.palette.divider}`,
-  borderRadius: `${METRICS.panelRadius}px`,
-  boxShadow: `0 1px 2px ${alpha(uiInk(theme).panelShadowInk, 0.05)}, 0 18px 40px -12px ${alpha(uiInk(theme).panelShadowInk, 0.28)}`,
+  borderRadius: rem(theme, METRICS.panelRadiusPx),
+  boxShadow: `${rems(theme, 0, 1, 2)} ${alpha(uiInk(theme).panelShadowInk, 0.05)}, ${rems(theme, 0, 18, 40, -12)} ${alpha(uiInk(theme).panelShadowInk, 0.28)}`,
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
@@ -136,30 +138,30 @@ export const panelSx = (theme: Theme): CSSObject => ({
 export const sheetSx = (theme: Theme): CSSObject => ({
   width: '100%',
   maxWidth: 'none',
-  borderRadius: '18px 18px 0 0',
+  borderRadius: rems(theme, 18, 18, 0, 0),
   borderBottom: 0,
   position: 'relative',
-  paddingTop: '4px',
+  paddingTop: rem(theme, 4),
   '&::before': {
     content: '""',
     position: 'absolute',
-    top: 7,
+    top: rem(theme, 7),
     left: '50%',
     transform: 'translateX(-50%)',
-    width: 36,
-    height: 4,
-    borderRadius: '2px',
+    width: rem(theme, 36),
+    height: rem(theme, 4),
+    borderRadius: rem(theme, 2),
     background: theme.palette.divider,
   },
 });
 
 export const panelHeadSx = (theme: Theme, sheet: boolean): CSSObject => ({
-  padding: sheet ? '18px 10px 8px' : '10px 10px 8px',
+  padding: sheet ? rems(theme, 18, 10, 8) : rems(theme, 10, 10, 8),
   borderBottom: `1px solid ${theme.palette.divider}`,
 });
 
 export const pinnedSx = (theme: Theme): CSSObject => ({
-  padding: '9px 10px',
+  padding: rems(theme, 9, 10),
   borderBottom: `1px solid ${theme.palette.divider}`,
   background: alpha(theme.palette.primary.main, 0.03),
 });
@@ -171,16 +173,16 @@ export const pinnedLabelSx = (theme: Theme): CSSObject => ({
   letterSpacing: '.08em',
   textTransform: 'uppercase',
   color: theme.palette.text.secondary,
-  marginBottom: '7px',
+  marginBottom: rem(theme, 7),
 });
 
-export const chipWrapSx: CSSObject = {
+export const chipWrapSx = (theme: Theme): CSSObject => ({
   display: 'flex',
   flexWrap: 'wrap',
-  gap: '5px',
-  maxHeight: 74,
+  gap: rem(theme, 5),
+  maxHeight: rem(theme, 74),
   overflow: 'auto',
-};
+});
 
 /** A selected-category chip, in the pinned tray and the applied bar alike. */
 export const chipSx = (theme: Theme): CSSObject => {
@@ -188,22 +190,22 @@ export const chipSx = (theme: Theme): CSSObject => {
   return {
     display: 'inline-flex',
     alignItems: 'center',
-    gap: '5px',
+    gap: rem(theme, 5),
     fontSize: rem(theme, 12),
     background: brand.soft,
     color: brand.ink,
     border: `1px solid ${brand.edge}`,
-    borderRadius: '7px',
-    padding: '3px 4px 3px 8px',
+    borderRadius: rem(theme, 7),
+    padding: rems(theme, 3, 4, 3, 8),
     '& button': {
       border: 0,
       background: 'transparent',
       color: 'inherit',
       cursor: 'pointer',
       padding: 0,
-      width: 16,
-      height: 16,
-      borderRadius: '4px',
+      width: rem(theme, 16),
+      height: rem(theme, 16),
+      borderRadius: rem(theme, 4),
       display: 'grid',
       placeItems: 'center',
       opacity: 0.65,
@@ -214,11 +216,11 @@ export const chipSx = (theme: Theme): CSSObject => {
   };
 };
 
-export const listSx = (sheet: boolean): CSSObject => ({
+export const listSx = (theme: Theme, sheet: boolean): CSSObject => ({
   overflow: 'auto',
-  maxHeight: sheet ? METRICS.sheetListMaxHeight : METRICS.listMaxHeight,
-  padding: '6px 6px 8px',
-  scrollPadding: '8px 0',
+  maxHeight: rem(theme, sheet ? METRICS.sheetListMaxHeightPx : METRICS.listMaxHeightPx),
+  padding: rems(theme, 6, 6, 8),
+  scrollPadding: rems(theme, 8, 0),
   overscrollBehavior: 'contain',
 });
 
@@ -226,10 +228,10 @@ export const listSx = (sheet: boolean): CSSObject => ({
 export const rowSx = (theme: Theme, active: boolean, sheet: boolean): CSSObject => ({
   display: 'flex',
   alignItems: 'center',
-  gap: '8px',
-  padding: '0 8px',
-  height: sheet ? METRICS.sheetRowHeight : METRICS.rowHeight,
-  borderRadius: `${METRICS.rowRadius}px`,
+  gap: rem(theme, 8),
+  padding: rems(theme, 0, 8),
+  height: rem(theme, sheet ? METRICS.sheetRowHeightPx : METRICS.rowHeightPx),
+  borderRadius: rem(theme, METRICS.rowRadiusPx),
   cursor: 'pointer',
   userSelect: 'none',
   position: 'relative',
@@ -238,25 +240,25 @@ export const rowSx = (theme: Theme, active: boolean, sheet: boolean): CSSObject
   textAlign: 'left',
   font: 'inherit',
   background: active ? alpha(theme.palette.primary.main, 0.08) : 'transparent',
-  boxShadow: active ? `inset 0 0 0 1px ${alpha(theme.palette.primary.main, 0.3)}` : 'none',
+  boxShadow: active ? `inset 0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.primary.main, 0.3)}` : 'none',
   '&:hover': {
     background: active
       ? alpha(theme.palette.primary.main, 0.08)
       : theme.palette.action.hover,
   },
-  '&:focus-visible': { outline: `2px solid ${theme.palette.primary.main}`, outlineOffset: 1 },
+  '&:focus-visible': { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 1) },
 });
 
 /**
  * How far a row sits in from the panel edge, by depth.
  *
  * One step per level, on top of {@link rowSx}'s own 8px gutter — depth 0 keeps
- * that gutter, and every level below it adds `METRICS.rowIndentStep`. Absolute
- * like the rest of this file: the step is the design's own 14px, not a spacing
- * multiple that would round it.
+ * that gutter, and every level below it adds `METRICS.rowIndentStepPx`. Read
+ * through the type scale like the rest of this file: the step is the design's
+ * own 14px, not a spacing multiple that would round it.
  */
-export const rowIndent = (depth: number): CSSObject =>
-  depth === 0 ? {} : { paddingLeft: `${depth * METRICS.rowIndentStep}px` };
+export const rowIndent = (theme: Theme, depth: number): CSSObject =>
+  depth === 0 ? {} : { paddingLeft: rem(theme, depth * METRICS.rowIndentStepPx) };
 
 export const rowNameSx = (theme: Theme, isCategory: boolean): CSSObject => ({
   flex: 1,
@@ -280,57 +282,57 @@ export const rowMetaSx = (theme: Theme, selected: boolean): CSSObject => ({
 export const markSx = (theme: Theme): CSSObject => ({
   background: uiInk(theme).highlightMark,
   color: 'inherit',
-  borderRadius: '2px',
-  padding: '0 1px',
+  borderRadius: rem(theme, 2),
+  padding: rems(theme, 0, 1),
 });
 
 export const chevronButtonSx = (theme: Theme, open: boolean): CSSObject => ({
-  width: METRICS.chevronButton,
-  height: METRICS.chevronButton,
+  width: rem(theme, METRICS.chevronButtonPx),
+  height: rem(theme, METRICS.chevronButtonPx),
   flex: '0 0 auto',
   border: 0,
   background: 'transparent',
-  borderRadius: '6px',
+  borderRadius: rem(theme, 6),
   display: 'grid',
   placeItems: 'center',
   cursor: 'pointer',
   color: theme.palette.text.secondary,
   padding: 0,
   '&:hover': { background: theme.palette.action.hover, color: theme.palette.text.primary },
-  '& svg': { width: 12, height: 12, transition: 'transform .15s', transform: open ? 'rotate(90deg)' : 'none' },
+  '& svg': { width: rem(theme, 12), height: rem(theme, 12), transition: 'transform .15s', transform: open ? 'rotate(90deg)' : 'none' },
 });
 
 /** The tri-state checkbox: unchecked, checked, or the partial bar. */
 export const checkboxSx = (theme: Theme, state: 'off' | 'partial' | 'on'): CSSObject => ({
-  width: METRICS.boxSize,
-  height: METRICS.boxSize,
+  width: rem(theme, METRICS.boxSizePx),
+  height: rem(theme, METRICS.boxSizePx),
   flex: '0 0 auto',
-  border: `1.5px solid ${state === 'off' ? theme.palette.divider : theme.palette.primary.main}`,
-  borderRadius: '5px',
+  border: `${rem(theme, 1.5)} solid ${state === 'off' ? theme.palette.divider : theme.palette.primary.main}`,
+  borderRadius: rem(theme, 5),
   background: state === 'off' ? theme.palette.background.paper : theme.palette.primary.main,
   display: 'grid',
   placeItems: 'center',
   transition: 'background .1s, border-color .1s',
-  '& svg': { width: 12, height: 12, color: theme.palette.primary.contrastText },
+  '& svg': { width: rem(theme, 12), height: rem(theme, 12), color: theme.palette.primary.contrastText },
 });
 
 /** The partial bar drawn inside a half-selected checkbox. */
 export const checkboxBarSx = (theme: Theme): CSSObject => ({
-  width: 9,
-  height: 2,
+  width: rem(theme, 9),
+  height: rem(theme, 2),
   background: theme.palette.primary.contrastText,
-  borderRadius: '1px',
+  borderRadius: rem(theme, 1),
 });
 
 export const radioSx = (theme: Theme, on: boolean): CSSObject => ({
-  width: METRICS.boxSize,
-  height: METRICS.boxSize,
+  width: rem(theme, METRICS.boxSizePx),
+  height: rem(theme, METRICS.boxSizePx),
   flex: '0 0 auto',
   borderRadius: '50%',
   background: theme.palette.background.paper,
   border: on
-    ? `5.5px solid ${theme.palette.primary.main}`
-    : `1.5px solid ${theme.palette.divider}`,
+    ? `${rem(theme, 5.5)} solid ${theme.palette.primary.main}`
+    : `${rem(theme, 1.5)} solid ${theme.palette.divider}`,
   boxSizing: 'border-box',
 });
 
@@ -341,35 +343,35 @@ export const sectionHeadSx = (theme: Theme): CSSObject => ({
   letterSpacing: '.08em',
   textTransform: 'uppercase',
   color: theme.palette.text.secondary,
-  padding: '9px 8px 6px',
+  padding: rems(theme, 9, 8, 6),
 });
 
 export const footerSx = (theme: Theme): CSSObject => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  gap: '8px',
-  padding: '9px 10px',
+  gap: rem(theme, 8),
+  padding: rems(theme, 9, 10),
   borderTop: `1px solid ${theme.palette.divider}`,
   background: theme.palette.action.hover,
 });
 
 export const emptySx = (theme: Theme): CSSObject => ({
-  padding: '26px 18px',
+  padding: rems(theme, 26, 18),
   textAlign: 'center',
   color: theme.palette.text.secondary,
   '& strong': {
     display: 'block',
     color: theme.palette.text.primary,
     fontSize: rem(theme, 13.5),
-    marginBottom: '4px',
+    marginBottom: rem(theme, 4),
   },
-  '& p': { margin: '0 0 12px', fontSize: rem(theme, 12.5), lineHeight: 1.5 },
+  '& p': { margin: rems(theme, 0, 0, 12), fontSize: rem(theme, 12.5), lineHeight: 1.5 },
 });
 
 /** Skeleton row used while the catalogue loads. */
-export const skeletonSx: CSSObject = {
-  height: METRICS.rowHeight,
-  margin: '4px 6px',
-  borderRadius: `${METRICS.rowRadius}px`,
-};
+export const skeletonSx = (theme: Theme): CSSObject => ({
+  height: rem(theme, METRICS.rowHeightPx),
+  margin: rems(theme, 4, 6),
+  borderRadius: rem(theme, METRICS.rowRadiusPx),
+});

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

@@ -2,6 +2,7 @@
 
 import type { CategorySelectCopy } from "../../../copy";
 import Box from '@mui/material/Box/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 
 import { CaretGlyph } from './CategoryIcons';
 import {
@@ -10,6 +11,7 @@ import {
   triggerCountSx,
   triggerSx,
 } from './CategorySelect.styles';
+import { sxRem } from '../../../tokens/relative';
 
 interface CategoryTriggerProps {
   /** The words this renders. REQUIRED — this package ships no default copy. */
@@ -51,6 +53,7 @@ export function CategoryTrigger({
   dataTestId,
   copy,
 }: CategoryTriggerProps): React.JSX.Element {
+  const theme = useTheme();
   const hasSelection = Boolean(selectionLabel) || (count ?? 0) > 0;
   return (
     <Box
@@ -73,7 +76,7 @@ export function CategoryTrigger({
           whiteSpace: 'nowrap',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
-          maxWidth: 190,
+          maxWidth: sxRem(190),
           flex: fullWidth ? 1 : '0 1 auto',
           textAlign: 'left',
         }}
@@ -107,7 +110,7 @@ export function CategoryTrigger({
           ×
         </Box>
       )}
-      <CaretGlyph style={triggerChevronSx(open) as React.CSSProperties} />
+      <CaretGlyph style={triggerChevronSx(theme, open) as React.CSSProperties} />
     </Box>
   );
 }