@12-apps/ui 6.33.1 → 6.35.0

package/src/components/form/Checkbox/Checkbox.metrics.ts

@@ -1,3 +1,6 @@
+import { alpha } from '../../../tokens/color';
+import { EFFECT_GLOW } from '../../../tokens/ink.core';
+
 import type { CheckboxVariant } from './Checkbox.base';
 
 /**
@@ -56,15 +59,13 @@ export const CHECKBOX_SPINNER = { size: 20, offset: -10 } as const;
 
 /**
  * `glow` and `pulse` are keyed to MUI's DEFAULT blue rather than the theme's
- * primary — the web writes the rgba out by hand — so both renderers do.
+ * primary — `EFFECT_GLOW.muiBlue` (`tokens/ink.core`) — on both renderers.
  */
-export const CHECKBOX_EFFECT_INK = { r: 25, g: 118, b: 210 } as const;
 export const CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2000 } as const;
 export const CHECKBOX_PULSE = { spread: 10, alpha: 0.7, ms: 2000 } as const;
 
 /** MUI's default blue at an alpha, as the web's keyframes spell it. */
-export const effectInk = (alphaValue: number): string =>
-  `rgba(${CHECKBOX_EFFECT_INK.r}, ${CHECKBOX_EFFECT_INK.g}, ${CHECKBOX_EFFECT_INK.b}, ${alphaValue})`;
+export const effectInk = (alphaValue: number): string => alpha(EFFECT_GLOW.muiBlue, alphaValue);
 
 /** `FormControlLabel`: flush left, its label at MUI's `body2` size. */
 export const CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 } as const;

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.hooks.ts

@@ -62,7 +62,7 @@ export const useCodeEditor = ({
     editorRef.current = mountedEditor;
     monacoRef.current = monaco;
 
-    registerEditorThemes(monaco);
+    registerEditorThemes(monaco, theme);
     configureTypeScriptDefaults(monaco);
     scheduleAutoFormat(mountedEditor, autoFormat && !readOnly);
     registerSaveShortcut(mountedEditor, monaco, onSave);

package/src/components/form/CodeEditor/CodeEditor.monaco.ts

@@ -1,7 +1,22 @@
+import type { Theme } from '@mui/material/styles/index.js';
 import type { Monaco } from '@monaco-editor/react';
 import type { editor } from 'monaco-editor';
 
-const customLightTheme = {
+import { uiInk, type UiInk } from '../../../tokens/ink';
+
+type EditorChrome = UiInk['codeEditor']['light'];
+
+/** Monaco's colour keys, filled from one mode's chrome. */
+const chromeColors = (chrome: EditorChrome) => ({
+  'editor.background': chrome.background,
+  'editor.foreground': chrome.foreground,
+  'editor.lineHighlightBackground': chrome.lineHighlight,
+  'editorLineNumber.foreground': chrome.lineNumber,
+  'editorIndentGuide.background': chrome.gutterBorder,
+  'editor.selectionBackground': chrome.selection,
+});
+
+const customLightTheme = (chrome: EditorChrome) => ({
   base: 'vs' as const,
   inherit: true,
   rules: [
@@ -10,17 +25,10 @@ const customLightTheme = {
     { token: 'string', foreground: '032F62' },
     { token: 'number', foreground: '005CC5' },
   ],
-  colors: {
-    'editor.background': '#FFFFFF',
-    'editor.foreground': '#24292E',
-    'editor.lineHighlightBackground': '#F6F8FA',
-    'editorLineNumber.foreground': '#959DA5',
-    'editorIndentGuide.background': '#D1D5DA',
-    'editor.selectionBackground': '#C8E1FF',
-  },
-};
+  colors: chromeColors(chrome),
+});
 
-const customDarkTheme = {
+const customDarkTheme = (chrome: EditorChrome) => ({
   base: 'vs-dark' as const,
   inherit: true,
   rules: [
@@ -29,22 +37,16 @@ const customDarkTheme = {
     { token: 'string', foreground: '9ECBFF' },
     { token: 'number', foreground: '79B8FF' },
   ],
-  colors: {
-    'editor.background': '#0D1117',
-    'editor.foreground': '#C9D1D9',
-    'editor.lineHighlightBackground': '#161B22',
-    'editorLineNumber.foreground': '#8B949E',
-    'editorIndentGuide.background': '#21262D',
-    'editor.selectionBackground': '#3392FF44',
-  },
-};
+  colors: chromeColors(chrome),
+});
 
 // Main component
 const AUTO_FORMAT_DELAY_MS = 100;
 
-export const registerEditorThemes = (monaco: Monaco) => {
-  monaco.editor.defineTheme('custom-light', customLightTheme);
-  monaco.editor.defineTheme('custom-dark', customDarkTheme);
+export const registerEditorThemes = (monaco: Monaco, theme: Theme) => {
+  const chrome = uiInk(theme).codeEditor;
+  monaco.editor.defineTheme('custom-light', customLightTheme(chrome.light));
+  monaco.editor.defineTheme('custom-dark', customDarkTheme(chrome.dark));
 };
 
 // Best-effort: a Monaco build without the TypeScript worker (as in jsdom) throws

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/Input/Input.metrics.ts

@@ -1,6 +1,7 @@
 import type { InputVariant } from './Input.base';
-import { decomposeColor, recomposeColor } from '../../../tokens/color';
+import { alpha, decomposeColor, recomposeColor } from '../../../tokens/color';
 import { DEFAULT_FIELD_HEIGHT, fieldHeightPx } from '../../../tokens/field-height.core';
+import { ABSOLUTE_INK } from '../../../tokens/ink.core';
 import type { UiTheme } from '../../../tokens/theme';
 import { SIZE_VALUES, type SizeValue } from '../../../tokens/vocabulary';
 
@@ -163,8 +164,8 @@ export const INPUT_BORDER = { rest: 1, focused: 2 } as const;
 
 /** `FilledInput`'s and `Input`'s resting underline, MUI's own two greys. */
 export const UNDERLINE_COLOR = {
-  light: 'rgba(0, 0, 0, 0.42)',
-  dark: 'rgba(255, 255, 255, 0.7)',
+  light: alpha(ABSOLUTE_INK.black, 0.42),
+  dark: alpha(ABSOLUTE_INK.white, 0.7),
 } as const;
 
 /**

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

@@ -15,6 +15,7 @@ import type { InputProps } from './Input.types';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldHeight } from '../../../tokens/field-height';
 import { fieldRadius } from '../../../tokens/field-radius';
+import { absoluteInk } from '../../../tokens/ink';
 import type { SizeValue } from '../../../tokens/vocabulary';
 
 type InputVariant = NonNullable<InputProps['variant']>;
@@ -148,7 +149,7 @@ const gradientStyles = (theme: Theme): CSSObject => ({
     bottom: 0,
     borderRadius: 'inherit',
     background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
-    mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+    mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
     maskComposite: 'exclude',
     padding: `${INPUT_GRADIENT.borderWidth}px`,
     zIndex: -1,

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

@@ -4,6 +4,8 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 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;
@@ -13,12 +15,7 @@ interface ColorPalette {
 }
 
 /** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */
-const neutralPalette = (theme: Theme): ColorPalette => ({
-  main: theme.palette.grey[700],
-  dark: theme.palette.grey[800],
-  light: theme.palette.grey[500],
-  contrastText: '#fff',
-});
+const neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);
 
 /** `danger` is this component's name for the error palette. */
 const namedPalette = (theme: Theme, color: string): ColorPalette => {
@@ -46,19 +43,19 @@ const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
     main: palette.main || primary.main,
     dark: palette.dark || palette.main || primary.dark,
     light: palette.light || palette.main || primary.light,
-    contrastText: palette.contrastText || '#fff',
+    contrastText: palette.contrastText || absoluteInk(theme).white,
   };
 };
 
 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 {
@@ -71,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));
 
@@ -81,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';