soroushdes/Teamup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Glassmorphism polish: frosted pills + glass sidebar nav states

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-15 23:32:05 +03:30
parent 6ad994b1b7
commit 20a1a0dee4
2 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/AppShell.tsx
+5 -3
View File
@@ -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 = (
client/src/index.css
+17
View File
@@ -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));
}