3c2e3fdf4f
- Sidebar: bg-raised, border-faint tokens - Header: glass bg + backdrop-blur-12px, z-200 sticky, SUMI durations - PlayerBarGlass: glass-bg + blur-16px, accent colors, remove glow - PlayerBarProgress: solid accent fill, SUMI border tokens - PlayerBarRight/TrackInfo: text-foreground, SUMI border tokens - MiniPlayer: glass-bg, border-faint, z-200, SUMI shadows - GlobalPlayer: SUMI z-index and duration tokens - DashboardLayout: SUMI z-raised, duration tokens 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-[16px]',
|
|
'bg-[var(--sumi-glass-bg)]',
|
|
'border border-[var(--sumi-glass-border)]',
|
|
'transition-all duration-[var(--sumi-duration-normal)] ease-[var(--sumi-ease-out)]',
|
|
'shadow-[var(--sumi-shadow-xl)] player-bar-entrance',
|
|
isHovered && 'shadow-[var(--sumi-shadow-xl)] border-[var(--sumi-border-accent)]',
|
|
!isHovered && 'shadow-[var(--sumi-shadow-lg)]',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
{/* Subtle accent tint on hover — SUMI */}
|
|
<div
|
|
className={cn(
|
|
'absolute inset-0 pointer-events-none -z-10',
|
|
'bg-[var(--sumi-accent-subtle)]',
|
|
'opacity-0 transition-opacity duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
|
|
isHovered && 'opacity-100',
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|