Make jump-palette selection state higher contrast

- Increase light-mode contrast: foreground mix 12%→13%, ring 18%→19%
- Extend selectors for .jump-palette-command scope and add class
This commit is contained in:
Jinjing
2026-09-19 11:44:16 -07:00
parent 97763edac0
commit 4530231ec2
2 changed files with 9 additions and 5 deletions
+8 -4
View File
@@ -1179,20 +1179,24 @@ html.native-shell .app-layout {
this selector must beat that utility so light-mode selection is actually visible.
The role='option' arm covers virtualized rows that render outside cmdk. */
[data-slot='command-item'].jump-palette-item[data-selected='true'],
[role='option'].jump-palette-item[data-selected='true'] {
[role='option'].jump-palette-item[data-selected='true'],
.jump-palette-command [data-slot='command-item'][data-selected='true'],
.jump-palette-command [role='option'][data-selected='true'] {
/* Why: flat --accent (#f5f5f5) on the palette surface (#fff) is nearly invisible
in light mode — the keyboard cursor has to read as a solid selected row.
Mix foreground into background and draw an inset ring; expose the surface
as a var so status-pip cutouts can match without hardcoding. */
--jump-palette-selection-surface: color-mix(in srgb, var(--foreground) 12%, var(--background));
--jump-palette-selection-surface: color-mix(in srgb, var(--foreground) 13%, var(--background));
background: var(--jump-palette-selection-surface);
border-color: transparent;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 19%, transparent);
color: var(--foreground);
}
.dark [data-slot='command-item'].jump-palette-item[data-selected='true'],
.dark [role='option'].jump-palette-item[data-selected='true'] {
.dark [role='option'].jump-palette-item[data-selected='true'],
.dark .jump-palette-command [data-slot='command-item'][data-selected='true'],
.dark .jump-palette-command [role='option'][data-selected='true'] {
/* Why accent, not the light-mode mix: --accent (#404040) already reads clearly on
dark surfaces; a low-%% foreground mix was a visible step down from the old row. */
--jump-palette-selection-surface: var(--accent);
@@ -40,7 +40,7 @@ export function WorktreeJumpPaletteSurface({
loop: true,
value: controller.commandSelectedItemId,
onValueChange: controller.handleCommandSelectionChange,
className: 'bg-transparent',
className: 'jump-palette-command bg-transparent',
onKeyDownCapture: (event: React.KeyboardEvent) => {
if (
controller.selectionMovedByUserRef &&