From 13262b5cecd5e2ea1c08f9d1558f670e08c626ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Thu, 9 Apr 2026 22:25:10 +0200
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20unify=20dark=20theme=20?=
 =?UTF-8?q?=E2=80=94=20replace=20hardcoded=20hex=20with=20CSS=20variables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace sidebar #0d0e22 hardcoded hex with .sidebar-panel class backed by
  --surface-card CSS variable so all three sidebar elements (desktop, mobile,
  mobile header) share the same neutral-dark color as the main content
- Remove purple logo gradient (dark:from-[#0d0e22] dark:to-[#13162a]) — now uses
  --surface-elevated for a neutral, unified look
- Add .dark slate-*/gray-900 overrides: bg-slate-700/800/900, border-slate-800,
  hover:bg-slate-800 all map to --surface-elevated/--surface-card/--border-subtle
- Remove dead hardcoded rgb(45 51 71) rule for dark bg-gray-100 (was overridden
  further down anyway; now consistently uses --surface-elevated)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/globals.css                | 26 ++++++++++++++++++++-
 apps/web/src/components/layout/AppShell.tsx |  8 +++----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index fdb8437..7ae66eb 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -217,7 +217,7 @@
 }
 
 .dark .bg-gray-100 {
-  background-color: rgb(45 51 71) !important;
+  background-color: rgb(var(--surface-elevated)) !important;
 }
 
 .dark .border-gray-100 {
@@ -345,6 +345,30 @@
   color: rgb(196 181 253) !important;
 }
 
+/* Slate-* normalization — map to CSS variable surfaces */
+.dark .bg-slate-700,
+.dark .bg-slate-800 {
+  background-color: rgb(var(--surface-elevated)) !important;
+}
+.dark .bg-slate-900,
+.dark .bg-gray-900 {
+  background-color: rgb(var(--surface-card)) !important;
+}
+.dark .border-slate-800,
+.dark .border-slate-700 {
+  border-color: rgb(var(--border-subtle)) !important;
+}
+.dark .hover\:bg-slate-800:hover {
+  background-color: rgb(var(--surface-elevated)) !important;
+}
+
+/* Sidebar panel — overrides the hardcoded hex values in AppShell */
+:is(.dark) .sidebar-panel {
+  background-color: rgb(var(--surface-card) / 0.92) !important;
+  border-right-color: rgb(var(--border-subtle)) !important;
+  border-bottom-color: rgb(var(--border-subtle)) !important;
+}
+
 /* Modal / overlay */
 .dark .shadow-2xl {
   box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6) !important;
diff --git a/apps/web/src/components/layout/AppShell.tsx b/apps/web/src/components/layout/AppShell.tsx
index 31ae73a..312e80f 100644
--- a/apps/web/src/components/layout/AppShell.tsx
+++ b/apps/web/src/components/layout/AppShell.tsx
@@ -426,7 +426,7 @@ function SidebarContent({
         sidebarCollapsed ? "px-3 py-4" : "px-6 py-6",
       )}>
         <div className={clsx(
-          "inline-flex items-center rounded-2xl border border-brand-200/70 bg-gradient-to-br from-white to-brand-50 shadow-sm dark:border-brand-900/40 dark:from-[#0d0e22] dark:to-[#13162a]",
+          "inline-flex items-center rounded-2xl border border-brand-200/70 bg-gradient-to-br from-white to-brand-50 shadow-sm dark:border-white/[0.08] dark:from-[rgb(var(--surface-elevated))] dark:to-[rgb(var(--surface-elevated))]",
           sidebarCollapsed ? "p-2" : "gap-3 px-4 py-3",
         )}>
           <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-brand-600 text-white shadow-lg shadow-brand-600/25">
@@ -741,7 +741,7 @@ function DesktopSidebar({
   return (
     <nav
       className={clsx(
-        "hidden shrink-0 border-r border-gray-200/60 bg-white/95 shadow-[1px_0_12px_rgba(0,0,0,0.03)] backdrop-blur-xl backdrop-saturate-150 dark:border-white/[0.06] dark:bg-[#0d0e22]/90 dark:shadow-none lg:flex lg:flex-col",
+        "sidebar-panel hidden shrink-0 border-r border-gray-200/60 bg-white/95 shadow-[1px_0_12px_rgba(0,0,0,0.03)] backdrop-blur-xl backdrop-saturate-150 dark:shadow-none lg:flex lg:flex-col",
         "transition-[width] duration-200 ease-out overflow-hidden",
         sidebarCollapsed ? "w-[72px]" : "w-72",
       )}
@@ -793,7 +793,7 @@ function MobileSidebar({
             animate={{ x: 0 }}
             exit={{ x: -288 }}
             transition={{ type: "spring", stiffness: 400, damping: 35 }}
-            className="fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-gray-200/60 bg-white/95 shadow-2xl backdrop-blur-2xl backdrop-saturate-150 dark:border-white/[0.06] dark:bg-[#0d0e22]/95 lg:hidden"
+            className="sidebar-panel fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-gray-200/60 bg-white/95 shadow-2xl backdrop-blur-2xl backdrop-saturate-150 lg:hidden"
           >
             {/* Close button */}
             <button
@@ -897,7 +897,7 @@ export function AppShell({ children, userRole = "USER" }: { children: React.Reac
         {/* Main content area */}
         <main ref={contentRef} className="flex-1 overflow-auto bg-transparent">
           {/* Mobile hamburger */}
-          <div className="sticky top-0 z-20 flex items-center border-b border-gray-200/60 bg-white/85 px-4 py-2 backdrop-blur-xl dark:border-white/[0.06] dark:bg-[#0d0e22]/82 lg:hidden">
+          <div className="sidebar-panel sticky top-0 z-20 flex items-center border-b border-gray-200/60 bg-white/85 px-4 py-2 backdrop-blur-xl lg:hidden">
             <button
               type="button"
               onClick={() => setMobileOpen(true)}