7b315df86c
- PlayerBarGlass: use semantic tokens (--player-glass-bg, --player-glass-border) - Replace arbitrary OKLCH with CSS vars; backdrop-blur-md; rounded-xl - Transitions: duration-[var(--duration-*)], ease-[var(--ease-out)] - Sidebar: add border-r border-[var(--sidebar-border)] for depth - Header: border-[var(--glass-border)] for subtle separation - index.css: add --player-glass-bg, --player-glass-border (light + dark) - visual baselines updated (0% diff Playwright) Co-authored-by: Cursor <cursoragent@cursor.com>
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
/**
|
|
* PlayerBarGlass — Glassmorphism container (KŌDŌ v3)
|
|
* backdrop-blur + semantic tokens + gradient overlay (Spotify/Discord standard)
|
|
*/
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface PlayerBarGlassProps {
|
|
children: React.ReactNode;
|
|
isHovered: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function PlayerBarGlass({
|
|
children,
|
|
isHovered,
|
|
className,
|
|
}: PlayerBarGlassProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'relative w-full rounded-xl overflow-hidden',
|
|
'backdrop-blur-md',
|
|
'bg-[var(--player-glass-bg)]',
|
|
'border border-[var(--player-glass-border)]',
|
|
'transition-all duration-[var(--duration-normal)] ease-[var(--ease-out)]',
|
|
'shadow-xl player-bar-entrance',
|
|
isHovered && 'shadow-player-hover border-primary/30',
|
|
!isHovered && 'shadow-lg',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
{/* Ambient glow — KŌDŌ gradient on hover */}
|
|
<div
|
|
className={cn(
|
|
'absolute inset-0 pointer-events-none -z-10',
|
|
'bg-gradient-to-r from-[var(--chart-1)]/5 via-primary/5 to-[var(--chart-2)]/5',
|
|
'opacity-0 transition-opacity duration-[var(--duration-slow)] ease-[var(--ease-out)]',
|
|
isHovered && 'opacity-100',
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|