From 0fe567be750305a658624581b9d9ec6143e66317 Mon Sep 17 00:00:00 2001
From: Serhii Vecherenko <SDSLeon999@gmail.com>
Date: Mon, 27 Jul 2026 21:24:05 -0700
Subject: [PATCH] fix(theme): raise fields above dark floating overlays

---
 src/renderer/components/mcp/McpServerEditor.tsx | 6 +++---
 src/renderer/styles.css                         | 5 ++++-
 src/renderer/theme/themeTokens.ts               | 8 +++++++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/mcp/McpServerEditor.tsx b/src/renderer/components/mcp/McpServerEditor.tsx
index 23ec93c5c..409a5ce1e 100644
--- a/src/renderer/components/mcp/McpServerEditor.tsx
+++ b/src/renderer/components/mcp/McpServerEditor.tsx
@@ -247,7 +247,7 @@ export function McpServerEditor(props: {
                         onChange={(event) => update("name", event.target.value)}
                       />
                     </Field>
-                    <div className="space-y-1.5">
+                    <div className="flex flex-col gap-1.5">
                       <Label className="text-xs font-medium text-foreground">{t`Type`}</Label>
                       <Select
                         aria-label={t`MCP transport type`}
@@ -370,7 +370,7 @@ export function McpServerEditor(props: {
                   </Field>
                 </div>
               ) : (
-                <TextField className="space-y-2" isInvalid={jsonError !== undefined}>
+                <TextField className="gap-2" isInvalid={jsonError !== undefined}>
                   <Label className="text-xs font-medium text-foreground">
                     <Trans>Full configuration</Trans>
                   </Label>
@@ -420,7 +420,7 @@ function Field(props: {
   children: ReactNode;
 }) {
   return (
-    <TextField className="space-y-1.5" isInvalid={props.error !== undefined}>
+    <TextField className="gap-1.5" isInvalid={props.error !== undefined}>
       <div className="flex items-baseline justify-between gap-3">
         <Label className="text-xs font-medium text-foreground">{props.label}</Label>
         {props.hint ? (
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 56a09f349..1175651bc 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -1047,7 +1047,10 @@
     /* Matches --composer-surface so chat bubbles (user message) and the
        composer read as one surface. */
     --surface-tertiary: #17171d;
-    --overlay: #19191c;
+    /* Floating chrome (modals, menus, popovers, tooltips) sits just above the
+       panel surfaces. Fields/controls are lighter than this, so they read as
+       raised cards on overlays instead of blending into them. */
+    --overlay: #121216;
     /* Neutral cool-grey for secondary text — deliberately low chroma so it
        reads as grey (not the old blue/violet cast). Kept a step below the
        bright foreground so idle/secondary rows recede clearly from active
diff --git a/src/renderer/theme/themeTokens.ts b/src/renderer/theme/themeTokens.ts
index 902f6e9ba..537e0af87 100644
--- a/src/renderer/theme/themeTokens.ts
+++ b/src/renderer/theme/themeTokens.ts
@@ -122,7 +122,11 @@ export function buildVariant(spec: ThemeSpec, mode: "light" | "dark"): ThemeVari
     "--surface": surface,
     "--surface-secondary": mix(surface, 92, fg),
     "--surface-tertiary": mix(surface, 85, fg),
-    "--overlay": mix(surface, 93, fg),
+    // Floating chrome (modals, menus, popovers). In dark themes it drops to
+    // just above the surface so fields (mixed toward fg, below) read as raised
+    // cards on it; in light themes it dims below the surface, where the
+    // barely-lighter field fill already reads as a card.
+    "--overlay": mode === "light" ? mix(surface, 93, fg) : mix(surface, 98, fg),
     "--muted": muted.hex,
     "--scrollbar": fade(muted.hex, 60),
     // Neutral fill for secondary/tertiary buttons, selects, chips, toggle and
@@ -133,6 +137,8 @@ export function buildVariant(spec: ThemeSpec, mode: "light" | "dark"): ThemeVari
     "--default": mix(surface, mode === "light" ? 82 : 86, fg),
     "--accent": accent,
     "--accent-foreground": accentFg,
+    // Fields sit a step lighter than the surface/overlay (below) so they read
+    // as raised cards on panels and floating chrome in both modes.
     "--field-background": mix(surface, 95, fg),
     "--field-foreground": fg,
     "--field-placeholder": placeholder,