From f31d204f6cbbca18dbf8e46d4420f49beac53011 Mon Sep 17 00:00:00 2001
From: senke <okin.tcs@gmail.com>
Date: Sat, 7 Feb 2026 19:52:24 +0100
Subject: [PATCH] feat(ui): dashboard StatCard surface + KodoEmptyState tokens
 (Spotify/Discord)

- StatCard: variant surface, rounded-xl icon box, text-foreground
- KodoEmptyState: variant surface, primary orbs/icon/CTA, no kodo-*

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../web/src/components/dashboard/StatCard.tsx |  8 ++---
 apps/web/src/components/ui/KodoEmptyState.tsx | 29 +++++++------------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/dashboard/StatCard.tsx b/apps/web/src/components/dashboard/StatCard.tsx
index e6fa96243..9af2b5a5f 100644
--- a/apps/web/src/components/dashboard/StatCard.tsx
+++ b/apps/web/src/components/dashboard/StatCard.tsx
@@ -87,19 +87,19 @@ export const StatCard: React.FC<StatCardProps> = ({
 
   return (
     <Card
-      variant="default"
-      className="flex flex-col justify-between h-full p-6 hover:border-opacity-100 transition-all relative overflow-hidden"
+      variant="surface"
+      className="flex flex-col justify-between h-full p-6 relative overflow-hidden"
     >
       <div className="flex justify-between items-start mb-2 relative z-10">
         <div>
           <p className="text-xs font-mono text-muted-foreground uppercase tracking-widest mb-1">
             {label}
           </p>
-          <h3 className="text-2xl font-display font-bold text-white">
+          <h3 className="text-2xl font-display font-bold text-foreground">
             {value}
           </h3>
         </div>
-        <div className={`p-2 rounded-lg ${bgMap[color]} ${colorMap[color]}`}>
+        <div className={`p-2 rounded-xl ${bgMap[color]} ${colorMap[color]}`}>
           {icon}
         </div>
       </div>
diff --git a/apps/web/src/components/ui/KodoEmptyState.tsx b/apps/web/src/components/ui/KodoEmptyState.tsx
index 0e0636b7b..bf18c7da6 100644
--- a/apps/web/src/components/ui/KodoEmptyState.tsx
+++ b/apps/web/src/components/ui/KodoEmptyState.tsx
@@ -22,48 +22,41 @@ export function KodoEmptyState({
 }: KodoEmptyStateProps) {
   return (
     <Card
-      variant="spotlight"
-      spotlightColor="rgba(var(--kodo-cyan), 0.15)"
+      variant="surface"
       className={cn(
         'flex flex-col items-center justify-center text-center p-8 sm:p-16 animate-fade-in relative overflow-hidden group',
         className,
       )}
     >
-      {/* Background Mesh Gradient */}
+      {/* Subtle gradient orbs */}
       <div className="absolute inset-0 opacity-20 group-hover:opacity-30 transition-opacity duration-700 pointer-events-none">
-        <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-cyan-500/30 rounded-full blur-[80px] animate-pulse-slow" />
-        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-magenta-500/30 rounded-full blur-[80px] animate-pulse-slow delay-700" />
+        <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-primary/30 rounded-full blur-[80px] animate-pulse-slow" />
+        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-primary/20 rounded-full blur-[80px] animate-pulse-slow delay-700" />
       </div>
 
       <div className="relative mb-8 p-6">
-        {/* Animated Rings */}
-        <div className="absolute inset-0 border border-cyan-500/20 rounded-full scale-100 animate-ping-slow" />
-        <div className="absolute inset-0 border border-magenta-500/20 rounded-full scale-110 animate-spin-slow delay-150" />
-
-        {/* Glass Icon Container */}
-        <div className="relative bg-black/40 backdrop-blur-xl p-6 rounded-2xl border border-white/10 shadow-[0_0_30px_rgba(0,0,0,0.5)] group-hover:scale-110 transition-transform duration-500 flex items-center justify-center">
-          <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-2xl" />
-          <Icon className="h-12 w-12 text-white drop-shadow-[0_0_15px_rgba(var(--kodo-cyan),0.5)]" />
+        <div className="relative bg-card/80 backdrop-blur-xl p-6 rounded-xl border border-white/10 group-hover:scale-105 transition-transform duration-[var(--duration-immersive)] ease-in-out flex items-center justify-center">
+          <Icon className="h-12 w-12 text-primary" />
         </div>
       </div>
 
-      <h3 className="text-2xl font-display font-bold text-white mb-3 tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-white/70">
+      <h3 className="text-2xl font-display font-bold text-foreground mb-3 tracking-tight relative z-10">
         {title}
       </h3>
 
-      <p className="text-muted-foreground max-w-sm mb-8 text-base leading-relaxed">
+      <p className="text-muted-foreground max-w-sm mb-8 text-base leading-relaxed relative z-10">
         {description}
       </p>
 
       {actionLabel && onAction && (
         <Button
-          className="group relative overflow-hidden bg-white text-black hover:bg-cyan-50 hover:text-cyan-900 border-none shadow-[0_0_20px_rgba(255,255,255,0.3)] hover:shadow-[0_0_30px_rgba(34,211,238,0.5)] transition-all duration-300"
+          variant="primary"
+          className="rounded-xl shadow-[0_0_20px_var(--color-primary)/0.25] hover:shadow-[0_0_24px_var(--color-primary)/0.35] transition-all duration-[var(--duration-immersive)] ease-in-out"
           onClick={onAction}
         >
-          <span className="relative z-10 flex items-center gap-2 font-bold tracking-wide">
+          <span className="flex items-center gap-2 font-bold tracking-wide">
             {actionLabel}
           </span>
-          <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-transparent opacity-0 group-hover:opacity-20 transition-opacity" />
         </Button>
       )}
     </Card>