From a00013d778c519dcb647c2b2d1b354536ef4baf5 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Fri, 10 Jul 2026 22:49:35 -0500
Subject: [PATCH] fix(ui): restore row-status tints lost in the tailwind 4
 codemod
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The v4 upgrade codemod rewrote arbitrary-value opacity modifiers like
bg-emerald-500/[0.025] to bare fractional form (/2.5), but v4 emits NO
rule for fractional bare opacity — the tracker/calendar row tints and
two banner backgrounds silently disappeared (6 classes, 4 files). Found
by the code-review line-scan; invisible to the screenshot baseline
(login page only) and the text-based census. Restored the /[0.025]
arbitrary form; compiled CSS verified to emit all six selectors.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 client/components/data/TransactionMatchingSection.tsx | 2 +-
 client/components/tracker/OverdueCommandCenter.tsx    | 2 +-
 client/lib/trackerUtils.ts                            | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/components/data/TransactionMatchingSection.tsx b/client/components/data/TransactionMatchingSection.tsx
index 00a3885..f9e449e 100644
--- a/client/components/data/TransactionMatchingSection.tsx
+++ b/client/components/data/TransactionMatchingSection.tsx
@@ -140,7 +140,7 @@ function SuggestedMatchesPanel({ suggestions, loading, actionId, onAccept, onRej
                   </p>
                 </div>
 
-                <div className="mt-3 flex items-center gap-2 rounded-md border border-emerald-500/15 bg-emerald-500/4.5 px-2.5 py-2">
+                <div className="mt-3 flex items-center gap-2 rounded-md border border-emerald-500/15 bg-emerald-500/[0.045] px-2.5 py-2">
                   <Link2 className="h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" />
                   <div className="min-w-0">
                     <p className="truncate text-sm font-medium">{bill.name || `Bill ${suggestion.billId}`}</p>
diff --git a/client/components/tracker/OverdueCommandCenter.tsx b/client/components/tracker/OverdueCommandCenter.tsx
index fbfc29c..e58f94e 100644
--- a/client/components/tracker/OverdueCommandCenter.tsx
+++ b/client/components/tracker/OverdueCommandCenter.tsx
@@ -226,7 +226,7 @@ export default function OverdueCommandCenter({
 
   return (
     <Collapsible open={isOpen} onOpenChange={setOpen}>
-      <div className="surface-premium overflow-hidden border-amber-500/30 bg-amber-500/5.5 dark:border-amber-300/25 dark:bg-amber-400/5">
+      <div className="surface-premium overflow-hidden border-amber-500/30 bg-amber-500/[0.055] dark:border-amber-300/25 dark:bg-amber-400/5">
         {/* Header */}
         <div className="flex items-center gap-2 px-3 py-3 sm:px-4">
           <CollapsibleTrigger asChild>
diff --git a/client/lib/trackerUtils.ts b/client/lib/trackerUtils.ts
index 4ae0c4c..5a8da3b 100644
--- a/client/lib/trackerUtils.ts
+++ b/client/lib/trackerUtils.ts
@@ -51,16 +51,16 @@ export const TRACKER_SORT_DEFAULT_DIRS = Object.fromEntries(
 );
 
 export const ROW_STATUS_CLS: Record<string, string> = {
-  paid: 'border-l-2 border-l-emerald-500/45 bg-emerald-500/2.5 dark:bg-emerald-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-emerald-500/45',
+  paid: 'border-l-2 border-l-emerald-500/45 bg-emerald-500/[0.025] dark:bg-emerald-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-emerald-500/45',
   autodraft:
-    'border-l-2 border-l-teal-500/45 bg-teal-500/2.5 dark:bg-teal-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-teal-500/45',
+    'border-l-2 border-l-teal-500/45 bg-teal-500/[0.025] dark:bg-teal-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-teal-500/45',
   upcoming:
     'border-l-2 border-l-transparent [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-transparent',
   due_soon:
-    'border-l-2 border-l-amber-400/65 bg-amber-400/5.5 dark:bg-amber-300/2 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-amber-400/65',
+    'border-l-2 border-l-amber-400/65 bg-amber-400/[0.055] dark:bg-amber-300/2 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-amber-400/65',
   late: 'border-l-2 border-l-orange-400/80 bg-orange-500/9 ring-1 ring-inset ring-orange-400/20 dark:bg-orange-400/[0.07] dark:ring-orange-300/20 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-orange-400/80',
   missed:
-    'border-l-2 border-l-rose-400/80 bg-rose-500/10 ring-1 ring-inset ring-rose-400/20 dark:bg-rose-400/7.5 dark:ring-rose-300/20 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-rose-400/80',
+    'border-l-2 border-l-rose-400/80 bg-rose-500/10 ring-1 ring-inset ring-rose-400/20 dark:bg-rose-400/[0.075] dark:ring-rose-300/20 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-rose-400/80',
 };
 
 export const STATUS_META = {