badge colour variants

frontend/src/app/globals.css

@@ -49,6 +49,18 @@
   --approach-correct-bg: #f0fdf4;
   --approach-correct-border: #bbf7d0;
   --approach-correct-fg: #16a34a;
+
+  /* Badge colors - Category (teal) */
+  --badge-category: #0d9488;
+  --badge-category-bg: #ccfbf1;
+
+  /* Badge colors - Pattern (indigo) */
+  --badge-pattern: #4f46e5;
+  --badge-pattern-bg: #e0e7ff;
+
+  /* Badge colors - Optimal (green) */
+  --badge-optimal: #16a34a;
+  --badge-optimal-bg: #dcfce7;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -101,6 +113,18 @@
     --approach-correct-bg: rgba(22, 163, 74, 0.15);
     --approach-correct-border: rgba(22, 163, 74, 0.4);
     --approach-correct-fg: #4ade80;
+
+    /* Badge colors - Category (teal, dark mode) */
+    --badge-category: #2dd4bf;
+    --badge-category-bg: rgba(20, 184, 166, 0.2);
+
+    /* Badge colors - Pattern (indigo, dark mode) */
+    --badge-pattern: #a5b4fc;
+    --badge-pattern-bg: rgba(99, 102, 241, 0.2);
+
+    /* Badge colors - Optimal (green, dark mode) */
+    --badge-optimal: #4ade80;
+    --badge-optimal-bg: rgba(34, 197, 94, 0.2);
   }
 }
 

frontend/src/app/questions/[slug]/page.tsx

@@ -5,7 +5,7 @@ import { CodeBlock } from "@/components/ui/code-block";
 import { Markdown } from "@/components/ui/markdown";
 import { Callout, ApproachBox } from "@/components/ui/callout";
 import { Collapsible } from "@/components/ui/collapsible";
-import { getDifficultyColor, getDifficultyLabel, capitalize } from "@/lib/utils";
+import { getDifficultyVariant, getDifficultyLabel, capitalize } from "@/lib/utils";
 import {
   FileText,
   AlertCircle,
@@ -40,7 +40,7 @@ export default async function QuestionDetailPage({
         <div className="flex items-start justify-between gap-4 mb-4">
           <h1 className="text-3xl font-bold">{question.title}</h1>
           <Badge
-            className={getDifficultyColor(question.difficulty)}
+            variant={getDifficultyVariant(question.difficulty)}
             aria-label={getDifficultyLabel(question.difficulty)}
           >
             {capitalize(question.difficulty)}
@@ -50,12 +50,12 @@ export default async function QuestionDetailPage({
         <div className="flex flex-wrap gap-2 mb-4">
           {question.categories.map((cat) => (
             <Link key={cat.id} href={`/questions?category=${cat.slug}`}>
-              <Badge variant="outline">{cat.name}</Badge>
+              <Badge variant="category">{cat.name}</Badge>
             </Link>
           ))}
           {question.patterns.map((pat) => (
             <Link key={pat.id} href={`/patterns/${pat.slug}`}>
-              <Badge>{pat.name}</Badge>
+              <Badge variant="pattern">{pat.name}</Badge>
             </Link>
           ))}
         </div>
@@ -239,9 +239,7 @@ export default async function QuestionDetailPage({
               <div key={solution.id}>
                 <div className="flex items-center gap-2 mb-2">
                   <h4 className="font-medium">{solution.approach_name}</h4>
-                  <Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
-                    Optimal
-                  </Badge>
+                  <Badge variant="optimal">Optimal</Badge>
                 </div>
                 {solution.explanation && (
                   <div className="text-sm text-[var(--muted-foreground)] mb-3 prose-content">

frontend/src/components/questions/question-card.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
-import { getDifficultyColor, capitalize } from "@/lib/utils";
+import { getDifficultyVariant, getDifficultyLabel, capitalize } from "@/lib/utils";
 import type { QuestionListItem } from "@/types";
 
 interface QuestionCardProps {
@@ -15,25 +15,32 @@ export function QuestionCard({ question }: QuestionCardProps) {
     >
       <div className="flex items-start justify-between gap-4 mb-3">
         <h3 className="font-semibold">{question.title}</h3>
-        <Badge className={getDifficultyColor(question.difficulty)}>
+        <Badge
+          variant={getDifficultyVariant(question.difficulty)}
+          aria-label={getDifficultyLabel(question.difficulty)}
+        >
           {capitalize(question.difficulty)}
         </Badge>
       </div>
 
       <div className="flex flex-wrap gap-2 mb-3">
         {question.categories.map((cat) => (
-          <Badge key={cat.id} variant="outline">
+          <Badge key={cat.id} variant="category">
             {cat.name}
           </Badge>
         ))}
       </div>
 
-      <div className="flex items-center gap-4 text-sm text-[var(--muted-foreground)]">
+      <div className="flex flex-wrap items-center gap-2 text-sm">
+        {question.patterns.map((p) => (
+          <Badge key={p.id} variant="pattern">
+            {p.name}
+          </Badge>
+        ))}
         {question.leetcode_id && (
-          <span>LeetCode #{question.leetcode_id}</span>
-        )}
-        {question.patterns.length > 0 && (
-          <span>{question.patterns.map((p) => p.name).join(", ")}</span>
+          <span className="text-[var(--muted-foreground)]">
+            LeetCode #{question.leetcode_id}
+          </span>
         )}
       </div>
     </Link>

frontend/src/components/ui/badge.tsx

@@ -1,26 +1,50 @@
 import { cn } from "@/lib/utils";
 
+type BadgeVariant =
+  | "default"
+  | "outline"
+  | "difficulty-easy"
+  | "difficulty-medium"
+  | "difficulty-hard"
+  | "category"
+  | "pattern"
+  | "optimal";
+
 interface BadgeProps {
   children: React.ReactNode;
   className?: string;
-  variant?: "default" | "outline";
+  variant?: BadgeVariant;
+  "aria-label"?: string;
 }
 
+const variantClasses: Record<BadgeVariant, string> = {
+  default: "bg-[var(--secondary)] text-[var(--secondary-foreground)]",
+  outline: "border border-[var(--border)] text-[var(--muted-foreground)]",
+  "difficulty-easy":
+    "text-[var(--difficulty-easy)] bg-[var(--difficulty-easy-bg)]",
+  "difficulty-medium":
+    "text-[var(--difficulty-medium)] bg-[var(--difficulty-medium-bg)]",
+  "difficulty-hard":
+    "text-[var(--difficulty-hard)] bg-[var(--difficulty-hard-bg)]",
+  category: "text-[var(--badge-category)] bg-[var(--badge-category-bg)]",
+  pattern: "text-[var(--badge-pattern)] bg-[var(--badge-pattern-bg)]",
+  optimal: "text-[var(--badge-optimal)] bg-[var(--badge-optimal-bg)]",
+};
+
 export function Badge({
   children,
   className,
   variant = "default",
+  "aria-label": ariaLabel,
 }: BadgeProps) {
   return (
     <span
       className={cn(
         "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
-        variant === "default" &&
-          "bg-[var(--secondary)] text-[var(--secondary-foreground)]",
-        variant === "outline" &&
-          "border border-[var(--border)] text-[var(--muted-foreground)]",
+        variantClasses[variant],
         className
       )}
+      aria-label={ariaLabel}
     >
       {children}
     </span>

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";
   }
 }