@12-apps/ui 6.36.0 → 6.38.0

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>
   );
 }

package/src/components/form/Checkbox/Checkbox.tsx

@@ -2,7 +2,8 @@ import MuiCheckbox from '@mui/material/Checkbox/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import FormControlLabel from '@mui/material/FormControlLabel/index.js';
 import FormHelperText from '@mui/material/FormHelperText/index.js';
-import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
+import { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';
@@ -19,29 +20,33 @@ import {
 } from './Checkbox.metrics';
 import type { CheckboxProps } from './Checkbox.types';
 import { splitTestId } from '../../../platform/test-id';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
-const pulse = keyframes`
+const pulse = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};
   }
   70% {
-    box-shadow: 0 0 0 ${CHECKBOX_PULSE.spread}px ${effectInk(0)};
+    box-shadow: 0 0 0 ${rem(theme, CHECKBOX_PULSE.spread)} ${effectInk(0)};
   }
   100% {
     box-shadow: 0 0 0 0 ${effectInk(0)};
   }
 `;
 
-const glow = keyframes`
+const glow = (theme: Theme) => keyframes`
   0%, 100% {
-    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.from}px ${effectInk(CHECKBOX_GLOW.alpha.from)};
+    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.from)} ${effectInk(CHECKBOX_GLOW.alpha.from)};
   }
   50% {
-    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.to}px ${effectInk(CHECKBOX_GLOW.alpha.to)};
+    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.to)} ${effectInk(CHECKBOX_GLOW.alpha.to)};
   }
 `;
 
+/** A variant's corner: a design-px number through the type scale, a percentage as it is. */
+const cornerOf = (theme: Theme, radius: number | string | undefined): string | undefined =>
+  typeof radius === 'number' ? rem(theme, radius) : radius;
+
 const StyledCheckbox = styled(MuiCheckbox, {
   shouldForwardProp: (prop) => !['customVariant', 'ripple', 'glow', 'pulse'].includes(prop as string),
 })<{ 
@@ -53,13 +58,13 @@ const StyledCheckbox = styled(MuiCheckbox, {
   ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({
     ...(customVariant === 'rounded' && {
       '& .MuiSvgIcon-root': {
-        borderRadius: CHECKBOX_VARIANT.rounded.radius,
+        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.rounded.radius),
       },
     }),
     
     ...(customVariant === 'toggle' && {
       '& .MuiSvgIcon-root': {
-        borderRadius: `${CHECKBOX_VARIANT.toggle.radius}px`,
+        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.toggle.radius),
         transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`,
       },
     }),
@@ -72,10 +77,10 @@ const StyledCheckbox = styled(MuiCheckbox, {
         },
       }),
       ...(glowProp && {
-        animation: `${glow} ${CHECKBOX_GLOW.ms / 1000}s ease-in-out infinite`,
+        animation: `${glow(theme)} ${CHECKBOX_GLOW.ms / 1000}s ease-in-out infinite`,
       }),
       ...(pulseProp && {
-        animation: `${pulse} ${CHECKBOX_PULSE.ms / 1000}s infinite`,
+        animation: `${pulse(theme)} ${CHECKBOX_PULSE.ms / 1000}s infinite`,
       }),
       '&:hover': {
         backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA),
@@ -96,7 +101,7 @@ const StyledFormControlLabel = styled(FormControlLabel, {
   shouldForwardProp: (prop) => prop !== 'error',
 })<{ error?: boolean }>(
   ({ theme, error }) => ({
-    marginLeft: CHECKBOX_LABEL.marginLeft,
+    marginLeft: rem(theme, CHECKBOX_LABEL.marginLeft),
     '& .MuiFormControlLabel-label': {
       color: error ? theme.palette.error.main : theme.palette.text.primary,
       fontSize: rem(theme, CHECKBOX_LABEL.fontSize),
@@ -123,6 +128,7 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
       disabled,
       ...others
     } = resolveCheckboxProps(rawProps);
+    const theme = useTheme();
     const isDisabled = disabled || loading;
     const { testId: dataTestId, rest: props } = splitTestId(others);
     const testId = makeTestId(dataTestId);
@@ -141,13 +147,13 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
         />
         {loading && (
           <CircularProgress
-            size={CHECKBOX_SPINNER.size}
+            size={rem(theme, CHECKBOX_SPINNER.size)}
             sx={{
               position: 'absolute',
               top: '50%',
               left: '50%',
-              marginTop: `${CHECKBOX_SPINNER.offset}px`,
-              marginLeft: `${CHECKBOX_SPINNER.offset}px`,
+              marginTop: sxRem(CHECKBOX_SPINNER.offset),
+              marginLeft: sxRem(CHECKBOX_SPINNER.offset),
               color: 'primary.main',
             }}
           />

package/src/components/form/CodeEditor/CodeEditor.helpers.ts

@@ -7,7 +7,6 @@ export const makeTestId =
     dataTestId ? `${dataTestId}-${suffix}` : `code-editor-${suffix}`;
 
 type CodeEditorDefaultedKeys =
-  | 'height'
   | 'theme'
   | 'readOnly'
   | 'lineNumbers'
@@ -21,7 +20,6 @@ type ResolvedCodeEditorProps = CodeEditorProps &
   Required<Pick<CodeEditorProps, CodeEditorDefaultedKeys>>;
 
 const CODE_EDITOR_DEFAULTS: Pick<CodeEditorProps, CodeEditorDefaultedKeys> = {
-  height: '400px',
   theme: 'auto',
   readOnly: false,
   lineNumbers: true,

package/src/components/form/CodeEditor/CodeEditor.md

@@ -74,7 +74,7 @@ function EditorWithSave() {
 
 ### Optional Props
 
-- **`height`** (`string`): Editor height (default: `'400px'`)
+- **`height`** (`string`): Editor height (default: the design's 400px through the type scale — `25rem` at MUI's defaults)
 - **`theme`** (`EditorTheme`): Color theme (default: `'auto'`)
   - Options: `'light' | 'dark' | 'auto'`
 - **`onChange`** (`(value: string) => void`): Callback when content changes

package/src/components/form/CodeEditor/CodeEditor.tsx

@@ -21,8 +21,8 @@ const EditorContainer = styled(Paper)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-  backdropFilter: 'blur(10px)',
-  WebkitBackdropFilter: 'blur(10px)',
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${fieldEdge(theme)}`,
   borderRadius: fieldRadius(theme),
   overflow: 'hidden' }));
@@ -31,7 +31,7 @@ const EditorWrapper = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'fullscreen' })<{ fullscreen: boolean }>(({ theme, fullscreen }) => ({
   position: 'relative',
   flex: 1,
-  minHeight: 200,
+  minHeight: rem(theme, 200),
   ...(fullscreen && {
     position: 'fixed',
     top: 0,
@@ -102,7 +102,7 @@ const buildEditorOptions = ({
     renderLineHighlight: 'all',
     selectOnLineNumbers: true,
     roundedSelection: true,
-    padding: { top: 16, bottom: 16 },
+    padding: { top: remPx(theme, 16), bottom: remPx(theme, 16) },
     fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace',
     fontLigatures: true });
 
@@ -161,7 +161,7 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
         )}
 
         <Editor
-          height={editor.isFullscreen ? '100vh' : height}
+          height={editor.isFullscreen ? '100vh' : (height ?? rem(muiTheme, 400))}
           language={language}
           value={value}
           onChange={(newValue) => onChange?.(newValue || '')}

package/src/components/form/CodeEditor/CodeEditor.types.ts

@@ -14,7 +14,7 @@ export interface CodeEditorProps {
   copy: CodeEditorCopy;
   /** Programming language for syntax highlighting */
   language: EditorLanguage;
-  /** Editor height (default: '400px') */
+  /** Editor height (default: the design's 400px through the type scale — `25rem` at MUI's defaults) */
   height?: string;
   /** Editor color theme (default: 'auto') */
   theme?: EditorTheme;

package/src/components/form/Command/Command.hooks.ts

@@ -14,7 +14,6 @@ type CommandDefaultedKeys =
   | 'pulse'
   | 'loading'
   | 'disabled'
-  | 'maxHeight'
   | 'emptyMessage'
   | 'showCategories'
   | 'showShortcuts'
@@ -37,7 +36,6 @@ const COMMAND_DEFAULTS: Pick<CommandProps, CommandDefaultedKeys> = {
   pulse: false,
   loading: false,
   disabled: false,
-  maxHeight: 400,
   emptyMessage: 'No results found',
   showCategories: true,
   showShortcuts: true,