@12-apps/ui 6.36.0 → 6.38.0

package/src/components/navigation/Tabs/TabsPanel.tsx

@@ -1,10 +1,11 @@
 import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Fade from '@mui/material/Fade/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { TabPanelProps } from './Tabs.types';
+import { rem } from '../../../tokens/relative';
 
 const TabPanel = styled(Box, {
   shouldForwardProp: (prop) => !['animate', 'persist'].includes(prop as string),
@@ -26,10 +27,16 @@ const LoadingContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  minHeight: 200,
+  minHeight: rem(theme, 200),
   color: theme.palette.text.secondary,
 }));
 
+/** The fallback spinner — a component so it can read the theme its size scales with. */
+const PanelSpinner: React.FC = () => {
+  const theme = useTheme();
+  return <CircularProgress size={rem(theme, 32)} />;
+};
+
 // A loading panel shows the caller's placeholder, or a spinner if there isn't one.
 const panelContent = (
   loading: boolean,
@@ -41,7 +48,7 @@ const panelContent = (
   return (
     loadingComponent || (
       <LoadingContainer>
-        <CircularProgress size={32} />
+        <PanelSpinner />
       </LoadingContainer>
     )
   );

package/src/components/typography/Blockquote/Blockquote.tsx

@@ -51,19 +51,19 @@ const StyledBlockquote = styled('blockquote', {
     return {
       ...baseStyles,
       padding: theme.spacing(3),
-      border: `2px solid ${alpha(colorPalette.main, 0.2)}`,
+      border: `${rem(theme, 2)} solid ${alpha(colorPalette.main, 0.2)}`,
       borderRadius: theme.shape.borderRadius * 2,
       backgroundColor: alpha(colorPalette.main, 0.03),
       '&::before': {
         content: '""',
         position: 'absolute',
-        top: -1,
-        left: -1,
-        right: -1,
-        bottom: -1,
+        top: rem(theme, -1),
+        left: rem(theme, -1),
+        right: rem(theme, -1),
+        bottom: rem(theme, -1),
         background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,
         borderRadius: theme.shape.borderRadius * 2,
-        padding: '2px',
+        padding: rem(theme, 2),
         WebkitMask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
         WebkitMaskComposite: 'exclude',
         mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
@@ -80,7 +80,7 @@ const StyledBlockquote = styled('blockquote', {
         theme.palette.mode === 'dark'
           ? alpha(theme.palette.background.paper, 0.8)
           : alpha(neutralTones(theme).canvas, 0.95),
-      backdropFilter: theme.palette.mode === 'dark' ? 'blur(10px)' : 'none',
+      backdropFilter: theme.palette.mode === 'dark' ? `blur(${rem(theme, 10)})` : 'none',
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
       borderRadius: theme.shape.borderRadius * 2,
       boxShadow: theme.palette.mode === 'dark' ? theme.shadows[4] : 'none',
@@ -92,7 +92,7 @@ const StyledBlockquote = styled('blockquote', {
   return {
     ...baseStyles,
     paddingLeft: theme.spacing(3),
-    borderLeft: `4px solid ${colorPalette.main}`,
+    borderLeft: `${rem(theme, 4)} solid ${colorPalette.main}`,
     backgroundColor: alpha(colorPalette.main, 0.05),
     padding: theme.spacing(2, 3),
     borderRadius: theme.shape.borderRadius,

package/src/components/typography/Code/Code.tsx

@@ -8,7 +8,7 @@ import React, { useState } from 'react';
 
 import type { CodeProps } from './Code.types';
 import { modeInk, neutralTones } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 const StyledCodeContainer = styled(Box, {
   shouldForwardProp: (prop) =>
@@ -21,17 +21,17 @@ const StyledCodeContainer = styled(Box, {
 }>(({ theme, customVariant = 'inline', customSize = 'md', copyable }) => {
   // Size mapping
   const sizeMap = {
-    xs: { fontSize: rem(theme, 12), padding: '2px 4px' },
-    sm: { fontSize: rem(theme, 13), padding: '3px 6px' },
-    md: { fontSize: rem(theme, 14), padding: '4px 8px' },
-    lg: { fontSize: rem(theme, 16), padding: '6px 12px' },
+    xs: { fontSize: rem(theme, 12), padding: rems(theme, 2, 4) },
+    sm: { fontSize: rem(theme, 13), padding: rems(theme, 3, 6) },
+    md: { fontSize: rem(theme, 14), padding: rems(theme, 4, 8) },
+    lg: { fontSize: rem(theme, 16), padding: rems(theme, 6, 12) },
   };
 
   const blockSizeMap = {
-    xs: { fontSize: rem(theme, 12), padding: '8px 12px' },
-    sm: { fontSize: rem(theme, 13), padding: '12px 16px' },
-    md: { fontSize: rem(theme, 14), padding: '16px 20px' },
-    lg: { fontSize: rem(theme, 16), padding: '20px 24px' },
+    xs: { fontSize: rem(theme, 12), padding: rems(theme, 8, 12) },
+    sm: { fontSize: rem(theme, 13), padding: rems(theme, 12, 16) },
+    md: { fontSize: rem(theme, 14), padding: rems(theme, 16, 20) },
+    lg: { fontSize: rem(theme, 16), padding: rems(theme, 20, 24) },
   };
 
   const baseStyles = {
@@ -67,7 +67,7 @@ const StyledCodeContainer = styled(Box, {
       ...blockSizeMap[customSize as keyof typeof blockSizeMap],
       ...(copyable && {
         paddingTop: blockSizeMap[customSize as keyof typeof blockSizeMap].padding.split(' ')[0],
-        paddingRight: '60px',
+        paddingRight: rem(theme, 60),
       }),
     },
     highlight: {
@@ -76,13 +76,13 @@ const StyledCodeContainer = styled(Box, {
       background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.secondary.main, 0.1)} 100%)`,
       color: theme.palette.text.primary,
       border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-      borderLeft: `4px solid ${theme.palette.primary.main}`,
+      borderLeft: `${rem(theme, 4)} solid ${theme.palette.primary.main}`,
       overflow: 'auto',
       whiteSpace: 'pre' as const,
       ...blockSizeMap[customSize as keyof typeof blockSizeMap],
       ...(copyable && {
         paddingTop: blockSizeMap[customSize as keyof typeof blockSizeMap].padding.split(' ')[0],
-        paddingRight: '60px',
+        paddingRight: rem(theme, 60),
       }),
     },
   };
@@ -105,13 +105,13 @@ const CopyButton = styled(IconButton)(({ theme }) => ({
   position: 'absolute',
   top: theme.spacing(1),
   right: theme.spacing(1),
-  width: 32,
-  height: 32,
+  width: rem(theme, 32),
+  height: rem(theme, 32),
   backgroundColor:
     theme.palette.mode === 'dark'
       ? alpha(theme.palette.background.paper, 0.8)
       : theme.palette.background.paper,
-  backdropFilter: theme.palette.mode === 'dark' ? 'blur(8px)' : 'none',
+  backdropFilter: theme.palette.mode === 'dark' ? `blur(${rem(theme, 8)})` : 'none',
   border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : 'none',
   '&:hover': {
@@ -137,9 +137,9 @@ const LanguageLabel = styled(Box)(({ theme }) => ({
     theme.palette.mode === 'dark'
       ? alpha(theme.palette.background.paper, 0.8)
       : theme.palette.background.paper,
-  padding: '2px 8px',
+  padding: rems(theme, 2, 8),
   borderRadius: theme.shape.borderRadius / 2,
-  backdropFilter: theme.palette.mode === 'dark' ? 'blur(8px)' : 'none',
+  backdropFilter: theme.palette.mode === 'dark' ? `blur(${rem(theme, 8)})` : 'none',
   border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : 'none',
 }));

package/src/components/typography/Text/Text.tsx

@@ -22,7 +22,7 @@ import {
 import type { TextProps } from './Text.types';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import type { ColorValue } from '../../../tokens/scales';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 import type { UiTypeStep } from '../../../tokens/theme';
 
 const getColorFromTheme = (theme: Theme, color: ColorValue): string => {
@@ -120,7 +120,7 @@ const textVariantStyles = (theme: Theme, a: TextStyleArgs, base: CSSObject): CSS
         fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Courier New", monospace',
         fontSize: sizeOverride(theme, a.customSize, CODE_FONT_SIZE),
         backgroundColor: alpha(theme.palette.primary.main, CODE_BACKGROUND_ALPHA),
-        padding: `${CODE_PADDING.vertical}px ${CODE_PADDING.horizontal}px`,
+        padding: rems(theme, CODE_PADDING.vertical, CODE_PADDING.horizontal),
         borderRadius: theme.shape.borderRadius * CODE_RADIUS_FACTOR,
         border: `1px solid ${alpha(theme.palette.primary.main, CODE_BORDER_ALPHA)}`,
       };

package/src/components/utility/AnimatedIcon/AnimatedIcon.animations.ts

@@ -1,4 +1,7 @@
 import { keyframes } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
+
+import { rem } from '../../../tokens/relative';
 
 export const rotateAnimation = keyframes`
   from {
@@ -24,61 +27,61 @@ export const pulseAnimation = keyframes`
   }
 `;
 
-export const translateAnimation = keyframes`
+export const translateAnimation = (theme: Theme) => keyframes`
   0% {
     transform: translateY(0px);
   }
   50% {
-    transform: translateY(-8px);
+    transform: translateY(${rem(theme, -8)});
   }
   100% {
     transform: translateY(0px);
   }
 `;
 
-export const glowPulseAnimation = keyframes`
+export const glowPulseAnimation = (theme: Theme) => keyframes`
   0% {
-    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor, 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 15)} currentColor;
   }
   50% {
-    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
+    box-shadow: 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 20)} currentColor, 0 0 ${rem(theme, 30)} currentColor;
   }
   100% {
-    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor, 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 15)} currentColor;
   }
 `;
 
 // New animation keyframes
-export const bounceAnimation = keyframes`
+export const bounceAnimation = (theme: Theme) => keyframes`
   0%, 20%, 50%, 80%, 100% {
     transform: translateY(0);
   }
   40% {
-    transform: translateY(-20px);
+    transform: translateY(${rem(theme, -20)});
   }
   60% {
-    transform: translateY(-10px);
+    transform: translateY(${rem(theme, -10)});
   }
 `;
 
-export const shakeAnimation = keyframes`
+export const shakeAnimation = (theme: Theme) => keyframes`
   0%, 100% {
     transform: translateX(0);
   }
   10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-4px);
+    transform: translateX(${rem(theme, -4)});
   }
   20%, 40%, 60%, 80% {
-    transform: translateX(4px);
+    transform: translateX(${rem(theme, 4)});
   }
 `;
 
-export const flipAnimation = keyframes`
+export const flipAnimation = (theme: Theme) => keyframes`
   0% {
-    transform: perspective(400px) rotateY(0);
+    transform: perspective(${rem(theme, 400)}) rotateY(0);
   }
   100% {
-    transform: perspective(400px) rotateY(360deg);
+    transform: perspective(${rem(theme, 400)}) rotateY(360deg);
   }
 `;
 
@@ -121,24 +124,24 @@ export const heartbeatAnimation = keyframes`
   }
 `;
 
-export const wobbleAnimation = keyframes`
+export const wobbleAnimation = (theme: Theme) => keyframes`
   0%, 100% {
     transform: translateX(0) rotate(0deg);
   }
   15% {
-    transform: translateX(-10px) rotate(-5deg);
+    transform: translateX(${rem(theme, -10)}) rotate(-5deg);
   }
   30% {
-    transform: translateX(8px) rotate(3deg);
+    transform: translateX(${rem(theme, 8)}) rotate(3deg);
   }
   45% {
-    transform: translateX(-6px) rotate(-3deg);
+    transform: translateX(${rem(theme, -6)}) rotate(-3deg);
   }
   60% {
-    transform: translateX(4px) rotate(2deg);
+    transform: translateX(${rem(theme, 4)}) rotate(2deg);
   }
   75% {
-    transform: translateX(-2px) rotate(-1deg);
+    transform: translateX(${rem(theme, -2)}) rotate(-1deg);
   }
 `;
 
@@ -179,15 +182,15 @@ export const swingAnimation = keyframes`
   }
 `;
 
-export const floatAnimation = keyframes`
+export const floatAnimation = (theme: Theme) => keyframes`
   0%, 100% {
     transform: translateY(0) translateX(0);
   }
   33% {
-    transform: translateY(-10px) translateX(-5px);
+    transform: translateY(${rem(theme, -10)}) translateX(${rem(theme, -5)});
   }
   66% {
-    transform: translateY(5px) translateX(5px);
+    transform: translateY(${rem(theme, 5)}) translateX(${rem(theme, 5)});
   }
 `;
 
@@ -217,46 +220,46 @@ export const rippleAnimation = keyframes`
   }
 `;
 
-export const neonFlickerAnimation = keyframes`
+export const neonFlickerAnimation = (theme: Theme) => keyframes`
   0%, 100% {
     opacity: 1;
-    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+    filter: brightness(1) drop-shadow(0 0 ${rem(theme, 10)} currentColor);
   }
   10% {
     opacity: 0.8;
-    filter: brightness(0.8) drop-shadow(0 0 5px currentColor);
+    filter: brightness(0.8) drop-shadow(0 0 ${rem(theme, 5)} currentColor);
   }
   20% {
     opacity: 1;
-    filter: brightness(1.2) drop-shadow(0 0 15px currentColor);
+    filter: brightness(1.2) drop-shadow(0 0 ${rem(theme, 15)} currentColor);
   }
   30% {
     opacity: 0.9;
-    filter: brightness(0.9) drop-shadow(0 0 8px currentColor);
+    filter: brightness(0.9) drop-shadow(0 0 ${rem(theme, 8)} currentColor);
   }
   40% {
     opacity: 1;
-    filter: brightness(1.1) drop-shadow(0 0 12px currentColor);
+    filter: brightness(1.1) drop-shadow(0 0 ${rem(theme, 12)} currentColor);
   }
   50% {
     opacity: 0.95;
-    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+    filter: brightness(1) drop-shadow(0 0 ${rem(theme, 10)} currentColor);
   }
   60% {
     opacity: 0.85;
-    filter: brightness(0.85) drop-shadow(0 0 6px currentColor);
+    filter: brightness(0.85) drop-shadow(0 0 ${rem(theme, 6)} currentColor);
   }
   70% {
     opacity: 1;
-    filter: brightness(1.15) drop-shadow(0 0 14px currentColor);
+    filter: brightness(1.15) drop-shadow(0 0 ${rem(theme, 14)} currentColor);
   }
   80% {
     opacity: 0.9;
-    filter: brightness(0.95) drop-shadow(0 0 9px currentColor);
+    filter: brightness(0.95) drop-shadow(0 0 ${rem(theme, 9)} currentColor);
   }
   90% {
     opacity: 1;
-    filter: brightness(1.05) drop-shadow(0 0 11px currentColor);
+    filter: brightness(1.05) drop-shadow(0 0 ${rem(theme, 11)} currentColor);
   }
 `;
 

package/src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts

@@ -23,15 +23,15 @@ import {
 } from './AnimatedIcon.animations';
 import type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';
 import { neutralTones, shadowInk, sheen } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 /** Per size: the ring's edge and the glyph's edge (its font size, width and height), in design px. */
-export const sizeConfigs: Record<AnimationSize, { size: number; glyph: number }> = {
-  xs: { size: 12, glyph: 10 },
-  sm: { size: 24, glyph: 20 },
-  md: { size: 32, glyph: 28 },
-  lg: { size: 48, glyph: 44 },
-  xl: { size: 64, glyph: 60 },
+export const sizeConfigs: Record<AnimationSize, { ring: number; glyph: number }> = {
+  xs: { ring: 12, glyph: 10 },
+  sm: { ring: 24, glyph: 20 },
+  md: { ring: 32, glyph: 28 },
+  lg: { ring: 48, glyph: 44 },
+  xl: { ring: 64, glyph: 60 },
 };
 
 /**
@@ -40,26 +40,27 @@ export const sizeConfigs: Record<AnimationSize, { size: number; glyph: number }>
  * tabulated. `scale` multiplies the caller's duration for the variants that
  * read as slower than the rest.
  */
-const ANIMATIONS: Record<string, { keyframes: string; easing: string; scale: number }> = {
-  rotate: { keyframes: `${rotateAnimation}`, easing: 'linear', scale: 1 },
-  pulse: { keyframes: `${pulseAnimation}`, easing: 'ease-in-out', scale: 1 },
-  translate: { keyframes: `${translateAnimation}`, easing: 'ease-in-out', scale: 1 },
-  bounce: { keyframes: `${bounceAnimation}`, easing: 'ease-in-out', scale: 1 },
-  shake: { keyframes: `${shakeAnimation}`, easing: 'ease-in-out', scale: 1 },
-  flip: { keyframes: `${flipAnimation}`, easing: 'ease-in-out', scale: 1 },
-  spin: { keyframes: `${spinAnimation}`, easing: 'ease-in-out', scale: 1 },
-  fadeInOut: { keyframes: `${fadeInOutAnimation}`, easing: 'ease-in-out', scale: 1 },
-  heartbeat: { keyframes: `${heartbeatAnimation}`, easing: 'ease-in-out', scale: 1 },
-  wobble: { keyframes: `${wobbleAnimation}`, easing: 'ease-in-out', scale: 1 },
-  morph: { keyframes: `${morphAnimation}`, easing: 'ease-in-out', scale: 1 },
-  swing: { keyframes: `${swingAnimation}`, easing: 'ease-in-out', scale: 1 },
-  jello: { keyframes: `${jelloAnimation}`, easing: 'ease-in-out', scale: 1 },
-  float: { keyframes: `${floatAnimation}`, easing: 'ease-in-out', scale: 2 },
-  neonFlicker: { keyframes: `${neonFlickerAnimation}`, easing: 'ease-in-out', scale: 2 },
-  breathe: { keyframes: `${breatheAnimation}`, easing: 'ease-in-out', scale: 1.5 },
+const ANIMATIONS: Record<string, { keyframes: (theme: Theme) => string; easing: string; scale: number }> = {
+  rotate: { keyframes: () => `${rotateAnimation}`, easing: 'linear', scale: 1 },
+  pulse: { keyframes: () => `${pulseAnimation}`, easing: 'ease-in-out', scale: 1 },
+  translate: { keyframes: (theme) => `${translateAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },
+  bounce: { keyframes: (theme) => `${bounceAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },
+  shake: { keyframes: (theme) => `${shakeAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },
+  flip: { keyframes: (theme) => `${flipAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },
+  spin: { keyframes: () => `${spinAnimation}`, easing: 'ease-in-out', scale: 1 },
+  fadeInOut: { keyframes: () => `${fadeInOutAnimation}`, easing: 'ease-in-out', scale: 1 },
+  heartbeat: { keyframes: () => `${heartbeatAnimation}`, easing: 'ease-in-out', scale: 1 },
+  wobble: { keyframes: (theme) => `${wobbleAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },
+  morph: { keyframes: () => `${morphAnimation}`, easing: 'ease-in-out', scale: 1 },
+  swing: { keyframes: () => `${swingAnimation}`, easing: 'ease-in-out', scale: 1 },
+  jello: { keyframes: () => `${jelloAnimation}`, easing: 'ease-in-out', scale: 1 },
+  float: { keyframes: (theme) => `${floatAnimation(theme)}`, easing: 'ease-in-out', scale: 2 },
+  neonFlicker: { keyframes: (theme) => `${neonFlickerAnimation(theme)}`, easing: 'ease-in-out', scale: 2 },
+  breathe: { keyframes: () => `${breatheAnimation}`, easing: 'ease-in-out', scale: 1.5 },
 };
 
 const animationFor = (
+  theme: Theme,
   variant: AnimationVariant,
   duration: number,
   delay: number,
@@ -69,14 +70,14 @@ const animationFor = (
   if (!spec) return 'none';
 
   const iterationCount = loop ? 'infinite' : '1';
-  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : '0s'}`;
+  return `${spec.keyframes(theme)} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : '0s'}`;
 };
 
 const SHADOWS: Record<string, (theme: Theme) => string> = {
-  soft: (theme) => `0 4px 20px ${shadowInk(theme, 0.15)}`,
-  hard: (theme) => `4px 4px 0px ${shadowInk(theme, 0.25)}`,
+  soft: (theme) => `0 ${rems(theme, 4, 20)} ${shadowInk(theme, 0.15)}`,
+  hard: (theme) => `${rems(theme, 4, 4)} 0px ${shadowInk(theme, 0.25)}`,
   elevated: (theme) =>
-    `0 10px 40px ${shadowInk(theme, 0.2)}, 0 2px 10px ${shadowInk(theme, 0.1)}`,
+    `0 ${rems(theme, 10, 40)} ${shadowInk(theme, 0.2)}, 0 ${rems(theme, 2, 10)} ${shadowInk(theme, 0.1)}`,
 };
 
 export interface IconStyleFlags {
@@ -114,9 +115,9 @@ const effectStyles = (
   return {
     ...($glass && {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,
-      backdropFilter: 'blur(10px)',
+      backdropFilter: `blur(${rem(theme, 10)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-      boxShadow: `inset 0 1px 1px ${sheen(theme, 0.3)}, 0 8px 32px ${shadowInk(theme, 0.1)}`,
+      boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, 0.3)}, 0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.1)}`,
     }),
     ...($metallic && {
       background: `linear-gradient(145deg,
@@ -127,9 +128,9 @@ const effectStyles = (
       ${neutralTones(theme).subtle} 100%)`,
       backgroundSize: '200% 200%',
       animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,
-      boxShadow: `inset 0 2px 4px ${sheen(theme, 0.5)},
-                inset 0 -2px 4px ${shadowInk(theme, 0.3)},
-                0 4px 8px ${shadowInk(theme, 0.2)}`,
+      boxShadow: `inset 0 ${rems(theme, 2, 4)} ${sheen(theme, 0.5)},
+                inset 0 ${rems(theme, -2, 4)} ${shadowInk(theme, 0.3)},
+                0 ${rems(theme, 4, 8)} ${shadowInk(theme, 0.2)}`,
     }),
     ...($gradient && {
       background: `linear-gradient(135deg,
@@ -140,9 +141,9 @@ const effectStyles = (
     }),
     ...($neon && {
       color,
-      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
+      textShadow: `0 0 ${rem(theme, 10)} ${color}, 0 0 ${rem(theme, 20)} ${color}, 0 0 ${rem(theme, 30)} ${color}`,
       filter: `brightness(1.2) contrast(1.2)`,
-      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`,
+      animation: `${animation}, ${neonFlickerAnimation(theme)} 3s ease-in-out infinite`,
     }),
     ...($holographic && {
       background: `linear-gradient(45deg,
@@ -152,7 +153,7 @@ const effectStyles = (
       ${theme.palette.warning.main} 75%,
       ${theme.palette.primary.main} 100%)`,
       backgroundSize: '400% 400%',
-      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,
+      animation: `${animation}, ${floatAnimation(theme)} 6s ease-in-out infinite`,
       backgroundClip: 'text',
       WebkitBackgroundClip: 'text',
       WebkitTextFillColor: 'transparent',
@@ -164,10 +165,10 @@ const effectStyles = (
       '&::before': {
         content: '""',
         position: 'absolute' as const,
-        inset: -2,
+        inset: rem(theme, -2),
         borderRadius: '50%',
         background: 'inherit',
-        filter: 'blur(10px)',
+        filter: `blur(${rem(theme, 10)})`,
         opacity: 0.5,
         zIndex: -1,
       },
@@ -183,18 +184,22 @@ export const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {
 
   const color = $customColor || theme.palette.primary.main;
   const glowColor = $glowColor || color;
-  const animation = animationFor($animationVariant, $duration, $delay, $loop);
+  const animation = animationFor(theme, $animationVariant, $duration, $delay, $loop);
 
   // Both selectors size the same glyph — MUI icons render an MuiSvgIcon-root,
   // a bare child renders an svg.
-  const glyphSize = { fontSize: rem(theme, $fontSize), width: $fontSize, height: $fontSize };
+  const glyphSize = {
+    fontSize: rem(theme, $fontSize),
+    width: rem(theme, $fontSize),
+    height: rem(theme, $fontSize),
+  };
 
   return {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: $size,
-    height: $size,
+    width: rem(theme, $size),
+    height: rem(theme, $size),
     color,
     animation,
     position: 'relative' as const,
@@ -206,13 +211,13 @@ export const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {
       '&::before': {
         content: '""',
         position: 'absolute' as const,
-        inset: -8,
+        inset: rem(theme, -8),
         borderRadius: '50%',
         background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,
-        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,
+        animation: `${glowPulseAnimation(theme)} ${$duration * 1.2}s ease-in-out infinite`,
         zIndex: -1,
       },
-      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`,
+      filter: `drop-shadow(0 0 ${rem(theme, 8)} ${alpha(glowColor, 0.5)})`,
     }),
     ...effectStyles(theme, flags, animation, color),
     ...($ripple && {
@@ -221,7 +226,7 @@ export const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {
         position: 'absolute' as const,
         inset: 0,
         borderRadius: '50%',
-        border: `2px solid ${color}`,
+        border: `${rem(theme, 2)} solid ${color}`,
         animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`,
       },
     }),

package/src/components/utility/AnimatedIcon/AnimatedIcon.tsx

@@ -42,7 +42,7 @@ export const AnimatedIcon: FC<AnimatedIconProps> = (props) => {
 
   return (
     <AnimationContainer
-      $size={config.size}
+      $size={config.ring}
       $fontSize={config.glyph}
       $animationVariant={variant}
       $duration={duration}

package/src/components/utility/AspectRatio/AspectRatio.tsx

@@ -1,7 +1,18 @@
 import Box from '@mui/material/Box/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { AspectRatioProps } from './AspectRatio.types';
+import { rem } from '../../../tokens/relative';
+
+/**
+ * A caller's cap for `sx`: a string as given, a number as design px — except
+ * `≤ 1`, which `sx` has always read as a fraction of the parent.
+ */
+const sxCap = (value: number | string | undefined): string | undefined | ((theme: Theme) => string) =>
+  typeof value === 'number'
+    ? (theme) => (value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value))
+    : value;
 
 export const AspectRatio: React.FC<AspectRatioProps> = ({
   children,
@@ -42,8 +53,8 @@ export const AspectRatio: React.FC<AspectRatioProps> = ({
       sx={{
         position: 'relative',
         width: '100%',
-        maxWidth,
-        maxHeight,
+        maxWidth: sxCap(maxWidth),
+        maxHeight: sxCap(maxHeight),
         ...sx,
       }}
       {...props}