fix: add warning badge variant for accessible paused-status contrast

components/dashboard/subscriptions-tab.tsx

@@ -40,7 +40,6 @@ type Subscriptions = SubscriptionActionHandlers & {
 const statusColor = {
   active: "bg-income text-white",
   cancelled: "bg-destructive text-white",
-  paused: "bg-yellow text-black",
 };
 
 type SubscriptionSummaryCardsProps = {
@@ -103,8 +102,11 @@ function SubscriptionInfo({
             {payment.name}
           </p>
           <Badge
-            variant="secondary"
-            className={cn("shrink-0 text-xs", statusColor[payment.status])}
+            variant={payment.status === "paused" ? "warning" : "secondary"}
+            className={cn(
+              "shrink-0 text-xs",
+              payment.status !== "paused" ? statusColor[payment.status] : undefined,
+            )}
           >
             {t(`common.${payment.status}`)}
           </Badge>

components/ui/badge.tsx

@@ -27,6 +27,8 @@ const badgeVariants = cva(
           'rounded-full bg-needs-bg text-needs border-needs/20',
         wants:
           'rounded-full bg-wants-bg text-wants border-wants/20',
+        warning:
+          'rounded-full bg-warning-bg text-warning border-warning/20',
       },
     },
     defaultVariants: {

tests/components/badge.test.tsx

@@ -0,0 +1,14 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Badge } from "@/components/ui/badge";
+
+describe("Badge warning variant", () => {
+  it("renders with theme-safe warning background and text classes", () => {
+    const { container } = render(<Badge variant="warning">Paused</Badge>);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("bg-warning-bg");
+    expect(el?.className).toContain("text-warning");
+    expect(el?.className).not.toContain("bg-yellow");
+  });
+});