From 1a2f7de5bd0ae710dcd337061a7f0d889f8e4ed0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= Date: Thu, 9 Apr 2026 22:17:50 +0200 Subject: [PATCH] fix(ui): replace hardcoded purple values with accent-adaptive CSS variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Dark surface vars changed from purple-navy (8 8 22) to neutral near-black (10 10 12) so sky/emerald/amber accent themes no longer have a purple cast - Light surface vars made nearly neutral (252 252 253) — lavender tint removed - All rgba(100, 80, 160, ...) replaced with rgb(var(--accent-400) / ...) in .app-surface, .app-surface-strong, and .app-toolbar shadows/borders - .app-page-title dark gradient midpoint changed from hardcoded #e8e4ff to rgb(var(--accent-100)) so it adapts to the chosen accent color - Body light-mode background gradient opacity reduced to avoid over-tinting Co-Authored-By: Claude Sonnet 4.6 --- apps/web/src/app/globals.css | 43 ++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 68d87fe..fdb8437 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -90,9 +90,9 @@ /* ─── Light Theme Surface Variables ─────────────────────────────────────── */ :root { - --surface-page: 253 251 255; + --surface-page: 252 252 253; --surface-card: 255 255 255; - --surface-elevated: 248 246 255; + --surface-elevated: 250 250 251; --surface-input: 255 255 255; --border-subtle: 219 224 232; --border-input: 197 205 218; @@ -108,12 +108,12 @@ .dark { color-scheme: dark; - --surface-page: 8 8 22; - --surface-card: 13 14 34; - --surface-elevated: 19 20 46; - --surface-input: 11 12 30; - --border-subtle: 38 42 68; - --border-input: 58 64 98; + --surface-page: 10 10 12; + --surface-card: 16 17 19; + --surface-elevated: 22 23 26; + --surface-input: 13 14 16; + --border-subtle: 36 38 44; + --border-input: 54 57 66; --text-primary: 237 242 247; --text-secondary: 196 207 223; --text-muted: 147 161 185; @@ -132,11 +132,10 @@ background-color 0.15s ease, color 0.15s ease; background-image: - radial-gradient(ellipse 80% 40% at 50% -5%, rgba(var(--accent-300), 0.05) 0%, transparent 55%), - radial-gradient(ellipse at 0% 0%, rgb(var(--accent-50) / 0.15), transparent 50%), - radial-gradient(ellipse at 100% 100%, rgb(var(--accent-100) / 0.08), transparent 50%), - radial-gradient(circle at top left, rgb(var(--accent-100) / 0.32), transparent 24rem), - linear-gradient(180deg, rgb(255 255 255 / 0.72), transparent 24rem); + radial-gradient(ellipse 80% 40% at 50% -5%, rgb(var(--accent-300) / 0.04) 0%, transparent 55%), + radial-gradient(ellipse at 0% 0%, rgb(var(--accent-50) / 0.10), transparent 50%), + radial-gradient(ellipse at 100% 100%, rgb(var(--accent-100) / 0.06), transparent 50%), + linear-gradient(180deg, rgb(255 255 255 / 0.60), transparent 20rem); text-rendering: optimizeLegibility; } @@ -354,8 +353,8 @@ @layer components { .app-surface { @apply rounded-2xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900/90; - background: linear-gradient(145deg, #ffffff 0%, #fdfbff 100%); - --tw-shadow: 0 1px 3px rgba(100, 80, 160, 0.06), 0 4px 16px rgba(100, 80, 160, 0.04); + background: linear-gradient(145deg, #ffffff 0%, #fdfdfd 100%); + --tw-shadow: 0 1px 3px rgb(var(--accent-400) / 0.06), 0 4px 16px rgb(var(--accent-400) / 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -370,8 +369,8 @@ .app-surface-strong { @apply rounded-3xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900; - background: linear-gradient(145deg, #ffffff 0%, #fdfbff 100%); - --tw-shadow: 0 2px 8px rgba(100, 80, 160, 0.06), 0 8px 24px rgba(100, 80, 160, 0.04); + background: linear-gradient(145deg, #ffffff 0%, #fdfdfd 100%); + --tw-shadow: 0 2px 8px rgb(var(--accent-400) / 0.06), 0 8px 24px rgb(var(--accent-400) / 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -386,15 +385,15 @@ .app-toolbar { @apply sticky top-0 z-10 rounded-2xl border p-4; - background: rgba(253,251,255,0.85); + background: rgb(255 255 255 / 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); - border-color: rgba(100,80,160,0.12); - box-shadow: 0 1px 3px rgba(100,80,160,0.06); + border-color: rgb(var(--accent-400) / 0.12); + box-shadow: 0 1px 3px rgb(var(--accent-400) / 0.06); } :is(.dark) .app-toolbar { - background: rgba(13,14,34,0.82); + background: rgb(16 17 19 / 0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(255,255,255,0.08); @@ -440,7 +439,7 @@ } :is(.dark) .app-page-title { - background: linear-gradient(135deg, rgb(var(--accent-200)) 0%, #e8e4ff 50%, rgb(237 242 247) 100%); + background: linear-gradient(135deg, rgb(var(--accent-200)) 0%, rgb(var(--accent-100)) 50%, rgb(237 242 247) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;