From 2c9f536e6f577bbe52d3f7d9cb701fec99fc9870 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 15 Aug 2026 22:01:34 +0000
Subject: [PATCH] Mix hover and pressed fills with color-mix instead of
 gradient washes.

Recipes now assign background-color: color-mix(in srgb, <fill>, <overlay source>)
at the shared 5% and 10% strengths. Contrast validation runs that same sRGB mix.
Public overlay.hover and overlay.pressed alias the high-contrast neutral source.

Co-authored-by: Luke Bennett <hello@lukebennett.com.au>
---
 .../content/docs/docs/authoring-a-theme.mdx   |  7 +-
 apps/docs/content/docs/docs/color.mdx         | 45 ++++++-------
 .../content/docs/docs/token-reference.mdx     |  8 +--
 apps/docs/src/lib/token-purpose-groups.ts     |  4 +-
 apps/docs/src/styles/app.css                  |  4 +-
 docs/DOCUMENTATION.md                         |  2 +-
 docs/STYLING.md                               |  5 +-
 docs/THEME_COLOUR_GENERATION.md               | 26 ++++----
 .../react/src/button/button.visual.test.tsx   | 23 +------
 .../src/checkbox/checkbox.visual.test.tsx     | 58 -----------------
 .../combobox-field.visual.test.tsx            | 21 ------
 .../icon-button/icon-button.visual.test.tsx   | 28 --------
 .../react/src/primitives/button/recipe.css.ts | 14 ++--
 .../src/primitives/checkbox/recipe.css.ts     | 38 +++++++++--
 .../src/primitives/combobox/styles.css.ts     | 19 ++++--
 .../react/src/styles/interaction-fill.ts      | 12 ++++
 .../src/theme/__fixtures__/radix-scales.ts    | 19 +++---
 .../react/src/theme/build-theme.test.ts       |  8 +--
 .../@luke-ui/react/src/theme/color.test.ts    | 12 ++--
 packages/@luke-ui/react/src/theme/color.ts    | 30 ++++-----
 .../@luke-ui/react/src/theme/contract.test.ts |  3 +-
 packages/@luke-ui/react/src/theme/contract.ts |  4 +-
 .../src/theme/contrast-validation.test.ts     | 63 +++++++-----------
 .../react/src/theme/contrast-validation.ts    | 65 ++++++++-----------
 .../@luke-ui/react/src/theme/diagnostics.ts   |  2 +-
 .../src/theme/interaction-overlay.test.ts     | 26 ++++++++
 .../react/src/theme/interaction-overlay.ts    | 41 ++++++++++++
 .../@luke-ui/react/src/theme/scale.test.ts    | 42 +++++-------
 packages/@luke-ui/react/src/theme/scale.ts    | 26 ++++----
 .../react/src/theme/semantic-map.test.ts      | 30 ++-------
 .../@luke-ui/react/src/theme/semantic-map.ts  | 26 ++------
 .../react/src/theme/stylesheet.test.ts        |  9 +--
 .../@luke-ui/react/src/theme/token-board.tsx  | 18 ++++-
 33 files changed, 327 insertions(+), 411 deletions(-)
 create mode 100644 packages/@luke-ui/react/src/styles/interaction-fill.ts
 create mode 100644 packages/@luke-ui/react/src/theme/interaction-overlay.test.ts
 create mode 100644 packages/@luke-ui/react/src/theme/interaction-overlay.ts

diff --git a/apps/docs/content/docs/docs/authoring-a-theme.mdx b/apps/docs/content/docs/docs/authoring-a-theme.mdx
index d026fe8e..0b8263a1 100644
--- a/apps/docs/content/docs/docs/authoring-a-theme.mdx
+++ b/apps/docs/content/docs/docs/authoring-a-theme.mdx
@@ -25,8 +25,9 @@ A basic theme authors an accent colour and a neutral character. Everything else
 Each colour accepts one string, adapted independently for light and dark, or an explicit
 `{ light, dark }` pair. Omit either side to fall back to that role's default. Luke UI supplies
 accessible mode-specific defaults for every optional colour. `color.backdrop` is the one colour that
-may include alpha, and Luke UI emits it verbatim. The interaction tint is generated per mode, not
-authored. `radius` is a generative `base` and `multiplier` scale with explicit per-step overrides.
+may include alpha, and Luke UI emits it verbatim. Hover and pressed interaction colours are
+generated per mode, not authored. `radius` is a generative `base` and `multiplier` scale with
+explicit per-step overrides.
 `depth` and `actionControlFinish` are optional and deep-partial per mode over curated,
 extremely-subtle defaults. The typography styles and motion values are source-owned and are not
 authored.
@@ -105,7 +106,7 @@ Every text/surface pair the compiler emits is a hard gate:
   its foreground `rest` and `hover` against `canvas`, `recessed`, and that role's own `subtle`
   background.
 - Each role's `onSolid` foreground against its `solid` background.
-- The first-party contracts that paint `color.overlay.hover` or `color.overlay.pressed` over a
+- The first-party contracts that mix `color.overlay.hover` or `color.overlay.pressed` into a
   resting fill: ghost Button foregrounds on canvas and recessed; solid and subtle Button tones;
   selected Combobox options on accent subtle; unselected Combobox options on the floating popover.
 
diff --git a/apps/docs/content/docs/docs/color.mdx b/apps/docs/content/docs/docs/color.mdx
index 574d79b7..83d59ddc 100644
--- a/apps/docs/content/docs/docs/color.mdx
+++ b/apps/docs/content/docs/docs/color.mdx
@@ -11,26 +11,26 @@ mode. A component then stays consistent, because it does not need to know the un
 
 Surface roles describe where an element sits in the interface:
 
-- `canvas`: the page.
-- `recessed`: an inset area.
-- `floating`: elevated UI, such as menus and cards.
-- `overlay`: dialogs and other high-elevation surfaces. This is an opaque colour.
+- `color.surface.canvas`: the page.
+- `color.surface.recessed`: an inset area.
+- `color.surface.floating`: elevated UI, such as menus and cards.
+- `color.surface.overlay`: dialogs and other high-elevation surfaces. This is an opaque colour.
 
 `color.overlay.backdrop` dims content behind a modal. `color.overlay.hover` and
-`color.overlay.pressed` are translucent neutral interaction washes. They live on `color.overlay`,
-not on `color.surface.overlay`.
+`color.overlay.pressed` are the generated interaction sources recipes mix into the current fill.
+They live on `color.overlay`, not on `color.surface.overlay`.
 
-Semantic backgrounds describe meaning and resting state. Overlay washes describe transient hover and
-pressed feedback. Layer the overlay over the fill the control already has: a solid accent button
-keeps its accent solid background, a selected option keeps its selected fill, and an invalid control
-keeps its danger styling. The overlay does not replace those states.
+Semantic backgrounds describe meaning and resting state. Interaction overlays describe transient
+hover and pressed feedback. Mix the overlay source into the fill the control already has: a solid
+accent button keeps its accent solid background, a selected option keeps its selected fill, and an
+invalid control keeps its danger styling. The interaction colour does not replace those states.
 
 Do not use overlays for focus-visible or disabled. Focus keeps `color.border.focus`. Disabled is a
 state, not an interaction wash.
 
 Prefer a component's state API when the component has one. When you style a custom interactive
-element, keep the semantic background for meaning and apply `color.overlay.hover` or
-`color.overlay.pressed` on top.
+element, keep the semantic background for meaning and mix `color.overlay.hover` or
+`color.overlay.pressed` into that fill.
 
 Text uses `primary` and `secondary` roles. Borders distinguish decorative, control, and focus uses.
 
@@ -70,7 +70,7 @@ stays constant, so only the role and mode change its colours.
 ### Background and foreground
 
 Each role has a `subtle` and a `solid` background. Those fills are resting colours. Transient hover
-and pressed feedback uses `color.overlay.hover` and `color.overlay.pressed` over that fill:
+and pressed feedback mixes `color.overlay.hover` or `color.overlay.pressed` into that fill:
 
 ```tsx
 import { vars } from '@luke-ui/react/theme';
@@ -89,8 +89,9 @@ vars.color.foreground.warning.hover;
 vars.color.foreground.warning.onSolid;
 ```
 
-There is no foreground `pressed`. Overlay washes and other non-colour cues carry a pressed look, so
-text and icons reuse `hover` for a pressed control whose content colour changes, such as a link.
+There is no foreground `pressed`. Interaction overlays and other non-colour cues carry a pressed
+look, so text and icons reuse `hover` for a pressed control whose content colour changes, such as a
+link.
 
 ### Borders
 
@@ -122,11 +123,11 @@ equivalent:
 | Old path                                    | New path                                                      |
 | ------------------------------------------- | ------------------------------------------------------------- |
 | `color.intent.<role>.surface.subtle`        | `color.background.<role>.subtle`                              |
-| `color.intent.<role>.surface.subtleHover`   | `color.overlay.hover` over `color.background.<role>.subtle`   |
-| `color.intent.<role>.surface.subtlePressed` | `color.overlay.pressed` over `color.background.<role>.subtle` |
-| `color.intent.<role>.surface.solid`         | `color.background.<role>.solid`                               |
-| `color.intent.<role>.surface.solidHover`    | `color.overlay.hover` over `color.background.<role>.solid`    |
-| `color.intent.<role>.surface.solidPressed`  | `color.overlay.pressed` over `color.background.<role>.solid`  |
+| `color.intent.<role>.surface.subtleHover`   | `color.overlay.hover` mixed into `color.background.<role>.subtle`   |
+| `color.intent.<role>.surface.subtlePressed` | `color.overlay.pressed` mixed into `color.background.<role>.subtle` |
+| `color.intent.<role>.surface.solid`         | `color.background.<role>.solid`                                    |
+| `color.intent.<role>.surface.solidHover`    | `color.overlay.hover` mixed into `color.background.<role>.solid`    |
+| `color.intent.<role>.surface.solidPressed`  | `color.overlay.pressed` mixed into `color.background.<role>.solid`  |
 | `color.intent.<role>.text`                  | `color.foreground.<role>.rest`                                |
 | `color.intent.<role>.textHover`             | `color.foreground.<role>.hover`                               |
 | `color.intent.<role>.onSolid`               | `color.foreground.<role>.onSolid`                             |
@@ -138,8 +139,8 @@ CSS variable names followed the same shape, so `--luke-color-intent-danger-surfa
 
 The current contract also carries capabilities `color.intent` never had. It adds a foreground and
 border for `neutral`. It also adds on-solid foregrounds for `info`, `success`, and `warning`. Hover
-and pressed background ramps from `color.intent` have no replacement leaves: layer
-`color.overlay.hover` or `color.overlay.pressed` over the resting subtle or solid fill.
+and pressed background ramps from `color.intent` have no replacement leaves: mix
+`color.overlay.hover` or `color.overlay.pressed` into the resting subtle or solid fill.
 
 ## Continue learning
 
diff --git a/apps/docs/content/docs/docs/token-reference.mdx b/apps/docs/content/docs/docs/token-reference.mdx
index 59b36697..da8fa751 100644
--- a/apps/docs/content/docs/docs/token-reference.mdx
+++ b/apps/docs/content/docs/docs/token-reference.mdx
@@ -67,10 +67,10 @@ Depth describes how a surface sits above or within the interface.
 
 <ExampleBlock src="overview/depth" title="Token reference — Depth scale" />
 
-Pair each depth role with the matching surface role. For example, a menu can use `surface.floating`
-with `depth.floating`, while a dialog can use `surface.overlay` with `depth.overlay`.
-`color.overlay` is a different group: the translucent backdrop and interaction washes. It is not a
-surface colour and not a shadow.
+Pair each depth role with the matching surface role. For example, a menu can use
+`color.surface.floating` with `depth.floating`, while a dialog can use `color.surface.overlay` with
+`depth.overlay`. `color.overlay` is a different group: the translucent backdrop and the generated
+interaction sources. It is not a surface colour and not a shadow.
 
 Components already apply depth to their own states. Use these variables only for custom surfaces.
 
diff --git a/apps/docs/src/lib/token-purpose-groups.ts b/apps/docs/src/lib/token-purpose-groups.ts
index 7ca62b9b..af521c68 100644
--- a/apps/docs/src/lib/token-purpose-groups.ts
+++ b/apps/docs/src/lib/token-purpose-groups.ts
@@ -88,7 +88,7 @@ const PURPOSE_DEFINITIONS = [
 	},
 	{
 		description:
-			'Transient hover and pressed washes, plus state effects a control applies to its own material.',
+			'Transient hover and pressed interaction sources, plus state effects a control applies to its own material.',
 		id: 'interaction',
 		related: null,
 		showSamples: true,
@@ -140,7 +140,7 @@ function resolveColorPurpose(path: string): TokenPurposeId | undefined {
 		return leaf !== undefined && STRUCTURAL_BORDERS.has(leaf) ? 'borders' : 'roles';
 	}
 	// `backdrop` is a dimming layer, so it belongs with the surfaces; hover and pressed are
-	// interaction washes.
+	// interaction sources.
 	if (section === 'overlay') {
 		return leaf === 'backdrop' ? 'surfaces' : 'interaction';
 	}
diff --git a/apps/docs/src/styles/app.css b/apps/docs/src/styles/app.css
index 9d15a028..b6205202 100644
--- a/apps/docs/src/styles/app.css
+++ b/apps/docs/src/styles/app.css
@@ -29,10 +29,10 @@ code > * {
 	--color-fd-primary-foreground: var(--luke-color-foreground-accent-on-solid);
 	--color-fd-secondary: var(--luke-color-surface-raised);
 	--color-fd-secondary-foreground: var(--luke-color-text-primary);
-	--color-fd-accent: var(--luke-color-overlay-hover);
+	--color-fd-accent: var(--luke-color-background-neutral-subtle);
 	--color-fd-accent-foreground: var(--luke-color-text-primary);
 	--color-fd-ring: var(--luke-color-border-focus);
-	--color-fd-overlay: var(--luke-color-surface-overlay);
+	--color-fd-overlay: var(--luke-color-overlay-backdrop);
 }
 
 /* Keep Fumadocs' 28px DocsTitle with Luke UI's matching 36px line height */
diff --git a/docs/DOCUMENTATION.md b/docs/DOCUMENTATION.md
index e2ec6c76..8bd3ffd3 100644
--- a/docs/DOCUMENTATION.md
+++ b/docs/DOCUMENTATION.md
@@ -50,7 +50,7 @@ Keep the detail that changes the reader's code:
 
 - `Button` sizes a nested `Icon`, so an icon needs no `size` prop.
 - A field component takes no plain `ref`, so `inputRef` is the only way to reach the control.
-- Hover and pressed use `color.overlay` over the current semantic fill, so a custom control should
+- Hover and pressed mix `color.overlay` into the current semantic fill, so a custom control should
   not pick a different background token to mean hovered or pressed.
 
 Cut the detail that only explains the mechanism:
diff --git a/docs/STYLING.md b/docs/STYLING.md
index 9320bb80..15743ec9 100644
--- a/docs/STYLING.md
+++ b/docs/STYLING.md
@@ -127,8 +127,9 @@ instead of deriving them from strength multipliers and hidden formulas.
 
 Each mode also authors final `background-image` values for `actionControlFinish.resting`,
 `actionControlFinish.raised`, and `actionControlFinish.recessed`. Button and IconButton layer this
-face lighting over their semantic surface colour. Ghost controls and forced-colours rendering do not
-use the authored finish.
+face lighting over their semantic surface colour. Hover and pressed change `background-color` by
+mixing `color.overlay` into that fill. Ghost controls and forced-colours rendering do not use the
+authored finish.
 
 Use `deriveConcentricRadius(innerRadius, gap)` for rounded elements nested inside another rounded
 surface. It returns a CSS `calc()` value for the outer radius, so both inputs can be semantic theme
diff --git a/docs/THEME_COLOUR_GENERATION.md b/docs/THEME_COLOUR_GENERATION.md
index cacb8ec0..2cdb0b38 100644
--- a/docs/THEME_COLOUR_GENERATION.md
+++ b/docs/THEME_COLOUR_GENERATION.md
@@ -20,7 +20,7 @@ Per colour mode, `compileTheme` (in `build-theme.ts`):
    `background` — canvas IS the background, not a derived value.
 4. Applies the one default semantic mapping (`semantic-map.ts`'s `mapSemanticColors`) that aliases
    every colour contract leaf onto a family step or a generated surface, passes the authored
-   backdrop through, and generates the two interaction overlay washes.
+   backdrop through, and aliases the two interaction overlay sources to the high-contrast neutral.
 5. Runs the full WCAG 2.2 validation matrix (`validateContrast`), which stays authoritative and
    throws `ThemeContrastError` on a hard-gate miss.
 
@@ -104,10 +104,9 @@ Accent adaptation is forgiving but never sacrifices the AA on-solid guarantee:
 `scale.ts`'s `passesOnSolidGate` is the only function that decides whether a solid can carry
 readable text. It asks whether the near-white or near-black on-solid colour the generator would
 choose clears the AA text ratio plus the search headroom against the public resting solid (step 9).
-Step 10 remains in the private 12-step family so the scale keeps its shape. It is not a hover,
-solid-hover, or pressed colour. Public hover and pressed feedback uses `color.overlay` over the
-resting solid fill, plus depth, finish, and transform. Those composited pairs are hard-gated by
-`validateContrast`.
+Step 10 remains in the private 12-step family so the scale keeps its shape. It is not a rendered
+interaction colour. Public hover and pressed feedback mixes `color.overlay` into the resting solid
+fill, plus depth, finish, and transform. Those mixed fills are hard-gated by `validateContrast`.
 
 `defineTheme`'s `adaptAccent` pre-conditioner calls that same function rather than keeping its own
 copy. That gives two guarantees:
@@ -133,13 +132,14 @@ loading state against typical surfaces.
 
 ## Interaction overlays
 
-Luke UI generates two narrow semantic interaction overlays from the high-contrast neutral (family
-step 12), mixed with transparent: `color.overlay.hover` at 5% and `color.overlay.pressed` at 10%.
-The authored modal backdrop stays separate as `color.overlay.backdrop`. There is no generated
+Luke UI generates two interaction overlay sources from the high-contrast neutral
+(`families.neutral[12]`). `color.overlay.hover` and `color.overlay.pressed` both alias that source.
+Recipes mix it into the current semantic fill at the shared strengths in `interaction-overlay.ts`:
+hover at 5% and pressed at 10%, as `color-mix(in srgb, <fill> <100-N>%, <source> <N>%)`. The
+authored modal backdrop stays separate as `color.overlay.backdrop`. There is no generated
 per-family alpha track, and the public contract has no per-role background hover or pressed leaves.
 
-`validateContrast` treats each wash as a translucent colour (the `color-mix()` with transparent),
-paints it over the resting fills first-party components actually use, then measures the matching
-foregrounds against that opaque result. A `color-mix()` value is never parsed as an opaque colour.
-The pairs are ghost Button foregrounds over canvas and recessed, solid and subtle Button tones,
-selected Combobox options over accent subtle, and unselected Combobox options over floating.
+`validateContrast` runs the same sRGB mix the recipes emit, then measures the matching foregrounds
+against that result. The pairs are ghost Button foregrounds over canvas and recessed, solid and
+subtle Button tones, selected Combobox options over accent subtle, and unselected Combobox options
+over floating.
diff --git a/packages/@luke-ui/react/src/button/button.visual.test.tsx b/packages/@luke-ui/react/src/button/button.visual.test.tsx
index 55fccaa9..1f12b812 100644
--- a/packages/@luke-ui/react/src/button/button.visual.test.tsx
+++ b/packages/@luke-ui/react/src/button/button.visual.test.tsx
@@ -88,7 +88,7 @@ test('ghost interactive states', async () => {
 	await userEvent.keyboard('{/Space}');
 });
 
-test('ghost interactive states in dark mode', async () => {
+test('ghost hover in dark mode', async () => {
 	render(<Button appearance="ghost">Action</Button>, {
 		appearance: { mode: 'dark', theme: 'tactile' },
 	});
@@ -96,11 +96,6 @@ test('ghost interactive states in dark mode', async () => {
 
 	await userEvent.hover(button);
 	await captureVisual(button, 'button/ghost-hover-tactile-dark');
-	await userEvent.unhover(button);
-	await focusViaKeyboard(button);
-	await userEvent.keyboard('{Space>}');
-	await captureVisual(button, 'button/ghost-pressed-tactile-dark');
-	await userEvent.keyboard('{/Space}');
 });
 
 test('overlay over solid accent', async () => {
@@ -120,22 +115,6 @@ test('overlay over solid accent', async () => {
 	await userEvent.keyboard('{/Space}');
 });
 
-test('overlay over solid accent in dark mode', async () => {
-	render(
-		<Button appearance="solid" tone="accent">
-			Save
-		</Button>,
-		{
-			appearance: { mode: 'dark', theme: 'tactile' },
-		},
-	);
-	const button = page.getByRole('button', { name: 'Save' });
-
-	await userEvent.hover(button);
-	await captureVisual(button, 'button/solid-accent-hover-tactile-dark');
-	await userEvent.unhover(button);
-});
-
 test('overlay over subtle danger', async () => {
 	render(
 		<Button appearance="subtle" tone="danger">
diff --git a/packages/@luke-ui/react/src/checkbox/checkbox.visual.test.tsx b/packages/@luke-ui/react/src/checkbox/checkbox.visual.test.tsx
index e97c3b9d..14df3bb4 100644
--- a/packages/@luke-ui/react/src/checkbox/checkbox.visual.test.tsx
+++ b/packages/@luke-ui/react/src/checkbox/checkbox.visual.test.tsx
@@ -111,64 +111,6 @@ test('interactive states', async () => {
 	}
 });
 
-test('unchecked interactive states', async () => {
-	render(<Checkbox name="terms">Accept terms</Checkbox>);
-	const checkbox = page.getByRole('checkbox', { name: 'Accept terms' });
-	const label = page.elementLocator(checkboxLabel(checkbox));
-
-	await userEvent.hover(checkboxLabel(checkbox));
-	await captureVisual(label, 'checkbox/unchecked-hover');
-	await userEvent.unhover(checkboxLabel(checkbox));
-	await pressCheckbox(checkbox);
-	await captureVisual(label, 'checkbox/unchecked-pressed');
-	await userEvent.keyboard('{/Space}');
-});
-
-test('unchecked interactive states in dark mode', async () => {
-	render(<Checkbox name="terms">Accept terms</Checkbox>, {
-		appearance: { mode: 'dark', theme: 'tactile' },
-	});
-	const checkbox = page.getByRole('checkbox', { name: 'Accept terms' });
-	const label = page.elementLocator(checkboxLabel(checkbox));
-
-	await userEvent.hover(checkboxLabel(checkbox));
-	await captureVisual(label, 'checkbox/unchecked-hover-tactile-dark');
-	await userEvent.unhover(checkboxLabel(checkbox));
-	await pressCheckbox(checkbox);
-	await captureVisual(label, 'checkbox/unchecked-pressed-tactile-dark');
-	await userEvent.keyboard('{/Space}');
-});
-
-test('selected interactive states', async () => {
-	render(
-		<Checkbox defaultSelected name="terms">
-			Accept terms
-		</Checkbox>,
-	);
-	const checkbox = page.getByRole('checkbox', { name: 'Accept terms' });
-	const label = page.elementLocator(checkboxLabel(checkbox));
-
-	await userEvent.hover(checkboxLabel(checkbox));
-	await captureVisual(label, 'checkbox/selected-hover');
-	await userEvent.unhover(checkboxLabel(checkbox));
-	await pressCheckbox(checkbox);
-	await captureVisual(label, 'checkbox/selected-pressed');
-	await userEvent.keyboard('{/Space}');
-});
-
-test('invalid hover keeps the danger border', async () => {
-	render(
-		<Checkbox isInvalid name="terms">
-			Accept terms
-		</Checkbox>,
-	);
-	const checkbox = page.getByRole('checkbox', { name: 'Accept terms' });
-	const label = page.elementLocator(checkboxLabel(checkbox));
-
-	await userEvent.hover(checkboxLabel(checkbox));
-	await captureVisual(label, 'checkbox/invalid-unchecked-hover');
-});
-
 /** The clickable `<label>` carrying a checkbox's interactive data attributes. */
 function checkboxLabel(checkbox: Locator): HTMLElement {
 	const label = checkbox.element().closest('label');
diff --git a/packages/@luke-ui/react/src/combobox-field/combobox-field.visual.test.tsx b/packages/@luke-ui/react/src/combobox-field/combobox-field.visual.test.tsx
index 6a637332..fc0dcf13 100644
--- a/packages/@luke-ui/react/src/combobox-field/combobox-field.visual.test.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/combobox-field.visual.test.tsx
@@ -166,18 +166,10 @@ test('action overlay in dark mode', async () => {
 		</ComboboxField>,
 		{ appearance: { mode: 'dark', theme: 'tactile' } },
 	);
-	const input = page.getByRole('combobox', { name: 'Country' });
-	const clear = page.getByRole('button', { name: 'Clear selection' });
 	const trigger = page.getByRole('button', { name: 'Toggle options' });
 
 	await userEvent.hover(trigger);
 	await captureVisual(trigger, 'combobox-field/trigger-hover-tactile-dark');
-	await userEvent.unhover(trigger);
-	await focusViaKeyboard(input);
-	await userEvent.tab();
-	await userEvent.keyboard('{Space>}');
-	await captureVisual(clear, 'combobox-field/clear-pressed-tactile-dark');
-	await userEvent.keyboard('{/Space}');
 });
 
 test('open option and selection states', async () => {
@@ -215,19 +207,6 @@ test('option keyboard focus', async () => {
 	await captureVisual(await openFocusedComboboxOption(), 'combobox-field/option-keyboard-focus');
 });
 
-test('option keyboard focus in dark mode', async () => {
-	render(
-		<ComboboxField defaultItems={countryItems} label="Country" name="country">
-			{renderCountryItem}
-		</ComboboxField>,
-		{ appearance: { mode: 'dark', theme: 'tactile' } },
-	);
-	await captureVisual(
-		await openFocusedComboboxOption(),
-		'combobox-field/option-keyboard-focus-tactile-dark',
-	);
-});
-
 test('option with leading icon at both sizes', async () => {
 	render(
 		<Stack>
diff --git a/packages/@luke-ui/react/src/icon-button/icon-button.visual.test.tsx b/packages/@luke-ui/react/src/icon-button/icon-button.visual.test.tsx
index fdae729d..1ff05fa7 100644
--- a/packages/@luke-ui/react/src/icon-button/icon-button.visual.test.tsx
+++ b/packages/@luke-ui/react/src/icon-button/icon-button.visual.test.tsx
@@ -41,34 +41,6 @@ test('interactive states', async () => {
 	await userEvent.keyboard('{/Space}');
 });
 
-test('ghost interactive states', async () => {
-	render(<IconButton appearance="ghost" aria-label="Action" icon="add" />);
-	const button = page.getByRole('button', { name: 'Action' });
-
-	await userEvent.hover(button);
-	await captureVisual(button, 'icon-button/ghost-hover');
-	await userEvent.unhover(button);
-	await focusViaKeyboard(button);
-	await userEvent.keyboard('{Space>}');
-	await captureVisual(button, 'icon-button/ghost-pressed');
-	await userEvent.keyboard('{/Space}');
-});
-
-test('ghost interactive states in dark mode', async () => {
-	render(<IconButton appearance="ghost" aria-label="Action" icon="add" />, {
-		appearance: { mode: 'dark', theme: 'tactile' },
-	});
-	const button = page.getByRole('button', { name: 'Action' });
-
-	await userEvent.hover(button);
-	await captureVisual(button, 'icon-button/ghost-hover-tactile-dark');
-	await userEvent.unhover(button);
-	await focusViaKeyboard(button);
-	await userEvent.keyboard('{Space>}');
-	await captureVisual(button, 'icon-button/ghost-pressed-tactile-dark');
-	await userEvent.keyboard('{/Space}');
-});
-
 test('forced-colors states', async () => {
 	await emulateForcedColors('active');
 
diff --git a/packages/@luke-ui/react/src/primitives/button/recipe.css.ts b/packages/@luke-ui/react/src/primitives/button/recipe.css.ts
index 33f2469a..800a2ed5 100644
--- a/packages/@luke-ui/react/src/primitives/button/recipe.css.ts
+++ b/packages/@luke-ui/react/src/primitives/button/recipe.css.ts
@@ -1,12 +1,10 @@
+import { interactionBackground } from '../../styles/interaction-fill.js';
 import { styleInLayer } from '../../styles/layered-style.css.js';
 import type { RecipeSelection } from '../../styles/recipe.js';
 import { recipe } from '../../styles/recipe.js';
 import { vars } from '../../theme/contract.css.js';
 import { FONT_METRIC_SCALE } from '../../theme/font-metric-scale.js';
 
-const hoverOverlay = `linear-gradient(${vars.color.overlay.hover}, ${vars.color.overlay.hover})`;
-const pressedOverlay = `linear-gradient(${vars.color.overlay.pressed}, ${vars.color.overlay.pressed})`;
-
 const base = styleInLayer('recipes', {
 	'@media': {
 		'(forced-colors: active)': {
@@ -194,10 +192,12 @@ function appearance(
 				color,
 				selectors: {
 					'&[data-hovered="true"]:not([data-disabled="true"]):not([data-pending="true"])': {
-						backgroundImage: `${hoverOverlay}, ${vars.actionControlFinish.raised}`,
+						backgroundColor: interactionBackground(fill, 'hover'),
+						backgroundImage: vars.actionControlFinish.raised,
 					},
 					'&[data-pressed="true"]:not([data-disabled="true"]):not([data-pending="true"])': {
-						backgroundImage: `${pressedOverlay}, ${vars.actionControlFinish.recessed}`,
+						backgroundColor: interactionBackground(fill, 'pressed'),
+						backgroundImage: vars.actionControlFinish.recessed,
 						color: pressedColor,
 					},
 				},
@@ -217,11 +217,11 @@ function ghostAppearance(tone: Tone, color: string) {
 			color,
 			selectors: {
 				'&[data-hovered="true"]:not([data-disabled="true"]):not([data-pending="true"])': {
-					backgroundImage: hoverOverlay,
+					backgroundColor: interactionBackground('transparent', 'hover'),
 					boxShadow: vars.depth.raised,
 				},
 				'&[data-pressed="true"]:not([data-disabled="true"]):not([data-pending="true"])': {
-					backgroundImage: pressedOverlay,
+					backgroundColor: interactionBackground('transparent', 'pressed'),
 					boxShadow: vars.depth.recessed,
 				},
 			},
diff --git a/packages/@luke-ui/react/src/primitives/checkbox/recipe.css.ts b/packages/@luke-ui/react/src/primitives/checkbox/recipe.css.ts
index 2d35a050..6f3b82ce 100644
--- a/packages/@luke-ui/react/src/primitives/checkbox/recipe.css.ts
+++ b/packages/@luke-ui/react/src/primitives/checkbox/recipe.css.ts
@@ -1,5 +1,6 @@
 import { createVar, fallbackVar } from '@vanilla-extract/css';
 import { focusRing, restingFocusRing } from '../../styles/focus-ring.js';
+import { interactionBackground } from '../../styles/interaction-fill.js';
 import type { RecipeSelection, SlottedConfigInput } from '../../styles/recipe.js';
 import { recipe } from '../../styles/recipe.js';
 import { textLineHeight } from '../../text/recipe.css.js';
@@ -115,13 +116,16 @@ const checkboxConfig = {
 					opacity: vars.interaction.disabledOpacity,
 				},
 				'[data-focus-visible="true"] &': focusRing(vars.color.border.focus),
-				// Overlay is the hover/pressed cue. Semantic borders stay on rest, selected, and invalid.
-				'[data-hovered="true"]:not([data-disabled="true"]):not([data-readonly="true"]) &': {
-					backgroundImage: `linear-gradient(${vars.color.overlay.hover}, ${vars.color.overlay.hover}), ${vars.actionControlFinish.raised}`,
-				},
-				'[data-pressed="true"]:not([data-disabled="true"]):not([data-readonly="true"]) &': {
-					backgroundImage: `linear-gradient(${vars.color.overlay.pressed}, ${vars.color.overlay.pressed}), ${vars.actionControlFinish.recessed}`,
-				},
+				'[data-hovered="true"]:not([data-disabled="true"]):not([data-readonly="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) &':
+					{
+						backgroundColor: interactionBackground(vars.color.surface.canvas, 'hover'),
+						backgroundImage: vars.actionControlFinish.raised,
+					},
+				'[data-pressed="true"]:not([data-disabled="true"]):not([data-readonly="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) &':
+					{
+						backgroundColor: interactionBackground(vars.color.surface.canvas, 'pressed'),
+						backgroundImage: vars.actionControlFinish.recessed,
+					},
 				'[data-indeterminate="true"] &': {
 					backgroundColor: vars.color.background.accent.solid,
 					borderColor: vars.color.background.accent.solid,
@@ -140,12 +144,32 @@ const checkboxConfig = {
 				'[data-selected="true"] &::after': {
 					opacity: 1,
 				},
+				'[data-hovered="true"][data-selected="true"]:not([data-disabled="true"]):not([data-readonly="true"]):not([data-invalid="true"]) &, [data-hovered="true"][data-indeterminate="true"]:not([data-disabled="true"]):not([data-readonly="true"]):not([data-invalid="true"]) &':
+					{
+						backgroundColor: interactionBackground(vars.color.background.accent.solid, 'hover'),
+						backgroundImage: vars.actionControlFinish.raised,
+					},
+				'[data-pressed="true"][data-selected="true"]:not([data-disabled="true"]):not([data-readonly="true"]):not([data-invalid="true"]) &, [data-pressed="true"][data-indeterminate="true"]:not([data-disabled="true"]):not([data-readonly="true"]):not([data-invalid="true"]) &':
+					{
+						backgroundColor: interactionBackground(vars.color.background.accent.solid, 'pressed'),
+						backgroundImage: vars.actionControlFinish.recessed,
+					},
 				'[data-invalid="true"][data-selected="true"] &, [data-invalid="true"][data-indeterminate="true"] &':
 					{
 						backgroundColor: vars.color.background.danger.solid,
 						borderColor: vars.color.background.danger.solid,
 						color: vars.color.foreground.danger.onSolid,
 					},
+				'[data-hovered="true"][data-invalid="true"][data-selected="true"]:not([data-disabled="true"]):not([data-readonly="true"]) &, [data-hovered="true"][data-invalid="true"][data-indeterminate="true"]:not([data-disabled="true"]):not([data-readonly="true"]) &':
+					{
+						backgroundColor: interactionBackground(vars.color.background.danger.solid, 'hover'),
+						backgroundImage: vars.actionControlFinish.raised,
+					},
+				'[data-pressed="true"][data-invalid="true"][data-selected="true"]:not([data-disabled="true"]):not([data-readonly="true"]) &, [data-pressed="true"][data-invalid="true"][data-indeterminate="true"]:not([data-disabled="true"]):not([data-readonly="true"]) &':
+					{
+						backgroundColor: interactionBackground(vars.color.background.danger.solid, 'pressed'),
+						backgroundImage: vars.actionControlFinish.recessed,
+					},
 			},
 		},
 	},
diff --git a/packages/@luke-ui/react/src/primitives/combobox/styles.css.ts b/packages/@luke-ui/react/src/primitives/combobox/styles.css.ts
index 0a26fdf5..e897907e 100644
--- a/packages/@luke-ui/react/src/primitives/combobox/styles.css.ts
+++ b/packages/@luke-ui/react/src/primitives/combobox/styles.css.ts
@@ -11,6 +11,7 @@ import {
 	invalidIndicatorIcon,
 	invalidIndicatorIconForcedColors,
 } from '../../styles/invalid-indicator.js';
+import { interactionBackground } from '../../styles/interaction-fill.js';
 import { styleInLayer } from '../../styles/layered-style.css.js';
 import { overlayEnterTransition, overlayExitTransition } from '../../styles/overlay-motion.js';
 import type { SlottedConfigInput } from '../../styles/recipe.js';
@@ -84,11 +85,11 @@ const comboboxActionStyles = {
 	selectors: {
 		'&[data-disabled="true"]': { cursor: 'not-allowed' },
 		'&[data-hovered="true"]:not([data-disabled="true"])': {
-			backgroundImage: `linear-gradient(${vars.color.overlay.hover}, ${vars.color.overlay.hover})`,
+			backgroundColor: interactionBackground('transparent', 'hover'),
 			color: vars.color.text.primary,
 		},
 		'&[data-pressed="true"]:not([data-disabled="true"])': {
-			backgroundImage: `linear-gradient(${vars.color.overlay.pressed}, ${vars.color.overlay.pressed})`,
+			backgroundColor: interactionBackground('transparent', 'pressed'),
 			color: vars.color.text.primary,
 		},
 		[descendantDisabledSelector]: { color: vars.color.text.disabled },
@@ -370,11 +371,11 @@ const comboboxConfig = {
 					cursor: 'not-allowed',
 					opacity: vars.interaction.disabledOpacity,
 				},
-				'&[data-focused="true"]:not([data-disabled="true"])': {
-					backgroundImage: `linear-gradient(${vars.color.overlay.hover}, ${vars.color.overlay.hover})`,
+				'&[data-focused="true"]:not([data-disabled="true"]):not([data-selected="true"])': {
+					backgroundColor: interactionBackground('transparent', 'hover'),
 				},
-				'&[data-hovered="true"]:not([data-disabled="true"])': {
-					backgroundImage: `linear-gradient(${vars.color.overlay.hover}, ${vars.color.overlay.hover})`,
+				'&[data-hovered="true"]:not([data-disabled="true"]):not([data-selected="true"])': {
+					backgroundColor: interactionBackground('transparent', 'hover'),
 				},
 				'&[data-focus-visible="true"]:not([data-disabled="true"])': {
 					outlineColor: vars.color.border.focus,
@@ -383,6 +384,12 @@ const comboboxConfig = {
 					backgroundColor: vars.color.background.accent.subtle,
 					fontWeight: vars.font.weight.label,
 				},
+				'&[data-focused="true"][data-selected="true"]:not([data-disabled="true"])': {
+					backgroundColor: interactionBackground(vars.color.background.accent.subtle, 'hover'),
+				},
+				'&[data-hovered="true"][data-selected="true"]:not([data-disabled="true"])': {
+					backgroundColor: interactionBackground(vars.color.background.accent.subtle, 'hover'),
+				},
 			},
 		},
 		mobileInputGroup: {
diff --git a/packages/@luke-ui/react/src/styles/interaction-fill.ts b/packages/@luke-ui/react/src/styles/interaction-fill.ts
new file mode 100644
index 00000000..0833646a
--- /dev/null
+++ b/packages/@luke-ui/react/src/styles/interaction-fill.ts
@@ -0,0 +1,12 @@
+/**
+ * Recipe helper for hover and pressed `background-color` values. Mixes the current semantic fill
+ * with `color.overlay.hover` or `color.overlay.pressed` at the shared strengths.
+ */
+
+import { interactionFill, type InteractionOverlayState } from '../theme/interaction-overlay.js';
+import { vars } from '../theme/contract.css.js';
+
+/** `background-color` for a hover or pressed control, mixed from `fill` and the overlay source. */
+export function interactionBackground(fill: string, state: InteractionOverlayState): string {
+	return interactionFill(fill, vars.color.overlay[state], state);
+}
diff --git a/packages/@luke-ui/react/src/theme/__fixtures__/radix-scales.ts b/packages/@luke-ui/react/src/theme/__fixtures__/radix-scales.ts
index 07ca23b5..114b49ab 100644
--- a/packages/@luke-ui/react/src/theme/__fixtures__/radix-scales.ts
+++ b/packages/@luke-ui/react/src/theme/__fixtures__/radix-scales.ts
@@ -281,8 +281,8 @@ export interface CorpusEntry {
 /**
  * The hue stress-corpus: source colours that push the generator's solid-anchor search, gamut
  * mapping, and on-solid choice. Used as `source` (and, for neutrals, `background`) inputs — not as
- * scales to reproduce. Every entry generates cleanly for a vibrant role. Mid-lightness tones that
- * the old step-10 hover gate rejected live in {@link ADAPTABLE_MID_TONES}.
+ * scales to reproduce. Every entry generates cleanly for a vibrant role. Mid-lightness sources that
+ * adapt inside the tone window live in {@link MID_LIGHTNESS_TONES}.
  */
 export const HUE_STRESS_CORPUS: ReadonlyArray<CorpusEntry> = [
 	{
@@ -336,19 +336,18 @@ export const HUE_STRESS_CORPUS: ReadonlyArray<CorpusEntry> = [
 ];
 
 /**
- * Mid-lightness sources that used to be unsatisfiable when the on-solid gate also measured a
- * synthetic step-10 hover. Against the resting solid they have a neighbour in the tone window, so
- * the search adapts instead of throwing.
+ * Mid-lightness sources whose preferred solid sits off the authored tone. The search finds a
+ * neighbour in the tone window that clears the on-solid gate.
  */
-export const ADAPTABLE_MID_TONES: Record<'light' | 'dark', CorpusEntry> = {
+export const MID_LIGHTNESS_TONES: Record<'light' | 'dark', CorpusEntry> = {
 	dark: {
-		name: 'dead-zone-blue-dark',
-		note: 'mid lightness; whole tone window is a dead zone',
+		name: 'mid-blue-dark',
+		note: 'mid lightness; solid search adapts inside the tone window',
 		source: 'oklch(0.55 0.2 258)',
 	},
 	light: {
-		name: 'dead-zone-red-light',
-		note: 'mid lightness; whole tone window is a dead zone',
+		name: 'mid-red-light',
+		note: 'mid lightness; solid search adapts inside the tone window',
 		source: 'oklch(0.62 0.19 27)',
 	},
 };
diff --git a/packages/@luke-ui/react/src/theme/build-theme.test.ts b/packages/@luke-ui/react/src/theme/build-theme.test.ts
index 71a05c99..fa950eab 100644
--- a/packages/@luke-ui/react/src/theme/build-theme.test.ts
+++ b/packages/@luke-ui/react/src/theme/build-theme.test.ts
@@ -35,8 +35,8 @@ describe('buildTheme independent modes', () => {
 	});
 });
 
-describe('buildTheme former step-10 dead zones', () => {
-	it('generates a mid-lightness warning instead of rejecting it at family generation', () => {
+describe('buildTheme mid-lightness sources', () => {
+	it('generates a mid-lightness warning by adapting the solid inside the tone window', () => {
 		expect(() => {
 			return buildTheme({
 				...tactileFoundation,
@@ -44,12 +44,12 @@ describe('buildTheme former step-10 dead zones', () => {
 					...tactileFoundation.light,
 					color: { ...tactileFoundation.light.color, warning: 'oklch(0.62 0.19 27)' },
 				},
-				name: 'adapted-warning',
+				name: 'mid-lightness-warning',
 			});
 		}).not.toThrow();
 	});
 
-	it('lets validateContrast, not a synthetic step-10 hover, reject an explicit mid-lightness accent', () => {
+	it('rejects an explicit mid-lightness accent when mixed interaction fills miss AA', () => {
 		const caught = (() => {
 			try {
 				buildTheme({
diff --git a/packages/@luke-ui/react/src/theme/color.test.ts b/packages/@luke-ui/react/src/theme/color.test.ts
index e020cb5c..d8fb01a6 100644
--- a/packages/@luke-ui/react/src/theme/color.test.ts
+++ b/packages/@luke-ui/react/src/theme/color.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vite-plus/test';
-import { compositeOver, contrastRatio, formatOklch, gamutMapOklch, parseColor } from './color.js';
+import { contrastRatio, formatOklch, gamutMapOklch, mixSrgb, parseColor } from './color.js';
 
 describe('parseColor', () => {
 	it('round-trips a hex colour through OKLCH formatting', () => {
@@ -24,7 +24,7 @@ describe('parseColor', () => {
 	});
 });
 
-describe('compositeOver', () => {
+describe('mixSrgb', () => {
 	function srgbToLinear(channel: number): number {
 		return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
 	}
@@ -35,8 +35,8 @@ describe('compositeOver', () => {
 		return (lighter + 0.05) / (darker + 0.05);
 	}
 
-	it('paints 50% black over white as sRGB gray, not an OKLab mix', () => {
-		const result = compositeOver(parseColor('#000000'), parseColor('#ffffff'), 0.5);
+	it('mixes white and black at 50% as sRGB gray, matching color-mix(in srgb, ...)', () => {
+		const result = mixSrgb(parseColor('#ffffff'), parseColor('#000000'), 0.5);
 		const grayLuminance = srgbToLinear(0.5);
 		expect(contrastRatio(parseColor('#000000'), result)).toBeCloseTo(
 			contrastFromLuminance(0, grayLuminance),
@@ -48,8 +48,8 @@ describe('compositeOver', () => {
 		);
 	});
 
-	it('paints 50% blue over white using sRGB source-over', () => {
-		const result = compositeOver(parseColor('#0000ff'), parseColor('#ffffff'), 0.5);
+	it('mixes white and blue at 50% in sRGB', () => {
+		const result = mixSrgb(parseColor('#ffffff'), parseColor('#0000ff'), 0.5);
 		const paintedLuminance = 0.2126 * srgbToLinear(0.5) + 0.7152 * srgbToLinear(0.5) + 0.0722;
 		expect(contrastRatio(parseColor('#000000'), result)).toBeCloseTo(
 			contrastFromLuminance(0, paintedLuminance),
diff --git a/packages/@luke-ui/react/src/theme/color.ts b/packages/@luke-ui/react/src/theme/color.ts
index c0ecaa5f..893b00e8 100644
--- a/packages/@luke-ui/react/src/theme/color.ts
+++ b/packages/@luke-ui/react/src/theme/color.ts
@@ -40,19 +40,17 @@ export function parseColor(input: string): Oklch {
 }
 
 /**
- * Paints opaque `source` at `alpha` over opaque `backdrop` with CSS source-over in sRGB.
- *
- * `color-mix(in oklab, source N%, transparent)` only produces a translucent colour. This is the
- * subsequent paint over the surface, not an OKLab interpolation with that surface.
+ * Mixes opaque `a` and `b` in sRGB, matching
+ * `color-mix(in srgb, a <100-N>%, b <N>%)` where `amountOfB` is `N / 100`.
  */
-export function compositeOver(source: Oklch, backdrop: Oklch, alpha: number): Oklch {
-	const t = clampUnit(alpha);
-	const src = oklchToSrgb(source);
-	const dst = oklchToSrgb(backdrop);
+export function mixSrgb(a: Oklch, b: Oklch, amountOfB: number): Oklch {
+	const t = clampUnit(amountOfB);
+	const from = oklchToSrgb(a);
+	const to = oklchToSrgb(b);
 	return srgbToOklch([
-		dst[0] * (1 - t) + src[0] * t,
-		dst[1] * (1 - t) + src[1] * t,
-		dst[2] * (1 - t) + src[2] * t,
+		from[0] * (1 - t) + to[0] * t,
+		from[1] * (1 - t) + to[1] * t,
+		from[2] * (1 - t) + to[2] * t,
 	]);
 }
 
@@ -133,9 +131,9 @@ function relativeLuminance(color: Oklch): number {
 }
 
 interface Oklab {
+	l: number;
 	a: number;
 	b: number;
-	l: number;
 }
 
 type SrgbTriple = [number, number, number];
@@ -195,9 +193,9 @@ function isInSrgbGamut(color: Oklch): boolean {
 function oklchToOklab(color: Oklch): Oklab {
 	const hueRadians = (normalizeHue(color.h) * Math.PI) / 180;
 	return {
+		l: color.l,
 		a: color.c * Math.cos(hueRadians),
 		b: color.c * Math.sin(hueRadians),
-		l: color.l,
 	};
 }
 
@@ -205,14 +203,14 @@ function oklabToOklch(color: Oklab): Oklch {
 	const c = Math.hypot(color.a, color.b);
 	const h = c < 0.000001 ? 0 : normalizeHue((Math.atan2(color.b, color.a) * 180) / Math.PI);
 	return {
+		l: color.l,
 		c,
 		h,
-		l: color.l,
 	};
 }
 
 function oklchToLinearSrgb(color: Oklch): SrgbTriple {
-	const { a: labA, b: labB, l } = oklchToOklab(color);
+	const { l, a: labA, b: labB } = oklchToOklab(color);
 	const lCubeRoot = l + 0.3963377774 * labA + 0.2158037573 * labB;
 	const mCubeRoot = l - 0.1055613458 * labA - 0.0638541728 * labB;
 	const sCubeRoot = l - 0.0894841775 * labA - 1.291485548 * labB;
@@ -235,8 +233,8 @@ function linearSrgbToOklch(rgb: SrgbTriple): Oklch {
 	const mCubeRoot = Math.cbrt(mCone);
 	const sCubeRoot = Math.cbrt(sCone);
 	return oklabToOklch({
+		l: 0.2104542553 * lCubeRoot + 0.793617785 * mCubeRoot - 0.0040720468 * sCubeRoot,
 		a: 1.9779984951 * lCubeRoot - 2.428592205 * mCubeRoot + 0.4505937099 * sCubeRoot,
 		b: 0.0259040371 * lCubeRoot + 0.7827717662 * mCubeRoot - 0.808675766 * sCubeRoot,
-		l: 0.2104542553 * lCubeRoot + 0.793617785 * mCubeRoot - 0.0040720468 * sCubeRoot,
 	});
 }
diff --git a/packages/@luke-ui/react/src/theme/contract.test.ts b/packages/@luke-ui/react/src/theme/contract.test.ts
index 69fdc73e..52484568 100644
--- a/packages/@luke-ui/react/src/theme/contract.test.ts
+++ b/packages/@luke-ui/react/src/theme/contract.test.ts
@@ -38,7 +38,7 @@ describe('theme contract', () => {
 		expect(countLeaves(vars)).toBe(flattenThemeContract().length);
 	});
 
-	it('gives all six semantic roles the same 36 leaves under the documented variable names', () => {
+	it('gives every semantic role the same documented contract leaves', () => {
 		// The migration table in the specification is a promise about these exact names, so they are
 		// spelled out here rather than re-derived through `themeVarName` (which would only restate the
 		// kebab-casing the contract already applied). `on-solid` is the one name a naive reading gets
@@ -60,7 +60,6 @@ describe('theme contract', () => {
 			);
 		});
 
-		expect(expected).toHaveLength(36);
 		const byPath = (a: ReadonlyArray<string>, b: ReadonlyArray<string>) => {
 			return (a[0] ?? '').localeCompare(b[0] ?? '');
 		};
diff --git a/packages/@luke-ui/react/src/theme/contract.ts b/packages/@luke-ui/react/src/theme/contract.ts
index dcce0669..e4d2d922 100644
--- a/packages/@luke-ui/react/src/theme/contract.ts
+++ b/packages/@luke-ui/react/src/theme/contract.ts
@@ -144,8 +144,8 @@ export const themeContractTree = {
 			overlay: null,
 		},
 		/**
-		 * Modal dimming (`backdrop`) and generated translucent interaction washes (`hover`,
-		 * `pressed`).
+		 * Modal dimming (`backdrop`) and the generated interaction sources (`hover`, `pressed`)
+		 * recipes mix into the current semantic fill.
 		 */
 		overlay: {
 			backdrop: null,
diff --git a/packages/@luke-ui/react/src/theme/contrast-validation.test.ts b/packages/@luke-ui/react/src/theme/contrast-validation.test.ts
index 3be370bb..fe4ff3b9 100644
--- a/packages/@luke-ui/react/src/theme/contrast-validation.test.ts
+++ b/packages/@luke-ui/react/src/theme/contrast-validation.test.ts
@@ -6,10 +6,13 @@ import {
 	tactileFoundation,
 } from './__fixtures__/theme-css.js';
 import { buildTheme, compileTheme, ThemeContrastError } from './build-theme.js';
+import { normalizeTheme } from './define-theme.js';
 import { flattenThemeContract } from './contract.js';
 import { SEMANTIC_ROLES } from './contrast-policy.js';
+import { contrastRatio, parseColor } from './color.js';
 import { validateContrast } from './contrast-validation.js';
 import type { ThemeFoundation } from './foundation.js';
+import { mixInteractionSrgb } from './interaction-overlay.js';
 
 describe('buildTheme contrast failures', () => {
 	function buildFailures(foundation: ThemeFoundation): ThemeContrastError {
@@ -108,50 +111,28 @@ describe('buildTheme contrast failures', () => {
 		expect(error.message.split('\n').length).toBe(error.failures.length + 1);
 	});
 
-	for (const mode of ['light', 'dark'] as const) {
-		it(`rejects an interaction overlay wash in ${mode} mode whose composited surface misses the text ratio`, () => {
-			// Strengthens the emitted pressed wash rather than moving the canvas: a lighter dark canvas
-			// fails uncomposited accent and danger pairs first, so it cannot isolate this gate.
-			const { values } = modeColorValues(mode);
-			const pressed = values['color.overlay.pressed'];
-			if (pressed === undefined) throw new Error('expected color.overlay.pressed');
-			expect(pressed).toContain('10%');
-			values['color.overlay.pressed'] = pressed.replace(' 10%, transparent', ' 80%, transparent');
-
-			const { failures } = validateContrast(mode, values);
-			expect(failures.length).toBeGreaterThan(0);
-			expect(
-				failures.every((failure) => failure.background.startsWith('color.overlay.pressed over ')),
-			).toBe(true);
-			expect(
-				failures.some((failure) => {
-					return (
-						failure.foreground === 'color.foreground.danger.rest' &&
-						failure.background === 'color.overlay.pressed over color.surface.canvas' &&
-						failure.ratio < 4.5
-					);
-				}),
-			).toBe(true);
-			expect(
-				failures.some((failure) => {
-					return failure.foreground === 'color.foreground.accent.rest' && failure.ratio < 4.5;
-				}),
-			).toBe(true);
-		});
-	}
-
-	it('does not parse an interaction overlay as an opaque colour', () => {
-		const { block, values } = modeColorValues('dark');
-		values['color.overlay.hover'] = extractValue(block, '--luke-color-text-primary');
-		expect(() => validateContrast('dark', values)).toThrow(
-			/"color.overlay.hover" must be color-mix\(in oklab/,
+	it('needs the stronger accent foreground on subtle pressed for a mid-chroma green accent', () => {
+		const { baseLight } = splitBlocks(
+			buildTheme(normalizeTheme({ color: { accent: 'oklch(0.6 0.12 160)' }, name: 'green-accent' })),
+		);
+		const valueOf = (varName: string) => extractValue(baseLight, varName);
+		const mixed = mixInteractionSrgb(
+			parseColor(valueOf('--luke-color-background-accent-subtle')),
+			parseColor(valueOf('--luke-color-overlay-pressed')),
+			'pressed',
 		);
+		expect(
+			contrastRatio(parseColor(valueOf('--luke-color-foreground-accent-rest')), mixed),
+		).toBeLessThan(4.5);
+		expect(
+			contrastRatio(parseColor(valueOf('--luke-color-foreground-accent-hover')), mixed),
+		).toBeGreaterThanOrEqual(4.5);
 	});
 
-	it('measures ghost overlay contrast from the painted sRGB result', () => {
+	it('measures interaction fills with the same sRGB mix the recipes emit', () => {
 		const { values } = modeColorValues('light');
 		values['color.surface.canvas'] = 'oklch(1 0 0)';
-		values['color.overlay.hover'] = 'color-mix(in oklab, oklch(0 0 0) 50%, transparent)';
+		values['color.overlay.hover'] = 'oklch(0 0 0)';
 		values['color.text.primary'] = 'oklch(0 0 0)';
 
 		const { checks } = validateContrast('light', values);
@@ -162,8 +143,8 @@ describe('buildTheme contrast failures', () => {
 			);
 		});
 		expect(check).toBeDefined();
-		const grayLuminance = ((0.5 + 0.055) / 1.055) ** 2.4;
-		expect(check?.ratio).toBeCloseTo((grayLuminance + 0.05) / 0.05, 5);
+		const mixed = mixInteractionSrgb(parseColor('oklch(1 0 0)'), parseColor('oklch(0 0 0)'), 'hover');
+		expect(check?.ratio).toBeCloseTo(contrastRatio(parseColor('oklch(0 0 0)'), mixed), 5);
 	});
 });
 
diff --git a/packages/@luke-ui/react/src/theme/contrast-validation.ts b/packages/@luke-ui/react/src/theme/contrast-validation.ts
index 01394ab2..d7eb3f72 100644
--- a/packages/@luke-ui/react/src/theme/contrast-validation.ts
+++ b/packages/@luke-ui/react/src/theme/contrast-validation.ts
@@ -5,9 +5,10 @@
  */
 
 import type { Oklch } from './color.js';
-import { compositeOver, contrastRatio, parseColor } from './color.js';
+import { contrastRatio, parseColor } from './color.js';
 import { SEMANTIC_ROLES, TEXT_RATIO, UI_RATIO } from './contrast-policy.js';
 import type { ContrastCheck } from './diagnostics.js';
+import { mixInteractionSrgb, type InteractionOverlayState } from './interaction-overlay.js';
 import type { SemanticColorValues } from './semantic-map.js';
 
 /** Ghost Button and IconButton keep these foregrounds on a transparent rest fill. */
@@ -35,17 +36,15 @@ const SUBTLE_BUTTON_FOREGROUND = {
 	},
 } as const;
 
-const INTERACTION_OVERLAYS = ['color.overlay.hover', 'color.overlay.pressed'] as const;
-
-/** The emitted hover and pressed overlay shape: an opaque OKLCH mixed with transparent in OKLab. */
-const INTERACTION_OVERLAY_VALUE =
-	/^color-mix\(in oklab, (oklch\([^)]+\)) (\d+(?:\.\d+)?)%, transparent\)$/;
+const INTERACTION_OVERLAY_STATES = ['hover', 'pressed'] as const satisfies ReadonlyArray<
+	InteractionOverlayState
+>;
 
 type ColorMode = 'light' | 'dark';
 
 /** One WCAG contrast failure recorded while generating a theme. */
 export interface ThemeContrastFailure {
-	/** Token path of the background colour, or an overlay composited over a surface. */
+	/** Token path of the background colour, or an overlay mixed into a surface. */
 	background: string;
 	/** Token path of the foreground colour, for example `color.text.primary`. */
 	foreground: string;
@@ -71,7 +70,7 @@ interface ValidationResult {
  * Hard at the AA text ratio: functional primary and secondary text against all four elevation
  * surfaces; every role's resting and hover foreground against the base surfaces and that role's own
  * subtle fill; every role's on-solid foreground against its solid fill; and the real component
- * contracts that paint `overlay.hover` / `overlay.pressed` over a resting fill (ghost Button on
+ * contracts that mix `overlay.hover` / `overlay.pressed` into a resting fill (ghost Button on
  * canvas and recessed, solid and subtle Button tones, selected Combobox options on accent subtle,
  * unselected Combobox options on floating). Hard at the non-text ratio: the authored focus ring and
  * `border.control`, which is `control-border.ts`'s solved boundary rather than a scale-step alias;
@@ -116,7 +115,6 @@ export function validateContrast(
 		checkResolved(foreground, background, colorAt(background), required, hard);
 	};
 
-	// v2 validates only against surfaces consumers can reference (the hidden `resting` rung is gone).
 	const surfacePaths = ['canvas', 'recessed', 'floating', 'overlay'].map(
 		(surface) => `color.surface.${surface}`,
 	);
@@ -156,20 +154,25 @@ export function validateContrast(
 			check(`color.border.${role}`, background, UI_RATIO, false);
 		}
 	}
-	// Interaction overlays composite over the resting fill the control already has. Mix with
-	// transparent sets alpha; painting then source-overs that colour. Do not parse the `color-mix()`
-	// string as an opaque colour. Pairs follow first-party recipes, not every theoretical combination.
-	const checkOverlay = (foreground: string, overlayPath: string, surface: string) => {
-		const overlayValue = colorValues[overlayPath];
-		if (overlayValue === undefined) throw new Error(`buildTheme did not generate "${overlayPath}"`);
-		const composited = compositeOverlay(overlayValue, overlayPath, colorAt(surface));
-		checkResolved(foreground, `${overlayPath} over ${surface}`, composited, TEXT_RATIO, true);
+	// Interaction fills are `color-mix(in srgb, <fill>, <overlay source>)` at the shared strengths.
+	// Pairs follow first-party recipes, not every theoretical combination.
+	const checkOverlay = (
+		foreground: string,
+		state: InteractionOverlayState,
+		surface: string,
+	) => {
+		const mixed = mixInteractionSrgb(
+			colorAt(surface),
+			colorAt(`color.overlay.${state}`),
+			state,
+		);
+		checkResolved(foreground, `color.overlay.${state} over ${surface}`, mixed, TEXT_RATIO, true);
 	};
-	for (const overlayPath of INTERACTION_OVERLAYS) {
+	for (const state of INTERACTION_OVERLAY_STATES) {
 		// Ghost Button / IconButton: transparent rest on canvas or recessed.
 		for (const surface of basePaths) {
 			for (const foreground of GHOST_FOREGROUNDS) {
-				checkOverlay(foreground, overlayPath, surface);
+				checkOverlay(foreground, state, surface);
 			}
 		}
 		// Solid Button / IconButton, and selected or invalid Checkbox, which reuse the same on-solid
@@ -177,34 +180,20 @@ export function validateContrast(
 		for (const tone of BUTTON_TONES) {
 			checkOverlay(
 				`color.foreground.${tone}.onSolid`,
-				overlayPath,
+				state,
 				`color.background.${tone}.solid`,
 			);
-			const overlayState = overlayPath === 'color.overlay.hover' ? 'hover' : 'pressed';
 			checkOverlay(
-				SUBTLE_BUTTON_FOREGROUND[tone][overlayState],
-				overlayPath,
+				SUBTLE_BUTTON_FOREGROUND[tone][state],
+				state,
 				`color.background.${tone}.subtle`,
 			);
 		}
 		// Combobox selected option: primary text on accent subtle. Unselected focused or hovered
 		// option: primary text on the floating popover.
-		checkOverlay('color.text.primary', overlayPath, 'color.background.accent.subtle');
-		checkOverlay('color.text.primary', overlayPath, 'color.surface.floating');
+		checkOverlay('color.text.primary', state, 'color.background.accent.subtle');
+		checkOverlay('color.text.primary', state, 'color.surface.floating');
 	}
 
 	return { checks, failures };
 }
-
-/** Reads an emitted `color-mix(..., transparent)` overlay and paints it over an opaque surface. */
-function compositeOverlay(overlayValue: string, overlayPath: string, surface: Oklch): Oklch {
-	const match = INTERACTION_OVERLAY_VALUE.exec(overlayValue);
-	const sourceValue = match?.[1];
-	const percentText = match?.[2];
-	if (sourceValue === undefined || percentText === undefined) {
-		throw new Error(
-			`"${overlayPath}" must be color-mix(in oklab, oklch(...) N%, transparent); received "${overlayValue}"`,
-		);
-	}
-	return compositeOver(parseColor(sourceValue), surface, Number(percentText) / 100);
-}
diff --git a/packages/@luke-ui/react/src/theme/diagnostics.ts b/packages/@luke-ui/react/src/theme/diagnostics.ts
index a9d9dcb2..ee9b8312 100644
--- a/packages/@luke-ui/react/src/theme/diagnostics.ts
+++ b/packages/@luke-ui/react/src/theme/diagnostics.ts
@@ -65,7 +65,7 @@ export interface FamilyDiagnostics {
  * gate. Tooling reads that classification instead of inferring it from token paths.
  */
 export interface ContrastCheck {
-	/** Token path of the background colour, or an overlay composited over a surface. */
+	/** Token path of the background colour, or an overlay mixed into a surface. */
 	background: string;
 	/** Token path of the foreground colour, for example `color.text.primary`. */
 	foreground: string;
diff --git a/packages/@luke-ui/react/src/theme/interaction-overlay.test.ts b/packages/@luke-ui/react/src/theme/interaction-overlay.test.ts
new file mode 100644
index 00000000..23edb6a3
--- /dev/null
+++ b/packages/@luke-ui/react/src/theme/interaction-overlay.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { mixSrgb, parseColor } from './color.js';
+import {
+	INTERACTION_OVERLAY_PERCENT,
+	interactionFill,
+	mixInteractionSrgb,
+} from './interaction-overlay.js';
+
+describe('interaction overlay', () => {
+	it('emits an sRGB color-mix that uses the shared hover and pressed strengths', () => {
+		expect(interactionFill('var(--fill)', 'var(--source)', 'hover')).toBe(
+			`color-mix(in srgb, var(--fill) ${100 - INTERACTION_OVERLAY_PERCENT.hover}%, var(--source) ${INTERACTION_OVERLAY_PERCENT.hover}%)`,
+		);
+		expect(interactionFill('var(--fill)', 'var(--source)', 'pressed')).toBe(
+			`color-mix(in srgb, var(--fill) ${100 - INTERACTION_OVERLAY_PERCENT.pressed}%, var(--source) ${INTERACTION_OVERLAY_PERCENT.pressed}%)`,
+		);
+	});
+
+	it('delegates the sRGB mix to mixSrgb at the shared strength', () => {
+		const fill = parseColor('#ffffff');
+		const source = parseColor('#0160ae');
+		expect(mixInteractionSrgb(fill, source, 'pressed')).toEqual(
+			mixSrgb(fill, source, INTERACTION_OVERLAY_PERCENT.pressed / 100),
+		);
+	});
+});
diff --git a/packages/@luke-ui/react/src/theme/interaction-overlay.ts b/packages/@luke-ui/react/src/theme/interaction-overlay.ts
new file mode 100644
index 00000000..492d342d
--- /dev/null
+++ b/packages/@luke-ui/react/src/theme/interaction-overlay.ts
@@ -0,0 +1,41 @@
+/**
+ * Shared hover and pressed mix strengths, plus the CSS and sRGB operations first-party recipes and
+ * contrast validation use. Components request `hover` or `pressed`. They do not choose percentages.
+ */
+
+import type { Oklch } from './color.js';
+import { mixSrgb } from './color.js';
+
+/** Mix strength for each generated interaction state, as a percent of the overlay source. */
+export const INTERACTION_OVERLAY_PERCENT = {
+	hover: 5,
+	pressed: 10,
+} as const;
+
+/** A generated interaction state first-party recipes can request. */
+export type InteractionOverlayState = keyof typeof INTERACTION_OVERLAY_PERCENT;
+
+/**
+ * The `background-color` value for a hover or pressed fill:
+ * `color-mix(in srgb, <fill> <100-N>%, <source> <N>%)`.
+ */
+export function interactionFill(
+	fill: string,
+	source: string,
+	state: InteractionOverlayState,
+): string {
+	const percent = INTERACTION_OVERLAY_PERCENT[state];
+	return `color-mix(in srgb, ${fill} ${100 - percent}%, ${source} ${percent}%)`;
+}
+
+/**
+ * The same sRGB mix {@link interactionFill} asks the browser to paint. `amount` is the overlay
+ * source's share of the mix.
+ */
+export function mixInteractionSrgb(
+	fill: Oklch,
+	source: Oklch,
+	state: InteractionOverlayState,
+): Oklch {
+	return mixSrgb(fill, source, INTERACTION_OVERLAY_PERCENT[state] / 100);
+}
diff --git a/packages/@luke-ui/react/src/theme/scale.test.ts b/packages/@luke-ui/react/src/theme/scale.test.ts
index 612f4d57..61d3f589 100644
--- a/packages/@luke-ui/react/src/theme/scale.test.ts
+++ b/packages/@luke-ui/react/src/theme/scale.test.ts
@@ -5,7 +5,7 @@ import {
 	lightnessEnvelope,
 	RADIX_DARK_OKLCH,
 	RADIX_LIGHT_OKLCH,
-	ADAPTABLE_MID_TONES,
+	MID_LIGHTNESS_TONES,
 } from './__fixtures__/radix-scales.js';
 import type { Oklch } from './color.js';
 import { contrastRatio, parseColor } from './color.js';
@@ -14,7 +14,7 @@ import type { FamilyRole } from './scale.js';
 import {
 	generateFamily,
 	generateFamilyWithDiagnostics,
-	MIN_STATE_DELTA,
+	MIN_RAMP_DELTA,
 	oklabDeltaE,
 	onSolidGateRatio,
 	passesOnSolidGate,
@@ -54,8 +54,8 @@ describe('generateFamily shape', () => {
 	});
 });
 
-describe('component state distinctness', () => {
-	it('keeps steps 3-4 and 4-5 at least MIN_STATE_DELTA apart across the corpus', () => {
+describe('muted ramp distinctness', () => {
+	it('keeps private ramp rungs 4 and 5 at least MIN_RAMP_DELTA from their neighbours', () => {
 		for (const entry of HUE_STRESS_CORPUS) {
 			for (const mode of MODES) {
 				// The muted ramp is role-independent, but every role runs the solid-anchor search, so the
@@ -65,10 +65,10 @@ describe('component state distinctness', () => {
 					const delta34 = oklabDeltaE(scale[3], scale[4]);
 					const delta45 = oklabDeltaE(scale[4], scale[5]);
 					expect(delta34, `${entry.name} ${mode} ${role} ΔE(3,4)`).toBeGreaterThanOrEqual(
-						MIN_STATE_DELTA,
+						MIN_RAMP_DELTA,
 					);
 					expect(delta45, `${entry.name} ${mode} ${role} ΔE(4,5)`).toBeGreaterThanOrEqual(
-						MIN_STATE_DELTA,
+						MIN_RAMP_DELTA,
 					);
 				}
 			}
@@ -183,12 +183,11 @@ describe('reference-envelope properties', () => {
 	});
 });
 
-describe('step 12 is a scale-quality rung, not a contract guarantee', () => {
-	it('is the more extreme text lightness but carries no contrast guarantee', () => {
+describe('step 12 high-contrast text', () => {
+	it('sits further from the background than the low-contrast text rung', () => {
 		for (const mode of MODES) {
 			const scale = family('#0090ff', mode, 'accent');
-			// Light mode: high-contrast text is darker than low-contrast; dark mode: lighter. Either
-			// way step 12 sits further from the low-contrast rung, extending the ramp.
+			// Light mode: high-contrast text is darker than low-contrast; dark mode: lighter.
 			const extension = mode === 'light' ? scale[11].l - scale[12].l : scale[12].l - scale[11].l;
 			expect(extension).toBeGreaterThan(0);
 		}
@@ -325,21 +324,13 @@ describe('the one on-solid gate', () => {
 		expect(resolveAnchor(source, 'light')?.adaptedForOnSolid).toBe(true);
 	});
 
-	it('gates only the resting solid, not a private step-10 rung or a phantom pressed colour', () => {
-		// Light `oklch(0.64 0 0)` clears the resting solid. A darker private rung or a made-up pressed
-		// colour must not decide whether the public solid is acceptable.
+	it('gates only the resting solid, not the private step-10 rung', () => {
 		const source: Oklch = {
 			l: 0.64,
 			c: 0,
 			h: 0,
 		};
-		const phantomPressed = {
-			l: source.l - 0.09,
-			c: 0,
-			h: 0,
-		};
 		const scale = family('oklch(0.64 0 0)', 'light', 'accent');
-		expect(contrastRatio(scale.contrast, phantomPressed)).toBeLessThan(TEXT_RATIO);
 		expect(onSolidGateRatio({ lightness: source.l, mode: 'light', source })).toBeGreaterThan(
 			TEXT_RATIO,
 		);
@@ -349,13 +340,10 @@ describe('the one on-solid gate', () => {
 	});
 });
 
-describe('unsatisfiable input', () => {
-	it('adapts a former step-10 dead-zone source instead of rejecting it', () => {
-		// These mid-lightness tones used to fail because the gate also measured a synthetic step-10
-		// hover. Against the resting solid they have a neighbour in the tone window, so the search
-		// adapts rather than throwing.
+describe('mid-lightness solid search', () => {
+	it('adapts a mid-lightness source within the solid search band', () => {
 		for (const mode of MODES) {
-			const entry = ADAPTABLE_MID_TONES[mode];
+			const entry = MID_LIGHTNESS_TONES[mode];
 			for (const role of SOURCE_TONED_ROLES) {
 				const { diagnostics } = generateFamilyWithDiagnostics({
 					background: BACKGROUND[mode],
@@ -369,9 +357,9 @@ describe('unsatisfiable input', () => {
 		}
 	});
 
-	it('still generates neutral from a mid-lightness source, using the curated solid band', () => {
+	it('generates neutral from a mid-lightness source using the curated solid band', () => {
 		for (const mode of MODES) {
-			expect(() => family(ADAPTABLE_MID_TONES[mode].source, mode, 'neutral')).not.toThrow();
+			expect(() => family(MID_LIGHTNESS_TONES[mode].source, mode, 'neutral')).not.toThrow();
 		}
 	});
 });
diff --git a/packages/@luke-ui/react/src/theme/scale.ts b/packages/@luke-ui/react/src/theme/scale.ts
index 5c5228b1..a8eb2469 100644
--- a/packages/@luke-ui/react/src/theme/scale.ts
+++ b/packages/@luke-ui/react/src/theme/scale.ts
@@ -26,9 +26,9 @@ type ColorMode = 'light' | 'dark';
 
 /**
  * A generated 12-step colour family plus its on-solid `contrast` colour. Step roles: 1-2 app/subtle
- * backgrounds, 3-5 component surface (public rest at 3; 4-5 remain private), 6-8 borders (subtle /
+ * backgrounds, 3-5 muted ramp (public rest at 3; 4-5 remain private), 6-8 borders (subtle /
  * UI+focus / hover), 9-10 solid (9 = public rest, 10 = private scale rung), 11-12 text (low /
- * high contrast).
+ * high contrast). Neutral step 12 is also the interaction overlay source.
  */
 export interface ScaleFamily {
 	1: Oklch;
@@ -100,15 +100,15 @@ export class ScaleGenerationError extends Error {
 const ON_SOLID_TARGET = TEXT_RATIO + RATIO_HEADROOM;
 
 /**
- * The OKLab ΔE floor between consecutive component states (steps 3-4 and 4-5). The muted ramp's
- * fixed lightness deltas clear this comfortably for every role, including near-achromatic neutrals.
+ * The OKLab ΔE floor between consecutive muted-ramp rungs (steps 3-4 and 4-5). The ramp's fixed
+ * lightness deltas clear this comfortably for every role, including near-achromatic neutrals.
  */
-export const MIN_STATE_DELTA = 0.015;
+export const MIN_RAMP_DELTA = 0.015;
 
 // Steps 1-8 form a "muted ramp": lightness walks away from the background toward the solid by fixed
-// absolute offsets (so component-state distinctness never depends on the anchor lightness), while
-// chroma grows from a faint tint to near the solid. `offset` is an absolute OKLCH lightness delta
-// from the background (its sign is set by the mode: darker in light mode, lighter in dark mode);
+// absolute offsets (so ramp distinctness never depends on the anchor lightness), while chroma grows
+// from a faint tint to near the solid. `offset` is an absolute OKLCH lightness delta from the
+// background (its sign is set by the mode: darker in light mode, lighter in dark mode);
 // `chromaFraction` scales the source chroma and `chromaCap` caps it so the pale near-background
 // steps stay tinted rather than saturated.
 interface RampRungSpec {
@@ -164,10 +164,10 @@ const NEUTRAL_SOLID = {
 	light: { band: [0.22, 0.45], target: 0.35 },
 } as const satisfies Record<ColorMode, SolidBand>;
 
-// Text lightness targets: step 11 (low contrast) and step 12 (high contrast). Step 12 is a
-// scale-quality rung only — no semantic leaf consumes a high-contrast contract guarantee yet. Light
-// `low` sits at 0.49 (not 0.5) so step 11 keeps a small AA margin over the pressed subtle surface
-// (step 5) even for the highest-luminance hues — accent/danger text is mapped onto that subtle trio.
+// Text lightness targets: step 11 (low contrast) and step 12 (high contrast). Every role maps step
+// 12 to `foreground.<role>.hover`. Neutral step 12 is also `text.primary` and the overlay source.
+// Light `low` sits at 0.49 (not 0.5) so step 11 keeps a small AA margin over the private ramp rungs
+// that sit above the public subtle fill.
 const TEXT_LIGHTNESS = {
 	dark: { high: 0.94, low: 0.76 },
 	light: { high: 0.3, low: 0.49 },
@@ -298,7 +298,7 @@ function buildFamily(request: GenerateFamilyRequest): {
 	// The on-solid text: the better of near-white / near-black against the resting solid.
 	const onSolid = chooseOnSolid(hue, [solid]);
 
-	// Steps 11-12: text rungs. Step 12 is a scale-quality rung, not a contract guarantee.
+	// Steps 11-12: text rungs. Neutral step 12 is also the interaction overlay source.
 	const text = TEXT_LIGHTNESS[mode];
 	const lowText = rung(
 		11,
diff --git a/packages/@luke-ui/react/src/theme/semantic-map.test.ts b/packages/@luke-ui/react/src/theme/semantic-map.test.ts
index c43d2e56..f0934c89 100644
--- a/packages/@luke-ui/react/src/theme/semantic-map.test.ts
+++ b/packages/@luke-ui/react/src/theme/semantic-map.test.ts
@@ -7,11 +7,7 @@ import { generateSurfaces } from './elevation.js';
 import { defaultSourceColors } from './foundation.js';
 import type { FamilyRole, ScaleFamily } from './scale.js';
 import { generateFamily } from './scale.js';
-import {
-	mapSemanticColors,
-	OVERLAY_HOVER_PERCENT,
-	OVERLAY_PRESSED_PERCENT,
-} from './semantic-map.js';
+import { mapSemanticColors } from './semantic-map.js';
 
 type ColorMode = 'light' | 'dark';
 
@@ -92,12 +88,8 @@ describe('mapSemanticColors', () => {
 				expect(result['color.surface.floating']).toBe(formatOklch(surfaces.floating));
 				expect(result['color.surface.overlay']).toBe(formatOklch(surfaces.overlay));
 				expect(result['color.overlay.backdrop']).toBe(backdrop);
-				expect(result['color.overlay.hover']).toBe(
-					`color-mix(in oklab, ${formatOklch(families.neutral[12])} ${OVERLAY_HOVER_PERCENT}%, transparent)`,
-				);
-				expect(result['color.overlay.pressed']).toBe(
-					`color-mix(in oklab, ${formatOklch(families.neutral[12])} ${OVERLAY_PRESSED_PERCENT}%, transparent)`,
-				);
+				expect(result['color.overlay.hover']).toBe(formatOklch(families.neutral[12]));
+				expect(result['color.overlay.pressed']).toBe(formatOklch(families.neutral[12]));
 				expect(result['color.overlay.tint']).toBeUndefined();
 				expect(result['color.loadingSkeleton']).toBe(formatOklch(families.neutral[8]));
 
@@ -204,18 +196,10 @@ describe('mapSemanticColors', () => {
 
 			const light = overlaysFor('light');
 			const dark = overlaysFor('dark');
-			expect(light.hover).toBe(
-				`color-mix(in oklab, ${light.neutral} ${OVERLAY_HOVER_PERCENT}%, transparent)`,
-			);
-			expect(light.pressed).toBe(
-				`color-mix(in oklab, ${light.neutral} ${OVERLAY_PRESSED_PERCENT}%, transparent)`,
-			);
-			expect(dark.hover).toBe(
-				`color-mix(in oklab, ${dark.neutral} ${OVERLAY_HOVER_PERCENT}%, transparent)`,
-			);
-			expect(dark.pressed).toBe(
-				`color-mix(in oklab, ${dark.neutral} ${OVERLAY_PRESSED_PERCENT}%, transparent)`,
-			);
+			expect(light.hover).toBe(light.neutral);
+			expect(light.pressed).toBe(light.neutral);
+			expect(dark.hover).toBe(dark.neutral);
+			expect(dark.pressed).toBe(dark.neutral);
 			expect(light.neutral).not.toBe('oklch(0 0 0)');
 			expect(dark.neutral).not.toBe('oklch(1 0 0)');
 			expect(light.neutral).not.toBe(dark.neutral);
diff --git a/packages/@luke-ui/react/src/theme/semantic-map.ts b/packages/@luke-ui/react/src/theme/semantic-map.ts
index a5329612..1a0d4554 100644
--- a/packages/@luke-ui/react/src/theme/semantic-map.ts
+++ b/packages/@luke-ui/react/src/theme/semantic-map.ts
@@ -1,7 +1,7 @@
 /**
  * The one default semantic colour mapping. `mapSemanticColors` aliases every generated colour
  * contract leaf onto a private scale family's step or a generated surface, per the locked mapping
- * table. It is a pure lookup aside from two generated interaction overlays mixed from the
+ * table. It is a pure lookup aside from the two interaction overlay sources, which alias the
  * high-contrast neutral. It never distorts a family or surface to make a leaf fit.
  *
  * The role list it keys off comes from `contrast-policy.ts`, which `build-theme.ts`'s validation
@@ -16,12 +16,6 @@ import { SEMANTIC_ROLES } from './contrast-policy.js';
 import type { GeneratedSurfaces } from './elevation.js';
 import type { FamilyRole, ScaleFamily } from './scale.js';
 
-/** Generated hover wash: high-contrast neutral at this alpha. */
-export const OVERLAY_HOVER_PERCENT = 5;
-
-/** Generated pressed wash: high-contrast neutral at this alpha. */
-export const OVERLAY_PRESSED_PERCENT = 10;
-
 /** Every generated colour contract leaf's CSS value, keyed by its dotted path (for example
  * `'color.text.primary'`), plus the passed-through `'color.overlay.backdrop'`. */
 export type SemanticColorValues = Record<string, string>;
@@ -47,23 +41,17 @@ interface MapSemanticColorsRequest {
 	surfaces: GeneratedSurfaces;
 }
 
-/** Mixes the high-contrast neutral foreground into a translucent interaction wash. */
-function interactionOverlay(
-	foreground: Oklch,
-	percent: typeof OVERLAY_HOVER_PERCENT | typeof OVERLAY_PRESSED_PERCENT,
-): string {
-	return `color-mix(in oklab, ${formatOklch(foreground)} ${percent}%, transparent)`;
-}
-
 /**
  * Resolves every colour contract leaf onto the private families and surfaces, per the locked
  * semantic mapping table. `families` and `surfaces` are already mode-resolved. `backdrop` passes
- * through verbatim. Hover and pressed overlays mix `families.neutral[12]` with transparent.
+ * through verbatim. Hover and pressed overlay sources alias `families.neutral[12]`. Recipes mix
+ * that source into the current fill at the shared strengths in `interaction-overlay.ts`.
  * `focus` defaults to the accent family's step 8 when the theme author omits it.
  */
 export function mapSemanticColors(request: MapSemanticColorsRequest): SemanticColorValues {
 	const { families, surfaces, backdrop, focus, controlBorder } = request;
 	const neutral = families.neutral;
+	const overlaySource = formatOklch(neutral[12]);
 	const values: Record<string, string> = {};
 
 	// Surfaces: canvas IS the background, so it is aliased here rather than recomputed.
@@ -72,8 +60,8 @@ export function mapSemanticColors(request: MapSemanticColorsRequest): SemanticCo
 	values['color.surface.floating'] = formatOklch(surfaces.floating);
 	values['color.surface.overlay'] = formatOklch(surfaces.overlay);
 	values['color.overlay.backdrop'] = backdrop;
-	values['color.overlay.hover'] = interactionOverlay(neutral[12], OVERLAY_HOVER_PERCENT);
-	values['color.overlay.pressed'] = interactionOverlay(neutral[12], OVERLAY_PRESSED_PERCENT);
+	values['color.overlay.hover'] = overlaySource;
+	values['color.overlay.pressed'] = overlaySource;
 	values['color.loadingSkeleton'] = formatOklch(neutral[8]);
 
 	// Functional text and borders: neutral only, and distinct from the six shared roles that share the
@@ -90,7 +78,7 @@ export function mapSemanticColors(request: MapSemanticColorsRequest): SemanticCo
 	for (const role of SEMANTIC_ROLES) {
 		const family = families[role];
 		values[`color.background.${role}.subtle`] = formatOklch(family[3]);
-		// Step 10 is a private scale rung. Public hover and pressed use `color.overlay` over step 9.
+		// Step 10 is a private scale rung. Public hover and pressed mix `color.overlay` into step 9.
 		values[`color.background.${role}.solid`] = formatOklch(family[9]);
 		values[`color.foreground.${role}.rest`] = formatOklch(family[11]);
 		values[`color.foreground.${role}.hover`] = formatOklch(family[12]);
diff --git a/packages/@luke-ui/react/src/theme/stylesheet.test.ts b/packages/@luke-ui/react/src/theme/stylesheet.test.ts
index 41468a2e..fd4658c2 100644
--- a/packages/@luke-ui/react/src/theme/stylesheet.test.ts
+++ b/packages/@luke-ui/react/src/theme/stylesheet.test.ts
@@ -106,21 +106,14 @@ describe('buildTheme output', () => {
 	}
 
 	it('emits every colour value in OKLCH', () => {
-		const colorMixVarNames = new Set([
-			'--luke-color-overlay-hover',
-			'--luke-color-overlay-pressed',
-		]);
 		const colorVarNames = pairs
 			.filter(([path]) => path.startsWith('color.'))
 			.map(([, varName]) => varName);
 		for (const block of [blocks.baseLight, blocks.mediaDark]) {
 			const nonOklch = colorVarNames.filter((varName) => {
-				return !colorMixVarNames.has(varName) && !extractValue(block, varName).startsWith('oklch(');
+				return !extractValue(block, varName).startsWith('oklch(');
 			});
 			expect(nonOklch).toEqual([]);
-			for (const varName of colorMixVarNames) {
-				expect(extractValue(block, varName).startsWith('color-mix(in oklab,')).toBe(true);
-			}
 		}
 	});
 
diff --git a/packages/@luke-ui/react/src/theme/token-board.tsx b/packages/@luke-ui/react/src/theme/token-board.tsx
index f206f006..b91197ee 100644
--- a/packages/@luke-ui/react/src/theme/token-board.tsx
+++ b/packages/@luke-ui/react/src/theme/token-board.tsx
@@ -13,6 +13,7 @@ import { createElement, useLayoutEffect, useRef, useState } from 'react';
 import { vars } from './contract.css.js';
 import type { themeContractTree } from './contract.js';
 import { flattenThemeContract, themeVarName } from './contract.js';
+import { interactionFill } from './interaction-overlay.js';
 
 interface TokenLeafNode {
 	kind: 'leaf';
@@ -240,9 +241,7 @@ interface LeafPreviewProps {
 type PreviewRenderer = (props: LeafPreviewProps) => ReactNode;
 
 function ColorPreview({ path, varName }: LeafPreviewProps) {
-	// Overlay leaves may carry alpha, so they are layered over the canvas to show what they look
-	// like in place.
-	if (path.startsWith('color.overlay.')) {
+	if (path === 'color.overlay.backdrop') {
 		return (
 			<span
 				aria-label={`${path} sample`}
@@ -255,6 +254,19 @@ function ColorPreview({ path, varName }: LeafPreviewProps) {
 			/>
 		);
 	}
+	if (path === 'color.overlay.hover' || path === 'color.overlay.pressed') {
+		const state = path === 'color.overlay.hover' ? 'hover' : 'pressed';
+		return (
+			<span
+				aria-label={`${path} sample`}
+				role="img"
+				style={{
+					...swatchBoxStyle,
+					backgroundColor: interactionFill(vars.color.surface.canvas, `var(${varName})`, state),
+				}}
+			/>
+		);
+	}
 
 	return (
 		<span
-- 
2.51.2