@12-apps/ui 6.34.0 → 6.36.0

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"
         />

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

@@ -12,6 +12,7 @@ import React from 'react';
 import { ShortcutChip } from './ShortcutChip';
 import type { PaletteCommand } from './CommandPalette.types';
 import type { CommandPaletteCopy } from '../../../copy';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const ResultsList = styled(List)(({ theme }) => ({
   maxHeight: 400,
@@ -50,7 +51,7 @@ const CommandItem = styled(ListItem)<{ selected?: boolean }>(({ theme, selected
 }));
 
 const CategoryLabel = styled(Typography)(({ theme }) => ({
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 600,
   color: theme.palette.text.secondary,
   textTransform: 'uppercase',
@@ -84,8 +85,8 @@ const CommandRow: React.FC<{
     <ListItemText
       primary={command.label}
       secondary={command.description}
-      primaryTypographyProps={{ fontSize: '0.9rem', fontWeight: selected ? 500 : 400 }}
-      secondaryTypographyProps={{ fontSize: '0.75rem' }}
+      primaryTypographyProps={{ fontSize: sxRem(14.4), fontWeight: selected ? 500 : 400 }}
+      secondaryTypographyProps={{ fontSize: sxRem(12) }}
     />
     {command.shortcut && <ShortcutChip label={command.shortcut} size="small" />}
   </CommandItem>
@@ -168,7 +169,7 @@ export const PaletteResults: React.FC<{
       {showRecentSection && (
         <>
           <CategoryLabel data-testid={`${dataTestId}-group-recent`}>
-            <RecentIcon sx={{ fontSize: 14, mr: 0.5, verticalAlign: 'middle' }} />
+            <RecentIcon sx={{ fontSize: sxRem(14), mr: 0.5, verticalAlign: 'middle' }} />
             {copy.recent}
           </CategoryLabel>
           {recent.map(row)}

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

@@ -2,6 +2,8 @@ import type { ChipProps } from '@mui/material/Chip/index.js';
 import Chip from '@mui/material/Chip/index.js';
 import React from 'react';
 
+import { sxRem } from '../../../tokens/relative';
+
 // A plain component rather than styled(Chip): a styled component's inferred type
 // cannot be named across a module boundary in this package (TS2742), and both
 // the results list and the palette footer need this one.
@@ -10,7 +12,7 @@ export const ShortcutChip: React.FC<ChipProps> = (props) => (
     {...props}
     sx={{
       height: 20,
-      fontSize: '0.7rem',
+      fontSize: sxRem(11.2),
       fontFamily: 'monospace',
       ...props.sx,
     }}

package/src/components/navigation/ContextMenu/ContextMenu.tsx

@@ -10,6 +10,7 @@ import React, { cloneElement, isValidElement,useState } from 'react';
 
 import type { ContextMenuItem,ContextMenuProps } from './ContextMenu.types';
 import { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const StyledMenu = styled(Menu, {
   shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',
@@ -41,7 +42,7 @@ const StyledMenu = styled(Menu, {
 
     ...(size === 'sm' && {
       '& .MuiMenuItem-root': {
-        fontSize: '0.875rem',
+        fontSize: rem(theme, 14),
         minHeight: 32,
         padding: theme.spacing(0.5, 1.5),
       },
@@ -49,7 +50,7 @@ const StyledMenu = styled(Menu, {
 
     ...(size === 'lg' && {
       '& .MuiMenuItem-root': {
-        fontSize: '1.125rem',
+        fontSize: rem(theme, 18),
         minHeight: 48,
         padding: theme.spacing(1.5, 2),
       },
@@ -96,7 +97,7 @@ const StyledMenuItem = styled(MenuItem, {
 
 const MenuHeader = styled(Typography)(({ theme }) => ({
   padding: theme.spacing(1, 2),
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 600,
   textTransform: 'uppercase',
   color: theme.palette.text.secondary,
@@ -104,7 +105,7 @@ const MenuHeader = styled(Typography)(({ theme }) => ({
 }));
 
 const ShortcutText = styled(Typography)(({ theme }) => ({
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   color: theme.palette.text.secondary,
   marginLeft: 'auto',
   paddingLeft: theme.spacing(2),

package/src/components/navigation/DropdownMenu/DropdownMenu.tsx

@@ -13,6 +13,7 @@ import React, { cloneElement, isValidElement,useRef, useState } from 'react';
 
 import type { DropdownMenuItem,DropdownMenuProps } from './DropdownMenu.types';
 import { modeInk, shadowInk, sheen } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // Resolves every light/dark decision once. The inline version repeated
 // `theme.palette.mode === 'dark' ? … : …` nine times, and two of those had the
@@ -79,7 +80,7 @@ const StyledMenu = styled(Menu, {
 
     ...(size === 'sm' && {
       '& .MuiMenuItem-root': {
-        fontSize: '0.875rem',
+        fontSize: rem(theme, 14),
         minHeight: 32,
         padding: theme.spacing(0.75, 2),
       },
@@ -87,7 +88,7 @@ const StyledMenu = styled(Menu, {
 
     ...(size === 'lg' && {
       '& .MuiMenuItem-root': {
-        fontSize: '1.125rem',
+        fontSize: rem(theme, 18),
         minHeight: 48,
         padding: theme.spacing(1.5, 3),
       },
@@ -132,7 +133,7 @@ const StyledMenuItem = styled(MenuItem, {
 
 const MenuHeader = styled(Typography)(({ theme }) => ({
   padding: theme.spacing(1, 2),
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 600,
   textTransform: 'uppercase',
   color: theme.palette.text.secondary,
@@ -140,7 +141,7 @@ const MenuHeader = styled(Typography)(({ theme }) => ({
 }));
 
 const ShortcutText = styled(Typography)(({ theme }) => ({
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   color: theme.palette.text.secondary,
   marginLeft: 'auto',
   paddingLeft: theme.spacing(2),

package/src/components/navigation/NavigationMenu/NavigationMenu.styles.ts

@@ -1,5 +1,6 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+import { rem } from '../../../tokens/relative';
 
 import { EFFECT_GLOW } from '../../../tokens/ink.core';
 
@@ -29,12 +30,12 @@ export const pulseGlow = keyframes`
 const SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {
   sm: (theme) => ({
     padding: theme.spacing(1, 1.5),
-    fontSize: '0.875rem',
+    fontSize: rem(theme, 14),
     '& .MuiListItemIcon-root': { transform: 'scale(0.85)' },
   }),
   lg: (theme) => ({
     padding: theme.spacing(2, 2.5),
-    fontSize: '1.125rem',
+    fontSize: rem(theme, 18),
     '& .MuiListItemIcon-root': { transform: 'scale(1.15)' },
   }),
 };

package/src/components/navigation/NavigationMenu/NavigationMenuItem.tsx

@@ -17,6 +17,7 @@ import { useMenuItemState } from './NavigationMenuItem.hooks';
 import { navItemButtonStyles, pulseGlow } from './NavigationMenu.styles';
 import type { NavigationMenuItem } from './NavigationMenu.types';
 import { onMedia, shadowInk, uiInk } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 
 const StyledListItem = styled(ListItem, {
   shouldForwardProp: (prop) => !['variant', 'active', 'size', 'level'].includes(prop as string) })<{ variant?: string; active?: boolean; size?: string; level?: number }>(
@@ -150,7 +151,7 @@ const MenuItemLabel: React.FC<{
             height: 20,
             px: 0.75,
             borderRadius: '10px',
-            fontSize: '0.75rem',
+            fontSize: sxRem(12),
             fontWeight: 600,
             color: (theme) => onMedia(theme),
             background: (theme) =>

package/src/components/navigation/Pagination/Pagination.styles.ts

@@ -1,14 +1,15 @@
 import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+import { rem } from '../../../tokens/relative';
 
 const ITEM_SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {
   sm: (theme) => ({
-      fontSize: '0.875rem',
+      fontSize: rem(theme, 14),
       minWidth: 28,
       height: 28,
       padding: theme.spacing(0.25, 0.5) }),
   lg: (theme) => ({
-      fontSize: '1.125rem',
+      fontSize: rem(theme, 18),
       minWidth: 44,
       height: 44,
       padding: theme.spacing(1, 1.5) }) };

package/src/components/navigation/Tabs/Tabs.styles.ts

@@ -1,11 +1,12 @@
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { alpha } from '@mui/material/styles/index.js';
+import { rem } from '../../../tokens/relative';
 
 const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
     ...(size === 'sm' && {
       minHeight: 32,
       '& .MuiTab-root': {
-        fontSize: '0.875rem',
+        fontSize: rem(theme, 14),
         minHeight: 32,
         padding: theme.spacing(0.5, 1.5),
       },
@@ -14,7 +15,7 @@ const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
     ...(size === 'lg' && {
       minHeight: 56,
       '& .MuiTab-root': {
-        fontSize: '1.125rem',
+        fontSize: rem(theme, 18),
         minHeight: 56,
         padding: theme.spacing(1.5, 3),
       },

package/src/components/navigation/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { CustomTabPanel } from './TabsPanel';
 import { tabsRootStyles } from './Tabs.styles';
 import type { TabItem, TabsProps } from './Tabs.types';
+import { rem } from '../../../tokens/relative';
 
 const StyledTabs = styled(MuiTabs, {
   shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string) })<{ customVariant?: string; size?: string; showDividers?: boolean }>(
@@ -32,11 +33,11 @@ const CloseButton = styled(Box)(({ theme }) => ({
     backgroundColor: alpha(theme.palette.error.main, 0.1),
     color: theme.palette.error.main } }));
 
-const BadgeWrapper = styled(Badge)(() => ({
+const BadgeWrapper = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
     right: -6,
     top: 4,
-    fontSize: '0.75rem',
+    fontSize: rem(theme, 12),
     minWidth: 16,
     height: 16,
     padding: 0 } }));

package/src/components/typography/Blockquote/Blockquote.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 
 import type { BlockquoteProps } from './Blockquote.types';
 import { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
@@ -39,7 +40,7 @@ const StyledBlockquote = styled('blockquote', {
     padding: 0,
     position: 'relative' as const,
     fontFamily: theme.typography.body1.fontFamily,
-    fontSize: '1.125rem',
+    fontSize: rem(theme, 18),
     lineHeight: 1.6,
     fontStyle: 'italic',
     color: theme.palette.text.primary,
@@ -105,7 +106,7 @@ const QuoteIcon = styled(FormatQuote)<{ customColor: string }>(({ theme, customC
     position: 'absolute',
     top: theme.spacing(1),
     left: theme.spacing(1),
-    fontSize: '2rem',
+    fontSize: rem(theme, 32),
     opacity: 0.3,
     transform: 'rotate(180deg)',
     color: colorPalette.main,
@@ -121,12 +122,12 @@ const CitationContainer = styled(Box)(({ theme }) => ({
 
 const AuthorName = styled(Typography)(({ theme }) => ({
   fontWeight: 600,
-  fontSize: '0.875rem',
+  fontSize: rem(theme, 14),
   marginBottom: theme.spacing(0.5),
 }));
 
-const SourceName = styled(Typography)(() => ({
-  fontSize: '0.75rem',
+const SourceName = styled(Typography)(({ theme }) => ({
+  fontSize: rem(theme, 12),
   opacity: 0.7,
 }));