@12-apps/ui 6.37.0 → 6.39.0

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

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

@@ -2,16 +2,18 @@ import Box from '@mui/material/Box/index.js';
 import List from '@mui/material/List/index.js';
 import ListItemButton from '@mui/material/ListItemButton/index.js';
 import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import React from 'react';
 
 import { slideIn } from './NavigationMenu.styles';
 import { shadowInk } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
-const megaMenuSlide = keyframes`
+const megaMenuSlide = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(${rem(theme, 20)});
   }
   to {
     opacity: 1;
@@ -27,35 +29,35 @@ const NavigationContainer = styled(Box, {
 })<{ variant?: string; collapsed?: boolean; minimal?: boolean }>(({ theme, variant, collapsed, minimal }) => ({
   display: 'flex',
   position: 'relative',
-  animation: `${slideIn} 0.4s ease-out`,
+  animation: `${slideIn(theme)} 0.4s ease-out`,
   ...(variant === 'horizontal' && {
     flexDirection: 'row',
     alignItems: 'center',
     width: '100%',
     ...(!minimal && {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.95)} 0%, ${alpha(theme.palette.background.paper, 0.98)} 100%)`,
-      backdropFilter: 'blur(10px)',
+      backdropFilter: `blur(${rem(theme, 10)})`,
       borderRadius: theme.spacing(2),
-      boxShadow: `0 8px 32px ${shadowInk(theme, 0.08)}`,
+      boxShadow: `0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.08)}`,
     }),
   }),
   ...(variant === 'vertical' && {
     flexDirection: 'column',
-    width: collapsed ? 80 : 280,
+    width: rem(theme, collapsed ? 80 : 280),
     transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
     height: '100%',
     ...(!minimal && {
       background: `linear-gradient(180deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-      backdropFilter: 'blur(12px)',
+      backdropFilter: `blur(${rem(theme, 12)})`,
       borderRadius: theme.spacing(2),
-      boxShadow: `0 12px 40px ${shadowInk(theme, 0.1)}`,
+      boxShadow: `0 ${rems(theme, 12, 40)} ${shadowInk(theme, 0.1)}`,
       '&::before': {
         content: '""',
         position: 'absolute',
         top: 0,
         left: 0,
         right: 0,
-        height: '200px',
+        height: rem(theme, 200),
         background: `radial-gradient(ellipse at top, ${alpha(theme.palette.primary.main, 0.05)} 0%, transparent 70%)`,
         pointerEvents: 'none',
       },
@@ -66,10 +68,10 @@ const NavigationContainer = styled(Box, {
     width: '100%',
     ...(!minimal && {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.default, 0.95)} 100%)`,
-      backdropFilter: 'blur(15px)',
+      backdropFilter: `blur(${rem(theme, 15)})`,
       borderRadius: theme.spacing(3),
       overflow: 'hidden',
-      boxShadow: `0 20px 60px ${shadowInk(theme, 0.12)}`,
+      boxShadow: `0 ${rems(theme, 20, 60)} ${shadowInk(theme, 0.12)}`,
     }),
   }),
 }));
@@ -86,7 +88,7 @@ const StyledList = styled(List, {
   }),
   ...(variant === 'mega' && {
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+    gridTemplateColumns: `repeat(auto-fit, minmax(${rem(theme, 250)}, 1fr))`,
     gap: theme.spacing(2),
     padding: theme.spacing(2),
   }),
@@ -97,7 +99,7 @@ const LogoContainer = styled(Box)(({ theme }) => ({
   marginBottom: theme.spacing(2),
   position: 'relative',
   background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)} 0%, ${alpha(theme.palette.primary.dark, 0.04)} 100%)`,
-  borderBottom: `2px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+  borderBottom: `${rem(theme, 2)} solid ${alpha(theme.palette.primary.main, 0.2)}`,
   overflow: 'hidden',
 
   '&::before': {
@@ -108,7 +110,7 @@ const LogoContainer = styled(Box)(({ theme }) => ({
     width: '200%',
     height: '200%',
     background: `radial-gradient(circle, ${alpha(theme.palette.primary.light, 0.1)} 0%, transparent 70%)`,
-    animation: `${slideIn} 1s ease-out`,
+    animation: `${slideIn(theme)} 1s ease-out`,
   },
 
   '& > *': {
@@ -127,7 +129,7 @@ const CollapseButton = styled(ListItemButton)(({ theme }) => ({
   '&:hover': {
     backgroundColor: alpha(theme.palette.primary.main, 0.12),
     transform: 'scale(1.05)',
-    boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.2)}`,
+    boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(theme.palette.primary.main, 0.2)}`,
 
     '& .MuiListItemIcon-root': {
       transform: 'rotate(180deg)',
@@ -144,11 +146,11 @@ const MegaMenuSection = styled(Box)(({ theme }) => ({
   padding: theme.spacing(3),
   borderRadius: theme.spacing(2),
   background: `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.9)} 100%)`,
-  boxShadow: `0 10px 30px ${shadowInk(theme, 0.08)}`,
+  boxShadow: `0 ${rems(theme, 10, 30)} ${shadowInk(theme, 0.08)}`,
   border: `1px solid ${alpha(theme.palette.divider, 0.08)}`,
   position: 'relative',
   overflow: 'hidden',
-  animation: `${megaMenuSlide} 0.5s ease-out`,
+  animation: `${megaMenuSlide(theme)} 0.5s ease-out`,
   animationFillMode: 'both',
 
   '&::before': {
@@ -157,7 +159,7 @@ const MegaMenuSection = styled(Box)(({ theme }) => ({
     top: 0,
     left: 0,
     right: 0,
-    height: '3px',
+    height: rem(theme, 3),
     background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 50%, ${theme.palette.primary.main} 100%)`,
     backgroundSize: '200% 100%',
     animation: 'shimmer 3s ease-in-out infinite',
@@ -173,8 +175,8 @@ const MegaMenuSection = styled(Box)(({ theme }) => ({
   },
 
   '&:hover': {
-    transform: 'translateY(-4px)',
-    boxShadow: `0 15px 40px ${shadowInk(theme, 0.12)}`,
+    transform: `translateY(${rem(theme, -4)})`,
+    boxShadow: `0 ${rems(theme, 15, 40)} ${shadowInk(theme, 0.12)}`,
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
   },
 

package/src/components/navigation/NavigationMenu/NavigationMenu.styles.ts

@@ -1,13 +1,13 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 import { EFFECT_GLOW } from '../../../tokens/ink.core';
 
-export const slideIn = keyframes`
+export const slideIn = (theme: Theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(-20px);
+    transform: translateX(${rem(theme, -20)});
   }
   to {
     opacity: 1;
@@ -15,12 +15,12 @@ export const slideIn = keyframes`
   }
 `;
 
-export const pulseGlow = keyframes`
+export const pulseGlow = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.muiBlue, 0.4)};
   }
   70% {
-    box-shadow: 0 0 0 10px ${alpha(EFFECT_GLOW.muiBlue, 0)};
+    box-shadow: 0 0 0 ${rem(theme, 10)} ${alpha(EFFECT_GLOW.muiBlue, 0)};
   }
   100% {
     box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.muiBlue, 0)};
@@ -46,14 +46,14 @@ const horizontalStyles = (theme: Theme): CSSObject => ({
       borderRadius: theme.spacing(1.5),
       margin: theme.spacing(0, 0.5),
       background: alpha(theme.palette.background.paper, 0.6),
-      backdropFilter: 'blur(8px)',
+      backdropFilter: `blur(${rem(theme, 8)})`,
       border: `none`,
       // border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
     });
 
-const collapsedStyles = (): CSSObject => ({
+const collapsedStyles = (theme: Theme): CSSObject => ({
       justifyContent: 'center',
-      minHeight: 56,
+      minHeight: rem(theme, 56),
       '& .MuiListItemIcon-root': {
         margin: 0,
       },
@@ -139,7 +139,7 @@ const navInteractionStyles = (
           // Fancy hover for non-minimal variant
           background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,
           color: theme.palette.primary.main,
-          boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.15)}`,
+          boxShadow: `0 ${rems(theme, 8, 24)} ${alpha(theme.palette.primary.main, 0.15)}`,
           backgroundColor: alpha(theme.palette.primary.main, 0.04),
 
           '&::before': {
@@ -159,7 +159,7 @@ const navInteractionStyles = (
           },
 
           '& .MuiListItemText-primary': {
-            transform: 'translateX(4px)',
+            transform: `translateX(${rem(theme, 4)})`,
             transition: 'transform 0.3s ease',
           },
         },
@@ -196,7 +196,7 @@ export const navItemButtonStyles = ({
 }): CSSObject => ({
   ...(size ? (SIZE_STYLES[size]?.(theme) ?? {}) : {}),
   ...(variant === 'horizontal' ? horizontalStyles(theme) : {}),
-  ...(collapsed ? collapsedStyles() : {}),
+  ...(collapsed ? collapsedStyles(theme) : {}),
   ...(active ? activeStyles(theme, variant) : {}),
   ...navDecorationStyles(theme),
   ...navInteractionStyles(theme, minimal, collapsed, size),

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

@@ -1,5 +1,6 @@
 import Box from '@mui/material/Box/index.js';
 import Paper from '@mui/material/Paper/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React, { useState } from 'react';
 
 import { NavigationMegaSection } from './NavigationMegaSection';
@@ -8,6 +9,7 @@ import {
   LogoBar,
   NavigationShell } from './NavigationMenu.shell';
 import type { NavigationMenuItem,NavigationMenuProps } from './NavigationMenu.types';
+import { rem } from '../../../tokens/relative';
 
 
 
@@ -40,13 +42,16 @@ const MegaMenuLayout = React.forwardRef<HTMLDivElement, MegaMenuLayoutProps>(
     },
     ref,
   ) => {
+    const theme = useTheme();
+    // An inline style reads a number as px: a number here is design px.
+    const cap = typeof maxWidth === 'number' ? rem(theme, maxWidth) : maxWidth;
     return (
     <NavigationShell
       ref={ref}
       variant={variant}
       minimal={minimal}
       className={className}
-      style={{ maxWidth, ...style }}
+      style={{ maxWidth: cap, ...style }}
       {...props}
     >
       <Paper
@@ -60,7 +65,7 @@ const MegaMenuLayout = React.forwardRef<HTMLDivElement, MegaMenuLayoutProps>(
         <Box
           sx={{
             display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+            gridTemplateColumns: `repeat(auto-fit, minmax(${rem(theme, 280)}, 1fr))`,
             gap: 3,
             p: 3 }}
         >

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

@@ -17,7 +17,7 @@ import { useMenuItemState } from './NavigationMenuItem.hooks';
 import { navItemButtonStyles, pulseGlow } from './NavigationMenu.styles';
 import type { NavigationMenuItem } from './NavigationMenu.types';
 import { onMedia, shadowInk, uiInk } from '../../../tokens/ink';
-import { sxRem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 const StyledListItem = styled(ListItem, {
   shouldForwardProp: (prop) => !['variant', 'active', 'size', 'level'].includes(prop as string) })<{ variant?: string; active?: boolean; size?: string; level?: number }>(
@@ -79,12 +79,12 @@ const MenuItemPopover: React.FC<{
           pointerEvents: 'auto',
           mt: 0.5,
           borderRadius: 2,
-          boxShadow: (theme) => `0 12px 40px ${shadowInk(theme, 0.15)}`,
+          boxShadow: (theme) => `0 ${rems(theme, 12, 40)} ${shadowInk(theme, 0.15)}`,
           border: (theme) => `1px solid ${alpha(theme.palette.divider, 0.1)}`,
           background: (theme) =>
             `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.95)} 100%)`,
-          backdropFilter: 'blur(10px)',
-          minWidth: 200 } } }}
+          backdropFilter: (theme) => `blur(${rem(theme, 10)})`,
+          minWidth: sxRem(200) } } }}
   >
     <List sx={{ p: 1 }}>
       {item.children?.map((child) => {
@@ -147,19 +147,19 @@ const MenuItemLabel: React.FC<{
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
-            minWidth: 20,
-            height: 20,
+            minWidth: sxRem(20),
+            height: sxRem(20),
             px: 0.75,
-            borderRadius: '10px',
+            borderRadius: sxRem(10),
             fontSize: sxRem(12),
             fontWeight: 600,
             color: (theme) => onMedia(theme),
             background: (theme) =>
               `linear-gradient(135deg, ${uiInk(theme).attention.from} 0%, ${uiInk(theme).attention.to} 100%)`,
-            boxShadow: (theme) => `0 2px 8px ${alpha(uiInk(theme).attention.glow, 0.4)}`,
-            animation:
+            boxShadow: (theme) => `0 ${rems(theme, 2, 8)} ${alpha(uiInk(theme).attention.glow, 0.4)}`,
+            animation: (theme) =>
               typeof item.badge === 'number' && item.badge > 0
-                ? `${pulseGlow} 2s infinite`
+                ? `${pulseGlow(theme)} 2s infinite`
                 : 'none' }}
         >
           {item.badge}
@@ -229,11 +229,11 @@ const MenuItemContent: React.FC<{
         {item.icon && (
           <ListItemIcon
             sx={{
-              minWidth: collapsed ? 0 : 40,
+              minWidth: collapsed ? 0 : sxRem(40),
               justifyContent: 'center',
               transition: 'all 0.3s ease',
               '& svg': {
-                filter: (theme) => (item.active ? `drop-shadow(0 2px 8px ${shadowInk(theme, 0.15)})` : 'none'),
+                filter: (theme) => (item.active ? `drop-shadow(0 ${rems(theme, 2, 8)} ${shadowInk(theme, 0.15)})` : 'none'),
                 transition: 'all 0.3s ease' } }}
           >
             <Grow in={true} timeout={600}>

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

@@ -13,6 +13,7 @@ import { CollapseToggle, LogoBar, MenuList } from './NavigationMenu.shell';
 import { slideIn } from './NavigationMenu.styles';
 import type { NavigationMenuItem } from './NavigationMenu.types';
 import { renderMenuItem } from './NavigationMenuItem';
+import { sxRem } from '../../../tokens/relative';
 
 const DividerRule: FC = () => (
   <Divider
@@ -42,7 +43,7 @@ const CollapseControl: FC<{ collapsed: boolean; onToggle: () => void }> = ({
   onToggle,
 }) => (
   <CollapseToggle onClick={onToggle}>
-    <ListItemIcon sx={{ minWidth: collapsed ? 0 : 40, justifyContent: 'center' }}>
+    <ListItemIcon sx={{ minWidth: collapsed ? 0 : sxRem(40), justifyContent: 'center' }}>
       <MenuIcon />
     </ListItemIcon>
     {!collapsed && <ListItemText primary="Collapse" />}
@@ -63,7 +64,7 @@ const MenuItems: FC<{
         <Box
           sx={{
             // Staggered so the list fills in rather than appearing at once.
-            animation: `${slideIn} 0.4s ease-out`,
+            animation: (theme) => `${slideIn(theme)} 0.4s ease-out`,
             animationDelay: `${index * 0.05}s`,
             animationFillMode: 'both',
           }}