From d9497d49dea8187fbc5c527dcfd68deff5d5ed2c Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Thu, 28 Apr 2022 15:29:03 -0700 Subject: [PATCH] :art: Use Interactive wrapper for search option buttons --- assets/themes/cave-dark.json | 87 +++++++--------------------- assets/themes/cave-light.json | 87 +++++++--------------------- assets/themes/dark.json | 87 +++++++--------------------- assets/themes/light.json | 87 +++++++--------------------- assets/themes/solarized-dark.json | 87 +++++++--------------------- assets/themes/solarized-light.json | 87 +++++++--------------------- assets/themes/sulphurpool-dark.json | 87 +++++++--------------------- assets/themes/sulphurpool-light.json | 87 +++++++--------------------- crates/search/src/buffer_search.rs | 25 ++++---- crates/search/src/project_search.rs | 25 ++++---- crates/theme/src/theme.rs | 5 +- styles/src/styleTree/search.ts | 59 ++++++++----------- 12 files changed, 226 insertions(+), 584 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 4afb38f6f9..f243732819 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -1304,14 +1304,14 @@ "match_background": "#955ae780", "tab_icon_spacing": 8, "tab_icon_width": 14, - "active_hovered_option_button": { + "option_button": { "family": "Zed Mono", - "color": "#efecf4", + "color": "#8b8792", "size": 14, - "background": "#655f6d", + "background": "#26232a", "corner_radius": 4, "border": { - "color": "#655f6d", + "color": "#26232a", "width": 1 }, "margin": { @@ -1323,27 +1323,26 @@ "left": 8, "right": 8, "top": 3 - } - }, - "active_option_button": { - "family": "Zed Mono", - "color": "#efecf4", - "size": 14, - "background": "#655f6d", - "corner_radius": 4, - "border": { - "color": "#655f6d", - "width": 1 }, - "margin": { - "left": 2, - "right": 2 + "active": { + "family": "Zed Mono", + "color": "#efecf4", + "size": 14, + "background": "#655f6d", + "border": { + "color": "#655f6d", + "width": 1 + } }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "hover": { + "family": "Zed Mono", + "color": "#efecf4", + "size": 14, + "background": "#655f6d", + "border": { + "color": "#655f6d", + "width": 1 + } } }, "editor": { @@ -1379,27 +1378,6 @@ "right": 8 } }, - "hovered_option_button": { - "family": "Zed Mono", - "color": "#efecf4", - "size": 14, - "background": "#26232a", - "corner_radius": 4, - "border": { - "color": "#655f6d", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "invalid_editor": { "background": "#19171c", "corner_radius": 8, @@ -1439,27 +1417,6 @@ "size": 14, "padding": 6 }, - "option_button": { - "family": "Zed Mono", - "color": "#8b8792", - "size": 14, - "background": "#26232a", - "corner_radius": 4, - "border": { - "color": "#26232a", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "option_button_group": { "padding": { "left": 4, diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index bf2f968715..ff44dab6b1 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -1304,14 +1304,14 @@ "match_background": "#955ae780", "tab_icon_spacing": 8, "tab_icon_width": 14, - "active_hovered_option_button": { + "option_button": { "family": "Zed Mono", - "color": "#19171c", + "color": "#585260", "size": 14, - "background": "#7e7887", + "background": "#e2dfe7", "corner_radius": 4, "border": { - "color": "#7e7887", + "color": "#e2dfe7", "width": 1 }, "margin": { @@ -1323,27 +1323,26 @@ "left": 8, "right": 8, "top": 3 - } - }, - "active_option_button": { - "family": "Zed Mono", - "color": "#19171c", - "size": 14, - "background": "#7e7887", - "corner_radius": 4, - "border": { - "color": "#7e7887", - "width": 1 }, - "margin": { - "left": 2, - "right": 2 + "active": { + "family": "Zed Mono", + "color": "#19171c", + "size": 14, + "background": "#7e7887", + "border": { + "color": "#7e7887", + "width": 1 + } }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "hover": { + "family": "Zed Mono", + "color": "#19171c", + "size": 14, + "background": "#7e7887", + "border": { + "color": "#7e7887", + "width": 1 + } } }, "editor": { @@ -1379,27 +1378,6 @@ "right": 8 } }, - "hovered_option_button": { - "family": "Zed Mono", - "color": "#19171c", - "size": 14, - "background": "#e2dfe7", - "corner_radius": 4, - "border": { - "color": "#7e7887", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "invalid_editor": { "background": "#efecf4", "corner_radius": 8, @@ -1439,27 +1417,6 @@ "size": 14, "padding": 6 }, - "option_button": { - "family": "Zed Mono", - "color": "#585260", - "size": 14, - "background": "#e2dfe7", - "corner_radius": 4, - "border": { - "color": "#e2dfe7", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "option_button_group": { "padding": { "left": 4, diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 2f227aa6ed..88357f4267 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -1304,14 +1304,14 @@ "match_background": "#3f15a380", "tab_icon_spacing": 8, "tab_icon_width": 14, - "active_hovered_option_button": { + "option_button": { "family": "Zed Mono", - "color": "#ffffff", + "color": "#9c9c9c", "size": 14, - "background": "#232323", + "background": "#0e0e0e", "corner_radius": 4, "border": { - "color": "#404040", + "color": "#232323", "width": 1 }, "margin": { @@ -1323,27 +1323,26 @@ "left": 8, "right": 8, "top": 3 - } - }, - "active_option_button": { - "family": "Zed Mono", - "color": "#ffffff", - "size": 14, - "background": "#232323", - "corner_radius": 4, - "border": { - "color": "#404040", - "width": 1 }, - "margin": { - "left": 2, - "right": 2 + "active": { + "family": "Zed Mono", + "color": "#ffffff", + "size": 14, + "background": "#232323", + "border": { + "color": "#404040", + "width": 1 + } }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "hover": { + "family": "Zed Mono", + "color": "#ffffff", + "size": 14, + "background": "#1c1c1c", + "border": { + "color": "#404040", + "width": 1 + } } }, "editor": { @@ -1379,27 +1378,6 @@ "right": 8 } }, - "hovered_option_button": { - "family": "Zed Mono", - "color": "#ffffff", - "size": 14, - "background": "#0e0e0e", - "corner_radius": 4, - "border": { - "color": "#404040", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "invalid_editor": { "background": "#000000", "corner_radius": 8, @@ -1439,27 +1417,6 @@ "size": 14, "padding": 6 }, - "option_button": { - "family": "Zed Mono", - "color": "#9c9c9c", - "size": 14, - "background": "#0e0e0e", - "corner_radius": 4, - "border": { - "color": "#232323", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "option_button_group": { "padding": { "left": 4, diff --git a/assets/themes/light.json b/assets/themes/light.json index 291e0e6e12..aa4f87ca9e 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -1304,14 +1304,14 @@ "match_background": "#fce9b7", "tab_icon_spacing": 8, "tab_icon_width": 14, - "active_hovered_option_button": { + "option_button": { "family": "Zed Mono", - "color": "#000000", + "color": "#474747", "size": 14, - "background": "#ffffff", + "background": "#f1f1f1", "corner_radius": 4, "border": { - "color": "#e3e3e3", + "color": "#d5d5d5", "width": 1 }, "margin": { @@ -1323,27 +1323,26 @@ "left": 8, "right": 8, "top": 3 - } - }, - "active_option_button": { - "family": "Zed Mono", - "color": "#000000", - "size": 14, - "background": "#ffffff", - "corner_radius": 4, - "border": { - "color": "#e3e3e3", - "width": 1 }, - "margin": { - "left": 2, - "right": 2 + "active": { + "family": "Zed Mono", + "color": "#000000", + "size": 14, + "background": "#ffffff", + "border": { + "color": "#e3e3e3", + "width": 1 + } }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "hover": { + "family": "Zed Mono", + "color": "#000000", + "size": 14, + "background": "#f8f8f8", + "border": { + "color": "#e3e3e3", + "width": 1 + } } }, "editor": { @@ -1379,27 +1378,6 @@ "right": 8 } }, - "hovered_option_button": { - "family": "Zed Mono", - "color": "#000000", - "size": 14, - "background": "#f1f1f1", - "corner_radius": 4, - "border": { - "color": "#e3e3e3", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "invalid_editor": { "background": "#ffffff", "corner_radius": 8, @@ -1439,27 +1417,6 @@ "size": 14, "padding": 6 }, - "option_button": { - "family": "Zed Mono", - "color": "#474747", - "size": 14, - "background": "#f1f1f1", - "corner_radius": 4, - "border": { - "color": "#d5d5d5", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "option_button_group": { "padding": { "left": 4, diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index ef7a0d9a19..665f0a51d2 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -1304,14 +1304,14 @@ "match_background": "#6c71c480", "tab_icon_spacing": 8, "tab_icon_width": 14, - "active_hovered_option_button": { + "option_button": { "family": "Zed Mono", - "color": "#fdf6e3", + "color": "#93a1a1", "size": 14, - "background": "#657b83", + "background": "#073642", "corner_radius": 4, "border": { - "color": "#657b83", + "color": "#073642", "width": 1 }, "margin": { @@ -1323,27 +1323,26 @@ "left": 8, "right": 8, "top": 3 - } - }, - "active_option_button": { - "family": "Zed Mono", - "color": "#fdf6e3", - "size": 14, - "background": "#657b83", - "corner_radius": 4, - "border": { - "color": "#657b83", - "width": 1 }, - "margin": { - "left": 2, - "right": 2 + "active": { + "family": "Zed Mono", + "color": "#fdf6e3", + "size": 14, + "background": "#657b83", + "border": { + "color": "#657b83", + "width": 1 + } }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "hover": { + "family": "Zed Mono", + "color": "#fdf6e3", + "size": 14, + "background": "#657b83", + "border": { + "color": "#657b83", + "width": 1 + } } }, "editor": { @@ -1379,27 +1378,6 @@ "right": 8 } }, - "hovered_option_button": { - "family": "Zed Mono", - "color": "#fdf6e3", - "size": 14, - "background": "#073642", - "corner_radius": 4, - "border": { - "color": "#657b83", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "invalid_editor": { "background": "#002b36", "corner_radius": 8, @@ -1439,27 +1417,6 @@ "size": 14, "padding": 6 }, - "option_button": { - "family": "Zed Mono", - "color": "#93a1a1", - "size": 14, - "background": "#073642", - "corner_radius": 4, - "border": { - "color": "#073642", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "option_button_group": { "padding": { "left": 4, diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 5636449549..df96c8f190 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -1304,14 +1304,14 @@ "match_background": "#6c71c480", "tab_icon_spacing": 8, "tab_icon_width": 14, - "active_hovered_option_button": { + "option_button": { "family": "Zed Mono", - "color": "#002b36", + "color": "#586e75", "size": 14, - "background": "#839496", + "background": "#eee8d5", "corner_radius": 4, "border": { - "color": "#839496", + "color": "#eee8d5", "width": 1 }, "margin": { @@ -1323,27 +1323,26 @@ "left": 8, "right": 8, "top": 3 - } - }, - "active_option_button": { - "family": "Zed Mono", - "color": "#002b36", - "size": 14, - "background": "#839496", - "corner_radius": 4, - "border": { - "color": "#839496", - "width": 1 }, - "margin": { - "left": 2, - "right": 2 + "active": { + "family": "Zed Mono", + "color": "#002b36", + "size": 14, + "background": "#839496", + "border": { + "color": "#839496", + "width": 1 + } }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "hover": { + "family": "Zed Mono", + "color": "#002b36", + "size": 14, + "background": "#839496", + "border": { + "color": "#839496", + "width": 1 + } } }, "editor": { @@ -1379,27 +1378,6 @@ "right": 8 } }, - "hovered_option_button": { - "family": "Zed Mono", - "color": "#002b36", - "size": 14, - "background": "#eee8d5", - "corner_radius": 4, - "border": { - "color": "#839496", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "invalid_editor": { "background": "#fdf6e3", "corner_radius": 8, @@ -1439,27 +1417,6 @@ "size": 14, "padding": 6 }, - "option_button": { - "family": "Zed Mono", - "color": "#586e75", - "size": 14, - "background": "#eee8d5", - "corner_radius": 4, - "border": { - "color": "#eee8d5", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "option_button_group": { "padding": { "left": 4, diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index cf9b21b7b4..07c1967f05 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -1304,14 +1304,14 @@ "match_background": "#6679cc80", "tab_icon_spacing": 8, "tab_icon_width": 14, - "active_hovered_option_button": { + "option_button": { "family": "Zed Mono", - "color": "#f5f7ff", + "color": "#979db4", "size": 14, - "background": "#6b7394", + "background": "#293256", "corner_radius": 4, "border": { - "color": "#6b7394", + "color": "#293256", "width": 1 }, "margin": { @@ -1323,27 +1323,26 @@ "left": 8, "right": 8, "top": 3 - } - }, - "active_option_button": { - "family": "Zed Mono", - "color": "#f5f7ff", - "size": 14, - "background": "#6b7394", - "corner_radius": 4, - "border": { - "color": "#6b7394", - "width": 1 }, - "margin": { - "left": 2, - "right": 2 + "active": { + "family": "Zed Mono", + "color": "#f5f7ff", + "size": 14, + "background": "#6b7394", + "border": { + "color": "#6b7394", + "width": 1 + } }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "hover": { + "family": "Zed Mono", + "color": "#f5f7ff", + "size": 14, + "background": "#6b7394", + "border": { + "color": "#6b7394", + "width": 1 + } } }, "editor": { @@ -1379,27 +1378,6 @@ "right": 8 } }, - "hovered_option_button": { - "family": "Zed Mono", - "color": "#f5f7ff", - "size": 14, - "background": "#293256", - "corner_radius": 4, - "border": { - "color": "#6b7394", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "invalid_editor": { "background": "#202746", "corner_radius": 8, @@ -1439,27 +1417,6 @@ "size": 14, "padding": 6 }, - "option_button": { - "family": "Zed Mono", - "color": "#979db4", - "size": 14, - "background": "#293256", - "corner_radius": 4, - "border": { - "color": "#293256", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "option_button_group": { "padding": { "left": 4, diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 47bd33309e..1879c5de9d 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -1304,14 +1304,14 @@ "match_background": "#6679cc80", "tab_icon_spacing": 8, "tab_icon_width": 14, - "active_hovered_option_button": { + "option_button": { "family": "Zed Mono", - "color": "#202746", + "color": "#5e6687", "size": 14, - "background": "#898ea4", + "background": "#dfe2f1", "corner_radius": 4, "border": { - "color": "#898ea4", + "color": "#dfe2f1", "width": 1 }, "margin": { @@ -1323,27 +1323,26 @@ "left": 8, "right": 8, "top": 3 - } - }, - "active_option_button": { - "family": "Zed Mono", - "color": "#202746", - "size": 14, - "background": "#898ea4", - "corner_radius": 4, - "border": { - "color": "#898ea4", - "width": 1 }, - "margin": { - "left": 2, - "right": 2 + "active": { + "family": "Zed Mono", + "color": "#202746", + "size": 14, + "background": "#898ea4", + "border": { + "color": "#898ea4", + "width": 1 + } }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 + "hover": { + "family": "Zed Mono", + "color": "#202746", + "size": 14, + "background": "#898ea4", + "border": { + "color": "#898ea4", + "width": 1 + } } }, "editor": { @@ -1379,27 +1378,6 @@ "right": 8 } }, - "hovered_option_button": { - "family": "Zed Mono", - "color": "#202746", - "size": 14, - "background": "#dfe2f1", - "corner_radius": 4, - "border": { - "color": "#898ea4", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "invalid_editor": { "background": "#f5f7ff", "corner_radius": 8, @@ -1439,27 +1417,6 @@ "size": 14, "padding": 6 }, - "option_button": { - "family": "Zed Mono", - "color": "#5e6687", - "size": 14, - "background": "#dfe2f1", - "corner_radius": 4, - "border": { - "color": "#dfe2f1", - "width": 1 - }, - "margin": { - "left": 2, - "right": 2 - }, - "padding": { - "bottom": 3, - "left": 8, - "right": 8, - "top": 3 - } - }, "option_button_group": { "padding": { "left": 4, diff --git a/crates/search/src/buffer_search.rs b/crates/search/src/buffer_search.rs index 9893c108c0..a4b73bffde 100644 --- a/crates/search/src/buffer_search.rs +++ b/crates/search/src/buffer_search.rs @@ -281,13 +281,12 @@ impl BufferSearchBar { ) -> ElementBox { let is_active = self.is_search_option_enabled(search_option); MouseEventHandler::new::(search_option as usize, cx, |state, cx| { - let theme = &cx.global::().theme.search; - let style = match (is_active, state.hovered) { - (false, false) => &theme.option_button, - (false, true) => &theme.hovered_option_button, - (true, false) => &theme.active_option_button, - (true, true) => &theme.active_hovered_option_button, - }; + let style = &cx + .global::() + .theme + .search + .option_button + .style_for(state, is_active); Label::new(icon.to_string(), style.text.clone()) .contained() .with_style(style.container) @@ -306,12 +305,12 @@ impl BufferSearchBar { ) -> ElementBox { enum NavButton {} MouseEventHandler::new::(direction as usize, cx, |state, cx| { - let theme = &cx.global::().theme.search; - let style = if state.hovered { - &theme.hovered_option_button - } else { - &theme.option_button - }; + let style = &cx + .global::() + .theme + .search + .option_button + .style_for(state, false); Label::new(icon.to_string(), style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/search/src/project_search.rs b/crates/search/src/project_search.rs index bb35b2ebdc..39870a31d5 100644 --- a/crates/search/src/project_search.rs +++ b/crates/search/src/project_search.rs @@ -655,12 +655,12 @@ impl ProjectSearchBar { ) -> ElementBox { enum NavButton {} MouseEventHandler::new::(direction as usize, cx, |state, cx| { - let theme = &cx.global::().theme.search; - let style = if state.hovered { - &theme.hovered_option_button - } else { - &theme.option_button - }; + let style = &cx + .global::() + .theme + .search + .option_button + .style_for(state, false); Label::new(icon.to_string(), style.text.clone()) .contained() .with_style(style.container) @@ -682,13 +682,12 @@ impl ProjectSearchBar { ) -> ElementBox { let is_active = self.is_option_enabled(option, cx); MouseEventHandler::new::(option as usize, cx, |state, cx| { - let theme = &cx.global::().theme.search; - let style = match (is_active, state.hovered) { - (false, false) => &theme.option_button, - (false, true) => &theme.hovered_option_button, - (true, false) => &theme.active_option_button, - (true, true) => &theme.active_hovered_option_button, - }; + let style = &cx + .global::() + .theme + .search + .option_button + .style_for(state, is_active); Label::new(icon.to_string(), style.text.clone()) .contained() .with_style(style.container) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 9b700e5b1e..45f7dcf5db 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -114,10 +114,7 @@ pub struct Search { pub editor: FindEditor, pub invalid_editor: ContainerStyle, pub option_button_group: ContainerStyle, - pub option_button: ContainedText, - pub active_option_button: ContainedText, - pub hovered_option_button: ContainedText, - pub active_hovered_option_button: ContainedText, + pub option_button: Interactive, pub match_background: Color, pub match_index: ContainedText, pub results_status: TextStyle, diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 57aeff0430..e0c4a2003c 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -2,23 +2,6 @@ import Theme from "../themes/theme"; import { backgroundColor, border, player, text } from "./components"; export default function search(theme: Theme) { - const optionButton = { - ...text(theme, "mono", "secondary"), - background: backgroundColor(theme, "on500"), - cornerRadius: 4, - border: border(theme, "secondary"), - margin: { - left: 2, - right: 2, - }, - padding: { - bottom: 3, - left: 8, - right: 8, - top: 3, - }, - }; - const editor = { background: backgroundColor(theme, 500), cornerRadius: 8, @@ -43,24 +26,33 @@ export default function search(theme: Theme) { matchBackground: theme.editor.highlight.match.value, tabIconSpacing: 8, tabIconWidth: 14, - activeHoveredOptionButton: { - ...optionButton, - ...text(theme, "mono", "active"), - background: backgroundColor(theme, "on500", "active"), - border: border(theme, "muted"), - }, - activeOptionButton: { - ...optionButton, - ...text(theme, "mono", "active"), - background: backgroundColor(theme, "on500", "active"), - border: border(theme, "muted"), + optionButton: { + ...text(theme, "mono", "secondary"), + background: backgroundColor(theme, "on500"), + cornerRadius: 4, + border: border(theme, "secondary"), + margin: { + left: 2, + right: 2, + }, + padding: { + bottom: 3, + left: 8, + right: 8, + top: 3, + }, + active: { + ...text(theme, "mono", "active"), + background: backgroundColor(theme, "on500", "active"), + border: border(theme, "muted"), + }, + hover: { + ...text(theme, "mono", "active"), + background: backgroundColor(theme, "on500", "hovered"), + border: border(theme, "muted"), + } }, editor, - hoveredOptionButton: { - ...optionButton, - ...text(theme, "mono", "active"), - border: border(theme, "muted"), - }, invalidEditor: { ...editor, border: border(theme, "error"), @@ -69,7 +61,6 @@ export default function search(theme: Theme) { ...text(theme, "mono", "muted"), padding: 6, }, - optionButton, optionButtonGroup: { padding: { left: 4,