@12-apps/ui 6.34.0 → 6.36.0

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',

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

@@ -19,6 +19,7 @@ import type {
 } from './ContentToolbar.types';
 import { buildTriggerLabel, InlineTrigger, PillTrigger, StackedTrigger } from './MultiSelectTriggers';
 import { fieldTextFieldStyles } from '../../../tokens/field-height';
+import { sxRem } from '../../../tokens/relative';
 
 /** One checkbox menu row with an optional trailing count. */
 function CheckboxRow({
@@ -162,7 +163,7 @@ function MenuSearchField({
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
-              <SearchIcon sx={{ fontSize: 16 }} />
+              <SearchIcon sx={{ fontSize: sxRem(16) }} />
             </InputAdornment>
           ),
         }}
@@ -255,7 +256,7 @@ function MultiSelectMenu<TValue extends string>({
         <MenuSearchField query={query} onQueryChange={onQueryChange} placeholder={searchPlaceholder} testId={testId} />
       )}
       {visibleOptions.length === 0 && showSearch ? (
-        <MenuItem disabled data-testid={testId ? `${testId}-no-results` : undefined} sx={{ fontSize: '0.8125rem' }}>
+        <MenuItem disabled data-testid={testId ? `${testId}-no-results` : undefined} sx={{ fontSize: sxRem(13) }}>
           {noResultsLabel}
         </MenuItem>
       ) : (
@@ -272,7 +273,7 @@ function MultiSelectMenu<TValue extends string>({
       {extraOptions && extraOptions.length > 0
         ? [
             <Divider key="extra-divider" />,
-            <ListSubheader key="extra-label" sx={{ px: 1, py: 0.75, fontSize: '0.75rem', fontWeight: 600 }}>
+            <ListSubheader key="extra-label" sx={{ px: 1, py: 0.75, fontSize: sxRem(12), fontWeight: 600 }}>
               {extraOptionsHeading}
             </ListSubheader>,
             ...extraOptions.map((extra) => (
@@ -329,7 +330,7 @@ function MenuClearFooter({
           onClear();
           close();
         }}
-        sx={{ minWidth: 0, px: 1, py: 0.25, fontSize: '0.75rem', fontWeight: 400, textTransform: 'none', color: 'text.secondary' }}
+        sx={{ minWidth: 0, px: 1, py: 0.25, fontSize: sxRem(12), fontWeight: 400, textTransform: 'none', color: 'text.secondary' }}
       >
         {clearText}
       </Button>

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

@@ -11,6 +11,7 @@ import type { MultiSelectOption } from './ContentToolbar.types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { fieldEdge } from '../../../tokens/field-edge';
+import { sxRem } from '../../../tokens/relative';
 
 /**
  * Trigger label from the current selection: `allLabel` when none/all are
@@ -42,8 +43,8 @@ export interface TriggerProps {
 /** Compact `Label:` text button for a horizontal toolbar (the default layout). */
 export function InlineTrigger({ label, triggerLabel, open, onOpen, testId }: TriggerProps): React.JSX.Element {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, fontSize: '0.875rem' }}>
-      <Typography component="span" sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, fontSize: sxRem(14) }}>
+      <Typography component="span" sx={{ color: 'text.secondary', fontSize: sxRem(14) }}>
         {label}:
       </Typography>
       <Button
@@ -57,7 +58,7 @@ export function InlineTrigger({ label, triggerLabel, open, onOpen, testId }: Tri
         sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
       >
         {triggerLabel}
-        <ChevronDownIcon sx={{ fontSize: 14 }} />
+        <ChevronDownIcon sx={{ fontSize: sxRem(14) }} />
       </Button>
     </Box>
   );
@@ -69,7 +70,7 @@ export function StackedTrigger({ label, triggerLabel, open, onOpen, testId }: Tr
   const baseId = useId();
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-      <Typography id={`${baseId}-label`} component="label" sx={{ fontSize: '0.75rem', fontWeight: 500, color: 'text.secondary' }}>
+      <Typography id={`${baseId}-label`} component="label" sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>
         {label}
       </Typography>
       <Button
@@ -81,7 +82,7 @@ export function StackedTrigger({ label, triggerLabel, open, onOpen, testId }: Tr
         aria-expanded={open}
         aria-labelledby={`${baseId}-label ${baseId}-value`}
         onClick={onOpen}
-        endIcon={<ChevronDownIcon sx={{ fontSize: 18, color: 'text.secondary' }} />}
+        endIcon={<ChevronDownIcon sx={{ fontSize: sxRem(18), color: 'text.secondary' }} />}
         sx={{
           justifyContent: 'space-between',
           height: fieldHeight,
@@ -90,7 +91,7 @@ export function StackedTrigger({ label, triggerLabel, open, onOpen, testId }: Tr
           color: 'text.primary',
           textTransform: 'none',
           fontWeight: 400,
-          fontSize: '0.875rem',
+          fontSize: sxRem(14),
           borderColor: fieldEdge,
           bgcolor: 'background.paper',
           '&:hover': { borderColor: 'text.primary', bgcolor: 'background.paper' },
@@ -171,18 +172,18 @@ export function PillTrigger({
               '&:hover': { bgcolor: 'primary.main', color: 'primary.contrastText' },
             }}
           >
-            <CloseIcon sx={{ fontSize: 14 }} />
+            <CloseIcon sx={{ fontSize: sxRem(14) }} />
           </Box>
         ) : undefined
       }
-      endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
+      endIcon={<ChevronDownIcon sx={{ fontSize: sxRem(16) }} />}
       sx={{
         borderRadius: fieldRadiusPx,
         height: fieldHeight,
         px: 1.5,
         color: 'text.primary',
         fontWeight: 600,
-        fontSize: '0.8125rem',
+        fontSize: sxRem(13),
         textTransform: 'none',
         borderColor: (theme) => (active ? theme.palette.primary.main : fieldEdge(theme)),
         bgcolor: active ? 'action.selected' : 'background.paper',

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

@@ -21,6 +21,7 @@ import type {
 } from './ContentToolbar.types';
 import { fieldHeight } from '../../../tokens/field-height';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { sxRem } from '../../../tokens/relative';
 
 /** How many non-pinned views show under "Recentes". */
 const RECENT_LIMIT = 5;
@@ -39,7 +40,7 @@ function DefaultTag({ label, testId }: { label: string; testId: string }): React
     <Box
       component="span"
       data-testid={testId}
-      sx={{ px: 0.75, py: 0.125, borderRadius: 1, fontSize: '0.7rem', bgcolor: 'primary.main', color: 'primary.contrastText' }}
+      sx={{ px: 0.75, py: 0.125, borderRadius: 1, fontSize: sxRem(11.2), bgcolor: 'primary.main', color: 'primary.contrastText' }}
     >
       {label}
     </Box>
@@ -93,7 +94,7 @@ function ViewKebab<V extends SavedViewLike>({
         onClick={(event) => setAnchorEl(event.currentTarget)}
         sx={{ width: 28, height: 28, color: 'text.secondary' }}
       >
-        <KebabIcon sx={{ fontSize: 16 }} />
+        <KebabIcon sx={{ fontSize: sxRem(16) }} />
       </IconButton>
       <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={close}>
         {buildActions(view, handlers, labels).map((action) => (
@@ -132,7 +133,7 @@ function ViewRow<V extends SavedViewLike>({
         sx={{ flex: 1, minWidth: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 0.75 }}
         data-testid={`${testIdPrefix}-apply-${view.id}`}
       >
-        <Typography component="span" sx={{ fontSize: '0.875rem' }}>
+        <Typography component="span" sx={{ fontSize: sxRem(14) }}>
           {view.name}
         </Typography>
         {view.isDefault && <DefaultTag label={labels.defaultTag} testId={`${testIdPrefix}-default-${view.id}`} />}
@@ -160,7 +161,7 @@ function ViewSection<V extends SavedViewLike>({
   if (list.length === 0) return null;
   return (
     <Box data-testid={`${testIdPrefix}-section-${sectionKey}`}>
-      <Typography component="span" sx={{ fontSize: '0.75rem', fontWeight: 600, color: 'text.secondary' }}>
+      <Typography component="span" sx={{ fontSize: sxRem(12), fontWeight: 600, color: 'text.secondary' }}>
         {title}
       </Typography>
       <Stack spacing={0.5} sx={{ mt: 0.5 }}>
@@ -217,13 +218,13 @@ function PopoverBody<V extends SavedViewLike>({
     <Stack spacing={1.5} sx={{ p: 1.5, width: 300 }} data-testid={`${testIdPrefix}-popover`}>
       {/* Built-in no-filter default, always available above the saved views. */}
       <MenuItem data-testid={`${testIdPrefix}-main`} selected={!activeViewName} onClick={onSelectMain} sx={{ borderRadius: 1, px: 1, gap: 1 }}>
-        <Box component="span" sx={{ flex: 1, minWidth: 0, fontSize: '0.875rem' }}>
+        <Box component="span" sx={{ flex: 1, minWidth: 0, fontSize: sxRem(14) }}>
           {labels.mainView}
         </Box>
-        {!activeViewName && <CheckIcon sx={{ fontSize: 16, color: 'primary.main' }} />}
+        {!activeViewName && <CheckIcon sx={{ fontSize: sxRem(16), color: 'primary.main' }} />}
       </MenuItem>
       {views.length === 0 ? (
-        <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>{labels.empty}</Typography>
+        <Typography sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>{labels.empty}</Typography>
       ) : (
         <>
           <ViewSection title={labels.pinned} list={pinned} sectionKey="pinned" handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />
@@ -299,11 +300,11 @@ export function SavedViewsMenu<V extends SavedViewLike = SavedViewLike>({
         sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
       >
         {/* Mobile: an eye icon stands in for the view name to keep the toolbar one line. */}
-        <ViewIcon sx={{ fontSize: 18, display: { xs: 'inline-flex', md: 'none' } }} />
+        <ViewIcon sx={{ fontSize: sxRem(18), display: { xs: 'inline-flex', md: 'none' } }} />
         <Box component="span" sx={{ display: { xs: 'none', md: 'inline' } }}>
           {activeViewName ?? labels.mainView}
         </Box>
-        <ChevronDownIcon sx={{ fontSize: 14 }} />
+        <ChevronDownIcon sx={{ fontSize: sxRem(14) }} />
       </Button>
       <Popover
         open={Boolean(anchorEl)}

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

@@ -18,6 +18,7 @@ import type {
 } from './ContentToolbar.types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
+import { sxRem } from '../../../tokens/relative';
 
 function findActiveField<TField extends string>(
   fields: SortFieldDefinition<TField>[] | undefined,
@@ -68,13 +69,13 @@ function resolveTriggerParts(
   return { full, short: fieldDef?.label ?? full, arrowSuffix };
 }
 
-const sectionLabelSx = { px: 1, py: 0.75, fontSize: '0.75rem', fontWeight: 600, color: 'text.primary', lineHeight: 1.5 } as const;
+const sectionLabelSx = { px: 1, py: 0.75, fontSize: sxRem(12), fontWeight: 600, color: 'text.primary', lineHeight: 1.5 } as const;
 
 /** A fixed-width check slot (empty when unchecked) so labels align. */
 function SortCheck({ checked }: { checked: boolean }): React.JSX.Element {
   return (
     <Box component="span" sx={{ display: 'flex', width: 16, flexShrink: 0, alignItems: 'center', justifyContent: 'center' }} aria-hidden>
-      {checked ? <CheckIcon sx={{ fontSize: 14 }} /> : null}
+      {checked ? <CheckIcon sx={{ fontSize: sxRem(14) }} /> : null}
     </Box>
   );
 }
@@ -205,10 +206,10 @@ export function SortByDropdown<TField extends string = string>({
   }
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, fontSize: '0.875rem' }}>
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, fontSize: sxRem(14) }}>
       <Typography
         component="span"
-        sx={{ display: { xs: 'none', md: 'inline' }, color: 'text.secondary', fontSize: '0.875rem' }}
+        sx={{ display: { xs: 'none', md: 'inline' }, color: 'text.secondary', fontSize: sxRem(14) }}
       >
         {triggerPrefix}
       </Typography>
@@ -231,7 +232,7 @@ export function SortByDropdown<TField extends string = string>({
           {trigger.short}
         </Box>
         {trigger.arrowSuffix}
-        <ChevronDownIcon sx={{ fontSize: 14 }} />
+        <ChevronDownIcon sx={{ fontSize: sxRem(14) }} />
       </Button>
       <SortMenu
         orderHeading={orderHeading}

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

@@ -20,6 +20,7 @@ import React, { useState } from 'react';
 import type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
+import { sxRem } from '../../../tokens/relative';
 
 const VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [
   { value: 'grid', label: 'Grid View', icon: GridIcon },
@@ -70,8 +71,8 @@ export function ViewSelector({
         onClick={(event) => setAnchorEl(event.currentTarget)}
         sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: 'text.secondary' }}
       >
-        <ActiveIcon sx={{ fontSize: 16 }} />
-        <ChevronDownIcon sx={{ fontSize: 14 }} />
+        <ActiveIcon sx={{ fontSize: sxRem(16) }} />
+        <ChevronDownIcon sx={{ fontSize: sxRem(14) }} />
       </Button>
       <Menu
         anchorEl={anchorEl}
@@ -95,9 +96,9 @@ export function ViewSelector({
               sx={{ gap: 1.5 }}
             >
               <ListItemText>{option.label}</ListItemText>
-              <OptionIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
+              <OptionIcon sx={{ fontSize: sxRem(16), color: 'text.secondary' }} />
               <ListItemIcon sx={{ minWidth: 'auto !important' }}>
-                <CheckIcon sx={{ fontSize: 16, color: selected ? 'text.primary' : 'transparent' }} />
+                <CheckIcon sx={{ fontSize: sxRem(16), color: selected ? 'text.primary' : 'transparent' }} />
               </ListItemIcon>
             </MenuItem>
           );

package/src/components/layout/Dashboard/Dashboard.tsx

@@ -31,6 +31,7 @@ import type {
   DashboardMoreFiltersProps,
   DashboardProps,
 } from './Dashboard.types';
+import { sxRem } from '../../../tokens/relative';
 
 /**
  * Ordered slot keys. The root reorders composed children into this sequence so
@@ -168,7 +169,7 @@ const DashboardBreadcrumb = ({
       className={className}
       aria-label="breadcrumb"
       data-testid={`${testIdPrefix}-breadcrumb`}
-      sx={{ fontSize: '0.875rem', color: 'text.secondary' }}
+      sx={{ fontSize: sxRem(14), color: 'text.secondary' }}
     >
       {items.map((item, index) => {
         const isLast = index === items.length - 1;
@@ -177,7 +178,7 @@ const DashboardBreadcrumb = ({
             <Typography
               key={`${item.label}-${index}`}
               component="span"
-              sx={{ fontSize: '0.875rem', color: isLast ? 'text.primary' : 'text.secondary' }}
+              sx={{ fontSize: sxRem(14), color: isLast ? 'text.primary' : 'text.secondary' }}
               aria-current={isLast ? 'page' : undefined}
             >
               {item.label}
@@ -194,7 +195,7 @@ const DashboardBreadcrumb = ({
             href={item.href}
             underline="hover"
             color="inherit"
-            sx={{ fontSize: '0.875rem' }}
+            sx={{ fontSize: sxRem(14) }}
           >
             {linkContent}
           </MuiLink>