From 20a1a0dee47003f1b73d35c79cca2e663024a04b Mon Sep 17 00:00:00 2001 From: "soroush.asadi" Date: Mon, 15 Jun 2026 23:32:05 +0330 Subject: [PATCH] Glassmorphism polish: frosted pills + glass sidebar nav states MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Neutral badges become frosted (translucent + blur), the primary badge picks up the gradient, and the sidebar nav active/hover states are now a frosted white highlight (ring + blur) instead of the opaque accent — cohesive on the dark-glass sidebar. Co-Authored-By: Claude Opus 4.8 --- client/src/components/AppShell.tsx | 8 +++++--- client/src/index.css | 17 +++++++++++++++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/client/src/components/AppShell.tsx b/client/src/components/AppShell.tsx index 5728fe7..40d0c72 100644 --- a/client/src/components/AppShell.tsx +++ b/client/src/components/AppShell.tsx @@ -96,9 +96,11 @@ function NavItem({ const active = to ? location.pathname === to : false const className = cn( - 'flex items-center gap-3 rounded-md px-3 py-2 text-sm', - active ? 'bg-sidebar-accent font-medium text-sidebar-accent-foreground' : 'text-sidebar-foreground/80', - muted ? 'opacity-50' : 'hover:bg-sidebar-accent/60', + 'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors', + active + ? 'bg-white/15 font-medium text-white shadow-sm ring-1 ring-white/15 backdrop-blur-sm' + : 'text-sidebar-foreground/80', + muted ? 'opacity-50' : 'hover:bg-white/10 hover:text-white', ) const content = ( diff --git a/client/src/index.css b/client/src/index.css index d4e45db..a45ccc0 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -224,3 +224,20 @@ textarea { background-color: color-mix(in oklch, oklch(0.32 0.05 286) 82%, transparent) !important; border-color: color-mix(in oklch, white 16%, transparent); } + +/* Pills: frosted for neutral variants, gradient for the primary one. */ +[data-slot="badge"][data-variant="secondary"], +[data-slot="badge"][data-variant="outline"] { + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + background-color: color-mix(in oklch, white 58%, transparent); + border-color: color-mix(in oklch, white 55%, transparent); +} +.dark [data-slot="badge"][data-variant="secondary"], +.dark [data-slot="badge"][data-variant="outline"] { + background-color: color-mix(in oklch, white 12%, transparent); + border-color: color-mix(in oklch, white 16%, transparent); +} +[data-slot="badge"][data-variant="default"] { + background-image: linear-gradient(135deg, oklch(0.58 0.24 277), oklch(0.56 0.25 305)); +}