Nate Butler created
crates/ui2/src/components/assistant_panel.rs | 2
crates/ui2/src/components/breadcrumb.rs | 32 +++++++-------
crates/ui2/src/components/buffer.rs | 14 +++---
crates/ui2/src/components/buffer_search.rs | 29 +++++-------
crates/ui2/src/components/chat_panel.rs | 2
crates/ui2/src/components/collab_panel.rs | 50 ++++++++++-----------
crates/ui2/src/components/context_menu.rs | 6 +-
crates/ui2/src/components/editor_pane.rs | 2
crates/ui2/src/components/facepile.rs | 10 +++-
crates/ui2/src/components/icon_button.rs | 21 +++++++--
crates/ui2/src/components/keybinding.rs | 6 +-
crates/ui2/src/components/list.rs | 10 ++--
crates/ui2/src/components/multi_buffer.rs | 6 +-
crates/ui2/src/components/palette.rs | 15 +++---
crates/ui2/src/components/panel.rs | 2
crates/ui2/src/components/panes.rs | 4
crates/ui2/src/components/project_panel.rs | 2
crates/ui2/src/components/status_bar.rs | 2
crates/ui2/src/components/tab.rs | 2
crates/ui2/src/components/tab_bar.rs | 2
crates/ui2/src/components/terminal.rs | 2
crates/ui2/src/components/title_bar.rs | 2
crates/ui2/src/components/toolbar.rs | 4
crates/ui2/src/components/traffic_lights.rs | 4
crates/ui2/src/elements/avatar.rs | 2
crates/ui2/src/elements/details.rs | 8 ++
crates/ui2/src/elements/icon.rs | 2
crates/ui2/src/elements/input.rs | 2
crates/ui2/src/elements/label.rs | 6 +-
crates/ui2/src/elements/player.rs | 4
crates/ui2/src/elements/tool_divider.rs | 2
crates/ui2/src/prelude.rs | 49 +++++++++++++++++++++
crates/ui2/src/story.rs | 6 +-
33 files changed, 184 insertions(+), 128 deletions(-)
@@ -27,7 +27,7 @@ impl<S: 'static + Send + Sync + Clone> AssistantPanel<S> {
}
fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
Panel::new(self.scroll_state.clone())
.children(vec![div()
@@ -25,10 +25,9 @@ impl<S: 'static + Send + Sync + Clone> Breadcrumb<S> {
}
}
- fn render_separator(&self, theme: &Theme) -> Div<S> {
- div()
- .child(" › ")
- .text_color(HighlightColor::Default.hsla(theme))
+ fn render_separator(&self, cx: &WindowContext) -> Div<S> {
+ let color = ThemeColor::new(cx);
+ div().child(" › ").text_color(color.text_muted)
}
fn render(
@@ -36,21 +35,22 @@ impl<S: 'static + Send + Sync + Clone> Breadcrumb<S> {
view_state: &mut S,
cx: &mut ViewContext<S>,
) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
+ let color = ThemeColor::new(cx);
let symbols_len = self.symbols.len();
h_stack()
.px_1()
- // TODO: Read font from theme (or settings?).
- .font("Zed Mono Extended")
.text_sm()
- .text_color(theme.middle.base.default.foreground)
+ .text_color(color.text_muted)
.rounded_md()
- .hover(|style| style.bg(theme.highest.base.hovered.background))
+ .hover(|style| style.bg(color.ghost_element_hover))
+ // TODO: Add this when active is ready
+ // .active(|style| style.bg(color.ghost_element_active))
.child(self.path.clone().to_str().unwrap().to_string())
.child(if !self.symbols.is_empty() {
- self.render_separator(&theme)
+ self.render_separator(cx)
} else {
div()
})
@@ -68,7 +68,7 @@ impl<S: 'static + Send + Sync + Clone> Breadcrumb<S> {
let is_last_segment = ix == symbols_len - 1;
if !is_last_segment {
- items.push(self.render_separator(&theme));
+ items.push(self.render_separator(cx));
}
items
@@ -107,7 +107,7 @@ mod stories {
view_state: &mut S,
cx: &mut ViewContext<S>,
) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
Story::container(cx)
.child(Story::title_for::<_, Breadcrumb<S>>(cx))
@@ -118,21 +118,21 @@ mod stories {
Symbol(vec![
HighlightedText {
text: "impl ".to_string(),
- color: HighlightColor::Keyword.hsla(&theme),
+ color: color.syntax.keyword,
},
HighlightedText {
text: "BreadcrumbStory".to_string(),
- color: HighlightColor::Function.hsla(&theme),
+ color: color.syntax.function,
},
]),
Symbol(vec![
HighlightedText {
text: "fn ".to_string(),
- color: HighlightColor::Keyword.hsla(&theme),
+ color: color.syntax.keyword,
},
HighlightedText {
text: "render".to_string(),
- color: HighlightColor::Function.hsla(&theme),
+ color: color.syntax.function,
},
]),
],
@@ -163,19 +163,19 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
}
fn render_row(row: BufferRow, cx: &WindowContext) -> impl Element<ViewState = S> {
- let theme = theme(cx);
let system_color = SystemColor::new();
+ let color = ThemeColor::new(cx);
let line_background = if row.current {
- theme.middle.base.default.background
+ color.editor_active_line
} else {
system_color.transparent
};
let line_number_color = if row.current {
- HighlightColor::Default.hsla(&theme)
+ color.text
} else {
- HighlightColor::Comment.hsla(&theme)
+ color.syntax.comment
};
h_stack()
@@ -225,14 +225,14 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let rows = self.render_rows(cx);
v_stack()
.flex_1()
.w_full()
.h_full()
- .bg(theme.highest.base.default.background)
+ .bg(color.editor_background)
.children(rows)
}
}
@@ -268,7 +268,7 @@ mod stories {
_view: &mut S,
cx: &mut ViewContext<S>,
) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
Story::container(cx)
.child(Story::title_for::<_, Buffer<S>>(cx))
@@ -21,27 +21,22 @@ impl BufferSearch {
}
pub fn view(cx: &mut WindowContext) -> View<Self> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
view(cx.entity(|cx| Self::new()), Self::render)
}
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
- let theme = theme(cx);
-
- h_stack()
- .bg(theme.highest.base.default.background)
- .p_2()
- .child(
- h_stack()
- .child(Input::new("Search (↑/↓ for previous/next query)"))
- .child(
- IconButton::<Self>::new(Icon::Replace)
- .when(self.is_replace_open, |this| this.color(IconColor::Accent))
- .on_click(|buffer_search, cx| {
- buffer_search.toggle_replace(cx);
- }),
- ),
- )
+ let color = ThemeColor::new(cx);
+
+ h_stack().bg(color.toolbar_background).p_2().child(
+ h_stack().child(Input::new("Search")).child(
+ IconButton::<Self>::new(Icon::Replace)
+ .when(self.is_replace_open, |this| this.color(IconColor::Accent))
+ .on_click(|buffer_search, cx| {
+ buffer_search.toggle_replace(cx);
+ }),
+ ),
+ )
}
}
@@ -26,8 +26,6 @@ impl<S: 'static + Send + Sync + Clone> ChatPanel<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
-
div()
.flex()
.flex_col()
@@ -24,7 +24,7 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let color = ThemeColor::new(cx);
v_stack()
@@ -35,20 +35,15 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
.w_full()
.overflow_y_scroll(self.scroll_state.clone())
.child(
- div()
- .bg(theme.lowest.base.default.background)
- .pb_1()
- .border_color(theme.lowest.base.default.border)
- .border_b()
- .child(
- List::new(static_collab_panel_current_call())
- .header(
- ListHeader::new("CRDB")
- .set_left_icon(Icon::Hash.into())
- .set_toggle(ToggleState::Toggled),
- )
- .set_toggle(ToggleState::Toggled),
- ),
+ div().pb_1().border_color(color.border).border_b().child(
+ List::new(static_collab_panel_current_call())
+ .header(
+ ListHeader::new("CRDB")
+ .set_left_icon(Icon::Hash.into())
+ .set_toggle(ToggleState::Toggled),
+ )
+ .set_toggle(ToggleState::Toggled),
+ ),
)
.child(
v_stack().py_1().child(
@@ -86,13 +81,13 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
.h_7()
.px_2()
.border_t()
- .border_color(theme.middle.variant.default.border)
+ .border_color(color.border)
.flex()
.items_center()
.child(
div()
.text_sm()
- .text_color(theme.middle.variant.default.foreground)
+ .text_color(color.text_placeholder)
.child("Find..."),
),
)
@@ -102,8 +97,9 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
&self,
label: impl Into<SharedString>,
expanded: bool,
- theme: &Theme,
+ cx: &WindowContext,
) -> impl Element<ViewState = S> {
+ let color = ThemeColor::new(cx);
div()
.h_7()
.px_2()
@@ -121,7 +117,7 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
})
.w_3p5()
.h_3p5()
- .text_color(theme.middle.variant.default.foreground),
+ .text_color(color.icon_muted),
),
)
}
@@ -130,14 +126,16 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
&self,
avatar_uri: impl Into<SharedString>,
label: impl Into<SharedString>,
- theme: &Theme,
+ cx: &WindowContext,
) -> impl Element<ViewState = S> {
+ let color = ThemeColor::new(cx);
+
div()
.h_7()
.px_2()
.flex()
.items_center()
- .hover(|style| style.bg(theme.lowest.variant.hovered.background))
+ .hover(|style| style.bg(color.ghost_element_hover))
// .active(|style| style.fill(theme.lowest.variant.pressed.background))
.child(
div()
@@ -146,11 +144,11 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
.gap_1()
.text_sm()
.child(
- img().uri(avatar_uri).size_3p5().rounded_full().bg(theme
- .middle
- .positive
- .default
- .foreground),
+ img()
+ .uri(avatar_uri)
+ .size_3p5()
+ .rounded_full()
+ .bg(color.image_fallback_background),
)
.child(label.into()),
)
@@ -44,13 +44,13 @@ impl<S: 'static + Send + Sync + Clone> ContextMenu<S> {
}
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
v_stack()
.flex()
- .bg(theme.lowest.base.default.background)
+ .bg(color.elevated_surface)
.border()
- .border_color(theme.lowest.base.default.border)
+ .border_color(color.border)
.child(
List::new(
self.items
@@ -43,7 +43,7 @@ impl EditorPane {
}
pub fn view(cx: &mut WindowContext) -> View<Self> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
view(
cx.entity(|cx| hello_world_rust_editor_with_status_example(cx)),
@@ -1,7 +1,7 @@
use std::marker::PhantomData;
use crate::prelude::*;
-use crate::{theme, Avatar, Player};
+use crate::{Avatar, Player};
#[derive(Element)]
pub struct Facepile<S: 'static + Send + Sync> {
@@ -18,7 +18,7 @@ impl<S: 'static + Send + Sync> Facepile<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let player_count = self.players.len();
let player_list = self.players.iter().enumerate().map(|(ix, player)| {
let isnt_last = ix < player_count - 1;
@@ -52,7 +52,11 @@ mod stories {
}
}
- fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+ fn render(
+ &mut self,
+ _view: &mut S,
+ cx: &mut ViewContext<S>,
+ ) -> impl Element<ViewState = S> {
let players = static_players();
Story::container(cx)
@@ -67,7 +67,6 @@ impl<S: 'static + Send + Sync> IconButton<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
let color = ThemeColor::new(cx);
let icon_color = match (self.state, self.color) {
@@ -75,15 +74,27 @@ impl<S: 'static + Send + Sync> IconButton<S> {
_ => self.color,
};
+ let (bg_color, bg_hover_color, bg_active_color) = match self.variant {
+ ButtonVariant::Filled => (
+ color.filled_element,
+ color.filled_element_hover,
+ color.filled_element_active,
+ ),
+ ButtonVariant::Ghost => (
+ color.ghost_element,
+ color.ghost_element_hover,
+ color.ghost_element_active,
+ ),
+ };
+
let mut button = h_stack()
.justify_center()
.rounded_md()
.py(ui_size(0.25))
.px(ui_size(6. / 14.))
- .when(self.variant == ButtonVariant::Filled, |this| {
- this.bg(color.filled_element)
- })
- .hover(|style| style.bg(theme.highest.base.hovered.background))
+ .bg(bg_color)
+ .hover(|style| style.bg(bg_hover_color))
+ // .active(|style| style.bg(bg_active_color))
.child(IconElement::new(self.icon).color(icon_color));
if let Some(click_handler) = self.handlers.click.clone() {
@@ -70,15 +70,15 @@ impl<S: 'static + Send + Sync> Key<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
.px_2()
.py_0()
.rounded_md()
.text_sm()
- .text_color(theme.lowest.on.default.foreground)
- .bg(theme.lowest.on.default.background)
+ .text_color(color.text)
+ .bg(color.filled_element)
.child(self.key.clone())
}
}
@@ -91,7 +91,7 @@ impl<S: 'static + Send + Sync + Clone> ListHeader<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let system_color = SystemColor::new();
let color = ThemeColor::new(cx);
@@ -158,7 +158,7 @@ impl<S: 'static + Send + Sync + Clone> ListSubHeader<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
h_stack().flex_1().w_full().relative().py_1().child(
div()
@@ -338,7 +338,7 @@ impl<S: 'static + Send + Sync + Clone> ListEntry<S> {
&mut self,
cx: &mut ViewContext<S>,
) -> Option<impl Element<ViewState = S>> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let disclosure_control_icon = if let Some(ToggleState::Toggled) = self.toggle {
IconElement::new(Icon::ChevronDown)
@@ -360,7 +360,7 @@ impl<S: 'static + Send + Sync + Clone> ListEntry<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let system_color = SystemColor::new();
let color = ThemeColor::new(cx);
let setting = user_settings();
@@ -470,7 +470,7 @@ impl<S: 'static + Send + Sync + Clone> List<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let is_toggleable = self.toggleable != Toggleable::NotToggleable;
let is_toggled = Toggleable::is_toggled(&self.toggleable);
@@ -18,7 +18,7 @@ impl<S: 'static + Send + Sync + Clone> MultiBuffer<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
v_stack()
.w_full()
@@ -32,7 +32,7 @@ impl<S: 'static + Send + Sync + Clone> MultiBuffer<S> {
.items_center()
.justify_between()
.p_4()
- .bg(theme.lowest.base.default.background)
+ .bg(color.editor_subheader)
.child(Label::new("main.rs"))
.child(IconButton::new(Icon::ArrowUpRight)),
)
@@ -67,7 +67,7 @@ mod stories {
_view: &mut S,
cx: &mut ViewContext<S>,
) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
Story::container(cx)
.child(Story::title_for::<_, MultiBuffer<S>>(cx))
@@ -48,21 +48,21 @@ impl<S: 'static + Send + Sync + Clone> Palette<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
v_stack()
.w_96()
.rounded_lg()
- .bg(theme.lowest.base.default.background)
+ .bg(color.elevated_surface)
.border()
- .border_color(theme.lowest.base.default.border)
+ .border_color(color.border)
.child(
v_stack()
.gap_px()
.child(v_stack().py_0p5().px_1().child(div().px_2().py_0p5().child(
Label::new(self.input_placeholder.clone()).color(LabelColor::Placeholder),
)))
- .child(div().h_px().w_full().bg(theme.lowest.base.default.border))
+ .child(div().h_px().w_full().bg(color.filled_element))
.child(
v_stack()
.py_0p5()
@@ -90,9 +90,8 @@ impl<S: 'static + Send + Sync + Clone> Palette<S> {
.px_2()
.py_0p5()
.rounded_lg()
- .hover(|style| style.bg(theme.lowest.base.hovered.background))
- // .active()
- // .fill(theme.lowest.base.pressed.background)
+ .hover(|style| style.bg(color.ghost_element_hover))
+ // .active(|style| style.bg(color.ghost_element_active))
.child(item.clone())
})),
),
@@ -135,7 +134,7 @@ impl<S: 'static + Send + Sync + Clone> PaletteItem<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
.flex()
@@ -97,7 +97,7 @@ impl<S: 'static + Send + Sync> Panel<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let panel_base;
let current_width = self.width.unwrap_or(self.initial_width);
@@ -43,7 +43,7 @@ impl<S: 'static + Send + Sync> Pane<S> {
}
fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
.flex()
@@ -90,7 +90,7 @@ impl<S: 'static + Send + Sync> PaneGroup<S> {
}
fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
if !self.panes.is_empty() {
let el = div()
@@ -21,7 +21,7 @@ impl<S: 'static + Send + Sync + Clone> ProjectPanel<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let color = ThemeColor::new(cx);
div()
@@ -87,7 +87,7 @@ impl StatusBar {
view: &mut Workspace,
cx: &mut ViewContext<Workspace>,
) -> impl Element<ViewState = Workspace> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
.py_0p5()
@@ -75,7 +75,7 @@ impl<S: 'static + Send + Sync + Clone> Tab<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let has_fs_conflict = self.fs_status == FileSystemStatus::Conflict;
let is_deleted = self.fs_status == FileSystemStatus::Deleted;
@@ -24,7 +24,7 @@ impl<S: 'static + Send + Sync + Clone> TabBar<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let can_navigate_back = true;
let can_navigate_forward = false;
@@ -18,7 +18,7 @@ impl<S: 'static + Send + Sync + Clone> Terminal<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let can_navigate_back = true;
let can_navigate_forward = false;
@@ -93,7 +93,7 @@ impl TitleBar {
}
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let color = ThemeColor::new(cx);
let setting = user_settings();
@@ -56,7 +56,7 @@ impl<S: 'static + Send + Sync> Toolbar<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
.bg(theme.highest.base.default.background)
@@ -98,7 +98,7 @@ mod stories {
_view: &mut S,
cx: &mut ViewContext<S>,
) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
Story::container(cx)
.child(Story::title_for::<_, Toolbar<S>>(cx))
@@ -27,7 +27,7 @@ impl<S: 'static + Send + Sync> TrafficLight<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let system_color = SystemColor::new();
let fill = match (self.window_has_focus, self.color) {
@@ -61,7 +61,7 @@ impl<S: 'static + Send + Sync> TrafficLights<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
.flex()
@@ -27,7 +27,7 @@ impl<S: 'static + Send + Sync> Avatar<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let mut img = img();
@@ -25,7 +25,7 @@ impl<S: 'static + Send + Sync + Clone> Details<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
// .flex()
@@ -60,7 +60,11 @@ mod stories {
}
}
- fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+ fn render(
+ &mut self,
+ _view: &mut S,
+ cx: &mut ViewContext<S>,
+ ) -> impl Element<ViewState = S> {
Story::container(cx)
.child(Story::title_for::<_, Details<S>>(cx))
.child(Story::label(cx, "Default"))
@@ -177,7 +177,7 @@ impl<S: 'static + Send + Sync> IconElement<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let fill = self.color.color(theme);
let svg_size = match self.size {
IconSize::Small => ui_size(12. / 14.),
@@ -46,7 +46,7 @@ impl<S: 'static + Send + Sync> Input<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let text_el;
let text_color;
@@ -22,7 +22,7 @@ pub enum LabelColor {
impl LabelColor {
pub fn hsla(&self, cx: &WindowContext) -> Hsla {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
match self {
Self::Default => theme.middle.base.default.foreground,
@@ -82,7 +82,7 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
.when(self.strikethrough, |this| {
@@ -136,7 +136,7 @@ impl<S: 'static + Send + Sync + Clone> HighlightedLabel<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let highlight_color = theme.lowest.accent.default.foreground;
@@ -139,13 +139,13 @@ impl Player {
}
pub fn cursor_color<S: 'static>(&self, cx: &mut ViewContext<S>) -> Hsla {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let index = self.index % 8;
theme.players[self.index].cursor
}
pub fn selection_color<S: 'static>(&self, cx: &mut ViewContext<S>) -> Hsla {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let index = self.index % 8;
theme.players[self.index].selection
}
@@ -16,7 +16,7 @@ impl<S: 'static + Send + Sync> ToolDivider<S> {
}
fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div().w_px().h_3().bg(theme.lowest.base.default.border)
}
@@ -35,6 +35,27 @@ impl SystemColor {
}
}
+#[derive(Clone, Copy)]
+pub struct SyntaxColor {
+ pub comment: Hsla,
+ pub string: Hsla,
+ pub function: Hsla,
+ pub keyword: Hsla,
+}
+
+impl SyntaxColor {
+ pub fn new(cx: &WindowContext) -> Self {
+ let theme = theme(cx);
+
+ Self {
+ comment: theme.syntax.comment,
+ string: theme.syntax.string,
+ function: theme.syntax.function,
+ keyword: theme.syntax.keyword,
+ }
+ }
+}
+
#[derive(Clone, Copy)]
pub struct ThemeColor {
pub border: Hsla,
@@ -63,12 +84,26 @@ pub struct ThemeColor {
pub filled_element_selected: Hsla,
pub filled_element_disabled: Hsla,
pub ghost_element: Hsla,
+ /// The background color of a hovered element with no default background,
+ /// like a ghost-style button or an interactable list item.
/// - TODO: Map to step 3.
pub ghost_element_hover: Hsla,
/// - TODO: Map to step 4.
pub ghost_element_active: Hsla,
pub ghost_element_selected: Hsla,
pub ghost_element_disabled: Hsla,
+ pub text: Hsla,
+ pub text_muted: Hsla,
+ pub text_placeholder: Hsla,
+ pub text_disabled: Hsla,
+ pub icon_muted: Hsla,
+ pub syntax: SyntaxColor,
+
+ pub toolbar_background: Hsla,
+ pub editor_background: Hsla,
+ pub editor_subheader: Hsla,
+ pub editor_active_line: Hsla,
+ pub image_fallback_background: Hsla,
}
impl ThemeColor {
@@ -94,6 +129,18 @@ impl ThemeColor {
ghost_element_active: theme.lowest.base.hovered.background,
ghost_element_selected: theme.lowest.accent.default.background,
ghost_element_disabled: system_color.transparent,
+ text: theme.lowest.base.default.foreground,
+ text_muted: theme.lowest.variant.default.foreground,
+ /// TODO: map this to a real value
+ text_placeholder: theme.lowest.negative.default.foreground,
+ text_disabled: theme.lowest.base.disabled.foreground,
+ icon_muted: theme.lowest.variant.default.foreground,
+ syntax: SyntaxColor::new(cx),
+ toolbar_background: theme.highest.base.default.background,
+ editor_background: theme.highest.base.default.background,
+ editor_subheader: theme.middle.base.default.background,
+ editor_active_line: theme.highest.on.default.background,
+ image_fallback_background: theme.lowest.base.default.background,
}
}
}
@@ -192,7 +239,7 @@ impl GitStatus {
}
pub fn hsla(&self, cx: &WindowContext) -> Hsla {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
let system_color = SystemColor::new();
match self {
@@ -7,7 +7,7 @@ pub struct Story {}
impl Story {
pub fn container<S: 'static + Send + Sync>(cx: &mut ViewContext<S>) -> Div<S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
.size_full()
@@ -23,7 +23,7 @@ impl Story {
cx: &mut ViewContext<S>,
title: &str,
) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
.text_xl()
@@ -41,7 +41,7 @@ impl Story {
cx: &mut ViewContext<S>,
label: &str,
) -> impl Element<ViewState = S> {
- let theme = theme(cx);
+ let color = ThemeColor::new(cx);
div()
.mt_4()