@12-apps/ui 6.34.0 → 6.35.0

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

@@ -12,6 +12,7 @@ import React from 'react';
 
 import { sizeStyles } from './Menubar.styles';
 import type { MenubarItem, MenubarProps } from './Menubar.types';
+import { sxRem } from '../../../tokens/relative';
 
 export interface MenubarItemViewProps {
   item: MenubarItem;
@@ -42,7 +43,7 @@ const DropdownItem: React.FC<{ child: MenubarItem; onActivate: (item: MenubarIte
           label={child.shortcut}
           size="small"
           variant="outlined"
-          sx={{ ml: 2, height: 20, fontSize: '0.7rem' }}
+          sx={{ ml: 2, height: 20, fontSize: sxRem(11.2) }}
         />
       )}
     </MenuItem>

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

@@ -2,18 +2,18 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { MenubarProps } from './Menubar.types';
-import { accentFor} from '../../../tokens/scales';
+import { accentFor, rem } from '../../../tokens/scales';
 
 type Size = NonNullable<MenubarProps['size']>;
 type Variant = NonNullable<MenubarProps['variant']>;
 type Color = NonNullable<MenubarProps['color']>;
 
 const SIZES: Record<Size, (theme: Theme) => CSSObject> = {
-  xs: (theme) => ({ minHeight: 40, fontSize: '0.75rem', padding: theme.spacing(0.5, 1) }),
-  sm: (theme) => ({ minHeight: 48, fontSize: '0.875rem', padding: theme.spacing(0.75, 1.5) }),
-  md: (theme) => ({ minHeight: 56, fontSize: '1rem', padding: theme.spacing(1, 2) }),
-  lg: (theme) => ({ minHeight: 64, fontSize: '1.125rem', padding: theme.spacing(1.25, 2.5) }),
-  xl: (theme) => ({ minHeight: 72, fontSize: '1.25rem', padding: theme.spacing(1.5, 3) }),
+  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) }),
 };
 
 export const sizeStyles = (theme: Theme, size: Size): CSSObject =>

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

@@ -114,12 +114,14 @@ export const buildSuggestions = (
   );
 
 // Rendered by PasswordStrength; depends on nothing styled, so it lives beside
-// the pure helpers rather than in the component file.
-export const SuggestionsList: React.FC<{ suggestions: string[]; heading: string }> = ({
-  suggestions,
-  heading,
-}) => (
-  <Box>
+// the pure helpers rather than in the component file. `forwardRef` because it
+// is `Fade`'s child, and Fade reads `scrollTop` off the node it is handed.
+// Only the ref: Fade's injected `style` (opacity/visibility) is still dropped.
+export const SuggestionsList = React.forwardRef<
+  HTMLDivElement,
+  { suggestions: string[]; heading: string }
+>(({ suggestions, heading }, ref) => (
+  <Box ref={ref}>
     <Typography variant="caption" color="text.secondary" fontWeight="medium">
       {heading}
     </Typography>
@@ -131,4 +133,5 @@ export const SuggestionsList: React.FC<{ suggestions: string[]; heading: string
       ))}
     </Box>
   </Box>
-);
+));
+SuggestionsList.displayName = 'SuggestionsList';

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

@@ -22,6 +22,7 @@ import {
   SuggestionsList } from './PasswordStrength.helpers';
 import type { PasswordRequirements, PasswordStrengthProps } from './PasswordStrength.types';
 import type { PasswordStrengthCopy } from '../../../copy';
+import { rem } from '../../../tokens/relative';
 
 interface RequirementIconProps {
   met: boolean;
@@ -107,7 +108,7 @@ const RequirementItem = styled(Box, {
   transition: animated ? 'all 0.3s ease' : 'none',
   animation: animated ? `${slideInAnimation} 0.3s ease` : 'none',
   '& svg': {
-    fontSize: '1rem',
+    fontSize: rem(theme, 16),
     color: met ? theme.palette.success.main : theme.palette.text.disabled } }));
 
 const StrengthLabel = styled(Chip, {
@@ -239,12 +240,20 @@ const StrengthHeading: React.FC<{
 
 // One row per enabled requirement. Previously five near-identical JSX blocks,
 // each with its own `requirements.x &&` guard.
-const RequirementsList: React.FC<{
-  copy: PasswordStrengthCopy;
-  requirements: PasswordRequirements;
-  checks: RequirementChecks;
-  animated: boolean;
-}> = ({ copy, requirements, checks, animated }) => {
+//
+// `forwardRef` because it is `Fade`'s child: Fade hands it a ref and reads
+// `scrollTop` off that node on enter, so a component that drops the ref throws
+// the moment the first character is typed. Only the ref: Fade's injected
+// `style` (opacity/visibility) is still dropped, so the list stays visible.
+const RequirementsList = React.forwardRef<
+  HTMLDivElement,
+  {
+    copy: PasswordStrengthCopy;
+    requirements: PasswordRequirements;
+    checks: RequirementChecks;
+    animated: boolean;
+  }
+>(({ copy, requirements, checks, animated }, ref) => {
   const rows: ReadonlyArray<[unknown, keyof RequirementChecks, React.ReactNode]> = [
     [requirements.minLength, 'length', copy.requirements.minLength(requirements.minLength ?? 0)],
     [requirements.uppercase, 'uppercase', copy.requirements.uppercase],
@@ -254,7 +263,7 @@ const RequirementsList: React.FC<{
   ];
 
   return (
-    <Stack spacing={1}>
+    <Stack ref={ref} spacing={1}>
       <Typography variant="caption" color="text.secondary" fontWeight="medium">
         {copy.requirementsHeading}
       </Typography>
@@ -268,7 +277,8 @@ const RequirementsList: React.FC<{
         ))}
     </Stack>
   );
-};
+});
+RequirementsList.displayName = 'RequirementsList';
 
 // The visible sections. Kept apart from PasswordStrength itself so the exported
 // component is just prop defaults plus the three memos, and every display guard

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

@@ -20,6 +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';
 
 // Country data with expanded support
 
@@ -260,8 +261,8 @@ const CountryPicker: React.FC<{
               <ListItemText
                 primary={country.name}
                 secondary={country.dial}
-                primaryTypographyProps={{ fontSize: '0.9rem' }}
-                secondaryTypographyProps={{ fontSize: '0.8rem' }}
+                primaryTypographyProps={{ fontSize: rem(theme, 14.4) }}
+                secondaryTypographyProps={{ fontSize: rem(theme, 12.8) }}
               />
             </MenuItem>
           ))}

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

@@ -7,6 +7,7 @@ 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';
 
 /** The segment track's padding and border: its corner is the segments' plus these. */
 const SEGMENT_TRACK_PADDING = 4;
@@ -72,20 +73,20 @@ const CARD_SIZES: Record<SizeKey, CSSObject> = {
   xl: { padding: '24px', minHeight: '100px' },
 };
 
-const BUTTON_SIZES: Record<SizeKey, CSSObject> = {
-  xs: { padding: '6px 12px', fontSize: '0.75rem', minHeight: '32px' },
-  sm: { padding: '8px 16px', fontSize: '0.875rem', minHeight: '36px' },
-  md: { padding: '10px 20px', fontSize: '1rem', minHeight: '40px' },
-  lg: { padding: '12px 24px', fontSize: '1.125rem', minHeight: '44px' },
-  xl: { padding: '14px 28px', fontSize: '1.25rem', minHeight: '48px' },
+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' }),
 };
 
-const SEGMENT_SIZES: Record<SizeKey, CSSObject> = {
-  xs: { padding: '4px 8px', fontSize: '0.75rem' },
-  sm: { padding: '6px 12px', fontSize: '0.875rem' },
-  md: { padding: '8px 16px', fontSize: '1rem' },
-  lg: { padding: '10px 20px', fontSize: '1.125rem' },
-  xl: { padding: '12px 24px', fontSize: '1.25rem' },
+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) }),
 };
 
 export interface SurfaceFlags {
@@ -214,7 +215,7 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
       boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`,
     },
     '&:active': { transform: 'scale(0.98)' },
-    ...pickSize(BUTTON_SIZES, customSize),
+    ...pickSize(BUTTON_SIZES, customSize)(theme),
     // The theme's field height for the size, in place of the table's own.
     minHeight: fieldHeight(theme, asFieldSize(customSize)),
     paddingTop: 0,
@@ -306,7 +307,7 @@ export const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject =>
       '&::before': { width: '100%', left: 0, transform: 'translateX(0)' },
     },
     '&:active': { transform: 'scale(0.98)' },
-    ...pickSize(SEGMENT_SIZES, customSize),
+    ...pickSize(SEGMENT_SIZES, customSize)(theme),
     // Each segment is a field; the track around it adds its own inset.
     minHeight: fieldHeight(theme, asFieldSize(customSize)),
     paddingTop: 0,

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

@@ -10,6 +10,7 @@ import { RichTextEditorToolbar } from './RichTextEditorToolbar';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { rem } from '../../../tokens/relative';
 
 const DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {
   bold: true,
@@ -66,7 +67,7 @@ const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string,
     padding: theme.spacing(1),
     borderRadius: 1,
     fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
-    fontSize: '0.875rem',
+    fontSize: rem(theme, 14),
     overflow: 'auto' },
   '& a': { color: theme.palette.primary.main, textDecoration: 'underline' } });
 

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

@@ -12,6 +12,7 @@ import Typography from '@mui/material/Typography/index.js';
 import React from 'react';
 
 import type { SearchFilterChip, SearchResultLead } from './SearchPalette.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** Bold the first case-insensitive occurrence of `query` within `text`. */
 export function highlight(text: string, query: string): React.ReactNode {
@@ -44,7 +45,7 @@ export function Lead({ lead }: { lead: SearchResultLead | undefined }): React.JS
   }
   if (lead.kind === 'avatar') {
     return (
-      <Avatar src={lead.src} alt={lead.alt ?? ''} sx={{ width: 32, height: 32, fontSize: '0.85rem' }}>
+      <Avatar src={lead.src} alt={lead.alt ?? ''} sx={{ width: 32, height: 32, fontSize: sxRem(13.6) }}>
         {lead.fallback}
       </Avatar>
     );
@@ -91,7 +92,7 @@ export function PaletteInput(props: {
               pointerEvents: 'none',
               whiteSpace: 'pre',
               overflow: 'hidden',
-              fontSize: '1rem',
+              fontSize: sxRem(16),
             }}
           >
             <Box component="span" sx={{ visibility: 'hidden' }}>
@@ -115,7 +116,7 @@ export function PaletteInput(props: {
             'aria-label': props.inputAriaLabel,
             'aria-autocomplete': 'list',
           }}
-          sx={{ fontSize: '1rem' }}
+          sx={{ fontSize: sxRem(16) }}
         />
       </Box>
       {props.isLoading && <CircularProgress size={18} sx={{ flexShrink: 0 }} />}
@@ -197,7 +198,7 @@ export function ResultRow(props: {
         )}
       </Box>
       {props.trailing != null && (
-        <Box sx={{ flexShrink: 0, color: 'text.secondary', fontSize: '0.75rem' }}>{props.trailing}</Box>
+        <Box sx={{ flexShrink: 0, color: 'text.secondary', fontSize: sxRem(12) }}>{props.trailing}</Box>
       )}
     </ListItemButton>
   );
@@ -226,7 +227,7 @@ export function SubmitAllFooter(props: {
       </Typography>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'text.secondary' }}>
         <Typography variant="caption">{props.keyLabel}</Typography>
-        <KeyboardReturnIcon sx={{ fontSize: 14 }} />
+        <KeyboardReturnIcon sx={{ fontSize: sxRem(14) }} />
       </Box>
     </ListItemButton>
   );

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

@@ -2,6 +2,7 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { glowAnimation, gradientShiftAnimation, pulseAnimation } from './Slider.animations';
+import { rem } from '../../../tokens/relative';
 
 import { absoluteInk, controlNeutral, onMedia, sheen } from '../../../tokens/ink';
 
@@ -61,12 +62,15 @@ const SIZES: Record<SizeKey, Geometry> = {
   xl: { height: 12, thumbSize: 28, markHeight: 16 },
 };
 
-/** The value bubble and mark labels shrink at the two smallest sizes only. */
-const LABEL_SCALE: Record<string, { fontSize: number; box: number; markFont: string }> = {
-  xs: { fontSize: 10, box: 28, markFont: '0.65rem' },
-  sm: { fontSize: 11, box: 30, markFont: '0.7rem' },
+/**
+ * The value bubble and mark labels shrink at the two smallest sizes only. The
+ * two fonts are design px, read through the type scale.
+ */
+const LABEL_SCALE: Record<string, { fontPx: number; box: number; markFont: number }> = {
+  xs: { fontPx: 10, box: 28, markFont: 10.4 },
+  sm: { fontPx: 11, box: 30, markFont: 11.2 },
 };
-const LABEL_DEFAULT = { fontSize: 12, box: 32, markFont: '0.75rem' };
+const LABEL_DEFAULT = { fontPx: 12, box: 32, markFont: 12 };
 
 export interface SliderFlags {
   customColor?: string;
@@ -216,7 +220,7 @@ const valueLabelPart = ({ theme, flags, palette }: PartInput): CSSObject => {
 
   return {
     lineHeight: 1.2,
-    fontSize: scale.fontSize,
+    fontSize: rem(theme, scale.fontPx),
     padding: 0,
     width: scale.box,
     height: scale.box,
@@ -260,7 +264,7 @@ const markPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject =>
 };
 
 const markLabelPart = ({ theme, flags, palette }: PartInput): CSSObject => ({
-  fontSize: (LABEL_SCALE[flags.customSize ?? ''] ?? LABEL_DEFAULT).markFont,
+  fontSize: rem(theme, (LABEL_SCALE[flags.customSize ?? ''] ?? LABEL_DEFAULT).markFont),
   color: theme.palette.text.secondary,
   marginTop: theme.spacing(1.5),
   fontWeight: 500,

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

@@ -9,6 +9,7 @@ import { LABEL_GAP_UNITS, SWITCH_ICON_SIZES, TAP_TARGET_MIN } from './Switch.met
 import { onTrackInk, switchSx } from './Switch.styles';
 import type { SwitchFlags } from './Switch.styles';
 import type { SwitchProps } from './Switch.types';
+import { sxRem } from '../../../tokens/relative';
 import type { SizeValue } from '../../../tokens/vocabulary';
 
 const StyledSwitch = styled(MuiSwitch, {
@@ -103,7 +104,7 @@ export const SwitchIcon: React.FC<SwitchIconProps> = ({
         pointerEvents: 'none',
         zIndex: 2,
         color: isOn ? onInk : 'text.secondary',
-        fontSize: SWITCH_ICON_SIZES[size as SizeValue] ?? SWITCH_ICON_SIZES.md,
+        fontSize: sxRem(SWITCH_ICON_SIZES[size as SizeValue] ?? SWITCH_ICON_SIZES.md),
       }}
     >
       {icon}

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

@@ -41,7 +41,8 @@ import {
 import type { SwitchVariant } from './Switch.base';
 
 import { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';
-import { inkOver, px } from '../../../tokens/theme';
+import { rem } from '../../../tokens/relative';
+import { inkOver } from '../../../tokens/theme';
 import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
 
 // Every number below comes from `./Switch.metrics`, which the native renderer
@@ -303,13 +304,13 @@ const trackLabels = (
   justifyContent: 'space-between',
   paddingLeft: theme.spacing(TRACK_LABEL.insetUnits),
   paddingRight: theme.spacing(TRACK_LABEL.insetUnits),
-  fontSize: px(TRACK_LABEL.fontSize),
+  fontSize: rem(theme, TRACK_LABEL.fontSize),
   fontWeight: TRACK_LABEL.fontWeight,
   color: theme.palette.text.secondary,
   '&::before, &::after': {
     content: '""',
     position: 'absolute',
-    fontSize: px(TRACK_LABEL.fontSize),
+    fontSize: rem(theme, TRACK_LABEL.fontSize),
     fontWeight: TRACK_LABEL.fontWeight,
     top: '50%',
     transform: 'translateY(-50%)',

package/src/components/form/Textarea/Textarea.tsx

@@ -33,6 +33,7 @@ import type { TextareaProps } from './Textarea.types';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { FIELD_BORDER_WIDTH, fieldBorder } from '../../../tokens/field-height';
+import { rem } from '../../../tokens/relative';
 
 // Interface for styled component props
 interface StyledTextareaProps {
@@ -65,11 +66,11 @@ const StyledTextarea = styled(TextareaAutosize, {
   const errorColor = theme.palette.error;
 
   const sizeMap = {
-    xs: { padding: '6px 8px', fontSize: '0.75rem', minHeight: '60px' },
-    sm: { padding: '8px 10px', fontSize: '0.875rem', minHeight: '80px' },
-    md: { padding: '10px 12px', fontSize: '1rem', minHeight: '100px' },
-    lg: { padding: '12px 14px', fontSize: '1.125rem', minHeight: '120px' },
-    xl: { padding: '14px 16px', fontSize: '1.25rem', minHeight: '140px' } };
+    xs: { padding: '6px 8px', fontSize: rem(theme, 12), minHeight: '60px' },
+    sm: { padding: '8px 10px', fontSize: rem(theme, 14), minHeight: '80px' },
+    md: { padding: '10px 12px', fontSize: rem(theme, 16), minHeight: '100px' },
+    lg: { padding: '12px 14px', fontSize: rem(theme, 18), minHeight: '120px' },
+    xl: { padding: '14px 16px', fontSize: rem(theme, 20), minHeight: '140px' } };
 
   const baseStyles = {
     width: '100%',

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -22,6 +22,7 @@ import type { RichEditorToolbarCopy } from '../../../copy';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';
+import { rem } from '../../../tokens/relative';
 
 const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   display: 'flex',
@@ -80,7 +81,7 @@ const CharacterCount = styled(Box)<{ limit?: number; count: number }>(({ theme,
     position: 'absolute',
     bottom: theme.spacing(1),
     right: theme.spacing(1),
-    fontSize: '0.75rem',
+    fontSize: rem(theme, 12),
     color: isError
       ? theme.palette.error.main
       : isWarning
@@ -117,7 +118,7 @@ const ContentEditableDiv = styled('div')<{
       : theme.palette.background.paper,
     color: theme.palette.text.primary,
     fontFamily: theme.typography.fontFamily,
-    fontSize: '1rem',
+    fontSize: rem(theme, 16),
     lineHeight: 1.5,
     outline: 'none',
     transition: 'all 0.3s ease',

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

@@ -4,6 +4,7 @@ import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.
 import { fieldRadius } from '../../../tokens/field-radius';
 import { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, controlNeutral, sheen } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const glowAnimation = keyframes`
   0% { box-shadow: 0 0 5px currentColor; }
@@ -56,12 +57,18 @@ export const getColorFromTheme = (theme: Theme, color: string): TogglePalette =>
   };
 };
 
-const SIZE_MAP: Record<string, CSSObject> = {
-  xs: { padding: '4px 8px', fontSize: '0.75rem' },
-  sm: { padding: '6px 12px', fontSize: '0.875rem' },
-  md: { padding: '8px 16px', fontSize: '1rem' },
-  lg: { padding: '10px 20px', fontSize: '1.125rem' },
-  xl: { padding: '12px 24px', fontSize: '1.25rem' },
+/** Each size's padding and type; the type is design px, read through the type scale. */
+const SIZE_MAP: Record<string, { padding: string; fontPx: number }> = {
+  xs: { padding: '4px 8px', fontPx: 12 },
+  sm: { padding: '6px 12px', fontPx: 14 },
+  md: { padding: '8px 16px', fontPx: 16 },
+  lg: { padding: '10px 20px', fontPx: 18 },
+  xl: { padding: '12px 24px', fontPx: 20 },
+};
+
+const sizeStyles = (theme: Theme, customSize: string): CSSObject => {
+  const size = SIZE_MAP[customSize];
+  return size ? { padding: size.padding, fontSize: rem(theme, size.fontPx) } : {};
 };
 
 export const baseStyles = (
@@ -136,7 +143,7 @@ export const baseStyles = (
 
   // Size wins over everything above it — its font and horizontal padding; the
   // height is the theme's field height for the size.
-  ...(SIZE_MAP[customSize] ?? {}),
+  ...sizeStyles(theme, customSize),
   minHeight: fieldHeight(theme, asFieldSize(customSize)),
   paddingTop: 0,
   paddingBottom: 0,

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -10,6 +10,7 @@ import { cssLengthToPx } from '../../../tokens/css-units';
 import { asFieldSize, fieldHeight } from '../../../tokens/field-height';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { controlNeutral } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const GLASS_PADDING = 4;
 const GLASS_BORDER = 1;
@@ -87,11 +88,11 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
     const colorPalette = getColorFromTheme(theme, color);
 
     const sizeMap = {
-      xs: { padding: '4px 8px', fontSize: '0.75rem' },
-      sm: { padding: '6px 12px', fontSize: '0.875rem' },
-      md: { padding: '8px 16px', fontSize: '1rem' },
-      lg: { padding: '10px 20px', fontSize: '1.125rem' },
-      xl: { padding: '12px 24px', fontSize: '1.25rem' },
+      xs: { padding: '4px 8px', fontSize: rem(theme, 12) },
+      sm: { padding: '6px 12px', fontSize: rem(theme, 14) },
+      md: { padding: '8px 16px', fontSize: rem(theme, 16) },
+      lg: { padding: '10px 20px', fontSize: rem(theme, 18) },
+      xl: { padding: '12px 24px', fontSize: rem(theme, 20) },
     };
 
     return (

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

@@ -21,6 +21,7 @@ const HOVER_TINT = 0x05 / 0xff;
 const GHOST_HOVER_TINT = 0x08 / 0xff;
 import type { UploadButtonCopy } from '../../../copy';
 import type { UploadButtonProps } from './UploadButton.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** Shared shape for the two trigger variants. */
 export interface TriggerProps {
@@ -82,7 +83,7 @@ export function UploadDropzone({
       aria-label={copy.dropzoneRole(label)}
     >
       <Box sx={{ mb: 2 }}>
-        {icon || <CloudUploadOutlined sx={{ fontSize: 48, color: 'text.secondary' }} />}
+        {icon || <CloudUploadOutlined sx={{ fontSize: sxRem(48), color: 'text.secondary' }} />}
       </Box>
       <Typography variant="body1" sx={{ mb: 1 }}>
         {label}

package/src/components/form/total-form/SubmitButton.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { fieldHeight } from '../../../tokens/field-height';
+import { sxRem } from '../../../tokens/relative';
 import { Button } from '../Button';
 import { useFormContext } from './FormContext';
 
@@ -37,7 +38,7 @@ export function SubmitButton({
       // `Button` replaces (not merges) its size styles with this `sx`, so restate
       // the md padding/font here alongside the theme's field height — the height
       // every input on the form stands at — and no-wrap alignment.
-      sx={{ height: fieldHeight, px: 2, fontSize: '1rem', flexShrink: 0, whiteSpace: 'nowrap' }}
+      sx={{ height: fieldHeight, px: 2, fontSize: sxRem(16), flexShrink: 0, whiteSpace: 'nowrap' }}
     >
       {children}
     </Button>

package/src/components/layout/ContentToolbar/ColumnsMenu.tsx

@@ -12,6 +12,7 @@ import React, { useState } from 'react';
 import type { ColumnVisibilityOption, ColumnsMenuProps } from './ContentToolbar.types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
+import { sxRem } from '../../../tokens/relative';
 
 /** One column checkbox row; toggling never closes the menu. */
 function ColumnRow({
@@ -79,7 +80,7 @@ export function ColumnsMenu({
           bgcolor: open ? 'action.selected' : 'transparent',
         }}
       >
-        <ColumnsIcon sx={{ fontSize: 16 }} />
+        <ColumnsIcon sx={{ fontSize: sxRem(16) }} />
       </IconButton>
       <Menu
         anchorEl={anchorEl}
@@ -89,7 +90,7 @@ export function ColumnsMenu({
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
         slotProps={{ paper: { sx: { minWidth: 200 } } }}
       >
-        <ListSubheader sx={{ px: 1.5, py: 0.75, fontSize: '0.75rem', fontWeight: 600, color: 'text.primary', lineHeight: 1.5 }}>
+        <ListSubheader sx={{ px: 1.5, py: 0.75, fontSize: sxRem(12), fontWeight: 600, color: 'text.primary', lineHeight: 1.5 }}>
           {title}
         </ListSubheader>
         {columns.map((option) => (

package/src/components/layout/ContentToolbar/ContentToolbar.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 
 import type { ContentToolbarProps } from './ContentToolbar.types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { sxRem } from '../../../tokens/relative';
 
 const selectionButtonSx = {
   minWidth: 0,
@@ -17,7 +18,7 @@ const selectionButtonSx = {
   fontWeight: 600,
   py: 0.5,
   px: 1.5,
-  fontSize: '0.75rem',
+  fontSize: sxRem(12),
   textTransform: 'none',
   color: 'text.primary',
 } as const;
@@ -151,7 +152,7 @@ function SelectionState({
       <Typography
         component="span"
         data-testid="selected-count-indicator"
-        sx={{ fontSize: '0.875rem', color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}
+        sx={{ fontSize: sxRem(14), color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}
       >
         {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected
       </Typography>

package/src/components/layout/ContentToolbar/FilterTrigger.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import type { FilterTriggerProps } from './ContentToolbar.types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
+import { sxRem } from '../../../tokens/relative';
 
 /**
  * Labeled filter toggle: a "Filtros" button (styled like the sibling toolbar
@@ -33,7 +34,7 @@ export function FilterTrigger({
       aria-expanded={open}
       aria-label={open ? 'Close filters' : 'Open filters'}
       onClick={() => onOpenChange(!open)}
-      startIcon={<FilterIcon sx={{ fontSize: 16 }} />}
+      startIcon={<FilterIcon sx={{ fontSize: sxRem(16) }} />}
       sx={{
         minWidth: 0,
         height: fieldHeight,
@@ -60,7 +61,7 @@ export function FilterTrigger({
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
-            fontSize: '0.7rem',
+            fontSize: sxRem(11.2),
             fontWeight: 700,
             lineHeight: 1,
             bgcolor: 'primary.main',