From 44993ae601bda586be046e53b6e48aa2a1be0285 Mon Sep 17 00:00:00 2001 From: Trey t Date: Tue, 3 Mar 2026 18:26:40 -0600 Subject: [PATCH] feat: simplify theme system to single Warm Sage brand palette Consolidate from 11 themes to one cohesive Warm Sage palette across landing page, auth layout, dashboard components, kanban columns, demo banner, theme picker, and CSS variables. Co-Authored-By: Claude Opus 4.6 --- src/app/(auth)/layout.tsx | 12 +- src/app/demo/page.tsx | 16 +- src/app/globals.css | 41 +- src/app/page.tsx | 106 +- src/components/dashboard/recent-activity.tsx | 4 +- src/components/dashboard/stats-cards.tsx | 10 +- .../dashboard/task-completion-chart.tsx | 8 +- src/components/demo/demo-banner.tsx | 4 +- src/components/forms/auth-form-wrapper.tsx | 2 +- src/components/settings/theme-picker.tsx | 41 +- src/components/tasks/kanban-column.tsx | 12 +- src/components/ui/theme-switcher.tsx | 43 +- src/lib/themes/theme-config.ts | 311 +----- src/lib/themes/theme-provider.tsx | 23 - src/lib/themes/use-theme.ts | 8 +- src/stores/theme.ts | 5 - src/styles/themes.css | 922 +----------------- 17 files changed, 187 insertions(+), 1381 deletions(-) diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx index 9036a1f..73b0912 100644 --- a/src/app/(auth)/layout.tsx +++ b/src/app/(auth)/layout.tsx @@ -7,10 +7,10 @@ export default function AuthLayout({ children }: { children: React.ReactNode }) return (
{/* Left brand panel — hidden on mobile */} -
+
{/* Decorative blurs */} -
-
+
+
{/* Subtle grid */}

Home maintenance,
- simplified. + simplified.

-

+

Track tasks, organize contractors, and store important documents — all in one place built for homeowners.

-

+

© {new Date().getFullYear()} Casera

diff --git a/src/app/demo/page.tsx b/src/app/demo/page.tsx index 6f847c7..94cf5c6 100644 --- a/src/app/demo/page.tsx +++ b/src/app/demo/page.tsx @@ -8,8 +8,8 @@ export default function DemoLandingPage() { return (
{/* Decorative background */} -
-
+
+
{/* Logo */} @@ -21,16 +21,16 @@ export default function DemoLandingPage() { height={36} className="rounded-lg" /> - + Casera {/* Hero */} -

+

See Casera in action

-

+

Explore the full app with sample data. No account needed — just click and start exploring.

@@ -39,7 +39,7 @@ export default function DemoLandingPage() {
Launch Demo @@ -48,9 +48,9 @@ export default function DemoLandingPage() {
{/* Login link */} -

+

Already have an account?{" "} - + Sign In

diff --git a/src/app/globals.css b/src/app/globals.css index dcbfe72..668aca4 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -49,25 +49,40 @@ --radius-4xl: calc(var(--radius) + 16px); /* App-specific theme-aware Tailwind utilities */ - --color-bg-primary: #FFFFFF; - --color-bg-secondary: #F7F7F7; - --color-text-primary: #1C1917; - --color-text-secondary: #78716C; - --color-text-on-primary: #FFFFFF; + --color-bg-primary: var(--color-bg-primary); + --color-bg-secondary: var(--color-bg-secondary); + --color-text-primary: var(--color-text-primary); + --color-text-secondary: var(--color-text-secondary); + --color-text-on-primary: var(--color-text-on-primary); --color-app-primary: var(--color-primary); --color-app-secondary: var(--color-secondary); --color-app-accent: var(--color-accent); --color-app-error: var(--color-error); - /* Landing page brand colors (theme-independent) */ - --color-brand-orange: #E07A3A; - --color-brand-orange-dark: #C4632A; - --color-brand-orange-light: #FFF3EB; - --color-brand-teal: #0D7C66; - --color-brand-teal-light: #ECFDF5; - --color-brand-slate: #1C1917; + /* Brand colors — Warm Sage palette */ + --color-brand-sage: #6B8F71; + --color-brand-sage-light: #EDF2ED; + --color-brand-clay: #C4856A; + --color-brand-clay-light: #FDF3EE; + --color-brand-charcoal: #2D3436; + --color-brand-cream: #FAFAF7; + --color-brand-linen: #F2EFE9; + --color-brand-stone: #E8E3DC; + + /* Legacy brand aliases (for any remaining references) */ + --color-brand-orange: #C4856A; + --color-brand-orange-dark: #A86B52; + --color-brand-orange-light: #FDF3EE; + --color-brand-teal: #6B8F71; + --color-brand-teal-light: #EDF2ED; + --color-brand-slate: #2D3436; --color-brand-warm: #FFFFFF; + /* Warm shadow tokens */ + --shadow-warm-sm: 0 1px 3px rgba(45, 52, 54, 0.06), 0 1px 2px rgba(45, 52, 54, 0.04); + --shadow-warm-md: 0 4px 12px rgba(45, 52, 54, 0.07), 0 2px 4px rgba(45, 52, 54, 0.04); + --shadow-warm-lg: 0 8px 24px rgba(45, 52, 54, 0.08), 0 4px 8px rgba(45, 52, 54, 0.04); + /* Animation tokens */ --animate-fade-up: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; --animate-fade-in: fade-in 0.6s ease both; @@ -76,7 +91,7 @@ } :root { - --radius: 0.625rem; + --radius: 0.75rem; } @layer base { diff --git a/src/app/page.tsx b/src/app/page.tsx index b8b13fe..2a3868d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -18,14 +18,14 @@ const features = [ title: "Smart Task Tracking", description: "Kanban boards, recurring schedules, and due date reminders keep every repair and project on track.", - color: "bg-[#FFF3EB] text-[#E07A3A]", + color: "bg-[#EDF2ED] text-[#6B8F71]", }, { icon: HardHat, title: "Contractor Rolodex", description: "Store contact details, specialties, and notes for every service provider. Never lose a plumber's number again.", - color: "bg-[#ECFDF5] text-[#0D7C66]", + color: "bg-[#FDF3EE] text-[#C4856A]", }, { icon: FileText, @@ -82,9 +82,9 @@ const highlights = [ export default function HomePage() { return ( -
+
{/* ─── Navigation ─── */} -