@12-apps/ui 6.34.0 → 6.35.0

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -35,6 +35,7 @@ import type { RangeFieldConfig, RangeValue } from './data-views-types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { fieldEdge } from '../../../tokens/field-edge';
+import { sxRem } from '../../../tokens/relative';
 
 
 
@@ -127,7 +128,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
         <Typography
           component="p"
           data-testid={`${testId}-inverted`}
-          sx={{ mt: 0.75, fontSize: '0.75rem', color: 'error.main' }}
+          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'error.main' }}
         >
           {copy.filters.rangeInvalid}
         </Typography>
@@ -139,7 +140,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
         <Typography
           component="p"
           data-testid={`${testId}-inclusive`}
-          sx={{ mt: 0.75, fontSize: '0.75rem', color: 'text.disabled' }}
+          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'text.disabled' }}
         >
           {copy.filters.rangeInclusiveNote}
         </Typography>
@@ -183,7 +184,7 @@ function ClearAffordance({
       }}
       sx={{ display: 'inline-flex', borderRadius: 999, p: 0.125, '&:hover': { bgcolor: 'action.selected' } }}
     >
-      <CloseIcon sx={{ fontSize: 14 }} />
+      <CloseIcon sx={{ fontSize: sxRem(14) }} />
     </Box>
   );
 }
@@ -228,7 +229,7 @@ function RangeTrigger<T extends Record<string, unknown>>({
           <ClearAffordance label={field.label} onClear={() => onChange({})} testId={`${testId}-clear-inline`} />
         ) : undefined
       }
-      endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
+      endIcon={<ChevronDownIcon sx={{ fontSize: sxRem(16) }} />}
       sx={{
         borderRadius: fieldRadiusPx,
         height: fieldHeight,
@@ -236,7 +237,7 @@ function RangeTrigger<T extends Record<string, unknown>>({
         maxWidth: 280,
         color: inverted ? 'error.main' : 'text.primary',
         fontWeight: 600,
-        fontSize: '0.8125rem',
+        fontSize: sxRem(13),
         textTransform: 'none',
         whiteSpace: 'nowrap',
         borderColor: (theme) => tone ?? fieldEdge(theme),
@@ -303,7 +304,7 @@ export function RangePill<T extends Record<string, unknown>>({
             empty grid with no explanation (FUT-668). */}
         {active && (
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mt: 1.5 }}>
-            <Typography component="span" sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
+            <Typography component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
               {rangeChipLabel(field, value)}
             </Typography>
             <Button
@@ -343,7 +344,7 @@ export function PanelRangeField<T extends Record<string, unknown>>({
   if (field.kind === "day") {
     return (
       <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-        <Typography component="span" sx={{ fontSize: "0.75rem", fontWeight: 500, color: "text.secondary" }}>
+        <Typography component="span" sx={{ fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }}>
           {field.label}
         </Typography>
         <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />

package/src/components/data-display/DataViews/data-views-scopes.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef } from "react";
 
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { Box } from "../../../mui/Box";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * SCOPES — a page-level partition rendered as a strip of tabs under the toolbar.
@@ -188,7 +189,7 @@ function scopeTabSx(active: boolean): Record<string, unknown> {
     cursor: "pointer",
     whiteSpace: "nowrap",
     font: "inherit",
-    fontSize: "0.8125rem",
+    fontSize: sxRem(13),
     fontWeight: active ? 600 : 400,
     color: active ? "primary.main" : "text.secondary",
     "&:hover": { color: active ? "primary.main" : "text.primary" },
@@ -217,7 +218,7 @@ function ScopeCount({
         ml: 0.75,
         px: 0.75,
         borderRadius: 5,
-        fontSize: "0.6875rem",
+        fontSize: sxRem(11),
         fontWeight: 600,
         bgcolor: active ? "primary.main" : "action.selected",
         color: active ? "primary.contrastText" : "text.secondary",

package/src/components/data-display/DataViews/data-views-search.tsx

@@ -17,6 +17,7 @@ import { fieldRadiusPx } from "../../../tokens/field-radius";
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { fieldHeight, fieldTextFieldStyles } from "../../../tokens/field-height";
 import { fieldEdge } from "../../../tokens/field-edge";
+import { sxRem } from "../../../tokens/relative";
 
 /** How long the box waits after the last keystroke before it queries. */
 const SEARCH_DEBOUNCE_MS = 350;
@@ -152,7 +153,7 @@ export function InlineKeyword({
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
-            <SearchIcon sx={{ fontSize: 16, color: "text.secondary" }} />
+            <SearchIcon sx={{ fontSize: sxRem(16), color: "text.secondary" }} />
           </InputAdornment>
         ),
         endAdornment: draft ? (
@@ -164,7 +165,7 @@ export function InlineKeyword({
               onClick={() => setDraft("")}
               sx={{ p: 0.25 }}
             >
-              <CloseIcon sx={{ fontSize: 14 }} />
+              <CloseIcon sx={{ fontSize: sxRem(14) }} />
             </IconButton>
           </InputAdornment>
         ) : undefined,
@@ -212,7 +213,7 @@ export function CollapsedSearch({
         bgcolor: active ? "action.selected" : "background.paper",
       }}
     >
-      <SearchIcon sx={{ fontSize: 18 }} />
+      <SearchIcon sx={{ fontSize: sxRem(18) }} />
       {active && (
         <Box
           component="span"

package/src/components/data-display/DataViews/data-views-view-nav.tsx

@@ -32,6 +32,7 @@ import { Text } from "../../typography/Text";
 
 import type { DisplayPanelView } from "./data-views-display-panel";
 import type { SavedViewSummary } from "./data-views-types";
+import { sxRem } from "../../../tokens/relative";
 
 /** What the panel needs to drive the views without owning any of them. */
 export interface ViewNavHandlers {
@@ -59,7 +60,7 @@ const rowSx = {
   bgcolor: "transparent",
   cursor: "pointer",
   font: "inherit",
-  fontSize: "0.8125rem",
+  fontSize: sxRem(13),
   textAlign: "left",
   color: "text.primary",
   "&:hover": { bgcolor: "action.hover" },
@@ -190,7 +191,7 @@ export function ViewActions({
         type="button"
         onClick={onBack}
         data-testid={`${testIdPrefix}-view-actions-back`}
-        sx={{ ...rowSx, color: "text.secondary", fontSize: "0.75rem" }}
+        sx={{ ...rowSx, color: "text.secondary", fontSize: sxRem(12) }}
       >
         <ChevronLeftRoundedIcon fontSize="small" />
         <Box component="span" sx={{ flex: 1, fontWeight: 600, color: "text.primary" }}>
@@ -278,7 +279,7 @@ function ViewToggle({
         border: 0,
         borderRadius: 1,
         font: "inherit",
-        fontSize: "0.75rem",
+        fontSize: sxRem(12),
         bgcolor: open ? "action.selected" : "transparent",
         ...affordance,
       }}

package/src/components/data-display/DataViews/list-card-cells.tsx

@@ -3,6 +3,7 @@
 import { createContext, useContext, type ReactNode } from "react";
 
 import { Box } from "../../../mui/Box";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * THE CELL CONFIG — the list declares its columns once, every row obeys them.
@@ -126,14 +127,14 @@ function Cell<T extends Record<string, unknown>>({
     >
       <Box
         component="span"
-        sx={{ ...clamp, fontSize: 14, fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric }}
+        sx={{ ...clamp, fontSize: sxRem(14), fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric }}
       >
         {config.primary(row)}
       </Box>
       {secondary != null && (
         <Box
           component="span"
-          sx={{ ...clamp, fontSize: 12.5, lineHeight: 1.3, color: "text.secondary", ...numeric }}
+          sx={{ ...clamp, fontSize: sxRem(12.5), lineHeight: 1.3, color: "text.secondary", ...numeric }}
         >
           {secondary}
         </Box>

package/src/components/data-display/ErrorState/ErrorState.tsx

@@ -24,6 +24,7 @@ import {
 } from './ErrorState.metrics';
 import type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';
 import { resolveTestId } from '../../../platform/test-id';
+import { sxRem } from '../../../tokens/relative';
 
 const makeTestId =
   (dataTestId?: string) =>
@@ -56,7 +57,7 @@ const ErrorIcon: React.FC<{
         opacity: ERROR_ICON_BOX_OPACITY,
       }}
     >
-      {icon || <Fallback sx={{ fontSize: ERROR_ICON_SIZE, color: color.main }} />}
+      {icon || <Fallback sx={{ fontSize: sxRem(ERROR_ICON_SIZE), color: color.main }} />}
     </Box>
   );
 };

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts

@@ -2,6 +2,7 @@ import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 
 const pulseAnimation = keyframes`
   0% {
@@ -19,12 +20,12 @@ const pulseAnimation = keyframes`
 `;
 
 const SIZE_MAP = {
-  sm: { fontSize: '0.75rem', padding: '4px 8px' },
-  md: { fontSize: '0.875rem', padding: '6px 12px' },
-  lg: { fontSize: '1rem', padding: '8px 16px' },
+  sm: { fontSize: sxRem(12), padding: '4px 8px' },
+  md: { fontSize: sxRem(14), padding: '6px 12px' },
+  lg: { fontSize: sxRem(16), padding: '8px 16px' },
 } as const;
 
-export const getSizeStyles = (size?: string): { fontSize: string; padding: string } =>
+export const getSizeStyles = (size?: string): { fontSize: (theme: Theme) => string; padding: string } =>
   SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;
 
 export const variantStyles = (theme: Theme, variant?: string): CSSObject => {

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx

@@ -25,7 +25,7 @@ const StyledTooltip = styled(MuiTooltip, {
   return {
     '& .MuiTooltip-tooltip': {
       borderRadius: theme.spacing(1),
-      fontSize: sizeStyles.fontSize,
+      fontSize: sizeStyles.fontSize(theme),
       padding: sizeStyles.padding,
       fontWeight: 500,
       transition: 'all 0.3s ease',

package/src/components/data-display/Lightbox/Lightbox.constants.ts

@@ -1,6 +1,7 @@
 import type { Theme } from '@mui/material/styles/index.js';
 
 import { onMedia, scrim, sheen } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 
 export const MIN_ZOOM = 0.5;
 export const MAX_ZOOM = 5;
@@ -39,7 +40,7 @@ export const captionSx = {
 
 export const counterSx = {
   color: onMedia,
-  fontSize: '0.875rem',
+  fontSize: sxRem(14),
   backgroundColor: SCRIM,
   borderRadius: 1,
 } as const;

package/src/components/data-display/Lightbox/LightboxThumbnails.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { thumbnailStripSx } from './Lightbox.constants';
 import type { LightboxItem } from './Lightbox.types';
 import { onMedia, sheen } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 
 const THUMB_WIDTH = 60;
 const THUMB_HEIGHT = 40;
@@ -22,7 +23,7 @@ const VideoThumbnail: FC = () => (
       justifyContent: 'center',
     }}
   >
-    <PlayIcon sx={{ color: onMedia, fontSize: 16 }} />
+    <PlayIcon sx={{ color: onMedia, fontSize: sxRem(16) }} />
   </Box>
 );
 

package/src/components/data-display/MapPreview/MapDecorations.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { getScaleDistance } from './mapProjection';
 import { BOUNCE_KEYFRAMES } from './mapSurface';
 import { shadowInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // Decorative only: these give the mock surface something to look like without
 // standing in for real map data.
@@ -50,7 +51,7 @@ const DecorativePin: FC<{ top: string; left: string }> = ({ top, left }) => {
 
   return (
     <Box sx={{ position: 'absolute', top, left, opacity: 0.6 }}>
-      <PlaceIcon sx={{ fontSize: 20, color: theme.palette.primary.main }} />
+      <PlaceIcon sx={{ fontSize: rem(theme, 20), color: theme.palette.primary.main }} />
     </Box>
   );
 };
@@ -79,7 +80,7 @@ export const MapCentreMarker: FC = () => {
     >
       <LocationIcon
         sx={{
-          fontSize: 36,
+          fontSize: rem(theme, 36),
           color: theme.palette.error.main,
           animation: 'bounce 2s infinite',
           '@keyframes bounce': BOUNCE_KEYFRAMES,
@@ -104,7 +105,7 @@ export const MapScaleBar: FC<{ zoom: number }> = ({ zoom }) => {
         padding: theme.spacing(0.5, 1),
         background: alpha(theme.palette.background.paper, 0.9),
         borderRadius: theme.shape.borderRadius,
-        fontSize: '0.75rem',
+        fontSize: rem(theme, 12),
         color: theme.palette.text.secondary,
       }}
     >
@@ -151,7 +152,7 @@ export const MapCompass: FC = () => {
       }}
     >
       <NavigationIcon
-        sx={{ fontSize: 24, color: theme.palette.primary.main, transform: 'rotate(-45deg)' }}
+        sx={{ fontSize: rem(theme, 24), color: theme.palette.primary.main, transform: 'rotate(-45deg)' }}
       />
     </Box>
   );

package/src/components/data-display/MapPreview/MapMarkers.tsx

@@ -10,6 +10,7 @@ import { MARKER_PIXELS_PER_DEGREE } from './MapPreview.constants';
 import type { LatLng, MapMarker } from './MapPreview.types';
 import { BOUNCE_KEYFRAMES } from './mapSurface';
 import { shadowInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -60,7 +61,7 @@ export const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) =
           <Tooltip title={markerItem.description || markerItem.title || ''}>
             <LocationIcon
               sx={{
-                fontSize: 32,
+                fontSize: rem(theme, 32),
                 color: theme.palette.error.main,
                 filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,
                 animation: animated ? 'bounce 2s infinite' : 'none',

package/src/components/data-display/Progress/Progress.styles.ts

@@ -13,7 +13,7 @@ import {
 } from './Progress.metrics';
 import type { ProgressSize, ProgressVariant } from './Progress.types';
 import { softNeutral } from '../../../tokens/ink';
-import { px } from '../../../tokens/theme';
+import { sxRem } from '../../../tokens/relative';
 
 // Define pulse animation. The stops and the two seconds are the shared metrics'
 // (`PULSE`), so the native `Progress` breathes on the same cadence.
@@ -51,13 +51,13 @@ export const getColorFromTheme = (theme: Theme, color: string): PaletteColor =>
 
 // Derived from the shared metrics, not restated: the native `Progress` reads
 // the same table, so the two renderers cannot disagree on a size.
-const SIZE_MAP: Record<ProgressSize, { height: number; circularSize: number; fontSize: string }> =
+const SIZE_MAP: Record<ProgressSize, { height: number; circularSize: number; fontSize: (theme: Theme) => string }> =
   Object.fromEntries(
     Object.entries(PROGRESS_SIZES).map(([size, step]) => [
       size,
-      { height: step.height, circularSize: step.circularSize, fontSize: px(step.fontSize) },
+      { height: step.height, circularSize: step.circularSize, fontSize: sxRem(step.fontSize) },
     ]),
-  ) as Record<ProgressSize, { height: number; circularSize: number; fontSize: string }>;
+  ) as Record<ProgressSize, { height: number; circularSize: number; fontSize: (theme: Theme) => string }>;
 
 export const getSizeStyles = (size?: ProgressSize) => SIZE_MAP[size as ProgressSize] || SIZE_MAP.md;
 

package/src/components/data-display/StatCard/StatCard.tsx

@@ -15,6 +15,7 @@ import type {
   StatCardDeltaTone,
   StatCardProps,
 } from './StatCard.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** The arrow each direction renders (decorative — the text carries the meaning). */
 const DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {
@@ -69,7 +70,7 @@ function DeltaRow({ delta, testId }: { delta: StatCardDelta; testId: string }):
     >
       {/* The arrow duplicates what the aria-label already says, so it is hidden
           from assistive tech rather than read twice. */}
-      <Icon aria-hidden="true" sx={{ fontSize: '1rem', color }} />
+      <Icon aria-hidden="true" sx={{ fontSize: sxRem(16), color }} />
       <Typography
         variant="body2"
         component="span"

package/src/components/data-display/Stepper/Stepper.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 
 import type { Step, StepItemProps, StepperProps } from './Stepper.types';
 import { neutralTones } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 import type { SizeValue } from '../../../tokens/scales';
 
 /**
@@ -173,7 +174,7 @@ const StepCircle: React.FC<
       data-testid={`stepper-step-icon-${index}`}
     >
       {isCompleted ? (
-        <CheckCircle sx={{ fontSize: STEP_ICON_SIZE[size] }} />
+        <CheckCircle sx={{ fontSize: sxRem(STEP_ICON_SIZE[size]) }} />
       ) : (
         <Typography variant={labelVariant} fontWeight="bold">
           {index + 1}

package/src/components/data-display/Table/Table.styles.ts

@@ -2,6 +2,7 @@ import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { TableDensity, TableStripeColor } from './Table.types';
+import { rem } from '../../../tokens/relative';
 
 const pulseAnimation = keyframes`
   0% {
@@ -19,22 +20,22 @@ const pulseAnimation = keyframes`
 `;
 
 // Density configurations
-const getDensityConfig = (density: TableDensity = 'normal') => {
+const getDensityConfig = (theme: Theme, density: TableDensity = 'normal') => {
   const configs = {
     compact: {
       rowHeight: 36,
       cellPadding: '6px 12px',
-      fontSize: '0.8125rem',
+      fontSize: rem(theme, 13),
       headerPadding: '8px 12px' },
     normal: {
       rowHeight: 52,
       cellPadding: '12px 16px',
-      fontSize: '0.875rem',
+      fontSize: rem(theme, 14),
       headerPadding: '16px 16px' },
     comfortable: {
       rowHeight: 68,
       cellPadding: '18px 24px',
-      fontSize: '0.875rem',
+      fontSize: rem(theme, 14),
       headerPadding: '20px 24px' } };
   return configs[density];
 };
@@ -191,7 +192,7 @@ export const tableStyles = ({
   stickyHeader?: boolean;
   stripeColor?: TableStripeColor;
 }): CSSObject => {
-  const densityConfig = getDensityConfig(density);
+  const densityConfig = getDensityConfig(theme, density);
   
   return {
     borderRadius: theme.spacing(1),

package/src/components/data-display/Timeline/TimelineRow.tsx

@@ -15,6 +15,7 @@ import React from 'react';
 
 import type { TimelineItem, TimelineProps } from './Timeline.types';
 import { onMedia, uiInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const slideInAnimation = keyframes`from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); }`;
 const pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;
@@ -88,7 +89,7 @@ const TimelineDot = styled(Box, {
     animation: `${pulseAnimation} 2s ease infinite`,
   }),
   '& svg': {
-    fontSize: hasIcon ? '1.2rem' : '0.8rem',
+    fontSize: rem(theme, hasIcon ? 19.2 : 12.8),
     color: theme.palette.background.paper,
   },
 }));
@@ -124,7 +125,7 @@ const TimelineCard = styled(Card, {
 
 const TimelineTimestamp = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 500,
   letterSpacing: '0.5px',
   textTransform: 'uppercase',
@@ -132,7 +133,7 @@ const TimelineTimestamp = styled(Typography)(({ theme }) => ({
 
 const MetadataChip = styled(Chip)(({ theme }) => ({
   height: 24,
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   background: alpha(theme.palette.primary.main, 0.08),
   border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
 }));

package/src/components/data-display/TimingDiagram/TimingDiagram.tsx

@@ -13,6 +13,7 @@ import {
   StackedView,
   WaterfallView,
 } from './TimingDiagram.views';
+import { rem } from '../../../tokens/relative';
 
 // Styled components
 const DiagramContainer = styled(Paper)(({ theme }) => ({
@@ -43,7 +44,7 @@ const LegendItem = styled(Box)(({ theme }) => ({
     borderRadius: 2,
   },
   '& .label': {
-    fontSize: '0.8rem',
+    fontSize: rem(theme, 12.8),
     color: theme.palette.text.secondary,
   },
 }));

package/src/components/data-display/TimingDiagram/TimingDiagram.views.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 
 import type { TimingData } from './TimingDiagram.types';
 import { onMedia, sheen, uiInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 export type PhaseKey = 'dns' | 'connect' | 'ssl' | 'request' | 'response';
 
@@ -94,7 +95,7 @@ const WaterfallBar = styled(Box, {
   alignItems: 'center',
   justifyContent: 'center',
   color: theme.palette.getContrastText(phaseColor),
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 500,
   boxShadow: `0 2px 8px ${alpha(phaseColor, 0.3)}`,
   transition: animated ? 'all 0.5s ease' : 'none',
@@ -125,7 +126,7 @@ const TimelineAxis = styled(Box)(({ theme }) => ({
 }));
 
 const TimeLabel = styled(Typography)(({ theme }) => ({
-  fontSize: '0.7rem',
+  fontSize: rem(theme, 11.2),
   color: theme.palette.text.secondary,
   fontWeight: 500,
 }));
@@ -211,7 +212,7 @@ const StackedSegment = styled(Box, {
   alignItems: 'center',
   justifyContent: 'center',
   color: onMedia(theme),
-  fontSize: '0.7rem',
+  fontSize: rem(theme, 11.2),
   fontWeight: 600,
   position: 'relative',
   transition: 'all 0.3s ease',
@@ -284,7 +285,7 @@ const HorizontalSegment = styled(Box, {
   gap: theme.spacing(2),
   '& .label': {
     minWidth: 80,
-    fontSize: '0.85rem',
+    fontSize: rem(theme, 13.6),
     fontWeight: 500,
     color: theme.palette.text.secondary,
   },
@@ -316,7 +317,7 @@ const HorizontalSegment = styled(Box, {
   '& .value': {
     minWidth: 60,
     textAlign: 'right',
-    fontSize: '0.85rem',
+    fontSize: rem(theme, 13.6),
     fontWeight: 600,
     color: phaseColor,
   },

package/src/components/data-display/Tooltip/Tooltip.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 import type { TooltipProps } from './Tooltip.types';
 import { absoluteInk, neutralTones } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -23,12 +24,12 @@ const pulseAnimation = keyframes`
 `;
 
 const SIZE_MAP = {
-  sm: { fontSize: '0.75rem', padding: '4px 8px' },
-  md: { fontSize: '0.875rem', padding: '6px 12px' },
-  lg: { fontSize: '1rem', padding: '8px 16px' },
+  sm: { fontSize: sxRem(12), padding: '4px 8px' },
+  md: { fontSize: sxRem(14), padding: '6px 12px' },
+  lg: { fontSize: sxRem(16), padding: '8px 16px' },
 } as const;
 
-const getSizeStyles = (size?: string): { fontSize: string; padding: string } =>
+const getSizeStyles = (size?: string): { fontSize: (theme: Theme) => string; padding: string } =>
   SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;
 
 const variantStyles = (theme: Theme, variant?: string): CSSObject => {
@@ -101,7 +102,7 @@ const StyledTooltip = styled(MuiTooltip, {
   return {
     '& .MuiTooltip-tooltip': {
       borderRadius: theme.spacing(1),
-      fontSize: sizeStyles.fontSize,
+      fontSize: sizeStyles.fontSize(theme),
       padding: sizeStyles.padding,
       fontWeight: 500,
       transition: 'all 0.3s ease',

package/src/components/feedback/Sonner/Sonner.tsx

@@ -2,6 +2,8 @@ import Box from '@mui/material/Box/index.js';
 import Portal from '@mui/material/Portal/index.js';
 import React, { createContext, useCallback, useContext, useRef,useState, useMemo } from 'react';
 
+import { sxRem } from '../../../tokens/relative';
+
 import type { SonnerContextType, SonnerItem,SonnerProps } from './Sonner.types';
 
 const SonnerContext = createContext<SonnerContextType | null>(null);
@@ -196,7 +198,7 @@ const SonnerToaster: React.FC<{
               p: 1,
               mb: 0.5,
               textAlign: 'center',
-              fontSize: '0.75rem',
+              fontSize: sxRem(12),
               color: 'text.secondary',
               pointerEvents: 'none' }}
           >

package/src/components/feedback/Sonner/SonnerToast.tsx

@@ -14,6 +14,7 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { shadowInk } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 
 import type { SonnerItem } from './Sonner.types';
 import type { SonnerProps } from './Sonner.types';
@@ -23,13 +24,13 @@ const renderToastIcon = (icon: SonnerProps['icon'], type: SonnerProps['type']) =
 
   switch (type) {
     case 'success':
-      return <SuccessIcon sx={{ fontSize: 20, color: 'success.main' }} />;
+      return <SuccessIcon sx={{ fontSize: sxRem(20), color: 'success.main' }} />;
     case 'error':
-      return <ErrorIcon sx={{ fontSize: 20, color: 'error.main' }} />;
+      return <ErrorIcon sx={{ fontSize: sxRem(20), color: 'error.main' }} />;
     case 'warning':
-      return <WarningIcon sx={{ fontSize: 20, color: 'warning.main' }} />;
+      return <WarningIcon sx={{ fontSize: sxRem(20), color: 'warning.main' }} />;
     case 'info':
-      return <InfoIcon sx={{ fontSize: 20, color: 'info.main' }} />;
+      return <InfoIcon sx={{ fontSize: sxRem(20), color: 'info.main' }} />;
     case 'loading':
       return <CircularProgress size={16} />;
     default:
@@ -115,7 +116,7 @@ const ToastContent: React.FC<{
     )}
 
     {description && (
-      <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>
+      <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: sxRem(14) }}>
         {description}
       </Typography>
     )}
@@ -139,7 +140,7 @@ const ToastActionButton: React.FC<{
     size="small"
     onClick={action.onClick}
     variant={buttonVariant}
-    sx={{ fontSize: '0.75rem', py: 0.5, px: 1.5 }}
+    sx={{ fontSize: sxRem(12), py: 0.5, px: 1.5 }}
   >
     {action.label}
   </Button>