Enhance theming and UI components: Introduce a new dark cyan theme in globals.css, update layout to utilize ThemeProvider for consistent theming, and refactor button and card components to use CSS variables for styling. Improve navigation and alert components with dynamic styles based on theme variables, ensuring a cohesive user experience across the application.

components/ui/ProgressBar.tsx

@@ -10,14 +10,30 @@ interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
   label?: string;
 }
 
-const variantClasses = {
-  hp: {
-    high: "from-green-600 to-green-700",
-    medium: "from-yellow-600 to-orange-700",
-    low: "from-red-700 to-red-900",
-  },
-  xp: "from-pixel-gold/80 via-pixel-gold/70 to-pixel-gold/80",
-  default: "from-pixel-gold/80 via-pixel-gold/70 to-pixel-gold/80",
+const getGradientStyle = (variant: "hp" | "xp" | "default", percentage: number) => {
+  if (variant === "hp") {
+    if (percentage > 60) {
+      return {
+        background: `linear-gradient(to right, var(--success), color-mix(in srgb, var(--success) 90%, transparent))`,
+      };
+    } else if (percentage > 30) {
+      return {
+        background: `linear-gradient(to right, var(--yellow), color-mix(in srgb, var(--accent) 90%, transparent))`,
+      };
+    } else {
+      return {
+        background: `linear-gradient(to right, var(--destructive), color-mix(in srgb, var(--destructive) 90%, transparent))`,
+      };
+    }
+  } else {
+    return {
+      background: `linear-gradient(to right, 
+        color-mix(in srgb, var(--accent-color) 80%, transparent),
+        color-mix(in srgb, var(--accent-color) 70%, transparent),
+        color-mix(in srgb, var(--accent-color) 80%, transparent)
+      )`,
+    };
+  }
 };
 
 export default function ProgressBar({
@@ -31,40 +47,42 @@ export default function ProgressBar({
 }: ProgressBarProps) {
   const percentage = Math.min(100, Math.max(0, (value / max) * 100));
 
-  let gradientClass = "";
-  if (variant === "hp") {
-    if (percentage > 60) {
-      gradientClass = variantClasses.hp.high;
-    } else if (percentage > 30) {
-      gradientClass = variantClasses.hp.medium;
-    } else {
-      gradientClass = variantClasses.hp.low;
-    }
-  } else if (variant === "xp") {
-    gradientClass = variantClasses.xp;
-  } else {
-    gradientClass = variantClasses.default;
-  }
-
   return (
     <div className={className} {...props}>
       {showLabel && (
-        <div className="flex justify-between text-xs text-gray-400 mb-1">
+        <div className="flex justify-between text-xs mb-1" style={{ color: "var(--gray-400)" }}>
           <span>{label || variant.toUpperCase()}</span>
           <span>
             {value} / {max}
           </span>
         </div>
       )}
-      <div className="relative h-2 sm:h-3 bg-gray-900 border border-gray-700 rounded overflow-hidden">
+      <div
+        className="relative h-2 sm:h-3 border rounded overflow-hidden"
+        style={{
+          backgroundColor: "var(--gray-900)",
+          borderColor: "var(--gray-700)",
+        }}
+      >
         <div
-          className={`absolute inset-0 bg-gradient-to-r ${gradientClass} transition-all duration-1000 ease-out`}
-          style={{ width: `${percentage}%` }}
+          className="absolute inset-0 transition-all duration-1000 ease-out"
+          style={{
+            width: `${percentage}%`,
+            ...getGradientStyle(variant, percentage),
+          }}
         >
-          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
+          <div
+            className="absolute inset-0"
+            style={{
+              background: "linear-gradient(to right, transparent, color-mix(in srgb, var(--foreground) 10%, transparent), transparent)",
+            }}
+          />
         </div>
         {variant === "hp" && percentage < 30 && (
-          <div className="absolute inset-0 border border-red-500 rounded animate-pulse"></div>
+          <div
+            className="absolute inset-0 border rounded animate-pulse"
+            style={{ borderColor: "var(--destructive)" }}
+          />
         )}
       </div>
     </div>