@12-apps/ui 6.34.0 → 6.35.0

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>

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

@@ -31,6 +31,7 @@ import type {
   DashboardInfoProps,
   DashboardSettingsProps,
 } from './Dashboard.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** Flexible spacer — everything composed after it is pushed to the right. */
 export const DashboardSpacer = (): React.JSX.Element => <Box sx={{ flex: 1 }} aria-hidden />;
@@ -70,7 +71,7 @@ export const DashboardInfo = ({
           <InfoIcon fontSize="small" sx={{ color: 'text.secondary' }} />
           <Typography sx={{ fontWeight: 600 }}>{title}</Typography>
         </Box>
-        <Box sx={{ px: 2, py: 1.5, fontSize: '0.875rem', color: 'text.secondary' }}>{children}</Box>
+        <Box sx={{ px: 2, py: 1.5, fontSize: sxRem(14), color: 'text.secondary' }}>{children}</Box>
       </Popover>
     </>
   );

package/src/components/layout/SettingsLayout/SettingsPanel.tsx

@@ -17,6 +17,7 @@ import type {
   SettingsNavItem,
   SettingsRailBreakpoint,
 } from "./SettingsLayout.types";
+import { rem } from "../../../tokens/relative";
 
 export interface SettingsPanelProps {
   /** True in `drilldown`, inside a section rather than at the index. */
@@ -70,7 +71,7 @@ function BackLink({
         textDecoration: "none",
         color: "text.secondary",
         font: "inherit",
-        fontSize: "0.875rem",
+        fontSize: rem(theme, 14),
       })}
     >
       <ChevronLeftIcon fontSize="small" />

package/src/components/layout/SettingsLayout/SettingsSectionChips.tsx

@@ -6,6 +6,7 @@ import React, { useEffect, useRef, type RefObject } from 'react';
 
 import { SettingsStatusMarker } from './SettingsStatusMarker';
 import { TOUCH_TARGET } from './SettingsLayout.styles';
+import { rem } from '../../../tokens/relative';
 
 /**
  * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.
@@ -129,7 +130,7 @@ function SectionChip({
         borderRadius: 999,
         cursor: 'pointer',
         font: 'inherit',
-        fontSize: '0.8125rem',
+        fontSize: rem(theme, 13),
         fontWeight: active ? 700 : 500,
         textDecoration: 'none',
         whiteSpace: 'nowrap',

package/src/components/layout/SettingsLayout/SettingsSectionHeader.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import { displayAcrossRail, TOUCH_TARGET } from './SettingsLayout.styles';
 import type { SettingsLayoutProps, SettingsRailBreakpoint } from './SettingsLayout.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** One line that must not wrap, whatever the section is called. */
 const CLIP = {
@@ -32,7 +33,7 @@ function HeaderText({
     <Box sx={{ minWidth: 0 }}>
       <Box
         component="h2"
-        sx={{ m: 0, font: 'inherit', fontSize: '1rem', fontWeight: 600, lineHeight: 1.3, ...CLIP }}
+        sx={{ m: 0, font: 'inherit', fontSize: sxRem(16), fontWeight: 600, lineHeight: 1.3, ...CLIP }}
       >
         {title}
       </Box>
@@ -42,7 +43,7 @@ function HeaderText({
           sx={{
             m: 0,
             font: 'inherit',
-            fontSize: '0.8125rem',
+            fontSize: sxRem(13),
             color: 'text.secondary',
             lineHeight: 1.35,
             ...CLIP,

package/src/components/layout/SettingsLayout/SettingsStatusMarker.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import { SR_ONLY_SX, STATUS_COLOR } from './SettingsLayout.styles';
 import type { SettingsNavStatus } from './SettingsLayout.types';
+import { sxRem } from '../../../tokens/relative';
 
 export interface SettingsStatusMarkerProps {
   /** Which situation to draw. */
@@ -44,7 +45,7 @@ export function SettingsStatusMarker({
         data-status={status}
         sx={{ display: 'inline-flex', alignItems: 'center', color: 'text.disabled' }}
       >
-        <LockOutlinedIcon sx={{ fontSize: 16 }} />
+        <LockOutlinedIcon sx={{ fontSize: sxRem(16) }} />
         {hidden}
       </Box>
     );

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -25,6 +25,7 @@ import type {
   TableFilterSectionProps,
 } from './TableFilter.types';
 import { fieldTextFieldStyles } from '../../../tokens/field-height';
+import { sxRem } from '../../../tokens/relative';
 
 const PANEL_WIDTH = 280;
 
@@ -140,7 +141,7 @@ const TableFilterPanel = ({
               underline="hover"
               data-testid={clearTestId}
               onClick={onClearAll}
-              sx={{ fontSize: '0.75rem', color: 'text.secondary' }}
+              sx={{ fontSize: sxRem(12), color: 'text.secondary' }}
             >
               {copy.clearAllFilters}
             </Link>
@@ -178,7 +179,7 @@ const TableFilterKeyword = ({
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-      <Typography component="label" sx={{ fontSize: '0.75rem', fontWeight: 500, color: 'text.secondary' }}>
+      <Typography component="label" sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>
         {label}
       </Typography>
       <TextField
@@ -198,7 +199,7 @@ const TableFilterKeyword = ({
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
-              <SearchIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
+              <SearchIcon sx={{ fontSize: sxRem(16), color: 'text.secondary' }} />
             </InputAdornment>
           ),
           endAdornment:
@@ -211,7 +212,7 @@ const TableFilterKeyword = ({
                   onMouseDown={(event) => event.preventDefault()}
                   onClick={clearKeyword}
                 >
-                  <CloseIcon sx={{ fontSize: 16 }} />
+                  <CloseIcon sx={{ fontSize: sxRem(16) }} />
                 </IconButton>
               </InputAdornment>
             ) : null,
@@ -226,7 +227,7 @@ const TableFilterSection = ({ title, children }: TableFilterSectionProps): React
   <Box>
     <Divider sx={{ mb: 2.5 }} />
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-      <Typography component="h2" sx={{ fontSize: '0.875rem', fontWeight: 600, color: 'text.primary' }}>
+      <Typography component="h2" sx={{ fontSize: sxRem(14), fontWeight: 600, color: 'text.primary' }}>
         {title}
       </Typography>
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>{children}</Box>
@@ -244,7 +245,7 @@ function TableFilterCheckboxField<TValue extends string = string>({
 }: TableFilterCheckboxFieldProps<TValue>): React.JSX.Element {
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} data-testid={testId}>
-      <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: 'text.secondary' }}>{label}</Typography>
+      <Typography sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>{label}</Typography>
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         {options.map((option) => {
           const checked = selected.has(option.value);
@@ -261,7 +262,7 @@ function TableFilterCheckboxField<TValue extends string = string>({
                 />
               }
               label={
-                <Box component="span" sx={{ fontSize: '0.875rem' }}>
+                <Box component="span" sx={{ fontSize: sxRem(14) }}>
                   {option.label}
                   {option.count != null && (
                     <Box component="span" sx={{ color: 'text.secondary' }}>
@@ -343,7 +344,7 @@ const TableFilterRangeField = ({
   const invalidText = invalidLabel ?? copy.invalidRange;
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} data-testid={testId}>
-      <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: 'text.secondary' }}>
+      <Typography sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>
         {label}
         {unit ? ` (${unit})` : ''}
       </Typography>
@@ -374,7 +375,7 @@ const TableFilterRangeField = ({
         <Typography
           role="alert"
           data-testid={testId ? `${testId}-error` : undefined}
-          sx={{ fontSize: '0.7rem', color: 'error.main' }}
+          sx={{ fontSize: sxRem(11.2), color: 'error.main' }}
         >
           {invalidText}
         </Typography>

package/src/components/navigation/AppHeader/AppHeader.brand.tsx

@@ -5,6 +5,7 @@ import { useTheme } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem } from '../../../tokens/relative';
 import type { SizeValue } from '../../../tokens/scales';
 
 import { brandGradient, initialsOf } from './AppHeader.colors';
@@ -35,7 +36,7 @@ function markSx(
     backgroundImage: showLogo ? 'none' : brandGradient(seed),
     backgroundColor: showLogo ? theme.palette.action.hover : 'transparent',
     color: theme.palette.getContrastText(seed),
-    fontSize: Math.round(edge * INITIALS_RATIO),
+    fontSize: rem(theme, Math.round(edge * INITIALS_RATIO)),
     fontWeight: 700,
     lineHeight: 1,
     letterSpacing: '0.02em',

package/src/components/navigation/AppHeader/AppHeader.identity.tsx

@@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { sxRem } from '../../../tokens/relative';
 import { accentFor, type SizeValue } from '../../../tokens/scales';
 
 import { AppHeaderBrand } from './AppHeader.brand';
@@ -99,7 +100,7 @@ const IdentityTitle: React.FC<
     <Typography
       component="span"
       data-testid={`${dataTestId}-title`}
-      sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}
+      sx={{ fontSize: sxRem(TITLE_PX[size]), fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}
     >
       {title}
     </Typography>
@@ -109,7 +110,7 @@ const IdentityTitle: React.FC<
         data-testid={`${dataTestId}-chevron`}
         sx={{
           flex: '0 0 auto',
-          fontSize: 20,
+          fontSize: sxRem(20),
           opacity: 0.7,
           transition: 'transform 150ms ease',
           transform: disclosed ? 'rotate(180deg)' : 'none',

package/src/components/navigation/AppHeader/AppHeader.tsx

@@ -3,6 +3,7 @@
 import Box from '@mui/material/Box/index.js';
 import React from 'react';
 
+import { sxRem } from '../../../tokens/relative';
 import { withDefaults } from '../../../utils/withDefaults';
 
 import type { AppHeaderProps } from './AppHeader.types';
@@ -123,7 +124,7 @@ const HeaderTrailing: React.FC<Pick<AppHeaderProps, 'meta' | 'actions'>> = ({ me
         <Box
           data-testid="app-header-meta"
           sx={{
-            fontSize: 11,
+            fontSize: sxRem(11),
             fontWeight: 700,
             letterSpacing: '0.08em',
             textTransform: 'uppercase',

package/src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx

@@ -12,6 +12,7 @@ import { breadcrumbLinkStyles } from './Breadcrumbs.styles';
 import type { BreadcrumbItem } from './Breadcrumbs.types';
 import type { BreadcrumbCopy } from '../../../copy';
 import { sheen, uiInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const BreadcrumbLink = styled(Link, {
   shouldForwardProp: (prop) => prop !== 'size' && prop !== 'active' && prop !== 'visualStyle' })<{ size?: string; active?: boolean; visualStyle?: string }>(
@@ -24,7 +25,7 @@ const BreadcrumbText = styled(Typography, {
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(0.5),
-  fontSize: size === 'sm' ? '0.875rem' : size === 'lg' ? '1.125rem' : '1rem',
+  fontSize: rem(theme, size === 'sm' ? 14 : size === 'lg' ? 18 : 16),
   fontWeight: 600,
   color: theme.palette.primary.main,
   padding: theme.spacing(0.5, 0.75),
@@ -41,7 +42,7 @@ const BreadcrumbText = styled(Typography, {
 
   // Mobile responsiveness
   [theme.breakpoints.down('sm')]: {
-    fontSize: size === 'lg' ? '1rem' : size === 'sm' ? '0.75rem' : '0.875rem',
+    fontSize: rem(theme, size === 'lg' ? 16 : size === 'sm' ? 12 : 14),
     padding: theme.spacing(0.375, 0.5) } }));
 
 // Animated separator wrapper

package/src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx

@@ -3,6 +3,7 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { modeInk, shadowInk, sheen, uiInk } from '../../../tokens/ink';
 import { EFFECT_GLOW } from '../../../tokens/ink.core';
+import { rem } from '../../../tokens/relative';
 
 export const slideIn = keyframes`
   from {
@@ -173,7 +174,7 @@ export const breadcrumbLinkStyles = ({
     alignItems: 'center',
     gap: theme.spacing(0.5),
     textDecoration: 'none',
-    fontSize: size === 'sm' ? '0.875rem' : size === 'lg' ? '1.125rem' : '1rem',
+    fontSize: rem(theme, size === 'sm' ? 14 : size === 'lg' ? 18 : 16),
     fontWeight: active ? 600 : 400,
     color: active ? theme.palette.text.primary : theme.palette.text.secondary,
     padding: theme.spacing(0.5, 0.75),
@@ -204,7 +205,7 @@ export const breadcrumbLinkStyles = ({
 
     // Mobile responsiveness
     [theme.breakpoints.down('sm')]: {
-      fontSize: size === 'lg' ? '1rem' : size === 'sm' ? '0.75rem' : '0.875rem',
+      fontSize: rem(theme, size === 'lg' ? 16 : size === 'sm' ? 12 : 14),
       padding: theme.spacing(0.375, 0.5) } });
 
 export const sizeIconMap = {

package/src/components/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -12,6 +12,7 @@ import {
   sizeIconMap } from './Breadcrumbs.styles';
 import { BreadcrumbEntry } from './BreadcrumbEntry';
 import type { BreadcrumbItem,BreadcrumbsProps } from './Breadcrumbs.types';
+import { sxRem } from '../../../tokens/relative';
 
 // Animation keyframes
 const StyledBreadcrumbs = styled(MuiBreadcrumbs, {
@@ -45,7 +46,7 @@ const getSeparator = (separatorType: string) => {
       case 'pipe':
         return '|';
       default:
-        return <ArrowForwardIos sx={{ fontSize: 12 }} />;
+        return <ArrowForwardIos sx={{ fontSize: sxRem(12) }} />;
     }
   })();
 

package/src/components/navigation/CommandPalette/CommandPalette.tsx

@@ -20,6 +20,7 @@ import { ShortcutChip } from './ShortcutChip';
 import type { CommandPaletteProps } from './CommandPalette.types';
 import type { CommandPaletteCopy } from '../../../copy';
 import { scrim } from '../../../tokens/ink';
+import { rem, sxRem } from '../../../tokens/relative';
 
 // Styled components
 const StyledDialog = styled(Dialog)(({ theme }) => ({
@@ -55,7 +56,7 @@ const SearchContainer = styled(Box)(({ theme }) => ({
 
 const SearchInput = styled(InputBase)(({ theme }) => ({
   flex: 1,
-  fontSize: '1.125rem',
+  fontSize: rem(theme, 18),
   fontWeight: 400,
   '& input': {
     padding: theme.spacing(0, 1),
@@ -115,7 +116,7 @@ const PaletteFooter: React.FC<{ commandCount: number; copy: CommandPaletteCopy }
     >
       <Box sx={{ display: 'flex', gap: 1 }}>
         <ShortcutChip
-          icon={<EnterIcon sx={{ fontSize: 12 }} />}
+          icon={<EnterIcon sx={{ fontSize: sxRem(12) }} />}
           label={copy.execute}
           size="small"
         />