xiaoxue_admin
/
orca
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Neil 2026-07-28 01:43:23 -07:00 committed by GitHub
parent efcc015d69
commit d548641f1d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/src/assets/main.css
View File

@ -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);
}

11
src/renderer/src/assets/worktree-card-active-style.test.ts
View File

@ -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)')
})