@12-apps/ui 6.34.0 → 6.36.0

package/src/components/form/Checkbox/Checkbox.tsx

@@ -19,7 +19,7 @@ import {
 } from './Checkbox.metrics';
 import type { CheckboxProps } from './Checkbox.types';
 import { splitTestId } from '../../../platform/test-id';
-import { px } from '../../../tokens/theme';
+import { rem } from '../../../tokens/relative';
 
 const pulse = keyframes`
   0% {
@@ -99,7 +99,7 @@ const StyledFormControlLabel = styled(FormControlLabel, {
     marginLeft: CHECKBOX_LABEL.marginLeft,
     '& .MuiFormControlLabel-label': {
       color: error ? theme.palette.error.main : theme.palette.text.primary,
-      fontSize: px(CHECKBOX_LABEL.fontSize),
+      fontSize: rem(theme, CHECKBOX_LABEL.fontSize),
     },
   })
 );

package/src/components/form/CodeEditor/CodeEditor.tsx

@@ -2,7 +2,7 @@ import Editor from '@monaco-editor/react';
 import Box from '@mui/material/Box/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { alpha, styled } from '@mui/material/styles/index.js';
+import { alpha, styled, useTheme, type Theme } from '@mui/material/styles/index.js';
 import type { editor } from 'monaco-editor';
 import type { FC} from 'react';
 import React, {  } from 'react';
@@ -14,6 +14,7 @@ import { EditorToolbar } from './CodeEditorToolbar';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
+import { rem, remPx } from '../../../tokens/relative';
 
 // Styled components
 const EditorContainer = styled(Paper)(({ theme }) => ({
@@ -46,7 +47,7 @@ const PlaceholderOverlay = styled(Box)(({ theme }) => ({
   left: theme.spacing(8),
   color: theme.palette.text.disabled,
   fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace',
-  fontSize: '0.875rem',
+  fontSize: rem(theme, 14),
   pointerEvents: 'none',
   userSelect: 'none' }));
 
@@ -65,13 +66,16 @@ const EditorLoading: FC<{ label: string }> = ({ label }) => (
 );
 
 const buildEditorOptions = ({
+  theme,
   minimap,
-  fontSize,
+  fontPx,
   isWrapped,
   lineNumbers,
   readOnly }: {
+  theme: Theme;
   minimap?: boolean;
-  fontSize: number;
+  /** The `fontSize` prop: design px. */
+  fontPx: number;
   isWrapped: boolean;
   lineNumbers: boolean;
   readOnly: boolean;
@@ -80,7 +84,8 @@ const buildEditorOptions = ({
     // Explicitly convert minimap to boolean to ensure Monaco receives a definitive value
     // This prevents undefined from being interpreted differently in various environments
     minimap: { enabled: minimap === true },
-    fontSize,
+    // Monaco takes a px number: the design px, at the document's real type scale.
+    fontSize: remPx(theme, fontPx),
     wordWrap: isWrapped ? 'on' : 'off',
     lineNumbers: lineNumbers ? 'on' : 'off',
     scrollBeyondLastLine: false,
@@ -123,9 +128,11 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
   const testId = makeTestId(dataTestId);
   const editor = useCodeEditor({ themeProp, wordWrap, autoFormat, readOnly, onSave });
 
+  const muiTheme = useTheme();
   const editorOptions = buildEditorOptions({
+    theme: muiTheme,
     minimap,
-    fontSize,
+    fontPx: fontSize,
     isWrapped: editor.isWrapped,
     lineNumbers,
     readOnly });

package/src/components/form/CodeEditor/CodeEditorToolbar.tsx

@@ -12,6 +12,7 @@ import { alpha, styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { CodeEditorCopy } from '../../../copy';
+import { rem, sxRem } from '../../../tokens/relative';
 
 // Each button repeated the same conditional test id; this is that ternary once.
 const makeTestId =
@@ -36,7 +37,7 @@ const LanguageBadge = styled(Box)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   background: alpha(theme.palette.primary.main, 0.1),
   color: theme.palette.primary.main,
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 600,
   textTransform: 'uppercase',
   letterSpacing: '0.05em',
@@ -152,7 +153,7 @@ export const EditorToolbar: React.FC<{
   <Toolbar data-testid={testId('toolbar')}>
     <Stack direction="row" spacing={2} alignItems="center">
       <LanguageBadge data-testid={testId('language-badge')}>
-        <CodeIcon sx={{ fontSize: 14 }} />
+        <CodeIcon sx={{ fontSize: sxRem(14) }} />
         {language}
       </LanguageBadge>
       {readOnly && (

package/src/components/form/Command/Command.styles.ts

@@ -2,21 +2,25 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { CommandProps } from './Command.types';
-import { accentFor } from '../../../tokens/scales';
+import { accentFor, rem } from '../../../tokens/scales';
 
 type CommandVariant = NonNullable<CommandProps['variant']>;
 type CommandColor = NonNullable<CommandProps['color']>;
 type CommandSize = NonNullable<CommandProps['size']>;
 
-const SIZE_MAP: Record<CommandSize, { width: number; fontSize: string }> = {
-  xs: { width: 400, fontSize: '0.75rem' },
-  sm: { width: 450, fontSize: '0.875rem' },
-  md: { width: 500, fontSize: '1rem' },
-  lg: { width: 550, fontSize: '1.125rem' },
-  xl: { width: 600, fontSize: '1.25rem' },
+const SIZE_MAP: Record<CommandSize, { width: number; fontPx: number }> = {
+  xs: { width: 400, fontPx: 12 },
+  sm: { width: 450, fontPx: 14 },
+  md: { width: 500, fontPx: 16 },
+  lg: { width: 550, fontPx: 18 },
+  xl: { width: 600, fontPx: 20 },
 };
 
-export const commandSizeStyles = (size: CommandSize) => SIZE_MAP[size] || SIZE_MAP.md;
+/** The paper's width and type for a size, both design px read through the type scale. */
+export const commandSizeStyles = (theme: Theme, size: CommandSize) => {
+  const { width, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;
+  return { width: rem(theme, width), fontSize: rem(theme, fontPx) };
+};
 
 const emphasisStyles = (
   theme: Theme,

package/src/components/form/Command/Command.tsx

@@ -29,6 +29,7 @@ import type {
   CommandListProps,
   CommandProps,
 } from './Command.types';
+import { rem } from '../../../tokens/relative';
 
 export { CommandEmpty, CommandLoading, CommandSeparator } from './Command.parts';
 
@@ -52,7 +53,7 @@ export const Command: React.FC<CommandProps> = (rawProps) => {
       PaperProps={{
         sx: {
           ...commandPaperStyles(theme, props),
-          ...commandSizeStyles(props.size),
+          ...commandSizeStyles(theme, props.size),
           overflow: 'hidden',
           ...props.style,
         },
@@ -308,11 +309,11 @@ const CommandItemComponent: React.FC<CommandItemProps> = ({
         primary={label}
         secondary={showDescription && description}
         primaryTypographyProps={{
-          fontSize: '0.875rem',
+          fontSize: rem(theme, 14),
           fontWeight: selected ? 600 : 400,
         }}
         secondaryTypographyProps={{
-          fontSize: '0.75rem',
+          fontSize: rem(theme, 12),
         }}
       />
 
@@ -323,7 +324,7 @@ const CommandItemComponent: React.FC<CommandItemProps> = ({
           variant="outlined"
           sx={{
             height: 20,
-            fontSize: '0.7rem',
+            fontSize: rem(theme, 11.2),
             ml: 1,
           }}
         />

package/src/components/form/DateRangePicker/DateRangePickerQuickList.tsx

@@ -17,6 +17,7 @@ import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import React, { useId } from 'react';
 
 import type { ResolvedQuickRange } from './DateRangePicker.types';
+import { sxRem } from '../../../tokens/relative';
 
 const optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({
   display: 'block',
@@ -28,7 +29,7 @@ const optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({
   flex: { xs: '0 0 auto', md: '0 1 auto' },
   textAlign: 'left',
   font: 'inherit',
-  fontSize: '0.875rem',
+  fontSize: sxRem(14),
   fontWeight: active ? 600 : 400,
   lineHeight: 1.4,
   px: 1.5,
@@ -50,7 +51,7 @@ const optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({
 
 const REASON_SX: SxProps<Theme> = {
   display: 'block',
-  fontSize: '0.6875rem',
+  fontSize: sxRem(11),
   lineHeight: 1.3,
   mt: 0.25,
   color: 'text.disabled',

package/src/components/form/Form/Form.tsx

@@ -10,6 +10,7 @@ import type {
   FormMessageProps,
   FormProps,
 } from './Form.types';
+import { rem } from '../../../tokens/relative';
 
 const StyledForm = styled('form', {
   shouldForwardProp: (prop) => prop !== 'variant',
@@ -130,7 +131,7 @@ export const FormField: React.FC<FormFieldProps> = ({
 const StyledFormLabel = styled('label', {
   shouldForwardProp: (prop) => prop !== 'error',
 })<{ error?: boolean }>(({ theme, error }) => ({
-  fontSize: '0.875rem',
+  fontSize: rem(theme, 14),
   fontWeight: 500,
   color: error ? theme.palette.error.main : theme.palette.text.primary,
   marginBottom: theme.spacing(0.5),
@@ -168,7 +169,7 @@ export const FormControl: React.FC<FormControlProps> = ({ fullWidth = true, chil
 const StyledFormMessage = styled('span', {
   shouldForwardProp: (prop) => prop !== 'error',
 })<{ error?: boolean }>(({ theme, error }) => ({
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   marginTop: theme.spacing(0.5),
   color: error ? theme.palette.error.main : theme.palette.text.secondary,
   display: 'block',

package/src/components/form/HeaderButton/HeaderButton.tsx

@@ -5,6 +5,8 @@ import Button from '@mui/material/Button/index.js';
 import type { ButtonProps } from '@mui/material/Button/index.js';
 import type { ReactNode } from 'react';
 
+import { sxRem } from '../../../tokens/relative';
+
 type Breakpoint = 'sm' | 'md' | 'lg';
 
 export interface HeaderButtonProps {
@@ -63,7 +65,7 @@ export function HeaderButton({
       aria-haspopup={aria['aria-haspopup']}
       aria-expanded={aria['aria-expanded']}
       data-testid={dataTestId}
-      sx={{ minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: '1rem', textTransform: 'none' }}
+      sx={{ minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: sxRem(16), textTransform: 'none' }}
     >
       <Box component="span" sx={{ display: 'inline-flex', alignItems: 'center' }}>
         {icon}

package/src/components/form/InputOTP/InputOTP.styles.ts

@@ -5,6 +5,7 @@ import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { asFieldSize, fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, controlNeutral } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 interface ColorPalette {
   main: string;
@@ -48,13 +49,13 @@ const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
 
 type SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-/** Each slot's type. Its side is the theme's field height for the size (a square). */
-const SIZES: Record<SizeKey, { fontSize: string }> = {
-  xs: { fontSize: '0.75rem' },
-  sm: { fontSize: '0.875rem' },
-  md: { fontSize: '1rem' },
-  lg: { fontSize: '1.125rem' },
-  xl: { fontSize: '1.25rem' },
+/** Each slot's type, in design px. Its side is the theme's field height for the size (a square). */
+const SIZES: Record<SizeKey, { fontPx: number }> = {
+  xs: { fontPx: 12 },
+  sm: { fontPx: 14 },
+  md: { fontPx: 16 },
+  lg: { fontPx: 18 },
+  xl: { fontPx: 20 },
 };
 
 export interface OtpSlotFlags {
@@ -67,7 +68,7 @@ export interface OtpSlotFlags {
 export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
   const { customColor = 'primary', customSize = 'md', glass, gradient } = flags;
   const palette = getColorFromTheme(theme, customColor);
-  const { fontSize } = SIZES[customSize as SizeKey] ?? SIZES.md;
+  const { fontPx } = SIZES[customSize as SizeKey] ?? SIZES.md;
   // A slot is a field: a square of the theme's field height for its size.
   const side = fieldHeight(theme, asFieldSize(customSize));
 
@@ -77,7 +78,7 @@ export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
     '& .MuiOutlinedInput-root': {
       width: side,
       height: side,
-      fontSize,
+      fontSize: rem(theme, fontPx),
       fontWeight: 600,
       textAlign: 'center',
       borderRadius: fieldRadius(theme),

package/src/components/form/Label/Label.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 { LabelProps } from './Label.types';
-import { accentFor} from '../../../tokens/scales';
+import { accentFor, rem } from '../../../tokens/scales';
 
 type Size = NonNullable<LabelProps['size']>;
 type Variant = NonNullable<LabelProps['variant']>;
 type Weight = NonNullable<LabelProps['weight']>;
 
 const SIZES: Record<Size, (theme: Theme) => CSSObject> = {
-  xs: (theme) => ({ fontSize: '0.75rem', lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),
-  sm: (theme) => ({ fontSize: '0.875rem', lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),
-  md: (theme) => ({ fontSize: '1rem', lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),
-  lg: (theme) => ({ fontSize: '1.125rem', lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),
-  xl: (theme) => ({ fontSize: '1.25rem', lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) }),
+  xs: (theme) => ({ fontSize: rem(theme, 12), lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),
+  sm: (theme) => ({ fontSize: rem(theme, 14), lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),
+  md: (theme) => ({ fontSize: rem(theme, 16), lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),
+  lg: (theme) => ({ fontSize: rem(theme, 18), lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),
+  xl: (theme) => ({ fontSize: rem(theme, 20), lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) }),
 };
 
 export const sizeStyles = (theme: Theme, size: Size): CSSObject => (SIZES[size] ?? SIZES.md)(theme);

package/src/components/form/Label/Label.tsx

@@ -10,6 +10,7 @@ import { LabelBody } from './Label.parts';
 import { labelStyles, sizeStyles, SR_ONLY_SX, textColor } from './Label.styles';
 import type { LabelStyleFlags } from './Label.styles';
 import type { LabelProps } from './Label.types';
+import { rem } from '../../../tokens/relative';
 
 const DEFAULTS = {
   required: false,
@@ -105,7 +106,7 @@ export const Label = forwardRef<globalThis.HTMLLabelElement, LabelProps>((props,
             display: 'block',
             color: error ? theme.palette.error.main : theme.palette.text.secondary,
             marginTop: theme.spacing(0.5),
-            fontSize: '0.75rem',
+            fontSize: rem(theme, 12),
           }}
         >
           {helperText}

package/src/components/form/Menubar/Menubar.item.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 
 import { sizeStyles } from './Menubar.styles';
 import type { MenubarItem, MenubarProps } from './Menubar.types';
+import { sxRem } from '../../../tokens/relative';
 
 export interface MenubarItemViewProps {
   item: MenubarItem;
@@ -42,7 +43,7 @@ const DropdownItem: React.FC<{ child: MenubarItem; onActivate: (item: MenubarIte
           label={child.shortcut}
           size="small"
           variant="outlined"
-          sx={{ ml: 2, height: 20, fontSize: '0.7rem' }}
+          sx={{ ml: 2, height: 20, fontSize: sxRem(11.2) }}
         />
       )}
     </MenuItem>

package/src/components/form/Menubar/Menubar.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 { MenubarProps } from './Menubar.types';
-import { accentFor} from '../../../tokens/scales';
+import { accentFor, rem } from '../../../tokens/scales';
 
 type Size = NonNullable<MenubarProps['size']>;
 type Variant = NonNullable<MenubarProps['variant']>;
 type Color = NonNullable<MenubarProps['color']>;
 
 const SIZES: Record<Size, (theme: Theme) => CSSObject> = {
-  xs: (theme) => ({ minHeight: 40, fontSize: '0.75rem', padding: theme.spacing(0.5, 1) }),
-  sm: (theme) => ({ minHeight: 48, fontSize: '0.875rem', padding: theme.spacing(0.75, 1.5) }),
-  md: (theme) => ({ minHeight: 56, fontSize: '1rem', padding: theme.spacing(1, 2) }),
-  lg: (theme) => ({ minHeight: 64, fontSize: '1.125rem', padding: theme.spacing(1.25, 2.5) }),
-  xl: (theme) => ({ minHeight: 72, fontSize: '1.25rem', padding: theme.spacing(1.5, 3) }),
+  xs: (theme) => ({ minHeight: 40, fontSize: rem(theme, 12), padding: theme.spacing(0.5, 1) }),
+  sm: (theme) => ({ minHeight: 48, fontSize: rem(theme, 14), padding: theme.spacing(0.75, 1.5) }),
+  md: (theme) => ({ minHeight: 56, fontSize: rem(theme, 16), padding: theme.spacing(1, 2) }),
+  lg: (theme) => ({ minHeight: 64, fontSize: rem(theme, 18), padding: theme.spacing(1.25, 2.5) }),
+  xl: (theme) => ({ minHeight: 72, fontSize: rem(theme, 20), padding: theme.spacing(1.5, 3) }),
 };
 
 export const sizeStyles = (theme: Theme, size: Size): CSSObject =>

package/src/components/form/PasswordStrength/PasswordStrength.helpers.tsx

@@ -114,12 +114,14 @@ export const buildSuggestions = (
   );
 
 // Rendered by PasswordStrength; depends on nothing styled, so it lives beside
-// the pure helpers rather than in the component file.
-export const SuggestionsList: React.FC<{ suggestions: string[]; heading: string }> = ({
-  suggestions,
-  heading,
-}) => (
-  <Box>
+// the pure helpers rather than in the component file. `forwardRef` because it
+// is `Fade`'s child, and Fade reads `scrollTop` off the node it is handed.
+// Only the ref: Fade's injected `style` (opacity/visibility) is still dropped.
+export const SuggestionsList = React.forwardRef<
+  HTMLDivElement,
+  { suggestions: string[]; heading: string }
+>(({ suggestions, heading }, ref) => (
+  <Box ref={ref}>
     <Typography variant="caption" color="text.secondary" fontWeight="medium">
       {heading}
     </Typography>
@@ -131,4 +133,5 @@ export const SuggestionsList: React.FC<{ suggestions: string[]; heading: string
       ))}
     </Box>
   </Box>
-);
+));
+SuggestionsList.displayName = 'SuggestionsList';

package/src/components/form/PasswordStrength/PasswordStrength.tsx

@@ -22,6 +22,7 @@ import {
   SuggestionsList } from './PasswordStrength.helpers';
 import type { PasswordRequirements, PasswordStrengthProps } from './PasswordStrength.types';
 import type { PasswordStrengthCopy } from '../../../copy';
+import { rem } from '../../../tokens/relative';
 
 interface RequirementIconProps {
   met: boolean;
@@ -107,7 +108,7 @@ const RequirementItem = styled(Box, {
   transition: animated ? 'all 0.3s ease' : 'none',
   animation: animated ? `${slideInAnimation} 0.3s ease` : 'none',
   '& svg': {
-    fontSize: '1rem',
+    fontSize: rem(theme, 16),
     color: met ? theme.palette.success.main : theme.palette.text.disabled } }));
 
 const StrengthLabel = styled(Chip, {
@@ -239,12 +240,20 @@ const StrengthHeading: React.FC<{
 
 // One row per enabled requirement. Previously five near-identical JSX blocks,
 // each with its own `requirements.x &&` guard.
-const RequirementsList: React.FC<{
-  copy: PasswordStrengthCopy;
-  requirements: PasswordRequirements;
-  checks: RequirementChecks;
-  animated: boolean;
-}> = ({ copy, requirements, checks, animated }) => {
+//
+// `forwardRef` because it is `Fade`'s child: Fade hands it a ref and reads
+// `scrollTop` off that node on enter, so a component that drops the ref throws
+// the moment the first character is typed. Only the ref: Fade's injected
+// `style` (opacity/visibility) is still dropped, so the list stays visible.
+const RequirementsList = React.forwardRef<
+  HTMLDivElement,
+  {
+    copy: PasswordStrengthCopy;
+    requirements: PasswordRequirements;
+    checks: RequirementChecks;
+    animated: boolean;
+  }
+>(({ copy, requirements, checks, animated }, ref) => {
   const rows: ReadonlyArray<[unknown, keyof RequirementChecks, React.ReactNode]> = [
     [requirements.minLength, 'length', copy.requirements.minLength(requirements.minLength ?? 0)],
     [requirements.uppercase, 'uppercase', copy.requirements.uppercase],
@@ -254,7 +263,7 @@ const RequirementsList: React.FC<{
   ];
 
   return (
-    <Stack spacing={1}>
+    <Stack ref={ref} spacing={1}>
       <Typography variant="caption" color="text.secondary" fontWeight="medium">
         {copy.requirementsHeading}
       </Typography>
@@ -268,7 +277,8 @@ const RequirementsList: React.FC<{
         ))}
     </Stack>
   );
-};
+});
+RequirementsList.displayName = 'RequirementsList';
 
 // The visible sections. Kept apart from PasswordStrength itself so the exported
 // component is just prop defaults plus the three memos, and every display guard

package/src/components/form/PhoneInput/PhoneInput.tsx

@@ -20,6 +20,7 @@ import type { PhoneInputCopy } from '../../../copy';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { fieldControlStyles, fieldTextFieldStyles } from '../../../tokens/field-height';
+import { rem } from '../../../tokens/relative';
 
 // Country data with expanded support
 
@@ -260,8 +261,8 @@ const CountryPicker: React.FC<{
               <ListItemText
                 primary={country.name}
                 secondary={country.dial}
-                primaryTypographyProps={{ fontSize: '0.9rem' }}
-                secondaryTypographyProps={{ fontSize: '0.8rem' }}
+                primaryTypographyProps={{ fontSize: rem(theme, 14.4) }}
+                secondaryTypographyProps={{ fontSize: rem(theme, 12.8) }}
               />
             </MenuItem>
           ))}

package/src/components/form/RadioGroup/RadioGroup.styles.ts

@@ -7,6 +7,7 @@ import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, controlNeutral } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 /** The segment track's padding and border: its corner is the segments' plus these. */
 const SEGMENT_TRACK_PADDING = 4;
@@ -72,20 +73,20 @@ const CARD_SIZES: Record<SizeKey, CSSObject> = {
   xl: { padding: '24px', minHeight: '100px' },
 };
 
-const BUTTON_SIZES: Record<SizeKey, CSSObject> = {
-  xs: { padding: '6px 12px', fontSize: '0.75rem', minHeight: '32px' },
-  sm: { padding: '8px 16px', fontSize: '0.875rem', minHeight: '36px' },
-  md: { padding: '10px 20px', fontSize: '1rem', minHeight: '40px' },
-  lg: { padding: '12px 24px', fontSize: '1.125rem', minHeight: '44px' },
-  xl: { padding: '14px 28px', fontSize: '1.25rem', minHeight: '48px' },
+const BUTTON_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {
+  xs: (theme) => ({ padding: '6px 12px', fontSize: rem(theme, 12), minHeight: '32px' }),
+  sm: (theme) => ({ padding: '8px 16px', fontSize: rem(theme, 14), minHeight: '36px' }),
+  md: (theme) => ({ padding: '10px 20px', fontSize: rem(theme, 16), minHeight: '40px' }),
+  lg: (theme) => ({ padding: '12px 24px', fontSize: rem(theme, 18), minHeight: '44px' }),
+  xl: (theme) => ({ padding: '14px 28px', fontSize: rem(theme, 20), minHeight: '48px' }),
 };
 
-const SEGMENT_SIZES: Record<SizeKey, CSSObject> = {
-  xs: { padding: '4px 8px', fontSize: '0.75rem' },
-  sm: { padding: '6px 12px', fontSize: '0.875rem' },
-  md: { padding: '8px 16px', fontSize: '1rem' },
-  lg: { padding: '10px 20px', fontSize: '1.125rem' },
-  xl: { padding: '12px 24px', fontSize: '1.25rem' },
+const SEGMENT_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {
+  xs: (theme) => ({ padding: '4px 8px', fontSize: rem(theme, 12) }),
+  sm: (theme) => ({ padding: '6px 12px', fontSize: rem(theme, 14) }),
+  md: (theme) => ({ padding: '8px 16px', fontSize: rem(theme, 16) }),
+  lg: (theme) => ({ padding: '10px 20px', fontSize: rem(theme, 18) }),
+  xl: (theme) => ({ padding: '12px 24px', fontSize: rem(theme, 20) }),
 };
 
 export interface SurfaceFlags {
@@ -214,7 +215,7 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
       boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`,
     },
     '&:active': { transform: 'scale(0.98)' },
-    ...pickSize(BUTTON_SIZES, customSize),
+    ...pickSize(BUTTON_SIZES, customSize)(theme),
     // The theme's field height for the size, in place of the table's own.
     minHeight: fieldHeight(theme, asFieldSize(customSize)),
     paddingTop: 0,
@@ -306,7 +307,7 @@ export const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject =>
       '&::before': { width: '100%', left: 0, transform: 'translateX(0)' },
     },
     '&:active': { transform: 'scale(0.98)' },
-    ...pickSize(SEGMENT_SIZES, customSize),
+    ...pickSize(SEGMENT_SIZES, customSize)(theme),
     // Each segment is a field; the track around it adds its own inset.
     minHeight: fieldHeight(theme, asFieldSize(customSize)),
     paddingTop: 0,

package/src/components/form/RichTextEditor/RichTextEditor.tsx

@@ -10,6 +10,7 @@ import { RichTextEditorToolbar } from './RichTextEditorToolbar';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { rem } from '../../../tokens/relative';
 
 const DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {
   bold: true,
@@ -66,7 +67,7 @@ const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string,
     padding: theme.spacing(1),
     borderRadius: 1,
     fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
-    fontSize: '0.875rem',
+    fontSize: rem(theme, 14),
     overflow: 'auto' },
   '& a': { color: theme.palette.primary.main, textDecoration: 'underline' } });
 

package/src/components/form/SearchPalette/SearchPalette.parts.tsx

@@ -12,6 +12,7 @@ import Typography from '@mui/material/Typography/index.js';
 import React from 'react';
 
 import type { SearchFilterChip, SearchResultLead } from './SearchPalette.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** Bold the first case-insensitive occurrence of `query` within `text`. */
 export function highlight(text: string, query: string): React.ReactNode {
@@ -44,7 +45,7 @@ export function Lead({ lead }: { lead: SearchResultLead | undefined }): React.JS
   }
   if (lead.kind === 'avatar') {
     return (
-      <Avatar src={lead.src} alt={lead.alt ?? ''} sx={{ width: 32, height: 32, fontSize: '0.85rem' }}>
+      <Avatar src={lead.src} alt={lead.alt ?? ''} sx={{ width: 32, height: 32, fontSize: sxRem(13.6) }}>
         {lead.fallback}
       </Avatar>
     );
@@ -91,7 +92,7 @@ export function PaletteInput(props: {
               pointerEvents: 'none',
               whiteSpace: 'pre',
               overflow: 'hidden',
-              fontSize: '1rem',
+              fontSize: sxRem(16),
             }}
           >
             <Box component="span" sx={{ visibility: 'hidden' }}>
@@ -115,7 +116,7 @@ export function PaletteInput(props: {
             'aria-label': props.inputAriaLabel,
             'aria-autocomplete': 'list',
           }}
-          sx={{ fontSize: '1rem' }}
+          sx={{ fontSize: sxRem(16) }}
         />
       </Box>
       {props.isLoading && <CircularProgress size={18} sx={{ flexShrink: 0 }} />}
@@ -197,7 +198,7 @@ export function ResultRow(props: {
         )}
       </Box>
       {props.trailing != null && (
-        <Box sx={{ flexShrink: 0, color: 'text.secondary', fontSize: '0.75rem' }}>{props.trailing}</Box>
+        <Box sx={{ flexShrink: 0, color: 'text.secondary', fontSize: sxRem(12) }}>{props.trailing}</Box>
       )}
     </ListItemButton>
   );
@@ -226,7 +227,7 @@ export function SubmitAllFooter(props: {
       </Typography>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'text.secondary' }}>
         <Typography variant="caption">{props.keyLabel}</Typography>
-        <KeyboardReturnIcon sx={{ fontSize: 14 }} />
+        <KeyboardReturnIcon sx={{ fontSize: sxRem(14) }} />
       </Box>
     </ListItemButton>
   );