@12-apps/ui 6.36.0 → 6.38.0

package/src/components/form/Button/Button.styles.ts

@@ -4,17 +4,17 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { BUTTON_SIZES, ICON_ONLY_PADDING as ICON_ONLY_PADDING_PX } from './Button.metrics';
 import { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, controlNeutral } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 import { inkOver } from '../../../tokens/theme';
 
-// Define pulse animation globally
-const pulseAnimation = keyframes`
+// The pulse ring, its spread through the theme's type scale.
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 15px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 15)} currentColor;
     opacity: 0;
   }
   100% {
@@ -63,9 +63,10 @@ export const getColorFromTheme = (theme: Theme, color: string): ColorPalette =>
   };
 };
 
-/** A size's padding shorthand and its type in design px, read through the type scale. */
+/** A size's padding and its type in design px, read through the type scale. */
 interface WebButtonSize {
-  padding: string;
+  paddingYPx: number;
+  paddingXPx: number;
   fontPx: number;
 }
 
@@ -74,7 +75,7 @@ interface WebButtonSize {
 const SIZE_MAP: Record<string, WebButtonSize> = Object.fromEntries(
   Object.entries(BUTTON_SIZES).map(([size, m]) => [
     size,
-    { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontPx: m.fontSize },
+    { paddingYPx: m.paddingVertical, paddingXPx: m.paddingHorizontal, fontPx: m.fontSize },
   ]),
 );
 
@@ -96,13 +97,14 @@ const sizeOf = (size: string): WebButtonSize => SIZE_MAP[size] ?? DEFAULT_SIZE;
  * Derived, not declared: a button with an `icon` and no children can only be an
  * icon button, so no consumer has to opt in and none can forget to.
  */
-const ICON_ONLY_PADDING: Record<string, string> = Object.fromEntries(
-  Object.entries(ICON_ONLY_PADDING_PX).map(([size, padding]) => [size, `${padding}px`]),
-);
+const iconOnlyPadding = (theme: Theme, size: string): string => {
+  const bySize: Record<string, number> = ICON_ONLY_PADDING_PX;
+  return rem(theme, bySize[size] ?? ICON_ONLY_PADDING_PX.md);
+};
 
 const iconOnlySize = (theme: Theme, size: string): CSSObject => ({
   minWidth: 0,
-  padding: ICON_ONLY_PADDING[size] ?? ICON_ONLY_PADDING.md,
+  padding: iconOnlyPadding(theme, size),
   fontSize: rem(theme, sizeOf(size).fontPx),
   '& .MuiButton-startIcon, & .MuiButton-endIcon': { margin: 0 },
 });
@@ -120,8 +122,8 @@ export const buttonSize =
   (theme: Theme): CSSObject => {
     const height = fieldHeight(theme, asFieldSize(size));
     if (iconOnly) return { ...iconOnlySize(theme, size), padding: 0, minWidth: height, minHeight: height };
-    const { padding, fontPx } = sizeOf(size);
-    return { padding, fontSize: rem(theme, fontPx), minHeight: height, paddingTop: 0, paddingBottom: 0 };
+    const { paddingYPx, paddingXPx, fontPx } = sizeOf(size);
+    return { padding: rems(theme, paddingYPx, paddingXPx), fontSize: rem(theme, fontPx), minHeight: height, paddingTop: 0, paddingBottom: 0 };
   };
 
 /**
@@ -214,7 +216,7 @@ const VARIANT_STYLES: Record<
     color: palette.contrastText || absoluteInk(theme).white,
     '&:hover': {
       backgroundColor: palette.dark,
-      transform: 'translateY(-2px)',
+      transform: `translateY(${rem(theme, -2)})`,
       boxShadow: theme.shadows[8],
     },
   }),
@@ -251,12 +253,12 @@ const VARIANT_STYLES: Record<
   }),
   glass: (theme, palette) => ({
     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)}`,
     color: palette.main,
     '&:hover': {
       backgroundColor: alpha(theme.palette.background.paper, 0.2),
-      transform: 'translateY(-2px)',
+      transform: `translateY(${rem(theme, -2)})`,
     },
   }),
   gradient: (theme, palette, color) => ({
@@ -264,7 +266,7 @@ const VARIANT_STYLES: Record<
     color: gradientInk(theme, color, palette),
     '&:hover': {
       filter: 'brightness(1.1)',
-      transform: 'translateY(-2px)',
+      transform: `translateY(${rem(theme, -2)})`,
       boxShadow: theme.shadows[12],
     },
   }),
@@ -278,18 +280,18 @@ export const buttonVariantStyles = (
 ): CSSObject => VARIANT_STYLES[variant ?? '']?.(theme, palette, color) ?? {};
 
 // Glow effect - applied with !important to override variant shadows
-const glowStyles = (palette: ColorPalette): CSSObject => ({
-  boxShadow: `0 0 20px 5px ${alpha(palette.main, 0.6)}, 0 0 40px 10px ${alpha(palette.main, 0.3)} !important`,
+const glowStyles = (theme: Theme, palette: ColorPalette): CSSObject => ({
+  boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(palette.main, 0.6)}, ${rems(theme, 0, 0, 40, 10)} ${alpha(palette.main, 0.3)} !important`,
   filter: 'brightness(1.05)',
   '&:hover': {
-    boxShadow: `0 0 25px 8px ${alpha(palette.main, 0.7)}, 0 0 50px 15px ${alpha(palette.main, 0.4)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 25, 8)} ${alpha(palette.main, 0.7)}, ${rems(theme, 0, 0, 50, 15)} ${alpha(palette.main, 0.4)} !important`,
     filter: 'brightness(1.1)',
-    transform: 'translateY(-2px) scale(1.02)',
+    transform: `translateY(${rem(theme, -2)}) scale(1.02)`,
   },
 });
 
 // Pulse animation using pseudo-element
-const pulseStyles = (palette: ColorPalette): CSSObject => ({
+const pulseStyles = (theme: Theme, palette: ColorPalette): CSSObject => ({
   position: 'relative',
   overflow: 'visible',
   '&::after': {
@@ -303,7 +305,7 @@ const pulseStyles = (palette: ColorPalette): CSSObject => ({
     transform: 'translate(-50%, -50%)',
     backgroundColor: palette.main,
     opacity: 0.3,
-    animation: `${pulseAnimation} 2s infinite`,
+    animation: `${pulseAnimation(theme)} 2s infinite`,
     pointerEvents: 'none',
     zIndex: -1,
   },
@@ -314,10 +316,11 @@ const pulseStyles = (palette: ColorPalette): CSSObject => ({
  * out one by one, but each is just the union of whichever flags are set.
  */
 export const buttonEmphasisStyles = (
+  theme: Theme,
   palette: ColorPalette,
   glow?: boolean,
   pulse?: boolean,
 ): CSSObject => ({
-  ...(glow ? glowStyles(palette) : {}),
-  ...(pulse ? pulseStyles(palette) : {}),
+  ...(glow ? glowStyles(theme, palette) : {}),
+  ...(pulse ? pulseStyles(theme, palette) : {}),
 });

package/src/components/form/Button/Button.tsx

@@ -41,7 +41,7 @@ const StyledButton = styled(MuiButton, {
     overflow: 'hidden',
     ...iconAlignmentStyles(theme),
     ...buttonVariantStyles(theme, customVariant, colorPalette, customColor),
-    ...buttonEmphasisStyles(colorPalette, glow, pulse),
+    ...buttonEmphasisStyles(theme, colorPalette, glow, pulse),
   };
 });
 
@@ -200,7 +200,7 @@ const ButtonRoot = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={mergedClassName}
       >
         {loading ? (
-          <CircularProgress size={16} color="inherit" data-testid={testId('loading')} />
+          <CircularProgress size={rem(theme, 16)} color="inherit" data-testid={testId('loading')} />
         ) : (
           children
         )}

package/src/components/form/CategorySelect/CategoryPanelFoot.tsx

@@ -2,16 +2,17 @@
 
 import Box from '@mui/material/Box/index.js';
 import Button from '@mui/material/Button/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 
 import type { CategorySelectCopy } from '../../../copy';
 import { footerSx, METRICS } from './CategorySelect.styles';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
-import { sxRem } from '../../../tokens/relative';
+import { rems, sxRem } from '../../../tokens/relative';
 
 const buttonSx = (sheet: boolean) =>
   ({
-    height: sheet ? METRICS.sheetFooterButton : METRICS.footerButton,
-    padding: '0 13px',
+    height: sxRem(sheet ? METRICS.sheetFooterButtonPx : METRICS.footerButtonPx),
+    padding: (theme: Theme) => rems(theme, 0, 13),
     borderRadius: fieldRadiusPx,
     fontSize: sxRem(12.5),
     fontWeight: 600,
@@ -49,7 +50,7 @@ export function CategoryMultiFoot({
       <Box component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
         {copy.footer.selectedCount(count)}
       </Box>
-      <Box sx={{ display: 'flex', gap: '6px' }}>
+      <Box sx={{ display: 'flex', gap: sxRem(6) }}>
         <Button
           variant="outlined"
           disabled={count === 0}

package/src/components/form/CategorySelect/CategoryPanelHead.tsx

@@ -3,7 +3,7 @@
 import type { CategorySelectCopy } from '../../../copy';
 import Box from '@mui/material/Box/index.js';
 import InputBase from '@mui/material/InputBase/index.js';
-import { alpha, type Theme } from '@mui/material/styles/index.js';
+import { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';
 
 import { SearchGlyph } from './CategoryIcons';
 import {
@@ -16,7 +16,7 @@ import {
 import type { CategorySelectionChip } from './CategorySelect.types';
 import { fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
-import { sxRem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 interface PanelHeadProps {
   query: string;
@@ -37,7 +37,7 @@ const searchFieldSx = {
   '& input': {
     width: '100%',
     height: fieldHeight,
-    padding: '0 30px 0 32px',
+    padding: (theme: Theme) => rems(theme, 0, 30, 0, 32),
     fontSize: sxRem(13),
     border: fieldBorder,
     borderRadius: fieldRadiusPx,
@@ -47,16 +47,16 @@ const searchFieldSx = {
       outline: 'none',
       borderColor: 'primary.main',
       // 0x26 of 0xFF: the ring's old hex-alpha suffix, kept exact.
-      boxShadow: (theme: Theme) => `0 0 0 3px ${alpha(theme.palette.primary.main, 0x26 / 0xff)}`,
+      boxShadow: (theme: Theme) => `0 0 0 ${rem(theme, 3)} ${alpha(theme.palette.primary.main, 0x26 / 0xff)}`,
     },
   },
 } as const;
 
 const clearButtonSx = {
   position: 'absolute',
-  right: 7,
-  width: 20,
-  height: 20,
+  right: sxRem(7),
+  width: sxRem(20),
+  height: sxRem(20),
   border: 0,
   background: 'action.selected',
   color: 'text.secondary',
@@ -80,15 +80,16 @@ export function CategoryPanelHead({
   dataTestId,
   copy,
 }: PanelHeadProps): React.JSX.Element {
+  const theme = useTheme();
   return (
     <Box sx={(theme) => panelHeadSx(theme, sheet)}>
       <Box sx={searchFieldSx}>
         <SearchGlyph
           style={{
             position: 'absolute',
-            left: 10,
-            width: 15,
-            height: 15,
+            left: rem(theme, 10),
+            width: rem(theme, 15),
+            height: rem(theme, 15),
             opacity: 0.55,
             pointerEvents: 'none',
           }}
@@ -120,8 +121,8 @@ export function CategoryPanelHead({
           sx={{
             display: 'flex',
             alignItems: 'center',
-            gap: '10px',
-            marginTop: '8px',
+            gap: sxRem(10),
+            marginTop: sxRem(8),
             fontSize: sxRem(12),
           }}
         >

package/src/components/form/CategorySelect/CategoryPanelList.tsx

@@ -9,6 +9,7 @@ import { categoryCheckState, isLeafCategory, leavesOf } from './category-tree';
 import { CategorySectionHeading, CategoryTreeRow } from './CategoryRows';
 import { emptySx, listSx, skeletonSx } from './CategorySelect.styles';
 import type { CategoryGroup } from './CategorySelect.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** The design sets these labels in sentence case, not MUI's default caps. */
 const SENTENCE_CASE = { textTransform: 'none' } as const;
@@ -96,7 +97,7 @@ function NoResults({
     <Box sx={emptySx} data-testid={`${dataTestId}-no-results`}>
       <strong>{copy.noResults.title(query)}</strong>
       <p>{copy.noResults.hint}</p>
-      <Box sx={{ display: 'flex', gap: '6px', justifyContent: 'center' }}>
+      <Box sx={{ display: 'flex', gap: sxRem(6), justifyContent: 'center' }}>
         <Button variant="outlined" size="small" sx={SENTENCE_CASE} onClick={onClearQuery}>
           {copy.noResults.clearSearch}
         </Button>
@@ -221,7 +222,7 @@ export function CategoryPanelList(props: PanelListProps): React.JSX.Element {
       aria-multiselectable={props.single ? undefined : true}
       tabIndex={-1}
       data-testid={`${dataTestId}-list`}
-      sx={listSx(sheet)}
+      sx={(theme) => listSx(theme, sheet)}
     >
       {body()}
     </Box>

package/src/components/form/CategorySelect/CategoryPanelSurface.tsx

@@ -4,6 +4,7 @@ import Drawer from '@mui/material/Drawer/index.js';
 import Popover from '@mui/material/Popover/index.js';
 
 import { stackedOverlayZIndex } from '../../../tokens/layers';
+import { sxRem } from '../../../tokens/relative';
 
 /** Chrome-free surface props: the panel draws its own border and shadow. */
 const BARE_PAPER = { background: 'transparent', boxShadow: 'none' } as const;
@@ -64,7 +65,7 @@ export function CategoryPanelSurface({
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
       marginThreshold={8}
       sx={ABOVE_SHEETS}
-      slotProps={{ paper: { sx: { ...BARE_PAPER, marginTop: '6px', overflow: 'visible' } } }}
+      slotProps={{ paper: { sx: { ...BARE_PAPER, marginTop: sxRem(6), overflow: 'visible' } } }}
     >
       {children}
     </Popover>

package/src/components/form/CategorySelect/CategoryRows.tsx

@@ -19,6 +19,7 @@ import {
   sectionHeadSx,
 } from './CategorySelect.styles';
 import type { CategorySelectOption } from './CategorySelect.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** A label with the search hit marked. */
 export function HighlightedName({
@@ -104,7 +105,7 @@ function RowDisclosure({
   'option' | 'expanded' | 'branch' | 'onToggleExpanded' | 'dataTestId' | 'copy'
 >): React.JSX.Element {
   if (!branch) {
-    return <Box sx={{ width: METRICS.chevronButton, flex: '0 0 auto' }} />;
+    return <Box sx={{ width: sxRem(METRICS.chevronButtonPx), flex: '0 0 auto' }} />;
   }
   return (
     <Box
@@ -129,7 +130,7 @@ function RowControl({
   checkState,
   single,
 }: Pick<CategoryTreeRowProps, 'checkState' | 'single'>): React.JSX.Element {
-  if (!checkState) return <Box sx={{ width: METRICS.boxSize, flex: '0 0 auto' }} />;
+  if (!checkState) return <Box sx={{ width: sxRem(METRICS.boxSizePx), flex: '0 0 auto' }} />;
   // Single-select commits the moment a row is chosen, so the control is a radio
   // there: a checkbox would promise the accumulation this mode does not do.
   if (single) return <CategoryRadio on={checkState === 'on'} />;
@@ -181,7 +182,7 @@ export function CategoryTreeRow({
       aria-selected={checkState ? checkState === 'on' : undefined}
       aria-expanded={branch ? expanded : undefined}
       data-testid={rowTestId(dataTestId, depth, option.id)}
-      sx={(theme) => ({ ...rowSx(theme, active, sheet), ...rowIndent(depth) })}
+      sx={(theme) => ({ ...rowSx(theme, active, sheet), ...rowIndent(theme, depth) })}
       onClick={onActivate}
     >
       <RowDisclosure