@12-apps/ui 6.33.1 → 6.34.0

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),
     }),
   };
 };

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

@@ -1,5 +1,6 @@
 import type { SwitchVariant } from './Switch.base';
 import { alpha } from '../../../tokens/color';
+import { ABSOLUTE_INK, ELEVATION_SHADOWS, NEUTRAL_RAMP } from '../../../tokens/ink.core';
 import type { SizeValue } from '../../../tokens/vocabulary';
 
 /**
@@ -16,7 +17,7 @@ import type { SizeValue } from '../../../tokens/vocabulary';
  */
 
 /** MUI's `palette.common.black`, which `UiTheme` does not carry. */
-export const SWITCH_BLACK = '#000';
+export const SWITCH_BLACK = ABSOLUTE_INK.black;
 
 export interface SwitchGeometry {
   width: number;
@@ -82,8 +83,8 @@ export const thumbRadius = (look: SwitchLook, thumbSize: number): number => {
 export const THUMB_ELEVATION: Record<SwitchLook, number> = { ios: 0, android: 3, material: 2, default: 2 };
 
 export const MUI_SHADOWS: Record<number, string> = {
-  2: '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)',
-  3: '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
+  2: ELEVATION_SHADOWS[2],
+  3: ELEVATION_SHADOWS[3],
 };
 
 /** The iOS thumb's own three-layer shadow, which the web writes out literally. */
@@ -183,8 +184,12 @@ export const TAP_TARGET_MIN = 40;
  * from.
  */
 export const NEUTRAL_GREY = { main: 700, dark: 800, light: 500 } as const;
-export const NEUTRAL_FALLBACK = { main: '#616161', dark: '#424242', light: '#9e9e9e' } as const;
-export const NEUTRAL_CONTRAST = '#fff';
+export const NEUTRAL_FALLBACK = {
+  main: NEUTRAL_RAMP[NEUTRAL_GREY.main],
+  dark: NEUTRAL_RAMP[NEUTRAL_GREY.dark],
+  light: NEUTRAL_RAMP[NEUTRAL_GREY.light],
+} as const;
+export const NEUTRAL_CONTRAST = ABSOLUTE_INK.white;
 
 /**
  * The RESTING thumb — the knob while the switch is off (FUT-1924).
@@ -196,7 +201,7 @@ export const NEUTRAL_CONTRAST = '#fff';
  * does pick, and that is where a stated white was a defect. See `checkedInk`
  * in `Switch.styles.ts` and its native twin.
  */
-export const RESTING_THUMB = '#fff';
+export const RESTING_THUMB = ABSOLUTE_INK.white;
 
 /** Hover: the thumb lifts a shade and takes a halo of the hue. */
 export const SWITCH_HOVER = { thumbScale: 1.05, elevation: 4, blur: 12, alpha: 0.2 } as const;

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

@@ -17,8 +17,6 @@ import {
   SWITCH_GLASS,
   SWITCH_GLOW,
   NEUTRAL_CONTRAST,
-  NEUTRAL_FALLBACK,
-  NEUTRAL_GREY,
   SWITCH_FOCUS_RING,
   SWITCH_GRADIENT,
   SWITCH_HOVER,
@@ -42,6 +40,7 @@ import {
 } from './Switch.metrics';
 import type { SwitchVariant } from './Switch.base';
 
+import { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';
 import { inkOver, px } from '../../../tokens/theme';
 import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
 
@@ -55,13 +54,8 @@ interface ColorPalette {
   contrastText?: string;
 }
 
-/** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */
-const neutralPalette = (theme: Theme): ColorPalette => ({
-  main: theme.palette.grey?.[NEUTRAL_GREY.main] || NEUTRAL_FALLBACK.main,
-  dark: theme.palette.grey?.[NEUTRAL_GREY.dark] || NEUTRAL_FALLBACK.dark,
-  light: theme.palette.grey?.[NEUTRAL_GREY.light] || NEUTRAL_FALLBACK.light,
-  contrastText: NEUTRAL_CONTRAST,
-});
+/** `neutral` is not a MUI palette entry, so it is the controls' neutral tone. */
+const neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);
 
 /**
  * Resolves a colour name to a full palette, filling any step the theme leaves
@@ -238,7 +232,7 @@ const switchBaseSx = (
       color: palette.main,
       border: `${SWITCH_FOCUS_RING.width}px solid ${alpha(palette.main, SWITCH_FOCUS_RING.alpha)}`,
     },
-    '&.Mui-disabled .MuiSwitch-thumb': { color: theme.palette.grey[DISABLED.thumbGrey] },
+    '&.Mui-disabled .MuiSwitch-thumb': { color: neutralTones(theme).surface },
     '&.Mui-disabled + .MuiSwitch-track': { opacity: DISABLED.trackOpacity },
   };
 };
@@ -351,7 +345,7 @@ const trackSx = (
   return {
     borderRadius: TRACK_RADIUS[look](height),
     backgroundColor: trackColor(
-      { black: theme.palette.common.black, disabled: theme.palette.action.disabled },
+      { black: absoluteInk(theme).black, disabled: theme.palette.action.disabled },
       look,
     ),
     opacity: 1,

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

@@ -2,6 +2,7 @@ import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { absoluteInk, controlNeutral } from '../../../tokens/ink';
 
 const glowAnimation = keyframes`
   0% {
@@ -49,18 +50,8 @@ type ResolvedPalette = {
 
 type PartialPalette = { main: string; dark?: string; light?: string; contrastText?: string };
 
-// grey is indexed by weight rather than main/dark/light, so neutral is built by
-// hand. The literals are the MUI grey values, used if the theme omits a weight.
-const neutralPalette = (theme: Theme): ResolvedPalette => {
-  const grey = theme.palette.grey as unknown as Record<number, string>;
-
-  return {
-    main: grey?.[700] || '#616161',
-    dark: grey?.[800] || '#424242',
-    light: grey?.[500] || '#9e9e9e',
-    contrastText: '#fff',
-  };
-};
+// `neutral` is not a MUI palette entry, so it is the controls' neutral tone.
+const neutralPalette = (theme: Theme): ResolvedPalette => controlNeutral(theme);
 
 // Each slot falls back to the palette's own main, then to primary — a custom
 // theme can define main without dark or light.
@@ -71,7 +62,7 @@ const withFallbacks = (theme: Theme, palette: PartialPalette): ResolvedPalette =
   main: pick(palette?.main, theme.palette.primary.main),
   dark: pick(palette?.dark, palette?.main, theme.palette.primary.dark),
   light: pick(palette?.light, palette?.main, theme.palette.primary.light),
-  contrastText: pick(palette?.contrastText, '#fff'),
+  contrastText: pick(palette?.contrastText, absoluteInk(theme).white),
 });
 
 export const getColorFromTheme = (theme: Theme, color: string): ResolvedPalette => {

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

@@ -3,6 +3,7 @@ import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.
 
 import { fieldRadius } from '../../../tokens/field-radius';
 import { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';
+import { absoluteInk, controlNeutral, sheen } from '../../../tokens/ink';
 
 const glowAnimation = keyframes`
   0% { box-shadow: 0 0 5px currentColor; }
@@ -22,12 +23,7 @@ interface TogglePalette {
   contrastText: string;
 }
 
-const neutralPalette = (theme: Theme): TogglePalette => ({
-  main: theme.palette.grey?.[700] || '#616161',
-  dark: theme.palette.grey?.[800] || '#424242',
-  light: theme.palette.grey?.[500] || '#9e9e9e',
-  contrastText: '#fff',
-});
+const neutralPalette = (theme: Theme): TogglePalette => controlNeutral(theme);
 
 // A theme can be handed to us with shades missing, so each one falls back through
 // the palette's own main colour before reaching for primary.
@@ -56,7 +52,7 @@ export const getColorFromTheme = (theme: Theme, color: string): TogglePalette =>
     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,
   };
 };
 
@@ -116,7 +112,7 @@ export const baseStyles = (
 
   '&.Mui-selected': {
     backgroundColor: colorPalette.main,
-    color: colorPalette.contrastText || '#fff',
+    color: colorPalette.contrastText || absoluteInk(theme).white,
     borderColor: colorPalette.main,
     boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,
 
@@ -127,7 +123,7 @@ export const baseStyles = (
       left: 0,
       right: 0,
       bottom: 0,
-      background: `linear-gradient(135deg, transparent, ${alpha('#fff', 0.1)})`,
+      background: `linear-gradient(135deg, transparent, ${sheen(theme, 0.1)})`,
       pointerEvents: 'none',
     },
 
@@ -147,6 +143,7 @@ export const baseStyles = (
 });
 
 export const variantStyles = (
+  theme: Theme,
   customVariant: string | undefined,
   colorPalette: TogglePalette,
 ): CSSObject => {
@@ -159,7 +156,7 @@ export const variantStyles = (
 
         '&.Mui-selected': {
           backgroundColor: colorPalette.main,
-          color: colorPalette.contrastText || '#fff',
+          color: colorPalette.contrastText || absoluteInk(theme).white,
         },
       };
     case 'soft':

package/src/components/form/Toggle/Toggle.tsx

@@ -35,7 +35,7 @@ const StyledToggle = styled(ToggleButton, {
 
   return {
     ...baseStyles(theme, colorPalette, customSize),
-    ...variantStyles(customVariant, colorPalette),
+    ...variantStyles(theme, customVariant, colorPalette),
     ...effectStyles(theme, colorPalette, { glass, gradient, glow }),
   };
 });

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -9,18 +9,15 @@ import type { ToggleGroupProps } from './ToggleGroup.types';
 import { cssLengthToPx } from '../../../tokens/css-units';
 import { asFieldSize, fieldHeight } from '../../../tokens/field-height';
 import { fieldRadius } from '../../../tokens/field-radius';
+import { controlNeutral } from '../../../tokens/ink';
 
 const GLASS_PADDING = 4;
 const GLASS_BORDER = 1;
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
-    return {
-      main: theme.palette.grey[700],
-      dark: theme.palette.grey[800],
-      light: theme.palette.grey[500],
-      contrastText: theme.palette.getContrastText(theme.palette.grey[700]),
-    };
+    const neutral = controlNeutral(theme);
+    return { ...neutral, contrastText: theme.palette.getContrastText(neutral.main) };
   }
 
   const colorMap = {