@12-apps/ui 6.35.0 → 6.37.0

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',

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

@@ -6,6 +6,7 @@ import React from 'react';
 
 import type { CarouselItem, CarouselProps } from './Carousel.types';
 import { onMedia, shadowInk } from '../../../tokens/ink';
+import { rems } from '../../../tokens/relative';
 
 export interface CarouselSlideProps {
   item: CarouselItem;
@@ -33,7 +34,7 @@ const SlideCaption: React.FC<Pick<CarouselItem, 'title' | 'description' | 'conte
         variant="h5"
         sx={(theme) => ({
           color: image ? onMedia(theme) : 'text.primary',
-          textShadow: image ? `0 2px 4px ${shadowInk(theme, 0.5)}` : 'none',
+          textShadow: image ? `0 ${rems(theme, 2, 4)} ${shadowInk(theme, 0.5)}` : 'none',
           mb: 1,
         })}
       >
@@ -46,7 +47,7 @@ const SlideCaption: React.FC<Pick<CarouselItem, 'title' | 'description' | 'conte
         variant="body1"
         sx={(theme) => ({
           color: image ? onMedia(theme) : 'text.secondary',
-          textShadow: image ? `0 1px 2px ${shadowInk(theme, 0.5)}` : 'none',
+          textShadow: image ? `0 ${rems(theme, 1, 2)} ${shadowInk(theme, 0.5)}` : 'none',
         })}
       >
         {description}

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

@@ -2,29 +2,49 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { CarouselProps } from './Carousel.types';
-import { accentFor, sxRem } from '../../../tokens/scales';
+import { accentFor, rem, sxRem } from '../../../tokens/scales';
 
 type Variant = NonNullable<CarouselProps['variant']>;
 type Size = NonNullable<CarouselProps['size']>;
 type Color = NonNullable<CarouselProps['color']>;
 
-const SIZES: Record<Size, { height: number; fontSize: (theme: Theme) => string }> = {
-  xs: { height: 200, fontSize: sxRem(12) },
-  sm: { height: 300, fontSize: sxRem(14) },
-  md: { height: 400, fontSize: sxRem(16) },
-  lg: { height: 500, fontSize: sxRem(18) },
-  xl: { height: 600, fontSize: sxRem(20) },
+const SIZES: Record<Size, { height: (theme: Theme) => string; fontSize: (theme: Theme) => string }> = {
+  xs: { height: sxRem(200), fontSize: sxRem(12) },
+  sm: { height: sxRem(300), fontSize: sxRem(14) },
+  md: { height: sxRem(400), fontSize: sxRem(16) },
+  lg: { height: sxRem(500), fontSize: sxRem(18) },
+  xl: { height: sxRem(600), fontSize: sxRem(20) },
 };
 
 const sizeStyles = (size: Size) => SIZES[size] ?? SIZES.md;
 
+/**
+ * The frame's box as CSS. A numeric `height`/`width` is design px, drawn
+ * through the type scale; an unset height is the documented 400. A numeric
+ * height is taken literally; any other falls back to the size preset, since a
+ * percentage cannot resolve against an unsized parent here. A string width
+ * passes through.
+ */
+export const frameBox = (
+  theme: Theme,
+  size: Size,
+  height: number | string | undefined,
+  width: number | string,
+): { width: string; height: string } => ({
+  width: typeof width === 'number' ? rem(theme, width) : width,
+  height: typeof height === 'number' || height === undefined
+    ? rem(theme, height ?? 400)
+    : sizeStyles(size).height(theme),
+});
+
 interface ContainerStyleInput {
   theme: Theme;
   variant: Variant;
   size: Size;
   color: Color;
-  height: number | string;
-  width: number | string;
+  /** The frame's box, resolved by {@link frameBox}. */
+  height: string;
+  width: string;
   glow: boolean;
   pulse: boolean;
   glass: boolean;
@@ -39,7 +59,7 @@ interface ContainerStyleInput {
 const SURFACES: Record<Variant, (input: ContainerStyleInput) => CSSObject> = {
   glass: ({ theme, color, glass }) => ({
     backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.9),
-    backdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,
   }),
 
@@ -59,26 +79,24 @@ const SURFACES: Record<Variant, (input: ContainerStyleInput) => CSSObject> = {
 };
 
 export const containerStyles = (input: ContainerStyleInput): CSSObject => {
-  const { theme, variant, size, color, height, width, glow, pulse } = input;
+  const { theme, variant, color, height, width, glow, pulse } = input;
   const accent = accentFor(theme, color).main;
 
   return {
     position: 'relative' as const,
     width,
-    // A numeric height is taken literally; anything else falls back to the size
-    // preset, since a percentage cannot resolve against an unsized parent here.
-    height: typeof height === 'number' ? height : sizeStyles(size).height,
+    height,
     overflow: 'hidden',
     borderRadius: theme.spacing(1),
     transition: theme.transitions.create(['all'], {
       duration: theme.transitions.duration.standard,
     }),
-    ...(glow && { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` }),
+    ...(glow && { boxShadow: `0 0 ${rem(theme, 30)} ${alpha(accent, 0.4)}` }),
     ...(pulse && {
       animation: 'pulse 2s infinite',
       '@keyframes pulse': {
         '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },
-        '70%': { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },
+        '70%': { boxShadow: `0 0 0 ${rem(theme, 20)} ${alpha(accent, 0)}` },
         '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },
       },
     }),

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

@@ -11,7 +11,7 @@ import { withDefaults } from '../../../utils/withDefaults';
 import { useCarouselNavigation } from './Carousel.hooks';
 import { CarouselChrome } from './Carousel.chrome';
 import { CarouselTrack } from './Carousel.slide';
-import { containerStyles } from './Carousel.styles';
+import { containerStyles, frameBox } from './Carousel.styles';
 import type { CarouselItem, CarouselProps } from './Carousel.types';
 import { muiColor } from '../../../tokens/scales';
 
@@ -33,7 +33,6 @@ const DEFAULTS = {
   gradient: false,
   loading: false,
   disabled: false,
-  height: 400,
   width: '100%',
   pauseOnHover: true,
   indicatorPosition: 'bottom',
@@ -80,7 +79,7 @@ export const Carousel: React.FC<CarouselProps> = (props) => {
   );
 
   const frameSx = containerStyles({
-    theme, variant, size, color, height, width, glow, pulse, glass, gradient,
+    theme, variant, size, color, ...frameBox(theme, size, height, width), glow, pulse, glass, gradient,
   });
 
   if (loading) {

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

@@ -7,10 +7,10 @@ import React from 'react';
 
 import type { ChartProps } from './Chart.types';
 import { ChartContainer } from './ChartComposables';
-import { getSizeStyles, getVariantStyles } from './chart-internals';
+import { getSizeStyles, getVariantStyles, plotHeightPx } from './chart-internals';
 import { renderChartByType } from './chart-renderers';
 import { uiInk } from '../../../tokens/ink';
-import { muiColor } from '../../../tokens/scales';
+import { muiColor, rem } from '../../../tokens/scales';
 
 /**
  * Prop-driven Recharts wrapper (line/bar/area/pie/radar/scatter/composed)
@@ -97,8 +97,8 @@ export const Chart: React.FC<ChartProps> = (props) => {
       />
       <ChartContainer
         responsive={props.responsive ?? true}
-        width={props.width ?? '100%'}
-        height={props.fillHeight === true ? '100%' : sizeStyles.height}
+        width={typeof props.width === 'number' ? rem(theme, props.width) : (props.width ?? '100%')}
+        height={props.fillHeight === true ? '100%' : plotHeightPx(props.size, props.height)}
         data-testid={`${dataTestId}-container`}
       >
         {renderChartByType(props, theme)}