From cb994611fa13dd398e1a409c0282f307840400ce Mon Sep 17 00:00:00 2001
From: kate bonner <katebonner277@gmail.com>
Date: Sun, 30 Aug 2026 19:10:47 -0400
Subject: [PATCH] =?UTF-8?q?fix(app):=20tour=20scrim=20dim=20was=20a=20no-o?=
 =?UTF-8?q?p=20=E2=80=94=20use=20the=20shared=20overlay=20scrim=20token?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The onboarding walkthrough's scrim dimmed nothing. Its background was

    color-mix(in srgb, var(--v2-background-bg-base) 22%, transparent)

and --v2-background-bg-base IS the app ground (--v2-grey-1000 #242424 dark,
--v2-grey-50 light). Compositing a colour over itself yields that same colour
at ANY alpha, so the dim was arithmetically inert in both themes — raising the
percentage changed nothing, which is what made it look like a tuning problem.
The only visible separation came from backdrop-filter: blur(3px).

This never regressed; it has been inert since the walkthrough landed. It read
as acceptable on the browser dev server, where the app is the whole window and
the blur alone covers everything. In the extension the app is an iframe, the
blur stops at its edge, and with no dim doing any work the spotlight reads as
only partly applied.

Now uses --v2-overlay-simple-overlay-scrim, the shared overlay scrim token the
drawer overlay already pairs with a backdrop blur. It is theme-aware
(alpha-dark-40 / alpha-light-30 / alpha-dark-60 per theme) and genuinely deeper
than the ground, and it satisfies the design system's rule that overlay scrims
are 40-60% black via a token rather than a literal.

Blur stays at 3px — that value was tuned deliberately and is unchanged. Both
clip-path holes (the stop's element and the walkthrough card) still read fully
crisp against the dimmed ground.

Verified: check:design passes ("all styles resolve from the brand sheet"),
typecheck 30/30, oxlint unchanged from base (CSS is not linted).
---
 packages/app/src/design-polish.css | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/design-polish.css b/packages/app/src/design-polish.css
index 08baf080b..2d8f89dc5 100644
--- a/packages/app/src/design-polish.css
+++ b/packages/app/src/design-polish.css
@@ -453,16 +453,23 @@ span[data-component="tag"][data-variant="accent"] {
   pointer-events: none;
 }
 /* The scrim: everything except the stop's element and the walkthrough card is
-   softened, so the eye has one place to go. Blur is deliberately shallow (3px)
-   and paired with only a light dim — enough to push the rest of the window back
-   without hiding what the reader is being taught to recognise. The holes are
-   punched with an even-odd clip-path, recomputed as the ring moves. */
+   softened, so the eye has one place to go. Blur stays deliberately shallow
+   (3px) — enough to push the rest of the window back without hiding what the
+   reader is being taught to recognise. The holes are punched with an even-odd
+   clip-path, recomputed as the ring moves.
+
+   The dim is the shared overlay scrim token, the same one the drawer overlay
+   uses. It must NOT be mixed from --v2-background-bg-base: that token IS the
+   app ground, so compositing it over the ground is a no-op at any alpha — the
+   old `bg-base 22%` darkened nothing in either theme, and raising the
+   percentage changed nothing either. The scrim token is theme-aware and
+   actually deeper than the ground. */
 [data-component="amc-tour-spotlight"] .amc-tour-scrim {
   position: absolute;
   inset: 0;
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
-  background: color-mix(in srgb, var(--v2-background-bg-base) 22%, transparent);
+  background: var(--v2-overlay-simple-overlay-scrim);
   transition: opacity 0.2s ease;
 }
 [data-component="amc-tour-spotlight"] .amc-tour-ring {