From a6bb57a6d9389fb907b5e0e6a8a779c87e78bfc0 Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Tue, 28 Jul 2026 01:43:23 -0700
Subject: [PATCH] fix(sidebar): restore legible selected-workspace fill in dark
 mode (#11139)

#8321 mixed the selected card's wash into the opaque --worktree-sidebar
surface, lifting dark mode to 16% (#4b4b4b). Card text lost too much
contrast against it.

Return both modes to a translucent wash (light 8%, dark 10%) so the
brighter selection border added by #8321 carries the selected state
instead of the fill.

Co-authored-by: Orca <help@stably.ai>
---
 src/renderer/src/assets/main.css                      |  8 ++++----
 .../src/assets/worktree-card-active-style.test.ts     | 11 +++++++----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index a7d39b67af7..325712fd695 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -1164,11 +1164,11 @@
   background: color-mix(in srgb, var(--sidebar-accent) 40%, transparent);
 }
 
-/* Why: mixing into the concrete sidebar surface keeps selected contrast stable,
-   including when a custom translucent sidebar theme is active. */
+/* Why: the brighter border carries the selected state; a translucent wash keeps
+   card text legible instead of lifting the surface toward the foreground color. */
 [data-worktree-card-surface][data-worktree-card-active='primary'] {
   border-color: color-mix(in srgb, var(--worktree-sidebar-border) 40%, transparent);
-  background: color-mix(in srgb, var(--worktree-sidebar-foreground) 8%, var(--worktree-sidebar));
+  background: color-mix(in srgb, var(--worktree-sidebar-foreground) 8%, transparent);
   box-shadow: 0 1px 2px color-mix(in srgb, var(--worktree-sidebar-foreground) 4%, transparent);
 }
 
@@ -1178,7 +1178,7 @@
     var(--worktree-sidebar-foreground) 18%,
     var(--worktree-sidebar-border)
   );
-  background: color-mix(in srgb, var(--worktree-sidebar-foreground) 16%, var(--worktree-sidebar));
+  background: color-mix(in srgb, var(--worktree-sidebar-foreground) 10%, transparent);
   box-shadow: 0 1px 2px color-mix(in srgb, var(--worktree-sidebar-foreground) 3%, transparent);
 }
 
diff --git a/src/renderer/src/assets/worktree-card-active-style.test.ts b/src/renderer/src/assets/worktree-card-active-style.test.ts
index 3d80531036b..814c7ae55ee 100644
--- a/src/renderer/src/assets/worktree-card-active-style.test.ts
+++ b/src/renderer/src/assets/worktree-card-active-style.test.ts
@@ -14,7 +14,7 @@ function getCssRuleBody(selector: string): string {
 }
 
 describe('worktree card active styling', () => {
-  it('mixes the primary selection into the worktree sidebar surface', () => {
+  it('keeps the primary selection wash translucent so card text stays legible', () => {
     const primary = getCssRuleBody(
       "[data-worktree-card-surface][data-worktree-card-active='primary']"
     )
@@ -22,9 +22,12 @@ describe('worktree card active styling', () => {
       ".dark [data-worktree-card-surface][data-worktree-card-active='primary']"
     )
 
-    expect(primary).toContain('var(--worktree-sidebar-foreground) 8%')
-    expect(primary).toContain('var(--worktree-sidebar)')
-    expect(darkPrimary).toContain('var(--worktree-sidebar-foreground) 16%')
+    expect(primary).toContain(
+      'background: color-mix(in srgb, var(--worktree-sidebar-foreground) 8%, transparent)'
+    )
+    expect(darkPrimary).toContain(
+      'background: color-mix(in srgb, var(--worktree-sidebar-foreground) 10%, transparent)'
+    )
     expect(darkPrimary).toContain('var(--worktree-sidebar-border)')
   })