From 2f788ad4a2dc0c71ad3975f304e9be1e1b5343f4 Mon Sep 17 00:00:00 2001
From: kumarabhirup <hey@kumareth.com>
Date: Fri, 13 Feb 2026 18:28:32 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20Enhance=20diff=20view?=
 =?UTF-8?q?er=20styles=20with=20new=20CSS=20variables=20for=20additions=20?=
 =?UTF-8?q?and=20deletions.=20Update=20DiffFileCard=20component=20to=20uti?=
 =?UTF-8?q?lize=20these=20variables=20for=20improved=20readability=20and?=
 =?UTF-8?q?=20consistency=20in=20the=20UI.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/app/components/diff-viewer.tsx | 12 ++++++------
 apps/web/app/globals.css                | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/components/diff-viewer.tsx b/apps/web/app/components/diff-viewer.tsx
index fdae433b2d4..3606af7731e 100644
--- a/apps/web/app/components/diff-viewer.tsx
+++ b/apps/web/app/components/diff-viewer.tsx
@@ -175,12 +175,12 @@ function DiffFileCard({ file }: { file: DiffFile }) {
           {path}
         </span>
         {file.additions > 0 && (
-          <span className="text-xs font-mono font-medium" style={{ color: "#22c55e" }}>
+          <span className="text-xs font-mono font-medium" style={{ color: "var(--diff-add-badge)" }}>
             +{file.additions}
           </span>
         )}
         {file.deletions > 0 && (
-          <span className="text-xs font-mono font-medium" style={{ color: "#ef4444" }}>
+          <span className="text-xs font-mono font-medium" style={{ color: "var(--diff-del-badge)" }}>
             -{file.deletions}
           </span>
         )}
@@ -215,15 +215,15 @@ function DiffFileCard({ file }: { file: DiffFile }) {
 
                   const bgColor =
                     line.type === "addition"
-                      ? "rgba(34,197,94,0.10)"
+                      ? "var(--diff-add-bg)"
                       : line.type === "deletion"
-                        ? "rgba(239,68,68,0.10)"
+                        ? "var(--diff-del-bg)"
                         : "transparent";
                   const textColor =
                     line.type === "addition"
-                      ? "#4ade80"
+                      ? "var(--diff-add-text)"
                       : line.type === "deletion"
-                        ? "#f87171"
+                        ? "var(--diff-del-text)"
                         : "var(--color-text)";
                   const prefix =
                     line.type === "addition"
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index b85bcf85d65..1cbc3c0e7aa 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -50,6 +50,14 @@
   --color-chip-report: rgba(22, 163, 74, 0.08);
   --color-chip-report-text: #16a34a;
 
+  /* Diff viewer */
+  --diff-add-bg: rgba(22, 163, 74, 0.09);
+  --diff-add-text: #166534;
+  --diff-add-badge: #16a34a;
+  --diff-del-bg: rgba(220, 38, 38, 0.07);
+  --diff-del-text: #991b1b;
+  --diff-del-badge: #dc2626;
+
   /* Shadow */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
@@ -103,6 +111,14 @@
   --color-chip-report: rgba(34, 197, 94, 0.12);
   --color-chip-report-text: #4ade80;
 
+  /* Diff viewer */
+  --diff-add-bg: rgba(34, 197, 94, 0.10);
+  --diff-add-text: #4ade80;
+  --diff-add-badge: #22c55e;
+  --diff-del-bg: rgba(239, 68, 68, 0.10);
+  --diff-del-text: #f87171;
+  --diff-del-badge: #ef4444;
+
   /* Shadow */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.30);