change theme color (again) and add acc colors to the score stat badges

src/components/player/player-rank-chart.tsx

@@ -114,7 +114,7 @@ export default function PlayerRankChart({ player }: Props) {
         lineTension: 0.5,
         data: playerRankHistory,
         label: "Rank",
-        borderColor: "#a147fa",
+        borderColor: "#606fff",
         fill: false,
         color: "#fff",
       },

src/components/player/score/score-stats.tsx

@@ -4,9 +4,14 @@ import { formatNumberWithCommas } from "@/common/number-utils";
 import StatValue from "@/components/stat-value";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
+import { accuracyToColor } from "@/common/song-utils";
 
 type Badge = {
   name: string;
+  color?: (
+    score: ScoreSaberScore,
+    leaderboard: ScoreSaberLeaderboard,
+  ) => string | undefined;
   create: (
     score: ScoreSaberScore,
     leaderboard: ScoreSaberLeaderboard,
@@ -16,6 +21,9 @@ type Badge = {
 const badges: Badge[] = [
   {
     name: "PP",
+    color: () => {
+      return "bg-pp";
+    },
     create: (score: ScoreSaberScore) => {
       const pp = score.pp;
       if (pp === 0) {
@@ -26,6 +34,10 @@ const badges: Badge[] = [
   },
   {
     name: "Accuracy",
+    color: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      return accuracyToColor(acc);
+    },
     create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => {
       const acc = (score.baseScore / leaderboard.maxScore) * 100;
       return `${acc.toFixed(2)}%`;
@@ -78,11 +90,11 @@ export default function ScoreStats({ score, leaderboard }: Props) {
     <div className={`grid grid-cols-3 grid-rows-2 gap-1 ml-0 lg:ml-2`}>
       {badges.map((badge, index) => {
         const toRender = badge.create(score, leaderboard);
+        let color = badge.color?.(score, leaderboard);
         if (toRender === undefined) {
           return <div key={index} />;
         }
-
-        return <StatValue key={index} value={toRender} />;
+        return <StatValue key={index} color={color} value={toRender} />;
       })}
     </div>
   );

src/components/stat-value.tsx

@@ -1,4 +1,4 @@
-import clsx, { ClassValue } from "clsx";
+import clsx from "clsx";
 
 type Props = {
   /**
@@ -9,7 +9,7 @@ type Props = {
   /**
    * The background color of the stat.
    */
-  color?: ClassValue;
+  color?: string;
 
   /**
    * The value of the stat.
@@ -24,6 +24,9 @@ export default function StatValue({ name, color, value }: Props) {
         "flex min-w-16 gap-2 h-[28px] p-1 items-center justify-center rounded-md text-sm",
         color ? color : "bg-accent",
       )}
+      style={{
+        backgroundColor: (!color?.includes("bg") && color) || undefined,
+      }}
     >
       {name && (
         <>