@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-xp-bar/index.tsx

@@ -55,14 +55,14 @@ interface Particle {
 // ============================================================================
 
 const defaultLevelColors: Record<number, string> = {
-  1: "#3b82f6",   // blue - Beginner
-  5: "#22c55e",   // green - Novice
-  10: "#8b5cf6",  // purple - Apprentice
-  20: "#f59e0b",  // amber - Adept
-  30: "#ef4444",  // red - Expert
-  50: "#ec4899",  // pink - Master
-  75: "#06b6d4",  // cyan - Grandmaster
-  100: "#fbbf24", // gold - Legend
+  1: "hsl(var(--chart-1))",   // Beginner
+  5: "hsl(var(--success))",   // Novice
+  10: "hsl(var(--chart-2))",  // Apprentice
+  20: "hsl(var(--warning))",  // Adept
+  30: "hsl(var(--destructive))", // Expert
+  50: "hsl(var(--chart-3))",  // Master
+  75: "hsl(var(--info))",     // Grandmaster
+  100: "hsl(var(--chart-4))", // Legend
 }
 
 const sizeConfig = {
@@ -104,7 +104,7 @@ function getLevelColor(level: number, levelColors: Record<number, string>): stri
     }
   }
 
-  return levelColors[sortedLevels[sortedLevels.length - 1]] || "#3b82f6"
+  return levelColors[sortedLevels[sortedLevels.length - 1]] || "hsl(var(--chart-1))"
 }
 
 function hexToRgba(hex: string, alpha: number): string {
@@ -122,9 +122,9 @@ function generateParticle(
 ): Particle {
   const colors = [
     baseColor,
-    "#ffffff",
-    hexToRgba(baseColor, 0.8),
-    "#fbbf24",
+    "hsl(var(--foreground))",
+    baseColor,
+    "hsl(var(--warning))",
   ]
 
   const shapes: Particle["shape"][] = ["circle", "star", "diamond", "spark"]
@@ -337,7 +337,7 @@ function LevelUpCelebration({ active, color, onComplete }: LevelUpCelebrationPro
 
   if (!isVisible) return null
 
-  const celebrationColors = [color, "#fbbf24", "#ffffff", "#ec4899", "#22c55e"]
+  const celebrationColors = [color, "hsl(var(--warning))", "hsl(var(--foreground))", "hsl(var(--chart-3))", "hsl(var(--success))"]
 
   return (
     <div className="pointer-events-none absolute inset-0 z-50 overflow-visible">

package/src/styles/base.css

@@ -42,6 +42,14 @@
   --chart-4: 210 25% 70%;
   --chart-5: 210 20% 85%;
   --radius: 0.5rem;
+
+  /* Status colors */
+  --success: 142 76% 36%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }
 
 .dark,
@@ -70,6 +78,14 @@
   --chart-3: 210 15% 50%;
   --chart-4: 210 20% 35%;
   --chart-5: 217 25% 25%;
+
+  /* Status colors - dark */
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }
 
 /* ============================================

package/src/styles/tailwind.preset.js

@@ -44,6 +44,18 @@ module.exports = {
           4: "hsl(var(--chart-4))",
           5: "hsl(var(--chart-5))",
         },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",

package/src/styles/themes/forest.css

@@ -25,6 +25,14 @@
   --chart-4: 120 32% 57%;
   --chart-5: 120 28% 68%;
   --radius: 0.5rem;
+
+  /* Status colors */
+  --success: 142 76% 36%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }
 
 [data-theme="forest"].dark {
@@ -52,4 +60,12 @@
   --chart-3: 120 40% 40%;
   --chart-4: 120 45% 33%;
   --chart-5: 120 50% 25%;
+
+  /* Status colors - dark */
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }

package/src/styles/themes/monochrome.css

@@ -25,6 +25,14 @@
   --chart-4: 0 0% 64%;
   --chart-5: 0 0% 83%;
   --radius: 0.375rem;
+
+  /* Status colors */
+  --success: 142 76% 36%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }
 
 [data-theme="monochrome"].dark {
@@ -52,4 +60,12 @@
   --chart-3: 0 0% 64%;
   --chart-4: 0 0% 45%;
   --chart-5: 0 0% 25%;
+
+  /* Status colors - dark */
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }

package/src/styles/themes/perpetuity.css

@@ -25,6 +25,14 @@
   --chart-4: 184 55% 59%;
   --chart-5: 183 54% 70%;
   --radius: 0.125rem;
+
+  /* Status colors */
+  --success: 142 76% 36%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }
 
 [data-theme="perpetuity"].dark {
@@ -52,4 +60,12 @@
   --chart-3: 180 50% 36%;
   --chart-4: 186 56% 23%;
   --chart-5: 186 60% 15%;
+
+  /* Status colors - dark */
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }

package/src/styles/themes/sunset.css

@@ -25,6 +25,14 @@
   --chart-4: 45 97% 65%;
   --chart-5: 48 96% 77%;
   --radius: 0.5rem;
+
+  /* Status colors */
+  --success: 142 76% 36%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }
 
 [data-theme="sunset"].dark {
@@ -52,4 +60,12 @@
   --chart-3: 32 92% 44%;
   --chart-4: 27 91% 37%;
   --chart-5: 26 80% 31%;
+
+  /* Status colors - dark */
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }

package/src/styles/themes/twilight.css

@@ -25,6 +25,14 @@
   --chart-4: 263 95% 92%;
   --chart-5: 262 100% 96%;
   --radius: 0.75rem;
+
+  /* Status colors */
+  --success: 142 76% 36%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }
 
 [data-theme="twilight"].dark {
@@ -52,4 +60,12 @@
   --chart-3: 262 83% 66%;
   --chart-4: 263 81% 58%;
   --chart-5: 263 70% 50%;
+
+  /* Status colors - dark */
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 0%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 }