@12-apps/ui 6.35.0 → 6.37.0

package/src/components/data-display/DataViews/data-views-view-nav.tsx

@@ -232,7 +232,7 @@ function ToggleContents({
           component="span"
           aria-label={copy.nav.unsavedChanges}
           data-testid={`${testIdPrefix}-display-dirty`}
-          sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }}
+          sx={{ height: sxRem(6), width: sxRem(6), borderRadius: "50%", bgcolor: "primary.main" }}
         />
       )}
       {interactive && (
@@ -260,7 +260,7 @@ function ViewToggle({
   const interactive = Boolean(view.nav);
   // One decision, not eight: a panel with no views renders the same row as
   // plain text rather than as a button that opens nothing.
-  const affordance = interactive
+  const affordanceSx = interactive
     ? { px: 0.75, py: 0.25, cursor: "pointer", "&:hover": { bgcolor: "action.hover" } }
     : { px: 0, py: 0, cursor: "default" };
   return (
@@ -281,7 +281,7 @@ function ViewToggle({
         font: "inherit",
         fontSize: sxRem(12),
         bgcolor: open ? "action.selected" : "transparent",
-        ...affordance,
+        ...affordanceSx,
       }}
     >
       <ToggleContents view={view} open={open} interactive={interactive} testIdPrefix={testIdPrefix} />
@@ -300,7 +300,7 @@ export function ViewHeader(props: {
   return (
     <Box sx={{ display: "flex", alignItems: "center", gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: "divider" }}>
       <Text variant="caption" as="span">
-        <Box component="span" sx={{ textTransform: "uppercase", letterSpacing: 0.5, color: "text.disabled" }}>
+        <Box component="span" sx={{ textTransform: "uppercase", letterSpacing: sxRem(0.5), color: "text.disabled" }}>
           {copy.nav.label}
         </Box>
       </Text>

package/src/components/data-display/DataViews/save-view-preview.tsx

@@ -11,6 +11,7 @@ import { useDataViewsCopy } from "./data-views-copy-context";
 import { Box } from "../../../mui/Box";
 import { Stack } from "../../../mui/Stack";
 import { Text } from "../../typography/Text";
+import { sxRem } from "../../../tokens/relative";
 
 export interface PreviewBoxProps {
   preview: { filters: string[]; columns: string[]; sort: string[] };
@@ -31,7 +32,7 @@ function SummaryRow({
   return (
     <Box sx={{ display: "flex", gap: 1.5 }} data-testid={testId}>
       <Text variant="caption" as="span">
-        <Box component="span" sx={{ width: 116, flexShrink: 0, color: "text.secondary" }}>
+        <Box component="span" sx={{ width: sxRem(116), flexShrink: 0, color: "text.secondary" }}>
           {label}
         </Box>
       </Text>
@@ -53,7 +54,7 @@ export function PreviewBox({ preview, testIdPrefix }: PreviewBoxProps): React.JS
       <Text variant="caption" as="p">
         <Box
           component="span"
-          sx={{ display: "block", mb: 1, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600, color: "text.disabled" }}
+          sx={{ display: "block", mb: 1, textTransform: "uppercase", letterSpacing: sxRem(0.6), fontWeight: 600, color: "text.disabled" }}
         >
           {copy.saveView.previewHeading}
         </Box>

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

@@ -5,6 +5,7 @@ import { forwardRef } from 'react';
 
 import { useDateTimeParts } from './DateTimeDisplay.hooks';
 import type { DateTimeDisplayProps } from './DateTimeDisplay.types';
+import { sxRem } from '../../../tokens/relative';
 import type { SizeValue } from '../../../tokens/scales';
 
 /**
@@ -14,13 +15,13 @@ function getFontSizes(size: SizeValue) {
   switch (size) {
     case 'xs':
     case 'sm':
-      return { date: '0.75rem', time: '0.65rem' };
+      return { date: sxRem(12), time: sxRem(10.4) };
     case 'lg':
     case 'xl':
-      return { date: '1rem', time: '0.875rem' };
+      return { date: sxRem(16), time: sxRem(14) };
     case 'md':
     default:
-      return { date: '0.875rem', time: '0.75rem' };
+      return { date: sxRem(14), time: sxRem(12) };
   }
 }
 

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

@@ -1,6 +1,8 @@
 import Box from '@mui/material/Box/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
 import type { ReactNode } from 'react';
 
+import { rem } from '../../../tokens/relative';
 import { Text } from '../../typography/Text/Text';
 
 export interface DescriptionItemProps {
@@ -85,9 +87,9 @@ const containerSx = (isHorizontal: boolean, align: 'start' | 'center' | 'end') =
   textAlign: align,
 });
 
-const labelStyle = (isHorizontal: boolean) => ({
+const labelStyle = (theme: Theme, isHorizontal: boolean) => ({
   textTransform: 'uppercase' as const,
-  marginBottom: isHorizontal ? 0 : '0.25rem',
+  marginBottom: isHorizontal ? 0 : rem(theme, 4),
   minWidth: isHorizontal ? ('fit-content' as const) : undefined,
   flexShrink: isHorizontal ? 0 : undefined,
 });
@@ -105,6 +107,7 @@ export const DescriptionItem: React.FC<DescriptionItemProps> = ({
   className,
   'data-testid': dataTestId,
 }) => {
+  const theme = useTheme();
   const isHorizontal = orientation === 'horizontal';
   const testId = makeTestId(dataTestId);
 
@@ -118,7 +121,7 @@ export const DescriptionItem: React.FC<DescriptionItemProps> = ({
         variant="caption"
         size="xs"
         color="secondary"
-        style={labelStyle(isHorizontal)}
+        style={labelStyle(theme, isHorizontal)}
         data-testid={testId('label')}
       >
         {label}

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

@@ -27,6 +27,7 @@ import {
 } from './EmptyState.metrics';
 import type { EmptyStateProps, EmptyStateVariant } from './EmptyState.types';
 import { resolveTestId } from '../../../platform/test-id';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** The shared action list names its glyph; the web draws it with MUI's icon. */
 const ACTION_ICONS: Record<ActionIconName, React.ReactNode> = {
@@ -42,7 +43,7 @@ const Illustration: React.FC<{
   <Box
     data-testid={testId}
     sx={{
-      maxWidth: illustrationMaxWidth(variant),
+      maxWidth: sxRem(illustrationMaxWidth(variant)),
       width: '100%',
       height: 'auto',
       opacity: illustrationOpacity(variant),
@@ -73,7 +74,7 @@ const Actions: React.FC<{
           onClick={spec.onClick}
           startIcon={spec.icon && ACTION_ICONS[spec.icon]}
           data-testid={testId(spec.key)}
-          sx={{ minWidth: ACTION_MIN_WIDTH }}
+          sx={{ minWidth: sxRem(ACTION_MIN_WIDTH) }}
         >
           {spec.label}
         </Button>
@@ -130,7 +131,7 @@ const Content: React.FC<{
         sx={{
           fontWeight: theme.typography.fontWeightMedium,
           color: theme.palette.text.primary,
-          maxWidth: TITLE_MAX_WIDTH,
+          maxWidth: rem(theme, TITLE_MAX_WIDTH),
         }}
       >
         {title}
@@ -142,7 +143,7 @@ const Content: React.FC<{
           color="text.secondary"
           data-testid={testId('description')}
           sx={{
-            maxWidth: DESCRIPTION_MAX_WIDTH,
+            maxWidth: rem(theme, DESCRIPTION_MAX_WIDTH),
             lineHeight: DESCRIPTION_LINE_HEIGHT,
           }}
         >
@@ -192,7 +193,7 @@ export const EmptyState: React.FC<EmptyStateProps> = React.memo((props) => {
         justifyContent: 'center',
         textAlign: 'center',
         padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),
-        minHeight: EMPTY_STATE_MIN_HEIGHT,
+        minHeight: rem(theme, EMPTY_STATE_MIN_HEIGHT),
         gap: theme.spacing(EMPTY_STATE_GAP_UNITS),
       }}
     >

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

@@ -24,7 +24,7 @@ import {
 } from './ErrorState.metrics';
 import type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';
 import { resolveTestId } from '../../../platform/test-id';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const makeTestId =
   (dataTestId?: string) =>
@@ -50,8 +50,8 @@ const ErrorIcon: React.FC<{
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        width: ERROR_ICON_BOX,
-        height: ERROR_ICON_BOX,
+        width: rem(theme, ERROR_ICON_BOX),
+        height: rem(theme, ERROR_ICON_BOX),
         borderRadius: '50%',
         backgroundColor: color.light,
         opacity: ERROR_ICON_BOX_OPACITY,
@@ -93,7 +93,7 @@ const ErrorText: React.FC<{
         color="text.secondary"
         data-testid={testId('message')}
         sx={{
-          maxWidth: ERROR_MESSAGE_MAX_WIDTH,
+          maxWidth: rem(theme, ERROR_MESSAGE_MAX_WIDTH),
           lineHeight: ERROR_MESSAGE_LINE_HEIGHT,
         }}
       >
@@ -134,7 +134,7 @@ export const ErrorState: React.FC<ErrorStateProps> = React.memo((props) => {
         justifyContent: 'center',
         textAlign: 'center',
         padding: theme.spacing(ERROR_STATE_PADDING_UNITS),
-        minHeight: ERROR_STATE_MIN_HEIGHT,
+        minHeight: rem(theme, ERROR_STATE_MIN_HEIGHT),
         gap: theme.spacing(ERROR_STATE_GAP_UNITS),
       }}
     >
@@ -151,7 +151,7 @@ export const ErrorState: React.FC<ErrorStateProps> = React.memo((props) => {
           data-testid={testId('retry-button')}
           sx={{
             mt: theme.spacing(RETRY_MARGIN_TOP_UNITS),
-            minWidth: RETRY_MIN_WIDTH,
+            minWidth: rem(theme, RETRY_MIN_WIDTH),
           }}
         >
           {retryLabel}

package/src/components/data-display/FleetMap/FleetBody.tsx

@@ -1,7 +1,10 @@
 import Box from '@mui/material/Box/index.js';
 import Stack from '@mui/material/Stack/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem } from '../../../tokens/relative';
+
 import { FleetCanvas } from './FleetCanvas';
 import type { FleetMapState } from './FleetMap.hooks';
 import type { FleetMapCopy } from './FleetMap.types';
@@ -65,7 +68,7 @@ export function FleetBody({
           the six-width pass was taken at. */}
       <Box
         sx={{
-          flexBasis: { md: '280px', lg: '320px', xl: '380px' },
+          flexBasis: (theme: Theme) => ({ md: rem(theme, 280), lg: rem(theme, 320), xl: rem(theme, 380) }),
           flexShrink: 0,
           minWidth: 0,
           maxHeight: height,

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

@@ -1,9 +1,10 @@
 import Box from '@mui/material/Box/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { useTheme } from '@mui/material/styles/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { SR_ONLY_SX } from '../../form/Label/Label.styles';
+import { rem } from '../../../tokens/relative';
 import { EmptyState } from '../EmptyState/EmptyState';
 
 import { FleetBody } from './FleetBody';
@@ -15,8 +16,8 @@ import {
 } from './FleetMap.metrics';
 import type { FleetMapProps } from './FleetMap.types';
 
-/** The map's own default height. Overridable, and never a hardcoded viewport. */
-const DEFAULT_HEIGHT = '420px';
+/** The map's own default height, in design px. Overridable, and never a hardcoded viewport. */
+const defaultHeight = (theme: Theme): string => rem(theme, 420);
 
 /**
  * The reload announcement, and nothing else.
@@ -96,12 +97,13 @@ export const FleetMap: React.FC<FleetMapProps> = React.memo(
     onSelect,
     laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
     staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,
-    height = DEFAULT_HEIGHT,
+    height: heightProp,
     loading = false,
     className,
     dataTestId,
   }) => {
     const theme = useTheme();
+    const height = heightProp ?? defaultHeight(theme);
     const testId = dataTestId || 'fleet-map';
     const headingId = React.useId();
     const { ordered, active, centre, select, markers, onKeyDown } = useFleetMap(

package/src/components/data-display/FleetMap/FleetRoster.tsx

@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem } from '../../../tokens/relative';
 import { Skeleton } from '../../layout/Skeleton/Skeleton';
 
 import { freshnessOf } from './FleetMap.helpers';
@@ -196,8 +197,8 @@ function FleetRow({
         aria-hidden="true"
         data-testid={`${testId}-dot`}
         sx={{
-          width: FLEET_DOT.size,
-          height: FLEET_DOT.size,
+          width: rem(theme, FLEET_DOT.size),
+          height: rem(theme, FLEET_DOT.size),
           borderRadius: '50%',
           flexShrink: 0,
           backgroundColor: color,
@@ -229,13 +230,14 @@ function FleetRow({
  * against 12px on a re-themed host.
  */
 function FirstLoad({ testId }: { testId: string }): React.JSX.Element {
+  const theme = useTheme();
   return (
     <Stack spacing={FLEET_SKELETON.gapUnits} data-testid={`${testId}-skeleton`} aria-hidden="true">
       {Array.from({ length: FLEET_SKELETON.rows }, (_, row) => (
         <Skeleton
           key={row}
           variant="rectangular"
-          height={FLEET_SKELETON.height}
+          height={rem(theme, FLEET_SKELETON.height)}
           borderRadius={FLEET_SKELETON.radiusMultiple}
         />
       ))}
@@ -304,8 +306,8 @@ export function FleetRoster({
         overflowY: 'auto',
         minWidth: 0,
         '&:focus-visible': {
-          outline: `${FLEET_ROSTER.focusRingWidth}px solid ${theme.palette.primary.main}`,
-          outlineOffset: FLEET_ROSTER.focusRingOffset,
+          outline: `${rem(theme, FLEET_ROSTER.focusRingWidth)} solid ${theme.palette.primary.main}`,
+          outlineOffset: rem(theme, FLEET_ROSTER.focusRingOffset),
         },
       }}
     >

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