Checkpoint – Broken

crates/ui2/src/components/assistant_panel.rs

@@ -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()

crates/ui2/src/components/breadcrumb.rs

@@ -25,10 +25,9 @@ impl<S: 'static + Send + Sync + Clone> Breadcrumb<S> {
         }
     }
 
-    fn render_separator(&self, theme: &Theme) -> Div<S> {
+    fn render_separator(&self, cx: &WindowContext) -> Div<S> {
-        div()
+        let color = ThemeColor::new(cx);
-            .child(" › ")
+        div().child(" › ").text_color(color.text_muted)
-            .text_color(HighlightColor::Default.hsla(theme))
     }
 
     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,
                             },
                         ]),
                     ],

crates/ui2/src/components/buffer.rs

@@ -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))

crates/ui2/src/components/buffer_search.rs

@@ -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);
+        let color = ThemeColor::new(cx);
 
-        h_stack()
+        h_stack().bg(color.toolbar_background).p_2().child(
-            .bg(theme.highest.base.default.background)
+            h_stack().child(Input::new("Search")).child(
-            .p_2()
+                IconButton::<Self>::new(Icon::Replace)
-            .child(
+                    .when(self.is_replace_open, |this| this.color(IconColor::Accent))
-                h_stack()
+                    .on_click(|buffer_search, cx| {
-                    .child(Input::new("Search (↑/↓ for previous/next query)"))
+                        buffer_search.toggle_replace(cx);
-                    .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);
-                            }),
-                    ),
-            )
     }
 }

crates/ui2/src/components/chat_panel.rs

@@ -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()

crates/ui2/src/components/collab_panel.rs

@@ -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()
+                        div().pb_1().border_color(color.border).border_b().child(
-                            .bg(theme.lowest.base.default.background)
+                            List::new(static_collab_panel_current_call())
-                            .pb_1()
+                                .header(
-                            .border_color(theme.lowest.base.default.border)
+                                    ListHeader::new("CRDB")
-                            .border_b()
+                                        .set_left_icon(Icon::Hash.into())
-                            .child(
+                                        .set_toggle(ToggleState::Toggled),
-                                List::new(static_collab_panel_current_call())
+                                )
-                                    .header(
+                                .set_toggle(ToggleState::Toggled),
-                                        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
+                        img()
-                            .middle
+                            .uri(avatar_uri)
-                            .positive
+                            .size_3p5()
-                            .default
+                            .rounded_full()
-                            .foreground),
+                            .bg(color.image_fallback_background),
                     )
                     .child(label.into()),
             )

crates/ui2/src/components/context_menu.rs

@@ -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

crates/ui2/src/components/editor_pane.rs

@@ -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)),

crates/ui2/src/components/facepile.rs

@@ -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)

crates/ui2/src/components/icon_button.rs

@@ -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| {
+            .bg(bg_color)
-                this.bg(color.filled_element)
+            .hover(|style| style.bg(bg_hover_color))
-            })
+            // .active(|style| style.bg(bg_active_color))
-            .hover(|style| style.bg(theme.highest.base.hovered.background))
             .child(IconElement::new(self.icon).color(icon_color));
 
         if let Some(click_handler) = self.handlers.click.clone() {

crates/ui2/src/components/keybinding.rs

@@ -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)
+            .text_color(color.text)
-            .bg(theme.lowest.on.default.background)
+            .bg(color.filled_element)
             .child(self.key.clone())
     }
 }

crates/ui2/src/components/list.rs

@@ -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);
 

crates/ui2/src/components/multi_buffer.rs

@@ -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))

crates/ui2/src/components/palette.rs

@@ -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))
+                                    .hover(|style| style.bg(color.ghost_element_hover))
-                                    // .active()
+                                    // .active(|style| style.bg(color.ghost_element_active))
-                                    // .fill(theme.lowest.base.pressed.background)
                                     .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()

crates/ui2/src/components/panel.rs

@@ -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);

crates/ui2/src/components/panes.rs

@@ -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()

crates/ui2/src/components/project_panel.rs

@@ -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()

crates/ui2/src/components/status_bar.rs

@@ -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()

crates/ui2/src/components/tab.rs

@@ -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;
 

crates/ui2/src/components/tab_bar.rs

@@ -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;
 

crates/ui2/src/components/terminal.rs

@@ -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;

crates/ui2/src/components/title_bar.rs

@@ -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();
 

crates/ui2/src/components/toolbar.rs

@@ -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))

crates/ui2/src/components/traffic_lights.rs

@@ -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()

crates/ui2/src/elements/avatar.rs

@@ -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();
 

crates/ui2/src/elements/details.rs

@@ -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"))

crates/ui2/src/elements/icon.rs

@@ -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.),

crates/ui2/src/elements/input.rs

@@ -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;

crates/ui2/src/elements/label.rs

@@ -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;
 

crates/ui2/src/elements/player.rs

@@ -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
     }

crates/ui2/src/elements/tool_divider.rs

@@ -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)
     }

crates/ui2/src/prelude.rs

@@ -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 {

crates/ui2/src/story.rs

@@ -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()