@12-apps/ui 6.35.0 → 6.37.0

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;
   }
 `;
 

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)}`,
     }
   : {};