mirror of
https://github.com/stablyai/orca.git
synced 2026-09-21 16:02:20 +00:00
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:
@@ -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 &&
|
||||
|
||||
Reference in New Issue
Block a user