From 08c42a2e62490095085e8cf07011b7ec5c861a93 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Mon, 23 Mar 2026 14:30:39 -0400
Subject: [PATCH] fix dark/light mode surface colors and Remove button color

- Fix ContentViewer background invisible against card in dark mode
- Fix Remove button not red in dark mode by using color="red.6"
- Add distinct card background for light mode (gray-0) vs app background
- Use CSS custom properties for card background across color schemes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 clients/web/src/App.css                                  | 9 +++++----
 .../src/components/molecules/ServerCard/ServerCard.tsx   | 2 +-
 clients/web/src/theme/Card.ts                            | 3 +++
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/clients/web/src/App.css b/clients/web/src/App.css
index dbf54382..f4857672 100644
--- a/clients/web/src/App.css
+++ b/clients/web/src/App.css
@@ -22,9 +22,9 @@
   --inspector-text-inverse: var(--mantine-color-white);
 
   /* ── Surfaces ──────────────────────────────────────────── */
-  --inspector-surface-body: var(--mantine-color-body);
-  --inspector-surface-card: var(--mantine-color-default);
-  --inspector-surface-code: var(--mantine-color-gray-0);
+  --inspector-surface-body: var(--mantine-color-dark-9);
+  --inspector-surface-card: var(--mantine-color-gray-0);
+  --inspector-surface-code: var(--mantine-color-white);
 
   /* ── Borders ───────────────────────────────────────────── */
   --inspector-border-default: var(--mantine-color-default-border);
@@ -69,7 +69,8 @@
 
 /* Dark mode overrides — tokens that need adjustment in dark scheme */
 [data-mantine-color-scheme="dark"] {
-  --inspector-surface-code: var(--mantine-color-dark-6);
+  --inspector-surface-card: var(--mantine-color-gray-9);
+  --inspector-surface-code: var(--mantine-color-dark-9);
   --inspector-border-subtle: var(--mantine-color-dark-4);
 }
 
diff --git a/clients/web/src/components/molecules/ServerCard/ServerCard.tsx b/clients/web/src/components/molecules/ServerCard/ServerCard.tsx
index f653232f..584e888e 100644
--- a/clients/web/src/components/molecules/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/molecules/ServerCard/ServerCard.tsx
@@ -117,7 +117,7 @@ export function ServerCard({
             <Button variant="subtle" size="xs" onClick={onEdit}>
               Edit
             </Button>
-            <Button variant="transparent" size="xs" color="red" onClick={onRemove}>
+            <Button variant="subtle" size="xs" color="red.6" onClick={onRemove}>
               Remove
             </Button>
           </ActionsRow>
diff --git a/clients/web/src/theme/Card.ts b/clients/web/src/theme/Card.ts
index 014acace..19406595 100644
--- a/clients/web/src/theme/Card.ts
+++ b/clients/web/src/theme/Card.ts
@@ -10,4 +10,7 @@ export const ThemeCard = Card.extend({
     if (props.variant === "responsive") return { root: "card-responsive" };
     return {};
   },
+  styles: () => ({
+    root: { backgroundColor: "var(--inspector-surface-card)" },
+  }),
 });