feat(ui): Aurora design system — glassmorphic dark mode, warm light mode, snappy animations
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+102
-23
@@ -90,9 +90,9 @@
|
||||
/* ─── Light Theme Surface Variables ─────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
--surface-page: 246 247 251;
|
||||
--surface-page: 253 251 255;
|
||||
--surface-card: 255 255 255;
|
||||
--surface-elevated: 249 250 252;
|
||||
--surface-elevated: 248 246 255;
|
||||
--surface-input: 255 255 255;
|
||||
--border-subtle: 219 224 232;
|
||||
--border-input: 197 205 218;
|
||||
@@ -108,18 +108,18 @@
|
||||
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
--surface-page: 12 17 29;
|
||||
--surface-card: 16 23 38;
|
||||
--surface-elevated: 24 33 52;
|
||||
--surface-input: 18 28 45;
|
||||
--border-subtle: 41 55 78;
|
||||
--border-input: 61 79 110;
|
||||
--surface-page: 8 8 22;
|
||||
--surface-card: 13 14 34;
|
||||
--surface-elevated: 19 20 46;
|
||||
--surface-input: 11 12 30;
|
||||
--border-subtle: 38 42 68;
|
||||
--border-input: 58 64 98;
|
||||
--text-primary: 237 242 247;
|
||||
--text-secondary: 196 207 223;
|
||||
--text-muted: 147 161 185;
|
||||
--text-very-muted: 118 133 161;
|
||||
--shadow-soft: 2 6 23 / 0.38;
|
||||
--shadow-strong: 2 6 23 / 0.65;
|
||||
--shadow-soft: 0 0 0 / 0.45;
|
||||
--shadow-strong: 0 0 0 / 0.75;
|
||||
}
|
||||
|
||||
/* ─── Base Layer: Apply variables to body ────────────────────────────────── */
|
||||
@@ -132,6 +132,7 @@
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 40% at 50% -5%, rgba(var(--accent-300), 0.05) 0%, transparent 55%),
|
||||
radial-gradient(ellipse at 0% 0%, rgb(var(--accent-50) / 0.15), transparent 50%),
|
||||
radial-gradient(ellipse at 100% 100%, rgb(var(--accent-100) / 0.08), transparent 50%),
|
||||
radial-gradient(circle at top left, rgb(var(--accent-100) / 0.32), transparent 24rem),
|
||||
@@ -141,6 +142,7 @@
|
||||
|
||||
.dark body {
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--accent-400), 0.07) 0%, transparent 60%),
|
||||
radial-gradient(circle at top left, rgb(var(--accent-600) / 0.16), transparent 26rem),
|
||||
linear-gradient(180deg, rgb(15 23 42 / 0.35), transparent 28rem);
|
||||
}
|
||||
@@ -352,33 +354,67 @@
|
||||
@layer components {
|
||||
.app-surface {
|
||||
@apply rounded-2xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900/90;
|
||||
--tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
|
||||
background: linear-gradient(145deg, #ffffff 0%, #fdfbff 100%);
|
||||
--tw-shadow: 0 1px 3px rgba(100, 80, 160, 0.06), 0 4px 16px rgba(100, 80, 160, 0.04);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
:is(.dark) .app-surface {
|
||||
--tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 100%);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-color: rgba(255,255,255,0.09);
|
||||
--tw-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.07);
|
||||
box-shadow: var(--tw-shadow);
|
||||
}
|
||||
|
||||
.app-surface-strong {
|
||||
@apply rounded-3xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
|
||||
--tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
|
||||
background: linear-gradient(145deg, #ffffff 0%, #fdfbff 100%);
|
||||
--tw-shadow: 0 2px 8px rgba(100, 80, 160, 0.06), 0 8px 24px rgba(100, 80, 160, 0.04);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
:is(.dark) .app-surface-strong {
|
||||
--tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.022) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-color: rgba(255,255,255,0.10);
|
||||
--tw-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.08);
|
||||
box-shadow: var(--tw-shadow);
|
||||
}
|
||||
|
||||
.app-toolbar {
|
||||
@apply sticky top-0 z-10 rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm backdrop-blur-sm;
|
||||
@apply dark:border-gray-700 dark:bg-gray-900/80 dark:shadow-black/20;
|
||||
@apply sticky top-0 z-10 rounded-2xl border p-4;
|
||||
background: rgba(253,251,255,0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-color: rgba(100,80,160,0.12);
|
||||
box-shadow: 0 1px 3px rgba(100,80,160,0.06);
|
||||
}
|
||||
|
||||
:is(.dark) .app-toolbar {
|
||||
background: rgba(13,14,34,0.82);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-color: rgba(255,255,255,0.08);
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
.app-input {
|
||||
@apply w-full rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition;
|
||||
@apply focus:border-brand-500 focus:ring-4 focus:ring-brand-100/80;
|
||||
@apply dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:ring-brand-900/50;
|
||||
@apply dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100;
|
||||
}
|
||||
|
||||
.app-input:focus {
|
||||
border-color: rgb(var(--accent-500));
|
||||
box-shadow: 0 0 0 3px rgba(var(--accent-400), 0.25), 0 1px 2px rgba(0,0,0,0.05);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:is(.dark) .app-input:focus {
|
||||
border-color: rgb(var(--accent-400));
|
||||
box-shadow: 0 0 0 3px rgba(var(--accent-400), 0.20), inset 0 0 8px rgba(var(--accent-400), 0.08);
|
||||
}
|
||||
|
||||
.app-select {
|
||||
@@ -403,6 +439,13 @@
|
||||
@apply font-display text-3xl font-semibold text-gray-900 dark:text-gray-100;
|
||||
}
|
||||
|
||||
:is(.dark) .app-page-title {
|
||||
background: linear-gradient(135deg, rgb(var(--accent-200)) 0%, #e8e4ff 50%, rgb(237 242 247) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.app-page-subtitle {
|
||||
@apply text-sm text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
@@ -419,6 +462,10 @@
|
||||
@apply bg-gray-50/90 dark:bg-gray-800/80;
|
||||
}
|
||||
|
||||
:is(.dark) .app-data-table thead tr {
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
.app-data-table th {
|
||||
@apply text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
@@ -447,6 +494,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Aurora: new keyframes ──────────────────────────────────────────────── */
|
||||
@keyframes fadeSlideUp {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from { opacity: 0; transform: scale(0.96); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% { box-shadow: 0 0 12px rgba(var(--accent-400), 0.3); }
|
||||
50% { box-shadow: 0 0 24px rgba(var(--accent-400), 0.55); }
|
||||
}
|
||||
|
||||
.animate-fade-slide-up {
|
||||
animation: fadeSlideUp 0.12s ease-out both;
|
||||
}
|
||||
.animate-scale-in {
|
||||
animation: scaleIn 0.12s ease-out both;
|
||||
}
|
||||
.animate-glow-pulse {
|
||||
animation: glowPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ─── Overbooking blink animation ──────────────────────────────────────────── */
|
||||
@keyframes overbooking-blink {
|
||||
0%, 100% { background-color: rgba(239, 68, 68, 0); }
|
||||
@@ -480,6 +553,12 @@
|
||||
animation: shimmer 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
:is(.dark) .shimmer-skeleton {
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ─── Table row stagger entrance ─────────────────────────────────────────── */
|
||||
@keyframes fadeSlideIn {
|
||||
from {
|
||||
@@ -493,20 +572,20 @@
|
||||
}
|
||||
|
||||
.animate-row-enter {
|
||||
animation: fadeSlideIn 0.25s ease-out both;
|
||||
animation: fadeSlideIn 0.12s ease-out both;
|
||||
}
|
||||
|
||||
/* ─── Subtle hover lift for cards and table rows ─────────────────────────── */
|
||||
.hover-lift {
|
||||
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
|
||||
transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
|
||||
}
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 6px 20px rgba(var(--accent-400), 0.18), 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
:is(.dark) .hover-lift:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 6px 24px rgba(var(--accent-400), 0.22), 0 2px 8px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
/* ─── Smooth scroll + reduced-motion accessibility ────────────────────────── */
|
||||
@@ -530,7 +609,7 @@ html {
|
||||
/* ─── Table row hover accent border ──────────────────────────────────────── */
|
||||
.table-row-hover {
|
||||
border-left: 2px solid transparent;
|
||||
transition: border-color 0.15s ease-out, background-color 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
|
||||
transition: border-color 100ms ease-out, background-color 100ms ease-out, transform 100ms ease-out, box-shadow 100ms ease-out;
|
||||
}
|
||||
.table-row-hover:hover {
|
||||
border-left-color: rgb(var(--accent-400));
|
||||
|
||||
@@ -334,17 +334,17 @@ const NavItemLink = memo(function NavItemLink({
|
||||
href={href as Route}
|
||||
{...linkProps}
|
||||
className={clsx(
|
||||
"group relative flex items-center rounded-2xl text-sm font-medium transition-colors",
|
||||
"group relative flex items-center rounded-2xl text-sm transition-colors",
|
||||
collapsed ? "justify-center px-2 py-2" : "gap-3 px-3 py-2",
|
||||
isActive
|
||||
? "text-brand-800 dark:text-brand-200"
|
||||
: "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white",
|
||||
? "font-medium text-brand-700 dark:border-l-2 dark:border-brand-400/70 dark:text-brand-300"
|
||||
: "font-medium text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-white/[0.05] dark:hover:text-white",
|
||||
)}
|
||||
>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
layoutId="nav-indicator"
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-100 to-brand-50/80 shadow-sm ring-1 ring-brand-200/80 dark:from-brand-900/30 dark:to-brand-800/20 dark:ring-brand-900/40"
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-50 to-brand-100/60 shadow-sm ring-1 ring-brand-200/80 dark:from-brand-500/15 dark:to-brand-400/[0.08] dark:ring-brand-900/40"
|
||||
transition={{ type: "spring", stiffness: 350, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
@@ -426,7 +426,7 @@ function SidebarContent({
|
||||
sidebarCollapsed ? "px-3 py-4" : "px-6 py-6",
|
||||
)}>
|
||||
<div className={clsx(
|
||||
"inline-flex items-center rounded-2xl border border-brand-200/70 bg-gradient-to-br from-white to-brand-50 shadow-sm dark:border-brand-900/50 dark:from-slate-950 dark:to-slate-900",
|
||||
"inline-flex items-center rounded-2xl border border-brand-200/70 bg-gradient-to-br from-white to-brand-50 shadow-sm dark:border-brand-900/40 dark:from-[#0d0e22] dark:to-[#13162a]",
|
||||
sidebarCollapsed ? "p-2" : "gap-3 px-4 py-3",
|
||||
)}>
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-brand-600 text-white shadow-lg shadow-brand-600/25">
|
||||
@@ -551,7 +551,7 @@ function SidebarContent({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleSection(entry.label)}
|
||||
className="flex w-full items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium text-gray-500 transition-all hover:bg-gray-100/90 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-slate-900 dark:hover:text-gray-200"
|
||||
className="flex w-full items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium text-gray-500 transition-all hover:bg-gray-100/90 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/[0.05] dark:hover:text-gray-200"
|
||||
>
|
||||
<IconFrame><AdminIcon /></IconFrame>
|
||||
<span className="flex-1 text-left">{entry.label}</span>
|
||||
@@ -587,14 +587,14 @@ function SidebarContent({
|
||||
className={clsx(
|
||||
"group relative flex items-center gap-3 rounded-2xl px-3 py-1.5 text-sm font-medium transition-colors",
|
||||
isActive
|
||||
? "text-brand-800 dark:text-brand-200"
|
||||
: "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white",
|
||||
? "text-brand-700 dark:border-l-2 dark:border-brand-400/70 dark:text-brand-300"
|
||||
: "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-white/[0.05] dark:hover:text-white",
|
||||
)}
|
||||
>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
layoutId="nav-indicator"
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-100 to-brand-50/80 shadow-sm ring-1 ring-brand-200/80 dark:from-brand-900/30 dark:to-brand-800/20 dark:ring-brand-900/40"
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-50 to-brand-100/60 shadow-sm ring-1 ring-brand-200/80 dark:from-brand-500/15 dark:to-brand-400/[0.08] dark:ring-brand-900/40"
|
||||
transition={{ type: "spring", stiffness: 350, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
@@ -649,7 +649,7 @@ function SidebarContent({
|
||||
type="button"
|
||||
onClick={onChatOpen}
|
||||
className={clsx(
|
||||
"flex w-full items-center rounded-2xl text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-slate-900",
|
||||
"flex w-full items-center rounded-2xl text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-white/[0.05]",
|
||||
sidebarCollapsed ? "justify-center px-2 py-2.5" : "gap-3 px-3 py-2.5",
|
||||
)}
|
||||
>
|
||||
@@ -667,7 +667,7 @@ function SidebarContent({
|
||||
type="button"
|
||||
onClick={onPrefsOpen}
|
||||
className={clsx(
|
||||
"flex w-full items-center rounded-2xl text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-slate-900",
|
||||
"flex w-full items-center rounded-2xl text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-white/[0.05]",
|
||||
sidebarCollapsed ? "justify-center px-2 py-2.5" : "gap-3 px-3 py-2.5",
|
||||
)}
|
||||
>
|
||||
@@ -686,7 +686,7 @@ function SidebarContent({
|
||||
type="button"
|
||||
onClick={() => void signOut({ callbackUrl: "/auth/signin" })}
|
||||
className={clsx(
|
||||
"flex w-full items-center rounded-2xl text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-slate-900",
|
||||
"flex w-full items-center rounded-2xl text-sm text-gray-700 transition-colors hover:bg-gray-100/90 dark:text-gray-300 dark:hover:bg-white/[0.05]",
|
||||
sidebarCollapsed ? "justify-center px-2 py-2.5" : "gap-3 px-3 py-2.5",
|
||||
)}
|
||||
>
|
||||
@@ -705,7 +705,7 @@ function SidebarContent({
|
||||
type="button"
|
||||
onClick={onToggleCollapse}
|
||||
className={clsx(
|
||||
"flex w-full items-center rounded-2xl text-sm text-gray-400 transition-colors hover:bg-gray-100/90 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-slate-900 dark:hover:text-gray-300",
|
||||
"flex w-full items-center rounded-2xl text-sm text-gray-400 transition-colors hover:bg-gray-100/90 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-white/[0.05] dark:hover:text-gray-300",
|
||||
sidebarCollapsed ? "justify-center px-2 py-2.5" : "gap-3 px-3 py-2.5",
|
||||
)}
|
||||
>
|
||||
@@ -741,7 +741,7 @@ function DesktopSidebar({
|
||||
return (
|
||||
<nav
|
||||
className={clsx(
|
||||
"hidden shrink-0 border-r border-gray-200/60 bg-white/60 shadow-[1px_0_12px_rgba(0,0,0,0.03)] backdrop-blur-2xl backdrop-saturate-150 dark:border-slate-800 dark:bg-slate-950/75 dark:shadow-none lg:flex lg:flex-col",
|
||||
"hidden shrink-0 border-r border-gray-200/60 bg-white/95 shadow-[1px_0_12px_rgba(0,0,0,0.03)] backdrop-blur-xl backdrop-saturate-150 dark:border-white/[0.06] dark:bg-[#0d0e22]/90 dark:shadow-none lg:flex lg:flex-col",
|
||||
"transition-[width] duration-200 ease-out overflow-hidden",
|
||||
sidebarCollapsed ? "w-[72px]" : "w-72",
|
||||
)}
|
||||
@@ -793,7 +793,7 @@ function MobileSidebar({
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: -288 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 35 }}
|
||||
className="fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-gray-200/60 bg-white/95 shadow-2xl backdrop-blur-2xl backdrop-saturate-150 dark:border-slate-800 dark:bg-slate-950/95 lg:hidden"
|
||||
className="fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-gray-200/60 bg-white/95 shadow-2xl backdrop-blur-2xl backdrop-saturate-150 dark:border-white/[0.06] dark:bg-[#0d0e22]/95 lg:hidden"
|
||||
>
|
||||
{/* Close button */}
|
||||
<button
|
||||
@@ -897,7 +897,7 @@ export function AppShell({ children, userRole = "USER" }: { children: React.Reac
|
||||
{/* Main content area */}
|
||||
<main ref={contentRef} className="flex-1 overflow-auto bg-transparent">
|
||||
{/* Mobile hamburger */}
|
||||
<div className="sticky top-0 z-20 flex items-center border-b border-gray-200/60 bg-white/80 px-4 py-2 backdrop-blur-lg dark:border-slate-800 dark:bg-slate-950/80 lg:hidden">
|
||||
<div className="sticky top-0 z-20 flex items-center border-b border-gray-200/60 bg-white/85 px-4 py-2 backdrop-blur-xl dark:border-white/[0.06] dark:bg-[#0d0e22]/82 lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileOpen(true)}
|
||||
|
||||
Reference in New Issue
Block a user