@12-apps/ui 6.33.1 → 6.35.0

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -35,6 +35,7 @@ import type { RangeFieldConfig, RangeValue } from './data-views-types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { fieldEdge } from '../../../tokens/field-edge';
+import { sxRem } from '../../../tokens/relative';
 
 
 
@@ -127,7 +128,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
         <Typography
           component="p"
           data-testid={`${testId}-inverted`}
-          sx={{ mt: 0.75, fontSize: '0.75rem', color: 'error.main' }}
+          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'error.main' }}
         >
           {copy.filters.rangeInvalid}
         </Typography>
@@ -139,7 +140,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
         <Typography
           component="p"
           data-testid={`${testId}-inclusive`}
-          sx={{ mt: 0.75, fontSize: '0.75rem', color: 'text.disabled' }}
+          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'text.disabled' }}
         >
           {copy.filters.rangeInclusiveNote}
         </Typography>
@@ -183,7 +184,7 @@ function ClearAffordance({
       }}
       sx={{ display: 'inline-flex', borderRadius: 999, p: 0.125, '&:hover': { bgcolor: 'action.selected' } }}
     >
-      <CloseIcon sx={{ fontSize: 14 }} />
+      <CloseIcon sx={{ fontSize: sxRem(14) }} />
     </Box>
   );
 }
@@ -228,7 +229,7 @@ function RangeTrigger<T extends Record<string, unknown>>({
           <ClearAffordance label={field.label} onClear={() => onChange({})} testId={`${testId}-clear-inline`} />
         ) : undefined
       }
-      endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
+      endIcon={<ChevronDownIcon sx={{ fontSize: sxRem(16) }} />}
       sx={{
         borderRadius: fieldRadiusPx,
         height: fieldHeight,
@@ -236,7 +237,7 @@ function RangeTrigger<T extends Record<string, unknown>>({
         maxWidth: 280,
         color: inverted ? 'error.main' : 'text.primary',
         fontWeight: 600,
-        fontSize: '0.8125rem',
+        fontSize: sxRem(13),
         textTransform: 'none',
         whiteSpace: 'nowrap',
         borderColor: (theme) => tone ?? fieldEdge(theme),
@@ -303,7 +304,7 @@ export function RangePill<T extends Record<string, unknown>>({
             empty grid with no explanation (FUT-668). */}
         {active && (
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mt: 1.5 }}>
-            <Typography component="span" sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
+            <Typography component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
               {rangeChipLabel(field, value)}
             </Typography>
             <Button
@@ -343,7 +344,7 @@ export function PanelRangeField<T extends Record<string, unknown>>({
   if (field.kind === "day") {
     return (
       <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-        <Typography component="span" sx={{ fontSize: "0.75rem", fontWeight: 500, color: "text.secondary" }}>
+        <Typography component="span" sx={{ fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }}>
           {field.label}
         </Typography>
         <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />

package/src/components/data-display/DataViews/data-views-scopes.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef } from "react";
 
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { Box } from "../../../mui/Box";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * SCOPES — a page-level partition rendered as a strip of tabs under the toolbar.
@@ -188,7 +189,7 @@ function scopeTabSx(active: boolean): Record<string, unknown> {
     cursor: "pointer",
     whiteSpace: "nowrap",
     font: "inherit",
-    fontSize: "0.8125rem",
+    fontSize: sxRem(13),
     fontWeight: active ? 600 : 400,
     color: active ? "primary.main" : "text.secondary",
     "&:hover": { color: active ? "primary.main" : "text.primary" },
@@ -217,7 +218,7 @@ function ScopeCount({
         ml: 0.75,
         px: 0.75,
         borderRadius: 5,
-        fontSize: "0.6875rem",
+        fontSize: sxRem(11),
         fontWeight: 600,
         bgcolor: active ? "primary.main" : "action.selected",
         color: active ? "primary.contrastText" : "text.secondary",

package/src/components/data-display/DataViews/data-views-search.tsx

@@ -17,6 +17,7 @@ import { fieldRadiusPx } from "../../../tokens/field-radius";
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { fieldHeight, fieldTextFieldStyles } from "../../../tokens/field-height";
 import { fieldEdge } from "../../../tokens/field-edge";
+import { sxRem } from "../../../tokens/relative";
 
 /** How long the box waits after the last keystroke before it queries. */
 const SEARCH_DEBOUNCE_MS = 350;
@@ -152,7 +153,7 @@ export function InlineKeyword({
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
-            <SearchIcon sx={{ fontSize: 16, color: "text.secondary" }} />
+            <SearchIcon sx={{ fontSize: sxRem(16), color: "text.secondary" }} />
           </InputAdornment>
         ),
         endAdornment: draft ? (
@@ -164,7 +165,7 @@ export function InlineKeyword({
               onClick={() => setDraft("")}
               sx={{ p: 0.25 }}
             >
-              <CloseIcon sx={{ fontSize: 14 }} />
+              <CloseIcon sx={{ fontSize: sxRem(14) }} />
             </IconButton>
           </InputAdornment>
         ) : undefined,
@@ -212,7 +213,7 @@ export function CollapsedSearch({
         bgcolor: active ? "action.selected" : "background.paper",
       }}
     >
-      <SearchIcon sx={{ fontSize: 18 }} />
+      <SearchIcon sx={{ fontSize: sxRem(18) }} />
       {active && (
         <Box
           component="span"

package/src/components/data-display/DataViews/data-views-view-nav.tsx

@@ -32,6 +32,7 @@ import { Text } from "../../typography/Text";
 
 import type { DisplayPanelView } from "./data-views-display-panel";
 import type { SavedViewSummary } from "./data-views-types";
+import { sxRem } from "../../../tokens/relative";
 
 /** What the panel needs to drive the views without owning any of them. */
 export interface ViewNavHandlers {
@@ -59,7 +60,7 @@ const rowSx = {
   bgcolor: "transparent",
   cursor: "pointer",
   font: "inherit",
-  fontSize: "0.8125rem",
+  fontSize: sxRem(13),
   textAlign: "left",
   color: "text.primary",
   "&:hover": { bgcolor: "action.hover" },
@@ -190,7 +191,7 @@ export function ViewActions({
         type="button"
         onClick={onBack}
         data-testid={`${testIdPrefix}-view-actions-back`}
-        sx={{ ...rowSx, color: "text.secondary", fontSize: "0.75rem" }}
+        sx={{ ...rowSx, color: "text.secondary", fontSize: sxRem(12) }}
       >
         <ChevronLeftRoundedIcon fontSize="small" />
         <Box component="span" sx={{ flex: 1, fontWeight: 600, color: "text.primary" }}>
@@ -278,7 +279,7 @@ function ViewToggle({
         border: 0,
         borderRadius: 1,
         font: "inherit",
-        fontSize: "0.75rem",
+        fontSize: sxRem(12),
         bgcolor: open ? "action.selected" : "transparent",
         ...affordance,
       }}

package/src/components/data-display/DataViews/list-card-cells.tsx

@@ -3,6 +3,7 @@
 import { createContext, useContext, type ReactNode } from "react";
 
 import { Box } from "../../../mui/Box";
+import { sxRem } from "../../../tokens/relative";
 
 /**
  * THE CELL CONFIG — the list declares its columns once, every row obeys them.
@@ -126,14 +127,14 @@ function Cell<T extends Record<string, unknown>>({
     >
       <Box
         component="span"
-        sx={{ ...clamp, fontSize: 14, fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric }}
+        sx={{ ...clamp, fontSize: sxRem(14), fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric }}
       >
         {config.primary(row)}
       </Box>
       {secondary != null && (
         <Box
           component="span"
-          sx={{ ...clamp, fontSize: 12.5, lineHeight: 1.3, color: "text.secondary", ...numeric }}
+          sx={{ ...clamp, fontSize: sxRem(12.5), lineHeight: 1.3, color: "text.secondary", ...numeric }}
         >
           {secondary}
         </Box>

package/src/components/data-display/EmptyState/EmptyState.metrics.ts

@@ -1,4 +1,5 @@
 import type { EmptyStateVariant } from './EmptyState.base';
+import { ELEVATION_SHADOWS } from '../../../tokens/ink.core';
 
 /**
  * THE NUMBERS BOTH `EmptyState` RENDERERS DRAW WITH.
@@ -46,8 +47,7 @@ export const ACTION_BUTTON = {
   outlinedBorderAlpha: 0.5,
 } as const;
 /** MUI's `theme.shadows[2]`, the elevation a contained button rests at. */
-export const MUI_CONTAINED_SHADOW =
-  '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)';
+export const MUI_CONTAINED_SHADOW = ELEVATION_SHADOWS[2];
 
 /** The help link: 8px below whatever precedes it, marked when it leaves the app. */
 export const HELP_LINK_MARGIN_TOP_UNITS = 1;

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

@@ -24,6 +24,7 @@ import {
 } from './ErrorState.metrics';
 import type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';
 import { resolveTestId } from '../../../platform/test-id';
+import { sxRem } from '../../../tokens/relative';
 
 const makeTestId =
   (dataTestId?: string) =>
@@ -56,7 +57,7 @@ const ErrorIcon: React.FC<{
         opacity: ERROR_ICON_BOX_OPACITY,
       }}
     >
-      {icon || <Fallback sx={{ fontSize: ERROR_ICON_SIZE, color: color.main }} />}
+      {icon || <Fallback sx={{ fontSize: sxRem(ERROR_ICON_SIZE), color: color.main }} />}
     </Box>
   );
 };

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

@@ -10,6 +10,7 @@ import {
   slideInUp,
 } from './HoverCard.animations';
 import type { HoverCardAnimation, HoverCardPlacement } from './HoverCard.types';
+import { shadowInk } from '../../../tokens/ink';
 
 /** The edge the card sits on, ignoring the `-start`/`-end` alignment suffix. */
 type Side = 'top' | 'bottom' | 'left' | 'right';
@@ -115,7 +116,7 @@ const VARIANTS: Record<string, (theme: Theme) => CSSObject> = {
     backdropFilter: 'blur(20px)',
     WebkitBackdropFilter: 'blur(20px)',
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.12)}`,
+    boxShadow: `0 8px 32px ${shadowInk(theme, 0.12)}`,
   }),
   detailed: (theme) => ({
     backgroundColor: theme.palette.background.paper,

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

@@ -1,6 +1,9 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
+import { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
+
 const pulseAnimation = keyframes`
   0% {
     transform: scale(1);
@@ -17,35 +20,35 @@ const pulseAnimation = keyframes`
 `;
 
 const SIZE_MAP = {
-  sm: { fontSize: '0.75rem', padding: '4px 8px' },
-  md: { fontSize: '0.875rem', padding: '6px 12px' },
-  lg: { fontSize: '1rem', padding: '8px 16px' },
+  sm: { fontSize: sxRem(12), padding: '4px 8px' },
+  md: { fontSize: sxRem(14), padding: '6px 12px' },
+  lg: { fontSize: sxRem(16), padding: '8px 16px' },
 } as const;
 
-export const getSizeStyles = (size?: string): { fontSize: string; padding: string } =>
+export const getSizeStyles = (size?: string): { fontSize: (theme: Theme) => string; padding: string } =>
   SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;
 
 export const variantStyles = (theme: Theme, variant?: string): CSSObject => {
   switch (variant) {
     case 'default':
       return {
-        backgroundColor: alpha(theme.palette.grey[900], 0.92),
-        color: theme.palette.common.white,
-        boxShadow: `0 4px 12px ${alpha(theme.palette.common.black, 0.3)}`,
+        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.92),
+        color: absoluteInk(theme).white,
+        boxShadow: `0 4px 12px ${shadowInk(theme, 0.3)}`,
       };
     case 'dark':
       return {
-        backgroundColor: '#000000',
-        color: theme.palette.common.white,
-        boxShadow: `0 6px 16px ${alpha(theme.palette.common.black, 0.5)}`,
-        border: `1px solid ${alpha(theme.palette.common.white, 0.1)}`,
+        backgroundColor: absoluteInk(theme).black,
+        color: absoluteInk(theme).white,
+        boxShadow: `0 6px 16px ${shadowInk(theme, 0.5)}`,
+        border: `1px solid ${sheen(theme, 0.1)}`,
       };
     case 'light':
       return {
-        backgroundColor: theme.palette.common.white,
-        color: theme.palette.grey[900],
-        border: `1px solid ${alpha(theme.palette.grey[400], 0.4)}`,
-        boxShadow: `0 4px 16px ${alpha(theme.palette.common.black, 0.15)}`,
+        backgroundColor: absoluteInk(theme).white,
+        color: neutralTones(theme).inverseSurface,
+        border: `1px solid ${alpha(neutralTones(theme).subtle, 0.4)}`,
+        boxShadow: `0 4px 16px ${shadowInk(theme, 0.15)}`,
       };
     case 'glass':
       return {
@@ -54,7 +57,7 @@ export const variantStyles = (theme: Theme, variant?: string): CSSObject => {
         WebkitBackdropFilter: 'blur(24px) saturate(180%)',
         border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,
         color: theme.palette.text.primary,
-        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.12)}`,
+        boxShadow: `0 8px 32px ${shadowInk(theme, 0.12)}`,
       };
     default:
       return {};
@@ -76,12 +79,12 @@ export const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): C
 export const arrowColor = (theme: Theme, variant?: string): string => {
   switch (variant) {
     case 'light':
-      return theme.palette.common.white;
+      return absoluteInk(theme).white;
     case 'glass':
       return alpha(theme.palette.background.paper, 0.75);
     case 'dark':
-      return '#000000';
+      return absoluteInk(theme).black;
     default:
-      return alpha(theme.palette.grey[900], 0.92);
+      return alpha(neutralTones(theme).inverseSurface, 0.92);
   }
 };

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

@@ -25,7 +25,7 @@ const StyledTooltip = styled(MuiTooltip, {
   return {
     '& .MuiTooltip-tooltip': {
       borderRadius: theme.spacing(1),
-      fontSize: sizeStyles.fontSize,
+      fontSize: sizeStyles.fontSize(theme),
       padding: sizeStyles.padding,
       fontWeight: 500,
       transition: 'all 0.3s ease',

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

@@ -6,6 +6,7 @@ import { Skeleton } from '../../layout/Skeleton';
 import type { ResolvedLazyImageProps } from './LazyImage.hooks';
 import { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';
 import type { LazyImageProps } from './LazyImage.types';
+import { sheen } from '../../../tokens/ink';
 
 const ImageContainer = styled(Box)(() => ({
   position: 'relative',
@@ -33,7 +34,7 @@ const SpinnerOverlay = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  backgroundColor: sheen(theme, 0.8),
   borderRadius: '50%',
   padding: theme.spacing(1),
 }));

package/src/components/data-display/Lightbox/Lightbox.constants.ts

@@ -1,3 +1,8 @@
+import type { Theme } from '@mui/material/styles/index.js';
+
+import { onMedia, scrim, sheen } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
+
 export const MIN_ZOOM = 0.5;
 export const MAX_ZOOM = 5;
 export const ZOOM_STEP = 1.2;
@@ -8,11 +13,11 @@ export const DEFAULT_AUTOPLAY_INTERVAL_MS = 4000;
 export const MIN_SWIPE_DISTANCE = 50;
 export const OVERLAY_Z_INDEX = 1000;
 
-const SCRIM = 'rgba(0, 0, 0, 0.5)';
-const SCRIM_HOVER = 'rgba(0, 0, 0, 0.7)';
+const SCRIM = (theme: Theme): string => scrim(theme, 0.5);
+const SCRIM_HOVER = (theme: Theme): string => scrim(theme, 0.7);
 
 export const overlayButtonSx = {
-  color: 'white',
+  color: onMedia,
   backgroundColor: SCRIM,
   '&:hover': { backgroundColor: SCRIM_HOVER },
 } as const;
@@ -20,22 +25,22 @@ export const overlayButtonSx = {
 // The arrows drop their hover treatment at the ends of a non-looping gallery and
 // dim instead, so a disabled arrow does not look pressable.
 export const navButtonSx = {
-  color: 'white',
+  color: onMedia,
   backgroundColor: SCRIM,
   '&:hover:not(:disabled)': { backgroundColor: SCRIM_HOVER },
-  '&:disabled': { color: 'rgba(255, 255, 255, 0.3)' },
+  '&:disabled': { color: (theme: Theme) => sheen(theme, 0.3) },
 } as const;
 
 export const captionSx = {
-  color: 'white',
+  color: onMedia,
   textAlign: 'center',
   backgroundColor: SCRIM_HOVER,
   borderRadius: 1,
 } as const;
 
 export const counterSx = {
-  color: 'white',
-  fontSize: '0.875rem',
+  color: onMedia,
+  fontSize: sxRem(14),
   backgroundColor: SCRIM,
   borderRadius: 1,
 } as const;

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

@@ -1,6 +1,7 @@
 import Dialog from '@mui/material/Dialog/index.js';
 import Fade from '@mui/material/Fade/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { makeTestId } from './Lightbox.constants';
@@ -12,13 +13,14 @@ import { LightboxOverlay } from './LightboxOverlay';
 import { LightboxStage } from './LightboxStage';
 import { LightboxThumbnails } from './LightboxThumbnails';
 import { useLightbox } from './useLightbox';
+import { scrim } from '../../../tokens/ink';
 
 const DIALOG_STATIC_PROPS = {
   maxWidth: false,
   fullScreen: true,
   TransitionComponent: Fade,
   TransitionProps: { timeout: 300 },
-  PaperProps: { sx: { background: 'rgba(0, 0, 0, 0.9)', backdropFilter: 'blur(2px)' } },
+  PaperProps: { sx: { background: (theme: Theme) => scrim(theme, 0.9), backdropFilter: 'blur(2px)' } },
   'aria-label': 'Lightbox',
   'aria-labelledby': 'lightbox-title',
   role: 'dialog',

package/src/components/data-display/Lightbox/LightboxStage.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 
 import { captionSx, counterSx } from './Lightbox.constants';
 import type { LightboxItem } from './Lightbox.types';
+import { onMedia } from '../../../tokens/ink';
 
 type TestId = (suffix: string) => string;
 
@@ -48,7 +49,7 @@ export const LightboxStage: FC<LightboxStageProps> = ({
   >
     {isLoading && (
       <CircularProgress
-        sx={{ position: 'absolute', color: 'white', zIndex: 999 }}
+        sx={{ position: 'absolute', color: onMedia, zIndex: 999 }}
         data-testid={testId('loading')}
       />
     )}

package/src/components/data-display/Lightbox/LightboxThumbnails.tsx

@@ -1,10 +1,13 @@
 import PlayIcon from '@mui/icons-material/PlayArrow';
 import Box from '@mui/material/Box/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import type { FC } from 'react';
 import React from 'react';
 
 import { thumbnailStripSx } from './Lightbox.constants';
 import type { LightboxItem } from './Lightbox.types';
+import { onMedia, sheen } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 
 const THUMB_WIDTH = 60;
 const THUMB_HEIGHT = 40;
@@ -14,13 +17,13 @@ const VideoThumbnail: FC = () => (
     sx={{
       width: '100%',
       height: '100%',
-      background: 'rgba(255, 255, 255, 0.1)',
+      background: (theme: Theme) => sheen(theme, 0.1),
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
     }}
   >
-    <PlayIcon sx={{ color: 'white', fontSize: 16 }} />
+    <PlayIcon sx={{ color: onMedia, fontSize: sxRem(16) }} />
   </Box>
 );
 
@@ -60,11 +63,11 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
           width: THUMB_WIDTH,
           height: THUMB_HEIGHT,
           cursor: 'pointer',
-          border: currentIndex === index ? '2px solid white' : '2px solid transparent',
+          border: currentIndex === index ? (theme: Theme) => `2px solid ${onMedia(theme)}` : '2px solid transparent',
           borderRadius: 0.5,
           overflow: 'hidden',
           flexShrink: 0,
-          '&:hover': { border: '2px solid rgba(255, 255, 255, 0.7)' },
+          '&:hover': { border: (theme: Theme) => `2px solid ${sheen(theme, 0.7)}` },
         }}
         data-testid={testId(`thumbnail-${index}`)}
       >

package/src/components/data-display/MapPreview/MapDecorations.tsx

@@ -9,6 +9,8 @@ import React from 'react';
 
 import { getScaleDistance } from './mapProjection';
 import { BOUNCE_KEYFRAMES } from './mapSurface';
+import { shadowInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // Decorative only: these give the mock surface something to look like without
 // standing in for real map data.
@@ -49,7 +51,7 @@ const DecorativePin: FC<{ top: string; left: string }> = ({ top, left }) => {
 
   return (
     <Box sx={{ position: 'absolute', top, left, opacity: 0.6 }}>
-      <PlaceIcon sx={{ fontSize: 20, color: theme.palette.primary.main }} />
+      <PlaceIcon sx={{ fontSize: rem(theme, 20), color: theme.palette.primary.main }} />
     </Box>
   );
 };
@@ -73,12 +75,12 @@ export const MapCentreMarker: FC = () => {
         left: '50%',
         transform: 'translate(-50%, -100%)',
         zIndex: 2,
-        filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))',
+        filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,
       }}
     >
       <LocationIcon
         sx={{
-          fontSize: 36,
+          fontSize: rem(theme, 36),
           color: theme.palette.error.main,
           animation: 'bounce 2s infinite',
           '@keyframes bounce': BOUNCE_KEYFRAMES,
@@ -103,7 +105,7 @@ export const MapScaleBar: FC<{ zoom: number }> = ({ zoom }) => {
         padding: theme.spacing(0.5, 1),
         background: alpha(theme.palette.background.paper, 0.9),
         borderRadius: theme.shape.borderRadius,
-        fontSize: '0.75rem',
+        fontSize: rem(theme, 12),
         color: theme.palette.text.secondary,
       }}
     >
@@ -150,7 +152,7 @@ export const MapCompass: FC = () => {
       }}
     >
       <NavigationIcon
-        sx={{ fontSize: 24, color: theme.palette.primary.main, transform: 'rotate(-45deg)' }}
+        sx={{ fontSize: rem(theme, 24), color: theme.palette.primary.main, transform: 'rotate(-45deg)' }}
       />
     </Box>
   );

package/src/components/data-display/MapPreview/MapMarkers.tsx

@@ -9,6 +9,8 @@ import React from 'react';
 import { MARKER_PIXELS_PER_DEGREE } from './MapPreview.constants';
 import type { LatLng, MapMarker } from './MapPreview.types';
 import { BOUNCE_KEYFRAMES } from './mapSurface';
+import { shadowInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -59,9 +61,9 @@ export const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) =
           <Tooltip title={markerItem.description || markerItem.title || ''}>
             <LocationIcon
               sx={{
-                fontSize: 32,
+                fontSize: rem(theme, 32),
                 color: theme.palette.error.main,
-                filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))',
+                filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,
                 animation: animated ? 'bounce 2s infinite' : 'none',
                 '@keyframes bounce': BOUNCE_KEYFRAMES,
               }}

package/src/components/data-display/MapPreview/mapSurface.ts

@@ -2,33 +2,34 @@ import type { Theme } from '@mui/material/styles/index.js';
 import { alpha } from '@mui/material/styles/index.js';
 
 import type { MapType } from './MapPreview.types';
+import { neutralTones, uiInk } from '../../../tokens/ink';
 
-type GreyShade = keyof Theme['palette']['grey'];
-
-const greyGradient = (theme: Theme, from: GreyShade, to: GreyShade, opacity = 1): string => {
-  const shade = (key: GreyShade) => alpha(theme.palette.grey[key], opacity);
-  return `linear-gradient(135deg, ${shade(from)} 0%, ${shade(to)} 100%)`;
-};
+const toneGradient = (from: string, to: string, opacity = 1): string =>
+  `linear-gradient(135deg, ${alpha(from, opacity)} 0%, ${alpha(to, opacity)} 100%)`;
 
 // The backdrop behind the tiles: dark for satellite, green for terrain, and
 // grey for road maps, following the theme's own light/dark choice.
 export const surfaceBackground = (mapType: MapType, theme: Theme): string => {
-  if (mapType === 'satellite') return greyGradient(theme, 900, 800);
+  const tones = neutralTones(theme);
+  if (mapType === 'satellite') return toneGradient(tones.inverseSurface, tones.raised);
   if (mapType === 'terrain') {
-    return `linear-gradient(135deg, ${alpha('#8BC34A', 0.2)} 0%, ${alpha('#4CAF50', 0.3)} 100%)`;
+    const ground = uiInk(theme).mapSurface;
+    return `linear-gradient(135deg, ${alpha(ground.terrainFrom, 0.2)} 0%, ${alpha(ground.terrainTo, 0.3)} 100%)`;
   }
-  if (theme.palette.mode === 'dark') return greyGradient(theme, 900, 800);
-  return greyGradient(theme, 100, 200);
+  if (theme.palette.mode === 'dark') return toneGradient(tones.inverseSurface, tones.raised);
+  return toneGradient(tones.surface, tones.faint);
 };
 
 export const tileBackground = (mapType: MapType, theme: Theme): string => {
+  const ground = uiInk(theme).mapSurface;
   if (mapType === 'satellite') {
-    return `linear-gradient(135deg, ${alpha('#1a1a1a', 0.9)} 0%, ${alpha('#2a2a2a', 0.9)} 100%)`;
+    return `linear-gradient(135deg, ${alpha(ground.satelliteTileFrom, 0.9)} 0%, ${alpha(ground.satelliteTileTo, 0.9)} 100%)`;
   }
   if (mapType === 'terrain') {
-    return `linear-gradient(135deg, ${alpha('#7cb342', 0.1)} 0%, ${alpha('#558b2f', 0.1)} 100%)`;
+    return `linear-gradient(135deg, ${alpha(ground.terrainTileFrom, 0.1)} 0%, ${alpha(ground.terrainTileTo, 0.1)} 100%)`;
   }
-  return greyGradient(theme, 100, 200, 0.5);
+  const tones = neutralTones(theme);
+  return toneGradient(tones.surface, tones.faint, 0.5);
 };
 
 export const BOUNCE_KEYFRAMES = {

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

@@ -5,6 +5,7 @@ import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { PopoverProps } from './Popover.types';
+import { shadowInk } from '../../../tokens/ink';
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -46,7 +47,7 @@ const StyledPaper = styled(Paper, {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
     backdropFilter: 'blur(20px)',
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+    boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,
   }),
 
   ...(customVariant === 'arrow' && {