👌 IMPROVE: Enhance diff viewer styles with new CSS variables for additions and deletions. Update DiffFileCard component to utilize these variables for improved readability and consistency in the UI.

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"

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);