@12-apps/ui 6.34.0 → 6.35.0

package/src/components/data-display/Badge/BadgeContent.tsx

@@ -1,17 +1,18 @@
 import CloseIcon from '@mui/icons-material/Close';
 import IconButton from '@mui/material/IconButton/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 
 import { BADGE_CONTENT_GAP, BADGE_SIZES } from './Badge.metrics';
 import { getSizeStyles } from './Badge.styles';
 import type { BadgeSize } from './Badge.types';
-import { px } from '../../../tokens/theme';
+import { rem, sxRem } from '../../../tokens/relative';
 
 // Derived from the shared metrics: `xl` takes `lg`'s glyph, which is what the
 // hand-written map did through its `?? CLOSE_ICON_SIZES.lg` fallback.
-const CLOSE_ICON_SIZES: Record<string, string> = Object.fromEntries(
-  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, px(metrics.closeIconSize)]),
+const CLOSE_ICON_SIZES: Record<string, number> = Object.fromEntries(
+  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, metrics.closeIconSize]),
 );
 
 const makeTestId =
@@ -23,19 +24,22 @@ const BadgeIcon: FC<{ icon: ReactNode; size: BadgeSize; testId: string }> = ({
   icon,
   size,
   testId,
-}) => (
-  <span
-    key="icon"
-    data-testid={testId}
-    style={{
-      fontSize: getSizeStyles(size).iconSize,
-      display: 'inline-flex',
-      alignItems: 'center',
-    }}
-  >
-    {icon}
-  </span>
-);
+}) => {
+  const theme = useTheme();
+  return (
+    <span
+      key="icon"
+      data-testid={testId}
+      style={{
+        fontSize: rem(theme, getSizeStyles(size).step.iconSize),
+        display: 'inline-flex',
+        alignItems: 'center',
+      }}
+    >
+      {icon}
+    </span>
+  );
+};
 
 const BadgeCloseButton: FC<{ size: BadgeSize; testId: string; onClose: (e: React.MouseEvent) => void }> = ({
   size,
@@ -51,7 +55,7 @@ const BadgeCloseButton: FC<{ size: BadgeSize; testId: string; onClose: (e: React
       p: 0,
       ml: 0.5,
       color: 'inherit',
-      '& svg': { fontSize: CLOSE_ICON_SIZES[size] ?? CLOSE_ICON_SIZES.lg },
+      '& svg': { fontSize: sxRem(CLOSE_ICON_SIZES[size] ?? BADGE_SIZES.lg.closeIconSize) },
       '&:hover': { opacity: 0.8 },
     }}
   >

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

@@ -4,6 +4,7 @@ import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.
 import type { BannerVariant } from './Banner.types';
 import { ACTIVE, HOVER } from '../Alert/Alert.metrics';
 import { modeInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // Animations
 export const fadeInSlide = keyframes`
@@ -48,7 +49,7 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
     flexShrink: 0,
     marginTop: theme.spacing(0.25),
     color: colorPalette.main,
-    fontSize: '1.25rem',
+    fontSize: rem(theme, 20),
     display: 'flex',
     alignItems: 'center',
     position: 'relative',
@@ -72,7 +73,7 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
   // Title styles
   '.banner-title': {
     fontWeight: 600,
-    fontSize: '1rem',
+    fontSize: rem(theme, 16),
     lineHeight: 1.4,
     marginBottom: theme.spacing(0.5),
     color: colorPalette.dark || colorPalette.main,
@@ -80,7 +81,7 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
 
   // Description styles  
   '.banner-description': {
-    fontSize: '0.875rem',
+    fontSize: rem(theme, 14),
     lineHeight: 1.5,
     opacity: 0.9,
     color: 'inherit',

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

@@ -14,6 +14,7 @@ import React from 'react';
 import { BANNER_TINT_S, bannerPartStyles, bannerPointerStates, fadeInSlide, getVariantColor } from './Banner.styles';
 import { FOCUS } from '../Alert/Alert.metrics';
 import type { BannerProps, BannerVariant } from './Banner.types';
+import { rem } from '../../../tokens/relative';
 
 
 
@@ -129,7 +130,7 @@ const buildActionSx = (
     minWidth: 'auto',
     px: 1.5,
     py: 0.5,
-    fontSize: '0.8125rem',
+    fontSize: rem(theme, 13),
     fontWeight: 500,
     borderRadius: 1,
 

package/src/components/data-display/CardKit/list-card-parts.tsx

@@ -5,6 +5,7 @@ import type { JSX, ReactNode } from 'react';
 import { Box } from '../../../mui/Box';
 
 import type { CardFactProps, CardLedgerLine } from './CardKit.types';
+import { sxRem } from '../../../tokens/relative';
 
 /**
  * THE SHARED FURNITURE OF AN EXPANDED LIST-CARD BODY.
@@ -37,7 +38,7 @@ export function DetailColumns({ left, right }: { left: ReactNode; right: ReactNo
  */
 export function Fact({ label, value }: CardFactProps): JSX.Element {
   return (
-    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, fontSize: 13, py: 0.25 }}>
+    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, fontSize: sxRem(13), py: 0.25 }}>
       <Box component="span" sx={{ color: 'text.secondary', flexShrink: 0 }}>
         {label}
       </Box>
@@ -73,7 +74,7 @@ export function Ledger({
           sx={{
             display: 'flex',
             justifyContent: 'space-between',
-            fontSize: 13,
+            fontSize: sxRem(13),
             color: line.tone === 'info' ? 'info.main' : 'text.secondary',
           }}
         >
@@ -108,7 +109,7 @@ export function BodyHeading({ children }: { children: ReactNode }): JSX.Element
   return (
     <Box
       sx={{
-        fontSize: 11,
+        fontSize: sxRem(11),
         fontWeight: 700,
         letterSpacing: 0.4,
         textTransform: 'uppercase',
@@ -137,7 +138,7 @@ export function TagList({
   empty: string;
 }): JSX.Element {
   if (items.length === 0) {
-    return <Box sx={{ fontSize: 13, color: 'text.disabled' }}>{empty}</Box>;
+    return <Box sx={{ fontSize: sxRem(13), color: 'text.disabled' }}>{empty}</Box>;
   }
   return (
     <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
@@ -146,7 +147,7 @@ export function TagList({
           key={item}
           component="span"
           sx={{
-            fontSize: 12,
+            fontSize: sxRem(12),
             px: 0.75,
             py: 0.25,
             borderRadius: 1,

package/src/components/data-display/Carousel/Carousel.parts.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { withDefaults } from '../../../utils/withDefaults';
 
 import { neutralTones } from '../../../tokens/ink';
-import { accentFor, muiSize } from '../../../tokens/scales';
+import { accentFor, muiSize, rem } from '../../../tokens/scales';
 
 import type {
   CarouselArrowsProps,
@@ -105,7 +105,7 @@ const NumberIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onS
         backgroundColor: isActive ? accentFor(theme, color).main : 'transparent',
         color: isActive ? accentFor(theme, color).contrastText : accentFor(theme, color).main,
         border: `1px solid ${accentFor(theme, color).main}`,
-        fontSize: '0.75rem',
+        fontSize: rem(theme, 12),
         fontWeight: isActive ? 'bold' : 'normal',
         cursor: 'pointer',
         transition: theme.transitions.create(['all']),

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

@@ -2,18 +2,18 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { CarouselProps } from './Carousel.types';
-import { accentFor } from '../../../tokens/scales';
+import { accentFor, sxRem } from '../../../tokens/scales';
 
 type Variant = NonNullable<CarouselProps['variant']>;
 type Size = NonNullable<CarouselProps['size']>;
 type Color = NonNullable<CarouselProps['color']>;
 
-const SIZES: Record<Size, { height: number; fontSize: string }> = {
-  xs: { height: 200, fontSize: '0.75rem' },
-  sm: { height: 300, fontSize: '0.875rem' },
-  md: { height: 400, fontSize: '1rem' },
-  lg: { height: 500, fontSize: '1.125rem' },
-  xl: { height: 600, fontSize: '1.25rem' },
+const SIZES: Record<Size, { height: number; fontSize: (theme: Theme) => string }> = {
+  xs: { height: 200, fontSize: sxRem(12) },
+  sm: { height: 300, fontSize: sxRem(14) },
+  md: { height: 400, fontSize: sxRem(16) },
+  lg: { height: 500, fontSize: sxRem(18) },
+  xl: { height: 600, fontSize: sxRem(20) },
 };
 
 const sizeStyles = (size: Size) => SIZES[size] ?? SIZES.md;

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

@@ -66,7 +66,7 @@ function ChartHeader({ title, subtitle, neon, dataTestId }: HeaderProps): React.
 
 export const Chart: React.FC<ChartProps> = (props) => {
   const theme = useTheme();
-  const sizeStyles = getSizeStyles(props.size, props.height);
+  const sizeStyles = getSizeStyles(theme, props.size, props.height);
   const styles = variantSx(theme, props);
   const dataTestId = props['data-testid'] ?? 'chart';
 

package/src/components/data-display/Chart/chart-context.ts

@@ -40,7 +40,7 @@ export interface ChartRenderContext {
 }
 
 export function buildChartContext(props: ChartProps, theme: Theme): ChartRenderContext {
-  const sizeStyles = getSizeStyles(props.size, props.height);
+  const sizeStyles = getSizeStyles(theme, props.size, props.height);
   const chartColors = getDefaultColors(theme, props.variant ?? 'default', props.colors);
   const { axisStyle, gridStroke, gridOpacity } = getAxisStyles(
     theme,

package/src/components/data-display/Chart/chart-internals.ts

@@ -3,7 +3,7 @@ import type { CSSProperties } from 'react';
 
 import type { ChartProps, ChartSeries } from './Chart.types';
 import { uiInk } from '../../../tokens/ink';
-import { accentFor} from '../../../tokens/scales';
+import { accentFor, sxRem } from '../../../tokens/scales';
 
 /**
  * Non-JSX internals of the prop-driven Chart: size/variant styling, palette
@@ -26,17 +26,19 @@ export interface SizeStyles {
   tickMargin: number;
 }
 
-const SIZE_PRESETS: Record<NonNullable<ChartProps['size']>, SizeStyles> = {
-  xs: { height: 200, fontSize: '0.75rem', tickMargin: 10 },
-  sm: { height: 300, fontSize: '0.875rem', tickMargin: 12 },
-  md: { height: 400, fontSize: '1rem', tickMargin: 14 },
-  lg: { height: 500, fontSize: '1.125rem', tickMargin: 16 },
-  xl: { height: 600, fontSize: '1.25rem', tickMargin: 18 },
+type SizePreset = Omit<SizeStyles, 'fontSize'> & { fontSize: (theme: Theme) => string };
+
+const SIZE_PRESETS: Record<NonNullable<ChartProps['size']>, SizePreset> = {
+  xs: { height: 200, fontSize: sxRem(12), tickMargin: 10 },
+  sm: { height: 300, fontSize: sxRem(14), tickMargin: 12 },
+  md: { height: 400, fontSize: sxRem(16), tickMargin: 14 },
+  lg: { height: 500, fontSize: sxRem(18), tickMargin: 16 },
+  xl: { height: 600, fontSize: sxRem(20), tickMargin: 18 },
 };
 
-export function getSizeStyles(size: ChartProps['size'], height?: number): SizeStyles {
+export function getSizeStyles(theme: Theme, size: ChartProps['size'], height?: number): SizeStyles {
   const preset = SIZE_PRESETS[size ?? 'md'] ?? SIZE_PRESETS.md;
-  return { ...preset, height: height ?? preset.height };
+  return { ...preset, fontSize: preset.fontSize(theme), height: height ?? preset.height };
 }
 
 export function getDefaultColors(theme: Theme, variant: ChartProps['variant'], colors?: string[]): string[] {

package/src/components/data-display/DataViews/SaveViewModal.tsx

@@ -22,6 +22,7 @@ import type {
   FilterFieldConfig,
   SavedViewSummary,
 } from "./data-views-types";
+import { sxRem } from "../../../tokens/relative";
 
 /** The values the modal collects (the current view state is captured by the parent). */
 export interface SaveViewPayload {
@@ -92,7 +93,7 @@ function FlagRow({
       <Box sx={{ mt: 0.25, color: "text.disabled", display: "flex" }}>{icon}</Box>
       <Box sx={{ minWidth: 0, flex: 1 }}>
         <Text variant="body" as="span">
-          <Box component="span" sx={{ display: "block", fontSize: "0.875rem" }}>
+          <Box component="span" sx={{ display: "block", fontSize: sxRem(14) }}>
             {title}
           </Box>
         </Text>

package/src/components/data-display/DataViews/base-card.tsx

@@ -23,6 +23,7 @@ import {
 } from "./card-surface";
 import { CARD_ASPECT_RATIOS, type CardAspectRatio } from "./data-views-types";
 import { useDataViewsCopy } from "./data-views-copy-context";
+import { rem } from "../../../tokens/relative";
 
 export interface BaseCardProps extends CardSurfaceProps {
   /** Extra body content below the caption (chips, meta). Optional. */
@@ -220,6 +221,7 @@ function CardCaption({
   subtitle?: ReactNode;
   topGap: number;
 }): React.JSX.Element {
+  const theme = useTheme();
   return (
     <Box sx={{ mt: topGap, minWidth: 0 }}>
       {title != null && (
@@ -230,7 +232,7 @@ function CardCaption({
           as="p"
           style={{
             lineHeight: 1.15,
-            fontSize: "0.95rem",
+            fontSize: rem(theme, 15.2),
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",

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

@@ -6,6 +6,7 @@ import { DescriptionItem, type DescriptionItemProps } from "../DescriptionItem";
 import { RAIL_GAP_PX } from "./list-card-rails";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * WHAT SITS IN EACH RAIL.
@@ -60,7 +61,7 @@ export function ListCardCaption({
             sx={{
               display: "block",
               lineHeight: 1.2,
-              fontSize: "0.9rem",
+              fontSize: sxRem(14.4),
               color: "inherit",
               textDecoration: "none",
               ...CLAMP,
@@ -104,7 +105,7 @@ function MetaRule(): React.JSX.Element {
         color: "text.disabled",
         opacity: 0.5,
         userSelect: "none",
-        fontSize: "0.875rem",
+        fontSize: sxRem(14),
         // A cancelled row strikes the whole meta cluster, and a struck `|` is a
         // dagger. The rule is punctuation, not data — nothing to void.
         textDecoration: "none",
@@ -219,7 +220,7 @@ function ListCardValue({ value }: { value: ReactNode }): React.JSX.Element {
     <Text variant="body" size="sm" weight="medium" as="span">
       <Box
         component="span"
-        sx={{ fontSize: "0.875rem", whiteSpace: "nowrap", ...TABULAR }}
+        sx={{ fontSize: sxRem(14), whiteSpace: "nowrap", ...TABULAR }}
       >
         {value}
       </Box>

package/src/components/data-display/DataViews/data-views-bar-controls.tsx

@@ -18,6 +18,7 @@ import { Box } from "../../../mui/Box";
 import { fieldRadiusPx } from "../../../tokens/field-radius";
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { fieldHeight } from "../../../tokens/field-height";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * "Limpar" — one gesture back to the unfiltered list.
@@ -63,13 +64,13 @@ export function ClearAllControl({
         bgcolor: "transparent",
         cursor: "pointer",
         font: "inherit",
-        fontSize: "0.8125rem",
+        fontSize: sxRem(13),
         whiteSpace: "nowrap",
         color: "text.secondary",
         "&:hover": { color: "text.primary", bgcolor: "action.hover" },
       }}
     >
-      <FilterAltOffRoundedIcon sx={{ fontSize: 16 }} />
+      <FilterAltOffRoundedIcon sx={{ fontSize: sxRem(16) }} />
       {!compact && <Box component="span">{copy.filters.clear}</Box>}
     </Box>
   );
@@ -117,7 +118,7 @@ export function CloseSearchControl({
           "&:hover": { color: "text.primary", bgcolor: "action.hover" },
         }}
       >
-        <CloseRoundedIcon sx={{ fontSize: 18 }} />
+        <CloseRoundedIcon sx={{ fontSize: sxRem(18) }} />
       </Box>
     </Tooltip>
   );

package/src/components/data-display/DataViews/data-views-columns-tab.tsx

@@ -11,6 +11,7 @@ import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
 import type { HideableColumn } from "./data-views-columns";
+import { sxRem } from "../../../tokens/relative";
 
 /* ── Colunas ─────────────────────────────────────────────────────────────── */
 
@@ -130,7 +131,7 @@ function LinkButton({
         background: "none",
         cursor: "pointer",
         font: "inherit",
-        fontSize: "0.75rem",
+        fontSize: sxRem(12),
         p: 0,
         color: muted ? "text.secondary" : "primary.main",
         "&:hover": { textDecoration: "underline" },
@@ -236,7 +237,7 @@ function MoveButton({
         "&:hover": { bgcolor: "action.selected" },
       }}
     >
-      {up ? <ArrowUpwardRoundedIcon sx={{ fontSize: 14 }} /> : <ArrowDownwardRoundedIcon sx={{ fontSize: 14 }} />}
+      {up ? <ArrowUpwardRoundedIcon sx={{ fontSize: sxRem(14) }} /> : <ArrowDownwardRoundedIcon sx={{ fontSize: sxRem(14) }} />}
     </Box>
   );
 }

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

@@ -23,6 +23,7 @@ import {
 import type { SavedViewSummary } from "./data-views-types";
 import { DisplayTab, SortTab } from "./data-views-display-tabs";
 import type { DataViewsController } from "./use-data-views-state";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * "EXIBIR" — one panel for every question about how the list is READ.
@@ -114,7 +115,7 @@ function PanelTabs({
             borderRadius: 1,
             cursor: "pointer",
             font: "inherit",
-            fontSize: "0.8125rem",
+            fontSize: sxRem(13),
             bgcolor: active ? "background.paper" : "transparent",
             boxShadow: active ? 1 : 0,
             fontWeight: active ? 600 : 400,

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

@@ -24,6 +24,7 @@ import {
   type DataViewsDensity,
   type DataViewsLayout,
 } from "./data-views-layout-context";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * Two of the three tabs inside the "Exibir" panel — Ordenar and Exibição. The
@@ -73,7 +74,7 @@ function Tile({
         borderRadius: 1,
         cursor: "pointer",
         font: "inherit",
-        fontSize: "0.75rem",
+        fontSize: sxRem(12),
         fontWeight: active ? 600 : 400,
         color: active ? "primary.main" : "text.secondary",
         "&:hover": { bgcolor: "action.hover" },
@@ -197,7 +198,7 @@ function SortFieldRow({
         borderRadius: 1,
         cursor: "pointer",
         font: "inherit",
-        fontSize: "0.8125rem",
+        fontSize: sxRem(13),
         textAlign: "left",
         fontWeight: active ? 600 : 400,
         color: active ? "primary.main" : "text.primary",

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

@@ -12,6 +12,7 @@ import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
 import type { DataViewQuery } from "./data-views-types";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * EXPORT — the current QUERY, never the rendered page.
@@ -153,10 +154,10 @@ function FormatRow({
         "&:hover": { bgcolor: "action.hover" },
       }}
     >
-      <Box component="span" sx={{ fontSize: "0.8125rem" }}>
+      <Box component="span" sx={{ fontSize: sxRem(13) }}>
         {copy.export.formats[format]?.label ?? format}
       </Box>
-      <Box component="span" sx={{ fontSize: "0.6875rem", color: "text.disabled" }}>
+      <Box component="span" sx={{ fontSize: sxRem(11), color: "text.disabled" }}>
         {copy.export.formats[format]?.hint ?? ""}
       </Box>
     </Box>

package/src/components/data-display/DataViews/data-views-filter-panel.tsx

@@ -14,6 +14,7 @@ import type {
   RangeFieldConfig,
   RangeValue,
 } from "./data-views-types";
+import { sxRem } from "../../../tokens/relative";
 
 /* ── Filter panel ────────────────────────────────────────────────────────── */
 
@@ -174,7 +175,7 @@ export function FilterDialog<T extends Record<string, unknown>>({
               underline="hover"
               onClick={props.onClearAll}
               data-testid={`${props.testIdPrefix}-clear-filters`}
-              sx={{ fontSize: "0.75rem", color: "text.secondary" }}
+              sx={{ fontSize: sxRem(12), color: "text.secondary" }}
             >
               {copy.filters.clearAllFilters}
             </Link>

package/src/components/data-display/DataViews/data-views-grid-bodies.tsx

@@ -21,6 +21,7 @@ import type { DataViewCardSelection } from "./data-views-types";
 import { toGridExpansion, type DataViewRowDetail } from "./data-views-row-detail";
 import type { DataViewsController } from "./use-data-views-state";
 import { useDataViewsCopy } from "./data-views-copy-context";
+import { sxRem } from "../../../tokens/relative";
 
 /* ── Body (grid) ─────────────────────────────────────────────────────────── */
 
@@ -66,8 +67,8 @@ function GridBody<T extends Record<string, unknown>>({
         // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows
         // tall regardless of rowHeight, so the DENSITY preference is applied
         // here rather than through `rowHeight`, which it would fight.
-        "& .MuiTableCell-root": { py: rowPadding, fontSize: "0.8125rem" },
-        "& .MuiTableCell-head": { py: 0.5, fontSize: "0.75rem" },
+        "& .MuiTableCell-root": { py: rowPadding, fontSize: sxRem(13) },
+        "& .MuiTableCell-head": { py: 0.5, fontSize: sxRem(12) },
       }}
     >
       <DataGrid<T>

package/src/components/data-display/DataViews/data-views-more-fields.tsx

@@ -26,6 +26,7 @@ import { useDataViewsCopy } from "./data-views-copy-context";
 import { fieldRadiusPx } from "../../../tokens/field-radius";
 import { fieldHeight } from "../../../tokens/field-height";
 import { fieldEdge } from "../../../tokens/field-edge";
+import { sxRem } from "../../../tokens/relative";
 
 /** What each field's control needs, minus the panel's own chrome. */
 export interface MoreFieldProps {
@@ -101,7 +102,7 @@ function OverflowPill<T extends Record<string, unknown>>({
               bgcolor: checked ? "action.selected" : "transparent",
               borderRadius: fieldRadiusPx,
               cursor: "pointer",
-              fontSize: "0.8125rem",
+              fontSize: sxRem(13),
               color: checked ? "primary.main" : "text.secondary",
             }}
           >
@@ -248,7 +249,7 @@ export function MoreGroup<T extends Record<string, unknown>>({
               bgcolor: "transparent",
               cursor: "pointer",
               font: "inherit",
-              fontSize: "0.75rem",
+              fontSize: sxRem(12),
               color: "primary.main",
               "&:hover": { textDecoration: "underline" },
             }}

package/src/components/data-display/DataViews/data-views-more-filters.tsx

@@ -17,6 +17,7 @@ import { Text } from "../../typography/Text";
 
 import { fieldClearing, MoreGroup, type MoreFieldProps } from "./data-views-more-fields";
 import type { OverflowField } from "./data-views-overflow";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * "MAIS" — the filter overflow: its trigger, its panel and its footer. What
@@ -97,7 +98,7 @@ function MoreTrigger({
             borderRadius: 5,
             bgcolor: applied ? "primary.main" : "action.selected",
             color: applied ? "primary.contrastText" : undefined,
-            fontSize: "0.6875rem",
+            fontSize: sxRem(11),
             fontWeight: applied ? 700 : undefined,
           }}
         >
@@ -168,7 +169,7 @@ function MoreFooter({
           bgcolor: "transparent",
           cursor: "pointer",
           font: "inherit",
-          fontSize: "0.8125rem",
+          fontSize: sxRem(13),
           textAlign: "left",
           color: "primary.main",
           "&:hover": { textDecoration: "underline" },

package/src/components/data-display/DataViews/data-views-preset-chips.tsx

@@ -16,6 +16,7 @@ import Box from "@mui/material/Box/index.js";
 
 import { isPresetActive, resolvePreset } from "./data-views-range-presets";
 import type { RangePreset, RangeValue } from "./data-views-types";
+import { sxRem } from "../../../tokens/relative";
 
 /** One preset, styled as the same pill-shaped chip the filter bar uses. */
 function PresetChip({
@@ -47,7 +48,7 @@ function PresetChip({
         color: active ? "primary.main" : "text.secondary",
         cursor: "pointer",
         font: "inherit",
-        fontSize: "0.75rem",
+        fontSize: sxRem(12),
         fontWeight: 600,
         whiteSpace: "nowrap",
         "&:hover": { borderColor: active ? "primary.main" : "text.primary" },