@12-apps/ui 6.35.0 → 6.37.0

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>
 

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

@@ -13,6 +13,7 @@ import React from 'react';
 
 import { navButtonSx, OVERLAY_Z_INDEX, overlayButtonSx } from './Lightbox.constants';
 import { useLightboxCopy } from './lightbox-copy-context';
+import { sxRem } from '../../../tokens/relative';
 
 type TestId = (suffix: string) => string;
 
@@ -24,7 +25,7 @@ export const LightboxCloseButton: FC<{ testId: TestId; onClose: () => void }> =
   return (
   <IconButton
     onClick={onClose}
-    sx={{ ...overlayButtonSx, position: 'absolute', top: 16, right: 16, zIndex: OVERLAY_Z_INDEX }}
+    sx={{ ...overlayButtonSx, position: 'absolute', top: sxRem(16), right: sxRem(16), zIndex: OVERLAY_Z_INDEX }}
     aria-label={copy.close}
     data-testid={testId('close')}
   >
@@ -37,7 +38,7 @@ const arrowSx = (side: 'left' | 'right') =>
   ({
     ...navButtonSx,
     position: 'absolute',
-    [side]: 16,
+    [side]: sxRem(16),
     top: '50%',
     transform: 'translateY(-50%)',
     zIndex: OVERLAY_Z_INDEX,
@@ -102,8 +103,8 @@ export const LightboxZoomControls: FC<LightboxZoomControlsProps> = ({
   <Box
     sx={{
       position: 'absolute',
-      top: 16,
-      left: 16,
+      top: sxRem(16),
+      left: sxRem(16),
       display: 'flex',
       flexDirection: 'column',
       gap: 1,
@@ -152,7 +153,7 @@ export const LightboxAutoplayButton: FC<LightboxAutoplayButtonProps> = ({
     sx={{
       ...overlayButtonSx,
       position: 'absolute',
-      top: 16,
+      top: sxRem(16),
       left: '50%',
       transform: 'translateX(-50%)',
       zIndex: OVERLAY_Z_INDEX,

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

@@ -2,12 +2,14 @@ import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import DialogContent from '@mui/material/DialogContent/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 
 import { captionSx, counterSx } from './Lightbox.constants';
 import type { LightboxItem } from './Lightbox.types';
 import { onMedia } from '../../../tokens/ink';
+import { rems, sxRem } from '../../../tokens/relative';
 
 type TestId = (suffix: string) => string;
 
@@ -23,6 +25,24 @@ export interface LightboxStageProps {
   thumbnailStrip: ReactNode;
 }
 
+const STAGE_SX = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 0,
+  position: 'relative',
+  height: '100vh',
+  overflow: 'hidden',
+} as const;
+
+const MEDIA_BOX_SX = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+} as const;
+
 // The viewport itself: the media, whatever floats over it, and the filmstrip.
 export const LightboxStage: FC<LightboxStageProps> = ({
   items,
@@ -36,15 +56,7 @@ export const LightboxStage: FC<LightboxStageProps> = ({
   thumbnailStrip,
 }) => (
   <DialogContent
-    sx={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 0,
-      position: 'relative',
-      height: '100vh',
-      overflow: 'hidden',
-    }}
+    sx={STAGE_SX}
     data-testid={testId('content')}
   >
     {isLoading && (
@@ -55,13 +67,7 @@ export const LightboxStage: FC<LightboxStageProps> = ({
     )}
 
     <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%',
-      }}
+      sx={MEDIA_BOX_SX}
       data-testid={testId('image-container')}
     >
       {media}
@@ -74,7 +80,7 @@ export const LightboxStage: FC<LightboxStageProps> = ({
           ...captionSx,
           position: 'absolute',
           // Sit above the filmstrip when there is one.
-          bottom: thumbnails ? 120 : 16,
+          bottom: sxRem(thumbnails ? 120 : 16),
           left: '50%',
           transform: 'translateX(-50%)',
           maxWidth: '80vw',
@@ -88,7 +94,13 @@ export const LightboxStage: FC<LightboxStageProps> = ({
 
     {items.length > 1 && (
       <Typography
-        sx={{ ...counterSx, position: 'absolute', top: 70, right: 16, padding: '4px 8px' }}
+        sx={{
+          ...counterSx,
+          position: 'absolute',
+          top: sxRem(70),
+          right: sxRem(16),
+          padding: (theme: Theme) => rems(theme, 4, 8),
+        }}
         aria-live="polite"
         data-testid={testId('counter')}
       >

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

@@ -7,10 +7,12 @@ import React from 'react';
 import { thumbnailStripSx } from './Lightbox.constants';
 import type { LightboxItem } from './Lightbox.types';
 import { onMedia, sheen } from '../../../tokens/ink';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
-const THUMB_WIDTH = 60;
-const THUMB_HEIGHT = 40;
+/** One filmstrip frame, in design px. */
+const THUMB = { widthPx: 60, heightPx: 40 } as const;
+
+const frame = (theme: Theme, color: string): string => `${rem(theme, 2)} solid ${color}`;
 
 const VideoThumbnail: FC = () => (
   <Box
@@ -44,7 +46,7 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
     sx={{
       ...thumbnailStripSx,
       position: 'absolute',
-      bottom: 16,
+      bottom: sxRem(16),
       left: '50%',
       transform: 'translateX(-50%)',
       display: 'flex',
@@ -60,14 +62,14 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
         key={`${item.src}-${index}`}
         onClick={() => onSelect(index)}
         sx={{
-          width: THUMB_WIDTH,
-          height: THUMB_HEIGHT,
+          width: sxRem(THUMB.widthPx),
+          height: sxRem(THUMB.heightPx),
           cursor: 'pointer',
-          border: currentIndex === index ? (theme: Theme) => `2px solid ${onMedia(theme)}` : '2px solid transparent',
+          border: (theme: Theme) => frame(theme, currentIndex === index ? onMedia(theme) : 'transparent'),
           borderRadius: 0.5,
           overflow: 'hidden',
           flexShrink: 0,
-          '&:hover': { border: (theme: Theme) => `2px solid ${sheen(theme, 0.7)}` },
+          '&:hover': { border: (theme: Theme) => frame(theme, sheen(theme, 0.7)) },
         }}
         data-testid={testId(`thumbnail-${index}`)}
       >