Work on light theme, update tab

crates/theme2/src/default_colors.rs

@@ -5,7 +5,7 @@ use crate::ColorScale;
 use crate::{SystemColors, ThemeColors};
 
 pub(crate) fn neutral() -> ColorScaleSet {
-    slate()
+    sand()
 }
 
 impl ThemeColors {
@@ -29,12 +29,12 @@ impl ThemeColors {
             element_disabled: neutral().light_alpha().step_3(),
             drop_target_background: blue().light_alpha().step_2(),
             ghost_element_background: system.transparent,
-            ghost_element_hover: neutral().light_alpha().step_4(),
+            ghost_element_hover: neutral().light_alpha().step_3(),
-            ghost_element_active: neutral().light_alpha().step_5(),
+            ghost_element_active: neutral().light_alpha().step_4(),
             ghost_element_selected: neutral().light_alpha().step_5(),
             ghost_element_disabled: neutral().light_alpha().step_3(),
-            text: yellow().light().step_9(),
+            text: neutral().light().step_12(),
-            text_muted: neutral().light().step_11(),
+            text_muted: neutral().light().step_10(),
             text_placeholder: neutral().light().step_10(),
             text_disabled: neutral().light().step_9(),
             text_accent: blue().light().step_11(),
@@ -53,13 +53,13 @@ impl ThemeColors {
             editor_gutter_background: neutral().light().step_1(), // todo!("pick the right colors")
             editor_subheader_background: neutral().light().step_2(),
             editor_active_line_background: neutral().light_alpha().step_3(),
-            editor_line_number: neutral().light_alpha().step_3(), // todo!("pick the right colors")
+            editor_line_number: neutral().light().step_10(),
-            editor_active_line_number: neutral().light_alpha().step_3(), // todo!("pick the right colors")
+            editor_active_line_number: neutral().light().step_11(),
-            editor_highlighted_line_background: neutral().light_alpha().step_4(), // todo!("pick the right colors")
+            editor_highlighted_line_background: neutral().light_alpha().step_3(),
-            editor_invisible: neutral().light_alpha().step_4(), // todo!("pick the right colors")
+            editor_invisible: neutral().light().step_10(),
-            editor_wrap_guide: neutral().light_alpha().step_4(), // todo!("pick the right colors")
+            editor_wrap_guide: neutral().light_alpha().step_7(),
-            editor_active_wrap_guide: neutral().light_alpha().step_4(), // todo!("pick the right colors")
+            editor_active_wrap_guide: neutral().light_alpha().step_8(), // todo!("pick the right colors")
-            editor_document_highlight_read_background: neutral().light_alpha().step_4(), // todo!("pick the right colors")
+            editor_document_highlight_read_background: neutral().light_alpha().step_3(), // todo!("pick the right colors")
             editor_document_highlight_write_background: neutral().light_alpha().step_4(), // todo!("pick the right colors")
             terminal_background: neutral().light().step_1(),
             terminal_ansi_black: black().light().step_12(),

crates/theme2/src/default_theme.rs

@@ -1,47 +1,49 @@
+use std::sync::Arc;
+
 use crate::{
     one_themes::{one_dark, one_family},
-    Theme, ThemeFamily,
+    Theme, ThemeFamily, Appearance, ThemeStyles, SystemColors, ThemeColors, StatusColors, PlayerColors, SyntaxTheme, default_color_scales,
 };
 
-// fn zed_pro_daylight() -> Theme {
+fn zed_pro_daylight() -> Theme {
-//     Theme {
+    Theme {
-//         id: "zed_pro_daylight".to_string(),
+        id: "zed_pro_daylight".to_string(),
-//         name: "Zed Pro Daylight".into(),
+        name: "Zed Pro Daylight".into(),
-//         appearance: Appearance::Light,
+        appearance: Appearance::Light,
-//         styles: ThemeStyles {
+        styles: ThemeStyles {
-//             system: SystemColors::default(),
+            system: SystemColors::default(),
-//             colors: ThemeColors::light(),
+            colors: ThemeColors::light(),
-//             status: StatusColors::light(),
+            status: StatusColors::light(),
-//             player: PlayerColors::light(),
+            player: PlayerColors::light(),
-//             syntax: Arc::new(SyntaxTheme::light()),
+            syntax: Arc::new(SyntaxTheme::light()),
-//         },
+        },
-//     }
+    }
-// }
+}
 
-// pub(crate) fn zed_pro_moonlight() -> Theme {
+pub(crate) fn zed_pro_moonlight() -> Theme {
-//     Theme {
+    Theme {
-//         id: "zed_pro_moonlight".to_string(),
+        id: "zed_pro_moonlight".to_string(),
-//         name: "Zed Pro Moonlight".into(),
+        name: "Zed Pro Moonlight".into(),
-//         appearance: Appearance::Dark,
+        appearance: Appearance::Dark,
-//         styles: ThemeStyles {
+        styles: ThemeStyles {
-//             system: SystemColors::default(),
+            system: SystemColors::default(),
-//             colors: ThemeColors::dark(),
+            colors: ThemeColors::dark(),
-//             status: StatusColors::dark(),
+            status: StatusColors::dark(),
-//             player: PlayerColors::dark(),
+            player: PlayerColors::dark(),
-//             syntax: Arc::new(SyntaxTheme::dark()),
+            syntax: Arc::new(SyntaxTheme::dark()),
-//         },
+        },
-//     }
+    }
-// }
+}
 
-// pub fn zed_pro_family() -> ThemeFamily {
+pub fn zed_pro_family() -> ThemeFamily {
-//     ThemeFamily {
+    ThemeFamily {
-//         id: "zed_pro".to_string(),
+        id: "zed_pro".to_string(),
-//         name: "Zed Pro".into(),
+        name: "Zed Pro".into(),
-//         author: "Zed Team".into(),
+        author: "Zed Team".into(),
-//         themes: vec![zed_pro_daylight(), zed_pro_moonlight()],
+        themes: vec![zed_pro_daylight(), zed_pro_moonlight()],
-//         scales: default_color_scales(),
+        scales: default_color_scales(),
-//     }
+    }
-// }
+}
 
 impl Default for ThemeFamily {
     fn default() -> Self {

crates/theme2/src/registry.rs

@@ -7,7 +7,7 @@ use refineable::Refineable;
 
 use crate::{
     one_themes::one_family, Appearance, PlayerColors, StatusColors, SyntaxTheme, SystemColors,
-    Theme, ThemeColors, ThemeFamily, ThemeStyles, UserTheme, UserThemeFamily,
+    Theme, ThemeColors, ThemeFamily, ThemeStyles, UserTheme, UserThemeFamily, zed_pro_family,
 };
 
 pub struct ThemeRegistry {
@@ -117,7 +117,7 @@ impl Default for ThemeRegistry {
             themes: HashMap::default(),
         };
 
-        this.insert_theme_families([one_family()]);
+        this.insert_theme_families([zed_pro_family(), one_family()]);
 
         this
     }

crates/theme2/src/styles/syntax.rs

@@ -22,8 +22,8 @@ impl SyntaxTheme {
             highlights: vec![
                 ("attribute".into(), cyan().light().step_11().into()),
                 ("boolean".into(), tomato().light().step_11().into()),
-                ("comment".into(), neutral().light().step_11().into()),
+                ("comment".into(), neutral().light().step_10().into()),
-                ("comment.doc".into(), iris().light().step_12().into()),
+                ("comment.doc".into(), iris().light().step_11().into()),
                 ("constant".into(), red().light().step_9().into()),
                 ("constructor".into(), red().light().step_9().into()),
                 ("embedded".into(), red().light().step_9().into()),
@@ -32,11 +32,11 @@ impl SyntaxTheme {
                 ("enum".into(), red().light().step_9().into()),
                 ("function".into(), red().light().step_9().into()),
                 ("hint".into(), red().light().step_9().into()),
-                ("keyword".into(), orange().light().step_11().into()),
+                ("keyword".into(), orange().light().step_9().into()),
                 ("label".into(), red().light().step_9().into()),
                 ("link_text".into(), red().light().step_9().into()),
                 ("link_uri".into(), red().light().step_9().into()),
-                ("number".into(), red().light().step_9().into()),
+                ("number".into(), purple().light().step_10().into()),
                 ("operator".into(), red().light().step_9().into()),
                 ("predictive".into(), red().light().step_9().into()),
                 ("preproc".into(), red().light().step_9().into()),
@@ -49,16 +49,16 @@ impl SyntaxTheme {
                 ),
                 (
                     "punctuation.delimiter".into(),
-                    neutral().light().step_11().into(),
+                    neutral().light().step_10().into(),
                 ),
                 (
                     "punctuation.list_marker".into(),
                     blue().light().step_11().into(),
                 ),
                 ("punctuation.special".into(), red().light().step_9().into()),
-                ("string".into(), jade().light().step_11().into()),
+                ("string".into(), jade().light().step_9().into()),
                 ("string.escape".into(), red().light().step_9().into()),
-                ("string.regex".into(), tomato().light().step_11().into()),
+                ("string.regex".into(), tomato().light().step_9().into()),
                 ("string.special".into(), red().light().step_9().into()),
                 (
                     "string.special.symbol".into(),
@@ -67,7 +67,7 @@ impl SyntaxTheme {
                 ("tag".into(), red().light().step_9().into()),
                 ("text.literal".into(), red().light().step_9().into()),
                 ("title".into(), red().light().step_9().into()),
-                ("type".into(), red().light().step_9().into()),
+                ("type".into(), cyan().light().step_9().into()),
                 ("variable".into(), red().light().step_9().into()),
                 ("variable.special".into(), red().light().step_9().into()),
                 ("variant".into(), red().light().step_9().into()),

crates/ui2/src/components/icon.rs

@@ -171,7 +171,7 @@ impl RenderOnce for IconElement {
 
     fn render(self, cx: &mut WindowContext) -> Self::Rendered {
         let svg_size = match self.size {
-            IconSize::Small => rems(14. / 16.),
+            IconSize::Small => rems(12. / 16.),
             IconSize::Medium => rems(16. / 16.),
         };
 

crates/workspace2/src/pane.rs

@@ -27,7 +27,8 @@ use std::{
 };
 
 use ui::{
-    h_stack, prelude::*, right_click_menu, Color, Icon, IconButton, IconElement, Label, Tooltip,
+    h_stack, prelude::*, right_click_menu, ButtonLike, Color, Icon, IconButton, IconElement,
+    IconSize, Label, Tooltip,
 };
 use ui::{v_stack, ContextMenu};
 use util::truncate_and_remove_front;
@@ -1415,20 +1416,38 @@ impl Pane {
         cx: &mut ViewContext<'_, Pane>,
     ) -> impl IntoElement {
         let label = item.tab_content(Some(detail), cx);
+        let close_right = ItemSettings::get_global(cx).close_position.right();
+
         let close_icon = || {
             let id = item.item_id();
 
             div()
                 .id(ix)
+                .w_3p5()
+                .h_3p5()
+                .rounded_sm()
+                .border()
+                .border_color(cx.theme().colors().border_variant)
+                .absolute()
+                .map(|this| {
+                    if close_right {
+                        this.right_1()
+                    } else {
+                        this.left_1()
+                    }
+                })
                 .invisible()
                 .group_hover("", |style| style.visible())
-                .child(
+                .hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
-                    IconButton::new("close_tab", Icon::Close).on_click(cx.listener(
+                .active(|style| style.bg(cx.theme().colors().ghost_element_active))
-                        move |pane, _, cx| {
+                .on_click(cx.listener(move |pane, _, cx| {
                     pane.close_item_by_id(id, SaveIntent::Close, cx)
                         .detach_and_log_err(cx);
-                        },
+                }))
-                    )),
+                .child(
+                    IconElement::new(Icon::Close)
+                        .color(Color::Muted)
+                        .size(IconSize::Small),
                 )
         };
 
@@ -1447,12 +1466,12 @@ impl Pane {
             ),
         };
 
-        let close_right = ItemSettings::get_global(cx).close_position.right();
         let is_active = ix == self.active_item_index;
 
-        let tab = div()
+        let tab = h_stack()
             .group("")
             .id(ix)
+            .relative()
             .cursor_pointer()
             .when_some(item.tab_tooltip_text(cx), |div, text| {
                 div.tooltip(move |cx| cx.build_view(|cx| Tooltip::new(text.clone())).into())
@@ -1466,15 +1485,15 @@ impl Pane {
             .flex()
             .items_center()
             .justify_center()
-            // todo!("Nate - I need to do some work to balance all the items in the tab once things stablize")
+            .px_5()
-            .map(|this| {
+            // .map(|this| {
-                if close_right {
+            //     if close_right {
-                    this.pl_3().pr_1()
+            //         this.pl_3().pr_1()
-                } else {
+            //     } else {
-                    this.pr_1().pr_3()
+            //         this.pr_1().pr_3()
-                }
+            //     }
-            })
+            // })
-            .py_1()
+            .h(rems(1.875))
             .bg(tab_bg)
             .border_color(cx.theme().colors().border)
             .text_color(if is_active {
@@ -1485,23 +1504,19 @@ impl Pane {
             .map(|this| {
                 let is_last_item = ix == self.items.len() - 1;
                 match ix.cmp(&self.active_item_index) {
-                    cmp::Ordering::Less => this.border_l().mr_px(),
+                    cmp::Ordering::Less => this.border_l().mr_px().border_b(),
                     cmp::Ordering::Greater => {
                         if is_last_item {
-                            this.mr_px().ml_px()
+                            this.mr_px().ml_px().border_b()
                         } else {
-                            this.border_r().ml_px()
+                            this.border_r().ml_px().border_b()
                         }
                     }
-                    cmp::Ordering::Equal => this.border_l().border_r(),
+                    cmp::Ordering::Equal => this.border_l().border_r().mb_px(),
                 }
             })
             // .hover(|h| h.bg(tab_hover_bg))
             // .active(|a| a.bg(tab_active_bg))
-            .child(
-                div()
-                    .flex()
-                    .items_center()
             .gap_1()
             .text_color(text_color)
             .children(
@@ -1521,10 +1536,8 @@ impl Pane {
                         )
                     })),
             )
-                    .children((!close_right).then(|| close_icon()))
             .child(label)
-                    .children(close_right.then(|| close_icon())),
+            .child(close_icon());
-            );
 
         right_click_menu(ix).trigger(tab).menu(|cx| {
             ContextMenu::build(cx, |menu, cx| {