@12-apps/ui 6.37.0 → 6.38.0

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

package/src/components/navigation/CommandPalette/CommandPalette.tsx

@@ -26,7 +26,7 @@ import { rem, sxRem } from '../../../tokens/relative';
 const StyledDialog = styled(Dialog)(({ theme }) => ({
   '& .MuiBackdrop-root': {
     backgroundColor: scrim(theme, 0.6),
-    backdropFilter: 'blur(4px)' },
+    backdropFilter: `blur(${rem(theme, 4)})` },
   '& .MuiDialog-paper': {
     position: 'fixed',
     top: '20%',
@@ -38,10 +38,10 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
 
 const PaletteContainer = styled(Paper)(({ theme }) => ({
   width: '100%',
-  maxWidth: 640,
+  maxWidth: rem(theme, 640),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-  backdropFilter: 'blur(20px)',
-  WebkitBackdropFilter: 'blur(20px)',
+  backdropFilter: `blur(${rem(theme, 20)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   borderRadius: theme.shape.borderRadius * 2,
   overflow: 'hidden',
@@ -136,8 +136,8 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
   onClose,
   commands,
   placeholder = 'Type a command or search...',
-  width = '640px',
-  maxHeight = '400px',
+  width,
+  maxHeight,
   showRecent = true,
   recentCommands = [],
   onCommandExecute,
@@ -174,7 +174,7 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
       data-testid={dataTestId}
     >
       <DialogContent sx={{ overflow: 'visible', p: 0 }}>
-        <PaletteContainer elevation={24} sx={{ width, maxHeight }}>
+        <PaletteContainer elevation={24} sx={{ width: width ?? sxRem(640), maxHeight: maxHeight ?? sxRem(400) }}>
           <PaletteSearch
             inputRef={searchInputRef}
             placeholder={placeholder}

package/src/components/navigation/CommandPalette/CommandPaletteResults.tsx

@@ -15,18 +15,18 @@ import type { CommandPaletteCopy } from '../../../copy';
 import { rem, sxRem } from '../../../tokens/relative';
 
 const ResultsList = styled(List)(({ theme }) => ({
-  maxHeight: 400,
+  maxHeight: rem(theme, 400),
   overflowY: 'auto',
   padding: theme.spacing(1),
   '&::-webkit-scrollbar': {
-    width: 8,
+    width: rem(theme, 8),
   },
   '&::-webkit-scrollbar-track': {
     background: alpha(theme.palette.action.disabled, 0.1),
   },
   '&::-webkit-scrollbar-thumb': {
     background: alpha(theme.palette.primary.main, 0.3),
-    borderRadius: 4,
+    borderRadius: rem(theme, 4),
     '&:hover': {
       background: alpha(theme.palette.primary.main, 0.5),
     },
@@ -40,7 +40,7 @@ const CommandItem = styled(ListItem)<{ selected?: boolean }>(({ theme, selected
   cursor: 'pointer',
   ...(selected && {
     backgroundColor: alpha(theme.palette.primary.main, 0.12),
-    transform: 'translateX(4px)',
+    transform: `translateX(${rem(theme, 4)})`,
     '& .MuiListItemIcon-root': {
       color: theme.palette.primary.main,
     },
@@ -81,7 +81,7 @@ const CommandRow: React.FC<{
     onClick={() => onExecute(command)}
     onMouseEnter={() => onSelect(index)}
   >
-    {command.icon && <ListItemIcon sx={{ minWidth: 40 }}>{command.icon}</ListItemIcon>}
+    {command.icon && <ListItemIcon sx={{ minWidth: sxRem(40) }}>{command.icon}</ListItemIcon>}
     <ListItemText
       primary={command.label}
       secondary={command.description}

package/src/components/navigation/CommandPalette/ShortcutChip.tsx

@@ -11,7 +11,7 @@ export const ShortcutChip: React.FC<ChipProps> = (props) => (
   <Chip
     {...props}
     sx={{
-      height: 20,
+      height: sxRem(20),
       fontSize: sxRem(11.2),
       fontFamily: 'monospace',
       ...props.sx,

package/src/components/navigation/ContextMenu/ContextMenu.tsx

@@ -10,20 +10,20 @@ import React, { cloneElement, isValidElement,useState } from 'react';
 
 import type { ContextMenuItem,ContextMenuProps } from './ContextMenu.types';
 import { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 const StyledMenu = styled(Menu, {
   shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',
 })<{ customVariant?: string; size?: string }>(({ theme, customVariant, size }) => ({
   '& .MuiPaper-root': {
-    minWidth: 160,
+    minWidth: rem(theme, 160),
     borderRadius: theme.spacing(1),
 
     ...(customVariant === 'glass' && {
       backgroundColor: alpha(theme.palette.background.paper, 0.85),
-      backdropFilter: 'blur(20px)',
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-      boxShadow: `0 8px 32px ${shadowInk(theme, 0.12)}`,
+      boxShadow: `0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.12)}`,
     }),
 
     ...(customVariant === 'dark' && {
@@ -43,7 +43,7 @@ const StyledMenu = styled(Menu, {
     ...(size === 'sm' && {
       '& .MuiMenuItem-root': {
         fontSize: rem(theme, 14),
-        minHeight: 32,
+        minHeight: rem(theme, 32),
         padding: theme.spacing(0.5, 1.5),
       },
     }),
@@ -51,7 +51,7 @@ const StyledMenu = styled(Menu, {
     ...(size === 'lg' && {
       '& .MuiMenuItem-root': {
         fontSize: rem(theme, 18),
-        minHeight: 48,
+        minHeight: rem(theme, 48),
         padding: theme.spacing(1.5, 2),
       },
     }),
@@ -101,7 +101,7 @@ const MenuHeader = styled(Typography)(({ theme }) => ({
   fontWeight: 600,
   textTransform: 'uppercase',
   color: theme.palette.text.secondary,
-  letterSpacing: 0.5,
+  letterSpacing: rem(theme, 0.5),
 }));
 
 const ShortcutText = styled(Typography)(({ theme }) => ({
@@ -135,7 +135,7 @@ const renderMenuItem = (
       dangerous={item.dangerous}
     >
       {hasIcon && (
-        <ListItemIcon sx={{ minWidth: size === 'sm' ? 32 : 40 }}>{item.icon}</ListItemIcon>
+        <ListItemIcon sx={{ minWidth: sxRem(size === 'sm' ? 32 : 40) }}>{item.icon}</ListItemIcon>
       )}
       <ListItemText primary={item.label} />
       {item.shortcut && <ShortcutText variant="caption">{item.shortcut}</ShortcutText>}

package/src/components/navigation/DropdownMenu/DropdownMenu.tsx

@@ -13,7 +13,16 @@ import React, { cloneElement, isValidElement,useRef, useState } from 'react';
 
 import type { DropdownMenuItem,DropdownMenuProps } from './DropdownMenu.types';
 import { modeInk, shadowInk, sheen } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
+
+/**
+ * A caller's `maxHeight`/`minWidth` for `sx`: a string as given, a number as
+ * design px — except `≤ 1`, which `sx` has always read as a fraction.
+ */
+const sxBoxLength = (value: number | string): string | ((theme: Theme) => string) =>
+  typeof value === 'string'
+    ? value
+    : (theme) => (value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value));
 
 // Resolves every light/dark decision once. The inline version repeated
 // `theme.palette.mode === 'dark' ? … : …` nine times, and two of those had the
@@ -35,13 +44,13 @@ const glassMenuStyles = (theme: Theme): CSSObject => {
 
   return {
     backgroundColor: alpha(theme.palette.background.paper, 0.75),
-    backdropFilter: 'blur(24px) saturate(1.8)',
-    WebkitBackdropFilter: 'blur(24px) saturate(1.8)', // Safari support
+    backdropFilter: `blur(${rem(theme, 24)}) saturate(1.8)`,
+    WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(1.8)`, // Safari support
     border: `1px solid ${alpha(edge, 0.12)}`,
     boxShadow: [
-      `0 8px 32px ${shadowInk(theme, dropShadowAlpha)}`,
-      `0 0 0 1px ${alpha(edge, 0.05)}`,
-      `inset 0 1px 0 ${sheen(theme, insetHighlightAlpha)}`,
+      `0 ${rems(theme, 8, 32)} ${shadowInk(theme, dropShadowAlpha)}`,
+      `0 0 0 ${rem(theme, 1)} ${alpha(edge, 0.05)}`,
+      `inset 0 ${rem(theme, 1)} 0 ${sheen(theme, insetHighlightAlpha)}`,
     ].join(', '),
     // Enhanced glass morphism with subtle gradient overlay
     '&::before': {
@@ -68,20 +77,20 @@ const StyledMenu = styled(Menu, {
   shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',
 })<{ customVariant?: string; size?: string }>(({ theme, customVariant, size }) => ({
   '& .MuiPaper-root': {
-    minWidth: 180,
+    minWidth: rem(theme, 180),
     borderRadius: theme.spacing(1),
 
     ...(customVariant === 'glass' && glassMenuStyles(theme)),
 
     ...(customVariant === 'minimal' && {
-      boxShadow: `0 2px 8px ${shadowInk(theme, 0.08)}`,
+      boxShadow: `0 ${rems(theme, 2, 8)} ${shadowInk(theme, 0.08)}`,
       border: `1px solid ${theme.palette.divider}`,
     }),
 
     ...(size === 'sm' && {
       '& .MuiMenuItem-root': {
         fontSize: rem(theme, 14),
-        minHeight: 32,
+        minHeight: rem(theme, 32),
         padding: theme.spacing(0.75, 2),
       },
     }),
@@ -89,7 +98,7 @@ const StyledMenu = styled(Menu, {
     ...(size === 'lg' && {
       '& .MuiMenuItem-root': {
         fontSize: rem(theme, 18),
-        minHeight: 48,
+        minHeight: rem(theme, 48),
         padding: theme.spacing(1.5, 3),
       },
     }),
@@ -137,7 +146,7 @@ const MenuHeader = styled(Typography)(({ theme }) => ({
   fontWeight: 600,
   textTransform: 'uppercase',
   color: theme.palette.text.secondary,
-  letterSpacing: 0.5,
+  letterSpacing: rem(theme, 0.5),
 }));
 
 const ShortcutText = styled(Typography)(({ theme }) => ({
@@ -191,7 +200,7 @@ const renderLeafMenuItem = (
       data-testid={item.dataTestId}
     >
       {hasIcon && (
-        <ListItemIcon sx={{ minWidth: size === 'sm' ? 32 : 40 }}>{item.icon}</ListItemIcon>
+        <ListItemIcon sx={{ minWidth: sxRem(size === 'sm' ? 32 : 40) }}>{item.icon}</ListItemIcon>
       )}
       <ListItemText primary={item.label} />
       {item.shortcut && <ShortcutText variant="caption">{item.shortcut}</ShortcutText>}
@@ -319,8 +328,8 @@ export const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
       onOpen,
       onClose,
       size = 'md',
-      maxHeight = 400,
-      minWidth = 180,
+      maxHeight,
+      minWidth,
       closeOnItemClick = true,
       showIconSpace = false,
       anchorEl: providedAnchorEl,
@@ -364,8 +373,8 @@ export const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
           size={size}
           PaperProps={{
             sx: {
-              maxHeight,
-              minWidth,
+              maxHeight: sxBoxLength(maxHeight ?? 400),
+              minWidth: sxBoxLength(minWidth ?? 180),
               overflow: 'auto',
             },
           }}

package/src/components/navigation/NavigationMenu/NavigationMegaSection.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import { MegaSection } from './NavigationMenu.shell';
 import { slideIn } from './NavigationMenu.styles';
+import { sxRem } from '../../../tokens/relative';
 import type { NavigationMenuItem } from './NavigationMenu.types';
 import { renderMenuItem } from './NavigationMenuItem';
 
@@ -21,11 +22,11 @@ const SECTION_TITLE_SX = {
     position: 'absolute',
     bottom: 0,
     left: 0,
-    width: '40px',
-    height: '3px',
+    width: sxRem(40),
+    height: sxRem(3),
     background: (theme: { palette: { primary: { main: string } } }) =>
       `linear-gradient(90deg, ${theme.palette.primary.main} 0%, transparent 100%)`,
-    borderRadius: '2px',
+    borderRadius: sxRem(2),
   },
 } as const;
 
@@ -55,7 +56,7 @@ export const NavigationMegaSection: FC<NavigationMegaSectionProps> = ({
         <Box
           key={item.id}
           sx={{
-            animation: `${slideIn} 0.4s ease-out`,
+            animation: (theme) => `${slideIn(theme)} 0.4s ease-out`,
             animationDelay: `${sectionIndex * 0.1 + itemIndex * 0.05}s`,
             animationFillMode: 'both',
           }}