@12-apps/ui 6.33.1 → 6.35.0

package/src/components/feedback/Sonner/Sonner.tsx

@@ -2,6 +2,8 @@ import Box from '@mui/material/Box/index.js';
 import Portal from '@mui/material/Portal/index.js';
 import React, { createContext, useCallback, useContext, useRef,useState, useMemo } from 'react';
 
+import { sxRem } from '../../../tokens/relative';
+
 import type { SonnerContextType, SonnerItem,SonnerProps } from './Sonner.types';
 
 const SonnerContext = createContext<SonnerContextType | null>(null);
@@ -196,7 +198,7 @@ const SonnerToaster: React.FC<{
               p: 1,
               mb: 0.5,
               textAlign: 'center',
-              fontSize: '0.75rem',
+              fontSize: sxRem(12),
               color: 'text.secondary',
               pointerEvents: 'none' }}
           >

package/src/components/feedback/Sonner/SonnerToast.tsx

@@ -13,6 +13,9 @@ import { alpha, useTheme } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { shadowInk } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
+
 import type { SonnerItem } from './Sonner.types';
 import type { SonnerProps } from './Sonner.types';
 
@@ -21,13 +24,13 @@ const renderToastIcon = (icon: SonnerProps['icon'], type: SonnerProps['type']) =
 
   switch (type) {
     case 'success':
-      return <SuccessIcon sx={{ fontSize: 20, color: 'success.main' }} />;
+      return <SuccessIcon sx={{ fontSize: sxRem(20), color: 'success.main' }} />;
     case 'error':
-      return <ErrorIcon sx={{ fontSize: 20, color: 'error.main' }} />;
+      return <ErrorIcon sx={{ fontSize: sxRem(20), color: 'error.main' }} />;
     case 'warning':
-      return <WarningIcon sx={{ fontSize: 20, color: 'warning.main' }} />;
+      return <WarningIcon sx={{ fontSize: sxRem(20), color: 'warning.main' }} />;
     case 'info':
-      return <InfoIcon sx={{ fontSize: 20, color: 'info.main' }} />;
+      return <InfoIcon sx={{ fontSize: sxRem(20), color: 'info.main' }} />;
     case 'loading':
       return <CircularProgress size={16} />;
     default:
@@ -71,7 +74,7 @@ const buildToastStyles = (
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: 'blur(20px)',
         border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+        boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,
       };
 
     case 'minimal':
@@ -113,7 +116,7 @@ const ToastContent: React.FC<{
     )}
 
     {description && (
-      <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>
+      <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: sxRem(14) }}>
         {description}
       </Typography>
     )}
@@ -137,7 +140,7 @@ const ToastActionButton: React.FC<{
     size="small"
     onClick={action.onClick}
     variant={buttonVariant}
-    sx={{ fontSize: '0.75rem', py: 0.5, px: 1.5 }}
+    sx={{ fontSize: sxRem(12), py: 0.5, px: 1.5 }}
   >
     {action.label}
   </Button>

package/src/components/feedback/StackedModal/StackedModal.styles.ts

@@ -1,5 +1,6 @@
 import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+import { scrim } from '../../../tokens/ink';
 import { dynamicViewportHeight } from '../../../utils/viewport';
 import type { ModalPanelRole, PanelMaxWidth } from './StackedModal.types';
 
@@ -24,9 +25,10 @@ const MAX_WIDTH_PX: Record<Exclude<PanelMaxWidth, false>, number> = {
   xl: 1920,
 };
 
-const BACKDROP_BY_ROLE: Partial<Record<ModalPanelRole, string>> = {
-  secondary: 'rgba(0, 0, 0, 0.3)',
-  background: 'rgba(0, 0, 0, 0.1)',
+/** The scrim's opacity behind each receding panel role. */
+const BACKDROP_ALPHA_BY_ROLE: Partial<Record<ModalPanelRole, number>> = {
+  secondary: 0.3,
+  background: 0.1,
 };
 
 const ANIMATION_BY_ROLE: Partial<Record<ModalPanelRole, string>> = {
@@ -56,8 +58,8 @@ const panelWidth = (share: string, capPx: number | null): CSSObject =>
     ? { width: `min(${share}, ${capPx}px)`, maxWidth: `${capPx}px` }
     : { width: share, maxWidth: share };
 
-const backdropStyles = (modalRole?: ModalPanelRole): CSSObject => ({
-  backgroundColor: (modalRole && BACKDROP_BY_ROLE[modalRole]) ?? 'rgba(0, 0, 0, 0.5)',
+const backdropStyles = (theme: Theme, modalRole?: ModalPanelRole): CSSObject => ({
+  backgroundColor: scrim(theme, (modalRole && BACKDROP_ALPHA_BY_ROLE[modalRole]) ?? 0.5),
   backdropFilter: modalRole === 'primary' ? 'blur(4px)' : 'none',
 });
 
@@ -138,7 +140,7 @@ const panelStyles = (theme: Theme, props: PanelStyleProps): CSSObject => {
 /** The full rule set for the sliding panel's Dialog root. */
 export const dialogRootStyles = (theme: Theme, props: PanelStyleProps): CSSObject => ({
   direction: props.rtl ? 'rtl' : 'ltr',
-  '& .MuiBackdrop-root': backdropStyles(props.modalRole),
+  '& .MuiBackdrop-root': backdropStyles(theme, props.modalRole),
   '& .MuiDialog-container': { alignItems: 'flex-start', justifyContent: 'flex-end' },
   '& .MuiDialog-paper': panelStyles(theme, props),
   ...KEYFRAMES,

package/src/components/feedback/TutorialOverlay/TutorialOverlay.tsx

@@ -7,20 +7,23 @@ import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
 import type { FC} from 'react';
 import React, {  } from 'react';
 
+import { scrim, sheen } from '../../../tokens/ink';
+import { ABSOLUTE_INK } from '../../../tokens/ink.core';
+
 import { useTutorialOverlay } from './TutorialOverlay.hooks';
 import { TutorialStepBody } from './TutorialStepBody';
 import type { TutorialOverlayProps } from './TutorialOverlay.types';
 
-// Animation keyframes
+// Animation keyframes — static, so the ring's sheen is the absolute white.
 const pulseAnimation = keyframes`
   0% {
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+    box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0.7)};
   }
   70% {
-    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
+    box-shadow: 0 0 0 20px ${alpha(ABSOLUTE_INK.white, 0)};
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+    box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0)};
   }
 `;
 
@@ -45,24 +48,24 @@ const Overlay = styled(Box, {
   pointerEvents: allowClickThrough ? 'none' : 'auto',
   transition: 'opacity 0.3s ease' }));
 
-const Backdrop = styled(Box)(() => ({
+const Backdrop = styled(Box)(({ theme }) => ({
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  background: alpha('#000', 0.7),
+  background: scrim(theme, 0.7),
   backdropFilter: 'blur(2px)' }));
 
 const Spotlight = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'bounds' && prop !== 'padding' })<{ bounds: globalThis.DOMRect; padding: number }>(({ bounds, padding }) => ({
+  shouldForwardProp: (prop) => prop !== 'bounds' && prop !== 'padding' })<{ bounds: globalThis.DOMRect; padding: number }>(({ theme, bounds, padding }) => ({
   position: 'absolute',
   top: bounds.top - padding,
   left: bounds.left - padding,
   width: bounds.width + padding * 2,
   height: bounds.height + padding * 2,
   borderRadius: 8,
-  border: '2px solid rgba(255, 255, 255, 0.5)',
+  border: `2px solid ${sheen(theme, 0.5)}`,
   animation: `${pulseAnimation} 2s infinite`,
   pointerEvents: 'none',
   '&::before': {
@@ -71,7 +74,7 @@ const Spotlight = styled(Box, {
     inset: -2,
     borderRadius: 8,
     background: 'transparent',
-    boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.7)' } }));
+    boxShadow: `0 0 0 9999px ${scrim(theme, 0.7)}` } }));
 
 const TooltipContainer = styled(Paper, {
   shouldForwardProp: (prop) => prop !== 'placement' })<{ placement: string }>(({ theme, placement }) => ({

package/src/components/feedback/TutorialOverlay/TutorialStepBody.tsx

@@ -11,6 +11,8 @@ import Typography from '@mui/material/Typography/index.js';
 import { alpha, styled } from '@mui/material/styles/index.js';
 import React, {  } from 'react';
 
+import { onMedia, uiInk } from '../../../tokens/ink';
+
 import type { TutorialOverlayProps } from './TutorialOverlay.types';
 import type { TutorialCopy } from '../../../copy';
 
@@ -117,8 +119,10 @@ const TutorialStepNav: React.FC<{
                 size="small"
                 endIcon={<CompleteIcon />}
                 onClick={onNext}
-                sx={{
-                  background: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)' }}
+                sx={(theme) => {
+                  const [from, to] = uiInk(theme).celebration.mint;
+                  return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)` };
+                }}
                 data-testid="tutorial-finish-button"
               >
                 {stepCount === 1 ? 'Complete' : 'Finish'}
@@ -231,9 +235,10 @@ export const TutorialStepBody: React.FC<{
             variant="contained"
             size="small"
             onClick={step.action.onClick}
-            sx={{
-              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-              color: 'white' }}
+            sx={(theme) => {
+              const [from, to] = uiInk(theme).celebration.violet;
+              return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)`, color: onMedia(theme) };
+            }}
           >
             {step.action.label}
           </Button>

package/src/components/form/AddressAutocomplete/AddressOption.tsx

@@ -5,6 +5,7 @@ import type { FC, HTMLAttributes } from 'react';
 import React from 'react';
 
 import type { AddressOptionValue } from './AddressAutocomplete.types';
+import { rem } from '../../../tokens/relative';
 
 // Module-local: styled() components cannot be exported across a module boundary
 // here without tripping TS2742.
@@ -28,13 +29,13 @@ const LocationIconWrapper = styled(Box)(({ theme }) => ({
 const AddressText = styled(Box)(({ theme }) => ({
   flex: 1,
   '& .primary': {
-    fontSize: '0.9rem',
+    fontSize: rem(theme, 14.4),
     fontWeight: 500,
     color: theme.palette.text.primary,
     marginBottom: theme.spacing(0.25),
   },
   '& .secondary': {
-    fontSize: '0.8rem',
+    fontSize: rem(theme, 12.8),
     color: theme.palette.text.secondary,
   },
 }));

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

@@ -1,4 +1,5 @@
 import { darken, lighten } from '../../../tokens/color';
+import { ABSOLUTE_INK, NEUTRAL_RAMP } from '../../../tokens/ink.core';
 import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
 import type { UiPaletteColor, UiTheme } from '../../../tokens/theme';
 
@@ -86,10 +87,10 @@ export const PULSE_SPREAD = 15;
 export function buttonPalette(theme: UiTheme, color: ColorValue): UiPaletteColor {
   if (color === 'neutral') {
     return {
-      main: theme.palette.grey[700],
-      dark: theme.palette.grey[800],
-      light: theme.palette.grey[500],
-      contrastText: '#fff',
+      main: NEUTRAL_RAMP[700],
+      dark: NEUTRAL_RAMP[800],
+      light: NEUTRAL_RAMP[500],
+      contrastText: ABSOLUTE_INK.white,
     };
   }
   return theme.palette[color];

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

@@ -3,7 +3,9 @@ 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 { inkOver, px } from '../../../tokens/theme';
+import { absoluteInk, controlNeutral } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
+import { inkOver } from '../../../tokens/theme';
 
 // Define pulse animation globally
 const pulseAnimation = keyframes`
@@ -35,12 +37,7 @@ const shade = (
 ): string => palette?.[key] || palette?.main || fallback[key];
 
 /** `neutral` has no MUI palette entry, so its four shades come from grey. */
-const neutralPalette = (theme: Theme): ColorPalette => ({
-  main: theme.palette.grey?.[700] || '#616161',
-  dark: theme.palette.grey?.[800] || '#424242',
-  light: theme.palette.grey?.[500] || '#9e9e9e',
-  contrastText: '#fff',
-});
+const neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);
 
 export const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
   if (color === 'neutral') return neutralPalette(theme);
@@ -62,21 +59,29 @@ export const getColorFromTheme = (theme: Theme, color: string): ColorPalette =>
     main: palette?.main || fallback.main,
     dark: shade(palette, 'dark', fallback),
     light: shade(palette, 'light', fallback),
-    contrastText: palette?.contrastText || '#fff',
+    contrastText: palette?.contrastText || absoluteInk(theme).white,
   };
 };
 
+/** A size's padding shorthand and its type in design px, read through the type scale. */
+interface WebButtonSize {
+  padding: string;
+  fontPx: number;
+}
+
 // Derived from `Button.metrics.ts`, which the native `Button` reads too — one
 // table, so a size cannot differ between the renderers.
-const SIZE_MAP: Record<string, CSSObject> = Object.fromEntries(
+const SIZE_MAP: Record<string, WebButtonSize> = Object.fromEntries(
   Object.entries(BUTTON_SIZES).map(([size, m]) => [
     size,
-    { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontSize: px(m.fontSize) },
+    { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontPx: m.fontSize },
   ]),
 );
 
 /** What an unrecognised size falls back to, named so indexing can never be undefined. */
-const DEFAULT_SIZE: CSSObject = SIZE_MAP.md as CSSObject;
+const DEFAULT_SIZE: WebButtonSize = SIZE_MAP.md as WebButtonSize;
+
+const sizeOf = (size: string): WebButtonSize => SIZE_MAP[size] ?? DEFAULT_SIZE;
 
 /**
  * A BUTTON THAT IS ONLY AN ICON IS SQUARE.
@@ -95,10 +100,10 @@ const ICON_ONLY_PADDING: Record<string, string> = Object.fromEntries(
   Object.entries(ICON_ONLY_PADDING_PX).map(([size, padding]) => [size, `${padding}px`]),
 );
 
-const iconOnlySize = (size: string): CSSObject => ({
+const iconOnlySize = (theme: Theme, size: string): CSSObject => ({
   minWidth: 0,
   padding: ICON_ONLY_PADDING[size] ?? ICON_ONLY_PADDING.md,
-  fontSize: SIZE_MAP[size]?.fontSize ?? DEFAULT_SIZE.fontSize,
+  fontSize: rem(theme, sizeOf(size).fontPx),
   '& .MuiButton-startIcon, & .MuiButton-endIcon': { margin: 0 },
 });
 
@@ -114,8 +119,9 @@ export const buttonSize =
   (size: string, iconOnly: boolean) =>
   (theme: Theme): CSSObject => {
     const height = fieldHeight(theme, asFieldSize(size));
-    if (iconOnly) return { ...iconOnlySize(size), padding: 0, minWidth: height, minHeight: height };
-    return { ...(SIZE_MAP[size] ?? DEFAULT_SIZE), minHeight: height, paddingTop: 0, paddingBottom: 0 };
+    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 };
   };
 
 /**
@@ -178,7 +184,7 @@ const gradientFor = (theme: Theme, color: string, palette: ColorPalette): string
  * the worse of them.
  */
 const gradientInk = (theme: Theme, color: string, palette: ColorPalette): string =>
-  inkOver(gradientStops(theme, color, palette), palette.contrastText || '#fff');
+  inkOver(gradientStops(theme, color, palette), palette.contrastText || absoluteInk(theme).white);
 
 /**
  * The label colour for the two variants that paint no background of their own.
@@ -205,7 +211,7 @@ const VARIANT_STYLES: Record<
 > = {
   solid: (theme, palette) => ({
     backgroundColor: palette.main,
-    color: palette.contrastText || '#fff',
+    color: palette.contrastText || absoluteInk(theme).white,
     '&:hover': {
       backgroundColor: palette.dark,
       transform: 'translateY(-2px)',

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

@@ -1,12 +1,14 @@
 import MuiButton from '@mui/material/Button/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import * as React from 'react';
 
 import { resolveButtonProps } from './Button.helpers';
 import { BUTTON_ICON_GLYPH_SIZE } from './Button.metrics';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { fieldRadius } from '../../../tokens/field-radius';
+import { rem } from '../../../tokens/relative';
 import {
   buttonEmphasisStyles,
   buttonVariantStyles,
@@ -93,10 +95,10 @@ const muiColorFor = (color: NonNullable<ButtonProps['color']>): MuiButtonColor =
  * document order and never by specificity. Inline wins both, and it sits on the
  * one element we already render for this glyph.
  *
- * A number, not `px()`: React writes `font-size: 20px`, which is exactly the
- * declaration MUI was emitting before.
+ * Through the theme's type scale (FUT-2594): `1.25rem` at MUI's defaults, which
+ * is the 20px MUI was emitting before at a 16px root.
  */
-const ICON_GLYPH_STYLE = { fontSize: BUTTON_ICON_GLYPH_SIZE } as const;
+const iconGlyphStyle = (theme: Theme) => ({ fontSize: rem(theme, BUTTON_ICON_GLYPH_SIZE) });
 
 /**
  * An icon and nothing else — the shape that should render square.
@@ -158,11 +160,12 @@ const ButtonRoot = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const ownTestId = resolveTestId(others, 'button');
     const testId = (suffix: string) => childTestId(others, suffix, 'button');
     const props = withoutTestIdProps(others);
+    const theme = useTheme();
 
     // Wrap icon with testId if provided
     const iconWithTestId =
       !loading && icon ? (
-        <span data-testid={testId('icon')} style={ICON_GLYPH_STYLE}>
+        <span data-testid={testId('icon')} style={iconGlyphStyle(theme)}>
           {icon}
         </span>
       ) : undefined;

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

@@ -6,13 +6,14 @@ import Button from '@mui/material/Button/index.js';
 import type { CategorySelectCopy } from '../../../copy';
 import { footerSx, METRICS } from './CategorySelect.styles';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { sxRem } from '../../../tokens/relative';
 
 const buttonSx = (sheet: boolean) =>
   ({
     height: sheet ? METRICS.sheetFooterButton : METRICS.footerButton,
     padding: '0 13px',
     borderRadius: fieldRadiusPx,
-    fontSize: 12.5,
+    fontSize: sxRem(12.5),
     fontWeight: 600,
     textTransform: 'none',
     minWidth: 0,
@@ -45,7 +46,7 @@ export function CategoryMultiFoot({
 }: MultiFootProps): React.JSX.Element {
   return (
     <Box sx={footerSx} data-testid={`${dataTestId}-footer`}>
-      <Box component="span" sx={{ fontSize: 12, color: 'text.secondary' }}>
+      <Box component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
         {copy.footer.selectedCount(count)}
       </Box>
       <Box sx={{ display: 'flex', gap: '6px' }}>
@@ -85,7 +86,7 @@ export function CategorySingleFoot({
 }): React.JSX.Element {
   return (
     <Box sx={footerSx} data-testid={`${dataTestId}-footer`}>
-      <Box component="span" sx={{ fontSize: 12, color: 'text.secondary' }}>
+      <Box component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
         {copy.footer.singleHint}
       </Box>
       <Button

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

@@ -3,6 +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 { SearchGlyph } from './CategoryIcons';
 import {
@@ -15,6 +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';
 
 interface PanelHeadProps {
   query: string;
@@ -36,7 +38,7 @@ const searchFieldSx = {
     width: '100%',
     height: fieldHeight,
     padding: '0 30px 0 32px',
-    fontSize: 13,
+    fontSize: sxRem(13),
     border: fieldBorder,
     borderRadius: fieldRadiusPx,
     background: 'background.paper',
@@ -44,8 +46,8 @@ const searchFieldSx = {
     '&:focus': {
       outline: 'none',
       borderColor: 'primary.main',
-      boxShadow: (theme: { palette: { primary: { main: string } } }) =>
-        `0 0 0 3px ${theme.palette.primary.main}26`,
+      // 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)}`,
     },
   },
 } as const;
@@ -62,7 +64,7 @@ const clearButtonSx = {
   display: 'grid',
   placeItems: 'center',
   cursor: 'pointer',
-  fontSize: 12,
+  fontSize: sxRem(12),
   padding: 0,
   lineHeight: 1,
 } as const;
@@ -120,7 +122,7 @@ export function CategoryPanelHead({
             alignItems: 'center',
             gap: '10px',
             marginTop: '8px',
-            fontSize: 12,
+            fontSize: sxRem(12),
           }}
         >
           {quickActions}

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

@@ -4,6 +4,7 @@ import Box from '@mui/material/Box/index.js';
 import { useMemo } from 'react';
 
 import type { CategorySelectCopy } from '../../../copy';
+import { sxRem } from '../../../tokens/relative';
 
 import { collectBranchIds, collectLeafIds } from './category-tree';
 import type { CategorySelectState } from './useCategorySelect';
@@ -14,7 +15,7 @@ const linkButtonSx = {
   border: 0,
   padding: 0,
   font: 'inherit',
-  fontSize: 12,
+  fontSize: sxRem(12),
   color: 'primary.main',
   cursor: 'pointer',
   fontWeight: 550,

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

@@ -3,6 +3,8 @@ import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
+import { absoluteInk, uiInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 /**
  * The prototype's METRICS, verbatim.
@@ -63,7 +65,7 @@ export const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSOb
     background: selected ? brand.soft : theme.palette.background.paper,
     color: selected ? brand.ink : theme.palette.text.primary,
     font: 'inherit',
-    fontSize: 13,
+    fontSize: rem(theme, 13),
     cursor: 'pointer',
     maxWidth: '100%',
     transition: 'border-color .12s, box-shadow .12s',
@@ -81,7 +83,7 @@ export const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSOb
 /** The count pill inside the trigger. */
 export const triggerCountSx = (theme: Theme): CSSObject => ({
   fontWeight: 600,
-  fontSize: 11,
+  fontSize: rem(theme, 11),
   lineHeight: 1,
   background: theme.palette.primary.main,
   color: theme.palette.primary.contrastText,
@@ -92,7 +94,7 @@ export const triggerCountSx = (theme: Theme): CSSObject => ({
 });
 
 /** The trigger's inline clear (×) and the chevron. */
-export const triggerClearSx: CSSObject = {
+export const triggerClearSx = (theme: Theme): CSSObject => ({
   width: 20,
   height: 20,
   flex: '0 0 auto',
@@ -105,8 +107,8 @@ export const triggerClearSx: CSSObject = {
   color: 'inherit',
   opacity: 0.6,
   padding: 0,
-  '&:hover': { background: alpha('#000', 0.08), opacity: 1 },
-};
+  '&:hover': { background: alpha(absoluteInk(theme).black, 0.08), opacity: 1 },
+});
 
 export const triggerChevronSx = (open: boolean): CSSObject => ({
   width: 14,
@@ -124,7 +126,7 @@ export const panelSx = (theme: Theme): CSSObject => ({
   background: theme.palette.background.paper,
   border: `1px solid ${theme.palette.divider}`,
   borderRadius: `${METRICS.panelRadius}px`,
-  boxShadow: '0 1px 2px rgba(16,20,35,.05), 0 18px 40px -12px rgba(16,20,35,.28)',
+  boxShadow: `0 1px 2px ${alpha(uiInk(theme).panelShadowInk, 0.05)}, 0 18px 40px -12px ${alpha(uiInk(theme).panelShadowInk, 0.28)}`,
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
@@ -164,7 +166,7 @@ export const pinnedSx = (theme: Theme): CSSObject => ({
 
 export const pinnedLabelSx = (theme: Theme): CSSObject => ({
   fontWeight: 600,
-  fontSize: 10,
+  fontSize: rem(theme, 10),
   lineHeight: 1,
   letterSpacing: '.08em',
   textTransform: 'uppercase',
@@ -187,7 +189,7 @@ export const chipSx = (theme: Theme): CSSObject => {
     display: 'inline-flex',
     alignItems: 'center',
     gap: '5px',
-    fontSize: 12,
+    fontSize: rem(theme, 12),
     background: brand.soft,
     color: brand.ink,
     border: `1px solid ${brand.edge}`,
@@ -205,7 +207,7 @@ export const chipSx = (theme: Theme): CSSObject => {
       display: 'grid',
       placeItems: 'center',
       opacity: 0.65,
-      fontSize: 13,
+      fontSize: rem(theme, 13),
       lineHeight: 1,
       '&:hover': { background: alpha(theme.palette.primary.main, 0.16), opacity: 1 },
     },
@@ -262,25 +264,25 @@ export const rowNameSx = (theme: Theme, isCategory: boolean): CSSObject => ({
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  fontSize: 13.5,
+  fontSize: rem(theme, 13.5),
   fontWeight: isCategory ? 600 : 450,
   color: isCategory ? theme.palette.text.primary : theme.palette.text.secondary,
 });
 
 export const rowMetaSx = (theme: Theme, selected: boolean): CSSObject => ({
-  font: '500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace',
+  font: `500 ${rem(theme, 11)}/1 ui-monospace, SFMono-Regular, Menlo, monospace`,
   color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
   fontWeight: selected ? 600 : 500,
   flex: '0 0 auto',
 });
 
 /** The query hit inside a row label. */
-export const markSx: CSSObject = {
-  background: '#fff2a8',
+export const markSx = (theme: Theme): CSSObject => ({
+  background: uiInk(theme).highlightMark,
   color: 'inherit',
   borderRadius: '2px',
   padding: '0 1px',
-};
+});
 
 export const chevronButtonSx = (theme: Theme, open: boolean): CSSObject => ({
   width: METRICS.chevronButton,
@@ -334,7 +336,7 @@ export const radioSx = (theme: Theme, on: boolean): CSSObject => ({
 
 export const sectionHeadSx = (theme: Theme): CSSObject => ({
   fontWeight: 600,
-  fontSize: 10,
+  fontSize: rem(theme, 10),
   lineHeight: 1,
   letterSpacing: '.08em',
   textTransform: 'uppercase',
@@ -359,10 +361,10 @@ export const emptySx = (theme: Theme): CSSObject => ({
   '& strong': {
     display: 'block',
     color: theme.palette.text.primary,
-    fontSize: 13.5,
+    fontSize: rem(theme, 13.5),
     marginBottom: '4px',
   },
-  '& p': { margin: '0 0 12px', fontSize: 12.5, lineHeight: 1.5 },
+  '& p': { margin: '0 0 12px', fontSize: rem(theme, 12.5), lineHeight: 1.5 },
 });
 
 /** Skeleton row used while the catalogue loads. */