@12-apps/ui 6.37.0 → 6.38.0

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

@@ -17,19 +17,20 @@ import {
   neumorphicShadows,
 } from './Card.metrics';
 import { neutralTones, shadowInk, sheen } from '../../../tokens/ink';
-import { shadowCss, shadowListCss } from '../../../tokens/shadow';
+import { rem, rems } from '../../../tokens/relative';
+import type { UiShadow } from '../../../tokens/shadow';
 
 type BorderRadius = CardBorderRadius;
 
 // Define pulse animation. The 15px spread and the 2s period are the shared
 // metrics, so the native ring grows by exactly as much for exactly as long.
-const pulseAnimation = keyframes`
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 ${CARD_PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, CARD_PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -38,11 +39,20 @@ const pulseAnimation = keyframes`
   }
 `;
 
-const borderRadiusFor = (theme: Theme, radius: BorderRadius): number | string => {
+/**
+ * A shared-metrics shadow as CSS, every length through the type scale: the text
+ * `shadowCss` writes (a bare `0`, no zero spread) with rem in place of px.
+ */
+const shadowRem = (theme: Theme, shadow: UiShadow): string => {
+  const spread = shadow.spreadDistance === 0 ? [] : [shadow.spreadDistance];
+  return `${rems(theme, shadow.offsetX, shadow.offsetY, shadow.blurRadius, ...spread)} ${shadow.color}`;
+};
+
+const borderRadiusFor = (theme: Theme, radius: BorderRadius): string => {
   if (radius === 'full') return CARD_RADIUS_FULL;
   const units = CARD_RADIUS_UNITS[radius] ?? CARD_RADIUS_UNITS.md;
   // `none` is a bare 0 rather than `spacing(0)`, as this has always written it.
-  return units === 0 ? 0 : theme.spacing(units);
+  return units === 0 ? '0' : theme.spacing(units);
 };
 
 const pulseSurface = (theme: Theme): CSSObject => ({
@@ -58,7 +68,7 @@ const pulseSurface = (theme: Theme): CSSObject => ({
     borderRadius: 'inherit',
     backgroundColor: theme.palette.primary.main,
     opacity: CARD_PULSE.alpha,
-    animation: `${pulseAnimation} ${CARD_PULSE.durationMs / 1000}s infinite`,
+    animation: `${pulseAnimation(theme)} ${CARD_PULSE.durationMs / 1000}s infinite`,
     pointerEvents: 'none',
     zIndex: CARD_PULSE.zIndex,
   },
@@ -77,7 +87,7 @@ const neumorphicShadow = (theme: Theme, lifted: boolean): string => {
           sheen(theme, lifted ? light.far.lifted : light.far.rest),
         ];
 
-  return shadowListCss(neumorphicShadows(lifted, near, far));
+  return neumorphicShadows(lifted, near, far).map((shadow) => shadowRem(theme, shadow)).join(', ');
 };
 
 const sectionBackground = (theme: Theme, lifted: boolean): string => {
@@ -87,13 +97,7 @@ const sectionBackground = (theme: Theme, lifted: boolean): string => {
 
 const glowShadow = (theme: Theme, lifted: boolean): string => {
   const { blurRadius, alpha: opacity } = lifted ? CARD_GLOW.lifted : CARD_GLOW.rest;
-  return shadowCss({
-    offsetX: 0,
-    offsetY: 0,
-    blurRadius,
-    spreadDistance: 0,
-    color: alpha(theme.palette.primary.main, opacity),
-  });
+  return `${rems(theme, 0, 0, blurRadius)} ${alpha(theme.palette.primary.main, opacity)}`;
 };
 
 interface Surface {
@@ -121,15 +125,9 @@ const VARIANT_SURFACES: Record<CardVariant, (theme: Theme, lifted: boolean) => S
   glass: (theme, lifted) => ({
     surface: {
       backgroundColor: alpha(theme.palette.background.paper, CARD_GLASS.backgroundAlpha.rest),
-      backdropFilter: `blur(${CARD_GLASS.blurPx}px)`,
+      backdropFilter: `blur(${rem(theme, CARD_GLASS.blurPx)})`,
       border: `${CARD_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, CARD_GLASS.borderAlpha.rest)}`,
-      boxShadow: shadowCss({
-        offsetX: 0,
-        offsetY: CARD_GLASS.shadow.offsetY,
-        blurRadius: CARD_GLASS.shadow.blurRadius,
-        spreadDistance: 0,
-        color: shadowInk(theme, CARD_GLASS.shadow.alpha),
-      }),
+      boxShadow: `${rems(theme, 0, CARD_GLASS.shadow.offsetY, CARD_GLASS.shadow.blurRadius)} ${shadowInk(theme, CARD_GLASS.shadow.alpha)}`,
     },
     hover: {
       backgroundColor: alpha(
@@ -143,13 +141,7 @@ const VARIANT_SURFACES: Record<CardVariant, (theme: Theme, lifted: boolean) => S
     surface: {
       background: cardGradient(theme, false),
       color: theme.palette.primary.contrastText,
-      boxShadow: shadowCss({
-        offsetX: 0,
-        offsetY: CARD_GRADIENT.shadow.offsetY,
-        blurRadius: CARD_GRADIENT.shadow.blurRadius,
-        spreadDistance: 0,
-        color: alpha(theme.palette.primary.main, CARD_GRADIENT.shadow.alpha),
-      }),
+      boxShadow: `${rems(theme, 0, CARD_GRADIENT.shadow.offsetY, CARD_GRADIENT.shadow.blurRadius)} ${alpha(theme.palette.primary.main, CARD_GRADIENT.shadow.alpha)}`,
     },
     hover: { background: cardGradient(theme, lifted) },
   }),
@@ -215,7 +207,7 @@ export const cardStyles = (
     ...(pulse && pulseSurface(theme)),
     ...chosen.surface,
     '&:hover': {
-      ...(interactive && { transform: `translateY(-${CARD_INTERACTIVE_LIFT}px)` }),
+      ...(interactive && { transform: `translateY(${rem(theme, -CARD_INTERACTIVE_LIFT)})` }),
       ...(glow && { boxShadow: glowShadow(theme, true) }),
       ...chosen.hover,
     },

package/src/components/layout/Collapsible/Collapsible.helpers.ts

@@ -1,5 +1,7 @@
 import type { Theme } from '@mui/material/styles/index.js';
 
+import { rem } from '../../../tokens/relative';
+
 import type { CollapsibleVariant } from './Collapsible.types';
 
 /**
@@ -73,8 +75,8 @@ export const triggerStyles = (
           : theme.palette.action.hover,
     },
     '&:focus': {
-      outline: `2px solid ${theme.palette.primary.main}`,
-      outlineOffset: 2,
+      outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,
+      outlineOffset: rem(theme, 2),
     },
     '&:active': {
       backgroundColor: disabled ? 'transparent' : theme.palette.action.focus,

package/src/components/layout/Collapsible/Collapsible.tsx

@@ -3,6 +3,8 @@ import Collapse from '@mui/material/Collapse/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React, { useCallback,useEffect, useRef, useState } from 'react';
 
+import { remPx, sxRem } from '../../../tokens/relative';
+
 import {
   dimmedStyles,
   regionAttrs,
@@ -20,16 +22,17 @@ const useMeasuredHeight = (
   maxHeight: number | undefined,
   children: React.ReactNode,
 ) => {
+  const theme = useTheme();
   const contentRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | 'auto'>('auto');
 
   const measureHeight = useCallback(() => {
     if (contentRef.current) {
       const scrollHeight = contentRef.current.scrollHeight;
-      // Cap at maxHeight if provided
-      setHeight(maxHeight ? Math.min(scrollHeight, maxHeight) : scrollHeight);
+      // Cap at maxHeight (design px, through the type scale) if provided
+      setHeight(maxHeight ? Math.min(scrollHeight, remPx(theme, maxHeight)) : scrollHeight);
     }
-  }, [maxHeight]);
+  }, [maxHeight, theme]);
 
   useEffect(() => {
     if (!open) {
@@ -69,7 +72,8 @@ const DefaultCollapsible: React.FC<VariantProps> = ({
     timeout={disabled ? 0 : duration}
     sx={{
       ...dimmedStyles(disabled),
-      ...(maxHeight && { maxHeight, overflow: 'hidden' }),
+      // `sx` reads 1 or less as a fraction of the parent; anything else is design px.
+      ...(maxHeight && { maxHeight: maxHeight <= 1 ? `${maxHeight * 100}%` : sxRem(maxHeight), overflow: 'hidden' }),
       ...sx,
     }}
     className={className}

package/src/components/layout/ContentToolbar/ColumnsMenu.tsx

@@ -88,7 +88,7 @@ export function ColumnsMenu({
         onClose={close}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-        slotProps={{ paper: { sx: { minWidth: 200 } } }}
+        slotProps={{ paper: { sx: { minWidth: sxRem(200) } } }}
       >
         <ListSubheader sx={{ px: 1.5, py: 0.75, fontSize: sxRem(12), fontWeight: 600, color: 'text.primary', lineHeight: 1.5 }}>
           {title}

package/src/components/layout/ContentToolbar/ContentToolbar.tsx

@@ -148,7 +148,7 @@ function SelectionState({
       >
         {clearAllText}
       </Button>
-      <Divider orientation="vertical" flexItem sx={{ height: 16, alignSelf: 'center' }} />
+      <Divider orientation="vertical" flexItem sx={{ height: sxRem(16), alignSelf: 'center' }} />
       <Typography
         component="span"
         data-testid="selected-count-indicator"
@@ -231,7 +231,7 @@ function BrowsingClusters({
           flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',
           // Tight (5px) when browsing so the controls fit one line beside the
           // checkbox; roomier (14px) in selection mode where they get their own row.
-          gap: hasSelection ? '14px' : '5px',
+          gap: hasSelection ? sxRem(14) : sxRem(5),
           ml: 'auto',
           mr: edgeAlign ? -1.5 : 0,
           '& > *': { flexShrink: 0 },

package/src/components/layout/ContentToolbar/FilterTrigger.tsx

@@ -54,8 +54,8 @@ export function FilterTrigger({
           data-testid={`${testId}-count`}
           sx={{
             ml: 0.5,
-            minWidth: 18,
-            height: 18,
+            minWidth: sxRem(18),
+            height: sxRem(18),
             px: 0.5,
             borderRadius: 999,
             display: 'inline-flex',

package/src/components/layout/ContentToolbar/MultiSelectDropdown.tsx

@@ -248,7 +248,7 @@ function MultiSelectMenu<TValue extends string>({
       slotProps={{
         // Cap the height so a long list (e.g. many categories) scrolls instead
         // of running off-screen; the sticky search box stays pinned on top.
-        paper: { sx: { minWidth: anchorWidth ?? 180, width: anchorWidth, maxHeight: 360 } },
+        paper: { sx: { minWidth: anchorWidth ?? sxRem(180), width: anchorWidth, maxHeight: sxRem(360) } },
         list: { sx: { pt: showSearch ? 0 : undefined, pb: 0 } },
       }}
     >

package/src/components/layout/ContentToolbar/SavedViewsMenu.tsx

@@ -92,7 +92,7 @@ function ViewKebab<V extends SavedViewLike>({
         aria-label={`${labels.apply} ${view.name}`}
         data-testid={`${testIdPrefix}-kebab-${view.id}`}
         onClick={(event) => setAnchorEl(event.currentTarget)}
-        sx={{ width: 28, height: 28, color: 'text.secondary' }}
+        sx={{ width: sxRem(28), height: sxRem(28), color: 'text.secondary' }}
       >
         <KebabIcon sx={{ fontSize: sxRem(16) }} />
       </IconButton>
@@ -215,7 +215,7 @@ function PopoverBody<V extends SavedViewLike>({
   testIdPrefix: string;
 }): React.JSX.Element {
   return (
-    <Stack spacing={1.5} sx={{ p: 1.5, width: 300 }} data-testid={`${testIdPrefix}-popover`}>
+    <Stack spacing={1.5} sx={{ p: 1.5, width: sxRem(300) }} data-testid={`${testIdPrefix}-popover`}>
       {/* Built-in no-filter default, always available above the saved views. */}
       <MenuItem data-testid={`${testIdPrefix}-main`} selected={!activeViewName} onClick={onSelectMain} sx={{ borderRadius: 1, px: 1, gap: 1 }}>
         <Box component="span" sx={{ flex: 1, minWidth: 0, fontSize: sxRem(14) }}>

package/src/components/layout/ContentToolbar/SortByDropdown.tsx

@@ -74,7 +74,7 @@ const sectionLabelSx = { px: 1, py: 0.75, fontSize: sxRem(12), fontWeight: 600,
 /** A fixed-width check slot (empty when unchecked) so labels align. */
 function SortCheck({ checked }: { checked: boolean }): React.JSX.Element {
   return (
-    <Box component="span" sx={{ display: 'flex', width: 16, flexShrink: 0, alignItems: 'center', justifyContent: 'center' }} aria-hidden>
+    <Box component="span" sx={{ display: 'flex', width: sxRem(16), flexShrink: 0, alignItems: 'center', justifyContent: 'center' }} aria-hidden>
       {checked ? <CheckIcon sx={{ fontSize: sxRem(14) }} /> : null}
     </Box>
   );
@@ -137,7 +137,7 @@ function SortMenu<TField extends string>({
       onClose={close}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-      slotProps={{ paper: { sx: { minWidth: 180 } } }}
+      slotProps={{ paper: { sx: { minWidth: sxRem(180) } } }}
     >
       {orderOptions.length > 0 && [
         <ListSubheader key="order-label" sx={sectionLabelSx}>

package/src/components/layout/ContentToolbar/ViewSelector.tsx

@@ -46,7 +46,7 @@ export function ViewSelector({
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
       {viewMode === 'grid' && (
-        <Box sx={{ width: 96, display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ width: sxRem(96), display: 'flex', alignItems: 'center' }}>
           <Slider
             data-testid="resize-card-slider"
             aria-label={cardSizeLabel}
@@ -80,7 +80,7 @@ export function ViewSelector({
         onClose={() => setAnchorEl(null)}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-        slotProps={{ paper: { sx: { minWidth: 180 } } }}
+        slotProps={{ paper: { sx: { minWidth: sxRem(180) } } }}
       >
         {VIEW_OPTIONS.map((option) => {
           const OptionIcon = option.icon;

package/src/components/layout/Dashboard/Dashboard.tsx

@@ -217,7 +217,7 @@ const DashboardHeader = ({ title, children, className }: DashboardHeaderProps):
     <Box
       className={className}
       data-testid={`${testIdPrefix}-header`}
-      sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', minHeight: 40 }}
+      sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', minHeight: sxRem(40) }}
     >
       <Typography variant="h5" component="h1" sx={{ fontWeight: 600, mr: 0.5 }}>
         {title}

package/src/components/layout/Dashboard/DashboardParts.tsx

@@ -64,7 +64,7 @@ export const DashboardInfo = ({
         anchorEl={anchorEl}
         onClose={() => setAnchorEl(null)}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        slotProps={{ paper: { sx: { width: 360, maxWidth: '90vw' } } }}
+        slotProps={{ paper: { sx: { width: sxRem(360), maxWidth: '90vw' } } }}
         data-testid={`${testIdPrefix}-info-popover`}
       >
         <Box sx={{ px: 2, py: 1.5, borderBottom: 1, borderColor: 'divider', display: 'flex', gap: 1, alignItems: 'center' }}>

package/src/components/layout/Drawer/Drawer.tsx

@@ -9,9 +9,20 @@ import React from 'react';
 
 import type { DrawerContentProps,DrawerHeaderProps, DrawerProps } from './Drawer.types';
 import { shadowInk } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
 
+/**
+ * A `width`/`height` 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; a string is as given.
+ */
+const drawerLength = (theme: Theme, value: number | string | undefined): string | undefined => {
+  if (typeof value !== 'number') return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+};
+
 // `variant` doubles as a position preset, but an explicit `anchor` always wins.
 const resolveAnchor = (
   anchor: DrawerProps['anchor'],
@@ -47,9 +58,11 @@ const buildDrawerStyles = (
   // omit it and the drawer styles exactly as it always has.
   paperSx?: DrawerProps['paperSx'],
 ) => {
+  const widthCss = drawerLength(theme, width);
+  const heightCss = drawerLength(theme, height);
   const baseStyles = {
-    width: ['left', 'right'].includes(anchor) ? width : '100%',
-    height: ['top', 'bottom'].includes(anchor) ? height : '100%',
+    width: ['left', 'right'].includes(anchor) ? widthCss : '100%',
+    height: ['top', 'bottom'].includes(anchor) ? heightCss : '100%',
     flexShrink: 0,
   };
 
@@ -57,12 +70,12 @@ const buildDrawerStyles = (
     return {
       ...baseStyles,
       '& .MuiDrawer-paper': {
-        width,
+        width: widthCss,
         height: '100%',
         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)}`,
         ...paperSx,
       },
     };
@@ -71,8 +84,8 @@ const buildDrawerStyles = (
   return {
     ...baseStyles,
     '& .MuiDrawer-paper': {
-      width: ['left', 'right'].includes(anchor) ? width : '100%',
-      height: ['top', 'bottom'].includes(anchor) ? height : '100%',
+      width: ['left', 'right'].includes(anchor) ? widthCss : '100%',
+      height: ['top', 'bottom'].includes(anchor) ? heightCss : '100%',
       boxSizing: 'border-box',
       ...paperSx,
     },
@@ -85,7 +98,7 @@ export const Drawer: React.FC<DrawerProps> = ({
   onClose,
   variant = 'left',
   anchor,
-  width = 280,
+  width,
   height = '100%',
   persistent = false,
   backdrop = true,
@@ -112,7 +125,7 @@ export const Drawer: React.FC<DrawerProps> = ({
           invisible: !backdrop,
         },
       }}
-      sx={buildDrawerStyles(theme, drawerAnchor, variant, width, height, paperSx)}
+      sx={buildDrawerStyles(theme, drawerAnchor, variant, width ?? 280, height, paperSx)}
       className={className}
       data-testid={dataTestId || 'drawer'}
       {...rest}
@@ -139,7 +152,7 @@ export const DrawerHeader: React.FC<DrawerHeaderProps> = ({
         alignItems: 'center',
         padding: theme.spacing(2),
         borderBottom: `1px solid ${theme.palette.divider}`,
-        minHeight: 64,
+        minHeight: rem(theme, 64),
         justifyContent: 'space-between',
       }}
     >

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

@@ -3,17 +3,28 @@ import { alpha } from '@mui/material/styles/index.js';
 
 import type { ScrollAreaProps } from './ScrollArea.types';
 import { neutralTones, sheen } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
+/** The scrollbar's thickness in design px, per `scrollbarSize`; `default` is the fallback. */
 const SCROLLBAR_SIZES: Record<string, number> = {
   thin: 8,
   thick: 16,
+  default: 12,
 };
 
-const DEFAULT_SCROLLBAR_SIZE = 12;
-
 // thin/thick are the named ends of the scale; anything else takes the default.
 const getScrollbarSize = (scrollbarSize?: string): number =>
-  scrollbarSize ? (SCROLLBAR_SIZES[scrollbarSize] ?? DEFAULT_SCROLLBAR_SIZE) : DEFAULT_SCROLLBAR_SIZE;
+  (scrollbarSize ? SCROLLBAR_SIZES[scrollbarSize] : undefined) ?? SCROLLBAR_SIZES.default!;
+
+/**
+ * A size 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; a string is as given.
+ */
+export const sizeCss = (theme: Theme, value: number | string | undefined): string | undefined => {
+  if (typeof value !== 'number') return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+};
 
 const getScrollbarColors = ({
   theme,
@@ -75,11 +86,12 @@ export const getOverflowStyle = ({
 
 // Scrollbar chrome shared by every variant. autoHide fades the thumb out when
 // the area is idle, which is why the colours are parameters rather than read
-// from the variant directly.
-const autoHideScrollbarStyles = ({
+// from the variant directly. An `sx` object (it is spread into the viewport's
+// `sx`), so a number on `borderRadius` is a multiple of `shape.borderRadius`.
+const autoHideScrollbarSx = ({
   thumbColor,
   trackColor,
-  size,
+  thickness,
   orientation,
   shouldShowScrollbar,
   theme,
@@ -87,24 +99,24 @@ const autoHideScrollbarStyles = ({
 }: {
   thumbColor: string;
   trackColor: string;
-  size: number;
+  thickness: number;
   orientation?: ScrollAreaProps['orientation'];
   shouldShowScrollbar: boolean;
   theme: Theme;
   scrollbarSize?: string;
 }) => ({
     '&::-webkit-scrollbar': {
-      width: orientation !== 'horizontal' ? size : '100%',
-      height: orientation !== 'vertical' ? size : '100%',
+      width: orientation !== 'horizontal' ? rem(theme, thickness) : '100%',
+      height: orientation !== 'vertical' ? rem(theme, thickness) : '100%',
     },
     '&::-webkit-scrollbar-track': {
       background: shouldShowScrollbar ? trackColor : 'transparent',
-      borderRadius: size / 2,
+      borderRadius: thickness / 2,
       transition: 'background 0.3s ease',
     },
     '&::-webkit-scrollbar-thumb': {
       background: shouldShowScrollbar ? thumbColor : 'transparent',
-      borderRadius: size / 2,
+      borderRadius: thickness / 2,
       transition: 'background 0.3s ease',
       '&:hover': {
         background: shouldShowScrollbar ? theme.palette.primary.main : 'transparent',
@@ -127,34 +139,35 @@ const autoHideScrollbarStyles = ({
 type VariantArgs = {
   theme: Theme;
   colors: { scrollbar: string; track: string };
-  size: number;
+  thickness: number;
   orientation?: ScrollAreaProps['orientation'];
   shouldShowScrollbar: boolean;
   scrollbarSize?: string;
 };
 
 // One entry per scrollbar look. overlay floats above the content, glass tints
-// it, and the default delegates to the shared auto-hide chrome.
-const VARIANT_SCROLLBARS: Record<string, (args: VariantArgs) => CSSObject> = {
-  overlay: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => ({
+// it, and the default delegates to the shared auto-hide chrome. Each is an `sx`
+// object, like the chrome.
+const VARIANT_SCROLLBAR_SX: Record<string, (args: VariantArgs) => CSSObject> = {
+  overlay: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => ({
           '&::-webkit-scrollbar': {
-            width: orientation !== 'horizontal' ? size : '100%',
-            height: orientation !== 'vertical' ? size : '100%',
+            width: orientation !== 'horizontal' ? rem(theme, thickness) : '100%',
+            height: orientation !== 'vertical' ? rem(theme, thickness) : '100%',
             position: 'absolute',
             right: 0,
             top: 0,
           },
           '&::-webkit-scrollbar-track': {
             background: 'transparent',
-            borderRadius: size / 2,
+            borderRadius: thickness / 2,
           },
           '&::-webkit-scrollbar-thumb': {
             background: shouldShowScrollbar
               ? alpha(colors.scrollbar, 0.5)
               : 'transparent',
-            borderRadius: size / 2,
+            borderRadius: thickness / 2,
             transition: 'background 0.3s ease',
-            border: '2px solid transparent',
+            border: `${rem(theme, 2)} solid transparent`,
             backgroundClip: 'padding-box',
             '&:hover': {
               background: shouldShowScrollbar ? theme.palette.primary.main : 'transparent',
@@ -178,14 +191,14 @@ const VARIANT_SCROLLBARS: Record<string, (args: VariantArgs) => CSSObject> = {
   // Firefox property) keeps the solid palette colour rather than the gradient —
   // a gradient is not a valid value there, which is why the original picked
   // colors.scrollbar for it.
-  glass: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => {
+  glass: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => {
     const glassThumbColor = `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.3)}, ${alpha(theme.palette.secondary.main, 0.3)})`;
     const glassTrackColor = alpha(theme.palette.background.paper, 0.1);
 
-    const base = autoHideScrollbarStyles({
+    const base = autoHideScrollbarSx({
       thumbColor: glassThumbColor,
       trackColor: glassTrackColor,
-      size,
+      thickness,
       orientation,
       shouldShowScrollbar,
       theme,
@@ -196,26 +209,26 @@ const VARIANT_SCROLLBARS: Record<string, (args: VariantArgs) => CSSObject> = {
       ...base,
       '&::-webkit-scrollbar-track': {
         ...(base['&::-webkit-scrollbar-track'] as object),
-        backdropFilter: shouldShowScrollbar ? 'blur(5px)' : 'none',
+        backdropFilter: shouldShowScrollbar ? `blur(${rem(theme, 5)})` : 'none',
       },
       '&::-webkit-scrollbar-thumb': {
         ...(base['&::-webkit-scrollbar-thumb'] as object),
         boxShadow: shouldShowScrollbar
-          ? `inset 0 0 6px ${sheen(theme, 0.3)}`
+          ? `inset ${rems(theme, 0, 0, 6)} ${sheen(theme, 0.3)}`
           : 'none',
       },
       scrollbarColor: shouldShowScrollbar
         ? `${colors.scrollbar} ${glassTrackColor}`
         : 'transparent transparent',
-      backdropFilter: 'blur(10px)',
+      backdropFilter: `blur(${rem(theme, 10)})`,
     };
   },
 
-  default: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) =>
-    autoHideScrollbarStyles({
+  default: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) =>
+    autoHideScrollbarSx({
       thumbColor: colors.scrollbar,
       trackColor: colors.track,
-      size,
+      thickness,
       orientation,
       shouldShowScrollbar,
       theme,
@@ -241,9 +254,9 @@ export const getVariantStyles = ({
   shouldShowScrollbar: boolean;
 }) => {
   const colors = getScrollbarColors({ theme, variant, scrollbarColor, scrollbarTrackColor });
-  const size = getScrollbarSize(scrollbarSize);
+  const thickness = getScrollbarSize(scrollbarSize);
 
-  const build = VARIANT_SCROLLBARS[variant ?? 'default'] ?? VARIANT_SCROLLBARS.default!;
+  const build = VARIANT_SCROLLBAR_SX[variant ?? 'default'] ?? VARIANT_SCROLLBAR_SX.default!;
 
-  return build({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize });
+  return build({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize });
 };