diff --git a/crates/storybook2/src/storybook2.rs b/crates/storybook2/src/storybook2.rs index 411fe18071..02284e433d 100644 --- a/crates/storybook2/src/storybook2.rs +++ b/crates/storybook2/src/storybook2.rs @@ -77,7 +77,7 @@ fn main() { WindowOptions { bounds: WindowBounds::Fixed(Bounds { origin: Default::default(), - size: size(px(1700.), px(980.)).into(), + size: size(px(1500.), px(780.)).into(), }), ..Default::default() }, diff --git a/crates/theme2/src/colors.rs b/crates/theme2/src/colors.rs index 02c93a2e98..ee69eed612 100644 --- a/crates/theme2/src/colors.rs +++ b/crates/theme2/src/colors.rs @@ -64,6 +64,7 @@ pub struct ThemeColors { pub element_selected: Hsla, pub element_disabled: Hsla, pub element_placeholder: Hsla, + pub element_drop_target: Hsla, pub ghost_element: Hsla, pub ghost_element_hover: Hsla, pub ghost_element_active: Hsla, @@ -83,6 +84,8 @@ pub struct ThemeColors { pub title_bar: Hsla, pub toolbar: Hsla, pub tab_bar: Hsla, + pub tab_inactive: Hsla, + pub tab_active: Hsla, pub editor: Hsla, pub editor_subheader: Hsla, pub editor_active_line: Hsla, diff --git a/crates/theme2/src/default_colors.rs b/crates/theme2/src/default_colors.rs index 8b7a7ac5cf..904e275c84 100644 --- a/crates/theme2/src/default_colors.rs +++ b/crates/theme2/src/default_colors.rs @@ -25,7 +25,7 @@ impl Default for StatusColors { fn default() -> Self { Self { conflict: red().dark(11).into(), - created: green().dark(11).into(), + created: grass().dark(11).into(), deleted: red().dark(11).into(), error: red().dark(11).into(), hidden: neutral().dark(11).into(), @@ -33,7 +33,7 @@ impl Default for StatusColors { info: blue().dark(11).into(), modified: yellow().dark(11).into(), renamed: blue().dark(11).into(), - success: green().dark(11).into(), + success: grass().dark(11).into(), warning: yellow().dark(11).into(), } } @@ -43,9 +43,9 @@ impl Default for GitStatusColors { fn default() -> Self { Self { conflict: orange().dark(11), - created: green().dark(11), + created: grass().dark(11), deleted: red().dark(11), - ignored: green().dark(11), + ignored: neutral().dark(11), modified: yellow().dark(11), renamed: blue().dark(11), } @@ -209,6 +209,7 @@ impl ThemeColors { element_selected: neutral().light(5).into(), element_disabled: neutral().light_alpha(3).into(), element_placeholder: neutral().light(11).into(), + element_drop_target: blue().light_alpha(2).into(), ghost_element: system.transparent, ghost_element_hover: neutral().light(4).into(), ghost_element_active: neutral().light(5).into(), @@ -218,16 +219,18 @@ impl ThemeColors { text_muted: neutral().light(11).into(), text_placeholder: neutral().light(11).into(), text_disabled: neutral().light(10).into(), - text_accent: blue().light(12).into(), - icon: neutral().light(12).into(), - icon_muted: neutral().light(11).into(), - icon_disabled: neutral().light(10).into(), - icon_placeholder: neutral().light(11).into(), - icon_accent: blue().light(12).into(), + text_accent: blue().light(11).into(), + icon: neutral().light(11).into(), + icon_muted: neutral().light(10).into(), + icon_disabled: neutral().light(9).into(), + icon_placeholder: neutral().light(10).into(), + icon_accent: blue().light(11).into(), status_bar: neutral().light(2).into(), title_bar: neutral().light(2).into(), - toolbar: neutral().light(2).into(), + toolbar: neutral().light(1).into(), tab_bar: neutral().light(2).into(), + tab_active: neutral().light(1).into(), + tab_inactive: neutral().light(2).into(), editor: neutral().light(1).into(), editor_subheader: neutral().light(2).into(), editor_active_line: neutral().light_alpha(3).into(), @@ -251,6 +254,7 @@ impl ThemeColors { element_selected: neutral().dark(5).into(), element_disabled: neutral().dark_alpha(3).into(), element_placeholder: neutral().dark(11).into(), + element_drop_target: blue().dark_alpha(2).into(), ghost_element: system.transparent, ghost_element_hover: neutral().dark(4).into(), ghost_element_active: neutral().dark(5).into(), @@ -260,16 +264,18 @@ impl ThemeColors { text_muted: neutral().dark(11).into(), text_placeholder: neutral().dark(11).into(), text_disabled: neutral().dark(10).into(), - text_accent: blue().dark(12).into(), - icon: neutral().dark(12).into(), - icon_muted: neutral().dark(11).into(), - icon_disabled: neutral().dark(10).into(), - icon_placeholder: neutral().dark(11).into(), - icon_accent: blue().dark(12).into(), + text_accent: blue().dark(11).into(), + icon: neutral().dark(11).into(), + icon_muted: neutral().dark(10).into(), + icon_disabled: neutral().dark(9).into(), + icon_placeholder: neutral().dark(10).into(), + icon_accent: blue().dark(11).into(), status_bar: neutral().dark(2).into(), title_bar: neutral().dark(2).into(), - toolbar: neutral().dark(2).into(), + toolbar: neutral().dark(1).into(), tab_bar: neutral().dark(2).into(), + tab_active: neutral().dark(1).into(), + tab_inactive: neutral().dark(2).into(), editor: neutral().dark(1).into(), editor_subheader: neutral().dark(2).into(), editor_active_line: neutral().dark_alpha(3).into(), diff --git a/crates/ui2/src/components/tab.rs b/crates/ui2/src/components/tab.rs index 5f20af0955..fddd82b064 100644 --- a/crates/ui2/src/components/tab.rs +++ b/crates/ui2/src/components/tab.rs @@ -108,13 +108,13 @@ impl Tab { let close_icon = || IconElement::new(Icon::Close).color(IconColor::Muted); let (tab_bg, tab_hover_bg, tab_active_bg) = match self.current { - true => ( - cx.theme().colors().ghost_element, + false => ( + cx.theme().colors().tab_inactive, cx.theme().colors().ghost_element_hover, cx.theme().colors().ghost_element_active, ), - false => ( - cx.theme().colors().element, + true => ( + cx.theme().colors().tab_active, cx.theme().colors().element_hover, cx.theme().colors().element_active, ), @@ -127,7 +127,7 @@ impl Tab { div() .id(self.id.clone()) .on_drag(move |_view, cx| cx.build_view(|cx| drag_state.clone())) - .drag_over::(|d| d.bg(black())) + .drag_over::(|d| d.bg(cx.theme().colors().element_drop_target)) .on_drop(|_view, state: View, cx| { dbg!(state.read(cx)); }) @@ -144,7 +144,7 @@ impl Tab { .px_1() .flex() .items_center() - .gap_1() + .gap_1p5() .children(has_fs_conflict.then(|| { IconElement::new(Icon::ExclamationTriangle) .size(crate::IconSize::Small) diff --git a/crates/ui2/src/components/tab_bar.rs b/crates/ui2/src/components/tab_bar.rs index 550105b98e..bb7fca1153 100644 --- a/crates/ui2/src/components/tab_bar.rs +++ b/crates/ui2/src/components/tab_bar.rs @@ -27,6 +27,7 @@ impl TabBar { let (can_navigate_back, can_navigate_forward) = self.can_navigate; div() + .group("tab_bar") .id(self.id.clone()) .w_full() .flex() @@ -34,6 +35,7 @@ impl TabBar { // Left Side .child( div() + .relative() .px_1() .flex() .flex_none() @@ -41,6 +43,7 @@ impl TabBar { // Nav Buttons .child( div() + .right_0() .flex() .items_center() .gap_px() @@ -67,10 +70,15 @@ impl TabBar { // Right Side .child( div() + // We only use absolute here since we don't + // have opacity or `hidden()` yet + .absolute() + .neg_top_7() .px_1() .flex() .flex_none() .gap_2() + .group_hover("tab_bar", |this| this.top_0()) // Nav Buttons .child( div() diff --git a/crates/ui2/src/elements/icon.rs b/crates/ui2/src/elements/icon.rs index 6c1b3a4f08..f3d612562f 100644 --- a/crates/ui2/src/elements/icon.rs +++ b/crates/ui2/src/elements/icon.rs @@ -26,18 +26,16 @@ pub enum IconColor { impl IconColor { pub fn color(self, cx: &WindowContext) -> Hsla { - let theme_colors = cx.theme().colors(); - match self { - IconColor::Default => theme_colors.icon, - IconColor::Muted => theme_colors.icon_muted, - IconColor::Disabled => theme_colors.icon_disabled, - IconColor::Placeholder => theme_colors.icon_placeholder, - IconColor::Accent => theme_colors.icon_accent, - IconColor::Error => gpui2::red(), - IconColor::Warning => gpui2::red(), - IconColor::Success => gpui2::red(), - IconColor::Info => gpui2::red(), + IconColor::Default => cx.theme().colors().icon, + IconColor::Muted => cx.theme().colors().icon_muted, + IconColor::Disabled => cx.theme().colors().icon_disabled, + IconColor::Placeholder => cx.theme().colors().icon_placeholder, + IconColor::Accent => cx.theme().colors().icon_accent, + IconColor::Error => cx.theme().status().error, + IconColor::Warning => cx.theme().status().warning, + IconColor::Success => cx.theme().status().success, + IconColor::Info => cx.theme().status().info, } } } diff --git a/crates/ui2/src/elements/label.rs b/crates/ui2/src/elements/label.rs index 7051565e17..360d003a8b 100644 --- a/crates/ui2/src/elements/label.rs +++ b/crates/ui2/src/elements/label.rs @@ -79,8 +79,7 @@ impl Label { this.relative().child( div() .absolute() - .top_px() - .my_auto() + .top_1_2() .w_full() .h_px() .bg(LabelColor::Hidden.hsla(cx)),