@12-apps/ui 6.36.0 → 6.37.0

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

@@ -7,11 +7,13 @@ 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';
+import { rem, remPx, rems } from '../../../tokens/relative';
 
-/** The segment track's padding and border: its corner is the segments' plus these. */
-const SEGMENT_TRACK_PADDING = 4;
-const SEGMENT_TRACK_BORDER = 1;
+/**
+ * The segment track's padding (4px at the design scale); its border is the
+ * field hairline. Its corner is the segments' radius plus both.
+ */
+const segmentTrackPadding = (theme: Theme): string => rem(theme, 4);
 
 interface ColorPalette {
   main: string;
@@ -65,28 +67,28 @@ type SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 const pickSize = <T,>(map: Record<SizeKey, T>, size: string): T => map[size as SizeKey] ?? map.md;
 
-const CARD_SIZES: Record<SizeKey, CSSObject> = {
-  xs: { padding: '8px', minHeight: '60px' },
-  sm: { padding: '12px', minHeight: '70px' },
-  md: { padding: '16px', minHeight: '80px' },
-  lg: { padding: '20px', minHeight: '90px' },
-  xl: { padding: '24px', minHeight: '100px' },
+const CARD_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {
+  xs: (theme) => ({ padding: rem(theme, 8), minHeight: rem(theme, 60) }),
+  sm: (theme) => ({ padding: rem(theme, 12), minHeight: rem(theme, 70) }),
+  md: (theme) => ({ padding: rem(theme, 16), minHeight: rem(theme, 80) }),
+  lg: (theme) => ({ padding: rem(theme, 20), minHeight: rem(theme, 90) }),
+  xl: (theme) => ({ padding: rem(theme, 24), minHeight: rem(theme, 100) }),
 };
 
 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' }),
+  xs: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 12), minHeight: rem(theme, 32) }),
+  sm: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 14), minHeight: rem(theme, 36) }),
+  md: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 16), minHeight: rem(theme, 40) }),
+  lg: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 18), minHeight: rem(theme, 44) }),
+  xl: (theme) => ({ padding: rems(theme, 14, 28), fontSize: rem(theme, 20), minHeight: rem(theme, 48) }),
 };
 
 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) }),
+  xs: (theme) => ({ padding: rems(theme, 4, 8), fontSize: rem(theme, 12) }),
+  sm: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 14) }),
+  md: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 16) }),
+  lg: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 18) }),
+  xl: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 20) }),
 };
 
 export interface SurfaceFlags {
@@ -105,9 +107,9 @@ export const formLabelSx = (theme: Theme, glass?: boolean, error?: boolean): CSS
   color: error ? theme.palette.error.main : theme.palette.text.primary,
   ...(glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: 'blur(10px)',
-    padding: '8px 12px',
-    borderRadius: '8px',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    padding: rems(theme, 8, 12),
+    borderRadius: rem(theme, 8),
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     display: 'inline-block',
   }),
@@ -120,11 +122,11 @@ const cardBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSS
   return {
     cursor: 'pointer',
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
+    border: `${rem(theme, 2)} solid ${selected ? palette.main : fieldEdge(theme)}`,
     backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,
     position: 'relative' as const,
     overflow: 'hidden' as const,
-    ...(animated && { animation: `${slideAnimation} 0.4s ease-out` }),
+    ...(animated && { animation: `${slideAnimation(theme)} 0.4s ease-out` }),
     // A radial wash that grows from the centre as the card is selected or hovered.
     '&::before': {
       content: '""',
@@ -141,12 +143,12 @@ const cardBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSS
     '&:hover': {
       borderColor: palette.main,
       backgroundColor: alpha(palette.main, 0.02),
-      transform: 'translateY(-2px) scale(1.02)',
-      boxShadow: `${theme.shadows[4]}, 0 10px 30px -5px ${alpha(palette.main, 0.2)}`,
+      transform: `translateY(${rem(theme, -2)}) scale(1.02)`,
+      boxShadow: `${theme.shadows[4]}, 0 ${rems(theme, 10, 30, -5)} ${alpha(palette.main, 0.2)}`,
       '&::before': { width: '120%', height: '120%' },
     },
     '&:active': { transform: 'scale(0.98)' },
-    ...pickSize(CARD_SIZES, customSize),
+    ...pickSize(CARD_SIZES, customSize)(theme),
   };
 };
 
@@ -160,7 +162,7 @@ export const radioCardSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {
       backgroundColor: selected
         ? alpha(palette.main, 0.1)
         : alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     }),
     ...(gradient &&
@@ -170,8 +172,8 @@ export const radioCardSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {
       }),
     ...(glow &&
       selected && {
-        animation: `${glowAnimation} 2s ease-in-out infinite`,
-        boxShadow: `0 0 15px ${alpha(palette.main, 0.4)}`,
+        animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+        boxShadow: `0 0 ${rem(theme, 15)} ${alpha(palette.main, 0.4)}`,
       }),
   };
 };
@@ -211,8 +213,8 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
     '&:hover': {
       borderColor: palette.main,
       backgroundColor: selected ? palette.dark : alpha(palette.main, 0.1),
-      transform: 'translateY(-1px) scale(1.02)',
-      boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`,
+      transform: `translateY(${rem(theme, -1)}) scale(1.02)`,
+      boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(palette.main, 0.2)}`,
     },
     '&:active': { transform: 'scale(0.98)' },
     ...pickSize(BUTTON_SIZES, customSize)(theme),
@@ -233,7 +235,7 @@ export const buttonRadioSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {
       backgroundColor: selected
         ? alpha(palette.main, 0.8)
         : alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
     }),
     ...(gradient &&
@@ -252,16 +254,16 @@ export const segmentContainerSx = (
   const palette = getColorFromTheme(theme, customColor);
 
   return {
-    padding: `${SEGMENT_TRACK_PADDING}px`,
+    padding: segmentTrackPadding(theme),
     // Concentric with the segments inside it, which take the field radius.
-    borderRadius: fieldRadius(theme) + SEGMENT_TRACK_PADDING + SEGMENT_TRACK_BORDER,
+    borderRadius: fieldRadius(theme) + remPx(theme, 4) + FIELD_BORDER_WIDTH,
     backgroundColor: glass
       ? alpha(theme.palette.background.paper, 0.1)
       : alpha(palette.main, 0.05),
-    backdropFilter: glass ? 'blur(20px)' : 'none',
-    border: `${SEGMENT_TRACK_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}`,
+    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',
+    border: `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}`,
     display: 'flex',
-    gap: '2px',
+    gap: rem(theme, 2),
   };
 };
 
@@ -269,13 +271,13 @@ export const segmentContainerSx = (
  * An underline that grows from the centre outwards, and is already full width
  * when the segment is the selected one.
  */
-const segmentUnderline = (color: string, selected: boolean): CSSObject => ({
+const segmentUnderline = (theme: Theme, color: string, selected: boolean): CSSObject => ({
   content: '""',
   position: 'absolute',
   bottom: 0,
   left: selected ? 0 : '50%',
   width: selected ? '100%' : 0,
-  height: '2px',
+  height: rem(theme, 2),
   backgroundColor: color,
   transition: 'all 0.3s ease',
   transform: selected ? 'translateX(0)' : 'translateX(-50%)',
@@ -293,12 +295,12 @@ export const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject =>
     backgroundColor: selected ? theme.palette.background.paper : 'transparent',
     color: selected ? palette.main : theme.palette.text.secondary,
     boxShadow: selected
-      ? `${theme.shadows[2]}, inset 0 1px 3px ${alpha(palette.main, 0.1)}`
+      ? `${theme.shadows[2]}, inset 0 ${rems(theme, 1, 3)} ${alpha(palette.main, 0.1)}`
       : 'none',
     position: 'relative' as const,
     overflow: 'hidden' as const,
     ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),
-    '&::before': segmentUnderline(palette.main, Boolean(selected)),
+    '&::before': segmentUnderline(theme, palette.main, Boolean(selected)),
     '&:hover': {
       backgroundColor: selected
         ? theme.palette.background.paper

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

@@ -30,8 +30,7 @@ const RICH_TEXT_DEFAULTS: Partial<RichTextEditorProps> = {
   placeholder: 'Start typing...',
   disabled: false,
   readOnly: false,
-  toolbar: {},
-  height: 300 };
+  toolbar: {} };
 
 // Strips explicitly-undefined props before the merge, so `prop={undefined}`
 // still falls back to the default as a destructuring default would.
@@ -43,7 +42,9 @@ const definedProps = (props: RichTextEditorProps): Partial<RichTextEditorProps>
 // Simple inline formats are a tag swap; lists and the value-carrying formats
 // need their own handling. This was one nine-case switch.
 const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string, height?: string | number) => ({
-  minHeight: typeof height === 'number' ? `${height}px` : height,
+  // A number is design px, converted here where it is read (300 when the
+  // caller gives none); a string is any CSS length, used as-is.
+  minHeight: typeof height === 'string' ? height : rem(theme, height ?? 300),
   p: 2,
   outline: 'none',
   cursor: disabled ? 'not-allowed' : 'text',
@@ -52,12 +53,12 @@ const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string,
     color: theme.palette.text.disabled,
     pointerEvents: 'none' },
   '& p': {
-    margin: '8px 0',
+    margin: `${rem(theme, 8)} 0`,
     '&:first-of-type': { marginTop: 0 },
     '&:last-of-type': { marginBottom: 0 } },
   '& ul, & ol': { marginLeft: theme.spacing(2) },
   '& blockquote': {
-    borderLeft: `4px solid ${theme.palette.primary.main}`,
+    borderLeft: `${rem(theme, 4)} solid ${theme.palette.primary.main}`,
     paddingLeft: theme.spacing(2),
     margin: `${theme.spacing(1)} 0`,
     fontStyle: 'italic',
@@ -78,7 +79,7 @@ const shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({
   transition: 'border-color 0.2s ease-in-out',
   ...(isFocused && {
     borderColor: theme.palette.primary.main,
-    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}` }),
+    boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.2)}` }),
   ...(disabled && {
     backgroundColor: theme.palette.action.disabledBackground,
     color: theme.palette.text.disabled }) });

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

@@ -20,6 +20,8 @@ import React from 'react';
 
 import type { ToolbarConfig } from './RichTextEditor.types';
 
+import { sxRem } from '../../../tokens/relative';
+
 type ResolvedToolbar = Required<Omit<ToolbarConfig, 'customItems'>> &
   Pick<ToolbarConfig, 'customItems'>;
 
@@ -148,7 +150,7 @@ export const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({
       variant="dense"
       data-testid="editor-toolbar"
       sx={{
-        minHeight: 48,
+        minHeight: sxRem(48),
         px: 1,
         borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
         backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8),

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

@@ -9,10 +9,11 @@ import List from '@mui/material/List/index.js';
 import ListItemButton from '@mui/material/ListItemButton/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { SearchFilterChip, SearchResultLead } from './SearchPalette.types';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** Bold the first case-insensitive occurrence of `query` within `text`. */
 export function highlight(text: string, query: string): React.ReactNode {
@@ -39,19 +40,19 @@ export function Lead({ lead }: { lead: SearchResultLead | undefined }): React.JS
         component="img"
         src={lead.src}
         alt={lead.alt ?? ''}
-        sx={{ width: 32, height: 32, borderRadius: 1, objectFit: 'cover', flexShrink: 0 }}
+        sx={{ width: sxRem(32), height: sxRem(32), borderRadius: 1, objectFit: 'cover', flexShrink: 0 }}
       />
     );
   }
   if (lead.kind === 'avatar') {
     return (
-      <Avatar src={lead.src} alt={lead.alt ?? ''} sx={{ width: 32, height: 32, fontSize: sxRem(13.6) }}>
+      <Avatar src={lead.src} alt={lead.alt ?? ''} sx={{ width: sxRem(32), height: sxRem(32), fontSize: sxRem(13.6) }}>
         {lead.fallback}
       </Avatar>
     );
   }
   return (
-    <Box sx={{ display: 'flex', width: 32, justifyContent: 'center', flexShrink: 0, color: 'text.secondary' }}>
+    <Box sx={{ display: 'flex', width: sxRem(32), justifyContent: 'center', flexShrink: 0, color: 'text.secondary' }}>
       {lead.node}
     </Box>
   );
@@ -77,6 +78,7 @@ export function PaletteInput(props: {
   onChange: (v: string) => void;
   onKeyDown: (e: React.KeyboardEvent) => void;
 }): React.JSX.Element {
+  const theme = useTheme();
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, px: 2, py: 1.5 }}>
       <SearchIcon fontSize="small" sx={{ color: 'text.secondary', flexShrink: 0 }} />
@@ -119,7 +121,7 @@ export function PaletteInput(props: {
           sx={{ fontSize: sxRem(16) }}
         />
       </Box>
-      {props.isLoading && <CircularProgress size={18} sx={{ flexShrink: 0 }} />}
+      {props.isLoading && <CircularProgress size={rem(theme, 18)} sx={{ flexShrink: 0 }} />}
     </Box>
   );
 }
@@ -311,7 +313,7 @@ export function PaletteBody<T>(view: BodyView<T>): React.JSX.Element | null {
  */
 export const PALETTE_CARD_SX = {
   width: '100%',
-  maxWidth: 640,
+  maxWidth: sxRem(640),
   maxHeight: '100%',
   borderRadius: 2,
   overflow: 'hidden',

package/src/components/form/Select/Select.tsx

@@ -18,19 +18,20 @@ import type { SelectProps } from './Select.types';
 
 import { splitTestId } from '../../../platform/test-id';
 import { fieldEdge } from '../../../tokens/field-edge';
-import { asFieldSize, fieldControlStyles, fieldHeight } from '../../../tokens/field-height';
+import { asFieldSize, FIELD_BORDER_WIDTH, fieldControlStyles, fieldHeight } from '../../../tokens/field-height';
 import type { SizeValue } from '../../../tokens/vocabulary';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { absoluteInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // Define pulse animation
-const pulseAnimation = keyframes`
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 ${SELECT_PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, SELECT_PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -42,9 +43,9 @@ const pulseAnimation = keyframes`
 /** Glow ring on the outlined input, keyed off the `glow` prop. */
 const glowStyles = (theme: Theme): CSSObject => ({
   '& .MuiOutlinedInput-root': {
-    boxShadow: `0 0 ${SELECT_GLOW.rest.blur}px ${alpha(theme.palette.primary.main, SELECT_GLOW.rest.alpha)}`,
+    boxShadow: `0 0 ${rem(theme, SELECT_GLOW.rest.blur)} ${alpha(theme.palette.primary.main, SELECT_GLOW.rest.alpha)}`,
     '&.Mui-focused': {
-      boxShadow: `0 0 ${SELECT_GLOW.focused.blur}px ${alpha(theme.palette.primary.main, SELECT_GLOW.focused.alpha)}`,
+      boxShadow: `0 0 ${rem(theme, SELECT_GLOW.focused.blur)} ${alpha(theme.palette.primary.main, SELECT_GLOW.focused.alpha)}`,
     },
   },
 });
@@ -62,7 +63,7 @@ const pulseStyles = (theme: Theme, size: SizeValue): CSSObject => ({
     borderRadius: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,
     opacity: SELECT_PULSE.opacity,
-    animation: `${pulseAnimation} ${SELECT_PULSE.ms / 1000}s infinite`,
+    animation: `${pulseAnimation(theme)} ${SELECT_PULSE.ms / 1000}s infinite`,
     pointerEvents: 'none',
     zIndex: -1,
   },
@@ -71,8 +72,9 @@ const pulseStyles = (theme: Theme, size: SizeValue): CSSObject => ({
 /** `glass` variant: translucent, blurred background. */
 const glassVariant = (theme: Theme): CSSObject => ({
   backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.rest),
-  backdropFilter: `blur(${SELECT_GLASS.blur}px)`,
-  border: `${SELECT_BORDER.rest}px solid ${fieldEdge(theme)}`,
+  backdropFilter: `blur(${rem(theme, SELECT_GLASS.blur)})`,
+  // `SELECT_BORDER.rest` is the field hairline.
+  border: `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme)}`,
   '& fieldset': { border: 'none' },
   '&:hover': {
     backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.hover),
@@ -81,7 +83,7 @@ const glassVariant = (theme: Theme): CSSObject => ({
   '&.Mui-focused': {
     backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.focused),
     borderColor: theme.palette.primary.main,
-    boxShadow: `0 0 0 ${SELECT_GLASS.focusRing.width}px ${alpha(theme.palette.primary.main, SELECT_GLASS.focusRing.alpha)}`,
+    boxShadow: `0 0 0 ${rem(theme, SELECT_GLASS.focusRing.width)} ${alpha(theme.palette.primary.main, SELECT_GLASS.focusRing.alpha)}`,
   },
 });
 
@@ -91,7 +93,7 @@ const gradientFill = (theme: Theme, strength: number): string =>
 
 const gradientVariant = (theme: Theme): CSSObject => ({
   background: gradientFill(theme, SELECT_GRADIENT.fill.rest),
-  border: `${SELECT_GRADIENT.borderWidth}px solid transparent`,
+  border: `${rem(theme, SELECT_GRADIENT.borderWidth)} solid transparent`,
   backgroundOrigin: 'border-box',
   backgroundClip: 'padding-box, border-box',
   position: 'relative',
@@ -107,7 +109,7 @@ const gradientVariant = (theme: Theme): CSSObject => ({
     background: `linear-gradient(${SELECT_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: `${SELECT_GRADIENT.borderWidth}px`,
+    padding: rem(theme, SELECT_GRADIENT.borderWidth),
     zIndex: -1,
   },
   '&:hover': {
@@ -125,7 +127,7 @@ const gradientVariant = (theme: Theme): CSSObject => ({
 const defaultVariant = (theme: Theme): CSSObject => ({
   '& fieldset': { borderColor: fieldEdge(theme) },
   '&:hover fieldset': { borderColor: theme.palette.primary.main },
-  '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: SELECT_BORDER.focused },
+  '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: rem(theme, SELECT_BORDER.focused) },
   '&.Mui-error fieldset': { borderColor: theme.palette.error.main },
 });
 

package/src/components/form/Slider/Slider.animations.ts

@@ -1,14 +1,17 @@
 import { keyframes } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 
-export const glowAnimation = keyframes`
+import { rem } from '../../../tokens/relative';
+
+export const glowAnimation = (theme: Theme) => keyframes`
   0% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
   50% {
-    box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
+    box-shadow: 0 0 ${rem(theme, 15)} currentColor, 0 0 ${rem(theme, 25)} currentColor;
   }
   100% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
 `;
 

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

@@ -48,29 +48,30 @@ const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
 
 type SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+/** Design px, converted through the type scale where each is read. */
 interface Geometry {
-  height: number;
-  thumbSize: number;
-  markHeight: number;
+  heightPx: number;
+  thumbSizePx: number;
+  markHeightPx: number;
 }
 
 const SIZES: Record<SizeKey, Geometry> = {
-  xs: { height: 4, thumbSize: 16, markHeight: 8 },
-  sm: { height: 6, thumbSize: 18, markHeight: 10 },
-  md: { height: 8, thumbSize: 20, markHeight: 12 },
-  lg: { height: 10, thumbSize: 24, markHeight: 14 },
-  xl: { height: 12, thumbSize: 28, markHeight: 16 },
+  xs: { heightPx: 4, thumbSizePx: 16, markHeightPx: 8 },
+  sm: { heightPx: 6, thumbSizePx: 18, markHeightPx: 10 },
+  md: { heightPx: 8, thumbSizePx: 20, markHeightPx: 12 },
+  lg: { heightPx: 10, thumbSizePx: 24, markHeightPx: 14 },
+  xl: { heightPx: 12, thumbSizePx: 28, markHeightPx: 16 },
 };
 
 /**
  * The value bubble and mark labels shrink at the two smallest sizes only. The
  * two fonts are design px, read through the type scale.
  */
-const LABEL_SCALE: Record<string, { fontPx: number; box: number; markFont: number }> = {
-  xs: { fontPx: 10, box: 28, markFont: 10.4 },
-  sm: { fontPx: 11, box: 30, markFont: 11.2 },
+const LABEL_SCALE: Record<string, { fontPx: number; boxPx: number; markFont: number }> = {
+  xs: { fontPx: 10, boxPx: 28, markFont: 10.4 },
+  sm: { fontPx: 11, boxPx: 30, markFont: 11.2 },
 };
-const LABEL_DEFAULT = { fontPx: 12, box: 32, markFont: 12 };
+const LABEL_DEFAULT = { fontPx: 12, boxPx: 32, markFont: 12 };
 
 export interface SliderFlags {
   customColor?: string;
@@ -94,8 +95,8 @@ const trackPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject =>
 
   return {
     border: 'none',
-    height: geometry.height,
-    borderRadius: geometry.height / 2,
+    height: rem(theme, geometry.heightPx),
+    borderRadius: rem(theme, geometry.heightPx / 2),
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     position: 'relative',
     overflow: 'hidden',
@@ -121,12 +122,12 @@ const trackPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject =>
       },
     }),
     ...(glow && {
-      animation: `${glowAnimation} 2s ease-in-out infinite`,
-      boxShadow: `0 0 10px ${alpha(palette.main, 0.6)}, inset 0 0 10px ${alpha(palette.main, 0.2)}`,
+      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+      boxShadow: `0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.6)}, inset 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`,
     }),
     ...(glass && {
       backgroundColor: alpha(palette.main, 0.8),
-      backdropFilter: 'blur(10px)',
+      backdropFilter: `blur(${rem(theme, 10)})`,
       border: `1px solid ${alpha(palette.light || palette.main, 0.3)}`,
     }),
   };
@@ -135,12 +136,12 @@ const trackPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject =>
 const railPart = ({ theme, flags, geometry }: PartInput): CSSObject => ({
   color: alpha(theme.palette.action.disabled, 0.3),
   opacity: 1,
-  height: geometry.height,
-  borderRadius: geometry.height / 2,
+  height: rem(theme, geometry.heightPx),
+  borderRadius: rem(theme, geometry.heightPx / 2),
   transition: 'all 0.3s ease',
   ...(flags.glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   }),
   ...(flags.customVariant === 'gradient' && {
@@ -155,10 +156,10 @@ const thumbPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject =>
   const { gradient, glow, glass } = flags;
 
   return {
-    height: geometry.thumbSize,
-    width: geometry.thumbSize,
+    height: rem(theme, geometry.thumbSizePx),
+    width: rem(theme, geometry.thumbSizePx),
     backgroundColor: gradient ? palette.main : absoluteInk(theme).white,
-    border: `2px solid ${palette.main}`,
+    border: `${rem(theme, 2)} solid ${palette.main}`,
     boxShadow: `${theme.shadows[2]}, 0 0 0 0 ${alpha(palette.main, 0.2)}`,
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     position: 'relative',
@@ -177,16 +178,16 @@ const thumbPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject =>
     },
     '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
       boxShadow: glow
-        ? `${theme.shadows[4]}, 0 0 20px ${alpha(palette.main, 0.6)}, 0 0 0 8px ${alpha(palette.main, 0.15)}`
-        : `${theme.shadows[4]}, 0 0 0 8px ${alpha(palette.main, 0.15)}`,
+        ? `${theme.shadows[4]}, 0 0 ${rem(theme, 20)} ${alpha(palette.main, 0.6)}, 0 0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.15)}`
+        : `${theme.shadows[4]}, 0 0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.15)}`,
       transform: 'scale(1.15)',
       '&::before': { animation: `${pulseAnimation} 0.6s ease-out` },
     },
     '&:active': { transform: 'scale(1.05)' },
     ...(glass && {
       backgroundColor: alpha(theme.palette.background.paper, 0.9),
-      backdropFilter: 'blur(10px)',
-      border: `2px solid ${alpha(palette.main, 0.8)}`,
+      backdropFilter: `blur(${rem(theme, 10)})`,
+      border: `${rem(theme, 2)} solid ${alpha(palette.main, 0.8)}`,
     }),
     ...(gradient && {
       background: `linear-gradient(135deg, ${palette.light}, ${palette.main})`,
@@ -222,18 +223,18 @@ const valueLabelPart = ({ theme, flags, palette }: PartInput): CSSObject => {
     lineHeight: 1.2,
     fontSize: rem(theme, scale.fontPx),
     padding: 0,
-    width: scale.box,
-    height: scale.box,
-    borderRadius: gradient ? '8px' : '50% 50% 50% 0',
+    width: rem(theme, scale.boxPx),
+    height: rem(theme, scale.boxPx),
+    borderRadius: gradient ? rem(theme, 8) : '50% 50% 50% 0',
     backgroundColor: bubbleBackground(palette, Boolean(gradient), Boolean(glass)),
     background: gradient
       ? `linear-gradient(135deg, ${palette.light}, ${palette.main})`
       : 'unset',
-    backdropFilter: glass ? 'blur(10px)' : 'none',
+    backdropFilter: glass ? `blur(${rem(theme, 10)})` : 'none',
     transformOrigin: 'bottom left',
     transform: bubbleTransform.hidden,
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-    boxShadow: `${theme.shadows[2]}, 0 0 10px ${alpha(palette.main, 0.2)}`,
+    boxShadow: `${theme.shadows[2]}, 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`,
     '&:before': { display: 'none' },
     '&.MuiSlider-valueLabelOpen': { transform: bubbleTransform.shown },
     '& > *': { transform: gradient ? 'none' : 'rotate(45deg)', fontWeight: 600 },
@@ -243,22 +244,22 @@ const valueLabelPart = ({ theme, flags, palette }: PartInput): CSSObject => {
 const markPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {
   const { gradient, glow, customVariant } = flags;
   const isMarksVariant = customVariant === 'marks';
-  const { markHeight, height } = geometry;
+  const { markHeightPx, heightPx } = geometry;
 
   return {
     backgroundColor: alpha(theme.palette.action.disabled, 0.5),
-    height: markHeight,
-    width: isMarksVariant ? 3 : 2,
+    height: rem(theme, markHeightPx),
+    width: rem(theme, isMarksVariant ? 3 : 2),
     // Centred on the rail rather than hanging below it.
-    marginTop: -(markHeight - height) / 2,
-    borderRadius: 1,
+    marginTop: rem(theme, -(markHeightPx - heightPx) / 2),
+    borderRadius: rem(theme, 1),
     transition: 'all 0.3s ease',
     '&.MuiSlider-markActive': {
       backgroundColor: gradient ? palette.light : palette.main,
-      width: isMarksVariant ? 4 : 2,
-      height: markHeight + 2,
-      marginTop: -(markHeight + 2 - height) / 2,
-      ...(glow && { boxShadow: `0 0 8px ${alpha(palette.main, 0.5)}` }),
+      width: rem(theme, isMarksVariant ? 4 : 2),
+      height: rem(theme, markHeightPx + 2),
+      marginTop: rem(theme, -(markHeightPx + 2 - heightPx) / 2),
+      ...(glow && { boxShadow: `0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.5)}` }),
     },
   };
 };
@@ -283,7 +284,7 @@ export const sliderSx = (theme: Theme, flags: SliderFlags): CSSObject => {
 
   return {
     color: palette.main,
-    height: geometry.height,
+    height: rem(theme, geometry.heightPx),
     '& .MuiSlider-track': trackPart(input),
     '& .MuiSlider-rail': railPart(input),
     '& .MuiSlider-thumb': thumbPart(input),

package/src/components/form/Switch/Switch.animations.ts

@@ -1,14 +1,17 @@
 import { keyframes } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 
-export const glowAnimation = keyframes`
+import { rem } from '../../../tokens/relative';
+
+export const glowAnimation = (theme: Theme) => keyframes`
   0% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
   50% {
-    box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
+    box-shadow: 0 0 ${rem(theme, 15)} currentColor, 0 0 ${rem(theme, 25)} currentColor;
   }
   100% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
 `;