badge colour variants

frontend/src/lib/utils.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { cn, getDifficultyColor, getDifficultyLabel, capitalize } from "./utils";
+import { cn, getDifficultyVariant, getDifficultyLabel, capitalize } from "./utils";
 
 describe("cn", () => {
   it("joins multiple class names", () => {
@@ -15,20 +15,17 @@ describe("cn", () => {
   });
 });
 
-describe("getDifficultyColor", () => {
-  it("returns easy difficulty CSS variable classes", () => {
-    const result = getDifficultyColor("easy");
-    expect(result).toContain("--difficulty-easy");
+describe("getDifficultyVariant", () => {
+  it("returns difficulty-easy variant for easy", () => {
+    expect(getDifficultyVariant("easy")).toBe("difficulty-easy");
   });
 
-  it("returns medium difficulty CSS variable classes", () => {
-    const result = getDifficultyColor("medium");
-    expect(result).toContain("--difficulty-medium");
+  it("returns difficulty-medium variant for medium", () => {
+    expect(getDifficultyVariant("medium")).toBe("difficulty-medium");
   });
 
-  it("returns hard difficulty CSS variable classes", () => {
-    const result = getDifficultyColor("hard");
-    expect(result).toContain("--difficulty-hard");
+  it("returns difficulty-hard variant for hard", () => {
+    expect(getDifficultyVariant("hard")).toBe("difficulty-hard");
   });
 });
 

frontend/src/lib/utils.ts

@@ -4,14 +4,16 @@ export function cn(...classes: (string | undefined | false)[]): string {
   return classes.filter(Boolean).join(" ");
 }
 
-export function getDifficultyColor(difficulty: Difficulty): string {
+export function getDifficultyVariant(
+  difficulty: Difficulty
+): "difficulty-easy" | "difficulty-medium" | "difficulty-hard" {
   switch (difficulty) {
     case "easy":
-      return "text-[var(--difficulty-easy)] bg-[var(--difficulty-easy-bg)]";
+      return "difficulty-easy";
     case "medium":
-      return "text-[var(--difficulty-medium)] bg-[var(--difficulty-medium-bg)]";
+      return "difficulty-medium";
     case "hard":
-      return "text-[var(--difficulty-hard)] bg-[var(--difficulty-hard-bg)]";
+      return "difficulty-hard";
   }
 }