@12-apps/ui 6.35.0 → 6.37.0

package/src/components/data-display/Sheet/Sheet.parts.tsx

@@ -10,6 +10,7 @@ import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { scrim, sheen } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 import { withDefaults } from '../../../utils/withDefaults';
 
 import { shimmerAnimation } from './Sheet.animations';
@@ -26,8 +27,8 @@ import type {
  * decorative one stays a neutral bar.
  */
 const handleSx = (theme: Theme, isDraggable: boolean) => ({
-  width: isDraggable ? 48 : 32,
-  height: isDraggable ? 6 : 4,
+  width: rem(theme, isDraggable ? 48 : 32),
+  height: rem(theme, isDraggable ? 6 : 4),
   backgroundColor: alpha(theme.palette.text.primary, 0.3),
   borderRadius: 3,
   transition: theme.transitions.create(['all'], {
@@ -49,15 +50,15 @@ const handleSx = (theme: Theme, isDraggable: boolean) => ({
       ${sheen(theme, 0.3)},
       transparent
     )`,
-    animation: isDraggable ? `${shimmerAnimation} 2s infinite` : 'none',
+    animation: isDraggable ? `${shimmerAnimation(theme)} 2s infinite` : 'none',
   },
   ...(isDraggable && {
     backgroundColor: alpha(theme.palette.primary.main, 0.4),
-    boxShadow: `0 2px 4px ${alpha(theme.palette.primary.main, 0.2)}`,
+    boxShadow: `${rems(theme, 0, 2, 4)} ${alpha(theme.palette.primary.main, 0.2)}`,
     '&:hover': {
       backgroundColor: theme.palette.primary.main,
       transform: 'scaleX(1.15) scaleY(1.2)',
-      boxShadow: `0 3px 6px ${alpha(theme.palette.primary.main, 0.3)}`,
+      boxShadow: `${rems(theme, 0, 3, 6)} ${alpha(theme.palette.primary.main, 0.3)}`,
     },
   }),
 });
@@ -225,8 +226,8 @@ export const SheetOverlay: React.FC<SheetOverlayProps> = (props) => {
           // is given a no-op BackdropComponent) and must sit under the panel.
           zIndex: theme.zIndex.drawer - 1,
           backgroundColor: scrim(theme, blur ? 0.6 : 0.5),
-          backdropFilter: blur ? 'blur(8px) saturate(180%)' : 'none',
-          WebkitBackdropFilter: blur ? 'blur(8px) saturate(180%)' : 'none',
+          backdropFilter: blur ? `blur(${rem(theme, 8)}) saturate(180%)` : 'none',
+          WebkitBackdropFilter: blur ? `blur(${rem(theme, 8)}) saturate(180%)` : 'none',
           ...style,
         }}
       />

package/src/components/data-display/Sheet/Sheet.styles.ts

@@ -4,7 +4,9 @@ import type React from 'react';
 
 import { glowAnimation, pulseAnimation, shimmerAnimation } from './Sheet.animations';
 import type { SheetProps } from './Sheet.types';
+import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';
 import { shadowInk, sheen } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 import { accentFor } from '../../../tokens/scales';
 
 type Position = NonNullable<SheetProps['position']>;
@@ -15,18 +17,19 @@ type Color = NonNullable<SheetProps['color']>;
 const isHorizontalPosition = (position: Position) => position === 'left' || position === 'right';
 
 /**
- * Horizontal (left/right) sheets are viewport-aware: a px floor keeps the panel
+ * Horizontal (left/right) sheets are viewport-aware: a design-px floor (through
+ * `rem`) keeps the panel
  * usable, `…vw` lets the larger presets grow on wide screens (lg ≥32%, xl ≥40%
  * of the viewport), and the outer `min(92vw, …)` guarantees the panel never
  * overflows a small screen.
  */
-const HORIZONTAL_SIZES: Record<Size, string> = {
-  xs: 'min(92vw, 240px)',
-  sm: 'min(92vw, 320px)',
-  md: 'min(92vw, 400px)',
-  lg: 'min(92vw, max(560px, 32vw))',
-  xl: 'min(92vw, max(720px, 40vw))',
-  full: '100%',
+const HORIZONTAL_SIZES: Record<Size, (theme: Theme) => string> = {
+  xs: (theme) => `min(92vw, ${rem(theme, 240)})`,
+  sm: (theme) => `min(92vw, ${rem(theme, 320)})`,
+  md: (theme) => `min(92vw, ${rem(theme, 400)})`,
+  lg: (theme) => `min(92vw, max(${rem(theme, 560)}, 32vw))`,
+  xl: (theme) => `min(92vw, max(${rem(theme, 720)}, 40vw))`,
+  full: () => '100%',
 };
 
 /**
@@ -42,12 +45,12 @@ const HORIZONTAL_SIZES: Record<Size, string> = {
  * `full` is absent on purpose: it is not a ceiling, it is the whole viewport,
  * and `sizeStyles` answers it before it gets here.
  */
-const VERTICAL_SIZES: Record<Exclude<Size, 'full'>, string> = {
-  xs: 'min(200px, 100%)',
-  sm: 'min(300px, 100%)',
-  md: 'min(400px, 100%)',
-  lg: 'min(500px, 100%)',
-  xl: 'min(600px, 100%)',
+const VERTICAL_SIZES: Record<Exclude<Size, 'full'>, (theme: Theme) => string> = {
+  xs: (theme) => `min(${rem(theme, 200)}, 100%)`,
+  sm: (theme) => `min(${rem(theme, 300)}, 100%)`,
+  md: (theme) => `min(${rem(theme, 400)}, 100%)`,
+  lg: (theme) => `min(${rem(theme, 500)}, 100%)`,
+  xl: (theme) => `min(${rem(theme, 600)}, 100%)`,
 };
 
 /**
@@ -64,9 +67,10 @@ const VERTICAL_SIZES: Record<Exclude<Size, 'full'>, string> = {
  * this axis — and it becomes meaningful here for the first time: it used to
  * name the behaviour every bottom sheet already had.
  */
-const VERTICAL_MAX_WIDTH = 'min(100%, 640px)';
+const verticalMaxWidth = (theme: Theme): string => `min(100%, ${rem(theme, 640)})`;
 
 interface SizeStyleInput {
+  theme: Theme;
   position: Position;
   size: Size;
   isDraggableVariant: boolean;
@@ -74,13 +78,14 @@ interface SizeStyleInput {
 }
 
 const sizeStyles = ({
+  theme,
   position,
   size,
   isDraggableVariant,
   currentHeight,
 }: SizeStyleInput) => {
   if (isHorizontalPosition(position)) {
-    return { width: HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md };
+    return { width: (HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md)(theme) };
   }
 
   // `full` is not a size on the scale — it is THE WHOLE VIEWPORT, on both axes,
@@ -94,7 +99,7 @@ const sizeStyles = ({
   // variant needs it too — dragging moves the panel's height, never its width.
   // `marginInline` is what centres it: MUI pins the bottom paper `left: 0;
   // right: 0`, so a definite width plus auto margins resolves to the middle.
-  const cross = { width: VERTICAL_MAX_WIDTH, marginInline: 'auto' };
+  const cross = { width: verticalMaxWidth(theme), marginInline: 'auto' };
 
   // The draggable variant owns its own height: the snap point decides it, so a
   // preset would fight the drag.
@@ -108,7 +113,7 @@ const sizeStyles = ({
     // rather than left off so the rule survives a caller who set a height on a
     // previous render, and it is what lets the panel hug what it holds.
     height: 'auto',
-    maxHeight: VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md,
+    maxHeight: (VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md)(theme),
   };
 };
 
@@ -162,10 +167,10 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>
   draggable: ({ theme, elevation, accent }) => ({
     boxShadow: `
             ${theme.shadows[Math.min(elevation + 4, 24)]},
-            0 -2px 10px 0 ${shadowInk(theme, 0.1)}
+            ${rems(theme, 0, -2, 10, 0)} ${shadowInk(theme, 0.1)}
           `,
     border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
-    borderTop: `2px solid ${alpha(accent, 0.3)}`,
+    borderTop: `${rem(theme, 2)} solid ${alpha(accent, 0.3)}`,
     transition: theme.transitions.create(['transform', 'box-shadow', 'border-color'], {
       duration: theme.transitions.duration.shorter,
       easing: theme.transitions.easing.easeInOut,
@@ -175,12 +180,12 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>
 
   glass: ({ theme, glass }) => ({
     backgroundColor: alpha(theme.palette.background.paper, glass ? 0.75 : 0.95),
-    backdropFilter: 'blur(24px) saturate(180%)',
-    WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+    backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+    WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
     border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,
     boxShadow: `
-            0 8px 32px 0 ${shadowInk(theme, 0.15)},
-            inset 0 0 0 1px ${sheen(theme, 0.1)}
+            ${rems(theme, 0, 8, 32, 0)} ${shadowInk(theme, 0.15)},
+            inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${sheen(theme, 0.1)}
           `,
   }),
 
@@ -201,7 +206,7 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>
   elevated: ({ theme, elevation }) => ({
     boxShadow: `
             ${theme.shadows[elevation]},
-            0 20px 40px -15px ${shadowInk(theme, 0.15)}
+            ${rems(theme, 0, 20, 40, -15)} ${shadowInk(theme, 0.15)}
           `,
     transform: 'translateZ(0)',
     willChange: 'transform',
@@ -226,7 +231,7 @@ const shimmerOverlay = (theme: Theme) => ({
               ${sheen(theme, 0.2)},
               transparent
             )`,
-  animation: `${shimmerAnimation} 3s infinite`,
+  animation: `${shimmerAnimation(theme)} 3s infinite`,
 });
 
 /**
@@ -267,8 +272,8 @@ const variantStyles = (input: VariantStyleInput) => {
     ...baseSurface(input, accent),
     // glow first, then pulse: with both set the pulse keyframes win the shared
     // `animation` slot, which is the order the original spread produced.
-    ...(glow && { animation: `${glowAnimation} 2s ease-in-out infinite`, filter: 'brightness(1.05)' }),
-    ...(pulse && { animation: `${pulseAnimation} 2s infinite`, position: 'relative' as const }),
+    ...(glow && { animation: `${glowAnimation(theme)} 2s ease-in-out infinite`, filter: 'brightness(1.05)' }),
+    ...(pulse && { animation: `${pulseAnimation(theme)} 2s infinite`, position: 'relative' as const }),
     ...(rounded && roundedStyles(theme, position)),
     ...(SURFACES[variant] ?? SURFACES.default)({ ...input, accent }),
   };
@@ -289,7 +294,7 @@ interface PanelSxInput extends VariantStyleInput {
  * branches of its own — the cross-axis rule below is four on its own.
  */
 export const panelSx = (input: PanelSxInput): CSSObject => {
-  const { position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } =
+  const { theme, position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } =
     input;
 
   return {
@@ -301,7 +306,7 @@ export const panelSx = (input: PanelSxInput): CSSObject => {
     // `left: -100%` and a full-width panel put it off-screen; a 640px one puts
     // it on the backdrop beside the sheet.
     overflow: 'visible',
-    ...sizeStyles({ position, size, isDraggableVariant, currentHeight }),
+    ...sizeStyles({ theme, position, size, isDraggableVariant, currentHeight }),
     // A COLUMN, so `maxHeight` above can be a ceiling rather than a height: the
     // body is then a flex item that shrinks against it, and the scrolling falls
     // to `SheetContent` where it belongs. Without this the panel would clip a

package/src/components/data-display/StatCard/StatCard.tsx

@@ -15,7 +15,7 @@ import type {
   StatCardDeltaTone,
   StatCardProps,
 } from './StatCard.types';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** The arrow each direction renders (decorative — the text carries the meaning). */
 const DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {
@@ -134,7 +134,7 @@ function ValueRow({
     return (
       <Skeleton
         variant="rectangular"
-        height={28}
+        height={rem(theme, 28)}
         width="60%"
         borderRadius={4}
         data-testid={`${testId}-value-skeleton`}
@@ -167,12 +167,13 @@ function DeltaSlot({
   loading: boolean;
   testId: string;
 }): React.JSX.Element | null {
+  const theme = useTheme();
   if (!delta) return null;
   if (loading) {
     return (
       <Skeleton
         variant="rectangular"
-        height={16}
+        height={rem(theme, 16)}
         width="40%"
         borderRadius={4}
         data-testid={`${testId}-delta-skeleton`}

package/src/components/data-display/Stepper/Stepper.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import type { Step, StepItemProps, StepperProps } from './Stepper.types';
 import { neutralTones } from '../../../tokens/ink';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 import type { SizeValue } from '../../../tokens/scales';
 
 /**
@@ -56,9 +56,9 @@ const StepButton = styled(Button, {
     !['isActive', 'isCompleted', 'clickable', 'stepSize'].includes(prop as string),
 })<{ isActive: boolean; isCompleted: boolean; clickable: boolean; stepSize: SizeValue }>(
   ({ theme, isActive, isCompleted, clickable, stepSize }) => ({
-    minWidth: CIRCLE_SIZE[stepSize],
-    width: CIRCLE_SIZE[stepSize],
-    height: CIRCLE_SIZE[stepSize],
+    minWidth: rem(theme, CIRCLE_SIZE[stepSize]),
+    width: rem(theme, CIRCLE_SIZE[stepSize]),
+    height: rem(theme, CIRCLE_SIZE[stepSize]),
     borderRadius: '50%',
     padding: 0,
     backgroundColor: isCompleted
@@ -101,18 +101,18 @@ const StepConnector = styled(Box, {
     ...(orientation === 'horizontal'
       ? {
           flex: 1,
-          height: 2,
+          height: rem(theme, 2),
           // Vertically centered on the circle (circle/2 - 1 for the 2px line).
-          marginTop: CIRCLE_SIZE[size] / 2 - 1,
-          marginLeft: 8,
-          marginRight: 8,
-          minWidth: 24,
+          marginTop: rem(theme, CIRCLE_SIZE[size] / 2 - 1),
+          marginLeft: rem(theme, 8),
+          marginRight: rem(theme, 8),
+          minWidth: rem(theme, 24),
         }
       : {
-          width: 2,
-          height: 32,
-          marginTop: 8,
-          marginBottom: 8,
+          width: rem(theme, 2),
+          height: rem(theme, 32),
+          marginTop: rem(theme, 8),
+          marginBottom: rem(theme, 8),
           // Use margin auto to center horizontally
           marginLeft: 'auto',
           marginRight: 'auto',
@@ -122,9 +122,9 @@ const StepConnector = styled(Box, {
 
 const StepLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'orientation',
-})<{ orientation: 'horizontal' | 'vertical' }>(({ orientation }) => ({
+})<{ orientation: 'horizontal' | 'vertical' }>(({ theme, orientation }) => ({
   textAlign: 'center',
-  marginTop: orientation === 'horizontal' ? 8 : 0,
+  marginTop: orientation === 'horizontal' ? rem(theme, 8) : 0,
 }));
 
 type StepSize = SizeValue;
@@ -144,7 +144,7 @@ function stepClasses(isActive: boolean, isCompleted: boolean, optional?: boolean
 /** The circle content-column width per orientation/size. */
 function contentSx(orientation: 'horizontal' | 'vertical', size: StepSize) {
   return orientation === 'horizontal'
-    ? { minWidth: STEP_MIN_WIDTH[size], maxWidth: 150, flex: '0 1 auto' }
+    ? { minWidth: sxRem(STEP_MIN_WIDTH[size]), maxWidth: sxRem(150), flex: '0 1 auto' }
     : { flexShrink: 0 };
 }
 
@@ -196,7 +196,7 @@ const StepLabelBlock: React.FC<StepPartProps & { orientation: 'horizontal' | 've
   <StepLabel
     orientation={orientation}
     data-testid={`stepper-step-label-${index}`}
-    sx={size === 'sm' && orientation === 'horizontal' ? { mt: '2px' } : undefined}
+    sx={size === 'sm' && orientation === 'horizontal' ? { mt: sxRem(2) } : undefined}
   >
     <Typography
       variant={labelVariant}

package/src/components/data-display/Table/Table.styles.ts

@@ -2,15 +2,15 @@ import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { TableDensity, TableStripeColor } from './Table.types';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
-const pulseAnimation = keyframes`
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 10px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;
     opacity: 0;
   }
   100% {
@@ -19,24 +19,25 @@ const pulseAnimation = keyframes`
   }
 `;
 
-// Density configurations
+// Density configurations. The row height stays design px (`…Px`) and goes
+// through `rem` where the cell is drawn.
 const getDensityConfig = (theme: Theme, density: TableDensity = 'normal') => {
   const configs = {
     compact: {
-      rowHeight: 36,
-      cellPadding: '6px 12px',
+      rowHeightPx: 36,
+      cellPadding: rems(theme, 6, 12),
       fontSize: rem(theme, 13),
-      headerPadding: '8px 12px' },
+      headerPadding: rems(theme, 8, 12) },
     normal: {
-      rowHeight: 52,
-      cellPadding: '12px 16px',
+      rowHeightPx: 52,
+      cellPadding: rems(theme, 12, 16),
       fontSize: rem(theme, 14),
-      headerPadding: '16px 16px' },
+      headerPadding: rems(theme, 16, 16) },
     comfortable: {
-      rowHeight: 68,
-      cellPadding: '18px 24px',
+      rowHeightPx: 68,
+      cellPadding: rems(theme, 18, 24),
       fontSize: rem(theme, 14),
-      headerPadding: '20px 24px' } };
+      headerPadding: rems(theme, 20, 24) } };
   return configs[density];
 };
 
@@ -86,7 +87,7 @@ const TABLE_VARIANTS: Record<string, (args: VariantArgs) => CSSObject> = {
         backgroundColor: stripeRowColor(theme, stripeColor) } }),
   glass: ({ theme }) => ({
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}` }),
   minimal: ({ theme }) => ({
       backgroundColor: 'transparent',
@@ -120,7 +121,7 @@ const stickyHeaderStyles = (
         zIndex: 100,
         backgroundColor: theme.palette.background.paper,
         '& .MuiTableCell-root': {
-          borderBottom: `2px solid ${theme.palette.divider}`,
+          borderBottom: `${rem(theme, 2)} solid ${theme.palette.divider}`,
           fontWeight: 600,
           padding: densityConfig.headerPadding } } });
 
@@ -135,7 +136,7 @@ const hoverableRowStyles = (theme: Theme): CSSObject => ({
 const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => {
   if (glow && pulse) return ({
       position: 'relative',
-      boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+      boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
       filter: 'brightness(1.05)',
       '&::after': {
         content: '""',
@@ -147,11 +148,11 @@ const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObjec
         borderRadius: 'inherit',
         backgroundColor: theme.palette.primary.main,
         opacity: 0.1,
-        animation: `${pulseAnimation} 2s infinite`,
+        animation: `${pulseAnimation(theme)} 2s infinite`,
         pointerEvents: 'none',
         zIndex: -1 } });
   if (glow) return ({
-      boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+      boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
       filter: 'brightness(1.05)' });
   if (pulse) return ({
       position: 'relative',
@@ -165,7 +166,7 @@ const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObjec
         borderRadius: 'inherit',
         backgroundColor: theme.palette.primary.main,
         opacity: 0.1,
-        animation: `${pulseAnimation} 2s infinite`,
+        animation: `${pulseAnimation(theme)} 2s infinite`,
         pointerEvents: 'none',
         zIndex: -1 } });
 
@@ -204,7 +205,7 @@ export const tableStyles = ({
     '& .MuiTableCell-root': {
       padding: densityConfig.cellPadding,
       fontSize: densityConfig.fontSize,
-      height: densityConfig.rowHeight },
+      height: rem(theme, densityConfig.rowHeightPx) },
 
     // Sticky header
     ...tableVariantStyles({ theme, densityConfig, stripeColor }, customVariant),

package/src/components/data-display/Table/Table.tsx

@@ -11,7 +11,7 @@ import TableBody from '@mui/material/TableBody/index.js';
 import TableCell from '@mui/material/TableCell/index.js';
 import TableContainer from '@mui/material/TableContainer/index.js';
 import TableRow from '@mui/material/TableRow/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type {
@@ -25,15 +25,22 @@ import { EnhancedTableBody, EnhancedTableHeader } from './TableParts';
 import { EmptyRow, NoDataPlaceholder } from './TableStates';
 import {
   tableStyles } from './Table.styles';
+import { rem } from '../../../tokens/relative';
+
+/** The scroll box's height: a number is design px, 400 unless the caller says otherwise. */
+const scrollHeight = (theme: Theme, containerHeight: number | string | undefined): string => {
+  const box = containerHeight || 400;
+  return typeof box === 'number' ? rem(theme, box) : box;
+};
 
 // Define pulse animation
 const StyledTableContainer = styled(TableContainer, {
   shouldForwardProp: (prop) => !['virtualScrolling', 'containerHeight'].includes(prop as string) })<{ 
   virtualScrolling?: boolean; 
   containerHeight?: number | string;
-}>(({ virtualScrolling, containerHeight }) => ({
+}>(({ theme, virtualScrolling, containerHeight }) => ({
   ...(virtualScrolling && {
-    height: containerHeight || 400,
+    height: scrollHeight(theme, containerHeight),
     overflow: 'auto' }) }));
 
 // Helper function to get stripe color from theme
@@ -104,19 +111,22 @@ const TableShell: React.FC<{
 
 const SKELETON_ROW_COUNT = 5;
 
-const LoadingSkeletonRows: React.FC<{ columns?: ColumnConfig[] }> = ({ columns }) => (
-  <>
-    {Array.from({ length: SKELETON_ROW_COUNT }, (_, index) => (
-      <TableRow key={index}>
-        {columns?.map((column) => (
-          <TableCell key={column.key}>
-            <Skeleton height={20} />
-          </TableCell>
-        ))}
-      </TableRow>
-    ))}
-  </>
-);
+const LoadingSkeletonRows: React.FC<{ columns?: ColumnConfig[] }> = ({ columns }) => {
+  const theme = useTheme();
+  return (
+    <>
+      {Array.from({ length: SKELETON_ROW_COUNT }, (_, index) => (
+        <TableRow key={index}>
+          {columns?.map((column) => (
+            <TableCell key={column.key}>
+              <Skeleton height={rem(theme, 20)} />
+            </TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </>
+  );
+};
 
 export type TableShellProps = Omit<React.ComponentProps<typeof TableShell>, 'children'>;
 

package/src/components/data-display/Timeline/Timeline.tsx

@@ -4,6 +4,7 @@ import type { FC } from 'react';
 import React from 'react';
 import { TimelineRow } from './TimelineRow';
 import type { TimelineProps } from './Timeline.types';
+import { rem } from '../../../tokens/relative';
 
 // ---
 
@@ -19,13 +20,13 @@ const TimelineContainer = styled(Box)<{ orientation: 'vertical' | 'horizontal' }
       overflowX: 'auto',
       paddingBottom: theme.spacing(2),
       '&::-webkit-scrollbar': {
-        height: 8 },
+        height: rem(theme, 8) },
       '&::-webkit-scrollbar-track': {
         background: alpha(theme.palette.action.disabled, 0.1),
-        borderRadius: 4 },
+        borderRadius: rem(theme, 4) },
       '&::-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) } } }) }),
 );

package/src/components/data-display/Timeline/TimelineRow.tsx

@@ -10,14 +10,15 @@ import Fade from '@mui/material/Fade/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import Stack from '@mui/material/Stack/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
+import { alpha, keyframes, styled, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { TimelineItem, TimelineProps } from './Timeline.types';
 import { onMedia, uiInk } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
-const slideInAnimation = keyframes`from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); }`;
+const slideInAnimation = (theme: Theme) =>
+  keyframes`from { opacity: 0; transform: translateX(${rem(theme, -20)}); } to { opacity: 1; transform: translateX(0); }`;
 const pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;
 
 const TimelineItemContainer = styled(Box, {
@@ -32,7 +33,7 @@ const TimelineItemContainer = styled(Box, {
   gap: theme.spacing(2),
   position: 'relative',
   ...(animated && {
-    animation: `${slideInAnimation} 0.5s ease ${index * 0.1}s both`,
+    animation: `${slideInAnimation(theme)} 0.5s ease ${index * 0.1}s both`,
   }),
   ...(orientation === 'vertical' &&
     alternating && {
@@ -42,7 +43,7 @@ const TimelineItemContainer = styled(Box, {
   ...(orientation === 'horizontal' && {
     flexDirection: 'column',
     alignItems: 'center',
-    minWidth: 280,
+    minWidth: rem(theme, 280),
   }),
 }));
 
@@ -56,24 +57,24 @@ const TimelineConnector = styled(Box, {
   background: `linear-gradient(180deg, ${theme.palette.primary.main} 0%, ${alpha(theme.palette.primary.main, 0.3)} 100%)`,
   ...(orientation === 'vertical'
     ? {
-        width: 2,
-        height: isLast ? 0 : 'calc(100% + 16px)',
-        left: 19,
-        top: 40,
+        width: rem(theme, 2),
+        height: isLast ? 0 : `calc(100% + ${rem(theme, 16)})`,
+        left: rem(theme, 19),
+        top: rem(theme, 40),
       }
     : {
-        height: 2,
-        width: isLast ? 0 : '240px',
-        top: 19,
-        left: 40,
+        height: rem(theme, 2),
+        width: isLast ? 0 : rem(theme, 240),
+        top: rem(theme, 19),
+        left: rem(theme, 40),
       }),
 }));
 
 const TimelineDot = styled(Box, {
   shouldForwardProp: (prop) => !['dotColor', 'hasIcon', 'animated'].includes(prop as string),
 })<{ dotColor?: string; hasIcon: boolean; animated: boolean }>(({ theme, dotColor, hasIcon, animated }) => ({
-  width: 40,
-  height: 40,
+  width: rem(theme, 40),
+  height: rem(theme, 40),
   borderRadius: '50%',
   display: 'flex',
   alignItems: 'center',
@@ -81,8 +82,8 @@ const TimelineDot = styled(Box, {
   background: dotColor
     ? `linear-gradient(135deg, ${dotColor} 0%, ${alpha(dotColor, 0.8)} 100%)`
     : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`,
-  boxShadow: `0 4px 12px ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
-  border: `2px solid ${theme.palette.background.paper}`,
+  boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
+  border: `${rem(theme, 2)} solid ${theme.palette.background.paper}`,
   zIndex: 1,
   flexShrink: 0,
   ...(animated && {
@@ -100,14 +101,14 @@ const TimelineCard = styled(Card, {
   ({ theme, timelineVariant, isClickable }) => ({
     flex: 1,
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
-    backdropFilter: 'blur(10px)',
-    WebkitBackdropFilter: 'blur(10px)',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
     transition: theme.transitions.create(['transform', 'box-shadow']),
     ...(isClickable && {
       cursor: 'pointer',
       '&:hover': {
-        transform: 'translateY(-2px)',
+        transform: `translateY(${rem(theme, -2)})`,
         boxShadow: theme.shadows[8],
       },
     }),
@@ -127,12 +128,12 @@ const TimelineTimestamp = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,
   fontSize: rem(theme, 12),
   fontWeight: 500,
-  letterSpacing: '0.5px',
+  letterSpacing: rem(theme, 0.5),
   textTransform: 'uppercase',
 }));
 
 const MetadataChip = styled(Chip)(({ theme }) => ({
-  height: 24,
+  height: rem(theme, 24),
   fontSize: rem(theme, 12),
   background: alpha(theme.palette.primary.main, 0.08),
   border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,