From 58650b7d2d2cc19b8b4b5c08b69c59f263dd4043 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 19 Oct 2023 14:38:01 -0400 Subject: [PATCH] Checkpoint - Still Broken --- crates/ui2/src/components/buffer.rs | 8 +- crates/ui2/src/components/buffer_search.rs | 2 +- crates/ui2/src/components/chat_panel.rs | 1 - crates/ui2/src/components/collab_panel.rs | 1 - crates/ui2/src/components/context_menu.rs | 2 +- crates/ui2/src/components/editor_pane.rs | 2 +- crates/ui2/src/components/icon_button.rs | 2 +- crates/ui2/src/components/keybinding.rs | 1 - crates/ui2/src/components/list.rs | 1 - crates/ui2/src/components/multi_buffer.rs | 10 +- crates/ui2/src/components/palette.rs | 1 - crates/ui2/src/components/panel.rs | 55 +++------- crates/ui2/src/components/panes.rs | 4 +- crates/ui2/src/components/project_panel.rs | 3 +- crates/ui2/src/components/status_bar.rs | 14 ++- crates/ui2/src/components/tab.rs | 23 +++- crates/ui2/src/components/tab_bar.rs | 16 ++- crates/ui2/src/components/terminal.rs | 6 +- crates/ui2/src/components/title_bar.rs | 2 +- crates/ui2/src/components/toolbar.rs | 11 +- crates/ui2/src/components/traffic_lights.rs | 4 +- crates/ui2/src/elements/avatar.rs | 3 +- crates/ui2/src/elements/details.rs | 3 +- crates/ui2/src/elements/icon.rs | 8 +- crates/ui2/src/elements/input.rs | 85 ++++++++------- crates/ui2/src/elements/label.rs | 12 +- crates/ui2/src/elements/player.rs | 6 +- crates/ui2/src/elements/tool_divider.rs | 3 +- crates/ui2/src/prelude.rs | 115 +++++++++++++++++--- crates/ui2/src/static_data.rs | 100 ++++++++--------- crates/ui2/src/story.rs | 7 +- 31 files changed, 298 insertions(+), 213 deletions(-) diff --git a/crates/ui2/src/components/buffer.rs b/crates/ui2/src/components/buffer.rs index 9564ede748..eca075e71a 100644 --- a/crates/ui2/src/components/buffer.rs +++ b/crates/ui2/src/components/buffer.rs @@ -3,7 +3,7 @@ use std::marker::PhantomData; use gpui3::{Hsla, WindowContext}; use crate::prelude::*; -use crate::{h_stack, theme, v_stack, Icon, IconElement}; +use crate::{h_stack, v_stack, Icon, IconElement}; #[derive(Default, PartialEq, Copy, Clone)] pub struct PlayerCursor { @@ -232,7 +232,7 @@ impl Buffer { .flex_1() .w_full() .h_full() - .bg(color.editor_background) + .bg(color.editor) .children(rows) } } @@ -279,14 +279,14 @@ mod stories { div() .w(rems(64.)) .h_96() - .child(hello_world_rust_buffer_example(&theme)), + .child(hello_world_rust_buffer_example(&color)), ) .child(Story::label(cx, "Hello World (Rust) with Status")) .child( div() .w(rems(64.)) .h_96() - .child(hello_world_rust_buffer_with_status_example(&theme)), + .child(hello_world_rust_buffer_with_status_example(&color)), ) } } diff --git a/crates/ui2/src/components/buffer_search.rs b/crates/ui2/src/components/buffer_search.rs index 395c538a6c..7e863b8493 100644 --- a/crates/ui2/src/components/buffer_search.rs +++ b/crates/ui2/src/components/buffer_search.rs @@ -29,7 +29,7 @@ impl BufferSearch { fn render(&mut self, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - h_stack().bg(color.toolbar_background).p_2().child( + h_stack().bg(color.toolbar).p_2().child( h_stack().child(Input::new("Search")).child( IconButton::::new(Icon::Replace) .when(self.is_replace_open, |this| this.color(IconColor::Accent)) diff --git a/crates/ui2/src/components/chat_panel.rs b/crates/ui2/src/components/chat_panel.rs index 4f0e3bd3c3..89ba0825f8 100644 --- a/crates/ui2/src/components/chat_panel.rs +++ b/crates/ui2/src/components/chat_panel.rs @@ -3,7 +3,6 @@ use std::marker::PhantomData; use chrono::NaiveDateTime; use crate::prelude::*; -use crate::theme::theme; use crate::{Icon, IconButton, Input, Label, LabelColor}; #[derive(Element)] diff --git a/crates/ui2/src/components/collab_panel.rs b/crates/ui2/src/components/collab_panel.rs index 560c1d7f12..8d36f1b1d7 100644 --- a/crates/ui2/src/components/collab_panel.rs +++ b/crates/ui2/src/components/collab_panel.rs @@ -3,7 +3,6 @@ use std::marker::PhantomData; use gpui3::{img, svg, SharedString}; use crate::prelude::*; -use crate::theme::{theme, Theme}; use crate::{ static_collab_panel_channels, static_collab_panel_current_call, v_stack, Icon, List, ListHeader, ToggleState, diff --git a/crates/ui2/src/components/context_menu.rs b/crates/ui2/src/components/context_menu.rs index d37b38dd80..45e1d40bcc 100644 --- a/crates/ui2/src/components/context_menu.rs +++ b/crates/ui2/src/components/context_menu.rs @@ -1,5 +1,5 @@ use crate::{prelude::*, ListItemVariant}; -use crate::{theme, v_stack, Label, List, ListEntry, ListItem, ListSeparator, ListSubHeader}; +use crate::{v_stack, Label, List, ListEntry, ListItem, ListSeparator, ListSubHeader}; #[derive(Clone)] pub enum ContextMenuItem { diff --git a/crates/ui2/src/components/editor_pane.rs b/crates/ui2/src/components/editor_pane.rs index b54ad31100..93461bf9d0 100644 --- a/crates/ui2/src/components/editor_pane.rs +++ b/crates/ui2/src/components/editor_pane.rs @@ -56,7 +56,7 @@ impl EditorPane { .w_full() .h_full() .flex_1() - .child(TabBar::new(self.tabs.clone())) + .child(TabBar::new(self.tabs.clone()).can_navigate((false, true))) .child( Toolbar::new() .left_item(Breadcrumb::new(self.path.clone(), self.symbols.clone())) diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index 163622002a..43e5a33cdf 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -4,7 +4,7 @@ use std::sync::Arc; use gpui3::{Interactive, MouseButton}; use crate::{h_stack, prelude::*}; -use crate::{theme, ClickHandler, Icon, IconColor, IconElement}; +use crate::{ClickHandler, Icon, IconColor, IconElement}; struct IconButtonHandlers { click: Option>, diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs index 6f244a2cd8..46768a6ddc 100644 --- a/crates/ui2/src/components/keybinding.rs +++ b/crates/ui2/src/components/keybinding.rs @@ -4,7 +4,6 @@ use std::marker::PhantomData; use strum::{EnumIter, IntoEnumIterator}; use crate::prelude::*; -use crate::theme; #[derive(Element, Clone)] pub struct Keybinding { diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs index ddf7649b95..2f77553ac1 100644 --- a/crates/ui2/src/components/list.rs +++ b/crates/ui2/src/components/list.rs @@ -4,7 +4,6 @@ use gpui3::{div, Div}; use crate::prelude::*; use crate::settings::user_settings; -use crate::theme::theme; use crate::{h_stack, v_stack, Avatar, Icon, IconColor, IconElement, IconSize, Label, LabelColor}; #[derive(Clone, Copy, Default, Debug, PartialEq)] diff --git a/crates/ui2/src/components/multi_buffer.rs b/crates/ui2/src/components/multi_buffer.rs index e9a8d60493..32ac40762a 100644 --- a/crates/ui2/src/components/multi_buffer.rs +++ b/crates/ui2/src/components/multi_buffer.rs @@ -73,11 +73,11 @@ mod stories { .child(Story::title_for::<_, MultiBuffer>(cx)) .child(Story::label(cx, "Default")) .child(MultiBuffer::new(vec![ - hello_world_rust_buffer_example(&theme), - hello_world_rust_buffer_example(&theme), - hello_world_rust_buffer_example(&theme), - hello_world_rust_buffer_example(&theme), - hello_world_rust_buffer_example(&theme), + hello_world_rust_buffer_example(&color), + hello_world_rust_buffer_example(&color), + hello_world_rust_buffer_example(&color), + hello_world_rust_buffer_example(&color), + hello_world_rust_buffer_example(&color), ])) } } diff --git a/crates/ui2/src/components/palette.rs b/crates/ui2/src/components/palette.rs index 697f78ee46..8de26502a7 100644 --- a/crates/ui2/src/components/palette.rs +++ b/crates/ui2/src/components/palette.rs @@ -1,7 +1,6 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::theme::theme; use crate::{h_stack, v_stack, Keybinding, Label, LabelColor}; #[derive(Element)] diff --git a/crates/ui2/src/components/panel.rs b/crates/ui2/src/components/panel.rs index d70d81c82e..9290b94b07 100644 --- a/crates/ui2/src/components/panel.rs +++ b/crates/ui2/src/components/panel.rs @@ -3,9 +3,9 @@ use std::marker::PhantomData; use gpui3::{AbsoluteLength, AnyElement}; use smallvec::SmallVec; +use crate::prelude::*; use crate::settings::user_settings; use crate::v_stack; -use crate::{prelude::*, theme}; #[derive(Default, Debug, PartialEq, Eq, Hash, Clone, Copy)] pub enum PanelAllowedSides { @@ -99,43 +99,24 @@ impl Panel { fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - let panel_base; - let current_width = self.width.unwrap_or(self.initial_width); + let current_size = self.width.unwrap_or(self.initial_width); - match self.current_side { - PanelSide::Left => { - panel_base = v_stack() - .flex_initial() - .h_full() - // .w(current_width) - .w_64() - .bg(theme.middle.base.default.background) - .border_r() - .border_color(theme.middle.base.default.border); - } - PanelSide::Right => { - panel_base = v_stack() - .flex_initial() - .h_full() - // .w(current_width) - .w_64() - .bg(theme.middle.base.default.background) - .border_l() - .border_color(theme.middle.base.default.border); - } - PanelSide::Bottom => { - panel_base = v_stack() - .flex_initial() - .w_full() - // .h(current_width) - .h_64() - .bg(theme.middle.base.default.background) - .border_t() - .border_color(theme.middle.base.default.border); - } - } - - panel_base.children(self.children.drain(..)) + v_stack() + .flex_initial() + .when( + self.current_side == PanelSide::Left || self.current_side == PanelSide::Right, + |this| this.h_full().w(current_size), + ) + .when(self.current_side == PanelSide::Left, |this| this.border_r()) + .when(self.current_side == PanelSide::Right, |this| { + this.border_l() + }) + .when(self.current_side == PanelSide::Bottom, |this| { + this.border_b().w_full().h(current_size) + }) + .bg(color.surface) + .border_color(color.border) + .children(self.children.drain(..)) } } diff --git a/crates/ui2/src/components/panes.rs b/crates/ui2/src/components/panes.rs index c88d687ea1..7fc4c830f6 100644 --- a/crates/ui2/src/components/panes.rs +++ b/crates/ui2/src/components/panes.rs @@ -4,7 +4,6 @@ use gpui3::{hsla, AnyElement, Hsla, Length, Size}; use smallvec::SmallVec; use crate::prelude::*; -use crate::theme; #[derive(Default, PartialEq)] pub enum SplitDirection { @@ -99,7 +98,6 @@ impl PaneGroup { .gap_px() .w_full() .h_full() - .bg(theme.lowest.base.default.background) .children(self.panes.iter_mut().map(|pane| pane.render(view, cx))); if self.split_direction == SplitDirection::Horizontal { @@ -116,7 +114,7 @@ impl PaneGroup { .gap_px() .w_full() .h_full() - .bg(theme.lowest.base.default.background) + .bg(color.editor) .children(self.groups.iter_mut().map(|group| group.render(view, cx))); if self.split_direction == SplitDirection::Horizontal { diff --git a/crates/ui2/src/components/project_panel.rs b/crates/ui2/src/components/project_panel.rs index 4f883c1c15..30137d9b83 100644 --- a/crates/ui2/src/components/project_panel.rs +++ b/crates/ui2/src/components/project_panel.rs @@ -2,8 +2,7 @@ use std::marker::PhantomData; use crate::prelude::*; use crate::{ - static_project_panel_project_items, static_project_panel_single_items, theme, Input, List, - ListHeader, + static_project_panel_project_items, static_project_panel_single_items, Input, List, ListHeader, }; #[derive(Element)] diff --git a/crates/ui2/src/components/status_bar.rs b/crates/ui2/src/components/status_bar.rs index b7aa9a53d3..69d5344290 100644 --- a/crates/ui2/src/components/status_bar.rs +++ b/crates/ui2/src/components/status_bar.rs @@ -96,16 +96,18 @@ impl StatusBar { .items_center() .justify_between() .w_full() - .bg(theme.lowest.base.default.background) - .child(self.left_tools(view, &theme)) - .child(self.right_tools(view, &theme)) + .bg(color.status_bar) + .child(self.left_tools(view, cx)) + .child(self.right_tools(view, cx)) } fn left_tools( &self, workspace: &mut Workspace, - theme: &Theme, + cx: &WindowContext, ) -> impl Element { + let color = ThemeColor::new(cx); + div() .flex() .items_center() @@ -135,8 +137,10 @@ impl StatusBar { fn right_tools( &self, workspace: &mut Workspace, - theme: &Theme, + cx: &WindowContext, ) -> impl Element { + let color = ThemeColor::new(cx); + div() .flex() .items_center() diff --git a/crates/ui2/src/components/tab.rs b/crates/ui2/src/components/tab.rs index 75911976b2..36adb60178 100644 --- a/crates/ui2/src/components/tab.rs +++ b/crates/ui2/src/components/tab.rs @@ -1,7 +1,7 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::{theme, Icon, IconColor, IconElement, Label, LabelColor}; +use crate::{Icon, IconColor, IconElement, Label, LabelColor}; #[derive(Element, Clone)] pub struct Tab { @@ -96,17 +96,28 @@ 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 => ( + color.ghost_element, + color.ghost_element_hover, + color.ghost_element_active, + ), + false => ( + color.filled_element, + color.filled_element_hover, + color.filled_element_active, + ), + }; + div() .px_2() .py_0p5() .flex() .items_center() .justify_center() - .bg(if self.current { - theme.highest.base.default.background - } else { - theme.middle.base.default.background - }) + .bg(tab_bg) + .hover(|h| h.bg(tab_hover_bg)) + // .active(|a| a.bg(tab_active_bg)) .child( div() .px_1() diff --git a/crates/ui2/src/components/tab_bar.rs b/crates/ui2/src/components/tab_bar.rs index 9d352a09a5..216c7b53fa 100644 --- a/crates/ui2/src/components/tab_bar.rs +++ b/crates/ui2/src/components/tab_bar.rs @@ -1,12 +1,14 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::{theme, Icon, IconButton, Tab}; +use crate::{Icon, IconButton, Tab}; #[derive(Element)] pub struct TabBar { state_type: PhantomData, scroll_state: ScrollState, + /// Backwards, Forwards + can_navigate: (bool, bool), tabs: Vec>, } @@ -15,6 +17,7 @@ impl TabBar { Self { state_type: PhantomData, scroll_state: ScrollState::default(), + can_navigate: (false, false), tabs, } } @@ -23,15 +26,20 @@ impl TabBar { self.scroll_state = scroll_state; } + pub fn can_navigate(mut self, can_navigate: (bool, bool)) -> Self { + self.can_navigate = can_navigate; + self + } + fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - let can_navigate_back = true; - let can_navigate_forward = false; + + let (can_navigate_back, can_navigate_forward) = self.can_navigate; div() .w_full() .flex() - .bg(theme.middle.base.default.background) + .bg(color.tab_bar) // Left Side .child( div() diff --git a/crates/ui2/src/components/terminal.rs b/crates/ui2/src/components/terminal.rs index a56c07a750..a2703bfd67 100644 --- a/crates/ui2/src/components/terminal.rs +++ b/crates/ui2/src/components/terminal.rs @@ -3,7 +3,7 @@ use std::marker::PhantomData; use gpui3::{relative, rems, Size}; use crate::prelude::*; -use crate::{theme, Icon, IconButton, Pane, Tab}; +use crate::{Icon, IconButton, Pane, Tab}; #[derive(Element)] pub struct Terminal { @@ -32,7 +32,7 @@ impl Terminal { div() .w_full() .flex() - .bg(theme.middle.base.default.background) + .bg(color.surface) .child( div().px_1().flex().flex_none().gap_2().child( div() @@ -79,7 +79,7 @@ impl Terminal { height: rems(36.).into(), }, ) - .child(crate::static_data::terminal_buffer(&theme)), + .child(crate::static_data::terminal_buffer(&color)), ) } } diff --git a/crates/ui2/src/components/title_bar.rs b/crates/ui2/src/components/title_bar.rs index a64694c3c6..76d40f7f11 100644 --- a/crates/ui2/src/components/title_bar.rs +++ b/crates/ui2/src/components/title_bar.rs @@ -6,7 +6,7 @@ use gpui3::{view, Context, View}; use crate::prelude::*; use crate::settings::user_settings; use crate::{ - random_players_with_call_status, theme, Avatar, Button, Icon, IconButton, IconColor, MicStatus, + random_players_with_call_status, Avatar, Button, Icon, IconButton, IconColor, MicStatus, PlayerWithCallStatus, ScreenShareStatus, ToolDivider, TrafficLights, }; diff --git a/crates/ui2/src/components/toolbar.rs b/crates/ui2/src/components/toolbar.rs index e58de4c9ba..aeec01bc7f 100644 --- a/crates/ui2/src/components/toolbar.rs +++ b/crates/ui2/src/components/toolbar.rs @@ -2,7 +2,6 @@ use gpui3::AnyElement; use smallvec::SmallVec; use crate::prelude::*; -use crate::theme; #[derive(Clone)] pub struct ToolbarItem {} @@ -59,7 +58,7 @@ impl Toolbar { let color = ThemeColor::new(cx); div() - .bg(theme.highest.base.default.background) + .bg(color.toolbar) .p_2() .flex() .justify_between() @@ -111,21 +110,21 @@ mod stories { Symbol(vec![ HighlightedText { text: "impl ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "ToolbarStory".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, }, ]), ], diff --git a/crates/ui2/src/components/traffic_lights.rs b/crates/ui2/src/components/traffic_lights.rs index 0533639841..cf8d2b47d1 100644 --- a/crates/ui2/src/components/traffic_lights.rs +++ b/crates/ui2/src/components/traffic_lights.rs @@ -1,7 +1,7 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::{theme, SystemColor}; +use crate::SystemColor; #[derive(Clone, Copy)] enum TrafficLightColor { @@ -34,7 +34,7 @@ impl TrafficLight { (true, TrafficLightColor::Red) => system_color.mac_os_traffic_light_red, (true, TrafficLightColor::Yellow) => system_color.mac_os_traffic_light_yellow, (true, TrafficLightColor::Green) => system_color.mac_os_traffic_light_green, - (false, _) => theme.lowest.base.active.background, + (false, _) => color.filled_element, }; div().w_3().h_3().rounded_full().bg(fill) diff --git a/crates/ui2/src/elements/avatar.rs b/crates/ui2/src/elements/avatar.rs index 9b86b55742..78e03a77d0 100644 --- a/crates/ui2/src/elements/avatar.rs +++ b/crates/ui2/src/elements/avatar.rs @@ -3,7 +3,6 @@ use std::marker::PhantomData; use gpui3::img; use crate::prelude::*; -use crate::theme::theme; #[derive(Element, Clone)] pub struct Avatar { @@ -39,7 +38,7 @@ impl Avatar { img.uri(self.src.clone()) .size_4() - .bg(theme.middle.warning.default.foreground) + .bg(color.image_fallback_background) } } diff --git a/crates/ui2/src/elements/details.rs b/crates/ui2/src/elements/details.rs index 84deb69d59..1467376c00 100644 --- a/crates/ui2/src/elements/details.rs +++ b/crates/ui2/src/elements/details.rs @@ -1,7 +1,6 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::theme; #[derive(Element, Clone)] pub struct Details { @@ -33,7 +32,7 @@ impl Details { .p_1() .gap_0p5() .text_xs() - .text_color(theme.lowest.base.default.foreground) + .text_color(color.text) .child(self.text) .children(self.meta.map(|m| m)) } diff --git a/crates/ui2/src/elements/icon.rs b/crates/ui2/src/elements/icon.rs index 720ef95a5a..61f9ed4a64 100644 --- a/crates/ui2/src/elements/icon.rs +++ b/crates/ui2/src/elements/icon.rs @@ -1,11 +1,10 @@ use std::marker::PhantomData; -use std::sync::Arc; use gpui3::{svg, Hsla}; use strum::EnumIter; use crate::prelude::*; -use crate::theme::{theme, Theme}; +use crate::theme::theme; #[derive(Default, PartialEq, Copy, Clone)] pub enum IconSize { @@ -29,7 +28,8 @@ pub enum IconColor { } impl IconColor { - pub fn color(self, theme: Arc) -> Hsla { + pub fn color(self, cx: &WindowContext) -> Hsla { + let theme = theme(cx); match self { IconColor::Default => theme.lowest.base.default.foreground, IconColor::Muted => theme.lowest.variant.default.foreground, @@ -178,7 +178,7 @@ impl IconElement { fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - let fill = self.color.color(theme); + let fill = self.color.color(cx); let svg_size = match self.size { IconSize::Small => ui_size(12. / 14.), IconSize::Medium => ui_size(15. / 14.), diff --git a/crates/ui2/src/elements/input.rs b/crates/ui2/src/elements/input.rs index 57cdcfe599..df126c52cf 100644 --- a/crates/ui2/src/elements/input.rs +++ b/crates/ui2/src/elements/input.rs @@ -1,7 +1,8 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::theme; +use crate::Label; +use crate::LabelColor; #[derive(Default, PartialEq)] pub enum InputVariant { @@ -17,6 +18,8 @@ pub struct Input { value: String, state: InteractionState, variant: InputVariant, + disabled: bool, + is_active: bool, } impl Input { @@ -27,6 +30,8 @@ impl Input { value: "".to_string(), state: InteractionState::default(), variant: InputVariant::default(), + disabled: false, + is_active: false, } } @@ -45,55 +50,54 @@ impl Input { self } + pub fn disabled(mut self, disabled: bool) -> Self { + self.disabled = disabled; + self + } + + pub fn is_active(mut self, is_active: bool) -> Self { + self.is_active = is_active; + self + } + fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); + let system_color = SystemColor::new(); - let text_el; - let text_color; - let background_color_default; - let background_color_active; - - let mut border_color_default = theme.middle.base.default.border; - let mut border_color_hover = theme.middle.base.hovered.border; - let border_color_focus = theme.middle.base.pressed.background; - - match self.variant { - InputVariant::Ghost => { - background_color_default = theme.middle.base.default.background; - background_color_active = theme.middle.base.active.background; - } - InputVariant::Filled => { - background_color_default = theme.middle.on.default.background; - background_color_active = theme.middle.on.active.background; - } + let (input_bg, input_hover_bg, input_active_bg) = match self.variant { + InputVariant::Ghost => ( + color.ghost_element, + color.ghost_element_hover, + color.ghost_element_active, + ), + InputVariant::Filled => ( + color.filled_element, + color.filled_element_hover, + color.filled_element_active, + ), }; - if self.state == InteractionState::Focused { - border_color_default = theme.players[0].cursor; - border_color_hover = theme.players[0].cursor; - } - - if self.state == InteractionState::Focused || self.state == InteractionState::Active { - text_el = self.value.clone(); - text_color = theme.lowest.base.default.foreground; + let placeholder_label = Label::new(self.placeholder).color(if self.disabled { + LabelColor::Disabled } else { - text_el = self.placeholder.to_string().clone(); - text_color = theme.lowest.base.disabled.foreground; - } + LabelColor::Placeholder + }); + + let label = Label::new(self.value.clone()).color(if self.disabled { + LabelColor::Disabled + } else { + LabelColor::Default + }); div() .h_7() .w_full() .px_2() .border() - .border_color(border_color_default) - .bg(background_color_default) - .hover(|style| { - style - .border_color(border_color_hover) - .bg(background_color_active) - }) - // .active(|a| .border_color(border_color_active)) + .border_color(system_color.transparent) + .bg(input_bg) + .hover(|style| style.bg(input_hover_bg)) + // .active(|style| style.bg(input_active_bg)) .flex() .items_center() .child( @@ -101,9 +105,8 @@ impl Input { .flex() .items_center() .text_sm() - .text_color(text_color) - .child(text_el) - .child(div().text_color(theme.players[0].cursor).child("|")), + .when(self.value.is_empty(), |this| this.child(placeholder_label)) + .when(!self.value.is_empty(), |this| this.child(label)), ) } } diff --git a/crates/ui2/src/elements/label.rs b/crates/ui2/src/elements/label.rs index f81c86c31f..cfb0c21cb1 100644 --- a/crates/ui2/src/elements/label.rs +++ b/crates/ui2/src/elements/label.rs @@ -23,16 +23,18 @@ pub enum LabelColor { impl LabelColor { pub fn hsla(&self, cx: &WindowContext) -> Hsla { let color = ThemeColor::new(cx); + // TODO: Remove + let theme = theme(cx); match self { - Self::Default => theme.middle.base.default.foreground, - Self::Muted => theme.middle.variant.default.foreground, + Self::Default => color.text, + Self::Muted => color.text_muted, Self::Created => theme.middle.positive.default.foreground, Self::Modified => theme.middle.warning.default.foreground, Self::Deleted => theme.middle.negative.default.foreground, - Self::Disabled => theme.middle.base.disabled.foreground, + Self::Disabled => color.text_disabled, Self::Hidden => theme.middle.variant.default.foreground, - Self::Placeholder => theme.middle.base.disabled.foreground, + Self::Placeholder => color.text_placeholder, Self::Accent => theme.middle.accent.default.foreground, } } @@ -138,7 +140,7 @@ impl HighlightedLabel { fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - let highlight_color = theme.lowest.accent.default.foreground; + let highlight_color = color.text_accent; let mut highlight_indices = self.highlight_indices.iter().copied().peekable(); diff --git a/crates/ui2/src/elements/player.rs b/crates/ui2/src/elements/player.rs index cf90dbab34..2cab1c57d5 100644 --- a/crates/ui2/src/elements/player.rs +++ b/crates/ui2/src/elements/player.rs @@ -1,6 +1,6 @@ use gpui3::{Hsla, ViewContext}; -use crate::theme; +use crate::ThemeColor; #[derive(Debug, Default, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy)] pub enum PlayerStatus { @@ -141,13 +141,13 @@ impl Player { pub fn cursor_color(&self, cx: &mut ViewContext) -> Hsla { let color = ThemeColor::new(cx); let index = self.index % 8; - theme.players[self.index].cursor + color.player[self.index].cursor } pub fn selection_color(&self, cx: &mut ViewContext) -> Hsla { let color = ThemeColor::new(cx); let index = self.index % 8; - theme.players[self.index].selection + color.player[self.index].selection } pub fn avatar_src(&self) -> &str { diff --git a/crates/ui2/src/elements/tool_divider.rs b/crates/ui2/src/elements/tool_divider.rs index d0fc709346..7316b22c4c 100644 --- a/crates/ui2/src/elements/tool_divider.rs +++ b/crates/ui2/src/elements/tool_divider.rs @@ -1,7 +1,6 @@ use std::marker::PhantomData; use crate::prelude::*; -use crate::theme; #[derive(Element)] pub struct ToolDivider { @@ -18,6 +17,6 @@ impl ToolDivider { fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { let color = ThemeColor::new(cx); - div().w_px().h_3().bg(theme.lowest.base.default.border) + div().w_px().h_3().bg(color.border) } } diff --git a/crates/ui2/src/prelude.rs b/crates/ui2/src/prelude.rs index 9433145ff5..c7663b9ce6 100644 --- a/crates/ui2/src/prelude.rs +++ b/crates/ui2/src/prelude.rs @@ -9,6 +9,7 @@ pub use crate::{theme, ButtonVariant, ElementExt, Theme}; use gpui3::{hsla, rems, rgb, Hsla, Rems}; use strum::EnumIter; +// TODO Remove uses in favor of ThemeColor #[derive(Default)] pub struct SystemColor { pub transparent: Hsla, @@ -35,6 +36,30 @@ impl SystemColor { } } +#[derive(Clone, Copy)] +pub struct PlayerThemeColors { + pub cursor: Hsla, + pub selection: Hsla, +} + +impl PlayerThemeColors { + pub fn new(cx: &WindowContext, ix: usize) -> Self { + let theme = theme(cx); + + if ix < theme.players.len() { + Self { + cursor: theme.players[ix].cursor, + selection: theme.players[ix].selection, + } + } else { + Self { + cursor: rgb::(0xff00ff), + selection: rgb::(0xff00ff), + } + } + } +} + #[derive(Clone, Copy)] pub struct SyntaxColor { pub comment: Hsla, @@ -48,16 +73,36 @@ impl SyntaxColor { let theme = theme(cx); Self { - comment: theme.syntax.comment, - string: theme.syntax.string, - function: theme.syntax.function, - keyword: theme.syntax.keyword, + comment: theme + .syntax + .get("comment") + .cloned() + .unwrap_or_else(|| rgb::(0xff00ff)), + string: theme + .syntax + .get("string") + .cloned() + .unwrap_or_else(|| rgb::(0xff00ff)), + function: theme + .syntax + .get("function") + .cloned() + .unwrap_or_else(|| rgb::(0xff00ff)), + keyword: theme + .syntax + .get("keyword") + .cloned() + .unwrap_or_else(|| rgb::(0xff00ff)), } } } #[derive(Clone, Copy)] pub struct ThemeColor { + pub transparent: Hsla, + pub mac_os_traffic_light_red: Hsla, + pub mac_os_traffic_light_yellow: Hsla, + pub mac_os_traffic_light_green: Hsla, pub border: Hsla, pub border_variant: Hsla, pub border_focused: Hsla, @@ -96,14 +141,28 @@ pub struct ThemeColor { pub text_muted: Hsla, pub text_placeholder: Hsla, pub text_disabled: Hsla, + pub text_accent: Hsla, pub icon_muted: Hsla, pub syntax: SyntaxColor, - pub toolbar_background: Hsla, - pub editor_background: Hsla, + pub status_bar: Hsla, + pub title_bar: Hsla, + pub toolbar: Hsla, + pub tab_bar: Hsla, + pub editor: Hsla, pub editor_subheader: Hsla, pub editor_active_line: Hsla, + pub terminal: Hsla, pub image_fallback_background: Hsla, + + pub git_created: Hsla, + pub git_modified: Hsla, + pub git_deleted: Hsla, + pub git_conflict: Hsla, + pub git_ignored: Hsla, + pub git_renamed: Hsla, + + pub player: [PlayerThemeColors; 8], } impl ThemeColor { @@ -111,7 +170,22 @@ impl ThemeColor { let theme = theme(cx); let system_color = SystemColor::new(); + let players = [ + PlayerThemeColors::new(cx, 0), + PlayerThemeColors::new(cx, 1), + PlayerThemeColors::new(cx, 2), + PlayerThemeColors::new(cx, 3), + PlayerThemeColors::new(cx, 4), + PlayerThemeColors::new(cx, 5), + PlayerThemeColors::new(cx, 6), + PlayerThemeColors::new(cx, 7), + ]; + Self { + transparent: hsla(0.0, 0.0, 0.0, 0.0), + mac_os_traffic_light_red: rgb::(0xEC695E), + mac_os_traffic_light_yellow: rgb::(0xF4BF4F), + mac_os_traffic_light_green: rgb::(0x62C554), border: theme.lowest.base.default.border, border_variant: theme.lowest.variant.default.border, border_focused: theme.lowest.accent.default.border, @@ -134,13 +208,28 @@ impl ThemeColor { /// TODO: map this to a real value text_placeholder: theme.lowest.negative.default.foreground, text_disabled: theme.lowest.base.disabled.foreground, + text_accent: theme.lowest.accent.default.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, + + status_bar: theme.lowest.base.default.background, + title_bar: theme.lowest.base.default.background, + toolbar: theme.highest.base.default.background, + tab_bar: theme.middle.base.default.background, + editor: theme.highest.base.default.background, editor_subheader: theme.middle.base.default.background, + terminal: theme.highest.base.default.background, editor_active_line: theme.highest.on.default.background, image_fallback_background: theme.lowest.base.default.background, + + git_created: theme.lowest.positive.default.foreground, + git_modified: theme.lowest.accent.default.foreground, + git_deleted: theme.lowest.negative.default.foreground, + git_conflict: theme.lowest.warning.default.foreground, + git_ignored: theme.lowest.base.disabled.foreground, + git_renamed: theme.lowest.warning.default.foreground, + + player: players, } } } @@ -244,11 +333,11 @@ impl GitStatus { match self { Self::None => system_color.transparent, - Self::Created => theme.lowest.positive.default.foreground, - Self::Modified => theme.lowest.warning.default.foreground, - Self::Deleted => theme.lowest.negative.default.foreground, - Self::Conflict => theme.lowest.warning.default.foreground, - Self::Renamed => theme.lowest.accent.default.foreground, + Self::Created => color.git_created, + Self::Modified => color.git_modified, + Self::Deleted => color.git_deleted, + Self::Conflict => color.git_conflict, + Self::Renamed => color.git_renamed, } } } diff --git a/crates/ui2/src/static_data.rs b/crates/ui2/src/static_data.rs index c9b389c923..f83cc4a979 100644 --- a/crates/ui2/src/static_data.rs +++ b/crates/ui2/src/static_data.rs @@ -4,12 +4,12 @@ use std::str::FromStr; use gpui3::WindowContext; use rand::Rng; +use crate::HighlightedText; use crate::{ - theme, Buffer, BufferRow, BufferRows, EditorPane, FileSystemStatus, GitStatus, HighlightColor, - HighlightedLine, HighlightedText, Icon, Keybinding, Label, LabelColor, ListEntry, - ListEntrySize, ListItem, Livestream, MicStatus, ModifierKeys, PaletteItem, Player, - PlayerCallStatus, PlayerWithCallStatus, ScreenShareStatus, Symbol, Tab, Theme, ToggleState, - VideoStatus, + Buffer, BufferRow, BufferRows, EditorPane, FileSystemStatus, GitStatus, HighlightedLine, Icon, + Keybinding, Label, LabelColor, ListEntry, ListEntrySize, ListItem, Livestream, MicStatus, + ModifierKeys, PaletteItem, Player, PlayerCallStatus, PlayerWithCallStatus, ScreenShareStatus, + Symbol, Tab, ThemeColor, ToggleState, VideoStatus, }; pub fn static_tabs_example() -> Vec> { @@ -613,7 +613,7 @@ pub fn empty_buffer_example() -> Buffer { } pub fn hello_world_rust_editor_example(cx: &mut WindowContext) -> EditorPane { - let theme = theme(cx); + let color = ThemeColor::new(cx); EditorPane::new( cx, @@ -622,19 +622,19 @@ pub fn hello_world_rust_editor_example(cx: &mut WindowContext) -> EditorPane { vec![Symbol(vec![ HighlightedText { text: "fn ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "main".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, ])], - hello_world_rust_buffer_example(&theme), + hello_world_rust_buffer_example(&color), ) } pub fn hello_world_rust_buffer_example( - theme: &Theme, + color: &ThemeColor, ) -> Buffer { Buffer::new() .set_title("hello_world.rs".to_string()) @@ -642,11 +642,11 @@ pub fn hello_world_rust_buffer_example( .set_language("rust".to_string()) .set_rows(Some(BufferRows { show_line_numbers: true, - rows: hello_world_rust_buffer_rows(theme), + rows: hello_world_rust_buffer_rows(color), })) } -pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { +pub fn hello_world_rust_buffer_rows(color: &ThemeColor) -> Vec { let show_line_number = true; vec![ @@ -658,15 +658,15 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { highlighted_texts: vec![ HighlightedText { text: "fn ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "main".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, HighlightedText { text: "() {".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, ], }), @@ -682,7 +682,7 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { highlighted_texts: vec![HighlightedText { text: " // Statements here are executed when the compiled binary is called." .to_string(), - color: HighlightColor::Comment.hsla(&theme), + color: color.syntax.comment, }], }), cursors: None, @@ -705,7 +705,7 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: " // Print text to the console.".to_string(), - color: HighlightColor::Comment.hsla(&theme), + color: color.syntax.comment, }], }), cursors: None, @@ -720,15 +720,15 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { highlighted_texts: vec![ HighlightedText { text: " println!(".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, HighlightedText { text: "\"Hello, world!\"".to_string(), - color: HighlightColor::String.hsla(&theme), + color: color.syntax.string, }, HighlightedText { text: ");".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, ], }), @@ -743,7 +743,7 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: "}".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }], }), cursors: None, @@ -754,7 +754,7 @@ pub fn hello_world_rust_buffer_rows(theme: &Theme) -> Vec { } pub fn hello_world_rust_editor_with_status_example(cx: &mut WindowContext) -> EditorPane { - let theme = theme(cx); + let color = ThemeColor::new(cx); EditorPane::new( cx, @@ -763,19 +763,19 @@ pub fn hello_world_rust_editor_with_status_example(cx: &mut WindowContext) -> Ed vec![Symbol(vec![ HighlightedText { text: "fn ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "main".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, ])], - hello_world_rust_buffer_with_status_example(&theme), + hello_world_rust_buffer_with_status_example(&color), ) } pub fn hello_world_rust_buffer_with_status_example( - theme: &Theme, + color: &ThemeColor, ) -> Buffer { Buffer::new() .set_title("hello_world.rs".to_string()) @@ -783,11 +783,11 @@ pub fn hello_world_rust_buffer_with_status_example Vec { +pub fn hello_world_rust_with_status_buffer_rows(color: &ThemeColor) -> Vec { let show_line_number = true; vec![ @@ -799,15 +799,15 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec highlighted_texts: vec![ HighlightedText { text: "fn ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "main".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, HighlightedText { text: "() {".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, ], }), @@ -823,7 +823,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec highlighted_texts: vec![HighlightedText { text: "// Statements here are executed when the compiled binary is called." .to_string(), - color: HighlightColor::Comment.hsla(&theme), + color: color.syntax.comment, }], }), cursors: None, @@ -846,7 +846,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: " // Print text to the console.".to_string(), - color: HighlightColor::Comment.hsla(&theme), + color: color.syntax.comment, }], }), cursors: None, @@ -861,15 +861,15 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec highlighted_texts: vec![ HighlightedText { text: " println!(".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, HighlightedText { text: "\"Hello, world!\"".to_string(), - color: HighlightColor::String.hsla(&theme), + color: color.syntax.string, }, HighlightedText { text: ");".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, ], }), @@ -884,7 +884,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: "}".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }], }), cursors: None, @@ -898,7 +898,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: "".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }], }), cursors: None, @@ -912,7 +912,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: "// Marshall and Nate were here".to_string(), - color: HighlightColor::Comment.hsla(&theme), + color: color.syntax.comment, }], }), cursors: None, @@ -922,16 +922,16 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec ] } -pub fn terminal_buffer(theme: &Theme) -> Buffer { +pub fn terminal_buffer(color: &ThemeColor) -> Buffer { Buffer::new() .set_title("zed — fish".to_string()) .set_rows(Some(BufferRows { show_line_numbers: false, - rows: terminal_buffer_rows(theme), + rows: terminal_buffer_rows(color), })) } -pub fn terminal_buffer_rows(theme: &Theme) -> Vec { +pub fn terminal_buffer_rows(color: &ThemeColor) -> Vec { let show_line_number = false; vec![ @@ -943,31 +943,31 @@ pub fn terminal_buffer_rows(theme: &Theme) -> Vec { highlighted_texts: vec![ HighlightedText { text: "maxdeviant ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, HighlightedText { text: "in ".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, HighlightedText { text: "profaned-capital ".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, HighlightedText { text: "in ".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, HighlightedText { text: "~/p/zed ".to_string(), - color: HighlightColor::Function.hsla(&theme), + color: color.syntax.function, }, HighlightedText { text: "on ".to_string(), - color: HighlightColor::Default.hsla(&theme), + color: color.text, }, HighlightedText { text: " gpui2-ui ".to_string(), - color: HighlightColor::Keyword.hsla(&theme), + color: color.syntax.keyword, }, ], }), @@ -982,7 +982,7 @@ pub fn terminal_buffer_rows(theme: &Theme) -> Vec { line: Some(HighlightedLine { highlighted_texts: vec![HighlightedText { text: "λ ".to_string(), - color: HighlightColor::String.hsla(&theme), + color: color.syntax.string, }], }), cursors: None, diff --git a/crates/ui2/src/story.rs b/crates/ui2/src/story.rs index cb269850d1..2a753df4f1 100644 --- a/crates/ui2/src/story.rs +++ b/crates/ui2/src/story.rs @@ -1,7 +1,6 @@ use gpui3::Div; use crate::prelude::*; -use crate::theme; pub struct Story {} @@ -16,7 +15,7 @@ impl Story { .pt_2() .px_4() .font("Zed Mono Extended") - .bg(theme.lowest.base.default.background) + .bg(color.background) } pub fn title( @@ -27,7 +26,7 @@ impl Story { div() .text_xl() - .text_color(theme.lowest.base.default.foreground) + .text_color(color.text) .child(title.to_owned()) } @@ -47,7 +46,7 @@ impl Story { .mt_4() .mb_2() .text_xs() - .text_color(theme.lowest.base.default.foreground) + .text_color(color.text) .child(label.to_owned()) } }