From f8b3ec9fcacdecdf86f48fc2752e7504a3825e1c Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 9 Sep 2026 19:46:29 +0100
Subject: [PATCH] web/repo: match diff highlight colours to the diff stat pill

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/repo/CommitView.svelte |  2 +-
 web/src/lib/components/repo/pierre.ts         |  2 +-
 web/src/lib/components/repo/pierreDiff.css    | 46 +++++++++++++++++++
 web/src/pierre.css                            | 17 ++-----
 4 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/repo/CommitView.svelte b/web/src/lib/components/repo/CommitView.svelte
index 209190773..ce5be247f 100644
--- a/web/src/lib/components/repo/CommitView.svelte
+++ b/web/src/lib/components/repo/CommitView.svelte
@@ -106,7 +106,7 @@
 	const patch = $derived(browser && patchUrl ? getPatchStream(patchUrl) : undefined);
 </script>
 
-<div class="flex flex-col gap-4 px-4 pb-4">
+<div class="flex flex-col gap-4 pb-4">
 	<TabPanel class="rounded-tl-none">
 		<CommitHeader {ownerHandle} {repoName} {commit} {parent} {changeId} {pipelineStatuses} />
 	</TabPanel>
diff --git a/web/src/lib/components/repo/pierre.ts b/web/src/lib/components/repo/pierre.ts
index 94ac6bc38..c50b9909e 100644
--- a/web/src/lib/components/repo/pierre.ts
+++ b/web/src/lib/components/repo/pierre.ts
@@ -66,7 +66,7 @@ export const clearPierreRender = (host: HTMLElement): void => {
 export const pierreCodeViewOptions = (style: DiffStyle) => ({
 	...PIERRE_BASE_OPTIONS,
 	diffStyle: style,
-	diffIndicators: "classic" as const,
+	diffIndicators: "bars" as const,
 	lineDiffType: "word-alt" as const,
 	hunkSeparators: "line-info" as const,
 	overflow: "scroll" as const,
diff --git a/web/src/lib/components/repo/pierreDiff.css b/web/src/lib/components/repo/pierreDiff.css
index 4dba299e0..68a4b7525 100644
--- a/web/src/lib/components/repo/pierreDiff.css
+++ b/web/src/lib/components/repo/pierreDiff.css
@@ -8,6 +8,32 @@
 	--diffs-overflow-override: auto;
 }
 
+[data-line],
+[data-no-newline] {
+	--mix-light: 0%;
+}
+
+[data-line-type="change-addition"][data-column-number]::before,
+[data-line-type="change-deletion"][data-column-number]::before {
+	width: 2px;
+}
+
+[data-line-type="change-addition"][data-column-number] {
+	--diffs-bg-addition-number-override: var(--diffs-bg-addition-override);
+	background-image: linear-gradient(
+		var(--diffs-bg-addition-emphasis),
+		var(--diffs-bg-addition-emphasis)
+	);
+}
+
+[data-line-type="change-deletion"][data-column-number] {
+	--diffs-bg-deletion-number-override: var(--diffs-bg-deletion-override);
+	background-image: linear-gradient(
+		var(--diffs-bg-deletion-emphasis),
+		var(--diffs-bg-deletion-emphasis)
+	);
+}
+
 [data-diff] {
 	border: 1px solid var(--color-border-default);
 	border-top: 0;
@@ -73,6 +99,26 @@
 	content: "···";
 }
 
+[data-diff-type="split"][data-overflow="scroll"] {
+	& [data-deletions] {
+		border-right-color: var(--color-border-default);
+	}
+
+	& [data-additions] {
+		border-left: 0;
+	}
+}
+
+[data-diff-type="split"][data-overflow="wrap"] {
+	& [data-deletions] [data-content] {
+		border-right-color: var(--color-border-default);
+	}
+
+	& [data-additions] [data-gutter] {
+		border-left: 0;
+	}
+}
+
 [data-column-number],
 [data-gutter-buffer],
 [data-expand-button] {
diff --git a/web/src/pierre.css b/web/src/pierre.css
index a081fce86..2c69b58b9 100644
--- a/web/src/pierre.css
+++ b/web/src/pierre.css
@@ -15,13 +15,10 @@
 	--diffs-bg-separator-override: var(--color-background-inset);
 	--diffs-fg-number-override: var(--color-foreground-placeholder);
 
-	/* pierre blends line backgrounds 88/12 (light) toward these, so they must
-	   be the saturated tokens. the *-color overrides drive the indicators and
-	   number gutter */
-	--diffs-bg-addition-override: var(--color-foreground-success);
-	--diffs-bg-deletion-override: var(--color-foreground-danger);
-	--diffs-addition-color-override: var(--color-foreground-success-strong);
-	--diffs-deletion-color-override: var(--color-foreground-danger-strong);
+	--diffs-bg-addition-override: var(--color-background-success-subtle);
+	--diffs-bg-deletion-override: var(--color-background-danger-subtle);
+	--diffs-addition-color-override: var(--color-foreground-success);
+	--diffs-deletion-color-override: var(--color-foreground-danger);
 
 	/* syntax palette — catppuccin latte */
 	--diffs-token-comment: #7c7f93; /* overlay2 */
@@ -73,12 +70,6 @@
 	@variant dark {
 		--diffs-fg-number-override: var(--color-foreground-subtle);
 
-		/* the dark blend is 80/20, hence the subtle backgrounds */
-		--diffs-bg-addition-override: var(--color-background-success-subtle);
-		--diffs-bg-deletion-override: var(--color-background-danger-subtle);
-		--diffs-addition-color-override: var(--color-foreground-success);
-		--diffs-deletion-color-override: var(--color-foreground-danger);
-
 		/* catppuccin mocha text (background stays on the app token) */
 		--diffs-foreground: #cdd6f4;
 
-- 
2.51.2