@12-apps/ui 6.37.0 → 6.39.0

package/src/components/layout/SettingsLayout/SettingsLayout.styles.ts

@@ -1,17 +1,19 @@
-import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+import type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';
+
+import { rem, sxRem } from '../../../tokens/relative';
 
 import type { SettingsNavStatus, SettingsRailBreakpoint } from './SettingsLayout.types';
 
-/** Fixed width of the left navigation rail once it has its own column. */
-export const RAIL_WIDTH = 300;
+/** Fixed width of the left navigation rail once it has its own column (300 design px). */
+export const railWidth = (theme: Theme): string => rem(theme, 300);
 
 /** Visually hidden, still read aloud — for text a marker's colour cannot carry. */
-export const SR_ONLY_SX: CSSObject = {
+export const SR_ONLY_SX: SxProps<Theme> = {
   position: 'absolute',
-  width: '1px',
-  height: '1px',
+  width: sxRem(1),
+  height: sxRem(1),
   padding: 0,
-  margin: '-1px',
+  margin: sxRem(-1),
   overflow: 'hidden',
   clip: 'rect(0, 0, 0, 0)',
   whiteSpace: 'nowrap',

package/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Box from '@mui/material/Box/index.js';
-import type { Theme } from '@mui/material/styles/index.js';
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import React, { useMemo, useState } from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';
@@ -47,7 +47,7 @@ const DEFAULTS = {
 } satisfies Partial<SettingsLayoutProps>;
 
 /** Stacked below the rail's breakpoint, two columns at and above it. */
-function shellSx(breakpoint: SettingsLayoutProps['railBreakpoint'], fillHeight: boolean) {
+function shellSx(breakpoint: SettingsLayoutProps['railBreakpoint'], fillHeight: boolean): SxProps<Theme> {
   return (theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column' as const,

package/src/components/layout/SettingsLayout/SettingsPanel.tsx

@@ -66,7 +66,7 @@ function BackLink({
         ...displayAcrossRail(theme, breakpoint, "inline-flex", "none"),
         alignItems: "center",
         gap: 0.5,
-        minHeight: TOUCH_TARGET,
+        minHeight: rem(theme, TOUCH_TARGET),
         pr: 1,
         textDecoration: "none",
         color: "text.secondary",

package/src/components/layout/SettingsLayout/SettingsSectionChips.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useRef, type RefObject } from 'react';
 
 import { SettingsStatusMarker } from './SettingsStatusMarker';
 import { TOUCH_TARGET } from './SettingsLayout.styles';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /**
  * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.
@@ -15,7 +15,7 @@ import { rem } from '../../../tokens/relative';
  * with the least room for either, so the pill is sized to its text rather than
  * to the thumb — and the thumb is served by the hit area instead.
  */
-const CHIP_HEIGHT = 34;
+const CHIP_HEIGHT = sxRem(34);
 import type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';
 
 export interface SettingsSectionChipsProps {
@@ -146,7 +146,7 @@ function SectionChip({
           insetInlineEnd: 0,
           top: '50%',
           transform: 'translateY(-50%)',
-          height: TOUCH_TARGET,
+          height: rem(theme, TOUCH_TARGET),
         },
       }}
     >

package/src/components/layout/SettingsLayout/SettingsSectionHeader.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { displayAcrossRail, TOUCH_TARGET } from './SettingsLayout.styles';
 import type { SettingsLayoutProps, SettingsRailBreakpoint } from './SettingsLayout.types';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** One line that must not wrap, whatever the section is called. */
 const CLIP = {
@@ -142,8 +142,8 @@ export function SettingsSectionHeader({
           display: 'inline-flex',
           alignItems: 'center',
           justifyContent: 'center',
-          width: TOUCH_TARGET,
-          height: TOUCH_TARGET,
+          width: rem(theme, TOUCH_TARGET),
+          height: rem(theme, TOUCH_TARGET),
           border: 1,
           borderColor: 'divider',
           borderRadius: 2,

package/src/components/layout/SettingsLayout/SettingsStatusMarker.tsx

@@ -61,8 +61,8 @@ export function SettingsStatusMarker({
       <Box
         component="span"
         sx={{
-          width: 8,
-          height: 8,
+          width: sxRem(8),
+          height: sxRem(8),
           borderRadius: '50%',
           flex: '0 0 auto',
           bgcolor: STATUS_COLOR[status],

package/src/components/layout/Sidebar/Sidebar.tsx

@@ -1,5 +1,6 @@
 import Box from '@mui/material/Box/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type {
@@ -9,14 +10,22 @@ import type {
   SidebarProps,
 } from './Sidebar.types';
 import { shadowInk } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
+
+/**
+ * A width prop as CSS. `sx` reads a number of 1 or less as a fraction of the
+ * parent, and that stays so; any other number is design px, through the type scale.
+ */
+const widthCss = (theme: Theme, value: number): string =>
+  value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
 
 export const Sidebar: React.FC<SidebarProps> = ({
   children,
   variant = 'fixed',
   open = true,
   onToggle: _onToggle,
-  width = 280,
-  collapsedWidth = 64,
+  width,
+  collapsedWidth,
   position = 'left',
   className,
   dataTestId = 'sidebar',
@@ -27,7 +36,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
   const theme = useTheme();
 
   const isCollapsed = variant === 'collapsible' && !open;
-  const currentWidth = isCollapsed ? collapsedWidth : width;
+  // Design px: 280 open, 64 collapsed, unless the caller says otherwise.
+  const currentWidth = isCollapsed ? (collapsedWidth ?? 64) : (width ?? 280);
 
   const getVariantStyles = () => {
     switch (variant) {
@@ -44,9 +54,9 @@ export const Sidebar: React.FC<SidebarProps> = ({
       case 'glass':
         return {
           backgroundColor: alpha(theme.palette.background.paper, 0.1),
-          backdropFilter: 'blur(20px)',
+          backdropFilter: `blur(${rem(theme, 20)})`,
           border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-          boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,
+          boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,
         };
       case 'collapsible':
         return {
@@ -69,7 +79,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
       data-testid={dataTestId}
       {...rest}
       sx={{
-        width: currentWidth,
+        width: widthCss(theme, currentWidth),
         height: '100vh',
         display: 'flex',
         flexDirection: 'column',

package/src/components/layout/Skeleton/Skeleton.styles.ts

@@ -14,6 +14,7 @@ import {
   SKELETON_INTENSITY_OPACITY,
 } from './Skeleton.metrics';
 import { modeInk, shadowInk, sheen } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
 type SkeletonVariant = NonNullable<SkeletonProps['variant']>;
 type SkeletonIntensity = NonNullable<SkeletonProps['intensity']>;
@@ -57,9 +58,9 @@ const glassmorphismStyles = (theme: Theme): CSSObject => ({
   background: `linear-gradient(135deg,
         ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM)} 0%,
         ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_TO)} 100%)`,
-  backdropFilter: `blur(${GLASS_BLUR_PX}px)`,
+  backdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)})`,
   border: `1px solid ${alpha(theme.palette.divider, GLASS_BORDER_ALPHA)}`,
-  boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${shadowInk(theme, GLASS_SHADOW.alpha)}`,
+  boxShadow: `${rems(theme, 0, GLASS_SHADOW.offsetY, GLASS_SHADOW.blur, 0)} ${shadowInk(theme, GLASS_SHADOW.alpha)}`,
 });
 
 // The sweep is a pseudo-element sliding across the box, so the box has to clip it
@@ -96,7 +97,16 @@ interface SkeletonStyleArgs {
   style?: React.CSSProperties;
 }
 
-export const skeletonStyles = (
+/**
+ * A `width`/`height` for MUI's `Skeleton`, which writes it into an inline
+ * `style`: a number there is px, so it is design px through the type scale.
+ * The caller keeps a `0` as `0` (see `Skeleton.tsx`).
+ */
+export const skeletonLength = (theme: Theme, value: number | string | undefined): string | undefined =>
+  typeof value === 'number' ? rem(theme, value) : value;
+
+/** The skeleton's `sx` — so a number on `borderRadius` is a multiple of `shape.borderRadius`. */
+export const skeletonSx = (
   theme: Theme,
   { intensity, borderRadius, glassmorphism, shimmer, style }: SkeletonStyleArgs,
 ): CSSObject => ({

package/src/components/layout/Skeleton/Skeleton.tsx

@@ -9,7 +9,8 @@ import {
   defaultDimensions,
   muiAnimationFor,
   muiVariantFor,
-  skeletonStyles,
+  skeletonLength,
+  skeletonSx,
 } from './Skeleton.styles';
 import type { SkeletonProps } from './Skeleton.types';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
@@ -49,9 +50,10 @@ export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
     <MuiSkeleton
       variant={muiVariantFor(variant)}
       animation={muiAnimationFor(variant, animation)}
-      width={finalWidth}
-      height={finalHeight}
-      sx={skeletonStyles(theme, {
+      // A `0` stays `0`: MUI reads a falsy size as "size from children".
+      width={finalWidth === 0 ? 0 : skeletonLength(theme, finalWidth)}
+      height={finalHeight === 0 ? 0 : skeletonLength(theme, finalHeight)}
+      sx={skeletonSx(theme, {
         intensity,
         borderRadius,
         glassmorphism,

package/src/components/layout/Spacer/Spacer.tsx

@@ -1,10 +1,22 @@
 import Box from '@mui/material/Box/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { SPACER_FLEX_GROW, SPACER_FLEX_SHRINK, spacerDimensions } from './Spacer.metrics';
 import type { SpacerProps } from './Spacer.types';
 import { resolveTestId } from '../../../platform/test-id';
+import { rem } from '../../../tokens/relative';
+
+/**
+ * An explicit `width`/`height` as CSS. `sx` reads a number of 1 or less as a
+ * fraction of the parent, and that stays so; any other number is design px,
+ * through the type scale; a string is as given.
+ */
+const spacerLength = (theme: Theme, value: number | string | undefined): string | undefined => {
+  if (typeof value !== 'number') return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+};
 
 export const Spacer: React.FC<SpacerProps> = ({
   size,
@@ -19,7 +31,10 @@ export const Spacer: React.FC<SpacerProps> = ({
 
   // From the shared metrics, not a table of our own: the native `Spacer` reads
   // the same units, so the two renderers cannot disagree on a step.
-  const dimensions = spacerDimensions({ size, direction, width, height }, (units) => theme.spacing(units));
+  const dimensions = spacerDimensions(
+    { size, direction, width: spacerLength(theme, width), height: spacerLength(theme, height) },
+    (units) => theme.spacing(units),
+  );
 
   return (
     <Box

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -27,7 +27,8 @@ import type {
 import { fieldTextFieldStyles } from '../../../tokens/field-height';
 import { sxRem } from '../../../tokens/relative';
 
-const PANEL_WIDTH = 280;
+/** The open panel's width, 280 design px through the type scale. */
+const PANEL_WIDTH = sxRem(280);
 
 /**
  * Compound filter-panel system, MUI port of the reference `TableFilter`. Provides

package/src/components/navigation/AppHeader/AppHeader.brand.tsx

@@ -23,8 +23,8 @@ function markSx(
   { edge, round, showLogo, seed }: { edge: number; round: boolean; showLogo: boolean; seed: string },
 ): Record<string, unknown> {
   return {
-    width: edge,
-    height: edge,
+    width: rem(theme, edge),
+    height: rem(theme, edge),
     flex: '0 0 auto',
     overflow: 'hidden',
     borderRadius: round ? '50%' : '30%',

package/src/components/navigation/AppHeader/AppHeader.details.tsx

@@ -3,9 +3,11 @@
 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 type { Theme } from '@mui/material/styles/index.js';
 import useMediaQuery from '@mui/material/useMediaQuery/index.js';
 import React from 'react';
 
+import { rem, sxRem } from '../../../tokens/relative';
 import { accentFor } from '../../../tokens/scales';
 import { Sheet } from '../../data-display/Sheet/Sheet';
 import { Button } from '../../form/Button/Button';
@@ -17,15 +19,15 @@ import type {
   AppHeaderDetailsProps,
 } from './AppHeader.types';
 
-/** How wide the dialog presentation grows before it stops. */
-const DIALOG_WIDTH = 460;
+/** How wide the dialog presentation grows before it stops (460 design px). */
+const DIALOG_WIDTH = sxRem(460);
 
 /**
- * Where the smallest phones stop. The theme's scale starts at `xs`/`sm`, so
- * there is no `xxs` breakpoint to ask for — this is that boundary, named once
- * rather than inlined at the place it decides something.
+ * Where the smallest phones stop (360 design px). The theme's scale starts at
+ * `xs`/`sm`, so there is no `xxs` breakpoint to ask for — this is that
+ * boundary, named once rather than inlined at the place it decides something.
  */
-const XXS_MAX_WIDTH = 360;
+const xxsQuery = (theme: Theme): string => `(max-width:${rem(theme, 360 - 0.05)})`;
 
 /**
  * The sheet grows to its content and stops at the viewport; it does not take a
@@ -165,7 +167,7 @@ export const AppHeaderDetails: React.FC<AppHeaderDetailsProps> = ({
 }) => {
   const theme = useTheme();
   const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));
-  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);
+  const xxs = useMediaQuery(xxsQuery(theme));
 
   // Split once, not per branch: a STRING subtitle is the panel's own
   // `description` (both surfaces style it as part of their header), anything

package/src/components/navigation/AppHeader/AppHeader.identity.tsx

@@ -5,9 +5,10 @@ import Box from '@mui/material/Box/index.js';
 import Skeleton from '@mui/material/Skeleton/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 import { accentFor, type SizeValue } from '../../../tokens/scales';
 
 import { AppHeaderBrand } from './AppHeader.brand';
@@ -53,8 +54,8 @@ export const AppHeaderStatus: React.FC<AppHeaderStatusProps> = ({
           aria-hidden
           data-testid={`${dataTestId}-dot`}
           sx={{
-            width: 8,
-            height: 8,
+            width: rem(theme, 8),
+            height: rem(theme, 8),
             flex: '0 0 auto',
             borderRadius: '50%',
             backgroundColor: accentFor(theme, tone).main,
@@ -148,7 +149,11 @@ const discloseSx = {
   // Guarded: on a touch screen an unguarded `:hover` sticks after the tap that
   // opened the panel, so the row stays highlighted behind it.
   '@media (hover: hover)': { '&:hover': { backgroundColor: 'action.hover' } },
-  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },
+  '&:focus-visible': {
+    outline: (theme: Theme) => `${rem(theme, 2)} solid`,
+    outlineColor: 'primary.main',
+    outlineOffset: sxRem(2),
+  },
 } as const;
 
 /**
@@ -232,18 +237,26 @@ const IdentityText: React.FC<
 const IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({
   size,
   dataTestId,
-}) => (
-  <Box
-    data-testid={`${dataTestId}-loading`}
-    sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}
-  >
-    <Skeleton variant="rounded" width={40} height={40} sx={{ flex: '0 0 auto' }} />
-    <Box sx={{ minWidth: 0, flex: 1 }}>
-      <Skeleton variant="text" width={140} height={TITLE_PX[size] * 1.4} />
-      <Skeleton variant="text" width={180} height={16} />
+}) => {
+  const theme = useTheme();
+  return (
+    <Box
+      data-testid={`${dataTestId}-loading`}
+      sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}
+    >
+      <Skeleton
+        variant="rounded"
+        width={rem(theme, 40)}
+        height={rem(theme, 40)}
+        sx={{ flex: '0 0 auto' }}
+      />
+      <Box sx={{ minWidth: 0, flex: 1 }}>
+        <Skeleton variant="text" width={rem(theme, 140)} height={rem(theme, TITLE_PX[size] * 1.4)} />
+        <Skeleton variant="text" width={rem(theme, 180)} height={rem(theme, 16)} />
+      </Box>
     </Box>
-  </Box>
-);
+  );
+};
 
 /**
  * The BLOCK's row: the mark, then the text column beside it.

package/src/components/navigation/AppHeader/AppHeader.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import Box from '@mui/material/Box/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 import { withDefaults } from '../../../utils/withDefaults';
 
 import type { AppHeaderProps } from './AppHeader.types';
@@ -15,7 +16,6 @@ const BAR_MIN_HEIGHT = { regular: 64, dense: 52 } as const;
 type Defaulted =
   | 'position'
   | 'offsetTop'
-  | 'maxWidth'
   | 'divider'
   | 'elevateOnScroll'
   | 'dense'
@@ -28,7 +28,6 @@ type ResolvedHeaderProps = AppHeaderProps & Required<Pick<AppHeaderProps, Defaul
 const HEADER_DEFAULTS: Pick<ResolvedHeaderProps, Defaulted> = {
   position: 'sticky',
   offsetTop: 0,
-  maxWidth: 1200,
   divider: true,
   elevateOnScroll: false,
   dense: false,
@@ -36,6 +35,19 @@ const HEADER_DEFAULTS: Pick<ResolvedHeaderProps, Defaulted> = {
   dataTestId: 'app-header',
 };
 
+/**
+ * The content's cap. A number is design px — or, at `≤ 1`, the fraction `sx`
+ * reads it as — and no value at all is the `lg` breakpoint (1200 at MUI's
+ * defaults), the width the bar has always stopped at.
+ */
+function contentMaxWidth(maxWidth: number | string | undefined): string | ((theme: Theme) => string) {
+  if (typeof maxWidth === 'string') return maxWidth;
+  return (theme) => {
+    const value = maxWidth ?? theme.breakpoints.values.lg;
+    return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+  };
+}
+
 /**
  * Watch the document scroll so a lifted bar can cast a shadow only once there
  * is something under it. Inert (and never attaches a listener) when off.
@@ -97,7 +109,7 @@ function surfaceSx({
 }): Record<string, unknown> {
   return {
     position,
-    ...(position === 'static' ? {} : { top: offsetTop, zIndex: 'appBar' }),
+    ...(position === 'static' ? {} : { top: typeof offsetTop === 'number' ? sxRem(offsetTop) : offsetTop, zIndex: 'appBar' }),
     ...(position === 'fixed' ? { left: 0, right: 0 } : {}),
     backgroundColor: 'background.paper',
     borderBottom: divider ? 1 : 0,
@@ -199,13 +211,13 @@ export const AppHeader: React.FC<AppHeaderProps> = (props) => {
         data-testid={dataTestId}
         sx={surfaceSx({ position, offsetTop, divider, scrolled })}
       >
-        <Box sx={{ maxWidth, mx: 'auto', px: { xs: 2, md: 3 } }}>
+        <Box sx={{ maxWidth: contentMaxWidth(maxWidth), mx: 'auto', px: { xs: 2, md: 3 } }}>
           <Box
             sx={{
               display: 'flex',
               alignItems: 'center',
               gap: { xs: 1, md: 2 },
-              minHeight: dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular,
+              minHeight: sxRem(dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular),
               py: 1,
             }}
           >

package/src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx

@@ -12,7 +12,7 @@ import { breadcrumbLinkStyles } from './Breadcrumbs.styles';
 import type { BreadcrumbItem } from './Breadcrumbs.types';
 import type { BreadcrumbCopy } from '../../../copy';
 import { sheen, uiInk } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const BreadcrumbLink = styled(Link, {
   shouldForwardProp: (prop) => prop !== 'size' && prop !== 'active' && prop !== 'visualStyle' })<{ size?: string; active?: boolean; visualStyle?: string }>(
@@ -34,7 +34,7 @@ const BreadcrumbText = styled(Typography, {
 
   ...(visualStyle === 'glass' && {
     background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
-    backdropFilter: 'blur(4px)',
+    backdropFilter: `blur(${rem(theme, 4)})`,
     border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}` }),
 
   '& .breadcrumb-icon': {
@@ -64,11 +64,11 @@ const CollapsedItemsPopover: React.FC<{
           theme.palette.mode === 'dark'
             ? alpha(uiInk(theme).glassSlate, 0.95)
             : sheen(theme, 0.95),
-        backdropFilter: 'blur(10px)',
+        backdropFilter: (theme) => `blur(${rem(theme, 10)})`,
         borderRadius: 1,
         boxShadow: 3,
         p: 1,
-        minWidth: 150 }}
+        minWidth: sxRem(150) }}
     >
       {items.map((item, index) => (
         <Box

package/src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx

@@ -5,10 +5,10 @@ import { modeInk, shadowInk, sheen, uiInk } from '../../../tokens/ink';
 import { EFFECT_GLOW } from '../../../tokens/ink.core';
 import { rem } from '../../../tokens/relative';
 
-export const slideIn = keyframes`
+export const slideIn = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(-10px);
+    transform: translateX(${rem(theme, -10)});
   }
   to {
     opacity: 1;
@@ -16,12 +16,12 @@ export const slideIn = keyframes`
   }
 `;
 
-export const pulse = keyframes`
+export const pulse = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.brandIndigo, 0.4)};
   }
   70% {
-    box-shadow: 0 0 0 10px ${alpha(EFFECT_GLOW.brandIndigo, 0)};
+    box-shadow: 0 0 0 ${rem(theme, 10)} ${alpha(EFFECT_GLOW.brandIndigo, 0)};
   }
   100% {
     box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.brandIndigo, 0)};
@@ -32,13 +32,13 @@ const BAR_VARIANTS: Record<string, (theme: Theme, elevation: number) => CSSObjec
   glass: (theme, elevation) => ({
       background:
         theme.palette.mode === 'dark' ? alpha(uiInk(theme).glassSlate, 0.7) : sheen(theme, 0.7),
-      backdropFilter: 'blur(10px)',
-      WebkitBackdropFilter: 'blur(10px)',
+      backdropFilter: `blur(${rem(theme, 10)})`,
+      WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
       border: `1px solid ${alpha(modeInk(theme), 0.1)}`,
       boxShadow:
         theme.palette.mode === 'dark'
-          ? `0 ${elevation * 4}px ${elevation * 8}px ${shadowInk(theme, 0.3)}, inset 0 1px 0 ${sheen(theme, 0.1)}`
-          : `0 ${elevation * 4}px ${elevation * 8}px ${shadowInk(theme, 0.08)}, inset 0 1px 0 ${sheen(theme, 0.8)}` }),
+          ? `0 ${rem(theme, elevation * 4)} ${rem(theme, elevation * 8)} ${shadowInk(theme, 0.3)}, inset 0 ${rem(theme, 1)} 0 ${sheen(theme, 0.1)}`
+          : `0 ${rem(theme, elevation * 4)} ${rem(theme, elevation * 8)} ${shadowInk(theme, 0.08)}, inset 0 ${rem(theme, 1)} 0 ${sheen(theme, 0.8)}` }),
   elevated: (theme, elevation) => ({
       background: theme.palette.background.paper,
       boxShadow: theme.shadows[elevation] || theme.shadows[1],
@@ -86,7 +86,7 @@ export const breadcrumbsBarStyles = ({
     padding: theme.spacing(size === 'sm' ? 0.75 : size === 'lg' ? 1.5 : 1, 2),
     borderRadius: theme.spacing(visualStyle === 'glass' ? 2 : 1),
   ...barVariantStyles(theme, visualStyle, elevation),
-    animation: `${slideIn} 0.3s ease-out`,
+    animation: `${slideIn(theme)} 0.3s ease-out`,
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     position: 'relative',
 
@@ -115,8 +115,8 @@ export const breadcrumbsBarStyles = ({
           theme.palette.mode === 'dark' ? alpha(uiInk(theme).glassSlate, 0.85) : sheen(theme, 0.85),
         boxShadow:
           theme.palette.mode === 'dark'
-            ? `0 ${elevation * 6}px ${elevation * 12}px ${shadowInk(theme, 0.4)}`
-            : `0 ${elevation * 6}px ${elevation * 12}px ${shadowInk(theme, 0.12)}` }) } });
+            ? `0 ${rem(theme, elevation * 6)} ${rem(theme, elevation * 12)} ${shadowInk(theme, 0.4)}`
+            : `0 ${rem(theme, elevation * 6)} ${rem(theme, elevation * 12)} ${shadowInk(theme, 0.12)}` }) } });
 
 // The idle glass treatment and the active-crumb treatment are mutually
 // exclusive; keeping them as named pieces takes both branches out of the main
@@ -142,7 +142,7 @@ const linkActiveStyles = (theme: Theme, visualStyle?: string): CSSObject => ({
 
       ...(visualStyle === 'glass' && {
         background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
-        animation: `${pulse} 2s infinite` }) });
+        animation: `${pulse(theme)} 2s infinite` }) });
 
 // Hover treatment. The tint is a touch stronger on the glass variant so it still
 // reads against the translucent bar.
@@ -150,7 +150,7 @@ const linkHoverStyles = (theme: Theme, visualStyle?: string): CSSObject => ({
   '&:hover, &[data-hover="true"]': {
       color: theme.palette.primary.main,
       backgroundColor: alpha(theme.palette.primary.main, visualStyle === 'glass' ? 0.1 : 0.08),
-      transform: 'translateY(-1px)',
+      transform: `translateY(${rem(theme, -1)})`,
 
       '&::before': {
         opacity: 1 },
@@ -194,8 +194,8 @@ export const breadcrumbLinkStyles = ({
       backgroundColor: alpha(theme.palette.primary.main, 0.12) },
 
     '&:focus-visible': {
-      outline: `2px solid ${theme.palette.primary.main}`,
-      outlineOffset: 2,
+      outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,
+      outlineOffset: rem(theme, 2),
       backgroundColor: alpha(theme.palette.primary.main, 0.04) },