change some color stuff

projects/website/src/components/footer.tsx

@@ -54,7 +54,7 @@ export default function Footer() {
           return (
             <Link
               key={index}
-              className="px-2 text-pp hover:brightness-[66%] transition-all transform-gpu"
+              className="px-2 text-ssr hover:brightness-[66%] transition-all transform-gpu"
               href={item.link}
               target={item.openInNewTab ? "_blank" : undefined}
             >

projects/website/src/components/leaderboard/leaderboard-info.tsx

@@ -36,7 +36,7 @@ export function LeaderboardInfo({ leaderboard, beatSaverMap }: LeaderboardInfoPr
               </p>
             </FallbackLink>
             <p className="text-sm text-gray-400">
-              By <span className="text-pp">{leaderboard.songAuthorName}</span>
+              By <span className="text-ssr">{leaderboard.songAuthorName}</span>
             </p>
           </div>
 
@@ -45,7 +45,7 @@ export function LeaderboardInfo({ leaderboard, beatSaverMap }: LeaderboardInfoPr
             <p>
               Mapper:{" "}
               <FallbackLink href={getBeatSaverMapperProfileUrl(beatSaverMap)}>
-                <span className="text-pp font-semibold hover:brightness-[66%] transform-gpu transition-all">
+                <span className="text-ssr font-semibold hover:brightness-[66%] transform-gpu transition-all">
                   {leaderboard.levelAuthorName}
                 </span>
               </FallbackLink>

projects/website/src/components/leaderboard/leaderboard-score.tsx

@@ -62,7 +62,7 @@ export default function LeaderboardScore({ score, leaderboard, claimedPlayer }:
 
       {/* Score PP */}
       {leaderboard.stars > 0 && (
-        <td className="px-4 py-2 text-center text-pp whitespace-nowrap">{formatPp(score.pp)}pp</td>
+        <td className="px-4 py-2 text-center text-ssr whitespace-nowrap">{formatPp(score.pp)}pp</td>
       )}
 
       {/* Score Modifiers */}

projects/website/src/components/ranking/mini.tsx

@@ -104,7 +104,7 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
                 <PlayerInfo player={playerRanking} highlightedPlayer={player} hideCountryFlag hoverBrightness={false} />
               </div>
               <div className="inline-flex min-w-[11.5em] gap-2 items-center">
-                <p className="text-pp text-right">{formatPp(playerRanking.pp)}pp</p>
+                <p className="text-ssr text-right">{formatPp(playerRanking.pp)}pp</p>
                 {playerRanking.id !== player.id && (
                   <p className={`text-xs text-right ${ppDifference > 0 ? "text-green-400" : "text-red-400"}`}>
                     {ppDifference > 0 ? "+" : ""}

projects/website/src/components/ranking/player-ranking.tsx

@@ -28,7 +28,7 @@ export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
       <td className="flex items-center gap-2 px-4 py-2">
         <PlayerInfo player={player} highlightedPlayer={claimedPlayer} />
       </td>
-      <td className="px-4 py-2 text-pp text-center">{formatPp(player.pp)}pp</td>
+      <td className="px-4 py-2 text-ssr text-center">{formatPp(player.pp)}pp</td>
       <td className="px-4 py-2 text-center">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td>
       <td className="px-4 py-2 text-center">{formatNumberWithCommas(player.scoreStats.rankedPlayCount)}</td>
       <td className="px-4 py-2 text-center">{player.scoreStats.averageRankedAccuracy.toFixed(2) + "%"}</td>

projects/website/src/components/score/score-feed/score-feed.tsx

@@ -47,7 +47,7 @@ export default function ScoreFeed() {
             <p className="text-sm">
               Set by{" "}
               <Link href={`/player/${player.id}`}>
-                <span className="text-pp hover:brightness-[66%] transition-all transform-gpu">{player.name}</span>
+                <span className="text-ssr hover:brightness-[66%] transition-all transform-gpu">{player.name}</span>
               </Link>
             </p>
             <Score

projects/website/src/components/score/score-info.tsx

@@ -59,7 +59,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
         <div className="overflow-y-clip">
           <Link
             href={`/leaderboard/${leaderboard.id}`}
-            className="cursor-pointer select-none hover:brightness-[66%] transform-gpu transition-all text-pp w-fit"
+            className="cursor-pointer select-none hover:brightness-[66%] transform-gpu transition-all text-ssr w-fit"
           >
             {leaderboard.songName} {leaderboard.songSubName}
           </Link>

projects/website/src/components/score/score-rank-info.tsx

@@ -17,7 +17,7 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
       <div className="flex gap-1 items-center">
         <GlobeAmericasIcon className="w-5 h-5" />
         <Link href={`/leaderboard/${leaderboard.id}/${getPageFromRank(score.rank, 12)}`}>
-          <p className="text-pp cursor-default hover:brightness-[66%] transition-all transform-gpu cursor-pointer">
+          <p className="text-ssr cursor-default hover:brightness-[66%] transition-all transform-gpu cursor-pointer">
             #{formatNumberWithCommas(score.rank)}
           </p>
         </Link>

projects/website/src/components/statistic/daily-change.tsx

@@ -36,7 +36,7 @@ export function DailyChange({ type, change, tooltip, format }: DailyChangeProps)
   const value = (
     <p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}>
       {change > 0 ? "+" : ""}
-      {formatValue(change)}
+      {`${formatValue(change)}${type.value == "pp" ? "pp" : ""}`}
     </p>
   );
 

projects/website/tailwind.config.ts

@@ -11,6 +11,9 @@ const config: Config = {
     extend: {
       colors: {
         pp: "#4858ff",
+        ssr: {
+          DEFAULT: "#6773ff",
+        },
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         card: {