@12-apps/ui 6.34.0 → 6.36.0

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

@@ -1,12 +1,14 @@
-import { keyframes } from '@mui/material/styles/index.js';
+import { keyframes, 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% {
@@ -15,10 +17,10 @@ export const pulseAnimation = keyframes`
   }
 `;
 
-export const slideInUp = keyframes`
+export const slideInUp = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(8px);
+    transform: translateY(${rem(theme, 8)});
   }
   to {
     opacity: 1;
@@ -26,10 +28,10 @@ export const slideInUp = keyframes`
   }
 `;
 
-export const slideInDown = keyframes`
+export const slideInDown = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(-8px);
+    transform: translateY(${rem(theme, -8)});
   }
   to {
     opacity: 1;
@@ -37,10 +39,10 @@ export const slideInDown = keyframes`
   }
 `;
 
-export const slideInLeft = keyframes`
+export const slideInLeft = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(8px);
+    transform: translateX(${rem(theme, 8)});
   }
   to {
     opacity: 1;
@@ -48,10 +50,10 @@ export const slideInLeft = keyframes`
   }
 `;
 
-export const slideInRight = keyframes`
+export const slideInRight = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(-8px);
+    transform: translateX(${rem(theme, -8)});
   }
   to {
     opacity: 1;

package/src/components/data-display/HoverCard/HoverCard.content.tsx

@@ -2,16 +2,18 @@ import Avatar from '@mui/material/Avatar/index.js';
 import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem, sxRem } from '../../../tokens/relative';
+
 import type { HoverCardProps } from './HoverCard.types';
 
 const LoadingContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  minHeight: 80,
+  minHeight: rem(theme, 80),
   color: theme.palette.text.secondary,
 }));
 
@@ -39,12 +41,12 @@ const CardAvatar: React.FC<{ avatar: HoverCardProps['avatar'] }> = ({ avatar })
   if (!avatar) return null;
 
   if (typeof avatar === 'string') {
-    return <Avatar src={avatar} sx={{ width: 48, height: 48, mr: 2 }} />;
+    return <Avatar src={avatar} sx={{ width: sxRem(48), height: sxRem(48), mr: 2 }} />;
   }
 
   const element = avatar as React.ReactElement<{ sx?: object }>;
   return React.cloneElement(element, {
-    sx: { width: 48, height: 48, mr: 2, ...element.props.sx },
+    sx: { width: sxRem(48), height: sxRem(48), mr: 2, ...element.props.sx },
   });
 };
 
@@ -124,13 +126,14 @@ export const HoverCardContent: React.FC<HoverCardContentProps> = (props) => {
   const { variant, title, description, avatar, loading, loadingComponent, children, dataTestId } =
     props;
   const { loadingText } = props;
+  const theme = useTheme();
 
   if (loading) {
     return (
       <LoadingContainer>
         {loadingComponent || (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <CircularProgress size={20} />
+            <CircularProgress size={rem(theme, 20)} />
             <Typography variant="body2">{loadingText}</Typography>
           </Box>
         )}

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

@@ -11,6 +11,7 @@ import {
 } from './HoverCard.animations';
 import type { HoverCardAnimation, HoverCardPlacement } from './HoverCard.types';
 import { shadowInk } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
 /** The edge the card sits on, ignoring the `-start`/`-end` alignment suffix. */
 type Side = 'top' | 'bottom' | 'left' | 'right';
@@ -22,45 +23,46 @@ export const sideOf = (placement: HoverCardPlacement): Side => {
   return 'bottom';
 };
 
-const ARROW_SIZE = 8;
+/** The arrow's size, 8 design px, through the theme's type scale. */
+const arrowSize = (theme: Theme): string => rem(theme, 8);
 
 /**
  * The arrow is a CSS triangle: two transparent borders on the cross axis and one
  * filled border pointing back at the anchor. Every placement is that same shape,
  * so the table holds only which edge is filled and where the triangle sits.
  */
-const ARROWS: Record<Side, (color: string) => CSSObject> = {
-  top: (color) => ({
-    bottom: -ARROW_SIZE,
+const ARROWS: Record<Side, (size: string, color: string) => CSSObject> = {
+  top: (size, color) => ({
+    bottom: `-${size}`,
     left: '50%',
     transform: 'translateX(-50%)',
-    borderLeft: `${ARROW_SIZE}px solid transparent`,
-    borderRight: `${ARROW_SIZE}px solid transparent`,
-    borderTop: `${ARROW_SIZE}px solid ${color}`,
+    borderLeft: `${size} solid transparent`,
+    borderRight: `${size} solid transparent`,
+    borderTop: `${size} solid ${color}`,
   }),
-  bottom: (color) => ({
-    top: -ARROW_SIZE,
+  bottom: (size, color) => ({
+    top: `-${size}`,
     left: '50%',
     transform: 'translateX(-50%)',
-    borderLeft: `${ARROW_SIZE}px solid transparent`,
-    borderRight: `${ARROW_SIZE}px solid transparent`,
-    borderBottom: `${ARROW_SIZE}px solid ${color}`,
+    borderLeft: `${size} solid transparent`,
+    borderRight: `${size} solid transparent`,
+    borderBottom: `${size} solid ${color}`,
   }),
-  left: (color) => ({
-    right: -ARROW_SIZE,
+  left: (size, color) => ({
+    right: `-${size}`,
     top: '50%',
     transform: 'translateY(-50%)',
-    borderTop: `${ARROW_SIZE}px solid transparent`,
-    borderBottom: `${ARROW_SIZE}px solid transparent`,
-    borderLeft: `${ARROW_SIZE}px solid ${color}`,
+    borderTop: `${size} solid transparent`,
+    borderBottom: `${size} solid transparent`,
+    borderLeft: `${size} solid ${color}`,
   }),
-  right: (color) => ({
-    left: -ARROW_SIZE,
+  right: (size, color) => ({
+    left: `-${size}`,
     top: '50%',
     transform: 'translateY(-50%)',
-    borderTop: `${ARROW_SIZE}px solid transparent`,
-    borderBottom: `${ARROW_SIZE}px solid transparent`,
-    borderRight: `${ARROW_SIZE}px solid ${color}`,
+    borderTop: `${size} solid transparent`,
+    borderBottom: `${size} solid transparent`,
+    borderRight: `${size} solid ${color}`,
   }),
 };
 
@@ -69,7 +71,7 @@ export const arrowSx = (theme: Theme, placement: HoverCardPlacement): CSSObject
   width: 0,
   height: 0,
   zIndex: 1,
-  ...ARROWS[sideOf(placement)](theme.palette.background.paper),
+  ...ARROWS[sideOf(placement)](arrowSize(theme), theme.palette.background.paper),
 });
 
 type Origin = { vertical: 'top' | 'center' | 'bottom'; horizontal: 'left' | 'center' | 'right' };
@@ -95,14 +97,14 @@ export const getAnchorOrigin = (placement: HoverCardPlacement): Origin =>
 export const getTransformOrigin = (placement: HoverCardPlacement): Origin =>
   flip(ANCHOR_ORIGINS[sideOf(placement)]);
 
-const ANIMATIONS: Record<string, CSSObject> = {
+const ANIMATIONS: Record<string, (theme: Theme) => CSSObject> = {
   // `fade` shares slideInUp deliberately: the keyframes fade in while rising.
-  fade: { animation: `${slideInUp} 0.2s ease-out` },
-  scale: { transformOrigin: 'center', animation: `${scaleIn} 0.2s cubic-bezier(0.4, 0, 0.2, 1)` },
-  'slide-up': { animation: `${slideInUp} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` },
-  'slide-down': { animation: `${slideInDown} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` },
-  'slide-left': { animation: `${slideInLeft} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` },
-  'slide-right': { animation: `${slideInRight} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` },
+  fade: (theme) => ({ animation: `${slideInUp(theme)} 0.2s ease-out` }),
+  scale: () => ({ transformOrigin: 'center', animation: `${scaleIn} 0.2s cubic-bezier(0.4, 0, 0.2, 1)` }),
+  'slide-up': (theme) => ({ animation: `${slideInUp(theme)} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` }),
+  'slide-down': (theme) => ({ animation: `${slideInDown(theme)} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` }),
+  'slide-left': (theme) => ({ animation: `${slideInLeft(theme)} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` }),
+  'slide-right': (theme) => ({ animation: `${slideInRight(theme)} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` }),
 };
 
 const VARIANTS: Record<string, (theme: Theme) => CSSObject> = {
@@ -113,10 +115,10 @@ const VARIANTS: Record<string, (theme: Theme) => CSSObject> = {
   }),
   glass: (theme) => ({
     backgroundColor: alpha(theme.palette.background.paper, 0.85),
-    backdropFilter: 'blur(20px)',
-    WebkitBackdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    boxShadow: `0 8px 32px ${shadowInk(theme, 0.12)}`,
+    boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.12)}`,
   }),
   detailed: (theme) => ({
     backgroundColor: theme.palette.background.paper,
@@ -131,7 +133,7 @@ const VARIANTS: Record<string, (theme: Theme) => CSSObject> = {
 };
 
 const glowStyles = (theme: Theme): CSSObject => ({
-  boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+  boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
   filter: 'brightness(1.05)',
 });
 
@@ -147,7 +149,7 @@ const pulseStyles = (theme: Theme): CSSObject => ({
     borderRadius: 'inherit',
     backgroundColor: theme.palette.primary.main,
     opacity: 0.1,
-    animation: `${pulseAnimation} 2s infinite`,
+    animation: `${pulseAnimation(theme)} 2s infinite`,
     pointerEvents: 'none',
     zIndex: -1,
   },
@@ -168,9 +170,9 @@ export const cardSx = (theme: Theme, flags: CardStyleFlags): CSSObject => {
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     position: 'relative',
     overflow: 'visible',
-    minWidth: 200,
-    maxWidth: 400,
-    ...(animation ? (ANIMATIONS[animation] ?? {}) : {}),
+    minWidth: rem(theme, 200),
+    maxWidth: rem(theme, 400),
+    ...(animation ? (ANIMATIONS[animation]?.(theme) ?? {}) : {}),
     ...(customVariant ? (VARIANTS[customVariant]?.(theme) ?? {}) : {}),
     // The old "both" arm was exactly these two spread together.
     ...(glow && glowStyles(theme)),

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

@@ -2,9 +2,10 @@ import Box from '@mui/material/Box/index.js';
 import Card from '@mui/material/Card/index.js';
 import CardContent from '@mui/material/CardContent/index.js';
 import Popover from '@mui/material/Popover/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem } from '../../../tokens/relative';
 import { withDefaults } from '../../../utils/withDefaults';
 
 import { HoverCardContent } from './HoverCard.content';
@@ -13,7 +14,7 @@ import { arrowSx, cardSx, getAnchorOrigin, getTransformOrigin, sideOf } from './
 import type { CardStyleFlags } from './HoverCard.styles';
 import type { HoverCardAnimation, HoverCardPlacement, HoverCardProps } from './HoverCard.types';
 
-const ArrowContainer = styled('div')<{ placement: HoverCardPlacement; offset: number }>(
+const ArrowContainer = styled('div')<{ placement: HoverCardPlacement; offset?: number }>(
   ({ theme, placement }) => ({ ...arrowSx(theme, placement) }),
 );
 
@@ -43,10 +44,8 @@ const DEFAULTS = {
   animation: 'fade',
   enterDelay: 700,
   exitDelay: 0,
-  maxWidth: 400,
   loading: false,
   touchEnabled: true,
-  offset: 8,
   disabled: false,
 } satisfies Partial<HoverCardProps>;
 
@@ -55,11 +54,23 @@ type ResolvedProps = HoverCardProps & Required<Pick<HoverCardProps, keyof typeof
 /** Padding is the variant's own: detailed roomier, minimal tighter. */
 const CONTENT_PADDING: Record<string, number> = { detailed: 3, minimal: 1.5 };
 
-/** The card is nudged off the anchor on whichever side it sits. */
-const offsetMargin = (placement: HoverCardPlacement, offset: number) => {
+/**
+ * The card is nudged off the anchor on whichever side it sits — `offset` design
+ * px (8 unless the caller says otherwise), through the theme's type scale.
+ */
+const offsetMargin = (theme: Theme, placement: HoverCardPlacement, offset: number | undefined) => {
   const side = sideOf(placement);
   const key = ({ top: 'mt', bottom: 'mb', left: 'ml', right: 'mr' } as const)[side];
-  return { [key]: `${offset}px` };
+  return { [key]: rem(theme, offset ?? 8) };
+};
+
+/**
+ * The card's cap: 400 design px unless the caller says otherwise. `sx` has always
+ * read a number of 1 or less as a fraction of the parent, and that stays so.
+ */
+const capOf = (theme: Theme, maxWidth: number | undefined): string => {
+  const cap = maxWidth ?? 400;
+  return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
 };
 
 export const HoverCard = React.forwardRef<HTMLDivElement, HoverCardProps>((props, ref) => {
@@ -121,7 +132,7 @@ export const HoverCard = React.forwardRef<HTMLDivElement, HoverCardProps>((props
             pulse={pulse}
             animation={animation}
             data-testid={dataTestId || 'hover-card-content'}
-            sx={{ maxWidth, ...offsetMargin(placement, offset) }}
+            sx={(theme) => ({ maxWidth: capOf(theme, maxWidth), ...offsetMargin(theme, placement, offset) })}
           >
             <CardContent sx={{ p: padding, '&:last-child': { pb: padding } }}>
               <HoverCardContent

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.hooks.ts

@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import type { InteractiveTooltipProps } from './InteractiveTooltip.types';
 
-type TooltipDefaultedKeys = 'variant' | 'size' | 'glow' | 'pulse' | 'maxWidth' | 'clickable';
+// `maxWidth` defaults where it is read (`tooltipCap`), in design px through the theme.
+type TooltipDefaultedKeys = 'variant' | 'size' | 'glow' | 'pulse' | 'clickable';
 
 type ResolvedTooltipProps = InteractiveTooltipProps &
   Required<Pick<InteractiveTooltipProps, TooltipDefaultedKeys>>;
@@ -12,7 +13,6 @@ const TOOLTIP_DEFAULTS: Pick<InteractiveTooltipProps, TooltipDefaultedKeys> = {
   size: 'md',
   glow: false,
   pulse: false,
-  maxWidth: 300,
   clickable: true,
 };
 

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

@@ -2,6 +2,7 @@ import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 const pulseAnimation = keyframes`
   0% {
@@ -19,12 +20,14 @@ const pulseAnimation = keyframes`
 `;
 
 const SIZE_MAP = {
-  sm: { fontSize: '0.75rem', padding: '4px 8px' },
-  md: { fontSize: '0.875rem', padding: '6px 12px' },
-  lg: { fontSize: '1rem', padding: '8px 16px' },
+  sm: { fontSize: sxRem(12), padding: (theme: Theme) => rems(theme, 4, 8) },
+  md: { fontSize: sxRem(14), padding: (theme: Theme) => rems(theme, 6, 12) },
+  lg: { fontSize: sxRem(16), padding: (theme: Theme) => rems(theme, 8, 16) },
 } as const;
 
-export const getSizeStyles = (size?: string): { fontSize: string; padding: string } =>
+export const getSizeStyles = (
+  size?: string,
+): { fontSize: (theme: Theme) => string; padding: (theme: Theme) => string } =>
   SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;
 
 export const variantStyles = (theme: Theme, variant?: string): CSSObject => {
@@ -33,13 +36,13 @@ export const variantStyles = (theme: Theme, variant?: string): CSSObject => {
       return {
         backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.92),
         color: absoluteInk(theme).white,
-        boxShadow: `0 4px 12px ${shadowInk(theme, 0.3)}`,
+        boxShadow: `${rems(theme, 0, 4, 12)} ${shadowInk(theme, 0.3)}`,
       };
     case 'dark':
       return {
         backgroundColor: absoluteInk(theme).black,
         color: absoluteInk(theme).white,
-        boxShadow: `0 6px 16px ${shadowInk(theme, 0.5)}`,
+        boxShadow: `${rems(theme, 0, 6, 16)} ${shadowInk(theme, 0.5)}`,
         border: `1px solid ${sheen(theme, 0.1)}`,
       };
     case 'light':
@@ -47,16 +50,16 @@ export const variantStyles = (theme: Theme, variant?: string): CSSObject => {
         backgroundColor: absoluteInk(theme).white,
         color: neutralTones(theme).inverseSurface,
         border: `1px solid ${alpha(neutralTones(theme).subtle, 0.4)}`,
-        boxShadow: `0 4px 16px ${shadowInk(theme, 0.15)}`,
+        boxShadow: `${rems(theme, 0, 4, 16)} ${shadowInk(theme, 0.15)}`,
       };
     case 'glass':
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.75),
-        backdropFilter: 'blur(24px) saturate(180%)',
-        WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+        backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+        WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
         border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,
         color: theme.palette.text.primary,
-        boxShadow: `0 8px 32px ${shadowInk(theme, 0.12)}`,
+        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.12)}`,
       };
     default:
       return {};
@@ -67,7 +70,7 @@ export const variantStyles = (theme: Theme, variant?: string): CSSObject => {
 // out one by one, but each is just the union of whichever flags are set.
 export const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({
   ...(glow && {
-    boxShadow: `0 0 15px 3px ${alpha(theme.palette.primary.main, 0.4)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,
     filter: 'brightness(1.05)',
   }),
   ...(pulse && {
@@ -75,6 +78,17 @@ export const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): C
   }),
 });
 
+/**
+ * The tooltip's cap: 300 design px unless the caller says otherwise. `sx` has
+ * always read a number of 1 or less as a fraction of the parent, and that stays so.
+ */
+export const tooltipCap =
+  (maxWidth: number | undefined) =>
+  (theme: Theme): string => {
+    const cap = maxWidth ?? 300;
+    return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
+  };
+
 export const arrowColor = (theme: Theme, variant?: string): string => {
   switch (variant) {
     case 'light':

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

@@ -7,6 +7,7 @@ import {
   arrowColor,
   emphasisStyles,
   getSizeStyles,
+  tooltipCap,
   variantStyles,
 } from './InteractiveTooltip.styles';
 import type { InteractiveTooltipProps } from './InteractiveTooltip.types';
@@ -25,8 +26,8 @@ const StyledTooltip = styled(MuiTooltip, {
   return {
     '& .MuiTooltip-tooltip': {
       borderRadius: theme.spacing(1),
-      fontSize: sizeStyles.fontSize,
-      padding: sizeStyles.padding,
+      fontSize: sizeStyles.fontSize(theme),
+      padding: sizeStyles.padding(theme),
       fontWeight: 500,
       transition: 'all 0.3s ease',
       position: 'relative',
@@ -101,7 +102,7 @@ export const InteractiveTooltip = React.forwardRef<HTMLDivElement, InteractiveTo
           disableTouchListener={isPinned}
           slotProps={{
             tooltip: {
-              sx: { maxWidth },
+              sx: { maxWidth: tooltipCap(maxWidth) },
               role: 'tooltip',
               ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),
             },

package/src/components/data-display/LazyImage/LazyImage.hooks.ts

@@ -1,5 +1,8 @@
+import { useTheme } from '@mui/material/styles/index.js';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import { remPx } from '../../../tokens/relative';
+
 import type { LazyImageProps, LazyImageState } from './LazyImage.types';
 
 type LazyImageDefaultedKeys =
@@ -8,7 +11,6 @@ type LazyImageDefaultedKeys =
   | 'objectFit'
   | 'objectPosition'
   | 'lazy'
-  | 'rootMargin'
   | 'threshold'
   | 'fadeIn'
   | 'fadeInDuration'
@@ -30,7 +32,6 @@ const LAZY_IMAGE_DEFAULTS: Pick<LazyImageProps, LazyImageDefaultedKeys> = {
   objectFit: 'cover',
   objectPosition: 'center',
   lazy: true,
-  rootMargin: '100px',
   threshold: 0,
   fadeIn: true,
   fadeInDuration: 300,
@@ -78,7 +79,11 @@ const useVisibility = (
   isVisible: boolean,
   onVisible: () => void,
 ) => {
-  const { lazy, src, rootMargin, threshold, onLoadStart } = props;
+  const { lazy, src, threshold, onLoadStart } = props;
+  const theme = useTheme();
+  // `IntersectionObserver` takes px or %, never rem: the default reach is 100
+  // design px, measured through the theme so it moves with the root.
+  const rootMargin = props.rootMargin ?? `${remPx(theme, 100)}px`;
 
   useEffect(() => {
     if (!lazy || isVisible) {

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

@@ -1,12 +1,13 @@
 import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
-import { styled, useTheme } from '@mui/material/styles/index.js';
+import { styled, useTheme, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 import { Skeleton } from '../../layout/Skeleton';
 import type { ResolvedLazyImageProps } from './LazyImage.hooks';
 import { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';
 import type { LazyImageProps } from './LazyImage.types';
 import { sheen } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const ImageContainer = styled(Box)(() => ({
   position: 'relative',
@@ -52,13 +53,28 @@ const FallbackContainer = styled(Box)(({ theme }) => ({
   left: 0,
 }));
 
-/** The box the image occupies, shared by the real image and every stand-in for it. */
+type Length = number | string | undefined;
+
+/** A length prop as React `style` and MUI's `Skeleton` read it: a number is design px. */
+const styleLength = (theme: Theme, value: Length): string | undefined =>
+  typeof value === 'number' ? rem(theme, value) : value;
+
+/**
+ * A length prop as `sx` reads it on a width or height: a number of 1 or less is
+ * a fraction of the parent, and that stays so; any other number is design px.
+ */
+const sxLength = (theme: Theme, value: Length): string | undefined => {
+  if (typeof value !== 'number') return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+};
+
+/** The box the image occupies, as CSS, shared by the real image and every stand-in for it. */
 interface BoxMetrics {
-  width?: number | string;
-  height?: number | string;
+  width?: string;
+  height?: string;
   objectFit: NonNullable<LazyImageProps['objectFit']>;
   objectPosition: string;
-  borderRadius?: number | string;
+  borderRadius?: string;
 }
 
 interface IndicatorProps {
@@ -66,17 +82,20 @@ interface IndicatorProps {
   metrics: BoxMetrics;
 }
 
-const SkeletonIndicator: React.FC<IndicatorProps> = ({ props, metrics }) => (
-  <Skeleton
-    variant="rectangular"
-    width={metrics.width || '100%'}
-    height={metrics.height || 200}
-    animation={props.skeletonProps.animation || 'pulse'}
-    intensity={props.skeletonProps.intensity}
-    borderRadius={props.borderRadius}
-    data-testid={`${props['data-testid']}-skeleton`}
-  />
-);
+const SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {
+  const theme = useTheme();
+  return (
+    <Skeleton
+      variant="rectangular"
+      width={styleLength(theme, props.width || '100%')}
+      height={styleLength(theme, props.height || 200)}
+      animation={props.skeletonProps.animation || 'pulse'}
+      intensity={props.skeletonProps.intensity}
+      borderRadius={props.borderRadius}
+      data-testid={`${props['data-testid']}-skeleton`}
+    />
+  );
+};
 
 const SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {
   const theme = useTheme();
@@ -85,7 +104,7 @@ const SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {
   return (
     <SpinnerOverlay>
       <CircularProgress
-        size={spinnerProps.size || 40}
+        size={styleLength(theme, spinnerProps.size || 40)}
         thickness={spinnerProps.thickness || 4}
         sx={{ color: spinnerProps.color || theme.palette.primary.main }}
         data-testid={`${props['data-testid']}-spinner`}
@@ -129,7 +148,8 @@ const LoadingIndicator: React.FC<
 };
 
 const ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {
-  const { alt, fallback, borderRadius } = props;
+  const theme = useTheme();
+  const { alt, fallback, width, height, borderRadius } = props;
   const testId = props['data-testid'];
 
   if (!fallback) return null;
@@ -149,7 +169,7 @@ const ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {
 
   return (
     <FallbackContainer
-      sx={{ width: metrics.width, height: metrics.height, borderRadius }}
+      sx={{ width: sxLength(theme, width), height: sxLength(theme, height), borderRadius }}
       data-testid={`${testId}-fallback`}
     >
       {fallback}
@@ -163,6 +183,7 @@ const ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {
  */
 export const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps) {
   const props = resolveLazyImageProps(rawProps);
+  const theme = useTheme();
   const {
     state,
     containerRef,
@@ -176,18 +197,22 @@ export const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps)
   const { width, height, borderRadius, alt } = props;
   const testId = props['data-testid'];
   const metrics: BoxMetrics = {
-    width,
-    height,
+    width: styleLength(theme, width),
+    height: styleLength(theme, height),
     objectFit: props.objectFit,
     objectPosition: props.objectPosition,
-    borderRadius,
+    borderRadius: styleLength(theme, borderRadius),
   };
 
   return (
     <ImageContainer
       ref={containerRef}
       className={props.className}
-      sx={{ width: width || 'auto', height: height || 'auto', borderRadius }}
+      sx={{
+        width: sxLength(theme, width || 'auto'),
+        height: sxLength(theme, height || 'auto'),
+        borderRadius,
+      }}
       data-testid={testId}
     >
       {showLoading && (