feat(ui): implement dynamic view transitions and ambient gradients for themes
This commit is contained in:
Rafif-Riqullah-Siregar committed
1 parent
c7ad4a2da9
commit
31f087b0ba
18 files changed
+1577
-199
No files matched your search
+433
-20
@@ -3,12 +3,12 @@
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
|
||||
--color-border: var(--border);
|
||||
|
||||
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
|
||||
@@ -22,7 +22,33 @@
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
|
||||
--color-sidebar: var(--sidebar);
|
||||
|
||||
|
||||
/* OVERRIDE TAILWIND HARDCODED COLORS FOR SEAMLESS LIGHT MODE */
|
||||
--color-slate-900: var(--slate-900);
|
||||
--color-slate-800: var(--slate-800);
|
||||
--color-slate-700: var(--slate-700);
|
||||
--color-slate-600: var(--slate-600);
|
||||
--color-slate-500: var(--slate-500);
|
||||
--color-slate-400: var(--slate-400);
|
||||
--color-slate-300: var(--slate-300);
|
||||
--color-slate-200: var(--slate-200);
|
||||
--color-slate-100: var(--slate-100);
|
||||
--color-slate-50: var(--slate-50);
|
||||
|
||||
--color-gray-900: var(--slate-900);
|
||||
--color-gray-800: var(--slate-800);
|
||||
--color-gray-700: var(--slate-700);
|
||||
--color-gray-600: var(--slate-600);
|
||||
--color-gray-500: var(--slate-500);
|
||||
--color-gray-400: var(--slate-400);
|
||||
--color-gray-300: var(--slate-300);
|
||||
--color-gray-200: var(--slate-200);
|
||||
--color-gray-100: var(--slate-100);
|
||||
--color-gray-50: var(--slate-50);
|
||||
|
||||
--color-white: var(--t-white);
|
||||
--color-black: var(--t-black);
|
||||
|
||||
--font-sans: var(--font-inter);
|
||||
--font-mono: var(--font-inter);
|
||||
|
||||
@@ -31,47 +57,434 @@
|
||||
--animate-slide-up: slide-up 0.5s ease-out forwards;
|
||||
|
||||
@keyframes fade-in {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
0% { opacity: 0; transform: translateY(20px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Premium Dark Theme */
|
||||
--background: #09090b; /* Very dark zinc */
|
||||
--background: #09090b;
|
||||
/* Very dark zinc */
|
||||
--foreground: #fafafa;
|
||||
|
||||
--card: rgba(24, 24, 27, 0.7); /* Zinc 900 with transparency for glassmorphism */
|
||||
|
||||
--card: rgba(24, 24, 27, 0.7);
|
||||
/* Zinc 900 with transparency for glassmorphism */
|
||||
--card-foreground: #fafafa;
|
||||
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--primary: #3b82f6; /* Blue 500 */
|
||||
--primary: #3b82f6;
|
||||
/* Blue 500 */
|
||||
--primary-foreground: #ffffff;
|
||||
|
||||
--secondary: rgba(39, 39, 42, 0.8); /* Zinc 800 */
|
||||
--secondary: rgba(39, 39, 42, 0.8);
|
||||
/* Zinc 800 */
|
||||
--secondary-foreground: #fafafa;
|
||||
|
||||
--muted: rgba(39, 39, 42, 0.5);
|
||||
--muted-foreground: #a1a1aa; /* Zinc 400 */
|
||||
--muted-foreground: #a1a1aa;
|
||||
/* Zinc 400 */
|
||||
|
||||
--destructive: #ef4444; /* Red 500 */
|
||||
--destructive: #ef4444;
|
||||
/* Red 500 */
|
||||
--destructive-foreground: #ffffff;
|
||||
|
||||
|
||||
--sidebar: #09090b;
|
||||
|
||||
/* Overrides for hardcoded colors in Dark Mode (Normal) */
|
||||
--t-white: #ffffff;
|
||||
--t-black: #000000;
|
||||
--slate-900: #0f172a;
|
||||
--slate-800: #1e293b;
|
||||
--slate-700: #334155;
|
||||
--slate-600: #475569;
|
||||
--slate-500: #64748b;
|
||||
--slate-400: #94a3b8;
|
||||
--slate-300: #cbd5e1;
|
||||
--slate-200: #e2e8f0;
|
||||
--slate-100: #f1f5f9;
|
||||
--slate-50: #f8fafc;
|
||||
}
|
||||
|
||||
.light {
|
||||
/* Clean Light Theme */
|
||||
--background: #f1f5f9;
|
||||
/* Slate 100 */
|
||||
--foreground: #0f172a;
|
||||
|
||||
--card: rgba(255, 255, 255, 0.9);
|
||||
--card-foreground: #0f172a;
|
||||
|
||||
--border: rgba(0, 0, 0, 0.1);
|
||||
|
||||
--primary: #2563eb;
|
||||
/* Blue 600 */
|
||||
--primary-foreground: #ffffff;
|
||||
|
||||
--secondary: rgba(241, 245, 249, 0.8);
|
||||
/* Slate 100 */
|
||||
--secondary-foreground: #0f172a;
|
||||
|
||||
--muted: rgba(226, 232, 240, 0.5);
|
||||
/* Slate 200 */
|
||||
--muted-foreground: #64748b;
|
||||
/* Slate 500 */
|
||||
|
||||
--sidebar: #ffffff;
|
||||
|
||||
/* Overrides for hardcoded colors in Light Mode (Inverted) */
|
||||
--t-white: #0f172a;
|
||||
/* Make text-white become very dark slate */
|
||||
--t-black: #ffffff;
|
||||
--slate-900: #ffffff;
|
||||
--slate-800: #f8fafc;
|
||||
--slate-700: #f1f5f9;
|
||||
--slate-600: #e2e8f0;
|
||||
--slate-500: #cbd5e1;
|
||||
--slate-400: #64748b;
|
||||
/* Keep 400 slightly dark so it stays readable */
|
||||
--slate-300: #475569;
|
||||
--slate-200: #334155;
|
||||
--slate-100: #1e293b;
|
||||
--slate-50: #0f172a;
|
||||
|
||||
/* Enhance contrast for colored text and backgrounds in Light Mode */
|
||||
|
||||
/* RED */
|
||||
--color-red-300: #b91c1c;
|
||||
/* red-700 */
|
||||
--color-red-400: #dc2626;
|
||||
/* red-600 */
|
||||
--color-red-500: #b91c1c;
|
||||
/* red-700 */
|
||||
--color-red-950: #ef4444;
|
||||
/* red-500 (so that 950/20 becomes a visible pink bg) */
|
||||
|
||||
/* ORANGE */
|
||||
--color-orange-300: #c2410c;
|
||||
/* orange-700 */
|
||||
--color-orange-400: #ea580c;
|
||||
/* orange-600 */
|
||||
--color-orange-500: #c2410c;
|
||||
/* orange-700 */
|
||||
--color-orange-950: #f97316;
|
||||
/* orange-500 */
|
||||
|
||||
/* YELLOW */
|
||||
--color-yellow-300: #a16207;
|
||||
/* yellow-700 */
|
||||
--color-yellow-400: #ca8a04;
|
||||
/* yellow-600 */
|
||||
--color-yellow-500: #a16207;
|
||||
/* yellow-700 */
|
||||
--color-yellow-950: #eab308;
|
||||
/* yellow-500 */
|
||||
|
||||
/* GREEN */
|
||||
--color-green-300: #15803d;
|
||||
/* green-700 */
|
||||
--color-green-400: #16a34a;
|
||||
/* green-600 */
|
||||
--color-green-500: #15803d;
|
||||
/* green-700 */
|
||||
--color-green-950: #22c55e;
|
||||
/* green-500 */
|
||||
|
||||
/* EMERALD */
|
||||
--color-emerald-300: #047857;
|
||||
/* emerald-700 */
|
||||
--color-emerald-400: #059669;
|
||||
/* emerald-600 */
|
||||
--color-emerald-500: #047857;
|
||||
/* emerald-700 */
|
||||
--color-emerald-950: #10b981;
|
||||
/* emerald-500 */
|
||||
|
||||
/* BLUE */
|
||||
--color-blue-300: #1d4ed8;
|
||||
/* blue-700 */
|
||||
--color-blue-400: #2563eb;
|
||||
/* blue-600 */
|
||||
--color-blue-500: #1d4ed8;
|
||||
/* blue-700 */
|
||||
--color-blue-950: #3b82f6;
|
||||
/* blue-500 */
|
||||
|
||||
/* PURPLE */
|
||||
--color-purple-300: #7e22ce;
|
||||
/* purple-700 */
|
||||
--color-purple-400: #9333ea;
|
||||
/* purple-600 */
|
||||
--color-purple-500: #7e22ce;
|
||||
/* purple-700 */
|
||||
--color-purple-950: #a855f7;
|
||||
/* purple-500 */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans), sans-serif;
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* 1-Second Dual-Layer Smooth Background Crossfade */
|
||||
|
||||
:root {
|
||||
/* Premium Dark Theme */
|
||||
--background: #09090b;
|
||||
/* Very dark zinc */
|
||||
--foreground: #fafafa;
|
||||
|
||||
--card: rgba(24, 24, 27, 0.7);
|
||||
/* Zinc 900 with transparency for glassmorphism */
|
||||
--card-foreground: #fafafa;
|
||||
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--primary: #3b82f6;
|
||||
/* Blue 500 */
|
||||
--primary-foreground: #ffffff;
|
||||
|
||||
--secondary: rgba(39, 39, 42, 0.8);
|
||||
/* Zinc 800 */
|
||||
--secondary-foreground: #fafafa;
|
||||
|
||||
--muted: rgba(39, 39, 42, 0.5);
|
||||
--muted-foreground: #a1a1aa;
|
||||
/* Zinc 400 */
|
||||
|
||||
--destructive: #ef4444;
|
||||
/* Red 500 */
|
||||
--destructive-foreground: #ffffff;
|
||||
|
||||
--sidebar: #09090b;
|
||||
|
||||
/* Overrides for hardcoded colors in Dark Mode (Normal) */
|
||||
--t-white: #ffffff;
|
||||
--t-black: #000000;
|
||||
--slate-900: #0f172a;
|
||||
--slate-800: #1e293b;
|
||||
--slate-700: #334155;
|
||||
--slate-600: #475569;
|
||||
--slate-500: #64748b;
|
||||
--slate-400: #94a3b8;
|
||||
--slate-300: #cbd5e1;
|
||||
--slate-200: #e2e8f0;
|
||||
--slate-100: #f1f5f9;
|
||||
--slate-50: #f8fafc;
|
||||
}
|
||||
|
||||
.light {
|
||||
/* Clean Light Theme */
|
||||
--background: #f1f5f9;
|
||||
/* Slate 100 */
|
||||
--foreground: #0f172a;
|
||||
|
||||
--card: rgba(255, 255, 255, 0.9);
|
||||
--card-foreground: #0f172a;
|
||||
|
||||
--border: rgba(0, 0, 0, 0.1);
|
||||
|
||||
--primary: #2563eb;
|
||||
/* Blue 600 */
|
||||
--primary-foreground: #ffffff;
|
||||
|
||||
--secondary: rgba(241, 245, 249, 0.8);
|
||||
/* Slate 100 */
|
||||
--secondary-foreground: #0f172a;
|
||||
|
||||
--muted: rgba(226, 232, 240, 0.5);
|
||||
/* Slate 200 */
|
||||
--muted-foreground: #64748b;
|
||||
/* Slate 500 */
|
||||
|
||||
--sidebar: #ffffff;
|
||||
|
||||
/* Overrides for hardcoded colors in Light Mode (Inverted) */
|
||||
--t-white: #0f172a;
|
||||
/* Make text-white become very dark slate */
|
||||
--t-black: #ffffff;
|
||||
--slate-900: #ffffff;
|
||||
--slate-800: #f8fafc;
|
||||
--slate-700: #f1f5f9;
|
||||
--slate-600: #e2e8f0;
|
||||
--slate-500: #cbd5e1;
|
||||
--slate-400: #64748b;
|
||||
/* Keep 400 slightly dark so it stays readable */
|
||||
--slate-300: #475569;
|
||||
--slate-200: #334155;
|
||||
--slate-100: #1e293b;
|
||||
--slate-50: #0f172a;
|
||||
|
||||
/* Enhance contrast for colored text and backgrounds in Light Mode */
|
||||
|
||||
/* RED */
|
||||
--color-red-300: #b91c1c;
|
||||
/* red-700 */
|
||||
--color-red-400: #dc2626;
|
||||
/* red-600 */
|
||||
--color-red-500: #b91c1c;
|
||||
/* red-700 */
|
||||
--color-red-950: #ef4444;
|
||||
/* red-500 (so that 950/20 becomes a visible pink bg) */
|
||||
|
||||
/* ORANGE */
|
||||
--color-orange-300: #c2410c;
|
||||
/* orange-700 */
|
||||
--color-orange-400: #ea580c;
|
||||
/* orange-600 */
|
||||
--color-orange-500: #c2410c;
|
||||
/* orange-700 */
|
||||
--color-orange-950: #f97316;
|
||||
/* orange-500 */
|
||||
|
||||
/* YELLOW */
|
||||
--color-yellow-300: #a16207;
|
||||
/* yellow-700 */
|
||||
--color-yellow-400: #ca8a04;
|
||||
/* yellow-600 */
|
||||
--color-yellow-500: #a16207;
|
||||
/* yellow-700 */
|
||||
--color-yellow-950: #eab308;
|
||||
/* yellow-500 */
|
||||
|
||||
/* GREEN */
|
||||
--color-green-300: #15803d;
|
||||
/* green-700 */
|
||||
--color-green-400: #16a34a;
|
||||
/* green-600 */
|
||||
--color-green-500: #15803d;
|
||||
/* green-700 */
|
||||
--color-green-950: #22c55e;
|
||||
/* green-500 */
|
||||
|
||||
/* EMERALD */
|
||||
--color-emerald-300: #047857;
|
||||
/* emerald-700 */
|
||||
--color-emerald-400: #059669;
|
||||
/* emerald-600 */
|
||||
--color-emerald-500: #047857;
|
||||
/* emerald-700 */
|
||||
--color-emerald-950: #10b981;
|
||||
/* emerald-500 */
|
||||
|
||||
/* BLUE */
|
||||
--color-blue-300: #1d4ed8;
|
||||
/* blue-700 */
|
||||
--color-blue-400: #2563eb;
|
||||
/* blue-600 */
|
||||
--color-blue-500: #1d4ed8;
|
||||
/* blue-700 */
|
||||
--color-blue-950: #3b82f6;
|
||||
/* blue-500 */
|
||||
|
||||
/* PURPLE */
|
||||
--color-purple-300: #7e22ce;
|
||||
/* purple-700 */
|
||||
--color-purple-400: #9333ea;
|
||||
/* purple-600 */
|
||||
--color-purple-500: #7e22ce;
|
||||
/* purple-700 */
|
||||
--color-purple-950: #a855f7;
|
||||
/* purple-500 */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans), sans-serif;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* 1-Second Dual-Layer Smooth Background Crossfade */
|
||||
body::before,
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
transition: opacity 500ms ease-in-out;
|
||||
pointer-events: none;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Dark Mode Background Layer (Active by default, fades out on .light) */
|
||||
body::before {
|
||||
background-color: #09090b;
|
||||
background-image:
|
||||
radial-gradient(circle at 0% 0%, rgba(30, 58, 138, 0.35) 0%, transparent 40%),
|
||||
radial-gradient(circle at 100% 20%, rgba(220, 38, 38, 0.15) 0%, transparent 40%),
|
||||
radial-gradient(circle at 50% 100%, rgba(15, 23, 42, 0.8) 0%, transparent 60%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.light body::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Light Mode Background Layer (Hidden by default, fades in on .light) */
|
||||
body::after {
|
||||
background-color: #f1f5f9;
|
||||
background-image:
|
||||
radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.1) 0px, transparent 40%),
|
||||
radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.05) 0px, transparent 40%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.light body::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Ambient Gradients for Cards & Sidebars */
|
||||
:root {
|
||||
--ambient-card-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.1) 0%, rgba(15, 23, 42, 0.5) 100%);
|
||||
--ambient-sidebar-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(2, 6, 23, 0.95) 100%);
|
||||
}
|
||||
|
||||
.light {
|
||||
--ambient-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.65) 100%);
|
||||
--ambient-sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(241, 245, 249, 0.9) 100%);
|
||||
}
|
||||
|
||||
.bg-card {
|
||||
background-image: var(--ambient-card-bg) !important;
|
||||
background-color: transparent !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.bg-sidebar {
|
||||
background-image: var(--ambient-sidebar-bg) !important;
|
||||
background-color: transparent !important;
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
/* Global smooth transition for theme change */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, background-image;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
/* View Transitions API (For perfect whole-screen crossfade including WebGL/Canvas) */
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation-duration: 500ms;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
Reference in new issue
Block a user