@12-apps/ui 6.35.0 → 6.37.0

package/src/components/data-display/Alert/Alert.styles.tsx

@@ -32,17 +32,17 @@ import {
   SEMANTIC_VARIANTS,
 } from './Alert.metrics';
 import type { IconName } from '../../../icons/Icon.types';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 export type { AlertPalette } from './Alert.metrics';
 
-export const pulseAnimation = keyframes`
+export const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 ${PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -82,19 +82,19 @@ export const pulseAnimation = keyframes`
 
 // Removed unused slideInAnimation - can be re-added if needed for future features
 
-export const shimmerAnimation = keyframes`
+export const shimmerAnimation = (theme: Theme) => keyframes`
   0% {
-    background-position: -${GRADIENT.shimmerTravel}px 0;
+    background-position: ${rem(theme, -GRADIENT.shimmerTravel)} 0;
   }
   100% {
-    background-position: ${GRADIENT.shimmerTravel}px 0;
+    background-position: ${rem(theme, GRADIENT.shimmerTravel)} 0;
   }
 `;
 
-export const fadeInScale = keyframes`
+export const fadeInScale = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: scale(${FADE_IN.scale}) translateY(-${FADE_IN.lift}px);
+    transform: scale(${FADE_IN.scale}) translateY(${rem(theme, -FADE_IN.lift)});
   }
   to {
     opacity: 1;
@@ -296,8 +296,8 @@ export const alertVariantStyles = (
     // be mostly pane — the backdrop should be legible AS texture behind the
     // text, never as competition with it.
     backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),
-    backdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,
-    WebkitBackdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,
+    backdropFilter: `blur(${rem(theme, GLASS.blur)}) saturate(${GLASS.saturatePercent}%)`,
+    WebkitBackdropFilter: `blur(${rem(theme, GLASS.blur)}) saturate(${GLASS.saturatePercent}%)`,
     border: `1px solid ${alpha(theme.palette.divider, GLASS.borderAlpha)}`,
     color: theme.palette.text.primary,
     '.MuiAlert-icon': {
@@ -307,7 +307,7 @@ export const alertVariantStyles = (
     // alpha with nothing blurred behind it — the see-through banner this is
     // fixing. There is no degraded frost to fall back to, so it falls back to an
     // opaque pane: less pretty, still readable.
-    '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {
+    [`@supports not ((backdrop-filter: blur(${rem(theme, 1)})) or (-webkit-backdrop-filter: blur(${rem(theme, 1)})))`]: {
       backgroundColor: theme.palette.background.paper,
     },
   }),
@@ -325,26 +325,26 @@ export const alertVariantStyles = (
       content: '""',
       position: 'absolute',
       top: 0,
-      left: `-${GRADIENT.shimmerTravel}px`,
+      left: rem(theme, -GRADIENT.shimmerTravel),
       width: '100%',
       height: '100%',
       background: `linear-gradient(90deg, transparent, ${sheen(theme, GRADIENT.shimmerAlpha)}, transparent)`,
-      animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`,
+      animation: `${shimmerAnimation(theme)} ${seconds(GRADIENT.shimmerMs)} infinite`,
     },
   }),
 });
 
 /** The web's glow: a soft shadow of the hue and a touch of brightness. */
-const glowStyles = (colorPalette: AlertPalette): CSSObject => ({
+const glowStyles = (theme: Theme, colorPalette: AlertPalette): CSSObject => ({
   // No `!important`: the pointer states paint their tint as an INSET shadow on
   // the same property, and compose this one alongside it rather than fighting
   // it. `glowShadow` in `Alert.tsx` is the other half of that pair.
-  boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,
+  boxShadow: `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`,
   filter: `brightness(${GLOW.brightness})`,
 });
 
 /** The web's pulse: a wash of the hue over the whole card, fading out every two seconds. */
-const pulseAfter = (colorPalette: AlertPalette): CSSObject => ({
+const pulseAfter = (theme: Theme, colorPalette: AlertPalette): CSSObject => ({
   content: '""',
   position: 'absolute',
   top: 0,
@@ -354,7 +354,7 @@ const pulseAfter = (colorPalette: AlertPalette): CSSObject => ({
   borderRadius: 'inherit',
   backgroundColor: colorPalette.main,
   opacity: PULSE.alpha,
-  animation: `${pulseAnimation} ${seconds(PULSE.ms)} infinite`,
+  animation: `${pulseAnimation(theme)} ${seconds(PULSE.ms)} infinite`,
   pointerEvents: 'none',
   zIndex: -1,
 });
@@ -364,24 +364,25 @@ const pulseAfter = (colorPalette: AlertPalette): CSSObject => ({
 // leak into the glow+pulse case. Declaration ORDER is kept as it has always
 // been, because emotion hashes the serialised block into the class name.
 export const alertEmphasisStyles = (
+  theme: Theme,
   colorPalette: AlertPalette,
   glow: boolean,
   pulse: boolean,
 ): CSSObject => ({
-  ...(glow && !pulse && glowStyles(colorPalette)),
+  ...(glow && !pulse && glowStyles(theme, colorPalette)),
 
   // Pulse animation
   ...(pulse &&
     !glow && {
       position: 'relative',
-      '&::after': pulseAfter(colorPalette),
+      '&::after': pulseAfter(theme, colorPalette),
     }),
 
   // Both glow and pulse
   ...(glow &&
     pulse && {
       position: 'relative',
-      ...glowStyles(colorPalette),
-      '&::after': pulseAfter(colorPalette),
+      ...glowStyles(theme, colorPalette),
+      '&::after': pulseAfter(theme, colorPalette),
     }),
 });

package/src/components/data-display/Alert/Alert.tsx

@@ -39,7 +39,7 @@ import {
 import type { AlertColor } from '@mui/material/Alert/index.js';
 import type { AlertProps } from './Alert.types';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
-import { sxRem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 const transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;
 
@@ -73,7 +73,7 @@ function pointerShadow(
   // so for them the two rules agree.
   const ink = variant === 'gradient' ? absoluteInk(theme).black : modeInk(theme);
   const glowShadow = glow
-    ? `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`
+    ? `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`
     : null;
   return (alpha_) =>
     [`inset 0 0 0 100vmax ${alpha(ink, alpha_)}`, glowShadow].filter(Boolean).join(', ');
@@ -98,7 +98,7 @@ const StyledAlert = styled(MuiAlert, {
     transition: `${transition}, box-shadow ${seconds(ACTIVE.ms)} ${ALERT_EASING}`,
     position: 'relative',
     overflow: 'hidden',
-    animation: animate ? `${fadeInScale} ${seconds(FADE_IN.ms)} ease-out` : 'none',
+    animation: animate ? `${fadeInScale(theme)} ${seconds(FADE_IN.ms)} ease-out` : 'none',
     willChange: 'transform, opacity',
 
     ...alertLayoutStyles(theme, colorPalette, animate),
@@ -156,12 +156,12 @@ const StyledAlert = styled(MuiAlert, {
     // every keyboard focus, and it would also outrank the root's opacity
     // transition the way the hover block did.
     '&:focus-visible': {
-      outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
-      outlineOffset: `${FOCUS.offset}px`,
+      outline: `${rem(theme, FOCUS.ringWidth)} solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
+      outlineOffset: rem(theme, FOCUS.offset),
     },
 
     ...alertVariantStyles(theme, customVariant, colorPalette),
-    ...alertEmphasisStyles(colorPalette, Boolean(glow), Boolean(pulse)),
+    ...alertEmphasisStyles(theme, colorPalette, Boolean(glow), Boolean(pulse)),
   };
 });
 
@@ -262,8 +262,8 @@ const AlertCloseButton: React.FC<{ dataTestId?: string; label: string; onClose:
         // translucent surface's contrast depends on what sits behind it, which
         // is why that test stops where it does and why this comment does not
         // borrow a guarantee it never made.
-        outline: `${FOCUS.ringWidth}px solid currentColor`,
-        outlineOffset: `${FOCUS.offset}px`,
+        outline: `${rem(theme, FOCUS.ringWidth)} solid currentColor`,
+        outlineOffset: rem(theme, FOCUS.offset),
         backgroundColor: alpha(theme.palette.action.focus, CLOSE_BUTTON.washAlpha),
       },
     })}

package/src/components/data-display/AlertDialog/AlertDialog.tsx

@@ -11,22 +11,23 @@ import DialogContentText from '@mui/material/DialogContentText/index.js';
 import DialogTitle from '@mui/material/DialogTitle/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
+import { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { neutralTones } from '../../../tokens/ink';
 
 import type { AlertDialogProps } from './AlertDialog.types';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } 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 15px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 15)} currentColor;
     opacity: 0;
   }
   100% {
@@ -71,13 +72,13 @@ const StyledDialog = styled(Dialog, {
 
     ...(customVariant === '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)}`,
     }),
 
     // Glow effect
     ...(glow && !pulse && {
-      boxShadow: `0 0 30px 10px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+      boxShadow: `0 0 ${rems(theme, 30, 10)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
       filter: 'brightness(1.05)',
     }),
 
@@ -94,7 +95,7 @@ const StyledDialog = styled(Dialog, {
         borderRadius: 'inherit',
         backgroundColor: theme.palette.primary.main,
         opacity: 0.1,
-        animation: `${pulseAnimation} 2s infinite`,
+        animation: `${pulseAnimation(theme)} 2s infinite`,
         pointerEvents: 'none',
         zIndex: -1,
       },
@@ -103,7 +104,7 @@ const StyledDialog = styled(Dialog, {
     // Both glow and pulse
     ...(glow && pulse && {
       position: 'relative',
-      boxShadow: `0 0 30px 10px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+      boxShadow: `0 0 ${rems(theme, 30, 10)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
       filter: 'brightness(1.05)',
       '&::after': {
         content: '""',
@@ -115,7 +116,7 @@ const StyledDialog = styled(Dialog, {
         borderRadius: 'inherit',
         backgroundColor: theme.palette.primary.main,
         opacity: 0.1,
-        animation: `${pulseAnimation} 2s infinite`,
+        animation: `${pulseAnimation(theme)} 2s infinite`,
         pointerEvents: 'none',
         zIndex: -1,
       },
@@ -263,6 +264,7 @@ function AlertDialogFooter({
   onConfirm: () => void;
   dataTestId: string;
 }): React.ReactElement {
+  const theme = useTheme();
   return (
     <StyledDialogActions data-testid={`${dataTestId}-actions`}>
       {showCancel && (
@@ -285,7 +287,7 @@ function AlertDialogFooter({
         startIcon={
           loading ? (
             <CircularProgress
-              size={16}
+              size={rem(theme, 16)}
               color="inherit"
               data-testid={`${dataTestId}-loading-spinner`}
             />

package/src/components/data-display/Avatar/Avatar.animations.ts

@@ -1,12 +1,15 @@
 import { keyframes } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 
-export const pulseAnimation = keyframes`
+import { rem } from '../../../tokens/relative';
+
+export const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 10px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;
     opacity: 0;
   }
   100% {

package/src/components/data-display/Avatar/Avatar.tsx

@@ -11,6 +11,7 @@ import {
 } from './Avatar.helpers';
 import { GROUP_MAX, GROUP_OVERLAP, GROUP_HOVER, BORDER_WIDTH } from './Avatar.metrics';
 import type { AvatarProps, ContentType } from './Avatar.types';
+import { rem } from '../../../tokens/relative';
 import { AvatarView, type AvatarViewProps } from './Avatar.view';
 
 /** The node behind the winning content slot; the pick itself is shared. */
@@ -164,13 +165,13 @@ const AvatarGroupContainer = styled('div')<{ overlap?: number }>(({ theme, overl
   display: 'flex',
   alignItems: 'center',
   '& > *': {
-    marginLeft: -overlap,
+    marginLeft: rem(theme, -overlap),
     transition: 'all 0.3s ease',
     position: 'relative',
-    border: `${BORDER_WIDTH}px solid ${theme.palette.background.paper}`,
+    border: `${rem(theme, BORDER_WIDTH)} solid ${theme.palette.background.paper}`,
     '&:hover': {
       zIndex: 100,
-      transform: `scale(${GROUP_HOVER.scale}) translateY(-${GROUP_HOVER.lift}px)`,
+      transform: `scale(${GROUP_HOVER.scale}) translateY(${rem(theme, -GROUP_HOVER.lift)})`,
     },
     '&:first-of-type': {
       marginLeft: 0,

package/src/components/data-display/Avatar/Avatar.view.tsx

@@ -27,7 +27,7 @@ import {
 } from './Avatar.metrics';
 import type { AvatarSize, AvatarStatus, ContentType } from './Avatar.types';
 import { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 export type { ContentType };
 
@@ -57,21 +57,16 @@ const getColorFromTheme = (theme: Theme, color: string): PaletteLike => {
   return colorMap[color] || theme.palette.primary;
 };
 
-interface SizeStyle {
-  width: number;
-  height: number;
-}
-
-// Derived from the shared metrics, not restated: the native `Avatar` reads the
-// same table, so the two renderers cannot disagree on a box.
-const sizeMap: Record<AvatarSize, SizeStyle> = Object.fromEntries(
-  Object.entries(AVATAR_SIZES).map(([size, step]) => [
-    size,
-    { width: step.box, height: step.box },
-  ]),
-) as Record<AvatarSize, SizeStyle>;
+// Read from the shared metrics, not restated: the native `Avatar` reads the
+// same table, so the two renderers cannot disagree on a box. Design px; every
+// read below draws it through the type scale.
+const boxPx = (size: AvatarSize): number => (AVATAR_SIZES[size] || AVATAR_SIZES.md).box;
 
-const getSizeStyles = (size: AvatarSize): SizeStyle => sizeMap[size] || sizeMap.md;
+/** The square box, as rem through the theme. */
+const boxStyles = (theme: Theme, size: AvatarSize): CSSObject => {
+  const side = rem(theme, boxPx(size));
+  return { width: side, height: side };
+};
 
 /** The glyph size in design px, read through the type scale where it is drawn. */
 const glyphPx = (size: AvatarSize): number => (AVATAR_SIZES[size] || AVATAR_SIZES.md).fontSize;
@@ -90,12 +85,12 @@ const getStatusColor = (status: AvatarStatus, theme: Theme): string => {
 };
 
 /** Hover/active lift, only when the avatar is interactive. */
-const interactiveStyles = (interactive: boolean | undefined, main: string): CSSObject =>
+const interactiveStyles = (theme: Theme, interactive: boolean | undefined, main: string): CSSObject =>
   interactive
     ? {
         '&:hover': {
-          transform: `scale(${HOVER.scale}) translateY(-${HOVER.lift}px)`,
-          boxShadow: `0 ${HOVER.shadowY}px ${HOVER.shadowBlur}px ${alpha(main, HOVER.shadowAlpha)}`,
+          transform: `scale(${HOVER.scale}) translateY(${rem(theme, -HOVER.lift)})`,
+          boxShadow: `0 ${rems(theme, HOVER.shadowY, HOVER.shadowBlur)} ${alpha(main, HOVER.shadowAlpha)}`,
           filter: `brightness(${HOVER.brightness})`,
           zIndex: 10,
         },
@@ -129,20 +124,21 @@ const variantRadius = (variant: string | undefined, theme: Theme): CSSObject =>
 const borderedStyles = (bordered: boolean | undefined, theme: Theme): CSSObject =>
   bordered
     ? {
-        border: `${BORDER_WIDTH}px solid ${theme.palette.background.paper}`,
-        boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, BORDER_HALO_ALPHA)}`,
+        border: `${rem(theme, BORDER_WIDTH)} solid ${theme.palette.background.paper}`,
+        boxShadow: `0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.divider, BORDER_HALO_ALPHA)}`,
       }
     : {};
 
 /** Glow adds the halo; pulse adds the expanding ring — either or both. */
 const glowPulseStyles = (
+  theme: Theme,
   glow: boolean | undefined,
   pulse: boolean | undefined,
   main: string,
 ): CSSObject => {
   const styles: CSSObject = {};
   if (glow) {
-    styles.boxShadow = `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(main, GLOW.alpha)} !important`;
+    styles.boxShadow = `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(main, GLOW.alpha)} !important`;
     styles.filter = `brightness(${GLOW.brightness})`;
   }
   if (pulse) {
@@ -158,7 +154,7 @@ const glowPulseStyles = (
       transform: 'translate(-50%, -50%)',
       backgroundColor: main,
       opacity: PULSE.alpha,
-      animation: `${pulseAnimation} ${PULSE.durationMs / 1000}s infinite`,
+      animation: `${pulseAnimation(theme)} ${PULSE.durationMs / 1000}s infinite`,
       pointerEvents: 'none',
       zIndex: -1,
     };
@@ -207,7 +203,7 @@ const StyledAvatar = styled(MuiAvatar, {
   }) => {
     const palette = getColorFromTheme(theme, customColor);
     return {
-      ...getSizeStyles(customSize),
+      ...boxStyles(theme, customSize),
       fontSize: rem(theme, glyphPx(customSize)),
       transition: `all ${AVATAR_TRANSITION_MS / 1000}s ${AVATAR_TRANSITION_EASING}`,
       position: 'relative',
@@ -216,37 +212,36 @@ const StyledAvatar = styled(MuiAvatar, {
       cursor: interactive ? 'pointer' : 'default',
       backgroundColor: hasError ? theme.palette.error.main : palette.main,
       color: hasError ? theme.palette.error.contrastText : (palette.contrastText ?? absoluteInk(theme).white),
-      ...interactiveStyles(interactive, palette.main),
+      ...interactiveStyles(theme, interactive, palette.main),
       ...loadingStyles(isLoading, palette.main),
       ...variantRadius(customVariant, theme),
       ...borderedStyles(bordered, theme),
-      ...glowPulseStyles(glow, pulse, palette.main),
+      ...glowPulseStyles(theme, glow, pulse, palette.main),
       '&:focus-visible': {
-        outline: `${FOCUS_RING.width}px solid ${alpha(palette.main, FOCUS_RING.alpha)}`,
-        outlineOffset: FOCUS_RING.offset,
+        outline: `${rem(theme, FOCUS_RING.width)} solid ${alpha(palette.main, FOCUS_RING.alpha)}`,
+        outlineOffset: rem(theme, FOCUS_RING.offset),
       },
     };
   },
 );
 
 const LoadingOverlay = styled('div')<{ size: AvatarSize }>(({ theme, size }) => {
-  const sizeStyles = getSizeStyles(size);
+  const box = boxPx(size);
   return {
     position: 'absolute',
     top: 0,
     left: 0,
-    width: sizeStyles.width,
-    height: sizeStyles.height,
+    ...boxStyles(theme, size),
     borderRadius: 'inherit',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: alpha(theme.palette.background.paper, LOADING_OVERLAY.paperAlpha),
-    backdropFilter: `blur(${LOADING_OVERLAY.blur}px)`,
+    backdropFilter: `blur(${rem(theme, LOADING_OVERLAY.blur)})`,
     '& .loading-spinner': {
-      width: sizeStyles.width * SPINNER.scale,
-      height: sizeStyles.height * SPINNER.scale,
-      border: `${SPINNER.ringWidth}px solid ${alpha(theme.palette.primary.main, SPINNER.trackAlpha)}`,
+      width: rem(theme, box * SPINNER.scale),
+      height: rem(theme, box * SPINNER.scale),
+      border: `${rem(theme, SPINNER.ringWidth)} solid ${alpha(theme.palette.primary.main, SPINNER.trackAlpha)}`,
       borderTopColor: theme.palette.primary.main,
       borderRadius: '50%',
       animation: `${rotateAnimation} ${SPINNER.durationMs / 1000}s linear infinite`,
@@ -260,8 +255,7 @@ const StatusBadge = styled(Badge, {
   statusColor?: string;
   avatarSize?: AvatarSize;
 }>(({ theme, statusColor, avatarSize = 'md' }) => {
-  const sizeStyles = getSizeStyles(avatarSize);
-  const badgeSize = Math.max(STATUS_DOT.min, sizeStyles.width * STATUS_DOT.scale);
+  const badgeSize = rem(theme, Math.max(STATUS_DOT.min, boxPx(avatarSize) * STATUS_DOT.scale));
 
   return {
     '& .MuiBadge-badge': {
@@ -270,7 +264,7 @@ const StatusBadge = styled(Badge, {
       width: badgeSize,
       height: badgeSize,
       borderRadius: '50%',
-      border: `${STATUS_DOT.borderWidth}px solid ${theme.palette.background.paper}`,
+      border: `${rem(theme, STATUS_DOT.borderWidth)} solid ${theme.palette.background.paper}`,
       '&::after': {
         position: 'absolute',
         top: 0,

package/src/components/data-display/Badge/Badge.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, rems } from '../../../tokens/relative';
 
 import { BOUNCE, FADE_IN_SCALE, GLOW_PULSE, PULSE } from './Badge.metrics';
 
@@ -18,25 +21,25 @@ export const pulseAnimation = keyframes`
 `;
 
 // Define bounce animation
-export const bounceAnimation = keyframes`
+export const bounceAnimation = (theme: Theme) => keyframes`
   0%, 20%, 50%, 80%, 100% {
     transform: translateY(0) scale(1);
   }
   40% {
-    transform: translateY(-${BOUNCE.lift}px) scale(${BOUNCE.scale});
+    transform: translateY(${rem(theme, -BOUNCE.lift)}) scale(${BOUNCE.scale});
   }
   60% {
-    transform: translateY(-${BOUNCE.secondLift}px) scale(${BOUNCE.secondScale});
+    transform: translateY(${rem(theme, -BOUNCE.secondLift)}) scale(${BOUNCE.secondScale});
   }
 `;
 
 // Define shimmer animation
-export const shimmerAnimation = keyframes`
+export const shimmerAnimation = (theme: Theme) => keyframes`
   0% {
-    background-position: -1000px 0;
+    background-position: ${rem(theme, -1000)} 0;
   }
   100% {
-    background-position: 1000px 0;
+    background-position: ${rem(theme, 1000)} 0;
   }
 `;
 
@@ -56,14 +59,14 @@ export const fadeInScaleAnimation = keyframes`
 `;
 
 // Define glow pulse animation
-export const glowPulseAnimation = keyframes`
+export const glowPulseAnimation = (theme: Theme) => keyframes`
   0% {
-    box-shadow: 0 0 ${GLOW_PULSE.fromBlur}px ${GLOW_PULSE.fromSpread}px rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
+    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.fromBlur, GLOW_PULSE.fromSpread)} rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
   }
   50% {
-    box-shadow: 0 0 ${GLOW_PULSE.toBlur}px ${GLOW_PULSE.toSpread}px rgba(var(--glow-color), ${GLOW_PULSE.toAlpha});
+    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.toBlur, GLOW_PULSE.toSpread)} rgba(var(--glow-color), ${GLOW_PULSE.toAlpha});
   }
   100% {
-    box-shadow: 0 0 ${GLOW_PULSE.fromBlur}px ${GLOW_PULSE.fromSpread}px rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
+    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.fromBlur, GLOW_PULSE.fromSpread)} rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
   }
 `;