@12-apps/ui 6.33.0 → 6.34.0

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' && {

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

@@ -12,6 +12,7 @@ import {
   PULSE,
 } from './Progress.metrics';
 import type { ProgressSize, ProgressVariant } from './Progress.types';
+import { softNeutral } from '../../../tokens/ink';
 import { px } from '../../../tokens/theme';
 
 // Define pulse animation. The stops and the two seconds are the shared metrics'
@@ -31,12 +32,7 @@ export const pulseAnimation = keyframes`
 export const getColorFromTheme = (theme: Theme, color: string): PaletteColor => {
   // Handle special case for neutral (grey) which is a Color, not PaletteColor
   if (color === 'neutral') {
-    return {
-      light: theme.palette.grey[300],
-      main: theme.palette.grey[500],
-      dark: theme.palette.grey[700],
-      contrastText: theme.palette.getContrastText(theme.palette.grey[500]),
-    };
+    return softNeutral(theme);
   }
 
   const colorMap: Record<string, PaletteColor> = {

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

@@ -9,6 +9,7 @@ import { alpha, useTheme } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { scrim, sheen } from '../../../tokens/ink';
 import { withDefaults } from '../../../utils/withDefaults';
 
 import { shimmerAnimation } from './Sheet.animations';
@@ -45,7 +46,7 @@ const handleSx = (theme: Theme, isDraggable: boolean) => ({
     background: `linear-gradient(
       90deg,
       transparent,
-      ${alpha(theme.palette.common.white, 0.3)},
+      ${sheen(theme, 0.3)},
       transparent
     )`,
     animation: isDraggable ? `${shimmerAnimation} 2s infinite` : 'none',
@@ -223,7 +224,7 @@ export const SheetOverlay: React.FC<SheetOverlayProps> = (props) => {
           // One below the drawer: this backdrop replaces MUI's own (the drawer
           // is given a no-op BackdropComponent) and must sit under the panel.
           zIndex: theme.zIndex.drawer - 1,
-          backgroundColor: alpha(theme.palette.common.black, blur ? 0.6 : 0.5),
+          backgroundColor: scrim(theme, blur ? 0.6 : 0.5),
           backdropFilter: blur ? 'blur(8px) saturate(180%)' : 'none',
           WebkitBackdropFilter: blur ? 'blur(8px) saturate(180%)' : 'none',
           ...style,

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

@@ -4,6 +4,7 @@ import type React from 'react';
 
 import { glowAnimation, pulseAnimation, shimmerAnimation } from './Sheet.animations';
 import type { SheetProps } from './Sheet.types';
+import { shadowInk, sheen } from '../../../tokens/ink';
 import { accentFor } from '../../../tokens/scales';
 
 type Position = NonNullable<SheetProps['position']>;
@@ -161,7 +162,7 @@ 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 ${alpha(theme.palette.common.black, 0.1)}
+            0 -2px 10px 0 ${shadowInk(theme, 0.1)}
           `,
     border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
     borderTop: `2px solid ${alpha(accent, 0.3)}`,
@@ -178,8 +179,8 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>
     WebkitBackdropFilter: 'blur(24px) saturate(180%)',
     border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,
     boxShadow: `
-            0 8px 32px 0 ${alpha(theme.palette.common.black, 0.15)},
-            inset 0 0 0 1px ${alpha(theme.palette.common.white, 0.1)}
+            0 8px 32px 0 ${shadowInk(theme, 0.15)},
+            inset 0 0 0 1px ${sheen(theme, 0.1)}
           `,
   }),
 
@@ -200,7 +201,7 @@ const SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>
   elevated: ({ theme, elevation }) => ({
     boxShadow: `
             ${theme.shadows[elevation]},
-            0 20px 40px -15px ${alpha(theme.palette.common.black, 0.15)}
+            0 20px 40px -15px ${shadowInk(theme, 0.15)}
           `,
     transform: 'translateZ(0)',
     willChange: 'transform',
@@ -222,7 +223,7 @@ const shimmerOverlay = (theme: Theme) => ({
   background: `linear-gradient(
               90deg,
               transparent,
-              ${alpha(theme.palette.common.white, 0.2)},
+              ${sheen(theme, 0.2)},
               transparent
             )`,
   animation: `${shimmerAnimation} 3s infinite`,

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

@@ -6,6 +6,7 @@ import { styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { Step, StepItemProps, StepperProps } from './Stepper.types';
+import { neutralTones } from '../../../tokens/ink';
 import type { SizeValue } from '../../../tokens/scales';
 
 /**
@@ -63,7 +64,7 @@ const StepButton = styled(Button, {
       ? theme.palette.primary.main
       : isActive
       ? theme.palette.primary.main
-      : theme.palette.grey[300],
+      : neutralTones(theme).track,
     color: isCompleted || isActive ? theme.palette.primary.contrastText : theme.palette.text.primary,
     cursor: clickable ? 'pointer' : 'default',
     pointerEvents: clickable ? 'auto' : 'none',
@@ -76,12 +77,12 @@ const StepButton = styled(Button, {
             ? theme.palette.primary.dark
             : isActive
             ? theme.palette.primary.dark
-            : theme.palette.grey[400],
+            : neutralTones(theme).subtle,
           transform: 'scale(1.05)',
         }
       : {},
     '&:disabled': {
-      backgroundColor: theme.palette.grey[300],
+      backgroundColor: neutralTones(theme).track,
       color: theme.palette.text.disabled,
     },
   }),
@@ -92,7 +93,7 @@ const StepConnector = styled(Box, {
     !['orientation', 'isCompleted', 'size'].includes(prop as string),
 })<{ orientation: 'horizontal' | 'vertical'; isCompleted: boolean; size: SizeValue }>(
   ({ theme, orientation, isCompleted, size }) => ({
-    backgroundColor: isCompleted ? theme.palette.primary.main : theme.palette.grey[300],
+    backgroundColor: isCompleted ? theme.palette.primary.main : neutralTones(theme).track,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.short,
     }),

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

@@ -14,6 +14,7 @@ import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { TimelineItem, TimelineProps } from './Timeline.types';
+import { onMedia, uiInk } from '../../../tokens/ink';
 
 const slideInAnimation = keyframes`from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); }`;
 const pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;
@@ -172,10 +173,10 @@ const TimelineDetails: React.FC<{
                   e.stopPropagation();
                   item.action!.onClick();
                 }}
-                sx={{
-                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                  color: 'white',
-                }}
+                sx={(theme) => ({
+                  background: `linear-gradient(135deg, ${uiInk(theme).celebration.violet[0]} 0%, ${uiInk(theme).celebration.violet[1]} 100%)`,
+                  color: onMedia(theme),
+                })}
               >
                 {item.action.label}
               </Button>

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

@@ -115,7 +115,7 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
             <LegendItem key={phase.key}>
               <Box
                 className="color"
-                sx={{ backgroundColor: phaseColors[phase.key as PhaseKey] }}
+                sx={(theme) => ({ backgroundColor: phaseColors(theme)[phase.key as PhaseKey] })}
               />
               <Typography className="label">{phase.label}</Typography>
             </LegendItem>

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

@@ -2,21 +2,26 @@ import Box from '@mui/material/Box/index.js';
 import Tooltip from '@mui/material/Tooltip/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import { alpha, styled, useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import type { FC, ReactElement } from 'react';
 import React from 'react';
 
 import type { TimingData } from './TimingDiagram.types';
+import { onMedia, sheen, uiInk } from '../../../tokens/ink';
 
-// Color configurations
-export const phaseColors = {
-  dns: '#9C27B0', // Purple
-  connect: '#2196F3', // Blue
-  ssl: '#00BCD4', // Cyan
-  request: '#4CAF50', // Green
-  response: '#FF9800', // Orange
-};
+export type PhaseKey = 'dns' | 'connect' | 'ssl' | 'request' | 'response';
 
-export type PhaseKey = keyof typeof phaseColors;
+// Each phase's colour, from the theme's named timing set (`uiInk`).
+export const phaseColors = (theme: Theme): Record<PhaseKey, string> => {
+  const phases = uiInk(theme).timingPhases;
+  return {
+    dns: phases.dns,
+    connect: phases.connect,
+    ssl: phases.tls,
+    request: phases.request,
+    response: phases.response,
+  };
+};
 
 export interface Phase {
   key: string;
@@ -39,7 +44,7 @@ export const formatTime = (ms: number): string => {
   return `${(ms / 1000).toFixed(2)}s`;
 };
 
-const colorOf = (phase: Phase): string => phaseColors[phase.key as PhaseKey];
+const colorOf = (theme: Theme, phase: Phase): string => phaseColors(theme)[phase.key as PhaseKey];
 const widthOf = (percentages: Record<string, number>, phase: Phase): number =>
   percentages[phase.key] ?? 0;
 
@@ -134,6 +139,7 @@ export const WaterfallView: FC<TimingViewProps> = ({
   showTooltips,
   height,
 }) => {
+  const theme = useTheme();
   // Each bar starts where the previous one ended, so the row reads as a timeline.
   let offset = 0;
 
@@ -150,7 +156,7 @@ export const WaterfallView: FC<TimingViewProps> = ({
           <WaterfallBar
             key={phase.key}
             data-testid={`timing-segment-${phase.key}`}
-            phaseColor={colorOf(phase)}
+            phaseColor={colorOf(theme, phase)}
             offset={currentOffset}
             width={width}
             animated={animated}
@@ -198,13 +204,13 @@ const StackedBar = styled(Box, {
 
 const StackedSegment = styled(Box, {
   shouldForwardProp: (prop) => !['phaseColor', 'width'].includes(prop as string),
-})<{ phaseColor: string; width: number }>(({ phaseColor, width }) => ({
+})<{ phaseColor: string; width: number }>(({ theme, phaseColor, width }) => ({
   width: `${width}%`,
   background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  color: '#fff',
+  color: onMedia(theme),
   fontSize: '0.7rem',
   fontWeight: 600,
   position: 'relative',
@@ -222,39 +228,42 @@ export const StackedView: FC<TimingViewProps> = ({
   animated,
   showLabels,
   showTooltips,
-}) => (
-  <Box data-variant="stacked">
-    <StackedBar animated={animated} data-animated={animated.toString()}>
-      {phases.map((phase) => {
-        const width = widthOf(percentages, phase);
+}) => {
+  const theme = useTheme();
+  return (
+    <Box data-variant="stacked">
+      <StackedBar animated={animated} data-animated={animated.toString()}>
+        {phases.map((phase) => {
+          const width = widthOf(percentages, phase);
 
-        return withTooltip(
-          phase,
-          showTooltips,
-          <StackedSegment
-            key={phase.key}
-            data-testid={`timing-segment-${phase.key}`}
-            phaseColor={colorOf(phase)}
-            width={width}
-            style={{ width: `${width}%` }}
-          >
-            {showLabels && width > 10 && (
-              <span data-testid="timing-label">{formatTime(phase.value!)}</span>
-            )}
-          </StackedSegment>,
-        );
-      })}
-    </StackedBar>
-    <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>
-      <Typography variant="caption" color="text.secondary">
-        0ms
-      </Typography>
-      <Typography variant="caption" color="text.secondary" fontWeight="bold">
-        Total: {formatTime(data.total)}
-      </Typography>
+          return withTooltip(
+            phase,
+            showTooltips,
+            <StackedSegment
+              key={phase.key}
+              data-testid={`timing-segment-${phase.key}`}
+              phaseColor={colorOf(theme, phase)}
+              width={width}
+              style={{ width: `${width}%` }}
+            >
+              {showLabels && width > 10 && (
+                <span data-testid="timing-label">{formatTime(phase.value!)}</span>
+              )}
+            </StackedSegment>,
+          );
+        })}
+      </StackedBar>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>
+        <Typography variant="caption" color="text.secondary">
+          0ms
+        </Typography>
+        <Typography variant="caption" color="text.secondary" fontWeight="bold">
+          Total: {formatTime(data.total)}
+        </Typography>
+      </Box>
     </Box>
-  </Box>
-);
+  );
+};
 
 const HorizontalBar = styled(Box)(({ theme }) => ({
   display: 'flex',
@@ -295,7 +304,7 @@ const HorizontalSegment = styled(Box, {
         left: 0,
         right: 0,
         bottom: 0,
-        background: `linear-gradient(90deg, transparent 0%, ${alpha('#fff', 0.3)} 50%, transparent 100%)`,
+        background: `linear-gradient(90deg, transparent 0%, ${sheen(theme, 0.3)} 50%, transparent 100%)`,
         animation: 'shimmer 2s infinite',
       },
       '@keyframes shimmer': {
@@ -327,7 +336,7 @@ export const HorizontalView: FC<TimingViewProps> = ({
         <HorizontalSegment
           key={phase.key}
           data-testid={`timing-segment-${phase.key}`}
-          phaseColor={colorOf(phase)}
+          phaseColor={colorOf(theme, phase)}
           width={widthOf(percentages, phase)}
           animated={animated}
           data-animated={animated.toString()}

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

@@ -4,6 +4,7 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { TooltipProps } from './Tooltip.types';
+import { absoluteInk, neutralTones } from '../../../tokens/ink';
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -34,17 +35,17 @@ const variantStyles = (theme: Theme, variant?: string): CSSObject => {
   switch (variant) {
     case 'default':
       return {
-        backgroundColor: alpha(theme.palette.grey[900], 0.9),
-        color: theme.palette.common.white,
+        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.9),
+        color: absoluteInk(theme).white,
       };
     case 'dark':
       return {
-        backgroundColor: theme.palette.grey[900],
-        color: theme.palette.common.white,
+        backgroundColor: neutralTones(theme).inverseSurface,
+        color: absoluteInk(theme).white,
       };
     case 'light':
       return {
-        backgroundColor: theme.palette.common.white,
+        backgroundColor: absoluteInk(theme).white,
         color: theme.palette.text.primary,
         border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
         boxShadow: theme.shadows[4],
@@ -76,13 +77,13 @@ const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObjec
 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.1);
     case 'dark':
-      return theme.palette.grey[900];
+      return neutralTones(theme).inverseSurface;
     default:
-      return alpha(theme.palette.grey[900], 0.9);
+      return alpha(neutralTones(theme).inverseSurface, 0.9);
   }
 };
 

package/src/components/feedback/Dialog/Dialog.metrics.ts

@@ -1,4 +1,6 @@
 import type { DialogBorderRadius, DialogSize } from './Dialog.base';
+import { alpha } from '../../../tokens/color';
+import { ABSOLUTE_INK } from '../../../tokens/ink.core';
 import type { UiShadow } from '../../../tokens/shadow';
 
 /**
@@ -46,9 +48,9 @@ export const DIALOG_BORDER_WIDTH = 1;
  * inherit that from.
  */
 export const DIALOG_PAPER_SHADOW: readonly UiShadow[] = [
-  { offsetX: 0, offsetY: 11, blurRadius: 15, spreadDistance: -7, color: 'rgba(0, 0, 0, 0.2)' },
-  { offsetX: 0, offsetY: 24, blurRadius: 38, spreadDistance: 3, color: 'rgba(0, 0, 0, 0.14)' },
-  { offsetX: 0, offsetY: 9, blurRadius: 46, spreadDistance: 8, color: 'rgba(0, 0, 0, 0.12)' },
+  { offsetX: 0, offsetY: 11, blurRadius: 15, spreadDistance: -7, color: alpha(ABSOLUTE_INK.black, 0.2) },
+  { offsetX: 0, offsetY: 24, blurRadius: 38, spreadDistance: 3, color: alpha(ABSOLUTE_INK.black, 0.14) },
+  { offsetX: 0, offsetY: 9, blurRadius: 46, spreadDistance: 8, color: alpha(ABSOLUTE_INK.black, 0.12) },
 ];
 
 /* ── Variants and decorations ─────────────────────────────────────────────── */

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

@@ -14,6 +14,7 @@ import {
   DIALOG_RADIUS_UNITS,
   DIALOG_WIDTH_PERCENT,
 } from './Dialog.metrics';
+import { scrim, shadowInk } from '../../../tokens/ink';
 import { shadowCss } from '../../../tokens/shadow';
 import { dynamicViewportHeight } from '../../../utils/viewport';
 
@@ -148,7 +149,7 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
           offsetY: DIALOG_GLASS.shadow.offsetY,
           blurRadius: DIALOG_GLASS.shadow.blurRadius,
           spreadDistance: 0,
-          color: alpha(theme.palette.common.black, DIALOG_GLASS.shadow.alpha),
+          color: shadowInk(theme, DIALOG_GLASS.shadow.alpha),
         }),
       };
     case 'fullscreen':
@@ -165,13 +166,17 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
     case 'drawer': {
       const radius = borderRadiusOf(theme, opts.borderRadius);
       return {
-        borderRadius: `${radius}px 0 0 ${radius}px`,
+        // `radius` is already a length (`theme.spacing(n)` → '16px', or 0): gluing
+        // another `px` on wrote '16pxpx', which the browser dropped, leaving the
+        // panel's leading corners square.
+        borderRadius: `${radius} 0 0 ${radius}`,
         margin: 0,
         width: maxWidthOf(opts.size),
+        // Never wider than the screen: a 600px panel on a 375px phone put its
+        // title and the start of every line off the left edge.
+        maxWidth: '100%',
         ...dynamicViewportHeight('height'),
         maxHeight: 'none',
-        position: 'absolute' as const,
-        right: 0,
         ...decorations,
       };
     }
@@ -186,10 +191,7 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
 
 export function backdropSxOf(theme: Theme, glass: boolean) {
   return {
-    backgroundColor: alpha(
-      theme.palette.common.black,
-      glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain,
-    ),
+    backgroundColor: scrim(theme, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain),
     backdropFilter: glass ? `blur(${DIALOG_BACKDROP.blurPx}px)` : 'none',
   };
 }

package/src/components/feedback/Dialog/Dialog.tsx

@@ -5,10 +5,10 @@ import MuiDialog from '@mui/material/Dialog/index.js';
 import MuiDialogActions from '@mui/material/DialogActions/index.js';
 import MuiDialogContent from '@mui/material/DialogContent/index.js';
 import MuiDialogTitle from '@mui/material/DialogTitle/index.js';
-import Drawer from '@mui/material/Drawer/index.js';
+import Drawer, { type DrawerProps } from '@mui/material/Drawer/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { useTheme } from '@mui/material/styles/index.js';
+import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
@@ -74,6 +74,40 @@ function bodyOf(children: React.ReactNode, hasTitle: boolean): React.ReactNode {
   return <Box sx={{ ...BODY_SX, pt }}>{children}</Box>;
 }
 
+/** Our look first, then whatever `sx` the caller adds — so the caller's escape hatch still wins. */
+function withCallerSx(own: SxProps<Theme>, caller: SxProps<Theme> | undefined): SxProps<Theme> {
+  return [own, ...(Array.isArray(caller) ? caller : caller === undefined ? [] : [caller])] as SxProps<Theme>;
+}
+
+/**
+ * The drawer variant: MUI's `Drawer`, with the variant's look on the Drawer's
+ * OWN paper — on an inner Box it left the paper 0px wide and clipped the panel —
+ * and a caller's paper props merged over it rather than replacing it.
+ */
+function DrawerDialog({
+  paperSx,
+  testId,
+  drawerProps,
+  children,
+}: {
+  paperSx: SxProps<Theme>;
+  testId: string | undefined;
+  drawerProps: DrawerProps;
+  children: React.ReactNode;
+}) {
+  const { PaperProps: callerPaper, ...rest } = drawerProps;
+  return (
+    <Drawer
+      anchor="right"
+      data-testid={testId}
+      {...rest}
+      PaperProps={{ ...callerPaper, sx: withCallerSx(paperSx, callerPaper?.sx) }}
+    >
+      {children}
+    </Drawer>
+  );
+}
+
 export const Dialog: React.FC<DialogProps> = (rawProps) => {
   const {
     children,
@@ -124,18 +158,10 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
 
   if (variant === 'drawer') {
     return (
-      <Drawer
-        anchor="right"
-        open={open}
-        onClose={onClose}
-        data-testid={testId}
-        {...props}
-      >
-        <Box sx={{ ...paperSx, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-          {header}
-          {body}
-        </Box>
-      </Drawer>
+      <DrawerDialog paperSx={paperSx} testId={testId} drawerProps={{ ...props, open, onClose }}>
+        {header}
+        {body}
+      </DrawerDialog>
     );
   }
 

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

@@ -1,6 +1,8 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
+import { scrim, shadowInk } from '../../../tokens/ink';
+
 import type { ModalProps } from './Modal.types';
 
 type Variant = NonNullable<ModalProps['variant']>;
@@ -83,7 +85,7 @@ const surface = (theme: Theme, flags: ModalStyleFlags): CSSObject => {
   const boxShadow = glow
     ? `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}`
     : isGlass
-      ? `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
+      ? `0 8px 32px ${shadowInk(theme, 0.1)}`
       : theme.shadows[8];
 
   return {
@@ -121,6 +123,6 @@ export const panelSx = (theme: Theme, flags: ModalStyleFlags): CSSObject => {
 };
 
 export const backdropSx = (theme: Theme, isGlass: boolean): CSSObject => ({
-  backgroundColor: alpha(theme.palette.common.black, isGlass ? 0.2 : 0.5),
+  backgroundColor: scrim(theme, isGlass ? 0.2 : 0.5),
   backdropFilter: isGlass ? 'blur(8px)' : 'none',
 });

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

@@ -13,6 +13,8 @@ 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 type { SonnerItem } from './Sonner.types';
 import type { SonnerProps } from './Sonner.types';
 
@@ -71,7 +73,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':