@12-apps/ui 6.33.0 → 6.34.0

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 = {

package/src/components/form/UploadButton/UploadButton.parts.tsx

@@ -4,10 +4,21 @@ import Box from '@mui/material/Box/index.js';
 import Button from '@mui/material/Button/index.js';
 import LinearProgress from '@mui/material/LinearProgress/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { useTheme } from '@mui/material/styles/index.js';
+import { alpha, useTheme } from '@mui/material/styles/index.js';
 import type React from 'react';
 
 import type { DragHandlers } from './UploadButton.hooks';
+
+/*
+ * The tints the dropzone and the ghost button have always drawn — 0x0A, 0x05
+ * and 0x08 out of 0xFF — as `alpha()` opacities. They were hex-alpha suffixes
+ * glued onto `palette.primary.main`, which only works while the palette colour
+ * is a six-digit hex: an `rgb(…)` primary produced an invalid colour and no
+ * tint at all.
+ */
+const DRAG_OVER_TINT = 0x0a / 0xff;
+const HOVER_TINT = 0x05 / 0xff;
+const GHOST_HOVER_TINT = 0x08 / 0xff;
 import type { UploadButtonCopy } from '../../../copy';
 import type { UploadButtonProps } from './UploadButton.types';
 
@@ -48,12 +59,12 @@ export function UploadDropzone({
         padding: 3,
         textAlign: 'center',
         cursor: disabled ? 'not-allowed' : 'pointer',
-        backgroundColor: isDragOver ? `${theme.palette.primary.main}0A` : 'transparent',
+        backgroundColor: isDragOver ? alpha(theme.palette.primary.main, DRAG_OVER_TINT) : 'transparent',
         transition: 'all 0.2s ease-in-out',
         ...(!disabled && {
           '&:hover': {
             borderColor: theme.palette.primary.main,
-            backgroundColor: `${theme.palette.primary.main}05`,
+            backgroundColor: alpha(theme.palette.primary.main, HOVER_TINT),
           },
         }),
         opacity: disabled ? 0.6 : 1,
@@ -114,7 +125,7 @@ export function UploadTrigger({
       aria-describedby={describedBy}
       sx={{
         ...(variant === 'ghost' && {
-          '&:hover': { backgroundColor: `${theme.palette.primary.main}08` },
+          '&:hover': { backgroundColor: alpha(theme.palette.primary.main, GHOST_HOVER_TINT) },
         }),
       }}
     >

package/src/components/layout/Card/Card.metrics.ts

@@ -1,4 +1,6 @@
 import type { CardBorderRadius } from './Card.base';
+import { alpha } from '../../../tokens/color';
+import { ABSOLUTE_INK } from '../../../tokens/ink.core';
 import type { UiShadow } from '../../../tokens/shadow';
 
 /**
@@ -11,7 +13,8 @@ import type { UiShadow } from '../../../tokens/shadow';
  * hands the same shadow objects to `boxShadow` and the same numbers to a
  * `StyleSheet`.
  *
- * Nothing here imports a renderer, a theme or a colour: a shadow's COLOUR is
+ * Nothing here imports a renderer or a theme — its fixed inks are the
+ * renderer-free absolutes of `src/tokens/ink.core` — and a variant shadow's COLOUR is
  * the caller's, because the two sides reach for the same arithmetic through
  * different doors (`alpha` from `@mui/material/styles` on the web, from
  * `src/tokens/color` natively — a port of it, asserted equal).
@@ -52,9 +55,9 @@ export type CardShadow = UiShadow;
  * property and paints nothing — see {@link CARD_ELEVATION}.)
  */
 export const CARD_PAPER_SHADOW: readonly UiShadow[] = [
-  { offsetX: 0, offsetY: 2, blurRadius: 1, spreadDistance: -1, color: 'rgba(0, 0, 0, 0.2)' },
-  { offsetX: 0, offsetY: 1, blurRadius: 1, spreadDistance: 0, color: 'rgba(0, 0, 0, 0.14)' },
-  { offsetX: 0, offsetY: 1, blurRadius: 3, spreadDistance: 0, color: 'rgba(0, 0, 0, 0.12)' },
+  { offsetX: 0, offsetY: 2, blurRadius: 1, spreadDistance: -1, color: alpha(ABSOLUTE_INK.black, 0.2) },
+  { offsetX: 0, offsetY: 1, blurRadius: 1, spreadDistance: 0, color: alpha(ABSOLUTE_INK.black, 0.14) },
+  { offsetX: 0, offsetY: 1, blurRadius: 3, spreadDistance: 0, color: alpha(ABSOLUTE_INK.black, 0.12) },
 ];
 
 /**
@@ -111,8 +114,8 @@ export function neumorphicShadows(lifted: boolean, near: string, far: string): U
  * a recess in whatever surface it sits on.
  */
 export const CARD_SECTION_BACKGROUND = {
-  dark: { rest: 'rgba(0, 0, 0, 0.2)', lifted: 'rgba(0, 0, 0, 0.25)' },
-  light: { rest: 'rgba(0, 0, 0, 0.02)', lifted: 'rgba(0, 0, 0, 0.04)' },
+  dark: { rest: alpha(ABSOLUTE_INK.black, 0.2), lifted: alpha(ABSOLUTE_INK.black, 0.25) },
+  light: { rest: alpha(ABSOLUTE_INK.black, 0.02), lifted: alpha(ABSOLUTE_INK.black, 0.04) },
 } as const;
 
 /* ── Decorations ──────────────────────────────────────────────────────────── */

package/src/components/layout/Card/Card.styles.ts

@@ -16,6 +16,7 @@ import {
   CARD_SECTION_BACKGROUND,
   neumorphicShadows,
 } from './Card.metrics';
+import { neutralTones, shadowInk, sheen } from '../../../tokens/ink';
 import { shadowCss, shadowListCss } from '../../../tokens/shadow';
 
 type BorderRadius = CardBorderRadius;
@@ -68,12 +69,12 @@ const neumorphicShadow = (theme: Theme, lifted: boolean): string => {
   const [near, far] =
     theme.palette.mode === 'dark'
       ? [
-          alpha(theme.palette.common.black, dark.near),
-          alpha(theme.palette.common.white, dark.far),
+          shadowInk(theme, dark.near),
+          sheen(theme, dark.far),
         ]
       : [
-          alpha(theme.palette.grey[400], lifted ? light.near.lifted : light.near.rest),
-          alpha(theme.palette.common.white, lifted ? light.far.lifted : light.far.rest),
+          alpha(neutralTones(theme).subtle, lifted ? light.near.lifted : light.near.rest),
+          sheen(theme, lifted ? light.far.lifted : light.far.rest),
         ];
 
   return shadowListCss(neumorphicShadows(lifted, near, far));
@@ -127,7 +128,7 @@ const VARIANT_SURFACES: Record<CardVariant, (theme: Theme, lifted: boolean) => S
         offsetY: CARD_GLASS.shadow.offsetY,
         blurRadius: CARD_GLASS.shadow.blurRadius,
         spreadDistance: 0,
-        color: alpha(theme.palette.common.black, CARD_GLASS.shadow.alpha),
+        color: shadowInk(theme, CARD_GLASS.shadow.alpha),
       }),
     },
     hover: {
@@ -155,7 +156,7 @@ const VARIANT_SURFACES: Record<CardVariant, (theme: Theme, lifted: boolean) => S
   neumorphic: (theme, lifted) => ({
     surface: {
       backgroundColor:
-        theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
+        theme.palette.mode === 'dark' ? neutralTones(theme).raised : neutralTones(theme).surface,
       boxShadow: neumorphicShadow(theme, false),
       border: 'none',
     },

package/src/components/layout/Drawer/Drawer.tsx

@@ -8,6 +8,7 @@ import { alpha, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { DrawerContentProps,DrawerHeaderProps, DrawerProps } from './Drawer.types';
+import { shadowInk } from '../../../tokens/ink';
 
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
 
@@ -61,7 +62,7 @@ const buildDrawerStyles = (
         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)}`,
         ...paperSx,
       },
     };

package/src/components/layout/ScrollArea/ScrollArea.styles.ts

@@ -2,6 +2,7 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { alpha } from '@mui/material/styles/index.js';
 
 import type { ScrollAreaProps } from './ScrollArea.types';
+import { neutralTones, sheen } from '../../../tokens/ink';
 
 const SCROLLBAR_SIZES: Record<string, number> = {
   thin: 8,
@@ -29,15 +30,15 @@ const getScrollbarColors = ({
     variant === 'glass'
       ? alpha(theme.palette.primary.main, 0.5)
       : theme.palette.mode === 'dark'
-        ? theme.palette.grey[600]
-        : theme.palette.grey[400];
+        ? neutralTones(theme).emphasis
+        : neutralTones(theme).subtle;
 
   const defaultTrackColor =
     variant === 'glass'
       ? alpha(theme.palette.background.paper, 0.1)
       : theme.palette.mode === 'dark'
-        ? theme.palette.grey[900]
-        : theme.palette.grey[200];
+        ? neutralTones(theme).inverseSurface
+        : neutralTones(theme).faint;
 
   return {
     scrollbar: scrollbarColor || defaultScrollbarColor,
@@ -200,7 +201,7 @@ const VARIANT_SCROLLBARS: Record<string, (args: VariantArgs) => CSSObject> = {
       '&::-webkit-scrollbar-thumb': {
         ...(base['&::-webkit-scrollbar-thumb'] as object),
         boxShadow: shouldShowScrollbar
-          ? `inset 0 0 6px ${alpha(theme.palette.common.white, 0.3)}`
+          ? `inset 0 0 6px ${sheen(theme, 0.3)}`
           : 'none',
       },
       scrollbarColor: shouldShowScrollbar

package/src/components/layout/Separator/Separator.styles.ts

@@ -92,6 +92,25 @@ type SeparatorStyleArgs = Required<
 > &
   Pick<SeparatorProps, 'color' | 'margin' | 'length'>;
 
+/**
+ * The separator's margin, on the axis it separates along only: above and below
+ * a horizontal rule, either side of a vertical one. A margin given as a string
+ * carries its own units; a number is pixels.
+ *
+ * The LABELLED separator uses this too. It used to hand the number straight to
+ * `sx.margin`, where a number is SPACING UNITS — `md`'s 16 drew 128px on all
+ * four sides, against 16px above and below for the unlabelled one.
+ */
+export const separatorBlockMargin = (
+  size: SeparatorSize,
+  margin: number | string | undefined,
+  isHorizontal: boolean,
+): string => {
+  const value = separatorMargin(size, margin);
+  const length = typeof value === 'string' ? value : `${value}px`;
+  return isHorizontal ? `${length} 0` : `0 ${length}`;
+};
+
 export const separatorStyles = (
   theme: Theme,
   { variant, orientation, size, color, margin, length }: SeparatorStyleArgs,
@@ -100,14 +119,10 @@ export const separatorStyles = (
   const thickness = separatorThickness(size);
   const resolvedColor = color || theme.palette.divider;
 
-  // A margin given as a string carries its own units; a number is pixels.
-  const marginValue = separatorMargin(size, margin);
-  const marginStr = typeof marginValue === 'string' ? marginValue : `${marginValue}px`;
-
   const baseStyles: CSSObject = {
     display: 'flex',
     alignItems: 'center',
-    margin: isHorizontal ? `${marginStr} 0` : `0 ${marginStr}`,
+    margin: separatorBlockMargin(size, margin, isHorizontal),
     width: isHorizontal ? length || '100%' : `${thickness}px`,
     height: isHorizontal ? `${thickness}px` : length || '100%',
     boxSizing: 'border-box',

package/src/components/layout/Separator/Separator.tsx

@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import { separatorMargin, separatorStyles } from './Separator.styles';
+import { separatorBlockMargin, separatorStyles } from './Separator.styles';
 import type { SeparatorProps } from './Separator.types';
 
 export const Separator: React.FC<SeparatorProps> = ({
@@ -22,6 +22,9 @@ export const Separator: React.FC<SeparatorProps> = ({
 
   if (children) {
     const isHorizontal = orientation === 'horizontal';
+    // The rules either side of the label sit INSIDE the row, which carries the
+    // margin; their own would add it a second time.
+    const ruleStyles = { ...styles, margin: 0 };
 
     return (
       <Box
@@ -33,12 +36,12 @@ export const Separator: React.FC<SeparatorProps> = ({
         sx={{
           display: 'flex',
           alignItems: 'center',
-          margin: separatorMargin(size, margin),
+          margin: separatorBlockMargin(size, margin, isHorizontal),
           flexDirection: isHorizontal ? 'row' : 'column',
           gap: theme.spacing(2),
         }}
       >
-        <Box sx={styles} />
+        <Box sx={ruleStyles} />
         {/*
           No background behind the label. The two rules and the words are a FLEX
           ROW — the rules stop where the label starts — so there is nothing for a
@@ -53,7 +56,7 @@ export const Separator: React.FC<SeparatorProps> = ({
         >
           {children}
         </Typography>
-        <Box sx={styles} />
+        <Box sx={ruleStyles} />
       </Box>
     );
   }

package/src/components/layout/SettingsLayout/SettingsLayout.items.tsx

@@ -166,7 +166,9 @@ function indexListSx(shape: RailShape) {
   return (theme: import('@mui/material').Theme) => ({
     display: 'grid',
     gridTemplateColumns: '1fr',
-    columnGap: 8,
+    // One spacing unit (8px). This is an `sx` callback, where a bare 8 is
+    // EIGHT units — it drew a 64px gutter between the two columns.
+    columnGap: 1,
     [theme.breakpoints.up('sm')]: { gridTemplateColumns: '1fr 1fr' },
     [atLeastRail(theme, shape.breakpoint)]: { gridTemplateColumns: '1fr' },
   });

package/src/components/layout/Sidebar/Sidebar.tsx

@@ -8,6 +8,7 @@ import type {
   SidebarHeaderProps,
   SidebarProps,
 } from './Sidebar.types';
+import { shadowInk } from '../../../tokens/ink';
 
 export const Sidebar: React.FC<SidebarProps> = ({
   children,
@@ -45,7 +46,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
           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 'collapsible':
         return {

package/src/components/layout/Skeleton/Skeleton.metrics.ts

@@ -1,4 +1,5 @@
 import type { SkeletonIntensity, SkeletonVariant } from './Skeleton.base';
+import { ABSOLUTE_INK } from '../../../tokens/ink.core';
 
 /**
  * THE NUMBERS BOTH `Skeleton` RENDERERS DRAW WITH.
@@ -53,10 +54,11 @@ export const SHIMMER_DURATION_MS = 2000;
 
 /**
  * MUI's `palette.common`, which is a pair of fixed hexes rather than anything
- * derived — so the shared theme has no slot for them and they are named here.
+ * derived — so the shared theme has no slot for them: the renderer-free
+ * absolutes stand in (`src/tokens/ink.core.ts`).
  */
-export const COMMON_BLACK = '#000';
-export const COMMON_WHITE = '#fff';
+export const COMMON_BLACK = ABSOLUTE_INK.black;
+export const COMMON_WHITE = ABSOLUTE_INK.white;
 
 /* ── MUI's own `Skeleton`, restated for the renderer that has no MUI ──────── */
 

package/src/components/layout/Skeleton/Skeleton.styles.ts

@@ -13,6 +13,7 @@ import {
   SKELETON_DEFAULT_DIMENSIONS,
   SKELETON_INTENSITY_OPACITY,
 } from './Skeleton.metrics';
+import { modeInk, shadowInk, sheen } from '../../../tokens/ink';
 
 type SkeletonVariant = NonNullable<SkeletonProps['variant']>;
 type SkeletonIntensity = NonNullable<SkeletonProps['intensity']>;
@@ -58,7 +59,7 @@ const glassmorphismStyles = (theme: Theme): CSSObject => ({
         ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_TO)} 100%)`,
   backdropFilter: `blur(${GLASS_BLUR_PX}px)`,
   border: `1px solid ${alpha(theme.palette.divider, GLASS_BORDER_ALPHA)}`,
-  boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${alpha(theme.palette.common.black, GLASS_SHADOW.alpha)}`,
+  boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${shadowInk(theme, GLASS_SHADOW.alpha)}`,
 });
 
 // The sweep is a pseudo-element sliding across the box, so the box has to clip it
@@ -74,7 +75,7 @@ const shimmerStyles = (theme: Theme): CSSObject => ({
     background: `linear-gradient(
           90deg,
           transparent,
-          ${alpha(theme.palette.common.white, SHIMMER_ALPHA)},
+          ${sheen(theme, SHIMMER_ALPHA)},
           transparent
         )`,
     transform: 'translateX(-100%)',
@@ -101,7 +102,7 @@ export const skeletonStyles = (
 ): CSSObject => ({
   borderRadius,
   backgroundColor: alpha(
-    theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.text.primary,
+    theme.palette.mode === 'dark' ? modeInk(theme) : theme.palette.text.primary,
     intensityOpacity(intensity),
   ),
   ...(shimmer && {

package/src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import { breadcrumbLinkStyles } from './Breadcrumbs.styles';
 import type { BreadcrumbItem } from './Breadcrumbs.types';
 import type { BreadcrumbCopy } from '../../../copy';
+import { sheen, uiInk } from '../../../tokens/ink';
 
 const BreadcrumbLink = styled(Link, {
   shouldForwardProp: (prop) => prop !== 'size' && prop !== 'active' && prop !== 'visualStyle' })<{ size?: string; active?: boolean; visualStyle?: string }>(
@@ -60,8 +61,8 @@ const CollapsedItemsPopover: React.FC<{
       sx={{
         background: (theme) =>
           theme.palette.mode === 'dark'
-            ? 'rgba(17, 24, 39, 0.95)'
-            : 'rgba(255, 255, 255, 0.95)',
+            ? alpha(uiInk(theme).glassSlate, 0.95)
+            : sheen(theme, 0.95),
         backdropFilter: 'blur(10px)',
         borderRadius: 1,
         boxShadow: 3,