project panel: Use theme token for focused border color (#21593)

Danilo Leal created 1 year ago

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

This PR makes the border color of a focused project panel item use the
`panel_focused_border` theme token. This allow theme makers to customize
that independently of the `text_accent` color, which was the one being
previously used.

### One Dark

| Before | After |
|--------|--------|
| <img width="800" alt="Screenshot 2024-12-05 at 18 37 00"
src="https://github.com/user-attachments/assets/8b21f1e3-1738-42ab-af30-ad7d589007c1">
| <img width="800" alt="Screenshot 2024-12-05 at 18 39 42"
src="https://github.com/user-attachments/assets/1a424765-a1b6-48eb-ae75-1ffba2b59da3">
|
| <img width="800" alt="Screenshot 2024-12-05 at 18 37 08"
src="https://github.com/user-attachments/assets/d1955cf2-e194-46a5-9518-dc3af7f70cfe">
| <img width="800" alt="Screenshot 2024-12-05 at 18 39 51"
src="https://github.com/user-attachments/assets/99413075-f021-4961-8f03-ad1b40503ea6">
|

### Gruvbox Hard

| Before | After |
|--------|--------|
| <img width="800" alt="Screenshot 2024-12-05 at 18 38 05"
src="https://github.com/user-attachments/assets/cf84ce75-ac8a-4cb6-aaab-81e02bfb4835">
| <img width="800" alt="Screenshot 2024-12-05 at 18 40 15"
src="https://github.com/user-attachments/assets/f62b815b-8bed-41d8-85a1-7091d04bfbd2">
|
| <img width="800" alt="Screenshot 2024-12-05 at 18 38 16"
src="https://github.com/user-attachments/assets/fb458fa2-6ce1-4af0-a7a6-83584f3e5ed0">
| <img width="800" alt="Screenshot 2024-12-05 at 18 39 57"
src="https://github.com/user-attachments/assets/8bf44fe6-7090-4ef0-8b56-b8aa2e1f314d">
|

Release Notes:

- N/A

Change summary

crates/project_panel/src/project_panel.rs | 4 +++-
crates/theme/src/default_colors.rs        | 4 ++--
2 files changed, 5 insertions(+), 3 deletions(-)

Detailed changes

crates/project_panel/src/project_panel.rs

@@ -261,6 +261,7 @@ struct ItemColors {
     hover: Hsla,
     drag_over: Hsla,
     marked_active: Hsla,
+    focused: Hsla,
 }
 
 fn get_item_color(cx: &ViewContext<ProjectPanel>) -> ItemColors {
@@ -271,6 +272,7 @@ fn get_item_color(cx: &ViewContext<ProjectPanel>) -> ItemColors {
         hover: colors.ghost_element_hover,
         drag_over: colors.drop_target_background,
         marked_active: colors.ghost_element_selected,
+        focused: colors.panel_focused_border,
     }
 }
 
@@ -3504,7 +3506,7 @@ impl ProjectPanel {
             .rounded_none()
             .when(
                 !self.mouse_down && is_active && self.focus_handle.contains_focused(cx),
-                |this| this.border_color(Color::Selected.color(cx)),
+                |this| this.border_color(item_colors.focused),
             )
     }
 

crates/theme/src/default_colors.rs

@@ -58,7 +58,7 @@ impl ThemeColors {
             tab_active_background: neutral().light().step_1(),
             search_match_background: neutral().light().step_5(),
             panel_background: neutral().light().step_2(),
-            panel_focused_border: blue().light().step_5(),
+            panel_focused_border: blue().light().step_10(),
             panel_indent_guide: neutral().light_alpha().step_5(),
             panel_indent_guide_hover: neutral().light_alpha().step_6(),
             panel_indent_guide_active: neutral().light_alpha().step_6(),
@@ -164,7 +164,7 @@ impl ThemeColors {
             tab_active_background: neutral().dark().step_1(),
             search_match_background: neutral().dark().step_5(),
             panel_background: neutral().dark().step_2(),
-            panel_focused_border: blue().dark().step_5(),
+            panel_focused_border: blue().dark().step_12(),
             panel_indent_guide: neutral().dark_alpha().step_4(),
             panel_indent_guide_hover: neutral().dark_alpha().step_6(),
             panel_indent_guide_active: neutral().dark_alpha().step_6(),