@12-apps/ui 6.34.0 → 6.36.0

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 { px } from '../../../tokens/theme';
+import { rem, rems } from '../../../tokens/relative';
 
 export type { ContentType };
 
@@ -57,22 +57,19 @@ const getColorFromTheme = (theme: Theme, color: string): PaletteLike => {
   return colorMap[color] || theme.palette.primary;
 };
 
-interface SizeStyle {
-  width: number;
-  height: number;
-  fontSize: string;
-}
+// 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;
 
-// 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, fontSize: px(step.fontSize) },
-  ]),
-) as Record<AvatarSize, SizeStyle>;
+/** 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 };
+};
 
-const getSizeStyles = (size: AvatarSize): SizeStyle => sizeMap[size] || sizeMap.md;
+/** 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;
 
 const getStatusColor = (status: AvatarStatus, theme: Theme): string => {
   // The same four decisions the native half reads out of `Avatar.metrics`,
@@ -88,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,
         },
@@ -127,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) {
@@ -156,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,
     };
@@ -205,7 +203,8 @@ 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',
       overflow: 'visible',
@@ -213,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`,
@@ -257,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': {
@@ -267,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

@@ -23,11 +23,12 @@ import {
   SHIMMER,
   badgeAnchor,
 } from './Badge.metrics';
+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';
-import { px } from '../../../tokens/theme';
 
 export type BadgePalette = {
   main: string;
@@ -52,36 +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;
-    fontSize: string;
-    padding: string;
-    dotSize: number;
-    iconSize: string;
-  }
-> = Object.fromEntries(
-  Object.entries(BADGE_SIZES).map(([size, metrics]) => [
-    size,
-    {
-      minWidth: metrics.minWidth,
-      height: metrics.height,
-      fontSize: px(metrics.fontSize),
-      padding: `0 ${metrics.paddingHorizontal}px`,
-      dotSize: metrics.dotSize,
-      iconSize: px(metrics.iconSize),
-    },
-  ]),
-) as Record<
-  BadgeSize,
-  { minWidth: number; height: number; fontSize: string; padding: string; dotSize: number; iconSize: string }
->;
-
-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]);
@@ -106,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 &&
@@ -127,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})`,
         }),
 
@@ -157,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 && {
@@ -165,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': {
@@ -181,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.
@@ -210,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',
@@ -236,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
@@ -249,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,6 +14,7 @@ import {
 } from './Badge.metrics';
 import type { BadgePalette, BadgeSizeStyles } from './Badge.styles';
 import { absoluteInk, onMedia, sheen } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
 const BADGE_VARIANTS: Record<
   string,
@@ -25,9 +26,9 @@ const BADGE_VARIANTS: Record<
           colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
-        fontSize: sizeStyles.fontSize,
+        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,
@@ -41,7 +42,7 @@ const BADGE_VARIANTS: Record<
           colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
-        fontSize: sizeStyles.fontSize,
+        fontSize: rem(theme, sizeStyles.step.fontSize),
         padding: sizeStyles.padding,
         borderRadius: '50%' }),
   gradient: (theme, colorPalette, sizeStyles) => ({
@@ -49,64 +50,64 @@ const BADGE_VARIANTS: Record<
         color: onMedia(theme),
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
-        fontSize: sizeStyles.fontSize,
+        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: sizeStyles.fontSize,
+        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: sizeStyles.fontSize,
+        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,
         border: `1px solid ${alpha(colorPalette.main, SECONDARY_BORDER_ALPHA)}`,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
-        fontSize: sizeStyles.fontSize,
+        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,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
-        fontSize: sizeStyles.fontSize,
+        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,
         color: theme.palette.success.contrastText,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
-        fontSize: sizeStyles.fontSize,
+        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,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
-        fontSize: sizeStyles.fontSize,
+        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

@@ -1,17 +1,18 @@
 import CloseIcon from '@mui/icons-material/Close';
 import IconButton from '@mui/material/IconButton/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 
 import { BADGE_CONTENT_GAP, BADGE_SIZES } from './Badge.metrics';
 import { getSizeStyles } from './Badge.styles';
 import type { BadgeSize } from './Badge.types';
-import { px } from '../../../tokens/theme';
+import { rem, sxRem } from '../../../tokens/relative';
 
 // Derived from the shared metrics: `xl` takes `lg`'s glyph, which is what the
 // hand-written map did through its `?? CLOSE_ICON_SIZES.lg` fallback.
-const CLOSE_ICON_SIZES: Record<string, string> = Object.fromEntries(
-  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, px(metrics.closeIconSize)]),
+const CLOSE_ICON_SIZES: Record<string, number> = Object.fromEntries(
+  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, metrics.closeIconSize]),
 );
 
 const makeTestId =
@@ -23,19 +24,22 @@ const BadgeIcon: FC<{ icon: ReactNode; size: BadgeSize; testId: string }> = ({
   icon,
   size,
   testId,
-}) => (
-  <span
-    key="icon"
-    data-testid={testId}
-    style={{
-      fontSize: getSizeStyles(size).iconSize,
-      display: 'inline-flex',
-      alignItems: 'center',
-    }}
-  >
-    {icon}
-  </span>
-);
+}) => {
+  const theme = useTheme();
+  return (
+    <span
+      key="icon"
+      data-testid={testId}
+      style={{
+        fontSize: rem(theme, getSizeStyles(theme, size).step.iconSize),
+        display: 'inline-flex',
+        alignItems: 'center',
+      }}
+    >
+      {icon}
+    </span>
+  );
+};
 
 const BadgeCloseButton: FC<{ size: BadgeSize; testId: string; onClose: (e: React.MouseEvent) => void }> = ({
   size,
@@ -51,7 +55,7 @@ const BadgeCloseButton: FC<{ size: BadgeSize; testId: string; onClose: (e: React
       p: 0,
       ml: 0.5,
       color: 'inherit',
-      '& svg': { fontSize: CLOSE_ICON_SIZES[size] ?? CLOSE_ICON_SIZES.lg },
+      '& svg': { fontSize: sxRem(CLOSE_ICON_SIZES[size] ?? BADGE_SIZES.lg.closeIconSize) },
       '&:hover': { opacity: 0.8 },
     }}
   >
@@ -59,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 = ({
@@ -101,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>;
 };