Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Work on light theme, update tab

Browse source
This commit is contained in:
Nate Butler 2023-12-04 17:54:37 -05:00
parent c10d8a8110
commit 5bdaf0e074
6 changed files with 125 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

24
crates/theme2/src/default_colors.rs
View file

@ -5,7 +5,7 @@ use crate::ColorScale;
use crate::{SystemColors, ThemeColors}; use crate::{SystemColors, ThemeColors};
pub(crate) fn neutral() -> ColorScaleSet { pub(crate) fn neutral() -> ColorScaleSet {
slate() sand()
} }
impl ThemeColors { impl ThemeColors {
@ -29,12 +29,12 @@ impl ThemeColors {
element_disabled: neutral().light_alpha().step_3(), element_disabled: neutral().light_alpha().step_3(),
drop_target_background: blue().light_alpha().step_2(), drop_target_background: blue().light_alpha().step_2(),
ghost_element_background: system.transparent, 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_selected: neutral().light_alpha().step_5(),
ghost_element_disabled: neutral().light_alpha().step_3(), 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_placeholder: neutral().light().step_10(),
text_disabled: neutral().light().step_9(), text_disabled: neutral().light().step_9(),
text_accent: blue().light().step_11(), 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_gutter_background: neutral().light().step_1(), // todo!("pick the right colors")
editor_subheader_background: neutral().light().step_2(), editor_subheader_background: neutral().light().step_2(),
editor_active_line_background: neutral().light_alpha().step_3(), 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") editor_document_highlight_write_background: neutral().light_alpha().step_4(), // todo!("pick the right colors")
terminal_background: neutral().light().step_1(), terminal_background: neutral().light().step_1(),
terminal_ansi_black: black().light().step_12(), terminal_ansi_black: black().light().step_12(),

78
crates/theme2/src/default_theme.rs
View file

@ -1,47 +1,49 @@
use std::sync::Arc;
use crate::{ use crate::{
one_themes::{one_dark, one_family}, 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 { impl Default for ThemeFamily {
fn default() -> Self { fn default() -> Self {

4
crates/theme2/src/registry.rs
View file

@ -7,7 +7,7 @@ use refineable::Refineable;
use crate::{ use crate::{
one_themes::one_family, Appearance, PlayerColors, StatusColors, SyntaxTheme, SystemColors, 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 { pub struct ThemeRegistry {
@ -117,7 +117,7 @@ impl Default for ThemeRegistry {
themes: HashMap::default(), themes: HashMap::default(),
}; };
this.insert_theme_families([one_family()]); this.insert_theme_families([zed_pro_family(), one_family()]);
this this
} }

16
crates/theme2/src/styles/syntax.rs
View file

@ -22,8 +22,8 @@ impl SyntaxTheme {
highlights: vec![ highlights: vec![
("attribute".into(), cyan().light().step_11().into()), ("attribute".into(), cyan().light().step_11().into()),
("boolean".into(), tomato().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()), ("constant".into(), red().light().step_9().into()),
("constructor".into(), red().light().step_9().into()), ("constructor".into(), red().light().step_9().into()),
("embedded".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()), ("enum".into(), red().light().step_9().into()),
("function".into(), red().light().step_9().into()), ("function".into(), red().light().step_9().into()),
("hint".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()), ("label".into(), red().light().step_9().into()),
("link_text".into(), red().light().step_9().into()), ("link_text".into(), red().light().step_9().into()),
("link_uri".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()), ("operator".into(), red().light().step_9().into()),
("predictive".into(), red().light().step_9().into()), ("predictive".into(), red().light().step_9().into()),
("preproc".into(), red().light().step_9().into()), ("preproc".into(), red().light().step_9().into()),
@ -49,16 +49,16 @@ impl SyntaxTheme {
), ),
( (
"punctuation.delimiter".into(), "punctuation.delimiter".into(),
neutral().light().step_11().into(), neutral().light().step_10().into(),
), ),
( (
"punctuation.list_marker".into(), "punctuation.list_marker".into(),
blue().light().step_11().into(), blue().light().step_11().into(),
), ),
("punctuation.special".into(), red().light().step_9().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.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".into(), red().light().step_9().into()),
( (
"string.special.symbol".into(), "string.special.symbol".into(),
@ -67,7 +67,7 @@ impl SyntaxTheme {
("tag".into(), red().light().step_9().into()), ("tag".into(), red().light().step_9().into()),
("text.literal".into(), red().light().step_9().into()), ("text.literal".into(), red().light().step_9().into()),
("title".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".into(), red().light().step_9().into()),
("variable.special".into(), red().light().step_9().into()), ("variable.special".into(), red().light().step_9().into()),
("variant".into(), red().light().step_9().into()), ("variant".into(), red().light().step_9().into()),

2
crates/ui2/src/components/icon.rs
View file

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

111
crates/workspace2/src/pane.rs
View file

@ -27,7 +27,8 @@ use std::{
}; };
use ui::{ 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 ui::{v_stack, ContextMenu};
use util::truncate_and_remove_front; use util::truncate_and_remove_front;
@ -1415,20 +1416,38 @@ impl Pane {
cx: &mut ViewContext<'_, Pane>, cx: &mut ViewContext<'_, Pane>,
) -> impl IntoElement { ) -> impl IntoElement {
let label = item.tab_content(Some(detail), cx); let label = item.tab_content(Some(detail), cx);
let close_right = ItemSettings::get_global(cx).close_position.right();
let close_icon = || { let close_icon = || {
let id = item.item_id(); let id = item.item_id();
div() div()
.id(ix) .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() .invisible()
.group_hover("", |style| style.visible()) .group_hover("", |style| style.visible())
.hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
.active(|style| style.bg(cx.theme().colors().ghost_element_active))
.on_click(cx.listener(move |pane, _, cx| {
pane.close_item_by_id(id, SaveIntent::Close, cx)
.detach_and_log_err(cx);
}))
.child( .child(
IconButton::new("close_tab", Icon::Close).on_click(cx.listener( IconElement::new(Icon::Close)
move |pane, _, cx| { .color(Color::Muted)
pane.close_item_by_id(id, SaveIntent::Close, cx) .size(IconSize::Small),
.detach_and_log_err(cx);
},
)),
) )
}; };
@ -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 is_active = ix == self.active_item_index;
let tab = div() let tab = h_stack()
.group("") .group("")
.id(ix) .id(ix)
.relative()
.cursor_pointer() .cursor_pointer()
.when_some(item.tab_tooltip_text(cx), |div, text| { .when_some(item.tab_tooltip_text(cx), |div, text| {
div.tooltip(move |cx| cx.build_view(|cx| Tooltip::new(text.clone())).into()) div.tooltip(move |cx| cx.build_view(|cx| Tooltip::new(text.clone())).into())
@ -1466,15 +1485,15 @@ impl Pane {
.flex() .flex()
.items_center() .items_center()
.justify_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) .bg(tab_bg)
.border_color(cx.theme().colors().border) .border_color(cx.theme().colors().border)
.text_color(if is_active { .text_color(if is_active {
@ -1485,46 +1504,40 @@ impl Pane {
.map(|this| { .map(|this| {
let is_last_item = ix == self.items.len() - 1; let is_last_item = ix == self.items.len() - 1;
match ix.cmp(&self.active_item_index) { 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 => { cmp::Ordering::Greater => {
if is_last_item { if is_last_item {
this.mr_px().ml_px() this.mr_px().ml_px().border_b()
} else { } 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)) // .hover(|h| h.bg(tab_hover_bg))
// .active(|a| a.bg(tab_active_bg)) // .active(|a| a.bg(tab_active_bg))
.child( .gap_1()
div() .text_color(text_color)
.flex() .children(
.items_center() item.has_conflict(cx)
.gap_1() .then(|| {
.text_color(text_color) div().border().border_color(gpui::red()).child(
.children( IconElement::new(Icon::ExclamationTriangle)
item.has_conflict(cx) .size(ui::IconSize::Small)
.then(|| { .color(Color::Warning),
div().border().border_color(gpui::red()).child( )
IconElement::new(Icon::ExclamationTriangle) })
.size(ui::IconSize::Small) .or(item.is_dirty(cx).then(|| {
.color(Color::Warning), div().border().border_color(gpui::red()).child(
) IconElement::new(Icon::ExclamationTriangle)
}) .size(ui::IconSize::Small)
.or(item.is_dirty(cx).then(|| { .color(Color::Info),
div().border().border_color(gpui::red()).child( )
IconElement::new(Icon::ExclamationTriangle) })),
.size(ui::IconSize::Small) )
.color(Color::Info), .child(label)
) .child(close_icon());
})),
)
.children((!close_right).then(|| close_icon()))
.child(label)
.children(close_right.then(|| close_icon())),
);
right_click_menu(ix).trigger(tab).menu(|cx| { right_click_menu(ix).trigger(tab).menu(|cx| {
ContextMenu::build(cx, |menu, cx| { ContextMenu::build(cx, |menu, cx| {