@12-apps/ui 6.36.0 → 6.38.0

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

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

@@ -1,17 +1,17 @@
 import { alpha } 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';
 
 const ITEM_SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {
   sm: (theme) => ({
       fontSize: rem(theme, 14),
-      minWidth: 28,
-      height: 28,
+      minWidth: rem(theme, 28),
+      height: rem(theme, 28),
       padding: theme.spacing(0.25, 0.5) }),
   lg: (theme) => ({
       fontSize: rem(theme, 18),
-      minWidth: 44,
-      height: 44,
+      minWidth: rem(theme, 44),
+      height: rem(theme, 44),
       padding: theme.spacing(1, 1.5) }) };
 
 // One variant applies at a time, so a lookup replaces the mutually exclusive
@@ -21,36 +21,36 @@ const ITEM_VARIANTS: Record<string, (theme: Theme, customSize?: string) => CSSOb
       borderRadius: theme.spacing(1),
       '&:hover': {
         backgroundColor: alpha(theme.palette.primary.main, 0.08),
-        transform: 'translateY(-1px)',
-        boxShadow: `0 2px 8px ${alpha(theme.palette.primary.main, 0.15)}` },
+        transform: `translateY(${rem(theme, -1)})`,
+        boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.primary.main, 0.15)}` },
       '&.Mui-selected': {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
-        boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+        boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,
         '&:hover': {
           backgroundColor: theme.palette.primary.dark,
-          transform: 'translateY(-2px)' } } }),
+          transform: `translateY(${rem(theme, -2)})` } } }),
   rounded: (theme, customSize) => ({
       borderRadius: '50%',
-      minWidth: customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36,
-      width: customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36,
+      minWidth: rem(theme, customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36),
+      width: rem(theme, customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36),
       '&:hover': {
         backgroundColor: alpha(theme.palette.primary.main, 0.08),
         transform: 'scale(1.1)',
-        boxShadow: `0 4px 16px ${alpha(theme.palette.primary.main, 0.2)}` },
+        boxShadow: `0 ${rems(theme, 4, 16)} ${alpha(theme.palette.primary.main, 0.2)}` },
       '&.Mui-selected': {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
         transform: 'scale(1.05)',
-        boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.3)}`,
+        boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(theme.palette.primary.main, 0.3)}`,
         '&:hover': {
           backgroundColor: theme.palette.primary.dark,
           transform: 'scale(1.15)' } } }),
   dots: (theme, customSize) => ({
       borderRadius: '50%',
-      minWidth: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
-      width: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
-      height: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
+      minWidth: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),
+      width: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),
+      height: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),
       fontSize: 0,
       backgroundColor: alpha(theme.palette.text.secondary, 0.3),
       '&:hover': {
@@ -84,9 +84,9 @@ const ITEM_VARIANTS: Record<string, (theme: Theme, customSize?: string) => CSSOb
           left: '50%',
           transform: 'translateX(-50%)',
           width: '60%',
-          height: 2,
+          height: rem(theme, 2),
           backgroundColor: theme.palette.primary.main,
-          borderRadius: 1 } } }) };
+          borderRadius: rem(theme, 1) } } }) };
 
 const itemSizeStyles = (theme: Theme, customSize?: string): CSSObject =>
   customSize ? (ITEM_SIZE_STYLES[customSize]?.(theme) ?? {}) : {};

package/src/components/navigation/Pagination/Pagination.tsx

@@ -14,6 +14,7 @@ import { makeTestId, muiSizeFor, resolvePaginationProps } from './Pagination.hel
 import { paginationStyles } from './Pagination.styles';
 import type { PaginationProps } from './Pagination.types';
 import { ItemsPerPageSelect, PageInfo } from './PaginationParts';
+import { sxRem } from '../../../tokens/relative';
 
 const StyledPagination = styled(MuiPagination, {
   shouldForwardProp: (prop) => !['customVariant', 'customSize'].includes(prop as string) })<{ customVariant?: string; customSize?: string }>(({ theme, customVariant, customSize }) => ({
@@ -80,7 +81,7 @@ const renderPaginationItem = ({
               '&.MuiPaginationItem-page': {
                 fontSize: 0,
                 overflow: 'hidden',
-                textIndent: '-9999px' } }}
+                textIndent: sxRem(-9999) } }}
           />
         );
       }

package/src/components/navigation/Pagination/PaginationParts.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 
 import { scaleFor } from './Pagination.helpers';
 import { asFieldSize, fieldTextFieldStyles } from '../../../tokens/field-height';
+import { rem, sxRem } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -48,7 +49,7 @@ export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
     <Typography variant="body2" color="text.secondary">
       {pageSizeLabel}
     </Typography>
-    <FormControl size="small" sx={(theme) => ({ minWidth: 80, ...fieldTextFieldStyles(theme, asFieldSize(size)) })}>
+    <FormControl size="small" sx={(theme) => ({ minWidth: rem(theme, 80), ...fieldTextFieldStyles(theme, asFieldSize(size)) })}>
       <Select
         value={value}
         onChange={(event) => onChange(event.target.value as number)}
@@ -56,7 +57,7 @@ export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
         data-testid={testId}
         sx={{
           '& .MuiSelect-select': {
-            fontSize: scaleFor(size, ['0.875rem', '1rem', '1.125rem']),
+            fontSize: sxRem(scaleFor(size, [14, 16, 18])),
           },
         }}
       >
@@ -79,7 +80,7 @@ export const PageInfo: FC<{ size: string; testId: string; children: React.ReactN
     <Typography
       variant="body2"
       color="text.secondary"
-      fontSize={scaleFor(size, ['0.75rem', '0.875rem', '1rem'])}
+      sx={{ fontSize: sxRem(scaleFor(size, [12, 14, 16])) }}
       data-testid={testId}
     >
       {children}

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

@@ -1,22 +1,23 @@
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { alpha } from '@mui/material/styles/index.js';
-import { rem } from '../../../tokens/relative';
+import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';
+import { rem, rems } from '../../../tokens/relative';
 
 const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
     ...(size === 'sm' && {
-      minHeight: 32,
+      minHeight: rem(theme, 32),
       '& .MuiTab-root': {
         fontSize: rem(theme, 14),
-        minHeight: 32,
+        minHeight: rem(theme, 32),
         padding: theme.spacing(0.5, 1.5),
       },
     }),
 
     ...(size === 'lg' && {
-      minHeight: 56,
+      minHeight: rem(theme, 56),
       '& .MuiTab-root': {
         fontSize: rem(theme, 18),
-        minHeight: 56,
+        minHeight: rem(theme, 56),
         padding: theme.spacing(1.5, 3),
       },
     }),
@@ -26,8 +27,8 @@ const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
 const compactVariantStyles = (theme: Theme, customVariant?: string): CSSObject => ({
     ...(customVariant === 'default' && {
       '& .MuiTabs-indicator': {
-        height: 3,
-        borderRadius: '3px 3px 0 0',
+        height: rem(theme, 3),
+        borderRadius: rems(theme, 3, 3, 0, 0),
         background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
       },
     }),
@@ -44,12 +45,12 @@ const compactVariantStyles = (theme: Theme, customVariant?: string): CSSObject =
         transition: 'all 0.3s ease',
         '&:hover': {
           backgroundColor: alpha(theme.palette.primary.main, 0.08),
-          transform: 'translateY(-1px)',
+          transform: `translateY(${rem(theme, -1)})`,
         },
         '&.Mui-selected': {
           backgroundColor: theme.palette.primary.main,
           color: theme.palette.primary.contrastText,
-          boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+          boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,
           '&:hover': {
             backgroundColor: theme.palette.primary.dark,
           },
@@ -66,9 +67,9 @@ const boxedVariantStyles = (theme: Theme, customVariant?: string): CSSObject =>
         gap: theme.spacing(2),
       },
       '& .MuiTabs-indicator': {
-        height: 2,
+        height: rem(theme, 2),
         backgroundColor: theme.palette.primary.main,
-        borderRadius: 1,
+        borderRadius: rem(theme, 1),
       },
       '& .MuiTab-root': {
         textTransform: 'none',
@@ -98,7 +99,8 @@ const boxedVariantStyles = (theme: Theme, customVariant?: string): CSSObject =>
         borderBottom: 'none',
         borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
         margin: theme.spacing(0, 0.5),
-        marginBottom: -1,
+        // Overlap the list's own hairline so the selected tab reads as open.
+        marginBottom: `-${FIELD_BORDER_WIDTH}px`,
         backgroundColor: alpha(theme.palette.action.hover, 0.5),
         '&:hover': {
           backgroundColor: alpha(theme.palette.action.hover, 0.8),

package/src/components/navigation/Tabs/Tabs.tsx

@@ -5,12 +5,13 @@ import Divider from '@mui/material/Divider/index.js';
 import MuiTab from '@mui/material/Tab/index.js';
 import MuiTabs from '@mui/material/Tabs/index.js';
 import { alpha, styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { CustomTabPanel } from './TabsPanel';
 import { tabsRootStyles } from './Tabs.styles';
 import type { TabItem, TabsProps } from './Tabs.types';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const StyledTabs = styled(MuiTabs, {
   shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string) })<{ customVariant?: string; size?: string; showDividers?: boolean }>(
@@ -21,8 +22,8 @@ const StyledTabs = styled(MuiTabs, {
 const CloseButton = styled(Box)(({ theme }) => ({
   marginLeft: theme.spacing(0.5),
   padding: theme.spacing(0.25),
-  width: 20,
-  height: 20,
+  width: rem(theme, 20),
+  height: rem(theme, 20),
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -35,11 +36,11 @@ const CloseButton = styled(Box)(({ theme }) => ({
 
 const BadgeWrapper = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
-    right: -6,
-    top: 4,
+    right: rem(theme, -6),
+    top: rem(theme, 4),
     fontSize: rem(theme, 12),
-    minWidth: 16,
-    height: 16,
+    minWidth: rem(theme, 16),
+    height: rem(theme, 16),
     padding: 0 } }));
 
 const TABS_DEFAULTS: Partial<TabsProps> = {
@@ -124,7 +125,8 @@ const buildTabsSx = ({
   disabled }: {
   fullWidth?: boolean;
   sticky?: boolean;
-  stickyOffset?: number;
+  /** The pinned list's `top`, already through the theme (the prop is design px). */
+  stickyOffset: (theme: Theme) => string;
   indicatorColor?: string;
   disabled?: boolean;
 }) => ({
@@ -209,7 +211,7 @@ const TabsBar: React.FC<
     sx={buildTabsSx({
       fullWidth: p.fullWidth,
       sticky: p.sticky,
-      stickyOffset: p.stickyOffset,
+      stickyOffset: sxRem(p.stickyOffset ?? 0),
       indicatorColor: p.indicatorColor,
       disabled: p.disabled })}
   >