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
+44 -43
View File
@@ -11,72 +11,73 @@
@layer base { @layer base {
:root { :root {
/* Core palette - Deep slate with teal accent */ /* Core palette - Light blue-gray with teal accent */
--background: 210 20% 98%; --background: 216 22% 94%; /* cool blue-gray — cards lift clearly off this */
--foreground: 222 47% 11%; --foreground: 222 47% 9%; /* near-black navy */
--card: 0 0% 100%; --card: 0 0% 100%; /* pure white — 6% lightness gap over bg */
--card-foreground: 222 47% 11%; --card-foreground: 222 47% 9%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 222 47% 11%; --popover-foreground: 222 47% 9%;
/* Primary - Deep navy for trust */ /* Primary — teal, fully saturated, dark enough to read on white */
--primary: 222 47% 20%; --primary: 173 65% 36%;
--primary-foreground: 210 40% 98%; --primary-foreground: 0 0% 100%;
/* Secondary - Soft slate */ /* Secondary — cool blue-gray, clearly darker than bg */
--secondary: 215 20% 95%; --secondary: 216 20% 91%;
--secondary-foreground: 222 47% 20%; --secondary-foreground: 222 47% 18%;
/* Muted - Subtle backgrounds */ /* Muted — noticeably darker than secondary, used for section bg */
--muted: 215 20% 96%; --muted: 216 18% 88%;
--muted-foreground: 215 16% 47%; --muted-foreground: 222 18% 42%;
/* Accent - Teal for actions and highlights */ /* Accent — same teal as primary */
--accent: 173 58% 39%; --accent: 173 65% 36%;
--accent-foreground: 0 0% 100%; --accent-foreground: 0 0% 100%;
/* Semantic colors */ /* Semantic */
--destructive: 0 72% 51%; --destructive: 0 72% 48%;
--destructive-foreground: 0 0% 100%; --destructive-foreground: 0 0% 100%;
--success: 152 69% 31%; --success: 152 60% 30%;
--success-foreground: 0 0% 100%; --success-foreground: 0 0% 100%;
--warning: 38 92% 50%; --warning: 38 90% 48%;
--warning-foreground: 0 0% 100%; --warning-foreground: 0 0% 100%;
--info: 199 89% 48%; --info: 199 80% 44%;
--info-foreground: 0 0% 100%; --info-foreground: 0 0% 100%;
/* UI elements */ /* UI chrome */
--border: 214 32% 91%; --border: 216 18% 84%; /* clearly visible on white card */
--input: 214 32% 91%; --input: 216 18% 92%;
--ring: 173 58% 39%; --ring: 173 65% 36%;
--radius: 0.5rem; --radius: 0.5rem;
/* Sidebar - Darker for visual hierarchy */ /* Sidebar */
--sidebar-background: 222 47% 11%; --sidebar-background: 222 30% 95%;
--sidebar-foreground: 215 20% 85%; --sidebar-foreground: 222 47% 18%;
--sidebar-primary: 173 58% 45%; --sidebar-primary: 173 65% 36%;
--sidebar-primary-foreground: 0 0% 100%; --sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 222 40% 18%; --sidebar-accent: 216 20% 88%;
--sidebar-accent-foreground: 210 40% 98%; --sidebar-accent-foreground: 222 47% 9%;
--sidebar-border: 222 40% 20%; --sidebar-border: 216 18% 84%;
--sidebar-ring: 173 58% 45%; --sidebar-ring: 173 65% 36%;
--sidebar-muted: 215 16% 55%; --sidebar-muted: 222 20% 48%;
/* Custom gradients and effects */ /* Gradients */
--gradient-brand: linear-gradient(135deg, hsl(222 47% 20%), hsl(222 47% 11%)); --gradient-brand: linear-gradient(135deg, hsl(173 65% 36%), hsl(173 65% 28%));
--gradient-accent: linear-gradient(135deg, hsl(173 58% 39%), hsl(173 58% 32%)); --gradient-accent: linear-gradient(135deg, hsl(173 65% 36%), hsl(173 65% 28%));
--gradient-subtle: linear-gradient(135deg, hsl(210 20% 98%), hsl(215 20% 96%)); --gradient-subtle: linear-gradient(135deg, hsl(216 28% 97%), hsl(216 18% 93%));
--shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05); /* Shadows — stronger alpha so cards lift off the bg */
--shadow-md: 0 4px 6px -1px hsl(222 47% 11% / 0.1), 0 2px 4px -2px hsl(222 47% 11% / 0.1); --shadow-sm: 0 1px 2px 0 hsl(222 47% 9% / 0.10);
--shadow-lg: 0 10px 15px -3px hsl(222 47% 11% / 0.1), 0 4px 6px -4px hsl(222 47% 11% / 0.1); --shadow-md: 0 4px 6px -1px hsl(222 47% 9% / 0.14), 0 2px 4px -2px hsl(222 47% 9% / 0.10);
--shadow-card: 0 1px 3px 0 hsl(222 47% 11% / 0.06), 0 1px 2px -1px hsl(222 47% 11% / 0.06); --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 { .dark {
src/pages/marketing/HomePage.tsx
+5 -8
View File
@@ -80,14 +80,11 @@ export default function HomePage() {
return ( return (
<> <>
{/* Hero Section */} {/* Hero Section */}
<section className="relative overflow-hidden"> <section className="relative overflow-hidden bg-card">
{/* Background gradient */}
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-accent/5 pointer-events-none" />
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 lg:py-32"> <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
<div className="text-center max-w-4xl mx-auto"> <div className="text-center max-w-4xl mx-auto">
{/* Badge */} {/* Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-6"> <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6 border border-primary/20">
<ShieldCheck className="h-4 w-4" /> <ShieldCheck className="h-4 w-4" />
Security-first identity platform Security-first identity platform
</div> </div>
@@ -95,7 +92,7 @@ return (
{/* Headline */} {/* Headline */}
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground mb-6"> <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground mb-6">
Enterprise Authentication, Enterprise Authentication,
<span className="text-accent block mt-2">Without the Enterprise Complexity</span> <span className="text-primary block mt-2">Without the Enterprise Complexity</span>
</h1> </h1>
{/* Subheadline */} {/* Subheadline */}
@@ -423,13 +420,13 @@ return (
</p> </p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register"> <Link to="/register">
<Button size="lg" variant="secondary" className="gap-2"> <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
Start Free Trial Start Free Trial
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<Link to="/pricing"> <Link to="/pricing">
<Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10"> <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
View Pricing View Pricing
</Button> </Button>
</Link> </Link>