fix(site): use theme-aware git tokens for PR status badges (#23148)

site/src/index.css

@@ -63,8 +63,10 @@
 		--git-merged: 271 91% 65%;
 		--git-added-bright: 142 72% 29%;
 		--git-deleted-bright: 0 74% 42%;
+		--git-merged-bright: 272 72% 47%;
 		--surface-git-added: 141 84% 93%;
 		--surface-git-deleted: 0 93% 94%;
+		--surface-git-merged: 269 100% 95%;
 		--border: 240 5.9% 90%;
 		--input: 240 5.9% 90%;
 		--ring: 240 10% 3.9%;
@@ -129,8 +131,10 @@
 		--git-merged: 271 91% 65%;
 		--git-added-bright: 142 71% 45%;
 		--git-deleted-bright: 0 91% 71%;
+		--git-merged-bright: 270 95% 75%;
 		--surface-git-added: 145 80% 10%;
 		--surface-git-deleted: 0 75% 15%;
+		--surface-git-merged: 274 87% 21%;
 		--border: 240 3.7% 15.9%;
 		--input: 240 3.7% 15.9%;
 		--ring: 240 4.9% 83.9%;

site/src/pages/AgentsPage/AgentsSidebar.tsx

@@ -122,7 +122,7 @@ const getPRIconConfig = (
 		return undefined;
 	}
 	if (state === "merged") {
-		return { icon: GitMergeIcon, className: "text-git-merged" };
+		return { icon: GitMergeIcon, className: "text-git-merged-bright" };
 	}
 	if (state === "closed") {
 		return {

site/src/pages/AgentsPage/GitPanel.tsx

@@ -415,11 +415,13 @@ const PrStateIcon: FC<{
 	className?: string;
 }> = ({ state, draft, className }) => {
 	if (state === "merged") {
-		return <GitMergeIcon className={cn("text-purple-400", className)} />;
+		return <GitMergeIcon className={cn("text-git-merged-bright", className)} />;
 	}
 	if (state === "closed") {
 		return (
-			<GitPullRequestClosedIcon className={cn("text-red-400", className)} />
+			<GitPullRequestClosedIcon
+				className={cn("text-git-deleted-bright", className)}
+			/>
 		);
 	}
 	if (draft) {
@@ -429,5 +431,7 @@ const PrStateIcon: FC<{
 			/>
 		);
 	}
-	return <GitPullRequestIcon className={cn("text-green-400", className)} />;
+	return (
+		<GitPullRequestIcon className={cn("text-git-added-bright", className)} />
+	);
 };

site/src/pages/AgentsPage/RemoteDiffPanel.tsx

@@ -118,27 +118,26 @@ const PullRequestStateBadge: FC<{
 }> = ({ state, draft }) => {
 	let Icon = GitPullRequestIcon;
 	let label = "Open";
-	let colorClasses = "border-border-default bg-green-500/10 text-green-400";
+	let colorClasses = "bg-surface-git-added text-git-added-bright";
 
 	if (state === "merged") {
 		Icon = GitMergeIcon;
 		label = "Merged";
-		colorClasses = "border-border-default bg-purple-500/10 text-purple-400";
+		colorClasses = "bg-surface-git-merged text-git-merged-bright";
 	} else if (state === "closed") {
 		Icon = GitPullRequestClosedIcon;
 		label = "Closed";
-		colorClasses = "border-border-default bg-red-500/10 text-red-400";
+		colorClasses = "bg-surface-git-deleted text-git-deleted-bright";
 	} else if (draft) {
 		Icon = GitPullRequestDraftIcon;
 		label = "Draft";
-		colorClasses =
-			"border-border-default bg-surface-secondary text-content-secondary";
+		colorClasses = "text-content-secondary";
 	}
 
 	return (
 		<span
 			className={cn(
-				"inline-flex shrink-0 items-center gap-1 rounded-sm border border-solid px-2 text-[13px] font-medium leading-5",
+				"inline-flex shrink-0 items-center gap-1 rounded-sm border border-solid border-border-default px-2 text-[13px] font-medium leading-5",
 				colorClasses,
 			)}
 		>

site/tailwind.config.js

@@ -66,6 +66,7 @@ module.exports = {
 					magenta: "hsl(var(--surface-magenta))",
 					"git-added": "hsl(var(--surface-git-added))",
 					"git-deleted": "hsl(var(--surface-git-deleted))",
+					"git-merged": "hsl(var(--surface-git-merged))",
 				},
 				border: {
 					DEFAULT: "hsl(var(--border-default))",
@@ -97,6 +98,7 @@ module.exports = {
 					merged: "hsl(var(--git-merged))",
 					"added-bright": "hsl(var(--git-added-bright))",
 					"deleted-bright": "hsl(var(--git-deleted-bright))",
+					"merged-bright": "hsl(var(--git-merged-bright))",
 				},
 			},
 			keyframes: {