@12-apps/ui 6.36.0 → 6.37.0

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} />

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

@@ -9,11 +9,11 @@ type Variant = NonNullable<MenubarProps['variant']>;
 type Color = NonNullable<MenubarProps['color']>;
 
 const SIZES: Record<Size, (theme: Theme) => CSSObject> = {
-  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) }),
+  xs: (theme) => ({ minHeight: rem(theme, 40), fontSize: rem(theme, 12), padding: theme.spacing(0.5, 1) }),
+  sm: (theme) => ({ minHeight: rem(theme, 48), fontSize: rem(theme, 14), padding: theme.spacing(0.75, 1.5) }),
+  md: (theme) => ({ minHeight: rem(theme, 56), fontSize: rem(theme, 16), padding: theme.spacing(1, 2) }),
+  lg: (theme) => ({ minHeight: rem(theme, 64), fontSize: rem(theme, 18), padding: theme.spacing(1.25, 2.5) }),
+  xl: (theme) => ({ minHeight: rem(theme, 72), fontSize: rem(theme, 20), padding: theme.spacing(1.5, 3) }),
 };
 
 export const sizeStyles = (theme: Theme, size: Size): CSSObject =>
@@ -53,7 +53,7 @@ interface MenubarStyleFlags {
 const SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSObject> = {
   glass: (theme, { glass }) => ({
     backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),
-    backdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
     borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
   }),
 
@@ -69,24 +69,24 @@ const SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSO
   },
 
   elevated: (theme, { blur, elevation }) => ({
-    ...(blur && { backdropFilter: 'blur(10px)' }),
+    ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }),
     boxShadow: theme.shadows[elevation],
   }),
 
-  minimal: (_theme, { blur }) => ({
-    ...(blur && { backdropFilter: 'blur(10px)' }),
+  minimal: (theme, { blur }) => ({
+    ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }),
     boxShadow: 'none',
     borderBottom: 'none',
   }),
 
   bordered: (theme, { blur, color }) => ({
-    ...(blur && { backdropFilter: 'blur(10px)' }),
-    borderBottom: `2px solid ${
+    ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }),
+    borderBottom: `${rem(theme, 2)} solid ${
       color === 'neutral' ? theme.palette.divider : accentFor(theme, color).main
     }`,
   }),
 
-  default: (_theme, { blur }) => ({ ...(blur && { backdropFilter: 'blur(10px)' }) }),
+  default: (theme, { blur }) => ({ ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }) }),
 };
 
 export const barStyles = (theme: Theme, flags: MenubarStyleFlags): CSSObject => {
@@ -98,7 +98,7 @@ export const barStyles = (theme: Theme, flags: MenubarStyleFlags): CSSObject =>
     }),
     ...sizeStyles(theme, size),
     ...colorStyles(theme, color, transparent),
-    ...(glow && { boxShadow: `0 0 20px ${alpha(accentOf(theme, color), 0.4)}` }),
+    ...(glow && { boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentOf(theme, color), 0.4)}` }),
     ...(pulse && {
       animation: 'pulse 2s infinite',
       '@keyframes pulse': {

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

@@ -1,12 +1,13 @@
 import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Toolbar from '@mui/material/Toolbar/index.js';
-import type { CSSObject } from '@mui/material/styles/index.js';
+import { useTheme, type CSSObject } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { MenubarItemView } from './Menubar.item';
 import { MenubarSeparator } from './Menubar.separator';
 import type { MenubarItem, MenubarProps } from './Menubar.types';
+import { rem } from '../../../tokens/relative';
 
 export interface MenubarToolbarProps {
   ariaLabel: string;
@@ -52,6 +53,7 @@ export const MenubarToolbar: React.FC<MenubarToolbarProps> = ({
   onFocus,
   onBlur,
 }) => {
+  const theme = useTheme();
   const isVertical = orientation === 'vertical';
 
   return (
@@ -69,7 +71,7 @@ export const MenubarToolbar: React.FC<MenubarToolbarProps> = ({
       {logo && <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>{logo}</Box>}
 
       {loading ? (
-        <CircularProgress size={20} color="inherit" />
+        <CircularProgress size={rem(theme, 20)} color="inherit" />
       ) : (
         <Box
           sx={{

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

@@ -7,6 +7,7 @@ import Fade from '@mui/material/Fade/index.js';
 import LinearProgress from '@mui/material/LinearProgress/index.js';
 import Stack from '@mui/material/Stack/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';
 import type { FC} from 'react';
 import React, { useMemo } from 'react';
@@ -22,7 +23,7 @@ import {
   SuggestionsList } from './PasswordStrength.helpers';
 import type { PasswordRequirements, PasswordStrengthProps } from './PasswordStrength.types';
 import type { PasswordStrengthCopy } from '../../../copy';
-import { rem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 interface RequirementIconProps {
   met: boolean;
@@ -46,9 +47,9 @@ const pulseAnimation = keyframes`
   }
 `;
 
-const slideInAnimation = keyframes`
+const slideInAnimation = (theme: Theme) => keyframes`
   from {
-    transform: translateX(-10px);
+    transform: translateX(${rem(theme, -10)});
     opacity: 0;
   }
   to {
@@ -63,8 +64,8 @@ const StrengthContainer = styled(Box, {
   width: '100%',
   padding: theme.spacing(2),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
-  backdropFilter: 'blur(10px)',
-  WebkitBackdropFilter: 'blur(10px)',
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   borderRadius: theme.shape.borderRadius * 2,
   transition: animated ? 'all 0.3s ease' : 'none' }));
@@ -85,14 +86,14 @@ const StrengthBar = styled(LinearProgress, {
   };
 
   return {
-    height: 8,
-    borderRadius: 4,
+    height: rem(theme, 8),
+    borderRadius: rem(theme, 4),
     backgroundColor: alpha(theme.palette.action.disabled, 0.1),
     '& .MuiLinearProgress-bar': {
-      borderRadius: 4,
+      borderRadius: rem(theme, 4),
       background: getGradient(),
       transition: animated ? 'all 0.3s ease' : 'none',
-      boxShadow: `0 2px 8px ${alpha(getColor(), 0.3)}` } };
+      boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(getColor(), 0.3)}` } };
 });
 
 const RequirementItem = styled(Box, {
@@ -106,7 +107,7 @@ const RequirementItem = styled(Box, {
     ? alpha(theme.palette.success.main, 0.08)
     : alpha(theme.palette.action.disabled, 0.04),
   transition: animated ? 'all 0.3s ease' : 'none',
-  animation: animated ? `${slideInAnimation} 0.3s ease` : 'none',
+  animation: animated ? `${slideInAnimation(theme)} 0.3s ease` : 'none',
   '& svg': {
     fontSize: rem(theme, 16),
     color: met ? theme.palette.success.main : theme.palette.text.disabled } }));
@@ -140,15 +141,15 @@ const Step = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'active' && prop !== 'completed' && prop !== 'animated' })<{ active: boolean; completed: boolean; animated?: boolean }>(
   ({ theme, active, completed, animated }) => ({
     flex: 1,
-    height: 6,
-    borderRadius: 3,
+    height: rem(theme, 6),
+    borderRadius: rem(theme, 3),
     background: completed
       ? `linear-gradient(90deg, ${theme.palette.success.main} 0%, ${theme.palette.success.light} 100%)`
       : active
         ? `linear-gradient(90deg, ${theme.palette.warning.main} 0%, ${theme.palette.warning.light} 100%)`
         : alpha(theme.palette.action.disabled, 0.2),
     transition: animated ? 'all 0.3s ease' : 'none',
-    boxShadow: completed ? `0 2px 8px ${alpha(theme.palette.success.main, 0.3)}` : 'none' }),
+    boxShadow: completed ? `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.success.main, 0.3)}` : 'none' }),
 );
 
 // The three indicator variants, out of the component body so the render keeps
@@ -166,8 +167,8 @@ const StrengthIndicator: React.FC<{
         <Box sx={{ position: 'relative', display: 'inline-flex' }}>
           <Box
             sx={{
-              width: 80,
-              height: 80,
+              width: sxRem(80),
+              height: sxRem(80),
               borderRadius: '50%',
               background: `conic-gradient(
                 ${theme.palette.success.main} 0deg ${strength * 3.6}deg,
@@ -176,12 +177,12 @@ const StrengthIndicator: React.FC<{
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              boxShadow: `0 4px 12px ${alpha(theme.palette.success.main, strength / 200)}` }}
+              boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.success.main, strength / 200)}` }}
           >
             <Box
               sx={{
-                width: 64,
-                height: 64,
+                width: sxRem(64),
+                height: sxRem(64),
                 borderRadius: '50%',
                 background: theme.palette.background.paper,
                 display: 'flex',

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

@@ -20,7 +20,7 @@ import type { PhoneInputCopy } from '../../../copy';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { fieldControlStyles, fieldTextFieldStyles } from '../../../tokens/field-height';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 // Country data with expanded support
 
@@ -33,8 +33,8 @@ const GlassTextField = styled(TextField)(({ theme }) => ({
   '& .MuiOutlinedInput-root': {
     borderRadius: fieldRadius(theme),
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
-    backdropFilter: 'blur(10px)',
-    WebkitBackdropFilter: 'blur(10px)',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
     border: `1px solid ${fieldEdge(theme)}`,
     transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),
     '&:hover': {
@@ -42,7 +42,7 @@ const GlassTextField = styled(TextField)(({ theme }) => ({
       borderColor: theme.palette.primary.main },
     '&.Mui-focused': {
       background: theme.palette.background.paper,
-      boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.25)}` },
+      boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.25)}` },
     '& fieldset': {
       border: 'none' } },
   '& .MuiInputLabel-root': {
@@ -62,10 +62,10 @@ const CountrySelector = styled(Box)(({ theme }) => ({
 const CountryMenu = styled(Menu)(({ theme }) => ({
   '& .MuiPaper-root': {
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-    backdropFilter: 'blur(20px)',
-    WebkitBackdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
-    maxHeight: 400 } }));
+    maxHeight: rem(theme, 400) } }));
 
 // Helper functions with enhanced validation
 // The text field itself with its two adornments. Split out so PhoneInput is
@@ -138,7 +138,7 @@ const PhoneField: React.FC<{
           endAdornment: <ValidityAdornment icon={icon} isValid={isValid} /> }}
         sx={{
           '& input': {
-            letterSpacing: '0.5px' } }}
+            letterSpacing: sxRem(0.5) } }}
       />
 );
 
@@ -253,7 +253,7 @@ const CountryPicker: React.FC<{
                 '&:hover': {
                   background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)` } }}
             >
-              <ListItemIcon sx={{ minWidth: 36 }}>
+              <ListItemIcon sx={{ minWidth: sxRem(36) }}>
                 <Typography variant="h5" component="span">
                   {country.flag}
                 </Typography>

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

@@ -1,21 +1,24 @@
 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;
   }
 `;
 
-export const slideAnimation = keyframes`
+export const slideAnimation = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(-20px);
+    transform: translateX(${rem(theme, -20)});
   }
   to {
     opacity: 1;