@12-apps/ui 6.35.0 → 6.36.0

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,7 +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 { sxRem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 const pulseAnimation = keyframes`
   0% {
@@ -20,12 +20,14 @@ const pulseAnimation = keyframes`
 `;
 
 const SIZE_MAP = {
-  sm: { fontSize: sxRem(12), padding: '4px 8px' },
-  md: { fontSize: sxRem(14), padding: '6px 12px' },
-  lg: { fontSize: sxRem(16), 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: (theme: Theme) => 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 => {
@@ -34,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':
@@ -48,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 {};
@@ -68,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 && {
@@ -76,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';
@@ -26,7 +27,7 @@ const StyledTooltip = styled(MuiTooltip, {
     '& .MuiTooltip-tooltip': {
       borderRadius: theme.spacing(1),
       fontSize: sizeStyles.fontSize(theme),
-      padding: sizeStyles.padding,
+      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 && (

package/src/components/data-display/Lightbox/Lightbox.constants.ts

@@ -1,7 +1,7 @@
 import type { Theme } from '@mui/material/styles/index.js';
 
 import { onMedia, scrim, sheen } from '../../../tokens/ink';
-import { sxRem } from '../../../tokens/relative';
+import { remPx, sxRem } from '../../../tokens/relative';
 
 export const MIN_ZOOM = 0.5;
 export const MAX_ZOOM = 5;
@@ -10,9 +10,14 @@ export const ZOOM_STEP = 1.2;
 export const WHEEL_ZOOM_FACTOR = 0.01;
 
 export const DEFAULT_AUTOPLAY_INTERVAL_MS = 4000;
-export const MIN_SWIPE_DISTANCE = 50;
 export const OVERLAY_Z_INDEX = 1000;
 
+/**
+ * How far a finger must travel to count as a swipe: 50 design px, in the px a
+ * touch event reports, so it moves with the theme's type scale.
+ */
+export const minSwipeDistance = (theme: Theme): number => remPx(theme, 50);
+
 const SCRIM = (theme: Theme): string => scrim(theme, 0.5);
 const SCRIM_HOVER = (theme: Theme): string => scrim(theme, 0.7);
 

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

@@ -1,11 +1,12 @@
+import { useTheme } from '@mui/material/styles/index.js';
 import type React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import {
   DEFAULT_AUTOPLAY_INTERVAL_MS,
   MAX_ZOOM,
-  MIN_SWIPE_DISTANCE,
   MIN_ZOOM,
+  minSwipeDistance,
   WHEEL_ZOOM_FACTOR,
   ZOOM_STEP,
 } from './Lightbox.constants';
@@ -224,6 +225,7 @@ export const useSwipe = ({
   next: () => void;
   close: () => void;
 }) => {
+  const theme = useTheme();
   const touchStartRef = useRef<{ x: number; y: number } | null>(null);
 
   const handleTouchStart = useCallback((event: React.TouchEvent) => {
@@ -240,19 +242,20 @@ export const useSwipe = ({
 
       const deltaX = touch.clientX - start.x;
       const deltaY = touch.clientY - start.y;
+      const swipe = minSwipeDistance(theme);
 
       // Whichever axis moved further decides what the gesture meant.
       if (Math.abs(deltaX) > Math.abs(deltaY)) {
-        if (Math.abs(deltaX) > MIN_SWIPE_DISTANCE) {
+        if (Math.abs(deltaX) > swipe) {
           if (deltaX > 0) prev();
           else next();
         }
         return;
       }
 
-      if (deltaY > MIN_SWIPE_DISTANCE) close();
+      if (deltaY > swipe) close();
     },
-    [prev, next, close],
+    [prev, next, close, theme],
   );
 
   return { handleTouchStart, handleTouchEnd };

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

@@ -14,13 +14,14 @@ import { LightboxStage } from './LightboxStage';
 import { LightboxThumbnails } from './LightboxThumbnails';
 import { useLightbox } from './useLightbox';
 import { scrim } from '../../../tokens/ink';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const DIALOG_STATIC_PROPS = {
   maxWidth: false,
   fullScreen: true,
   TransitionComponent: Fade,
   TransitionProps: { timeout: 300 },
-  PaperProps: { sx: { background: (theme: Theme) => scrim(theme, 0.9), backdropFilter: 'blur(2px)' } },
+  PaperProps: { sx: { background: (theme: Theme) => scrim(theme, 0.9), backdropFilter: (theme: Theme) => `blur(${rem(theme, 2)})` } },
   'aria-label': 'Lightbox',
   'aria-labelledby': 'lightbox-title',
   role: 'dialog',
@@ -49,7 +50,7 @@ export const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentP
       data-testid={dataTestId || 'lightbox'}
     >
       {/* Visually hidden title for screen readers */}
-      <Typography id="lightbox-title" variant="h6" sx={{ position: 'absolute', left: -10000 }}>
+      <Typography id="lightbox-title" variant="h6" sx={{ position: 'absolute', left: sxRem(-10000) }}>
         Lightbox - {currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`}
       </Typography>