@12-apps/ui 6.33.0 → 6.34.0

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/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,6 +3,7 @@ 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 { inkOver, px } from '../../../tokens/theme';
 
 // Define pulse animation globally
@@ -35,12 +36,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,7 +58,7 @@ 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,
   };
 };
 
@@ -178,7 +174,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 +201,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/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 {
@@ -44,8 +45,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;

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

@@ -3,6 +3,7 @@ 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';
 
 /**
  * The prototype's METRICS, verbatim.
@@ -92,7 +93,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 +106,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 +125,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',
@@ -275,12 +276,12 @@ export const rowMetaSx = (theme: Theme, selected: boolean): CSSObject => ({
 });
 
 /** 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,

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

@@ -1,3 +1,6 @@
+import { alpha } from '../../../tokens/color';
+import { EFFECT_GLOW } from '../../../tokens/ink.core';
+
 import type { CheckboxVariant } from './Checkbox.base';
 
 /**
@@ -56,15 +59,13 @@ export const CHECKBOX_SPINNER = { size: 20, offset: -10 } as const;
 
 /**
  * `glow` and `pulse` are keyed to MUI's DEFAULT blue rather than the theme's
- * primary — the web writes the rgba out by hand — so both renderers do.
+ * primary — `EFFECT_GLOW.muiBlue` (`tokens/ink.core`) — on both renderers.
  */
-export const CHECKBOX_EFFECT_INK = { r: 25, g: 118, b: 210 } as const;
 export const CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2000 } as const;
 export const CHECKBOX_PULSE = { spread: 10, alpha: 0.7, ms: 2000 } as const;
 
 /** MUI's default blue at an alpha, as the web's keyframes spell it. */
-export const effectInk = (alphaValue: number): string =>
-  `rgba(${CHECKBOX_EFFECT_INK.r}, ${CHECKBOX_EFFECT_INK.g}, ${CHECKBOX_EFFECT_INK.b}, ${alphaValue})`;
+export const effectInk = (alphaValue: number): string => alpha(EFFECT_GLOW.muiBlue, alphaValue);
 
 /** `FormControlLabel`: flush left, its label at MUI's `body2` size. */
 export const CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 } as const;

package/src/components/form/CodeEditor/CodeEditor.hooks.ts

@@ -62,7 +62,7 @@ export const useCodeEditor = ({
     editorRef.current = mountedEditor;
     monacoRef.current = monaco;
 
-    registerEditorThemes(monaco);
+    registerEditorThemes(monaco, theme);
     configureTypeScriptDefaults(monaco);
     scheduleAutoFormat(mountedEditor, autoFormat && !readOnly);
     registerSaveShortcut(mountedEditor, monaco, onSave);

package/src/components/form/CodeEditor/CodeEditor.monaco.ts

@@ -1,7 +1,22 @@
+import type { Theme } from '@mui/material/styles/index.js';
 import type { Monaco } from '@monaco-editor/react';
 import type { editor } from 'monaco-editor';
 
-const customLightTheme = {
+import { uiInk, type UiInk } from '../../../tokens/ink';
+
+type EditorChrome = UiInk['codeEditor']['light'];
+
+/** Monaco's colour keys, filled from one mode's chrome. */
+const chromeColors = (chrome: EditorChrome) => ({
+  'editor.background': chrome.background,
+  'editor.foreground': chrome.foreground,
+  'editor.lineHighlightBackground': chrome.lineHighlight,
+  'editorLineNumber.foreground': chrome.lineNumber,
+  'editorIndentGuide.background': chrome.gutterBorder,
+  'editor.selectionBackground': chrome.selection,
+});
+
+const customLightTheme = (chrome: EditorChrome) => ({
   base: 'vs' as const,
   inherit: true,
   rules: [
@@ -10,17 +25,10 @@ const customLightTheme = {
     { token: 'string', foreground: '032F62' },
     { token: 'number', foreground: '005CC5' },
   ],
-  colors: {
-    'editor.background': '#FFFFFF',
-    'editor.foreground': '#24292E',
-    'editor.lineHighlightBackground': '#F6F8FA',
-    'editorLineNumber.foreground': '#959DA5',
-    'editorIndentGuide.background': '#D1D5DA',
-    'editor.selectionBackground': '#C8E1FF',
-  },
-};
+  colors: chromeColors(chrome),
+});
 
-const customDarkTheme = {
+const customDarkTheme = (chrome: EditorChrome) => ({
   base: 'vs-dark' as const,
   inherit: true,
   rules: [
@@ -29,22 +37,16 @@ const customDarkTheme = {
     { token: 'string', foreground: '9ECBFF' },
     { token: 'number', foreground: '79B8FF' },
   ],
-  colors: {
-    'editor.background': '#0D1117',
-    'editor.foreground': '#C9D1D9',
-    'editor.lineHighlightBackground': '#161B22',
-    'editorLineNumber.foreground': '#8B949E',
-    'editorIndentGuide.background': '#21262D',
-    'editor.selectionBackground': '#3392FF44',
-  },
-};
+  colors: chromeColors(chrome),
+});
 
 // Main component
 const AUTO_FORMAT_DELAY_MS = 100;
 
-export const registerEditorThemes = (monaco: Monaco) => {
-  monaco.editor.defineTheme('custom-light', customLightTheme);
-  monaco.editor.defineTheme('custom-dark', customDarkTheme);
+export const registerEditorThemes = (monaco: Monaco, theme: Theme) => {
+  const chrome = uiInk(theme).codeEditor;
+  monaco.editor.defineTheme('custom-light', customLightTheme(chrome.light));
+  monaco.editor.defineTheme('custom-dark', customDarkTheme(chrome.dark));
 };
 
 // Best-effort: a Monaco build without the TypeScript worker (as in jsdom) throws

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

@@ -1,6 +1,7 @@
 import type { InputVariant } from './Input.base';
-import { decomposeColor, recomposeColor } from '../../../tokens/color';
+import { alpha, decomposeColor, recomposeColor } from '../../../tokens/color';
 import { DEFAULT_FIELD_HEIGHT, fieldHeightPx } from '../../../tokens/field-height.core';
+import { ABSOLUTE_INK } from '../../../tokens/ink.core';
 import type { UiTheme } from '../../../tokens/theme';
 import { SIZE_VALUES, type SizeValue } from '../../../tokens/vocabulary';
 
@@ -163,8 +164,8 @@ export const INPUT_BORDER = { rest: 1, focused: 2 } as const;
 
 /** `FilledInput`'s and `Input`'s resting underline, MUI's own two greys. */
 export const UNDERLINE_COLOR = {
-  light: 'rgba(0, 0, 0, 0.42)',
-  dark: 'rgba(255, 255, 255, 0.7)',
+  light: alpha(ABSOLUTE_INK.black, 0.42),
+  dark: alpha(ABSOLUTE_INK.white, 0.7),
 } as const;
 
 /**

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

@@ -15,6 +15,7 @@ import type { InputProps } from './Input.types';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldHeight } from '../../../tokens/field-height';
 import { fieldRadius } from '../../../tokens/field-radius';
+import { absoluteInk } from '../../../tokens/ink';
 import type { SizeValue } from '../../../tokens/vocabulary';
 
 type InputVariant = NonNullable<InputProps['variant']>;
@@ -148,7 +149,7 @@ const gradientStyles = (theme: Theme): CSSObject => ({
     bottom: 0,
     borderRadius: 'inherit',
     background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
-    mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+    mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
     maskComposite: 'exclude',
     padding: `${INPUT_GRADIENT.borderWidth}px`,
     zIndex: -1,

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

@@ -4,6 +4,7 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { asFieldSize, fieldHeight } from '../../../tokens/field-height';
+import { absoluteInk, controlNeutral } from '../../../tokens/ink';
 
 interface ColorPalette {
   main: string;
@@ -13,12 +14,7 @@ interface ColorPalette {
 }
 
 /** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */
-const neutralPalette = (theme: Theme): ColorPalette => ({
-  main: theme.palette.grey[700],
-  dark: theme.palette.grey[800],
-  light: theme.palette.grey[500],
-  contrastText: '#fff',
-});
+const neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);
 
 /** `danger` is this component's name for the error palette. */
 const namedPalette = (theme: Theme, color: string): ColorPalette => {
@@ -46,7 +42,7 @@ const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
     main: palette.main || primary.main,
     dark: palette.dark || palette.main || primary.dark,
     light: palette.light || palette.main || primary.light,
-    contrastText: palette.contrastText || '#fff',
+    contrastText: palette.contrastText || absoluteInk(theme).white,
   };
 };
 

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

@@ -6,6 +6,7 @@ import { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from '
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
 import { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';
+import { absoluteInk, controlNeutral } from '../../../tokens/ink';
 
 /** The segment track's padding and border: its corner is the segments' plus these. */
 const SEGMENT_TRACK_PADDING = 4;
@@ -18,17 +19,8 @@ interface ColorPalette {
   contrastText?: string;
 }
 
-/**
- * `neutral` is not a MUI palette entry, so it is built from the grey ramp. The
- * literal fallbacks cover a theme whose grey ramp has been replaced with one
- * that omits these steps.
- */
-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',
-});
+/** `neutral` is not a MUI palette entry, so it is the controls' neutral tone. */
+const neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);
 
 /** `danger` is this component's name for the error palette; the rest map straight through. */
 const namedPalette = (theme: Theme, color: string): ColorPalette => {
@@ -64,7 +56,7 @@ const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
     main: palette.main || primary.main,
     dark: palette.dark || palette.main || primary.dark,
     light: palette.light || palette.main || primary.light,
-    contrastText: palette.contrastText || '#fff',
+    contrastText: palette.contrastText || absoluteInk(theme).white,
   };
 };
 
@@ -193,7 +185,7 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
     fontWeight: 500,
     border: `${FIELD_BORDER_WIDTH}px solid ${selected ? palette.main : fieldEdge(theme)}`,
     backgroundColor: selected ? palette.main : 'transparent',
-    color: selected ? palette.contrastText || '#fff' : theme.palette.text.primary,
+    color: selected ? palette.contrastText || absoluteInk(theme).white : theme.palette.text.primary,
     position: 'relative' as const,
     overflow: 'hidden' as const,
     ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),
@@ -206,7 +198,7 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
       width: 0,
       height: 0,
       borderRadius: '50%',
-      backgroundColor: alpha(palette.contrastText || '#fff', 0.3),
+      backgroundColor: alpha(palette.contrastText || absoluteInk(theme).white, 0.3),
       transform: 'translate(-50%, -50%)',
       pointerEvents: 'none' as const,
     },

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

@@ -1,6 +1,7 @@
 import type { SelectVariant } from './Select.base';
 import type { InputVariant } from '../Input/Input.base';
 import { ICON_SIZES } from '../../../icons/Icon.types';
+import { ELEVATION_SHADOWS } from '../../../tokens/ink.core';
 import type { UiTheme } from '../../../tokens/theme';
 import type { SizeValue } from '../../../tokens/vocabulary';
 
@@ -68,8 +69,7 @@ export const SELECT_MENU = {
 } as const;
 
 /** MUI's `theme.shadows[8]`, the elevation a `Menu` paper rests at. */
-export const MUI_MENU_SHADOW =
-  '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)';
+export const MUI_MENU_SHADOW = ELEVATION_SHADOWS[8];
 
 /** The wash behind the option the value currently names. */
 export const selectedWashAlpha = (theme: UiTheme): number =>

package/src/components/form/Select/Select.tsx

@@ -21,6 +21,7 @@ import { fieldEdge } from '../../../tokens/field-edge';
 import { asFieldSize, fieldControlStyles, fieldHeight } from '../../../tokens/field-height';
 import type { SizeValue } from '../../../tokens/vocabulary';
 import { fieldRadius } from '../../../tokens/field-radius';
+import { absoluteInk } from '../../../tokens/ink';
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -104,7 +105,7 @@ const gradientVariant = (theme: Theme): CSSObject => ({
     bottom: 0,
     borderRadius: 'inherit',
     background: `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
-    mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+    mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
     maskComposite: 'exclude',
     padding: `${SELECT_GRADIENT.borderWidth}px`,
     zIndex: -1,

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

@@ -3,6 +3,8 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { glowAnimation, gradientShiftAnimation, pulseAnimation } from './Slider.animations';
 
+import { absoluteInk, controlNeutral, onMedia, sheen } from '../../../tokens/ink';
+
 interface ColorPalette {
   main: string;
   dark?: string;
@@ -11,12 +13,7 @@ interface ColorPalette {
 }
 
 /** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */
-const neutralPalette = (theme: Theme): ColorPalette => ({
-  main: theme.palette.grey[700],
-  dark: theme.palette.grey[800],
-  light: theme.palette.grey[500],
-  contrastText: '#fff',
-});
+const neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);
 
 /** `danger` is this component's name for the error palette. */
 const namedPalette = (theme: Theme, color: string): ColorPalette => {
@@ -44,7 +41,7 @@ const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
     main: palette.main || primary.main,
     dark: palette.dark || palette.main || primary.dark,
     light: palette.light || palette.main || primary.light,
-    contrastText: palette.contrastText || '#fff',
+    contrastText: palette.contrastText || absoluteInk(theme).white,
   };
 };
 
@@ -87,7 +84,7 @@ interface PartInput {
   geometry: Geometry;
 }
 
-const trackPart = ({ flags, palette, geometry }: PartInput): CSSObject => {
+const trackPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject => {
   const { gradient, glow, glass, customVariant } = flags;
   const isGradientVariant = customVariant === 'gradient';
 
@@ -115,7 +112,7 @@ const trackPart = ({ flags, palette, geometry }: PartInput): CSSObject => {
         left: 0,
         right: 0,
         bottom: 0,
-        background: `linear-gradient(90deg, transparent, ${alpha('#fff', 0.2)}, transparent)`,
+        background: `linear-gradient(90deg, transparent, ${sheen(theme, 0.2)}, transparent)`,
         animation: `${gradientShiftAnimation} 2s linear infinite`,
       },
     }),
@@ -156,7 +153,7 @@ const thumbPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject =>
   return {
     height: geometry.thumbSize,
     width: geometry.thumbSize,
-    backgroundColor: gradient ? palette.main : '#fff',
+    backgroundColor: gradient ? palette.main : absoluteInk(theme).white,
     border: `2px solid ${palette.main}`,
     boxShadow: `${theme.shadows[2]}, 0 0 0 0 ${alpha(palette.main, 0.2)}`,
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
@@ -190,7 +187,7 @@ const thumbPart = ({ theme, flags, palette, geometry }: PartInput): CSSObject =>
     ...(gradient && {
       background: `linear-gradient(135deg, ${palette.light}, ${palette.main})`,
       border: 'none',
-      color: '#fff',
+      color: onMedia(theme),
     }),
   };
 };