From 2e103cb182eb2726e3298464e3247286ef3fe76e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20David=20Rinc=C3=B3n=20L=C3=B3pez?=
 <juandavidrinconl@gmail.com>
Date: Fri, 17 Jul 2026 11:20:08 -0500
Subject: [PATCH] fix(ui): dark-mode modals use the app's blue-tinted
 background, not flat black

---
 app/src/styles/futuristic.css                          | 3 ++-
 packages/design-tokens/test/legacy-resolved.json       | 2 +-
 packages/design-tokens/tokens/semantic/color.dark.json | 2 +-
 ui/core/src/components/dialog.tsx                      | 6 +++---
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/src/styles/futuristic.css b/app/src/styles/futuristic.css
index 9504d519a..d786d2375 100644
--- a/app/src/styles/futuristic.css
+++ b/app/src/styles/futuristic.css
@@ -111,7 +111,8 @@ body::before {
 }
 
 /* Modal surface (`bg-dialog`). SOLID in both themes (the `dialog` token:
-   neutral.800 dark, white light) — no glass, no backdrop-filter. Modals sit
+   cool.gutter-dark dark — the app-background blue-tinted tone — white
+   light) — no glass, no backdrop-filter. Modals sit
    over arbitrary content and must never bleed it through; WebView2 in the
    desktop shell doesn't reliably composite backdrop-filter anyway (the dark
    "New agent" modal bled the Settings page through, and light washed out
diff --git a/packages/design-tokens/test/legacy-resolved.json b/packages/design-tokens/test/legacy-resolved.json
index c156bbdfd..813f35ba7 100644
--- a/packages/design-tokens/test/legacy-resolved.json
+++ b/packages/design-tokens/test/legacy-resolved.json
@@ -82,7 +82,7 @@
     "ht-card": "rgba(40, 40, 40, 0.5)",
     "ht-card-hover": "rgba(50, 50, 52, 0.58)",
     "ht-card-text": "#e5e5e5",
-    "ht-dialog": "#1e1e1e",
+    "ht-dialog": "#141416",
     "ht-card-solid": "#2c2c2b",
     "ht-danger": "#ef4444",
     "ht-danger-text": "#ffffff",
diff --git a/packages/design-tokens/tokens/semantic/color.dark.json b/packages/design-tokens/tokens/semantic/color.dark.json
index 1b1ae3e7a..1029ccc83 100644
--- a/packages/design-tokens/tokens/semantic/color.dark.json
+++ b/packages/design-tokens/tokens/semantic/color.dark.json
@@ -10,7 +10,7 @@
     "card-text": { "$value": "{color.neutral.150}" },
     "popover": { "$value": "{color.neutral.800}" },
     "popover-text": { "$value": "{color.neutral.150}" },
-    "dialog": { "$value": "{color.neutral.800}" },
+    "dialog": { "$value": "{color.cool.gutter-dark}" },
     "ink": { "$value": "{color.neutral.150}" },
     "ink-muted": { "$value": "{color.neutral.450}" },
     "action": { "$value": "{color.neutral.150}" },
diff --git a/ui/core/src/components/dialog.tsx b/ui/core/src/components/dialog.tsx
index 7ba22e5e6..b2464187d 100644
--- a/ui/core/src/components/dialog.tsx
+++ b/ui/core/src/components/dialog.tsx
@@ -65,9 +65,9 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           // Modal surface token `bg-dialog`: SOLID in both modes (white in
-          // light, neutral.800 in dark) — modals sit over arbitrary content
-          // and must never bleed it through. Not `bg-card` (glass in both
-          // modes).
+          // light, cool.gutter-dark in dark — the app-background blue-tinted
+          // tone) — modals sit over arbitrary content and must never bleed it
+          // through. Not `bg-card` (glass in both modes).
           "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-5 rounded-2xl border border-line/50 bg-dialog p-6 shadow-[0_4px_4px_rgba(0,0,0,0.04),0_4px_80px_8px_rgba(0,0,0,0.04),0_0_1px_rgba(0,0,0,0.62)] dark:shadow-[0_4px_4px_rgba(0,0,0,0.1),0_4px_80px_8px_rgba(0,0,0,0.2),0_0_1px_rgba(255,255,255,0.1)] duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className,
         )}