Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): replace hardcoded purple values with accent-adaptive CSS variables

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-04-09 22:17:50 +02:00
parent 1383169352
commit 1a2f7de5bd
1 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/globals.css
+21 -22
View File
@@ -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;