From 43b842efb6de6a796f850f4387d475eefce35a9b Mon Sep 17 00:00:00 2001
From: Arnas Donauskas <arnas.donauskas@hostinger.com>
Date: Wed, 17 Jun 2026 13:08:32 +0300
Subject: [PATCH] fix(theme): keep status-badge token contract green (CI test)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sweep over-tokenized the neutral status badges in the three status
data modules to bg-muted/border-border, which broke
broadcast-status.test.ts ("each variant has the dark-theme class
triple") — it asserts every badge is bg-*/10 + text-* + border-*/20.

The badge system intentionally uses fixed palette colors at low opacity
(translucent fills are mode-tolerant). Restore the original slate fills
(so dark is identical and the triple contract holds) but keep
text-muted-foreground for the label, so neutral statuses stay legible in
light mode where a solid slate-400 would be too faint on white.

- broadcast-status: draft / recipient pending
- template-status: DRAFT / PENDING_DELETION
- trigger-meta: time_based / fallback

All 400 tests pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/lib/automations/trigger-meta.ts | 4 ++--
 src/lib/broadcast-status.ts         | 9 ++++++---
 src/lib/template-status.ts          | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/lib/automations/trigger-meta.ts b/src/lib/automations/trigger-meta.ts
index c246524..af72d9f 100644
--- a/src/lib/automations/trigger-meta.ts
+++ b/src/lib/automations/trigger-meta.ts
@@ -33,7 +33,7 @@ export const TRIGGER_META: Record<AutomationTriggerType, TriggerMeta> = {
   },
   time_based: {
     label: 'Time-Based',
-    pillClass: 'border-border bg-muted text-muted-foreground',
+    pillClass: 'border-slate-500/30 bg-slate-500/10 text-muted-foreground',
   },
 }
 
@@ -41,7 +41,7 @@ export function triggerMeta(t: AutomationTriggerType | string): TriggerMeta {
   return (
     TRIGGER_META[t as AutomationTriggerType] ?? {
       label: t,
-      pillClass: 'border-border bg-muted text-muted-foreground',
+      pillClass: 'border-slate-500/30 bg-slate-500/10 text-muted-foreground',
     }
   )
 }
diff --git a/src/lib/broadcast-status.ts b/src/lib/broadcast-status.ts
index 6581ed1..f16b8fe 100644
--- a/src/lib/broadcast-status.ts
+++ b/src/lib/broadcast-status.ts
@@ -5,7 +5,10 @@
  * /broadcasts/page.tsx and /broadcasts/[id]/page.tsx with slight
  * drift risk. One source of truth now.
  *
- * Dark-theme only — bg-*-500/10 + text-*-400 + border-*-500/20.
+ * Badge shape: bg-*-500/10 + text-*-400 + border-*-500/20. The
+ * translucent fills sit fine on both light and dark surfaces; neutral
+ * statuses use text-muted-foreground so the label stays legible in
+ * light mode (a solid slate-400 would be too faint on white).
  */
 
 import type { BroadcastStatus, RecipientStatus } from "@/types";
@@ -23,7 +26,7 @@ export interface StatusDisplay {
 export const broadcastStatusConfig: Record<BroadcastStatus, StatusDisplay> = {
   draft: {
     label: "Draft",
-    classes: "bg-muted text-muted-foreground border-border",
+    classes: "bg-slate-500/10 text-muted-foreground border-slate-500/20",
   },
   scheduled: {
     label: "Scheduled",
@@ -47,7 +50,7 @@ export const broadcastStatusConfig: Record<BroadcastStatus, StatusDisplay> = {
 export const recipientStatusConfig: Record<RecipientStatus, StatusDisplay> = {
   pending: {
     label: "Pending",
-    classes: "bg-muted text-muted-foreground border-border",
+    classes: "bg-slate-500/10 text-muted-foreground border-slate-500/20",
   },
   sent: {
     label: "Sent",
diff --git a/src/lib/template-status.ts b/src/lib/template-status.ts
index 7b6ec81..c3a1b7e 100644
--- a/src/lib/template-status.ts
+++ b/src/lib/template-status.ts
@@ -20,7 +20,7 @@ export const templateStatusConfig: Record<
 > = {
   DRAFT: {
     label: 'Draft',
-    classes: 'bg-muted text-muted-foreground border-border',
+    classes: 'bg-slate-600/20 text-muted-foreground border-slate-600/30',
   },
   PENDING: {
     label: 'Pending',
@@ -48,6 +48,6 @@ export const templateStatusConfig: Record<
   },
   PENDING_DELETION: {
     label: 'Pending Deletion',
-    classes: 'bg-muted text-muted-foreground border-border',
+    classes: 'bg-slate-700/30 text-muted-foreground border-slate-700/40',
   },
 };