@12-apps/ui 6.36.0 → 6.38.0

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

@@ -2,6 +2,7 @@ import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Divider from '@mui/material/Divider/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type {
@@ -9,6 +10,7 @@ import type {
   CommandLoadingProps,
   CommandSeparatorProps,
 } from './Command.types';
+import { rem } from '../../../tokens/relative';
 
 export const CommandEmpty: React.FC<CommandEmptyProps> = ({
   message = 'No results found',
@@ -35,7 +37,9 @@ export const CommandLoading: React.FC<CommandLoadingProps> = ({
   className,
   style,
   dataTestId,
-}) => (
+}) => {
+  const theme = useTheme();
+  return (
     <Box
       className={className}
       data-testid={dataTestId}
@@ -48,12 +52,13 @@ export const CommandLoading: React.FC<CommandLoadingProps> = ({
         ...style,
       }}
     >
-      <CircularProgress size={24} />
+      <CircularProgress size={rem(theme, 24)} />
       <Typography variant="body2" color="text.secondary">
         {message}
       </Typography>
     </Box>
   );
+};
 
 export const CommandSeparator: React.FC<CommandSeparatorProps> = ({
   className,

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

@@ -8,18 +8,18 @@ type CommandVariant = NonNullable<CommandProps['variant']>;
 type CommandColor = NonNullable<CommandProps['color']>;
 type CommandSize = NonNullable<CommandProps['size']>;
 
-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 },
+const SIZE_MAP: Record<CommandSize, { widthPx: number; fontPx: number }> = {
+  xs: { widthPx: 400, fontPx: 12 },
+  sm: { widthPx: 450, fontPx: 14 },
+  md: { widthPx: 500, fontPx: 16 },
+  lg: { widthPx: 550, fontPx: 18 },
+  xl: { widthPx: 600, fontPx: 20 },
 };
 
 /** 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 { widthPx, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;
+  return { width: rem(theme, widthPx), fontSize: rem(theme, fontPx) };
 };
 
 const emphasisStyles = (
@@ -29,13 +29,13 @@ const emphasisStyles = (
   pulse: boolean,
 ): CSSObject => ({
   ...(glow && {
-    boxShadow: `0 0 20px ${alpha(accentFor(theme, color).main, 0.4)}`,
+    boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentFor(theme, color).main, 0.4)}`,
   }),
   ...(pulse && {
     animation: 'pulse 2s infinite',
     '@keyframes pulse': {
       '0%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },
-      '70%': { boxShadow: `0 0 0 10px ${alpha(accentFor(theme, color).main, 0)}` },
+      '70%': { boxShadow: `0 0 0 ${rem(theme, 10)} ${alpha(accentFor(theme, color).main, 0)}` },
       '100%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` },
     },
   }),
@@ -50,7 +50,7 @@ const surfaceStyles = (
     case 'glass':
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,
       };
     case 'gradient':

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

@@ -15,7 +15,7 @@ import ListItemIcon from '@mui/material/ListItemIcon/index.js';
 import ListItemText from '@mui/material/ListItemText/index.js';
 import TextField from '@mui/material/TextField/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { alpha, useTheme } from '@mui/material/styles/index.js';
+import { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';
 import React, { useMemo } from 'react';
 
 import { resolveCommandProps, useCommandPalette } from './Command.hooks';
@@ -29,10 +29,19 @@ import type {
   CommandListProps,
   CommandProps,
 } from './Command.types';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 export { CommandEmpty, CommandLoading, CommandSeparator } from './Command.parts';
 
+/**
+ * The list's `maxHeight`: a number is design px (400 when unset), read through
+ * the type scale; a string is any CSS length, and a number ≤ 1 stays the
+ * fraction `sx` reads it as (an `sx` callback's result still goes through the
+ * sizing transform).
+ */
+const contentMaxHeight = (theme: Theme, value: number | string = 400): number | string =>
+  typeof value === 'number' && value > 1 ? rem(theme, value) : value;
+
 const makeTestId = (dataTestId?: string) => (suffix: string) =>
   dataTestId ? `${dataTestId}-${suffix}` : undefined;
 
@@ -78,7 +87,7 @@ export const Command: React.FC<CommandProps> = (rawProps) => {
 
         <Divider />
 
-        <DialogContent sx={{ p: 0, maxHeight: props.maxHeight, overflow: 'auto' }}>
+        <DialogContent sx={{ p: 0, maxHeight: (t: Theme) => contentMaxHeight(t, props.maxHeight), overflow: 'auto' }}>
           <CommandBody
             loading={props.loading}
             items={filteredItems}
@@ -300,7 +309,7 @@ const CommandItemComponent: React.FC<CommandItemProps> = ({
       }}
     >
       {icon && (
-        <ListItemIcon sx={{ minWidth: 40 }}>
+        <ListItemIcon sx={{ minWidth: sxRem(40) }}>
           {icon}
         </ListItemIcon>
       )}
@@ -323,7 +332,7 @@ const CommandItemComponent: React.FC<CommandItemProps> = ({
           size="small"
           variant="outlined"
           sx={{
-            height: 20,
+            height: sxRem(20),
             fontSize: rem(theme, 11.2),
             ml: 1,
           }}

package/src/components/form/CreatableSelect/CreatableSelect.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Theme } from '@mui/material/styles/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete/index.js';
 import type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
@@ -15,6 +15,7 @@ import type { SizeValue } from '../../../tokens/scales';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldControlStyles } from '../../../tokens/field-height';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** Internal option shape: a real option, or the synthetic "create new" row. */
 interface InternalOption extends CreatableSelectOption {
@@ -27,8 +28,8 @@ const CREATE_PREFIX = ' create:';
 
 const filterOptions = createFilterOptions<InternalOption>();
 
-/** How far one nesting level indents a dropdown row, in px. */
-const INDENT_STEP = 16;
+/** A dropdown row's left inset at `depth`: one 16px step per level, plus the first, through the type scale. */
+const rowInset = (theme: Theme, depth: number): string => rem(theme, 16 * (1 + depth));
 
 /** `sm`/`md` → MUI's own scale, the same mapping {@link Input} uses. */
 // All five house stops onto MUI's two. `xs`/`sm` draw small; `md` and up draw
@@ -43,7 +44,7 @@ const fieldSx = {
       borderColor: (theme: Theme) => fieldEdge(theme),
     },
     '&:hover fieldset': { borderColor: 'primary.main' },
-    '&.Mui-focused fieldset': { borderColor: 'primary.main', borderWidth: 2 },
+    '&.Mui-focused fieldset': { borderColor: 'primary.main', borderWidth: sxRem(2) },
     '&.Mui-error fieldset': { borderColor: 'error.main' },
   },
 } as const;
@@ -80,13 +81,14 @@ function buildFilter(
 function renderIndentedOption(
   props: React.HTMLAttributes<HTMLLIElement>,
   option: InternalOption,
+  theme: Theme,
 ): React.JSX.Element {
   const { key, ...rest } = props as typeof props & { key?: string };
   return (
     <li
       key={key ?? option.value}
       {...rest}
-      style={{ paddingLeft: INDENT_STEP * (1 + (option.depth ?? 0)) }}
+      style={{ paddingLeft: rowInset(theme, option.depth ?? 0) }}
     >
       {option.label}
     </li>
@@ -103,6 +105,7 @@ function renderField(
     loading: boolean;
     size: SizeValue;
     dataTestId: string;
+    theme: Theme;
   },
 ): React.JSX.Element {
   return (
@@ -119,7 +122,7 @@ function renderField(
           ...params.InputProps,
           endAdornment: (
             <>
-              {field.loading ? <CircularProgress color="inherit" size={18} /> : null}
+              {field.loading ? <CircularProgress color="inherit" size={rem(field.theme, 18)} /> : null}
               {params.InputProps.endAdornment}
             </>
           ),
@@ -199,6 +202,7 @@ export function CreatableSelect({
   dataTestId = 'creatable-select',
 }: CreatableSelectProps): React.JSX.Element {
   const inputId = useId();
+  const theme = useTheme();
   const { items, selected } = useInternalOptions(options, value);
 
   return (
@@ -228,11 +232,11 @@ export function CreatableSelect({
         slotProps={{ popper: { sx: { zIndex: stackedOverlayZIndex } } }}
         getOptionLabel={(option) => (typeof option === 'string' ? option : option.label)}
         isOptionEqualToValue={(option, current) => option.value === current.value}
-        renderOption={renderIndentedOption}
+        renderOption={(props, option) => renderIndentedOption(props, option, theme)}
         filterOptions={buildFilter(onCreate, createOptionLabel)}
         onChange={(_event, next) => handlePick(next, onChange, onCreate)}
         renderInput={(params) =>
-          renderField(params, { inputId, placeholder, error, loading, size, dataTestId })
+          renderField(params, { inputId, placeholder, error, loading, size, dataTestId, theme })
         }
       />
       {error && <FormMessage error dataTestId={`${dataTestId}-message`}>{error}</FormMessage>}

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

@@ -25,6 +25,7 @@
 import Box from '@mui/material/Box/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import useMediaQuery from '@mui/material/useMediaQuery/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
@@ -39,9 +40,6 @@ import { DateRangeQuickList } from './DateRangePickerQuickList';
 
 const CALENDAR_CLASS = 'date-range-picker__calendar';
 
-/** Below this the picker is a phone layout. MUI's own `md`, written out. */
-const NARROW_QUERY = '(max-width:899.95px)';
-
 const ROOT_SX: SxProps<Theme> = {
   display: 'inline-flex',
   flexDirection: 'column',
@@ -119,13 +117,17 @@ type Picker = ReturnType<typeof useDateRangePicker>;
  * A media query rather than an `sx` breakpoint: this decides what to RENDER,
  * and CSS cannot un-render a second month.
  *
- * The query is a LITERAL, not `theme.breakpoints.down('md')`. The callback form
- * reads the theme from context and throws on a null one, so a consumer that
- * mounts this outside a `ThemeProvider` would crash — which the unit tests here
- * do, and which is a fair thing for a consumer to do.
+ * Below the theme's `md` the picker is a phone layout — the same breakpoint the
+ * `sx` blocks here switch on. The query is a STRING built from `useTheme()`,
+ * not `useMediaQuery`'s callback form: the callback reads the theme from
+ * context and throws on a null one, so a consumer that mounts this outside a
+ * `ThemeProvider` would crash — which the unit tests here do, and which is a
+ * fair thing for a consumer to do. `useTheme()` falls back to MUI's default
+ * theme there, whose `md` is the `(max-width:899.95px)` this used to spell out.
  */
 function useMonthCount(requested: number | undefined): number | undefined {
-  const narrow = useMediaQuery(NARROW_QUERY);
+  const theme = useTheme();
+  const narrow = useMediaQuery(theme.breakpoints.down('md'));
   return narrow ? 1 : requested;
 }
 

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

@@ -17,7 +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';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({
   display: 'block',
@@ -46,7 +46,11 @@ const optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({
   color: overMax ? 'text.disabled' : active ? 'primary.main' : 'text.primary',
   backgroundColor: active ? 'action.selected' : 'transparent',
   '&:hover': { backgroundColor: overMax ? 'transparent' : 'action.hover' },
-  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 1 },
+  '&:focus-visible': {
+    outline: (theme: Theme) => `${rem(theme, 2)} solid`,
+    outlineColor: 'primary.main',
+    outlineOffset: sxRem(1),
+  },
 });
 
 const REASON_SX: SxProps<Theme> = {
@@ -107,8 +111,8 @@ export function DateRangeQuickList({
         '&::-webkit-scrollbar': { display: 'none' },
         alignContent: 'flex-start',
         gap: 0.5,
-        minWidth: { md: 168 },
-        maxWidth: { md: 200 },
+        minWidth: (theme: Theme) => ({ md: rem(theme, 168) }),
+        maxWidth: (theme: Theme) => ({ md: rem(theme, 200) }),
       }}
     >
       {options.map((option) => {

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

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box/index.js';
 import Stack from '@mui/material/Stack/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type {
@@ -31,18 +31,14 @@ const spacingMap = {
   xl: 5,
 };
 
-const maxWidthMap = {
-  sm: '600px',
-  md: '900px',
-  lg: '1200px',
-  xl: '1536px',
-  full: '100%',
-};
+/** A form's width cap: the theme's breakpoint of that name, through the type scale; `full` is uncapped. */
+const formMaxWidth = (theme: Theme, maxWidth: NonNullable<FormProps['maxWidth']>): string =>
+  maxWidth === 'full' ? '100%' : rem(theme, theme.breakpoints.values[maxWidth]);
 
 export const Form = React.forwardRef<HTMLFormElement, FormProps>(
   ({ variant = 'vertical', maxWidth = 'full', spacing = 'md', children, dataTestId, ...props }, ref) => (
       <StyledForm ref={ref} variant={variant} role="form" data-testid={dataTestId} {...props}>
-        <Box sx={{ maxWidth: maxWidthMap[maxWidth], width: '100%' }}>
+        <Box sx={{ maxWidth: (theme) => formMaxWidth(theme, maxWidth), width: '100%' }}>
           {variant === 'inline' ? (
             children
           ) : (
@@ -100,7 +96,7 @@ const StyledFormField = styled(Box, {
   ({ theme, variant }) => ({
     display: variant === 'horizontal' ? 'grid' : 'flex',
     flexDirection: variant === 'horizontal' ? undefined : 'column',
-    gridTemplateColumns: variant === 'horizontal' ? '200px 1fr' : undefined,
+    gridTemplateColumns: variant === 'horizontal' ? `${rem(theme, 200)} 1fr` : undefined,
     columnGap: variant === 'horizontal' ? theme.spacing(1) : undefined,
     alignItems: variant === 'horizontal' ? 'center' : undefined,
   }),

package/src/components/form/HeaderActions/HeaderActions.tsx

@@ -11,6 +11,7 @@ import React, { useState } from 'react';
 
 import { HeaderButton } from '../HeaderButton';
 import type { HeaderActionItem, HeaderActionsProps } from './HeaderActions.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** Drop the gated-away entries, so everything below can count what is left. */
 function present(
@@ -122,7 +123,7 @@ export function HeaderActions({
                 }}
                 data-testid={action.dataTestId ?? action.id}
               >
-                <ListItemIcon sx={{ minWidth: 32 }}>{action.icon}</ListItemIcon>
+                <ListItemIcon sx={{ minWidth: sxRem(32) }}>{action.icon}</ListItemIcon>
                 <ListItemText>{action.text}</ListItemText>
               </MenuItem>
             ))}

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

@@ -13,9 +13,10 @@ import {
 import type { InputProps } from './Input.types';
 
 import { fieldEdge } from '../../../tokens/field-edge';
-import { fieldHeight } from '../../../tokens/field-height';
+import { FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { absoluteInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 import type { SizeValue } from '../../../tokens/vocabulary';
 
 type InputVariant = NonNullable<InputProps['variant']>;
@@ -24,14 +25,14 @@ type InputVariant = NonNullable<InputProps['variant']>;
 // reads too — see its header for why MUI's own values are in there as well.
 export { muiVariantFor, SIZE_MAP } from './Input.metrics';
 
-// Define pulse animation
-const pulseAnimation = keyframes`
+// The pulse ring, its spread through the theme's type scale.
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 ${INPUT_PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, INPUT_PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -42,9 +43,9 @@ const pulseAnimation = keyframes`
 
 export const glowStyles = (theme: Theme): CSSObject => ({
   '& .MuiInputBase-root': {
-    boxShadow: `0 0 ${INPUT_GLOW.rest.blur}px ${alpha(theme.palette.primary.main, INPUT_GLOW.rest.alpha)}`,
+    boxShadow: `0 0 ${rem(theme, INPUT_GLOW.rest.blur)} ${alpha(theme.palette.primary.main, INPUT_GLOW.rest.alpha)}`,
     '&.Mui-focused': {
-      boxShadow: `0 0 ${INPUT_GLOW.focused.blur}px ${alpha(theme.palette.primary.main, INPUT_GLOW.focused.alpha)}`,
+      boxShadow: `0 0 ${rem(theme, INPUT_GLOW.focused.blur)} ${alpha(theme.palette.primary.main, INPUT_GLOW.focused.alpha)}`,
     },
   },
 });
@@ -63,7 +64,7 @@ export const pulseStyles = (theme: Theme, size: SizeValue = 'md'): CSSObject =>
     borderRadius: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,
     opacity: INPUT_PULSE.opacity,
-    animation: `${pulseAnimation} ${INPUT_PULSE.ms / 1000}s infinite`,
+    animation: `${pulseAnimation(theme)} ${INPUT_PULSE.ms / 1000}s infinite`,
     pointerEvents: 'none',
     zIndex: -1,
   },
@@ -71,11 +72,11 @@ export const pulseStyles = (theme: Theme, size: SizeValue = 'md'): CSSObject =>
 
 export const floatingLabelStyles = (theme: Theme): CSSObject => ({
   '& .MuiInputLabel-root': {
-    transform: `translate(${FLOATING_LABEL.rest.x}px, ${FLOATING_LABEL.rest.y}px) scale(1)`,
+    transform: `translate(${rem(theme, FLOATING_LABEL.rest.x)}, ${rem(theme, FLOATING_LABEL.rest.y)}) scale(1)`,
     '&.MuiInputLabel-shrink': {
-      transform: `translate(${FLOATING_LABEL.shrink.x}px, ${FLOATING_LABEL.shrink.y}px) scale(${FLOATING_LABEL.scale})`,
+      transform: `translate(${rem(theme, FLOATING_LABEL.shrink.x)}, ${rem(theme, FLOATING_LABEL.shrink.y)}) scale(${FLOATING_LABEL.scale})`,
       backgroundColor: theme.palette.background.paper,
-      padding: `0 ${FLOATING_LABEL.paddingX}px`,
+      padding: `0 ${rem(theme, FLOATING_LABEL.paddingX)}`,
     },
   },
 });
@@ -97,8 +98,8 @@ export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject
     case 'glass':
       return {
         backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.rest),
-        backdropFilter: `blur(${INPUT_GLASS.blur}px)`,
-        border: `${INPUT_BORDER.rest}px solid ${fieldEdge(theme)}`,
+        backdropFilter: `blur(${rem(theme, INPUT_GLASS.blur)})`,
+        border: `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme)}`,
         '&:hover': {
           backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.hover),
           borderColor: alpha(theme.palette.primary.main, INPUT_GLASS.hoverBorderAlpha),
@@ -106,7 +107,7 @@ export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject
         '&.Mui-focused': {
           backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.focused),
           borderColor: theme.palette.primary.main,
-          boxShadow: `0 0 0 ${INPUT_GLASS.focusRing.width}px ${alpha(theme.palette.primary.main, INPUT_GLASS.focusRing.alpha)}`,
+          boxShadow: `0 0 0 ${rem(theme, INPUT_GLASS.focusRing.width)} ${alpha(theme.palette.primary.main, INPUT_GLASS.focusRing.alpha)}`,
         },
       };
     case 'underline':
@@ -136,7 +137,7 @@ const gradientFill = (theme: Theme, strength: number): string =>
 // since CSS cannot put a gradient on `border-color` directly.
 const gradientStyles = (theme: Theme): CSSObject => ({
   background: gradientFill(theme, INPUT_GRADIENT.fill.rest),
-  border: `${INPUT_GRADIENT.borderWidth}px solid transparent`,
+  border: `${rem(theme, INPUT_GRADIENT.borderWidth)} solid transparent`,
   backgroundOrigin: 'border-box',
   backgroundClip: 'padding-box, border-box',
   position: 'relative',
@@ -151,7 +152,7 @@ const gradientStyles = (theme: Theme): CSSObject => ({
     background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
     mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
     maskComposite: 'exclude',
-    padding: `${INPUT_GRADIENT.borderWidth}px`,
+    padding: rem(theme, INPUT_GRADIENT.borderWidth),
     zIndex: -1,
   },
   '&:hover': {
@@ -174,7 +175,7 @@ export const outlinedStyles = (theme: Theme): CSSObject => ({
   },
   '&.Mui-focused fieldset': {
     borderColor: theme.palette.primary.main,
-    borderWidth: INPUT_BORDER.focused,
+    borderWidth: rem(theme, INPUT_BORDER.focused),
   },
   '&.Mui-error fieldset': {
     borderColor: theme.palette.error.main,

package/src/components/form/Input/Input.tsx

@@ -1,6 +1,6 @@
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import InputAdornment from '@mui/material/InputAdornment/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { INPUT_LOADING } from './Input.metrics';
@@ -20,6 +20,7 @@ import {
 import type { InputProps } from './Input.types';
 import { splitTestId } from '../../../platform/test-id';
 import { fieldControlStyles } from '../../../tokens/field-height';
+import { rem } from '../../../tokens/relative';
 import type { SizeValue } from '../../../tokens/vocabulary';
 
 /**
@@ -64,10 +65,11 @@ const EndAdornment: React.FC<{ loading: boolean; endAdornment?: React.ReactNode
   loading,
   endAdornment,
 }) => {
+  const theme = useTheme();
   if (loading) {
     return (
       <InputAdornment position="end">
-        <CircularProgress size={INPUT_LOADING.spinnerSize} />
+        <CircularProgress size={rem(theme, INPUT_LOADING.spinnerSize)} />
       </InputAdornment>
     );
   }

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

@@ -84,19 +84,19 @@ export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
       borderRadius: fieldRadius(theme),
       ...(glass && {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${rem(theme, 20)})`,
         '& fieldset': { border: `1px solid ${fieldEdge(theme)}` },
       }),
       ...(gradient && {
         '&.Mui-focused fieldset': {
           background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,
-          borderWidth: '2px',
+          borderWidth: rem(theme, 2),
         },
       }),
       '& input': { textAlign: 'center', padding: 0, fontWeight: 'inherit' },
       ...(!glass && { '& fieldset': { borderColor: fieldEdge(theme) } }),
       '&:hover fieldset': { borderColor: palette.main },
-      '&.Mui-focused fieldset': { borderColor: palette.main, borderWidth: '2px' },
+      '&.Mui-focused fieldset': { borderColor: palette.main, borderWidth: rem(theme, 2) },
     },
   };
 };

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

@@ -1,8 +1,8 @@
 import { alpha } from '@mui/material/styles/index.js';
-import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+import type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';
 
 import type { LabelProps } from './Label.types';
-import { accentFor, rem } from '../../../tokens/scales';
+import { accentFor, rem, sxRem } from '../../../tokens/scales';
 
 type Size = NonNullable<LabelProps['size']>;
 type Variant = NonNullable<LabelProps['variant']>;
@@ -108,7 +108,7 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {
 
   glass: ({ theme, flags }) => ({
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: 'blur(10px)',
+    backdropFilter: `blur(${rem(theme, 10)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     borderRadius: theme.spacing(0.5),
     '&:hover': flags.clickable
@@ -181,7 +181,7 @@ export const labelStyles = (theme: Theme, flags: LabelStyleFlags): CSSObject =>
     ...textLayout(theme, flags),
     ...sizeStyles(theme, size),
     color,
-    ...(flags.glow && { textShadow: `0 0 10px ${alpha(accent, 0.5)}` }),
+    ...(flags.glow && { textShadow: `0 0 ${rem(theme, 10)} ${alpha(accent, 0.5)}` }),
     ...(flags.pulse && {
       animation: 'pulse 2s infinite',
       '@keyframes pulse': {
@@ -196,12 +196,12 @@ export const labelStyles = (theme: Theme, flags: LabelStyleFlags): CSSObject =>
 };
 
 /** Visually hidden but still read aloud, for the `srOnly` label. */
-export const SR_ONLY_SX: CSSObject = {
+export const SR_ONLY_SX: SxProps<Theme> = {
   position: 'absolute',
-  width: '1px',
-  height: '1px',
+  width: sxRem(1),
+  height: sxRem(1),
   padding: 0,
-  margin: '-1px',
+  margin: sxRem(-1),
   overflow: 'hidden',
   clip: 'rect(0, 0, 0, 0)',
   whiteSpace: 'nowrap',

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

@@ -43,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: sxRem(11.2) }}
+          sx={{ ml: 2, height: sxRem(20), fontSize: sxRem(11.2) }}
         />
       )}
     </MenuItem>
@@ -108,7 +108,7 @@ export const MenubarItemView: React.FC<MenubarItemViewProps> = ({
           open={isOpen}
           onClose={onClose}
           autoFocus
-          PaperProps={{ sx: { minWidth: 200, mt: 1 } }}
+          PaperProps={{ sx: { minWidth: sxRem(200), mt: 1 } }}
         >
           {item.children?.map((child) => (
             <DropdownItem key={child.id} child={child} onActivate={onActivate} />