@12-apps/ui 6.36.0 → 6.38.0

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

@@ -9,11 +9,11 @@ type Variant = NonNullable<MenubarProps['variant']>;
 type Color = NonNullable<MenubarProps['color']>;
 
 const SIZES: Record<Size, (theme: Theme) => CSSObject> = {
-  xs: (theme) => ({ minHeight: 40, fontSize: rem(theme, 12), padding: theme.spacing(0.5, 1) }),
-  sm: (theme) => ({ minHeight: 48, fontSize: rem(theme, 14), padding: theme.spacing(0.75, 1.5) }),
-  md: (theme) => ({ minHeight: 56, fontSize: rem(theme, 16), padding: theme.spacing(1, 2) }),
-  lg: (theme) => ({ minHeight: 64, fontSize: rem(theme, 18), padding: theme.spacing(1.25, 2.5) }),
-  xl: (theme) => ({ minHeight: 72, fontSize: rem(theme, 20), padding: theme.spacing(1.5, 3) }),
+  xs: (theme) => ({ minHeight: rem(theme, 40), fontSize: rem(theme, 12), padding: theme.spacing(0.5, 1) }),
+  sm: (theme) => ({ minHeight: rem(theme, 48), fontSize: rem(theme, 14), padding: theme.spacing(0.75, 1.5) }),
+  md: (theme) => ({ minHeight: rem(theme, 56), fontSize: rem(theme, 16), padding: theme.spacing(1, 2) }),
+  lg: (theme) => ({ minHeight: rem(theme, 64), fontSize: rem(theme, 18), padding: theme.spacing(1.25, 2.5) }),
+  xl: (theme) => ({ minHeight: rem(theme, 72), fontSize: rem(theme, 20), padding: theme.spacing(1.5, 3) }),
 };
 
 export const sizeStyles = (theme: Theme, size: Size): CSSObject =>
@@ -53,7 +53,7 @@ interface MenubarStyleFlags {
 const SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSObject> = {
   glass: (theme, { glass }) => ({
     backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),
-    backdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
     borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
   }),
 
@@ -69,24 +69,24 @@ const SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSO
   },
 
   elevated: (theme, { blur, elevation }) => ({
-    ...(blur && { backdropFilter: 'blur(10px)' }),
+    ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }),
     boxShadow: theme.shadows[elevation],
   }),
 
-  minimal: (_theme, { blur }) => ({
-    ...(blur && { backdropFilter: 'blur(10px)' }),
+  minimal: (theme, { blur }) => ({
+    ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }),
     boxShadow: 'none',
     borderBottom: 'none',
   }),
 
   bordered: (theme, { blur, color }) => ({
-    ...(blur && { backdropFilter: 'blur(10px)' }),
-    borderBottom: `2px solid ${
+    ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }),
+    borderBottom: `${rem(theme, 2)} solid ${
       color === 'neutral' ? theme.palette.divider : accentFor(theme, color).main
     }`,
   }),
 
-  default: (_theme, { blur }) => ({ ...(blur && { backdropFilter: 'blur(10px)' }) }),
+  default: (theme, { blur }) => ({ ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }) }),
 };
 
 export const barStyles = (theme: Theme, flags: MenubarStyleFlags): CSSObject => {
@@ -98,7 +98,7 @@ export const barStyles = (theme: Theme, flags: MenubarStyleFlags): CSSObject =>
     }),
     ...sizeStyles(theme, size),
     ...colorStyles(theme, color, transparent),
-    ...(glow && { boxShadow: `0 0 20px ${alpha(accentOf(theme, color), 0.4)}` }),
+    ...(glow && { boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentOf(theme, color), 0.4)}` }),
     ...(pulse && {
       animation: 'pulse 2s infinite',
       '@keyframes pulse': {

package/src/components/form/Menubar/Menubar.toolbar.tsx

@@ -1,12 +1,13 @@
 import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Toolbar from '@mui/material/Toolbar/index.js';
-import type { CSSObject } from '@mui/material/styles/index.js';
+import { useTheme, type CSSObject } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { MenubarItemView } from './Menubar.item';
 import { MenubarSeparator } from './Menubar.separator';
 import type { MenubarItem, MenubarProps } from './Menubar.types';
+import { rem } from '../../../tokens/relative';
 
 export interface MenubarToolbarProps {
   ariaLabel: string;
@@ -52,6 +53,7 @@ export const MenubarToolbar: React.FC<MenubarToolbarProps> = ({
   onFocus,
   onBlur,
 }) => {
+  const theme = useTheme();
   const isVertical = orientation === 'vertical';
 
   return (
@@ -69,7 +71,7 @@ export const MenubarToolbar: React.FC<MenubarToolbarProps> = ({
       {logo && <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>{logo}</Box>}
 
       {loading ? (
-        <CircularProgress size={20} color="inherit" />
+        <CircularProgress size={rem(theme, 20)} color="inherit" />
       ) : (
         <Box
           sx={{

package/src/components/form/PasswordStrength/PasswordStrength.tsx

@@ -7,6 +7,7 @@ import Fade from '@mui/material/Fade/index.js';
 import LinearProgress from '@mui/material/LinearProgress/index.js';
 import Stack from '@mui/material/Stack/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';
 import type { FC} from 'react';
 import React, { useMemo } from 'react';
@@ -22,7 +23,7 @@ import {
   SuggestionsList } from './PasswordStrength.helpers';
 import type { PasswordRequirements, PasswordStrengthProps } from './PasswordStrength.types';
 import type { PasswordStrengthCopy } from '../../../copy';
-import { rem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 interface RequirementIconProps {
   met: boolean;
@@ -46,9 +47,9 @@ const pulseAnimation = keyframes`
   }
 `;
 
-const slideInAnimation = keyframes`
+const slideInAnimation = (theme: Theme) => keyframes`
   from {
-    transform: translateX(-10px);
+    transform: translateX(${rem(theme, -10)});
     opacity: 0;
   }
   to {
@@ -63,8 +64,8 @@ const StrengthContainer = styled(Box, {
   width: '100%',
   padding: theme.spacing(2),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
-  backdropFilter: 'blur(10px)',
-  WebkitBackdropFilter: 'blur(10px)',
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   borderRadius: theme.shape.borderRadius * 2,
   transition: animated ? 'all 0.3s ease' : 'none' }));
@@ -85,14 +86,14 @@ const StrengthBar = styled(LinearProgress, {
   };
 
   return {
-    height: 8,
-    borderRadius: 4,
+    height: rem(theme, 8),
+    borderRadius: rem(theme, 4),
     backgroundColor: alpha(theme.palette.action.disabled, 0.1),
     '& .MuiLinearProgress-bar': {
-      borderRadius: 4,
+      borderRadius: rem(theme, 4),
       background: getGradient(),
       transition: animated ? 'all 0.3s ease' : 'none',
-      boxShadow: `0 2px 8px ${alpha(getColor(), 0.3)}` } };
+      boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(getColor(), 0.3)}` } };
 });
 
 const RequirementItem = styled(Box, {
@@ -106,7 +107,7 @@ const RequirementItem = styled(Box, {
     ? alpha(theme.palette.success.main, 0.08)
     : alpha(theme.palette.action.disabled, 0.04),
   transition: animated ? 'all 0.3s ease' : 'none',
-  animation: animated ? `${slideInAnimation} 0.3s ease` : 'none',
+  animation: animated ? `${slideInAnimation(theme)} 0.3s ease` : 'none',
   '& svg': {
     fontSize: rem(theme, 16),
     color: met ? theme.palette.success.main : theme.palette.text.disabled } }));
@@ -140,15 +141,15 @@ const Step = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'active' && prop !== 'completed' && prop !== 'animated' })<{ active: boolean; completed: boolean; animated?: boolean }>(
   ({ theme, active, completed, animated }) => ({
     flex: 1,
-    height: 6,
-    borderRadius: 3,
+    height: rem(theme, 6),
+    borderRadius: rem(theme, 3),
     background: completed
       ? `linear-gradient(90deg, ${theme.palette.success.main} 0%, ${theme.palette.success.light} 100%)`
       : active
         ? `linear-gradient(90deg, ${theme.palette.warning.main} 0%, ${theme.palette.warning.light} 100%)`
         : alpha(theme.palette.action.disabled, 0.2),
     transition: animated ? 'all 0.3s ease' : 'none',
-    boxShadow: completed ? `0 2px 8px ${alpha(theme.palette.success.main, 0.3)}` : 'none' }),
+    boxShadow: completed ? `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.success.main, 0.3)}` : 'none' }),
 );
 
 // The three indicator variants, out of the component body so the render keeps
@@ -166,8 +167,8 @@ const StrengthIndicator: React.FC<{
         <Box sx={{ position: 'relative', display: 'inline-flex' }}>
           <Box
             sx={{
-              width: 80,
-              height: 80,
+              width: sxRem(80),
+              height: sxRem(80),
               borderRadius: '50%',
               background: `conic-gradient(
                 ${theme.palette.success.main} 0deg ${strength * 3.6}deg,
@@ -176,12 +177,12 @@ const StrengthIndicator: React.FC<{
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              boxShadow: `0 4px 12px ${alpha(theme.palette.success.main, strength / 200)}` }}
+              boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.success.main, strength / 200)}` }}
           >
             <Box
               sx={{
-                width: 64,
-                height: 64,
+                width: sxRem(64),
+                height: sxRem(64),
                 borderRadius: '50%',
                 background: theme.palette.background.paper,
                 display: 'flex',

package/src/components/form/PhoneInput/PhoneInput.tsx

@@ -20,7 +20,7 @@ import type { PhoneInputCopy } from '../../../copy';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { fieldControlStyles, fieldTextFieldStyles } from '../../../tokens/field-height';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 // Country data with expanded support
 
@@ -33,8 +33,8 @@ const GlassTextField = styled(TextField)(({ theme }) => ({
   '& .MuiOutlinedInput-root': {
     borderRadius: fieldRadius(theme),
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
-    backdropFilter: 'blur(10px)',
-    WebkitBackdropFilter: 'blur(10px)',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
     border: `1px solid ${fieldEdge(theme)}`,
     transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),
     '&:hover': {
@@ -42,7 +42,7 @@ const GlassTextField = styled(TextField)(({ theme }) => ({
       borderColor: theme.palette.primary.main },
     '&.Mui-focused': {
       background: theme.palette.background.paper,
-      boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.25)}` },
+      boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.25)}` },
     '& fieldset': {
       border: 'none' } },
   '& .MuiInputLabel-root': {
@@ -62,10 +62,10 @@ const CountrySelector = styled(Box)(({ theme }) => ({
 const CountryMenu = styled(Menu)(({ theme }) => ({
   '& .MuiPaper-root': {
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-    backdropFilter: 'blur(20px)',
-    WebkitBackdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
-    maxHeight: 400 } }));
+    maxHeight: rem(theme, 400) } }));
 
 // Helper functions with enhanced validation
 // The text field itself with its two adornments. Split out so PhoneInput is
@@ -138,7 +138,7 @@ const PhoneField: React.FC<{
           endAdornment: <ValidityAdornment icon={icon} isValid={isValid} /> }}
         sx={{
           '& input': {
-            letterSpacing: '0.5px' } }}
+            letterSpacing: sxRem(0.5) } }}
       />
 );
 
@@ -253,7 +253,7 @@ const CountryPicker: React.FC<{
                 '&:hover': {
                   background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)` } }}
             >
-              <ListItemIcon sx={{ minWidth: 36 }}>
+              <ListItemIcon sx={{ minWidth: sxRem(36) }}>
                 <Typography variant="h5" component="span">
                   {country.flag}
                 </Typography>

package/src/components/form/RadioGroup/RadioGroup.animations.ts

@@ -1,21 +1,24 @@
 import { keyframes } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 
-export const glowAnimation = keyframes`
+import { rem } from '../../../tokens/relative';
+
+export const glowAnimation = (theme: Theme) => keyframes`
   0% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
   50% {
-    box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
+    box-shadow: 0 0 ${rem(theme, 15)} currentColor, 0 0 ${rem(theme, 25)} currentColor;
   }
   100% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
 `;
 
-export const slideAnimation = keyframes`
+export const slideAnimation = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(-20px);
+    transform: translateX(${rem(theme, -20)});
   }
   to {
     opacity: 1;

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

@@ -7,11 +7,13 @@ import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, controlNeutral } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, remPx, rems } from '../../../tokens/relative';
 
-/** The segment track's padding and border: its corner is the segments' plus these. */
-const SEGMENT_TRACK_PADDING = 4;
-const SEGMENT_TRACK_BORDER = 1;
+/**
+ * The segment track's padding (4px at the design scale); its border is the
+ * field hairline. Its corner is the segments' radius plus both.
+ */
+const segmentTrackPadding = (theme: Theme): string => rem(theme, 4);
 
 interface ColorPalette {
   main: string;
@@ -65,28 +67,28 @@ type SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 const pickSize = <T,>(map: Record<SizeKey, T>, size: string): T => map[size as SizeKey] ?? map.md;
 
-const CARD_SIZES: Record<SizeKey, CSSObject> = {
-  xs: { padding: '8px', minHeight: '60px' },
-  sm: { padding: '12px', minHeight: '70px' },
-  md: { padding: '16px', minHeight: '80px' },
-  lg: { padding: '20px', minHeight: '90px' },
-  xl: { padding: '24px', minHeight: '100px' },
+const CARD_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {
+  xs: (theme) => ({ padding: rem(theme, 8), minHeight: rem(theme, 60) }),
+  sm: (theme) => ({ padding: rem(theme, 12), minHeight: rem(theme, 70) }),
+  md: (theme) => ({ padding: rem(theme, 16), minHeight: rem(theme, 80) }),
+  lg: (theme) => ({ padding: rem(theme, 20), minHeight: rem(theme, 90) }),
+  xl: (theme) => ({ padding: rem(theme, 24), minHeight: rem(theme, 100) }),
 };
 
 const BUTTON_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {
-  xs: (theme) => ({ padding: '6px 12px', fontSize: rem(theme, 12), minHeight: '32px' }),
-  sm: (theme) => ({ padding: '8px 16px', fontSize: rem(theme, 14), minHeight: '36px' }),
-  md: (theme) => ({ padding: '10px 20px', fontSize: rem(theme, 16), minHeight: '40px' }),
-  lg: (theme) => ({ padding: '12px 24px', fontSize: rem(theme, 18), minHeight: '44px' }),
-  xl: (theme) => ({ padding: '14px 28px', fontSize: rem(theme, 20), minHeight: '48px' }),
+  xs: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 12), minHeight: rem(theme, 32) }),
+  sm: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 14), minHeight: rem(theme, 36) }),
+  md: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 16), minHeight: rem(theme, 40) }),
+  lg: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 18), minHeight: rem(theme, 44) }),
+  xl: (theme) => ({ padding: rems(theme, 14, 28), fontSize: rem(theme, 20), minHeight: rem(theme, 48) }),
 };
 
 const SEGMENT_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {
-  xs: (theme) => ({ padding: '4px 8px', fontSize: rem(theme, 12) }),
-  sm: (theme) => ({ padding: '6px 12px', fontSize: rem(theme, 14) }),
-  md: (theme) => ({ padding: '8px 16px', fontSize: rem(theme, 16) }),
-  lg: (theme) => ({ padding: '10px 20px', fontSize: rem(theme, 18) }),
-  xl: (theme) => ({ padding: '12px 24px', fontSize: rem(theme, 20) }),
+  xs: (theme) => ({ padding: rems(theme, 4, 8), fontSize: rem(theme, 12) }),
+  sm: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 14) }),
+  md: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 16) }),
+  lg: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 18) }),
+  xl: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 20) }),
 };
 
 export interface SurfaceFlags {
@@ -105,9 +107,9 @@ export const formLabelSx = (theme: Theme, glass?: boolean, error?: boolean): CSS
   color: error ? theme.palette.error.main : theme.palette.text.primary,
   ...(glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: 'blur(10px)',
-    padding: '8px 12px',
-    borderRadius: '8px',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    padding: rems(theme, 8, 12),
+    borderRadius: rem(theme, 8),
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     display: 'inline-block',
   }),
@@ -120,11 +122,11 @@ const cardBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSS
   return {
     cursor: 'pointer',
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
+    border: `${rem(theme, 2)} solid ${selected ? palette.main : fieldEdge(theme)}`,
     backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,
     position: 'relative' as const,
     overflow: 'hidden' as const,
-    ...(animated && { animation: `${slideAnimation} 0.4s ease-out` }),
+    ...(animated && { animation: `${slideAnimation(theme)} 0.4s ease-out` }),
     // A radial wash that grows from the centre as the card is selected or hovered.
     '&::before': {
       content: '""',
@@ -141,12 +143,12 @@ const cardBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSS
     '&:hover': {
       borderColor: palette.main,
       backgroundColor: alpha(palette.main, 0.02),
-      transform: 'translateY(-2px) scale(1.02)',
-      boxShadow: `${theme.shadows[4]}, 0 10px 30px -5px ${alpha(palette.main, 0.2)}`,
+      transform: `translateY(${rem(theme, -2)}) scale(1.02)`,
+      boxShadow: `${theme.shadows[4]}, 0 ${rems(theme, 10, 30, -5)} ${alpha(palette.main, 0.2)}`,
       '&::before': { width: '120%', height: '120%' },
     },
     '&:active': { transform: 'scale(0.98)' },
-    ...pickSize(CARD_SIZES, customSize),
+    ...pickSize(CARD_SIZES, customSize)(theme),
   };
 };
 
@@ -160,7 +162,7 @@ export const radioCardSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {
       backgroundColor: selected
         ? alpha(palette.main, 0.1)
         : alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     }),
     ...(gradient &&
@@ -170,8 +172,8 @@ export const radioCardSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {
       }),
     ...(glow &&
       selected && {
-        animation: `${glowAnimation} 2s ease-in-out infinite`,
-        boxShadow: `0 0 15px ${alpha(palette.main, 0.4)}`,
+        animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+        boxShadow: `0 0 ${rem(theme, 15)} ${alpha(palette.main, 0.4)}`,
       }),
   };
 };
@@ -211,8 +213,8 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
     '&:hover': {
       borderColor: palette.main,
       backgroundColor: selected ? palette.dark : alpha(palette.main, 0.1),
-      transform: 'translateY(-1px) scale(1.02)',
-      boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`,
+      transform: `translateY(${rem(theme, -1)}) scale(1.02)`,
+      boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(palette.main, 0.2)}`,
     },
     '&:active': { transform: 'scale(0.98)' },
     ...pickSize(BUTTON_SIZES, customSize)(theme),
@@ -233,7 +235,7 @@ export const buttonRadioSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {
       backgroundColor: selected
         ? alpha(palette.main, 0.8)
         : alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     }),
     ...(gradient &&
@@ -252,16 +254,16 @@ export const segmentContainerSx = (
   const palette = getColorFromTheme(theme, customColor);
 
   return {
-    padding: `${SEGMENT_TRACK_PADDING}px`,
+    padding: segmentTrackPadding(theme),
     // Concentric with the segments inside it, which take the field radius.
-    borderRadius: fieldRadius(theme) + SEGMENT_TRACK_PADDING + SEGMENT_TRACK_BORDER,
+    borderRadius: fieldRadius(theme) + remPx(theme, 4) + FIELD_BORDER_WIDTH,
     backgroundColor: glass
       ? alpha(theme.palette.background.paper, 0.1)
       : alpha(palette.main, 0.05),
-    backdropFilter: glass ? 'blur(20px)' : 'none',
-    border: `${SEGMENT_TRACK_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}`,
+    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',
+    border: `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}`,
     display: 'flex',
-    gap: '2px',
+    gap: rem(theme, 2),
   };
 };
 
@@ -269,13 +271,13 @@ export const segmentContainerSx = (
  * An underline that grows from the centre outwards, and is already full width
  * when the segment is the selected one.
  */
-const segmentUnderline = (color: string, selected: boolean): CSSObject => ({
+const segmentUnderline = (theme: Theme, color: string, selected: boolean): CSSObject => ({
   content: '""',
   position: 'absolute',
   bottom: 0,
   left: selected ? 0 : '50%',
   width: selected ? '100%' : 0,
-  height: '2px',
+  height: rem(theme, 2),
   backgroundColor: color,
   transition: 'all 0.3s ease',
   transform: selected ? 'translateX(0)' : 'translateX(-50%)',
@@ -293,12 +295,12 @@ export const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject =>
     backgroundColor: selected ? theme.palette.background.paper : 'transparent',
     color: selected ? palette.main : theme.palette.text.secondary,
     boxShadow: selected
-      ? `${theme.shadows[2]}, inset 0 1px 3px ${alpha(palette.main, 0.1)}`
+      ? `${theme.shadows[2]}, inset 0 ${rems(theme, 1, 3)} ${alpha(palette.main, 0.1)}`
       : 'none',
     position: 'relative' as const,
     overflow: 'hidden' as const,
     ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),
-    '&::before': segmentUnderline(palette.main, Boolean(selected)),
+    '&::before': segmentUnderline(theme, palette.main, Boolean(selected)),
     '&:hover': {
       backgroundColor: selected
         ? theme.palette.background.paper

package/src/components/form/RichTextEditor/RichTextEditor.tsx

@@ -30,8 +30,7 @@ const RICH_TEXT_DEFAULTS: Partial<RichTextEditorProps> = {
   placeholder: 'Start typing...',
   disabled: false,
   readOnly: false,
-  toolbar: {},
-  height: 300 };
+  toolbar: {} };
 
 // Strips explicitly-undefined props before the merge, so `prop={undefined}`
 // still falls back to the default as a destructuring default would.
@@ -43,7 +42,9 @@ const definedProps = (props: RichTextEditorProps): Partial<RichTextEditorProps>
 // Simple inline formats are a tag swap; lists and the value-carrying formats
 // need their own handling. This was one nine-case switch.
 const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string, height?: string | number) => ({
-  minHeight: typeof height === 'number' ? `${height}px` : height,
+  // A number is design px, converted here where it is read (300 when the
+  // caller gives none); a string is any CSS length, used as-is.
+  minHeight: typeof height === 'string' ? height : rem(theme, height ?? 300),
   p: 2,
   outline: 'none',
   cursor: disabled ? 'not-allowed' : 'text',
@@ -52,12 +53,12 @@ const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string,
     color: theme.palette.text.disabled,
     pointerEvents: 'none' },
   '& p': {
-    margin: '8px 0',
+    margin: `${rem(theme, 8)} 0`,
     '&:first-of-type': { marginTop: 0 },
     '&:last-of-type': { marginBottom: 0 } },
   '& ul, & ol': { marginLeft: theme.spacing(2) },
   '& blockquote': {
-    borderLeft: `4px solid ${theme.palette.primary.main}`,
+    borderLeft: `${rem(theme, 4)} solid ${theme.palette.primary.main}`,
     paddingLeft: theme.spacing(2),
     margin: `${theme.spacing(1)} 0`,
     fontStyle: 'italic',
@@ -78,7 +79,7 @@ const shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({
   transition: 'border-color 0.2s ease-in-out',
   ...(isFocused && {
     borderColor: theme.palette.primary.main,
-    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}` }),
+    boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.2)}` }),
   ...(disabled && {
     backgroundColor: theme.palette.action.disabledBackground,
     color: theme.palette.text.disabled }) });

package/src/components/form/RichTextEditor/RichTextEditorToolbar.tsx

@@ -20,6 +20,8 @@ import React from 'react';
 
 import type { ToolbarConfig } from './RichTextEditor.types';
 
+import { sxRem } from '../../../tokens/relative';
+
 type ResolvedToolbar = Required<Omit<ToolbarConfig, 'customItems'>> &
   Pick<ToolbarConfig, 'customItems'>;
 
@@ -148,7 +150,7 @@ export const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({
       variant="dense"
       data-testid="editor-toolbar"
       sx={{
-        minHeight: 48,
+        minHeight: sxRem(48),
         px: 1,
         borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
         backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8),

package/src/components/form/SearchPalette/SearchPalette.parts.tsx

@@ -9,10 +9,11 @@ import List from '@mui/material/List/index.js';
 import ListItemButton from '@mui/material/ListItemButton/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { SearchFilterChip, SearchResultLead } from './SearchPalette.types';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** Bold the first case-insensitive occurrence of `query` within `text`. */
 export function highlight(text: string, query: string): React.ReactNode {
@@ -39,19 +40,19 @@ export function Lead({ lead }: { lead: SearchResultLead | undefined }): React.JS
         component="img"
         src={lead.src}
         alt={lead.alt ?? ''}
-        sx={{ width: 32, height: 32, borderRadius: 1, objectFit: 'cover', flexShrink: 0 }}
+        sx={{ width: sxRem(32), height: sxRem(32), borderRadius: 1, objectFit: 'cover', flexShrink: 0 }}
       />
     );
   }
   if (lead.kind === 'avatar') {
     return (
-      <Avatar src={lead.src} alt={lead.alt ?? ''} sx={{ width: 32, height: 32, fontSize: sxRem(13.6) }}>
+      <Avatar src={lead.src} alt={lead.alt ?? ''} sx={{ width: sxRem(32), height: sxRem(32), fontSize: sxRem(13.6) }}>
         {lead.fallback}
       </Avatar>
     );
   }
   return (
-    <Box sx={{ display: 'flex', width: 32, justifyContent: 'center', flexShrink: 0, color: 'text.secondary' }}>
+    <Box sx={{ display: 'flex', width: sxRem(32), justifyContent: 'center', flexShrink: 0, color: 'text.secondary' }}>
       {lead.node}
     </Box>
   );
@@ -77,6 +78,7 @@ export function PaletteInput(props: {
   onChange: (v: string) => void;
   onKeyDown: (e: React.KeyboardEvent) => void;
 }): React.JSX.Element {
+  const theme = useTheme();
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, px: 2, py: 1.5 }}>
       <SearchIcon fontSize="small" sx={{ color: 'text.secondary', flexShrink: 0 }} />
@@ -119,7 +121,7 @@ export function PaletteInput(props: {
           sx={{ fontSize: sxRem(16) }}
         />
       </Box>
-      {props.isLoading && <CircularProgress size={18} sx={{ flexShrink: 0 }} />}
+      {props.isLoading && <CircularProgress size={rem(theme, 18)} sx={{ flexShrink: 0 }} />}
     </Box>
   );
 }
@@ -311,7 +313,7 @@ export function PaletteBody<T>(view: BodyView<T>): React.JSX.Element | null {
  */
 export const PALETTE_CARD_SX = {
   width: '100%',
-  maxWidth: 640,
+  maxWidth: sxRem(640),
   maxHeight: '100%',
   borderRadius: 2,
   overflow: 'hidden',