@12-apps/ui 6.34.0 → 6.36.0

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

@@ -7,6 +7,7 @@ import React from 'react';
 
 import type { Step, StepItemProps, StepperProps } from './Stepper.types';
 import { neutralTones } from '../../../tokens/ink';
+import { rem, sxRem } from '../../../tokens/relative';
 import type { SizeValue } from '../../../tokens/scales';
 
 /**
@@ -55,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
@@ -100,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',
@@ -121,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;
@@ -143,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 };
 }
 
@@ -173,7 +174,7 @@ const StepCircle: React.FC<
       data-testid={`stepper-step-icon-${index}`}
     >
       {isCompleted ? (
-        <CheckCircle sx={{ fontSize: STEP_ICON_SIZE[size] }} />
+        <CheckCircle sx={{ fontSize: sxRem(STEP_ICON_SIZE[size]) }} />
       ) : (
         <Typography variant={labelVariant} fontWeight="bold">
           {index + 1}
@@ -195,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,14 +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, 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% {
@@ -18,24 +19,25 @@ const pulseAnimation = keyframes`
   }
 `;
 
-// Density configurations
-const getDensityConfig = (density: TableDensity = 'normal') => {
+// 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',
-      fontSize: '0.8125rem',
-      headerPadding: '8px 12px' },
+      rowHeightPx: 36,
+      cellPadding: rems(theme, 6, 12),
+      fontSize: rem(theme, 13),
+      headerPadding: rems(theme, 8, 12) },
     normal: {
-      rowHeight: 52,
-      cellPadding: '12px 16px',
-      fontSize: '0.875rem',
-      headerPadding: '16px 16px' },
+      rowHeightPx: 52,
+      cellPadding: rems(theme, 12, 16),
+      fontSize: rem(theme, 14),
+      headerPadding: rems(theme, 16, 16) },
     comfortable: {
-      rowHeight: 68,
-      cellPadding: '18px 24px',
-      fontSize: '0.875rem',
-      headerPadding: '20px 24px' } };
+      rowHeightPx: 68,
+      cellPadding: rems(theme, 18, 24),
+      fontSize: rem(theme, 14),
+      headerPadding: rems(theme, 20, 24) } };
   return configs[density];
 };
 
@@ -85,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',
@@ -119,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 } } });
 
@@ -134,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: '""',
@@ -146,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',
@@ -164,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 } });
 
@@ -191,7 +193,7 @@ export const tableStyles = ({
   stickyHeader?: boolean;
   stripeColor?: TableStripeColor;
 }): CSSObject => {
-  const densityConfig = getDensityConfig(density);
+  const densityConfig = getDensityConfig(theme, density);
   
   return {
     borderRadius: theme.spacing(1),
@@ -203,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,13 +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, 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, {
@@ -31,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 && {
@@ -41,7 +43,7 @@ const TimelineItemContainer = styled(Box, {
   ...(orientation === 'horizontal' && {
     flexDirection: 'column',
     alignItems: 'center',
-    minWidth: 280,
+    minWidth: rem(theme, 280),
   }),
 }));
 
@@ -55,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',
@@ -80,15 +82,15 @@ 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 && {
     animation: `${pulseAnimation} 2s ease infinite`,
   }),
   '& svg': {
-    fontSize: hasIcon ? '1.2rem' : '0.8rem',
+    fontSize: rem(theme, hasIcon ? 19.2 : 12.8),
     color: theme.palette.background.paper,
   },
 }));
@@ -99,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],
       },
     }),
@@ -124,15 +126,15 @@ const TimelineCard = styled(Card, {
 
 const TimelineTimestamp = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 500,
-  letterSpacing: '0.5px',
+  letterSpacing: rem(theme, 0.5),
   textTransform: 'uppercase',
 }));
 
 const MetadataChip = styled(Chip)(({ theme }) => ({
-  height: 24,
-  fontSize: '0.75rem',
+  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)}`,
 }));

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

@@ -13,13 +13,14 @@ import {
   StackedView,
   WaterfallView,
 } from './TimingDiagram.views';
+import { rem } from '../../../tokens/relative';
 
 // Styled components
 const DiagramContainer = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(3),
   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)}`,
   borderRadius: theme.shape.borderRadius * 2,
 }));
@@ -38,12 +39,12 @@ const LegendItem = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   gap: theme.spacing(1),
   '& .color': {
-    width: 12,
-    height: 12,
-    borderRadius: 2,
+    width: rem(theme, 12),
+    height: rem(theme, 12),
+    borderRadius: rem(theme, 2),
   },
   '& .label': {
-    fontSize: '0.8rem',
+    fontSize: rem(theme, 12.8),
     color: theme.palette.text.secondary,
   },
 }));
@@ -82,7 +83,7 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
   copy,
   data,
   showLabels = true,
-  height = 40,
+  height,
   animated = true,
   showTooltips = true,
   variant = 'waterfall',
@@ -105,7 +106,8 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
           animated={animated}
           showLabels={showLabels}
           showTooltips={showTooltips}
-          height={height}
+          // The waterfall's plot height, 40 design px unless the caller says otherwise.
+          plotHeightPx={height ?? 40}
         />
       )}