From 756a1dec2b0831082e35d46485a4400a07186130 Mon Sep 17 00:00:00 2001
From: zenchantlive <jordanlive121@gmail.com>
Date: Thu, 26 Feb 2026 16:27:14 -0800
Subject: [PATCH] fix(theme): increase contrast in aurora theme surface layers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Make surface layers more distinct (0f0e0d → 1a1816 → 252320 → 302e2a → 3c3934)
- Increase border visibility (18%, 35%, 55% opacity)
- Ensure header, sidebar, main content are visually distinct
---
 src/components/graph/assignment-panel.tsx |  8 +++----
 src/components/shared/unified-shell.tsx   |  4 ++--
 src/styles/themes/aurora.css              | 26 +++++++++++------------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/graph/assignment-panel.tsx b/src/components/graph/assignment-panel.tsx
index 5aea05f..055aa2b 100644
--- a/src/components/graph/assignment-panel.tsx
+++ b/src/components/graph/assignment-panel.tsx
@@ -508,15 +508,15 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                 )}
             </div>
 
-            <div className="bg-[#111f2b] rounded-xl border border-[var(--ui-border-soft)] flex flex-col overflow-hidden">
+            <div className="bg-[var(--surface-tertiary)] rounded-xl border border-[var(--border-subtle)] flex flex-col overflow-hidden">
                 <button
                     onClick={() => setPreAssignedCollapsed(!preAssignedCollapsed)}
                     className="w-full px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] flex items-center gap-2 hover:bg-[var(--surface-hover)] transition-colors"
                 >
-                    {preAssignedCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--ui-text-muted)]" /> : <ChevronDown className="w-4 h-4 text-[var(--ui-text-muted)]" />}
+                    {preAssignedCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--text-tertiary)]" /> : <ChevronDown className="w-4 h-4 text-[var(--text-tertiary)]" />}
                     <Clock className="w-4 h-4 text-amber-400" />
                     <h3 className="font-semibold text-sm text-[var(--text-primary)]">Pre-assigned</h3>
-                    <span className="ml-auto text-xs text-[var(--ui-text-muted)]">{preAssignedTasks.length}</span>
+                    <span className="ml-auto text-xs text-[var(--text-tertiary)]">{preAssignedTasks.length}</span>
                 </button>
                 {!preAssignedCollapsed && (
                     <div className="max-h-40 overflow-y-auto p-3 space-y-2 custom-scrollbar">
@@ -542,7 +542,7 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
                     onClick={() => setSquadRosterCollapsed(!squadRosterCollapsed)}
                     className="w-full px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] flex items-center gap-2 hover:bg-[var(--surface-hover)] transition-colors"
                 >
-                    {squadRosterCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--ui-text-muted)]" /> : <ChevronDown className="w-4 h-4 text-[var(--ui-text-muted)]" />}
+                    {squadRosterCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--text-tertiary)]" /> : <ChevronDown className="w-4 h-4 text-[var(--text-tertiary)]" />}
                     <Users className="w-4 h-4 text-emerald-500" />
                     <h3 className="font-semibold text-sm text-[var(--text-primary)]">Squad Roster</h3>
                     <span className="ml-auto text-xs text-[var(--text-tertiary)]">{activeRoster.length} active</span>
diff --git a/src/components/shared/unified-shell.tsx b/src/components/shared/unified-shell.tsx
index a109f8f..9db756b 100644
--- a/src/components/shared/unified-shell.tsx
+++ b/src/components/shared/unified-shell.tsx
@@ -201,8 +201,8 @@ export function UnifiedShell({
 
       {/* THREAD DRAWER: Popup overlay when a task is selected */}
       {isChatOpen ? (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-          <div className="h-[85vh] w-full max-w-lg overflow-hidden rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-card)] shadow-2xl">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[var(--alpha-black-medium)] p-4">
+          <div className="h-[85vh] w-full max-w-lg overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-quaternary)] shadow-2xl">
             <ThreadDrawer
               isOpen={true}
               onClose={handleCloseDrawer}
diff --git a/src/styles/themes/aurora.css b/src/styles/themes/aurora.css
index 8a10cf4..a30fd0c 100644
--- a/src/styles/themes/aurora.css
+++ b/src/styles/themes/aurora.css
@@ -8,26 +8,26 @@
 
 [data-theme="aurora"] {
   /* ==========================================================================
-     1. SURFACE LAYERS - Warm Charcoal Scale (DISTINCT)
+     1. SURFACE LAYERS - Warm Charcoal Scale (MORE DISTINCT)
      ========================================================================== */
-  --surface-backdrop: #161514;      /* Darkest - page background */
-  --surface-elevated: #0f0e0d;      /* Header - darker for contrast */
-  --surface-primary: #1e1d1b;       /* Sidebar */
-  --surface-secondary: #252422;     /* Main content - lighter than sidebar */
-  --surface-tertiary: #2d2b29;      /* Panels */
-  --surface-quaternary: #353331;    /* Cards - lightest surface */
-  --surface-overlay: #0a0909;       /* Modals */
-  --surface-input: #1a1917;         /* Form fields */
+  --surface-backdrop: #0f0e0d;      /* Page background - very dark */
+  --surface-elevated: #1a1816;      /* Header - lighter than backdrop */
+  --surface-primary: #252320;       /* Sidebar - lighter still */
+  --surface-secondary: #302e2a;     /* Main content - distinct from sidebar */
+  --surface-tertiary: #3c3934;      /* Panels - clearly lighter */
+  --surface-quaternary: #48453f;    /* Cards - lightest surface */
+  --surface-overlay: #0a0908;       /* Modals - darkest */
+  --surface-input: #1f1d1a;         /* Form fields */
   --surface-hover: rgba(240, 238, 234, 0.06);
   --surface-active: rgba(53, 201, 255, 0.12);
   --surface-tooltip: #1e1d1b;
 
   /* ==========================================================================
-     2. BORDERS - Warm Grey (more visible)
+     2. BORDERS - More Visible
      ========================================================================== */
-  --border-subtle: rgba(180, 175, 165, 0.15);
-  --border-default: rgba(180, 175, 165, 0.28);
-  --border-strong: rgba(180, 175, 165, 0.45);
+  --border-subtle: rgba(200, 195, 185, 0.18);
+  --border-default: rgba(200, 195, 185, 0.35);
+  --border-strong: rgba(200, 195, 185, 0.55);
   --border-accent: rgba(53, 201, 255, 0.55);
 
   /* ==========================================================================