From b5dd67b8f212724c5ba6da8b8f28b27ba9006c59 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Thu, 2 Apr 2026 14:05:06 +1100 Subject: [PATCH 1/6] feat(staged): add purple diff comment theme --- apps/staged/src/app.css | 6 ++- .../src/lib/features/diff/DiffModal.svelte | 38 +++++++++++++++++++ apps/staged/src/lib/theme.ts | 18 ++++++++- 3 files changed, 59 insertions(+), 3 deletions(-) diff --git a/apps/staged/src/app.css b/apps/staged/src/app.css index 0fe5b4b5..9eabcb3b 100644 --- a/apps/staged/src/app.css +++ b/apps/staged/src/app.css @@ -57,7 +57,11 @@ --diff-modified-bg: rgba(227, 179, 65, 0.08); --diff-modified-inline-bg: rgba(227, 179, 65, 0.25); --diff-range-border: #524d58; - --diff-comment-highlight: rgba(88, 166, 255, 0.5); + --diff-comment-highlight: rgba(167, 139, 250, 0.55); + --diff-comment-bg: rgba(167, 139, 250, 0.16); + --diff-comment-bg-emphasis: rgba(167, 139, 250, 0.24); + --diff-comment-border: rgba(167, 139, 250, 0.42); + --diff-comment-accent: #a78bfa; --search-match-bg: rgba(250, 200, 50, 0.35); --search-current-match-bg: rgba(255, 150, 50, 0.5); diff --git a/apps/staged/src/lib/features/diff/DiffModal.svelte b/apps/staged/src/lib/features/diff/DiffModal.svelte index 00efc54c..1f1d7d2d 100644 --- a/apps/staged/src/lib/features/diff/DiffModal.svelte +++ b/apps/staged/src/lib/features/diff/DiffModal.svelte @@ -795,4 +795,42 @@ min-width: 0; overflow: hidden; } + + :global(.diff-viewer-container .comment-editor) { + background: linear-gradient( + 180deg, + var(--diff-comment-bg-emphasis) 0%, + var(--diff-comment-bg) 100% + ); + border-color: var(--diff-comment-border); + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--diff-comment-accent) 12%, transparent), + var(--shadow-elevated); + } + + :global(.diff-viewer-container .comment-editor-hint) { + background-color: color-mix(in srgb, var(--diff-comment-bg-emphasis) 65%, transparent); + border-top: 1px solid color-mix(in srgb, var(--diff-comment-border) 70%, transparent); + } + + :global(.diff-viewer-container .comment-textarea::placeholder) { + color: color-mix(in srgb, var(--diff-comment-accent) 55%, var(--text-muted)); + } + + :global(.diff-viewer-container .range-toolbar), + :global(.diff-viewer-container .line-selection-toolbar) { + background-color: var(--diff-comment-bg); + border: 1px solid color-mix(in srgb, var(--diff-comment-border) 75%, transparent); + box-shadow: var(--shadow-elevated); + } + + :global(.diff-viewer-container .range-btn.comment-btn), + :global(.diff-viewer-container .selection-info) { + color: var(--diff-comment-accent); + } + + :global(.diff-viewer-container .range-btn.comment-btn:hover) { + color: var(--text-primary); + background-color: var(--diff-comment-bg-emphasis); + } diff --git a/apps/staged/src/lib/theme.ts b/apps/staged/src/lib/theme.ts index 3553c9d1..c072a021 100644 --- a/apps/staged/src/lib/theme.ts +++ b/apps/staged/src/lib/theme.ts @@ -57,6 +57,10 @@ export interface Theme { changedBg: string; // Neutral background for changed lines (not add/remove specific) rangeBorder: string; // Border color for change range markers commentHighlight: string; // Highlight color for commented regions in spine + commentBg: string; // Floating comment editor background + commentBgEmphasis: string; // Stronger tint for comment controls + commentBorder: string; // Border color for comment surfaces + commentAccent: string; // Accent color for comment affordances }; // Search highlight colors @@ -336,12 +340,14 @@ export function createAdaptiveTheme( const fallbackGreen = isDark ? '#3fb950' : '#1a7f37'; const fallbackRed = isDark ? '#f85149' : '#cf222e'; const fallbackOrange = isDark ? '#d29922' : '#9a6700'; + const fallbackPurple = isDark ? '#a78bfa' : '#8250df'; // Use theme git colors when available, fallback otherwise const accentGreen = gitColors?.added ?? fallbackGreen; const accentRed = gitColors?.deleted ?? fallbackRed; const accentBlue = gitColors?.modified ?? fallbackBlue; const accentOrange = fallbackOrange; // Used for warnings/caution UI elements + const accentPurple = fallbackPurple; // Border that's visible but not harsh const borderBase = mix(primaryBg, syntaxFg, isDark ? 0.15 : 0.12); @@ -386,8 +392,12 @@ export function createAdaptiveTheme( changedBg: overlay(syntaxFg, isDark ? 0.08 : 0.1), // Range borders need to be visible but not distracting rangeBorder: mix(primaryBg, syntaxFg, isDark ? 0.2 : 0.15), - // Comment highlight - uses blue accent for "annotation" semantic - commentHighlight: overlay(accentBlue, isDark ? 0.5 : 0.4), + // Comments use a dedicated purple accent so overlays stay legible over diffs. + commentHighlight: overlay(accentPurple, isDark ? 0.55 : 0.42), + commentBg: mix(chromeColor, accentPurple, isDark ? 0.22 : 0.12), + commentBgEmphasis: mix(chromeColor, accentPurple, isDark ? 0.34 : 0.2), + commentBorder: mix(primaryBg, accentPurple, isDark ? 0.55 : 0.4), + commentAccent: accentPurple, }, search: { @@ -485,6 +495,10 @@ export function themeToVarMap(t: Theme): Record { '--diff-changed-bg': t.diff.changedBg, '--diff-range-border': t.diff.rangeBorder, '--diff-comment-highlight': t.diff.commentHighlight, + '--diff-comment-bg': t.diff.commentBg, + '--diff-comment-bg-emphasis': t.diff.commentBgEmphasis, + '--diff-comment-border': t.diff.commentBorder, + '--diff-comment-accent': t.diff.commentAccent, '--search-match-bg': t.search.matchBg, '--search-current-match-bg': t.search.currentMatchBg, From b414e183e93e63f15062a401cf106fe6d77541d9 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Thu, 2 Apr 2026 14:41:21 +1100 Subject: [PATCH 2/6] fix(staged): use purple borders for diff comments --- apps/staged/src/app.css | 6 +++--- .../src/lib/features/diff/DiffModal.svelte | 21 +++++++++---------- apps/staged/src/lib/theme.ts | 8 +++---- 3 files changed, 17 insertions(+), 18 deletions(-) diff --git a/apps/staged/src/app.css b/apps/staged/src/app.css index 9eabcb3b..7cb14d45 100644 --- a/apps/staged/src/app.css +++ b/apps/staged/src/app.css @@ -58,9 +58,9 @@ --diff-modified-inline-bg: rgba(227, 179, 65, 0.25); --diff-range-border: #524d58; --diff-comment-highlight: rgba(167, 139, 250, 0.55); - --diff-comment-bg: rgba(167, 139, 250, 0.16); - --diff-comment-bg-emphasis: rgba(167, 139, 250, 0.24); - --diff-comment-border: rgba(167, 139, 250, 0.42); + --diff-comment-bg: #201c26; + --diff-comment-bg-emphasis: #2a2532; + --diff-comment-border: rgba(167, 139, 250, 0.56); --diff-comment-accent: #a78bfa; --search-match-bg: rgba(250, 200, 50, 0.35); diff --git a/apps/staged/src/lib/features/diff/DiffModal.svelte b/apps/staged/src/lib/features/diff/DiffModal.svelte index 1f1d7d2d..31190452 100644 --- a/apps/staged/src/lib/features/diff/DiffModal.svelte +++ b/apps/staged/src/lib/features/diff/DiffModal.svelte @@ -797,20 +797,17 @@ } :global(.diff-viewer-container .comment-editor) { - background: linear-gradient( - 180deg, - var(--diff-comment-bg-emphasis) 0%, - var(--diff-comment-bg) 100% - ); + background: var(--diff-comment-bg); border-color: var(--diff-comment-border); box-shadow: - 0 0 0 1px color-mix(in srgb, var(--diff-comment-accent) 12%, transparent), + 0 0 0 1px color-mix(in srgb, var(--diff-comment-accent) 18%, transparent), + 0 0 0 3px color-mix(in srgb, var(--diff-comment-accent) 8%, transparent), var(--shadow-elevated); } :global(.diff-viewer-container .comment-editor-hint) { - background-color: color-mix(in srgb, var(--diff-comment-bg-emphasis) 65%, transparent); - border-top: 1px solid color-mix(in srgb, var(--diff-comment-border) 70%, transparent); + background-color: color-mix(in srgb, var(--diff-comment-bg-emphasis) 88%, var(--bg-chrome)); + border-top: 1px solid color-mix(in srgb, var(--diff-comment-border) 82%, transparent); } :global(.diff-viewer-container .comment-textarea::placeholder) { @@ -820,8 +817,10 @@ :global(.diff-viewer-container .range-toolbar), :global(.diff-viewer-container .line-selection-toolbar) { background-color: var(--diff-comment-bg); - border: 1px solid color-mix(in srgb, var(--diff-comment-border) 75%, transparent); - box-shadow: var(--shadow-elevated); + border: 1px solid color-mix(in srgb, var(--diff-comment-border) 88%, transparent); + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--diff-comment-accent) 10%, transparent), + var(--shadow-elevated); } :global(.diff-viewer-container .range-btn.comment-btn), @@ -831,6 +830,6 @@ :global(.diff-viewer-container .range-btn.comment-btn:hover) { color: var(--text-primary); - background-color: var(--diff-comment-bg-emphasis); + background-color: color-mix(in srgb, var(--diff-comment-accent) 14%, var(--diff-comment-bg)); } diff --git a/apps/staged/src/lib/theme.ts b/apps/staged/src/lib/theme.ts index c072a021..02f6542c 100644 --- a/apps/staged/src/lib/theme.ts +++ b/apps/staged/src/lib/theme.ts @@ -392,11 +392,11 @@ export function createAdaptiveTheme( changedBg: overlay(syntaxFg, isDark ? 0.08 : 0.1), // Range borders need to be visible but not distracting rangeBorder: mix(primaryBg, syntaxFg, isDark ? 0.2 : 0.15), - // Comments use a dedicated purple accent so overlays stay legible over diffs. + // Comments use a dedicated purple accent, with mostly neutral surfaces so the border carries the theme. commentHighlight: overlay(accentPurple, isDark ? 0.55 : 0.42), - commentBg: mix(chromeColor, accentPurple, isDark ? 0.22 : 0.12), - commentBgEmphasis: mix(chromeColor, accentPurple, isDark ? 0.34 : 0.2), - commentBorder: mix(primaryBg, accentPurple, isDark ? 0.55 : 0.4), + commentBg: mix(chromeColor, accentPurple, isDark ? 0.08 : 0.04), + commentBgEmphasis: mix(chromeColor, accentPurple, isDark ? 0.14 : 0.08), + commentBorder: mix(primaryBg, accentPurple, isDark ? 0.68 : 0.5), commentAccent: accentPurple, }, From aa52bd2762aa919cc5b9113f515dfad01480e57d Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Thu, 2 Apr 2026 14:44:16 +1100 Subject: [PATCH 3/6] fix(staged): reduce diff comment background tint --- apps/staged/src/app.css | 4 ++-- apps/staged/src/lib/theme.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/staged/src/app.css b/apps/staged/src/app.css index 7cb14d45..0bfd6876 100644 --- a/apps/staged/src/app.css +++ b/apps/staged/src/app.css @@ -58,8 +58,8 @@ --diff-modified-inline-bg: rgba(227, 179, 65, 0.25); --diff-range-border: #524d58; --diff-comment-highlight: rgba(167, 139, 250, 0.55); - --diff-comment-bg: #201c26; - --diff-comment-bg-emphasis: #2a2532; + --diff-comment-bg: #1b181f; + --diff-comment-bg-emphasis: #221e27; --diff-comment-border: rgba(167, 139, 250, 0.56); --diff-comment-accent: #a78bfa; diff --git a/apps/staged/src/lib/theme.ts b/apps/staged/src/lib/theme.ts index 02f6542c..cd7a2219 100644 --- a/apps/staged/src/lib/theme.ts +++ b/apps/staged/src/lib/theme.ts @@ -394,8 +394,8 @@ export function createAdaptiveTheme( rangeBorder: mix(primaryBg, syntaxFg, isDark ? 0.2 : 0.15), // Comments use a dedicated purple accent, with mostly neutral surfaces so the border carries the theme. commentHighlight: overlay(accentPurple, isDark ? 0.55 : 0.42), - commentBg: mix(chromeColor, accentPurple, isDark ? 0.08 : 0.04), - commentBgEmphasis: mix(chromeColor, accentPurple, isDark ? 0.14 : 0.08), + commentBg: mix(chromeColor, accentPurple, isDark ? 0.04 : 0.02), + commentBgEmphasis: mix(chromeColor, accentPurple, isDark ? 0.08 : 0.04), commentBorder: mix(primaryBg, accentPurple, isDark ? 0.68 : 0.5), commentAccent: accentPurple, }, From 65299bba5f1e6815e7eda13de5933116501bb211 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Thu, 2 Apr 2026 14:50:13 +1100 Subject: [PATCH 4/6] fix(staged): neutralize diff comment footer divider --- apps/staged/src/lib/features/diff/DiffModal.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/staged/src/lib/features/diff/DiffModal.svelte b/apps/staged/src/lib/features/diff/DiffModal.svelte index 31190452..3b99f59b 100644 --- a/apps/staged/src/lib/features/diff/DiffModal.svelte +++ b/apps/staged/src/lib/features/diff/DiffModal.svelte @@ -807,7 +807,7 @@ :global(.diff-viewer-container .comment-editor-hint) { background-color: color-mix(in srgb, var(--diff-comment-bg-emphasis) 88%, var(--bg-chrome)); - border-top: 1px solid color-mix(in srgb, var(--diff-comment-border) 82%, transparent); + border-top: 1px solid color-mix(in srgb, var(--border-muted) 88%, transparent); } :global(.diff-viewer-container .comment-textarea::placeholder) { From 7306206ffd6fb3f28a4573688f9977ff7bfa3c6b Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Thu, 2 Apr 2026 14:54:32 +1100 Subject: [PATCH 5/6] fix(staged): use purple sidebar comment icons --- apps/staged/src/lib/features/diff/DiffCommentsSection.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte b/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte index 5eb86807..ad9b2f72 100644 --- a/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte +++ b/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte @@ -246,11 +246,11 @@ .comment-icon { display: flex; align-items: center; - color: var(--text-faint); + color: var(--diff-comment-accent); } .comment-icon.agent-icon { - color: var(--text-faint); + color: var(--diff-comment-accent); } .comment-icon.comment-icon-warning { From 339147293b4958f5030003089be9f707d82a6b3c Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Thu, 2 Apr 2026 15:50:50 +1100 Subject: [PATCH 6/6] fix(staged): keep only agent sidebar comment icons purple --- apps/staged/src/lib/features/diff/DiffCommentsSection.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte b/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte index ad9b2f72..fa6a04b8 100644 --- a/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte +++ b/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte @@ -246,7 +246,7 @@ .comment-icon { display: flex; align-items: center; - color: var(--diff-comment-accent); + color: var(--text-faint); } .comment-icon.agent-icon {