@12-apps/ui 6.35.0 → 6.36.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});
   }
 `;

package/src/components/data-display/Badge/Badge.styles.ts

@@ -27,6 +27,7 @@ import type { BadgeSizeMetrics } from './Badge.metrics';
 import { badgeVariantStyles } from './Badge.variants';
 import type { BadgeSize, BadgeVariant } from './Badge.types';
 import { sheen } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 import { accentFor } from '../../../tokens/scales';
 
 export type BadgePalette = {
@@ -52,35 +53,22 @@ const getColorFromTheme = (theme: Theme, color: string) => {
   return colorMap[color] || theme.palette.primary;
 };
 
-// Derived from the shared metrics, not restated: the native `Badge` reads the
-// same table, so the two renderers cannot disagree on a chip.
-const sizeMap: Record<
-  BadgeSize,
-  {
-    minWidth: number;
-    height: number;
-    /** The step itself: its `fontSize`/`iconSize` are design px, drawn through `rem(theme, …)`. */
-    step: BadgeSizeMetrics;
-    padding: string;
-    dotSize: number;
-  }
-> = Object.fromEntries(
-  Object.entries(BADGE_SIZES).map(([size, metrics]) => [
-    size,
-    {
-      minWidth: metrics.minWidth,
-      height: metrics.height,
-      step: metrics,
-      padding: `0 ${metrics.paddingHorizontal}px`,
-      dotSize: metrics.dotSize,
-    },
-  ]),
-) as Record<
-  BadgeSize,
-  { minWidth: number; height: number; step: BadgeSizeMetrics; padding: string; dotSize: number }
->;
-
-export const getSizeStyles = (size: BadgeSize) => sizeMap[size] || sizeMap.md;
+// Read from the shared metrics, not restated: the native `Badge` reads the
+// same table, so the two renderers cannot disagree on a chip. The table is
+// design px; the web draws every length through the type scale here.
+export const getSizeStyles = (theme: Theme, size: BadgeSize) => {
+  /** The step itself: its `fontSize`/`iconSize` are design px, drawn through `rem(theme, …)`. */
+  const step: BadgeSizeMetrics = BADGE_SIZES[size] || BADGE_SIZES.md;
+  return {
+    minWidth: rem(theme, step.minWidth),
+    height: rem(theme, step.height),
+    /** Half the height: the pill's end caps. */
+    pillRadius: rem(theme, step.height / 2),
+    step,
+    padding: rems(theme, 0, step.paddingHorizontal),
+    dotSize: rem(theme, step.dotSize),
+  };
+};
 
 export const getAnchorOrigin = (position: string) =>
   badgeAnchor((position || 'top-right') as Parameters<typeof badgeAnchor>[0]);
@@ -105,18 +93,20 @@ const rgbValuesOf = (color: string): string => {
 const badgeLightingStyles = ({
   glow,
   pulse,
-  colorPalette }: {
+  colorPalette,
+  theme }: {
   glow?: boolean;
   pulse?: boolean;
   colorPalette: BadgePalette;
+  theme: Theme;
 }): CSSObject => ({
       // Glow effect
       ...(glow &&
         !pulse && {
-          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})`,
           '&:hover': {
-            boxShadow: `0 0 ${GLOW.hoverBlur}px ${GLOW.hoverSpread}px ${alpha(colorPalette.main, GLOW.hoverAlpha)}` } }),
+            boxShadow: `0 0 ${rems(theme, GLOW.hoverBlur, GLOW.hoverSpread)} ${alpha(colorPalette.main, GLOW.hoverAlpha)}` } }),
 
       // Pulse animation
       ...(pulse &&
@@ -126,7 +116,7 @@ const badgeLightingStyles = ({
       // Both glow and pulse
       ...(glow &&
         pulse && {
-          animation: `${glowPulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite, ${pulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite`,
+          animation: `${glowPulseAnimation(theme)} ${PULSE.durationMs / 1000}s ease-in-out infinite, ${pulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite`,
           filter: `brightness(${GLOW.brightness})`,
         }),
 
@@ -156,7 +146,7 @@ const badgeAnimationStyles = ({
 
       // Bounce animation
       ...(bounce && {
-        animation: `${bounceAnimation} ${BOUNCE.durationMs / 1000}s ease-in-out` }),
+        animation: `${bounceAnimation(theme)} ${BOUNCE.durationMs / 1000}s ease-in-out` }),
 
       // Shimmer effect
       ...(shimmer && {
@@ -164,7 +154,7 @@ const badgeAnimationStyles = ({
           customVariant === 'gradient'
             ? `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`
             : colorPalette.main,
-        backgroundSize: shimmer ? '1000px 100%' : 'auto',
+        backgroundSize: shimmer ? `${rem(theme, 1000)} 100%` : 'auto',
         position: 'relative',
         overflow: 'hidden',
         '&::after': {
@@ -180,7 +170,7 @@ const badgeAnimationStyles = ({
             ${sheen(theme, SHIMMER.alpha)},
             transparent
           )`,
-          animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1000}s infinite` } }) });
+          animation: `${shimmerAnimation(theme)} ${SHIMMER.durationMs / 1000}s infinite` } }) });
 
 // The badge chip's own styling, lifted out so the styled() callback just
 // forwards its props.
@@ -209,14 +199,14 @@ export const badgeStyles = ({
   bounce,
   hasIcon }: BadgeStyleArgs): CSSObject => {
   const colorPalette = getColorFromTheme(theme, customColor);
-  const sizeStyles = getSizeStyles(customSize);
+  const sizeStyles = getSizeStyles(theme, customSize);
 
   return {
     '--glow-color': rgbValuesOf(colorPalette.main),
     '& .MuiBadge-badge': {
       transition: `all ${BADGE_TRANSITION_MS / 1000}s ${BADGE_TRANSITION_EASING}`,
       fontWeight: BADGE_FONT_WEIGHT,
-      border: `${BADGE_BORDER_WIDTH}px solid ${theme.palette.background.paper}`,
+      border: `${rem(theme, BADGE_BORDER_WIDTH)} solid ${theme.palette.background.paper}`,
       letterSpacing: `${BADGE_LETTER_SPACING_EM}em`,
       textTransform:
         customVariant === 'gradient' || customVariant === 'glass' ? 'uppercase' : 'none',
@@ -235,7 +225,7 @@ export const badgeStyles = ({
         paddingLeft: sizeStyles.padding.split(' ')[1],
         display: 'inline-flex',
         alignItems: 'center',
-        gap: `${BADGE_CONTENT_GAP}px`,
+        gap: rem(theme, BADGE_CONTENT_GAP),
       }),
 
       // Animation on mount
@@ -248,7 +238,7 @@ export const badgeStyles = ({
         customVariant,
         colorPalette,
         theme }),
-      ...badgeLightingStyles({ glow, pulse, colorPalette }),
+      ...badgeLightingStyles({ glow, pulse, colorPalette, theme }),
 
       '&:not(.MuiBadge-dot):hover': {
         transform: `scale(${HOVER_SCALE})`,

package/src/components/data-display/Badge/Badge.variants.ts

@@ -14,7 +14,7 @@ import {
 } from './Badge.metrics';
 import type { BadgePalette, BadgeSizeStyles } from './Badge.styles';
 import { absoluteInk, onMedia, sheen } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 const BADGE_VARIANTS: Record<
   string,
@@ -28,7 +28,7 @@ const BADGE_VARIANTS: Record<
         height: sizeStyles.height,
         fontSize: rem(theme, sizeStyles.step.fontSize),
         padding: sizeStyles.padding,
-        borderRadius: sizeStyles.height / 2 }),
+        borderRadius: sizeStyles.pillRadius }),
   dot: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: colorPalette.main,
         width: sizeStyles.dotSize,
@@ -52,28 +52,28 @@ const BADGE_VARIANTS: Record<
         height: sizeStyles.height,
         fontSize: rem(theme, sizeStyles.step.fontSize),
         padding: sizeStyles.padding,
-        borderRadius: sizeStyles.height / 2 }),
+        borderRadius: sizeStyles.pillRadius }),
   glass: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: alpha(colorPalette.main, GLASS_BACKGROUND_ALPHA),
-        backdropFilter: `blur(${GLASS_BLUR_PX}px) saturate(${GLASS_SATURATE * 100}%)`,
-        WebkitBackdropFilter: `blur(${GLASS_BLUR_PX}px) saturate(${GLASS_SATURATE * 100}%)`,
+        backdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)}) saturate(${GLASS_SATURATE * 100}%)`,
+        WebkitBackdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)}) saturate(${GLASS_SATURATE * 100}%)`,
         border: `1px solid ${alpha(colorPalette.main, GLASS_BORDER_ALPHA)}`,
         color: colorPalette.main,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
         fontSize: rem(theme, sizeStyles.step.fontSize),
         padding: sizeStyles.padding,
-        borderRadius: sizeStyles.height / 2,
-        boxShadow: `inset 0 1px 1px ${sheen(theme, GLASS_INSET_HIGHLIGHT_ALPHA)}` }),
+        borderRadius: sizeStyles.pillRadius,
+        boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, GLASS_INSET_HIGHLIGHT_ALPHA)}` }),
   outline: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: 'transparent',
-        border: `${OUTLINE_BORDER_WIDTH}px solid ${colorPalette.main}`,
+        border: `${rem(theme, OUTLINE_BORDER_WIDTH)} solid ${colorPalette.main}`,
         color: colorPalette.main,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
         fontSize: rem(theme, sizeStyles.step.fontSize),
         padding: sizeStyles.padding,
-        borderRadius: sizeStyles.height / 2 }),
+        borderRadius: sizeStyles.pillRadius }),
   secondary: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: alpha(colorPalette.main, SECONDARY_BACKGROUND_ALPHA),
         color: colorPalette.main,
@@ -82,7 +82,7 @@ const BADGE_VARIANTS: Record<
         height: sizeStyles.height,
         fontSize: rem(theme, sizeStyles.step.fontSize),
         padding: sizeStyles.padding,
-        borderRadius: sizeStyles.height / 2 }),
+        borderRadius: sizeStyles.pillRadius }),
   destructive: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: theme.palette.error.main,
         color: theme.palette.error.contrastText,
@@ -90,7 +90,7 @@ const BADGE_VARIANTS: Record<
         height: sizeStyles.height,
         fontSize: rem(theme, sizeStyles.step.fontSize),
         padding: sizeStyles.padding,
-        borderRadius: sizeStyles.height / 2,
+        borderRadius: sizeStyles.pillRadius,
         fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT }),
   success: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: theme.palette.success.main,
@@ -99,7 +99,7 @@ const BADGE_VARIANTS: Record<
         height: sizeStyles.height,
         fontSize: rem(theme, sizeStyles.step.fontSize),
         padding: sizeStyles.padding,
-        borderRadius: sizeStyles.height / 2 }),
+        borderRadius: sizeStyles.pillRadius }),
   warning: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: theme.palette.warning.main,
         color: theme.palette.warning.contrastText,
@@ -107,7 +107,7 @@ const BADGE_VARIANTS: Record<
         height: sizeStyles.height,
         fontSize: rem(theme, sizeStyles.step.fontSize),
         padding: sizeStyles.padding,
-        borderRadius: sizeStyles.height / 2 }) };
+        borderRadius: sizeStyles.pillRadius }) };
 
 export const badgeVariantStyles = (
   theme: Theme,

package/src/components/data-display/Badge/BadgeContent.tsx

@@ -31,7 +31,7 @@ const BadgeIcon: FC<{ icon: ReactNode; size: BadgeSize; testId: string }> = ({
       key="icon"
       data-testid={testId}
       style={{
-        fontSize: rem(theme, getSizeStyles(size).step.iconSize),
+        fontSize: rem(theme, getSizeStyles(theme, size).step.iconSize),
         display: 'inline-flex',
         alignItems: 'center',
       }}
@@ -63,6 +63,14 @@ const BadgeCloseButton: FC<{ size: BadgeSize; testId: string; onClose: (e: React
   </IconButton>
 );
 
+/** The row the parts sit in, `BADGE_CONTENT_GAP` apart. */
+const BadgeRun: FC<{ children: ReactNode }> = ({ children }) => {
+  const theme = useTheme();
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: rem(theme, BADGE_CONTENT_GAP) }}>{children}</span>
+  );
+};
+
 // The badge's inner run: optional icon, the content itself, optional close
 // button. A dot badge shows none of it.
 export const buildBadgeContent = ({
@@ -105,7 +113,5 @@ export const buildBadgeContent = ({
 
   if (parts.length === 0) return null;
 
-  return (
-    <span style={{ display: 'inline-flex', alignItems: 'center', gap: `${BADGE_CONTENT_GAP}px` }}>{parts}</span>
-  );
+  return <BadgeRun>{parts}</BadgeRun>;
 };

package/src/components/data-display/Banner/Banner.styles.ts

@@ -7,10 +7,10 @@ import { modeInk } from '../../../tokens/ink';
 import { rem } from '../../../tokens/relative';
 
 // Animations
-export const fadeInSlide = keyframes`
+export const fadeInSlide = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(${rem(theme, -10)});
   }
   to {
     opacity: 1;
@@ -18,13 +18,13 @@ export const fadeInSlide = keyframes`
   }
 `;
 
-const pulseAnimation = keyframes`
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 0.7;
   }
   70% {
-    box-shadow: 0 0 0 8px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 8)} currentColor;
     opacity: 0;
   }
   100% {
@@ -57,10 +57,10 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
     '&::before': {
       content: '""',
       position: 'absolute',
-      inset: -4,
+      inset: rem(theme, -4),
       borderRadius: '50%',
       background: alpha(colorPalette.main, 0.1),
-      animation: `${pulseAnimation} 3s infinite`,
+      animation: `${pulseAnimation(theme)} 3s infinite`,
     },
   },
 
@@ -118,8 +118,8 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
 
     '&:focus-visible': {
       opacity: 1,
-      outline: `2px solid ${colorPalette.main}`,
-      outlineOffset: '2px',
+      outline: `${rem(theme, 2)} solid ${colorPalette.main}`,
+      outlineOffset: rem(theme, 2),
     },
   },
 });

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

@@ -43,7 +43,7 @@ const StyledBanner = styled(Box, {
     width: fullWidth ? '100vw' : '100%',
     marginLeft: fullWidth ? '50%' : 0,
     transform: fullWidth ? 'translateX(-50%)' : 'none',
-    animation: `${fadeInSlide} 0.3s ease-out`,
+    animation: `${fadeInSlide(theme)} 0.3s ease-out`,
     transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow ${BANNER_TINT_S}s cubic-bezier(0.4, 0, 0.2, 1)`,
 
     ...bannerPointerStates(theme),
@@ -57,8 +57,8 @@ const StyledBanner = styled(Box, {
     // ring stays for whoever tabs here and never fires on a click. Same defect
     // and same fix as `Alert`, which is the sibling surface (FUT-1458).
     '&: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),
     },
 
     ...bannerPartStyles(theme, colorPalette),
@@ -84,7 +84,7 @@ const StyledBanner = styled(Box, {
     // Glass effect variant (optional enhancement)
     '&.banner-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)}`,
       color: theme.palette.text.primary,
       

package/src/components/data-display/CardKit/list-card-parts.tsx

@@ -111,7 +111,7 @@ export function BodyHeading({ children }: { children: ReactNode }): JSX.Element
       sx={{
         fontSize: sxRem(11),
         fontWeight: 700,
-        letterSpacing: 0.4,
+        letterSpacing: sxRem(0.4),
         textTransform: 'uppercase',
         color: 'text.disabled',
         mb: 0.5,

package/src/components/data-display/Carousel/Carousel.parts.tsx

@@ -72,8 +72,8 @@ const LineIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSel
       tabIndex={0}
       {...indicatorAttrs(index, isActive)}
       sx={{
-        width: isActive ? 30 : 20,
-        height: 3,
+        width: rem(theme, isActive ? 30 : 20),
+        height: rem(theme, 3),
         backgroundColor: isActive
           ? accentFor(theme, color).main
           : alpha(accentFor(theme, color).main, 0.3),
@@ -96,8 +96,8 @@ const NumberIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onS
       tabIndex={0}
       {...indicatorAttrs(index, isActive)}
       sx={{
-        width: 24,
-        height: 24,
+        width: rem(theme, 24),
+        height: rem(theme, 24),
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -223,7 +223,7 @@ export const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {
 
   const theme = useTheme();
   const sx = arrowSx(theme, color, position === 'overlay');
-  const offset = position === 'outside' ? -40 : 8;
+  const offset = rem(theme, position === 'outside' ? -40 : 8);
 
   return (
     <Box data-testid="carousel-navigation">
@@ -255,7 +255,9 @@ export const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {
 };
 
 const THUMBNAIL_SIZES = { xs: 40, sm: 60, md: 80, lg: 100, xl: 120 } as const;
-const DEFAULT_THUMBNAIL_SIZE = 60;
+/** A thumbnail's side in design px — 60 for a size the table does not know. */
+const thumbnailSidePx = (size: string): number =>
+  THUMBNAIL_SIZES[size as keyof typeof THUMBNAIL_SIZES] ?? 60;
 
 const Thumbnail: React.FC<{
   item: CarouselItem;
@@ -272,9 +274,9 @@ const Thumbnail: React.FC<{
       data-testid={`carousel-thumbnail-${index}`}
       data-active={isActive}
       sx={{
-        width: side,
-        height: side,
-        border: `2px solid ${isActive ? theme.palette.primary.main : 'transparent'}`,
+        width: rem(theme, side),
+        height: rem(theme, side),
+        border: `${rem(theme, 2)} solid ${isActive ? theme.palette.primary.main : 'transparent'}`,
         borderRadius: 1,
         overflow: 'hidden',
         cursor: 'pointer',
@@ -318,7 +320,7 @@ export const CarouselThumbnails: React.FC<CarouselThumbnailsProps> = ({
   style,
 }) => {
   const theme = useTheme();
-  const side = THUMBNAIL_SIZES[size as keyof typeof THUMBNAIL_SIZES] ?? DEFAULT_THUMBNAIL_SIZE;
+  const side = thumbnailSidePx(size);
 
   return (
     <Box
@@ -327,7 +329,7 @@ export const CarouselThumbnails: React.FC<CarouselThumbnailsProps> = ({
       sx={{
         position: 'absolute',
         // Hung below the frame, clear of its own height plus a gap.
-        bottom: -side - 16,
+        bottom: rem(theme, -side - 16),
         left: '50%',
         transform: 'translateX(-50%)',
         display: 'flex',