@12-apps/ui 6.36.0 → 6.37.0

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

@@ -97,7 +97,7 @@ export const SwitchIcon: React.FC<SwitchIconProps> = ({
       sx={{
         position: 'absolute',
         top: '50%',
-        ...(isOn ? { left: shown ? 4 : '50%' } : { right: shown ? 4 : '50%' }),
+        ...(isOn ? { left: shown ? sxRem(4) : '50%' } : { right: shown ? sxRem(4) : '50%' }),
         transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         opacity: shown ? 1 : 0,
         transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,
@@ -278,7 +278,7 @@ const SwitchLabel: React.FC<{
         // The floor applies to the row the label shares with the control. A
         // description already makes the row taller than 40px, so forcing it
         // there would only add blank space.
-        ...(description ? {} : { minHeight: TAP_TARGET_MIN }),
+        ...(description ? {} : { minHeight: sxRem(TAP_TARGET_MIN) }),
         // A disabled control's label toggles nothing, so it must not wear the
         // cursor that says it does.
         ...(htmlFor && !disabled ? { cursor: 'pointer' } : {}),

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

@@ -103,6 +103,10 @@ export interface SwitchFlags {
   pulse?: boolean;
 }
 
+/** A metrics radius on the web: its px through the type scale, a percentage as-is. */
+const lengthOrPercent = (theme: Theme, value: number | string): string =>
+  typeof value === 'number' ? rem(theme, value) : value;
+
 const thumbShadow = (theme: Theme, look: SwitchLook): string =>
   look === 'ios' ? IOS_THUMB_SHADOW : (theme.shadows[THUMB_ELEVATION[look]] ?? 'none');
 
@@ -148,15 +152,15 @@ const checkedInk = (flags: SwitchFlags, palette: ColorPalette): string => {
 };
 
 /** The checked track: the filled bar behind the thumb once the switch is on. */
-const checkedTrack = (flags: SwitchFlags, palette: ColorPalette): CSSObject => ({
+const checkedTrack = (theme: Theme, flags: SwitchFlags, palette: ColorPalette): CSSObject => ({
   backgroundColor: palette.main,
   opacity: 1,
   border: 0,
   position: 'relative',
   overflow: 'hidden',
   ...(flags.glow && {
-    animation: `${glowAnimation} ${seconds(SWITCH_GLOW.ms)} ease-in-out infinite`,
-    boxShadow: `0 0 ${SWITCH_GLOW.blur}px ${alpha(palette.main, SWITCH_GLOW.alpha)}, inset 0 0 ${SWITCH_GLOW.insetBlur}px ${alpha(palette.main, SWITCH_GLOW.insetAlpha)}`,
+    animation: `${glowAnimation(theme)} ${seconds(SWITCH_GLOW.ms)} ease-in-out infinite`,
+    boxShadow: `0 0 ${rem(theme, SWITCH_GLOW.blur)} ${alpha(palette.main, SWITCH_GLOW.alpha)}, inset 0 0 ${rem(theme, SWITCH_GLOW.insetBlur)} ${alpha(palette.main, SWITCH_GLOW.insetAlpha)}`,
   }),
   ...(flags.gradient && {
     background: `linear-gradient(${SWITCH_GRADIENT.checked.angleDeg}deg, ${palette.light || palette.main} ${SWITCH_GRADIENT.checked.stops[0]}%, ${palette.main} ${SWITCH_GRADIENT.checked.stops[1]}%, ${palette.dark || palette.main} ${SWITCH_GRADIENT.checked.stops[2]}%)`,
@@ -176,22 +180,22 @@ const switchBaseSx = (
   const isIos = look === 'ios';
 
   return {
-    padding,
+    padding: rem(theme, padding),
     margin: 0,
     transitionDuration: `${SWITCH_TRANSITION.ms}ms`,
     transitionTimingFunction: SWITCH_TRANSITION.easing,
-    ...(isIos && { transform: `translateX(${IOS_BASE_OFFSET}px)` }),
+    ...(isIos && { transform: `translateX(${rem(theme, IOS_BASE_OFFSET)})` }),
     '&:hover': {
       '& .MuiSwitch-thumb': {
         transform: flags.loading ? 'none' : `scale(${SWITCH_HOVER.thumbScale})`,
-        boxShadow: `${theme.shadows[SWITCH_HOVER.elevation]}, 0 0 ${SWITCH_HOVER.blur}px ${alpha(palette.main, SWITCH_HOVER.alpha)}`,
+        boxShadow: `${theme.shadows[SWITCH_HOVER.elevation]}, 0 0 ${rem(theme, SWITCH_HOVER.blur)} ${alpha(palette.main, SWITCH_HOVER.alpha)}`,
       },
       ...(flags.ripple && { '&::after': rippleOverlay(palette) }),
     },
     '&.Mui-checked': {
       // The thumb travels the track minus its own width and both paddings; the
       // iOS look insets differently, so it gets its own distance.
-      transform: `translateX(${width - thumbSize - padding * 2}px)`,
+      transform: `translateX(${rem(theme, width - thumbSize - padding * 2)})`,
       color: checkedInk(flags, palette),
       '& .MuiSwitch-thumb': {
         animation: flags.loading ? 'none' : `${bounceAnimation} ${seconds(SWITCH_TRANSITION.ms)} ease-out`,
@@ -225,13 +229,13 @@ const switchBaseSx = (
           ? { borderColor: checkedInk(flags, palette) }
           : { backgroundColor: checkedInk(flags, palette) }),
       },
-      '& + .MuiSwitch-track': checkedTrack(flags, palette),
+      '& + .MuiSwitch-track': checkedTrack(theme, flags, palette),
       '&.Mui-disabled + .MuiSwitch-track': { opacity: DISABLED.checkedTrackOpacity },
-      ...(isIos && { transform: `translateX(${width - thumbSize - IOS_TRAVEL_INSET}px)` }),
+      ...(isIos && { transform: `translateX(${rem(theme, width - thumbSize - IOS_TRAVEL_INSET)})` }),
     },
     '&.Mui-focusVisible .MuiSwitch-thumb': {
       color: palette.main,
-      border: `${SWITCH_FOCUS_RING.width}px solid ${alpha(palette.main, SWITCH_FOCUS_RING.alpha)}`,
+      border: `${rem(theme, SWITCH_FOCUS_RING.width)} solid ${alpha(palette.main, SWITCH_FOCUS_RING.alpha)}`,
     },
     '&.Mui-disabled .MuiSwitch-thumb': { color: neutralTones(theme).surface },
     '&.Mui-disabled + .MuiSwitch-track': { opacity: DISABLED.trackOpacity },
@@ -245,9 +249,9 @@ const thumbSx = (
   thumbSize: number,
   look: SwitchLook,
 ): CSSObject => ({
-  width: thumbSize,
-  height: thumbSize,
-  borderRadius: THUMB_RADIUS[look](thumbSize),
+  width: rem(theme, thumbSize),
+  height: rem(theme, thumbSize),
+  borderRadius: lengthOrPercent(theme, THUMB_RADIUS[look](thumbSize)),
   // `.Mui-checked` above replaces this for the brand-filled track; see
   // {@link RESTING_THUMB} for why the resting one stays white.
   backgroundColor: RESTING_THUMB,
@@ -259,7 +263,7 @@ const thumbSx = (
   justifyContent: 'center',
   ...(flags.glass && {
     backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.thumbAlpha),
-    backdropFilter: `blur(${SWITCH_GLASS.thumbBlur}px)`,
+    backdropFilter: `blur(${rem(theme, SWITCH_GLASS.thumbBlur)})`,
     border: `1px solid ${alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha)}`,
   }),
   ...(flags.pulse && { animation: `${pulseAnimation} ${seconds(SWITCH_PULSE.ms)} ease-in-out infinite` }),
@@ -268,10 +272,10 @@ const thumbSx = (
     '&::after': {
       content: '""',
       position: 'absolute',
-      width: thumbSize * SWITCH_SPINNER.sizeRatio,
-      height: thumbSize * SWITCH_SPINNER.sizeRatio,
-      border: `${SWITCH_SPINNER.borderWidth}px solid ${palette.main}`,
-      borderTop: `${SWITCH_SPINNER.borderWidth}px solid transparent`,
+      width: rem(theme, thumbSize * SWITCH_SPINNER.sizeRatio),
+      height: rem(theme, thumbSize * SWITCH_SPINNER.sizeRatio),
+      border: `${rem(theme, SWITCH_SPINNER.borderWidth)} solid ${palette.main}`,
+      borderTop: `${rem(theme, SWITCH_SPINNER.borderWidth)} solid transparent`,
       borderRadius: '50%',
       animation: `${spinAnimation} ${seconds(SWITCH_SPINNER.ms)} linear infinite`,
     },
@@ -344,7 +348,7 @@ const trackSx = (
   const { glass, gradient, onText, offText, customVariant } = flags;
 
   return {
-    borderRadius: TRACK_RADIUS[look](height),
+    borderRadius: rem(theme, TRACK_RADIUS[look](height)),
     backgroundColor: trackColor(
       { black: absoluteInk(theme).black, disabled: theme.palette.action.disabled },
       look,
@@ -355,7 +359,7 @@ const trackSx = (
     boxShadow: look === 'ios' ? iosTrackShadow() : 'none',
     ...(glass && {
       backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.trackAlpha),
-      backdropFilter: `blur(${SWITCH_GLASS.trackBlur}px)`,
+      backdropFilter: `blur(${rem(theme, SWITCH_GLASS.trackBlur)})`,
       border: `1px solid ${alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha)}`,
     }),
     ...(gradient &&
@@ -381,8 +385,8 @@ export const switchSx = (theme: Theme, flags: SwitchFlags): CSSObject => {
   const look = lookOf(flags.customVariant);
 
   return {
-    width: geometry.width,
-    height: geometry.height,
+    width: rem(theme, geometry.width),
+    height: rem(theme, geometry.height),
     padding: 0,
     overflow: 'visible',
     '& .MuiSwitch-switchBase': switchBaseSx(theme, flags, palette, geometry, look),

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

@@ -3,16 +3,17 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { absoluteInk, controlNeutral } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
-const glowAnimation = keyframes`
+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 20px currentColor, 0 0 30px currentColor;
+    box-shadow: 0 0 ${rem(theme, 20)} currentColor, 0 0 ${rem(theme, 30)} currentColor;
   }
   100% {
-    box-shadow: 0 0 5px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor;
   }
 `;
 
@@ -29,12 +30,12 @@ const glowAnimation = keyframes`
 // `;
 
 // Float animation for rich text toolbar
-export const floatAnimation = keyframes`
+export const floatAnimation = (theme: Theme) => keyframes`
   0% {
     transform: translateY(0px);
   }
   50% {
-    transform: translateY(-3px);
+    transform: translateY(${rem(theme, -3)});
   }
   100% {
     transform: translateY(0px);
@@ -99,15 +100,15 @@ export const textareaEmphasisStyles = ({
 const glassStyles = glass
   ? {
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${fieldEdge(theme)}`,
       '&:hover': {
         backgroundColor: alpha(theme.palette.background.paper, 0.15),
-        backdropFilter: 'blur(25px)',
+        backdropFilter: `blur(${rem(theme, 25)})`,
       },
       '&:focus': {
         backgroundColor: alpha(theme.palette.background.paper, 0.2),
-        backdropFilter: 'blur(30px)',
+        backdropFilter: `blur(${rem(theme, 30)})`,
       },
     }
   : {};
@@ -117,7 +118,7 @@ const gradientStyles = gradient
   ? {
       background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,
                linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light}) border-box`,
-      border: '2px solid transparent',
+      border: `${rem(theme, 2)} solid transparent`,
       '&:focus': {
         background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,
                  linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark}) border-box`,
@@ -128,8 +129,8 @@ const gradientStyles = gradient
 // Glow effect
 const glowStyles = glow
   ? {
-      animation: `${glowAnimation} 2s ease-in-out infinite`,
-      boxShadow: `0 0 10px ${alpha(colorPalette.main, 0.3)}`,
+      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+      boxShadow: `0 0 ${rem(theme, 10)} ${alpha(colorPalette.main, 0.3)}`,
     }
   : {};
 

package/src/components/form/Textarea/Textarea.tsx

@@ -2,7 +2,7 @@ import Box from '@mui/material/Box/index.js';
 import FormHelperText from '@mui/material/FormHelperText/index.js';
 import InputLabel from '@mui/material/InputLabel/index.js';
 import TextareaAutosize from '@mui/material/TextareaAutosize/index.js';
-import { alpha, styled } from '@mui/material/styles/index.js';
+import { alpha, styled, useTheme } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 import React, { lazy, Suspense, useState } from 'react';
 
@@ -33,7 +33,7 @@ import type { TextareaProps } from './Textarea.types';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { FIELD_BORDER_WIDTH, fieldBorder } from '../../../tokens/field-height';
-import { rem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 // Interface for styled component props
 interface StyledTextareaProps {
@@ -66,11 +66,11 @@ const StyledTextarea = styled(TextareaAutosize, {
   const errorColor = theme.palette.error;
 
   const sizeMap = {
-    xs: { padding: '6px 8px', fontSize: rem(theme, 12), minHeight: '60px' },
-    sm: { padding: '8px 10px', fontSize: rem(theme, 14), minHeight: '80px' },
-    md: { padding: '10px 12px', fontSize: rem(theme, 16), minHeight: '100px' },
-    lg: { padding: '12px 14px', fontSize: rem(theme, 18), minHeight: '120px' },
-    xl: { padding: '14px 16px', fontSize: rem(theme, 20), minHeight: '140px' } };
+    xs: { padding: rems(theme, 6, 8), fontSize: rem(theme, 12), minHeight: rem(theme, 60) },
+    sm: { padding: rems(theme, 8, 10), fontSize: rem(theme, 14), minHeight: rem(theme, 80) },
+    md: { padding: rems(theme, 10, 12), fontSize: rem(theme, 16), minHeight: rem(theme, 100) },
+    lg: { padding: rems(theme, 12, 14), fontSize: rem(theme, 18), minHeight: rem(theme, 120) },
+    xl: { padding: rems(theme, 14, 16), fontSize: rem(theme, 20), minHeight: rem(theme, 140) } };
 
   const baseStyles = {
     width: '100%',
@@ -97,7 +97,7 @@ const StyledTextarea = styled(TextareaAutosize, {
     '&:focus': {
       borderColor: error ? errorColor.main : colorPalette.main,
       backgroundColor: theme.palette.background.paper,
-      boxShadow: `inset 0 0 0 1px ${error ? errorColor.main : colorPalette.main}, 0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };
+      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${error ? errorColor.main : colorPalette.main}, 0 0 0 ${rem(theme, 3)} ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };
 
   // Glass morphism effect
   return {
@@ -112,9 +112,9 @@ const StyledLabel = styled(InputLabel, {
   color: error ? theme.palette.error.main : theme.palette.text.primary,
   ...(glass && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: 'blur(10px)',
-    padding: '4px 8px',
-    borderRadius: '4px',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    padding: rems(theme, 4, 8),
+    borderRadius: rem(theme, 4),
     border: `1px solid ${fieldEdge(theme)}`,
     display: 'inline-block' }) }));
 
@@ -133,8 +133,6 @@ const StyledLabel = styled(InputLabel, {
 
 // Rich text toolbar styling
 
-const ICON_GUTTER = '40px';
-
 const TEXTAREA_DEFAULTS = {
   variant: 'default',
   color: 'primary',
@@ -191,8 +189,8 @@ const TextareaIcon: React.FC<{
   <Box
     sx={{
       position: 'absolute',
-      top: '12px',
-      ...(iconPosition === 'start' ? { left: '12px' } : { right: '12px' }),
+      top: sxRem(12),
+      ...(iconPosition === 'start' ? { left: sxRem(12) } : { right: sxRem(12) }),
       color: 'text.secondary',
       pointerEvents: 'none',
       zIndex: 1 }}
@@ -229,6 +227,19 @@ function RichVariant({
   );
 }
 
+// Same gap either side; only which side it applies to changes. The previous
+// version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose
+// two branches were identical. The icon's gutter is 40px at the design scale.
+function withIconGutter(
+  theme: Theme,
+  style: React.CSSProperties | undefined,
+  hasIcon: boolean,
+  iconPosition: TextareaProps['iconPosition'],
+): React.CSSProperties {
+  if (!hasIcon) return { ...style };
+  return { ...style, [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: rem(theme, 40) };
+}
+
 export const Textarea: React.FC<TextareaProps> = (textareaProps) => {
   const {
     variant,
@@ -255,17 +266,12 @@ export const Textarea: React.FC<TextareaProps> = (textareaProps) => {
   // key to optional, which would lose what the variant union already proved.
   const { richEditorCopy } = textareaProps;
 
+  const theme = useTheme();
   const [richTextValue, setRichTextValue] = useState('');
   const hasIcon = Boolean(icon);
   const testId = dataTestId || dataTestIdCamelCase;
 
-  const textareaStyle = {
-    ...style,
-    // Same gap either side; only which side it applies to changes. The previous
-    // version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose
-    // two branches were identical.
-    ...(hasIcon && {
-      [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: ICON_GUTTER }) };
+  const textareaStyle = withIconGutter(theme, style, hasIcon, iconPosition);
 
   // If rich text variant, use the rich text editor
   if (variant === 'rich' && richEditorCopy) {

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -22,7 +22,7 @@ import type { RichEditorToolbarCopy } from '../../../copy';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   display: 'flex',
@@ -33,9 +33,9 @@ const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   background: glass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
   ...(glass && {
-    backdropFilter: 'blur(15px)' }),
+    backdropFilter: `blur(${rem(theme, 15)})` }),
   '& .MuiDivider-root': {
-    height: 24,
+    height: rem(theme, 24),
     margin: `0 ${theme.spacing(1)}` } }));
 
 const ToolbarButton = styled(IconButton, {
@@ -63,8 +63,8 @@ const ToolbarButton = styled(IconButton, {
   '&:hover': {
     color: theme.palette.primary.main,
     backgroundColor: alpha(theme.palette.primary.main, 0.15),
-    transform: 'translateY(-1px)',
-    animation: `${floatAnimation} 1.5s ease-in-out infinite`,
+    transform: `translateY(${rem(theme, -1)})`,
+    animation: `${floatAnimation(theme)} 1.5s ease-in-out infinite`,
 
     '&::before': {
       width: '100%',
@@ -87,10 +87,10 @@ const CharacterCount = styled(Box)<{ limit?: number; count: number }>(({ theme,
       : isWarning
         ? theme.palette.warning.main
         : theme.palette.text.secondary,
-    padding: '2px 6px',
+    padding: rems(theme, 2, 6),
     borderRadius: theme.spacing(0.5),
     backgroundColor: alpha(theme.palette.background.paper, 0.8),
-    backdropFilter: 'blur(10px)',
+    backdropFilter: `blur(${rem(theme, 10)})`,
     transition: 'all 0.3s ease' };
 });
 
@@ -108,7 +108,7 @@ const ContentEditableDiv = styled('div')<{
   const engaged = error ? errorColor.main : colorPalette.main;
 
   return {
-    minHeight: '120px',
+    minHeight: rem(theme, 120),
     padding: theme.spacing(1.5),
     borderRadius: `0 0 ${fieldRadius(theme)}px ${fieldRadius(theme)}px`,
     border: `${FIELD_BORDER_WIDTH}px solid ${error || focused ? engaged : fieldEdge(theme)}`,
@@ -125,7 +125,7 @@ const ContentEditableDiv = styled('div')<{
     cursor: 'text',
 
     ...(glass && {
-      backdropFilter: 'blur(20px)' }),
+      backdropFilter: `blur(${rem(theme, 20)})` }),
 
     '&:hover': {
       backgroundColor: glass
@@ -136,7 +136,7 @@ const ContentEditableDiv = styled('div')<{
     // moves), as every other field's does, under the halo.
     '&:focus': {
       borderColor: engaged,
-      boxShadow: `inset 0 0 0 1px ${engaged}, 0 0 0 3px ${alpha(engaged, 0.1)}` },
+      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${engaged}, 0 0 0 ${rem(theme, 3)} ${alpha(engaged, 0.1)}` },
 
     '& > *': {
       margin: '0.5em 0' },

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

@@ -4,17 +4,17 @@ import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.
 import { fieldRadius } from '../../../tokens/field-radius';
 import { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, controlNeutral, sheen } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
-const glowAnimation = keyframes`
-  0% { box-shadow: 0 0 5px currentColor; }
-  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
-  100% { box-shadow: 0 0 5px currentColor; }
+const glowAnimation = (theme: Theme) => keyframes`
+  0% { box-shadow: 0 0 ${rem(theme, 5)} currentColor; }
+  50% { box-shadow: 0 0 ${rem(theme, 15)} currentColor, 0 0 ${rem(theme, 25)} currentColor; }
+  100% { box-shadow: 0 0 ${rem(theme, 5)} currentColor; }
 `;
 
-const floatAnimation = keyframes`
+const floatAnimation = (theme: Theme) => keyframes`
   0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-2px); }
+  50% { transform: translateY(${rem(theme, -2)}); }
 `;
 
 interface TogglePalette {
@@ -57,18 +57,21 @@ export const getColorFromTheme = (theme: Theme, color: string): TogglePalette =>
   };
 };
 
-/** Each size's padding and type; the type is design px, read through the type scale. */
-const SIZE_MAP: Record<string, { padding: string; fontPx: number }> = {
-  xs: { padding: '4px 8px', fontPx: 12 },
-  sm: { padding: '6px 12px', fontPx: 14 },
-  md: { padding: '8px 16px', fontPx: 16 },
-  lg: { padding: '10px 20px', fontPx: 18 },
-  xl: { padding: '12px 24px', fontPx: 20 },
+/**
+ * Each size's padding (vertical, horizontal) and type, in design px, read
+ * through the type scale.
+ */
+const SIZE_MAP: Record<string, { paddingPx: readonly [number, number]; fontPx: number }> = {
+  xs: { paddingPx: [4, 8], fontPx: 12 },
+  sm: { paddingPx: [6, 12], fontPx: 14 },
+  md: { paddingPx: [8, 16], fontPx: 16 },
+  lg: { paddingPx: [10, 20], fontPx: 18 },
+  xl: { paddingPx: [12, 24], fontPx: 20 },
 };
 
 const sizeStyles = (theme: Theme, customSize: string): CSSObject => {
   const size = SIZE_MAP[customSize];
-  return size ? { padding: size.padding, fontSize: rem(theme, size.fontPx) } : {};
+  return size ? { padding: rems(theme, ...size.paddingPx), fontSize: rem(theme, size.fontPx) } : {};
 };
 
 export const baseStyles = (
@@ -103,9 +106,9 @@ export const baseStyles = (
   '&:hover': {
     backgroundColor: alpha(colorPalette.main, 0.08),
     borderColor: colorPalette.main,
-    transform: 'translateY(-1px)',
-    boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,
-    animation: `${floatAnimation} 2s ease-in-out infinite`,
+    transform: `translateY(${rem(theme, -1)})`,
+    boxShadow: `0 ${rems(theme, 4, 8)} ${alpha(colorPalette.main, 0.15)}`,
+    animation: `${floatAnimation(theme)} 2s ease-in-out infinite`,
 
     '&::before': {
       width: '100%',
@@ -121,7 +124,7 @@ export const baseStyles = (
     backgroundColor: colorPalette.main,
     color: colorPalette.contrastText || absoluteInk(theme).white,
     borderColor: colorPalette.main,
-    boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,
+    boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(colorPalette.main, 0.3)}`,
 
     '&::after': {
       content: '""',
@@ -136,8 +139,8 @@ export const baseStyles = (
 
     '&:hover': {
       backgroundColor: colorPalette.dark,
-      transform: 'translateY(-2px) scale(1.02)',
-      boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`,
+      transform: `translateY(${rem(theme, -2)}) scale(1.02)`,
+      boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(colorPalette.main, 0.4)}`,
     },
   },
 
@@ -158,7 +161,7 @@ export const variantStyles = (
     case 'outline':
       return {
         backgroundColor: 'transparent',
-        border: `2px solid ${colorPalette.main}`,
+        border: `${rem(theme, 2)} solid ${colorPalette.main}`,
         color: colorPalette.main,
 
         '&.Mui-selected': {
@@ -197,7 +200,7 @@ export const effectStyles = (
 ): CSSObject => ({
   ...(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)}`,
   }),
 
@@ -205,7 +208,7 @@ export const effectStyles = (
     '&.Mui-selected': {
       background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,
       backgroundSize: '200% 200%',
-      animation: `${floatAnimation} 3s ease-in-out infinite`,
+      animation: `${floatAnimation(theme)} 3s ease-in-out infinite`,
       border: 'none',
 
       '&:hover': {
@@ -216,8 +219,8 @@ export const effectStyles = (
 
   ...(glow && {
     '&.Mui-selected': {
-      animation: `${glowAnimation} 2s ease-in-out infinite`,
-      boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`,
+      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+      boxShadow: `0 0 ${rem(theme, 15)} ${alpha(colorPalette.main, 0.6)}`,
     },
   }),
 });

package/src/components/form/Toggle/Toggle.tsx

@@ -1,5 +1,5 @@
 import ToggleButton from '@mui/material/ToggleButton/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import {
@@ -10,6 +10,8 @@ import {
 } from './Toggle.styles';
 import type { ToggleProps } from './Toggle.types';
 
+import { rem } from '../../../tokens/relative';
+
 const StyledToggle = styled(ToggleButton, {
   shouldForwardProp: (prop) =>
     !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient'].includes(
@@ -56,6 +58,7 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
     },
     ref,
   ) => {
+    const theme = useTheme();
     const testIds = {
       container: dataTestId,
       icon: dataTestId ? `${dataTestId}-icon` : undefined,
@@ -75,7 +78,7 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
       >
         {icon && (
           <span
-            style={{ marginRight: children ? '8px' : '0' }}
+            style={{ marginRight: children ? rem(theme, 8) : '0' }}
             data-testid={testIds.icon}
           >
             {icon}

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -6,14 +6,14 @@ import type { Theme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import type { ToggleGroupProps } from './ToggleGroup.types';
-import { cssLengthToPx } from '../../../tokens/css-units';
-import { asFieldSize, fieldHeight } from '../../../tokens/field-height';
+import { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { controlNeutral } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, remPx, rems } from '../../../tokens/relative';
+import { cssLengthToPx } from '../../../tokens/css-units';
 
-const GLASS_PADDING = 4;
-const GLASS_BORDER = 1;
+/** The glass frame's padding (4px at the design scale); its border is the field hairline. */
+const glassPadding = (theme: Theme): string => rem(theme, 4);
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
@@ -41,6 +41,10 @@ const getColorFromTheme = (theme: Theme, color: string) => {
   };
 };
 
+/** The glass frame's radius: the field radius plus its padding, the buttons' margin and its border. */
+const glassFrameRadius = (theme: Theme): number =>
+  fieldRadius(theme) + remPx(theme, 4) + cssLengthToPx(theme.spacing(0.5), 4) + FIELD_BORDER_WIDTH;
+
 const StyledToggleGroup = styled(ToggleButtonGroup, {
   shouldForwardProp: (prop) => !['customColor', 'customSize', 'glass'].includes(prop as string),
 })<{
@@ -52,13 +56,12 @@ const StyledToggleGroup = styled(ToggleButtonGroup, {
   // around them is inset by its padding, the buttons' margin and its border,
   // and rounds by that much more so the two corners stay concentric.
   const radius = fieldRadius(theme);
-  const inset = GLASS_PADDING + cssLengthToPx(theme.spacing(0.5), 4) + GLASS_BORDER;
   return {
     backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',
-    backdropFilter: glass ? 'blur(20px)' : 'none',
-    borderRadius: glass ? radius + inset : radius,
-    padding: glass ? GLASS_PADDING : 0,
-    border: glass ? `${GLASS_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',
+    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',
+    borderRadius: glass ? glassFrameRadius(theme) : radius,
+    padding: glass ? glassPadding(theme) : 0,
+    border: glass ? `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',
 
     '& .MuiToggleButtonGroup-grouped': {
       margin: theme.spacing(0.5),
@@ -88,11 +91,11 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
     const colorPalette = getColorFromTheme(theme, color);
 
     const sizeMap = {
-      xs: { padding: '4px 8px', fontSize: rem(theme, 12) },
-      sm: { padding: '6px 12px', fontSize: rem(theme, 14) },
-      md: { padding: '8px 16px', fontSize: rem(theme, 16) },
-      lg: { padding: '10px 20px', fontSize: rem(theme, 18) },
-      xl: { padding: '12px 24px', fontSize: rem(theme, 20) },
+      xs: { padding: rems(theme, 4, 8), fontSize: rem(theme, 12) },
+      sm: { padding: rems(theme, 6, 12), fontSize: rem(theme, 14) },
+      md: { padding: rems(theme, 8, 16), fontSize: rem(theme, 16) },
+      lg: { padding: rems(theme, 10, 20), fontSize: rem(theme, 18) },
+      xl: { padding: rems(theme, 12, 24), fontSize: rem(theme, 20) },
     };
 
     return (