Skip to content

feat: premium color grading overhaul #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shibinsp merged 1 commit into from
Mar 14, 2026
Merged

feat: premium color grading overhaul #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion Frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
"dependencies": {
"@gsap/react": "^2.1.2",
"@hookform/resolvers": "^5.2.2",
"@supabase/supabase-js": "^2.49.0",
"@radix-ui/react-accordion": "^1.2.12",
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-aspect-ratio": "^1.1.8",
Expand Down Expand Up @@ -44,6 +43,7 @@
"@radix-ui/react-tooltip": "^1.2.8",
"@react-three/drei": "^10.7.7",
"@react-three/fiber": "^9.5.0",
"@supabase/supabase-js": "^2.99.1",
"@tanstack/react-query": "^5.90.20",
"@types/react-router-dom": "^5.3.3",
"axios": "^1.13.4",
Expand Down
32 changes: 16 additions & 16 deletions Frontend/src/components/layout/DashboardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,10 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
initial={false}
animate={{ width: sidebarOpen ? 280 : 80 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
className="hidden lg:flex flex-col border-r border-border/50 bg-card/50 backdrop-blur-xl fixed h-full z-30"
className="hidden lg:flex flex-col border-r border-sidebar-border bg-sidebar fixed h-full z-30"
>
{/* Logo */}
<div className="h-16 flex items-center px-4 border-b border-border/50">
<div className="h-16 flex items-center px-4 border-b border-sidebar-border">
<Link to="/dashboard" className="flex items-center gap-3 overflow-hidden">
<img src="/beeax-logo.jpeg" alt="TaskPulse" className="w-10 h-10 rounded-xl object-cover flex-shrink-0" />
<AnimatePresence>
Expand All @@ -119,7 +119,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -10 }}
className="text-lg font-bold whitespace-nowrap"
className="text-lg font-bold whitespace-nowrap text-foreground"
>
TaskPulse
</motion.span>
Expand All @@ -141,8 +141,8 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
title={!sidebarOpen ? item.label : undefined}
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 group relative ${
isActive
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
? 'bg-sidebar-primary text-sidebar-primary-foreground'
: 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
} ${!sidebarOpen ? 'justify-center' : ''}`}
>
<Icon className={`w-5 h-5 flex-shrink-0 ${isActive ? '' : 'group-hover:scale-110'} transition-transform`} />
Expand Down Expand Up @@ -171,14 +171,14 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
</nav>

{/* Bottom Actions */}
<div className="p-3 border-t border-border/50 space-y-1">
<div className="p-3 border-t border-sidebar-border space-y-1">
<Link
to="/settings"
title={!sidebarOpen ? 'Settings' : undefined}
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 group relative ${
location.pathname === '/settings'
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
? 'bg-sidebar-primary text-sidebar-primary-foreground'
: 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
} ${!sidebarOpen ? 'justify-center' : ''}`}
>
<Settings className="w-5 h-5 flex-shrink-0" />
Expand All @@ -200,7 +200,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {

<button
onClick={toggleSidebar}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-muted-foreground hover:bg-muted hover:text-foreground transition-all duration-200"
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-all duration-200"
>
{sidebarOpen ? (
<>
Expand Down Expand Up @@ -239,14 +239,14 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
initial={{ x: '-100%' }}
animate={{ x: mobileMenuOpen ? 0 : '-100%' }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
className="lg:hidden fixed left-0 top-0 bottom-0 w-72 bg-card border-r border-border/50 z-50 flex flex-col"
className="lg:hidden fixed left-0 top-0 bottom-0 w-72 bg-sidebar border-r border-sidebar-border z-50 flex flex-col"
>
<div className="h-16 flex items-center justify-between px-4 border-b border-border/50">
<div className="h-16 flex items-center justify-between px-4 border-b border-sidebar-border">
<Link to="/dashboard" className="flex items-center gap-3">
<img src="/beeax-logo.jpeg" alt="TaskPulse" className="w-10 h-10 rounded-xl object-cover" />
<span className="text-lg font-bold">TaskPulse</span>
<span className="text-lg font-bold text-foreground">TaskPulse</span>
</Link>
<button onClick={() => setMobileMenuOpen(false)}>
<button onClick={() => setMobileMenuOpen(false)} className="text-muted-foreground hover:text-foreground">
<X className="w-6 h-6" />
</button>
</div>
Expand All @@ -255,16 +255,16 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
{sidebarItems.map((item) => {
const isActive = location.pathname === item.href;
const Icon = item.icon;

return (
<Link
key={item.href}
to={item.href}
onClick={() => setMobileMenuOpen(false)}
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 ${
isActive
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
? 'bg-sidebar-primary text-sidebar-primary-foreground'
: 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
}`}
>
<Icon className="w-5 h-5" />
Expand Down
119 changes: 70 additions & 49 deletions Frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,38 +10,49 @@

@layer base {
:root {
--background: 39 89% 95%;
--foreground: 0 0% 10%;
--card: 43 100% 95%;
--card-foreground: 0 0% 10%;
--popover: 43 100% 95%;
--popover-foreground: 0 0% 10%;
--primary: 44 80% 46%;
/* Premium neutral foundation — white cards on light gray */
--background: 210 20% 98%;
--foreground: 222 47% 11%;
--card: 0 0% 100%;
--card-foreground: 222 47% 11%;
--popover: 0 0% 100%;
--popover-foreground: 222 47% 11%;
--primary: 43 82% 46%;
--primary-foreground: 0 0% 100%;
--secondary: 40 46% 89%;
--secondary-foreground: 0 0% 10%;
--muted: 40 30% 92%;
--secondary: 220 14% 96%;
--secondary-foreground: 215 16% 47%;
--muted: 220 14% 96%;
--muted-foreground: 220 9% 46%;
--accent: 40 46% 89%;
--accent-foreground: 0 0% 10%;
--destructive: 6 64% 46%;
--accent: 220 14% 96%;
--accent-foreground: 222 47% 11%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 98%;
--border: 41 22% 87%;
--input: 41 22% 87%;
--ring: 44 80% 46%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 43 82% 46%;
--radius: 0.75rem;

/* Custom Theme Variables */
--accent-primary: 44 80% 46%;
--accent-primary: 43 82% 46%;
--accent-secondary: 28 80% 52%;
--success: 145 63% 42%;
--warning: 28 80% 52%;
--info: 180 64% 46%;

/* Glassmorphism */
--glass-bg: rgba(253, 245, 230, 0.65);
--glass-border: rgba(255, 248, 231, 0.5);
--glass-shadow: 0 8px 32px 0 rgba(212, 160, 23, 0.08);
/* Light sidebar — clean white with subtle separation */
--sidebar-background: 0 0% 100%;
--sidebar-foreground: 215 16% 47%;
--sidebar-primary: 43 82% 46%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 220 14% 96%;
--sidebar-accent-foreground: 222 47% 11%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 43 82% 46%;

/* Glassmorphism — clean white frost */
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-border: rgba(255, 255, 255, 0.5);
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.04);

/* Animation */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
Expand All @@ -51,25 +62,35 @@
}

.dark {
--background: 214 33% 8%;
--foreground: 0 0% 98%;
--card: 214 32% 17%;
--card-foreground: 0 0% 98%;
--popover: 214 33% 8%;
--popover-foreground: 0 0% 98%;
--primary: 44 90% 61%;
--primary-foreground: 0 0% 10%;
--secondary: 214 25% 14%;
--secondary-foreground: 0 0% 98%;
--muted: 214 25% 14%;
--background: 222 47% 7%;
--foreground: 210 20% 98%;
--card: 222 40% 12%;
--card-foreground: 210 20% 98%;
--popover: 222 40% 10%;
--popover-foreground: 210 20% 98%;
--primary: 43 90% 55%;
--primary-foreground: 222 47% 7%;
--secondary: 222 30% 15%;
--secondary-foreground: 210 20% 98%;
--muted: 222 30% 15%;
--muted-foreground: 218 11% 65%;
--accent: 214 25% 14%;
--accent-foreground: 0 0% 98%;
--destructive: 6 64% 40%;
--accent: 222 30% 15%;
--accent-foreground: 210 20% 98%;
--destructive: 0 62% 50%;
--destructive-foreground: 0 0% 98%;
--border: 214 20% 20%;
--input: 214 20% 20%;
--ring: 44 90% 61%;
--border: 222 25% 18%;
--input: 222 25% 18%;
--ring: 43 90% 55%;

/* Dark sidebar — even darker than content */
--sidebar-background: 222 47% 5%;
--sidebar-foreground: 215 20% 60%;
--sidebar-primary: 43 90% 55%;
--sidebar-primary-foreground: 222 47% 5%;
--sidebar-accent: 222 35% 10%;
--sidebar-accent-foreground: 210 20% 85%;
--sidebar-border: 222 25% 12%;
--sidebar-ring: 43 90% 55%;

/* Dark Glassmorphism */
--glass-bg: rgba(30, 42, 58, 0.6);
Expand Down Expand Up @@ -207,25 +228,25 @@
@apply bg-blue-500/10 text-blue-500 border-blue-500/20;
}

/* Animated Mesh Gradient - Light Mode */
/* Animated Mesh Gradient - Light Mode (subtle multi-color) */
.mesh-gradient {
background:
radial-gradient(at 20% 20%, rgba(212, 160, 23, 0.15) 0%, transparent 50%),
radial-gradient(at 80% 10%, rgba(245, 197, 66, 0.12) 0%, transparent 40%),
radial-gradient(at 60% 60%, rgba(230, 126, 34, 0.10) 0%, transparent 50%),
radial-gradient(at 10% 80%, rgba(139, 94, 60, 0.12) 0%, transparent 40%),
radial-gradient(at 90% 90%, rgba(184, 134, 11, 0.10) 0%, transparent 50%);
radial-gradient(at 20% 20%, rgba(212, 160, 23, 0.05) 0%, transparent 50%),
radial-gradient(at 80% 10%, rgba(42, 191, 191, 0.03) 0%, transparent 40%),
radial-gradient(at 60% 60%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
radial-gradient(at 10% 80%, rgba(39, 174, 96, 0.03) 0%, transparent 40%),
radial-gradient(at 90% 90%, rgba(184, 134, 11, 0.04) 0%, transparent 50%);
animation: meshShift 12s ease-in-out infinite alternate;
}

/* Animated Mesh Gradient - Dark Mode */
.dark .mesh-gradient {
background:
radial-gradient(at 20% 20%, rgba(212, 160, 23, 0.20) 0%, transparent 50%),
radial-gradient(at 80% 10%, rgba(245, 197, 66, 0.15) 0%, transparent 40%),
radial-gradient(at 60% 60%, rgba(230, 126, 34, 0.12) 0%, transparent 50%),
radial-gradient(at 10% 80%, rgba(139, 94, 60, 0.15) 0%, transparent 40%),
radial-gradient(at 90% 90%, rgba(184, 134, 11, 0.10) 0%, transparent 50%);
radial-gradient(at 20% 20%, rgba(212, 160, 23, 0.12) 0%, transparent 50%),
radial-gradient(at 80% 10%, rgba(42, 191, 191, 0.06) 0%, transparent 40%),
radial-gradient(at 60% 60%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
radial-gradient(at 10% 80%, rgba(39, 174, 96, 0.06) 0%, transparent 40%),
radial-gradient(at 90% 90%, rgba(184, 134, 11, 0.08) 0%, transparent 50%);
}

/* Animated Rotating Border */
Expand Down
32 changes: 19 additions & 13 deletions Frontend/src/store/themeStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ interface ThemeState {
toggleMode: () => void;
}

const accentColors: Record<AccentColor, { primary: string; secondary: string }> = {
gold: { primary: '44 80% 46%', secondary: '28 80% 52%' },
amber: { primary: '44 90% 61%', secondary: '43 89% 38%' },
blue: { primary: '217.2 91.2% 59.8%', secondary: '221.2 83.2% 53.3%' },
teal: { primary: '180 64% 46%', secondary: '180 64% 36%' },
green: { primary: '145 63% 42%', secondary: '145 63% 32%' },
orange: { primary: '28 80% 52%', secondary: '20 90% 48%' },
olive: { primary: '60 100% 27%', secondary: '60 80% 22%' },
const accentColors: Record<AccentColor, { primary: string; primaryDark: string; secondary: string }> = {
gold: { primary: '43 82% 46%', primaryDark: '43 90% 55%', secondary: '28 80% 52%' },
amber: { primary: '38 92% 50%', primaryDark: '38 92% 60%', secondary: '43 89% 38%' },
blue: { primary: '217 91% 60%', primaryDark: '217 91% 65%', secondary: '221 83% 53%' },
teal: { primary: '180 64% 46%', primaryDark: '180 64% 56%', secondary: '180 64% 36%' },
green: { primary: '145 63% 42%', primaryDark: '145 63% 52%', secondary: '145 63% 32%' },
orange: { primary: '28 80% 52%', primaryDark: '28 80% 62%', secondary: '20 90% 48%' },
olive: { primary: '60 100% 27%', primaryDark: '60 100% 37%', secondary: '60 80% 22%' },
};

export const useThemeStore = create<ThemeState>()(
Expand Down Expand Up @@ -55,22 +55,28 @@ export function applyTheme(mode: ThemeMode, accent: AccentColor) {
const root = document.documentElement;
const colors = accentColors[accent] ?? accentColors.gold;

// Apply accent colors
root.style.setProperty('--accent-primary', colors.primary);
root.style.setProperty('--accent-secondary', colors.secondary);

// Handle system preference
let effectiveMode = mode;
if (mode === 'system') {
effectiveMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

// Apply mode
if (effectiveMode === 'dark') {
root.classList.add('dark');
} else {
root.classList.remove('dark');
}

// Apply accent colors — update primary, ring, and sidebar to match
const isDark = effectiveMode === 'dark';
const primaryValue = isDark ? colors.primaryDark : colors.primary;
root.style.setProperty('--primary', primaryValue);
root.style.setProperty('--ring', primaryValue);
root.style.setProperty('--sidebar-primary', primaryValue);
root.style.setProperty('--sidebar-ring', primaryValue);
root.style.setProperty('--accent-primary', colors.primary);
root.style.setProperty('--accent-secondary', colors.secondary);
}

// Initialize theme on load
Expand Down
2 changes: 2 additions & 0 deletions Frontend/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ module.exports = {
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
primary: "hsl(var(--accent-primary))",
secondary: "hsl(var(--accent-secondary))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
Expand Down
Loading