theme: Add panel.overlay_background and panel.overlay_hover (#34655)

In https://github.com/zed-industries/zed/pull/33994 sticky scroll was
added to project_panel.

I love this feature! 

This introduces a new element layering not seen before. On themes that
use transparency, the overlapping elements can make it difficult to read
project panel entries. This PR introduces a new selector:
~~panel.sticky_entry.background~~ `panel.overlay_background` This
selector lets you set the background of entries when they become sticky.

Closes https://github.com/zed-industries/zed/issues/34654

Before:

<img width="373" height="104" alt="Screenshot 2025-07-17 at 10 19 11 AM"
src="https://github.com/user-attachments/assets/d5bab065-53ca-4b27-b5d8-3b3f8d1f7a81"
/>

After:

<img width="292" height="445" alt="Screenshot 2025-07-17 at 11 46 57 AM"
src="https://github.com/user-attachments/assets/4cd2b87b-2989-4489-972f-872d2dc13a33"
/>

<img width="348" height="390" alt="Screenshot 2025-07-17 at 11 39 57 AM"
src="https://github.com/user-attachments/assets/49c0757f-2c50-4e01-92c6-2ae7e4132a53"
/>

<img width="668" height="187" alt="Screenshot 2025-07-17 at 11 39 29 AM"
src="https://github.com/user-attachments/assets/167536c2-5872-4306-90c6-c6b68276b618"
/>

Release Notes:

- Add `panel.sticky_entry.background` theme selector for modifying
project panel entries when they become sticky when scrolling and overlap
with entries below them.

---------

Co-authored-by: Smit Barmase <heysmitbarmase@gmail.com>
This commit is contained in:
Bret Comnes 2025-07-22 02:50:26 -07:00 committed by GitHub
parent 2b671a46f2
commit 87014cec71
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 58 additions and 15 deletions

View file

@ -384,12 +384,20 @@ struct ItemColors {
focused: Hsla,
}
fn get_item_color(cx: &App) -> ItemColors {
fn get_item_color(is_sticky: bool, cx: &App) -> ItemColors {
let colors = cx.theme().colors();
ItemColors {
default: colors.panel_background,
hover: colors.element_hover,
default: if is_sticky {
colors.panel_overlay_background
} else {
colors.panel_background
},
hover: if is_sticky {
colors.panel_overlay_hover
} else {
colors.element_hover
},
marked: colors.element_selected,
focused: colors.panel_focused_border,
drag_over: colors.drop_target_background,
@ -3903,7 +3911,7 @@ impl ProjectPanel {
let filename_text_color = details.filename_text_color;
let diagnostic_severity = details.diagnostic_severity;
let item_colors = get_item_color(cx);
let item_colors = get_item_color(is_sticky, cx);
let canonical_path = details
.canonical_path