coryHawkvelt/gatehouse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: UI Light Mode

Browse Source
This commit is contained in:
James Bhattarai
2026-03-23 22:20:52 +05:45
parent 7c68886e20
commit 7003bbf8c6
2 changed files with 50 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+45 -44
View File
@@ -11,72 +11,73 @@
@layer base {
:root {
/* Core palette - Deep slate with teal accent */
--background: 210 20% 98%;
--foreground: 222 47% 11%;
/* Core palette - Light blue-gray with teal accent */
--background: 216 22% 94%; /* cool blue-gray — cards lift clearly off this */
--foreground: 222 47% 9%; /* near-black navy */
--card: 0 0% 100%;
--card-foreground: 222 47% 11%;
--card: 0 0% 100%; /* pure white — 6% lightness gap over bg */
--card-foreground: 222 47% 9%;
--popover: 0 0% 100%;
--popover-foreground: 222 47% 11%;
--popover-foreground: 222 47% 9%;
/* Primary - Deep navy for trust */
--primary: 222 47% 20%;
--primary-foreground: 210 40% 98%;
/* Primary — teal, fully saturated, dark enough to read on white */
--primary: 173 65% 36%;
--primary-foreground: 0 0% 100%;
/* Secondary - Soft slate */
--secondary: 215 20% 95%;
--secondary-foreground: 222 47% 20%;
/* Secondary — cool blue-gray, clearly darker than bg */
--secondary: 216 20% 91%;
--secondary-foreground: 222 47% 18%;
/* Muted - Subtle backgrounds */
--muted: 215 20% 96%;
--muted-foreground: 215 16% 47%;
/* Muted — noticeably darker than secondary, used for section bg */
--muted: 216 18% 88%;
--muted-foreground: 222 18% 42%;
/* Accent - Teal for actions and highlights */
--accent: 173 58% 39%;
/* Accent — same teal as primary */
--accent: 173 65% 36%;
--accent-foreground: 0 0% 100%;
/* Semantic colors */
--destructive: 0 72% 51%;
/* Semantic */
--destructive: 0 72% 48%;
--destructive-foreground: 0 0% 100%;
--success: 152 69% 31%;
--success: 152 60% 30%;
--success-foreground: 0 0% 100%;
--warning: 38 92% 50%;
--warning: 38 90% 48%;
--warning-foreground: 0 0% 100%;
--info: 199 89% 48%;
--info: 199 80% 44%;
--info-foreground: 0 0% 100%;
/* UI elements */
--border: 214 32% 91%;
--input: 214 32% 91%;
--ring: 173 58% 39%;
/* UI chrome */
--border: 216 18% 84%; /* clearly visible on white card */
--input: 216 18% 92%;
--ring: 173 65% 36%;
--radius: 0.5rem;
/* Sidebar - Darker for visual hierarchy */
--sidebar-background: 222 47% 11%;
--sidebar-foreground: 215 20% 85%;
--sidebar-primary: 173 58% 45%;
/* Sidebar */
--sidebar-background: 222 30% 95%;
--sidebar-foreground: 222 47% 18%;
--sidebar-primary: 173 65% 36%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 222 40% 18%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 222 40% 20%;
--sidebar-ring: 173 58% 45%;
--sidebar-muted: 215 16% 55%;
--sidebar-accent: 216 20% 88%;
--sidebar-accent-foreground: 222 47% 9%;
--sidebar-border: 216 18% 84%;
--sidebar-ring: 173 65% 36%;
--sidebar-muted: 222 20% 48%;
/* Custom gradients and effects */
--gradient-brand: linear-gradient(135deg, hsl(222 47% 20%), hsl(222 47% 11%));
--gradient-accent: linear-gradient(135deg, hsl(173 58% 39%), hsl(173 58% 32%));
--gradient-subtle: linear-gradient(135deg, hsl(210 20% 98%), hsl(215 20% 96%));
--shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05);
--shadow-md: 0 4px 6px -1px hsl(222 47% 11% / 0.1), 0 2px 4px -2px hsl(222 47% 11% / 0.1);
--shadow-lg: 0 10px 15px -3px hsl(222 47% 11% / 0.1), 0 4px 6px -4px hsl(222 47% 11% / 0.1);
--shadow-card: 0 1px 3px 0 hsl(222 47% 11% / 0.06), 0 1px 2px -1px hsl(222 47% 11% / 0.06);
/* Gradients */
--gradient-brand: linear-gradient(135deg, hsl(173 65% 36%), hsl(173 65% 28%));
--gradient-accent: linear-gradient(135deg, hsl(173 65% 36%), hsl(173 65% 28%));
--gradient-subtle: linear-gradient(135deg, hsl(216 28% 97%), hsl(216 18% 93%));
/* Shadows — stronger alpha so cards lift off the bg */
--shadow-sm: 0 1px 2px 0 hsl(222 47% 9% / 0.10);
--shadow-md: 0 4px 6px -1px hsl(222 47% 9% / 0.14), 0 2px 4px -2px hsl(222 47% 9% / 0.10);
--shadow-lg: 0 10px 15px -3px hsl(222 47% 9% / 0.14), 0 4px 6px -4px hsl(222 47% 9% / 0.10);
--shadow-card: 0 2px 6px 0 hsl(222 47% 9% / 0.10), 0 1px 2px -1px hsl(222 47% 9% / 0.08);
}
.dark {