From 49e67363b2bb335e1892d11b731218f0eb3fa402 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Fri, 10 Apr 2026 17:06:41 +0700
Subject: [PATCH] feat(app): add themeable diff stat colors and soften tooltip
 border

Add diffAddition/diffDeletion semantic tokens with separate light
(muted green-700/red-700) and dark (bright green-400/red-500) sets,
spread into themes so individual variants can override. Update all
diff stat consumers to use the new tokens.

Soften tooltip border to match dropdown menu styling (thinner border,
accent color, medium shadow).
---
 packages/app/src/components/git-diff-pane.tsx     | 12 ++++++------
 .../app/src/components/sidebar-workspace-list.tsx |  4 ++--
 packages/app/src/components/ui/tooltip.tsx        |  6 +++---
 .../src/screens/workspace/workspace-screen.tsx    |  4 ++--
 packages/app/src/styles/theme.ts                  | 15 +++++++++++++++
 5 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/app/src/components/git-diff-pane.tsx b/packages/app/src/components/git-diff-pane.tsx
index 2d0c3d766..70e7135ba 100644
--- a/packages/app/src/components/git-diff-pane.tsx
+++ b/packages/app/src/components/git-diff-pane.tsx
@@ -1724,7 +1724,7 @@ const styles = StyleSheet.create((theme) => ({
   newBadgeText: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   deletedBadge: {
     backgroundColor: "rgba(248, 81, 73, 0.2)",
@@ -1736,17 +1736,17 @@ const styles = StyleSheet.create((theme) => ({
   deletedBadgeText: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
   },
   additions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   deletions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
   },
   diffContent: {
     borderTopWidth: theme.borderWidth[1],
@@ -1824,10 +1824,10 @@ const styles = StyleSheet.create((theme) => ({
     userSelect: "none",
   },
   addLineNumberText: {
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   removeLineNumberText: {
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
   },
   diffLineText: {
     flex: 1,
diff --git a/packages/app/src/components/sidebar-workspace-list.tsx b/packages/app/src/components/sidebar-workspace-list.tsx
index e6fb347b7..94fca278e 100644
--- a/packages/app/src/components/sidebar-workspace-list.tsx
+++ b/packages/app/src/components/sidebar-workspace-list.tsx
@@ -2241,12 +2241,12 @@ const styles = StyleSheet.create((theme) => ({
   diffStatAdditions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   diffStatDeletions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
   },
   kebabButton: {
     padding: 2,
diff --git a/packages/app/src/components/ui/tooltip.tsx b/packages/app/src/components/ui/tooltip.tsx
index fdb9eb4a3..5409a1a98 100644
--- a/packages/app/src/components/ui/tooltip.tsx
+++ b/packages/app/src/components/ui/tooltip.tsx
@@ -551,9 +551,9 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[2],
     borderRadius: theme.borderRadius.xl,
     backgroundColor: theme.colors.popover,
-    borderWidth: theme.borderWidth[2],
-    borderColor: theme.colors.border,
-    ...theme.shadow.sm,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.borderAccent,
+    ...theme.shadow.md,
     zIndex: 1000,
   },
 }));
diff --git a/packages/app/src/screens/workspace/workspace-screen.tsx b/packages/app/src/screens/workspace/workspace-screen.tsx
index a956b9dfd..2bbf82ff6 100644
--- a/packages/app/src/screens/workspace/workspace-screen.tsx
+++ b/packages/app/src/screens/workspace/workspace-screen.tsx
@@ -2371,12 +2371,12 @@ const styles = StyleSheet.create((theme) => ({
   diffStatAdditions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   diffStatDeletions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
   },
   newTabActions: {
     flexDirection: "row",
diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts
index c0f40f86b..cc9380ab9 100644
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -105,6 +105,17 @@ export const baseColors = {
 
 export type ThemeName = "light" | "dark" | "zinc" | "midnight" | "claude" | "ghostty";
 
+// Diff stat colors — light uses muted tones, dark uses the brighter palette values
+const lightDiffColors = {
+  diffAddition: "#15803d", // green-700 — readable on white without screaming
+  diffDeletion: "#b91c1c", // red-700
+};
+
+const darkDiffColors = {
+  diffAddition: "#4ade80", // green-400
+  diffDeletion: "#ef4444", // red-500
+};
+
 // Semantic color tokens - Layer-based system
 const lightSemanticColors = {
   // Surfaces (layers) - shifted one step lighter
@@ -154,6 +165,8 @@ const lightSemanticColors = {
   input: "#f4f4f5",
   ring: "#18181b",
 
+  ...lightDiffColors,
+
   terminal: {
     background: "#ffffff",
     foreground: "#1a1a1e",
@@ -263,6 +276,8 @@ function buildDarkSemanticColors(tint: DarkThemeConfig) {
     input: tint.surface2,
     ring: "#d4d4d8",
 
+    ...darkDiffColors,
+
     terminal: {
       background: tint.surface0,
       foreground: "#fafafa",