update

src/renderer/components/dashboard/MetricsGrid.tsx

@@ -17,23 +17,23 @@ export function MetricCard({
 }) {
   const toneMap = {
     default: "text-foreground",
-    success: "text-green-600 dark:text-green-400",
-    warn: "text-yellow-600 dark:text-yellow-400",
+    success: "text-success",
+    warn: "text-warning",
     danger: "text-destructive",
     accent: "text-primary",
   };
   const bgMap = {
     default: "bg-muted",
-    success: "bg-green-100 dark:bg-green-900/50",
-    warn: "bg-yellow-100 dark:bg-yellow-900/50",
-    danger: "bg-red-100 dark:bg-red-900/50",
+    success: "bg-success-muted",
+    warn: "bg-warning-muted",
+    danger: "bg-destructive-muted",
     accent: "bg-accent",
   };
 
   const borderMap = {
     default: "border-l-transparent",
-    success: "border-l-[color:var(--primary)]",
-    warn: "border-l-[color:var(--destructive)]",
+    success: "border-l-[color:var(--success)]",
+    warn: "border-l-[color:var(--warning)]",
     danger: "border-l-[color:var(--destructive)]",
     accent: "border-l-[color:var(--primary)]",
   };
@@ -42,7 +42,7 @@ export function MetricCard({
     <button
       type="button"
       onClick={onClick}
-      className={`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 flex items-center gap-4 rounded-lg border border-l-[3px] border-border bg-card px-4 py-4 text-left transition duration-150 hover:border-border hover:shadow-sm ${borderMap[tone]}`}
+      className={`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 flex items-center gap-4 rounded-lg border border-l-[3px] border-border bg-card px-4 py-4 text-left transition duration-200 hover:shadow-md hover:-translate-y-0.5 ${borderMap[tone]}`}
     >
       <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-lg ${bgMap[tone]}`}>
         <Icon size={24} weight="fill" className={toneMap[tone]} />