Rename fields in ThemeColors (#3242)

This PR applies a number of field renames in the `ThemeColors` struct
from the `import-theme` branch.

This will help prevent this branch from diverging too far from `main`.

Release Notes:

- N/A

---------

Co-authored-by: Nate Butler <iamnbutler@gmail.com>
Co-authored-by: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com>

crates/ui2/src/components/button.rs

@@ -41,8 +41,8 @@ pub enum ButtonVariant {
 impl ButtonVariant {
     pub fn bg_color(&self, cx: &mut WindowContext) -> Hsla {
         match self {
-            ButtonVariant::Ghost => cx.theme().colors().ghost_element,
-            ButtonVariant::Filled => cx.theme().colors().element,
+            ButtonVariant::Ghost => cx.theme().colors().ghost_element_background,
+            ButtonVariant::Filled => cx.theme().colors().element_background,
         }
     }
 

crates/ui2/src/components/checkbox.rs

@@ -120,7 +120,10 @@ impl Checkbox {
                 cx.theme().colors().element_selected,
                 cx.theme().colors().border,
             ),
-            (false, false) => (cx.theme().colors().element, cx.theme().colors().border),
+            (false, false) => (
+                cx.theme().colors().element_background,
+                cx.theme().colors().border,
+            ),
         };
 
         div()

crates/ui2/src/components/context_menu.rs

@@ -46,7 +46,7 @@ impl ContextMenu {
     fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         v_stack()
             .flex()
-            .bg(cx.theme().colors().elevated_surface)
+            .bg(cx.theme().colors().elevated_surface_background)
             .border()
             .border_color(cx.theme().colors().border)
             .child(List::new(

crates/ui2/src/components/icon_button.rs

@@ -73,12 +73,12 @@ impl<V: 'static> IconButton<V> {
 
         let (bg_color, bg_hover_color, bg_active_color) = match self.variant {
             ButtonVariant::Filled => (
-                cx.theme().colors().element,
+                cx.theme().colors().element_background,
                 cx.theme().colors().element_hover,
                 cx.theme().colors().element_active,
             ),
             ButtonVariant::Ghost => (
-                cx.theme().colors().ghost_element,
+                cx.theme().colors().ghost_element_background,
                 cx.theme().colors().ghost_element_hover,
                 cx.theme().colors().ghost_element_active,
             ),

crates/ui2/src/components/indicator.rs

@@ -14,7 +14,7 @@ impl UnreadIndicator {
         div()
             .rounded_full()
             .border_2()
-            .border_color(cx.theme().colors().surface)
+            .border_color(cx.theme().colors().surface_background)
             .w(px(9.0))
             .h(px(9.0))
             .z_index(2)

crates/ui2/src/components/input.rs

@@ -59,12 +59,12 @@ impl Input {
     fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let (input_bg, input_hover_bg, input_active_bg) = match self.variant {
             InputVariant::Ghost => (
-                cx.theme().colors().ghost_element,
+                cx.theme().colors().ghost_element_background,
                 cx.theme().colors().ghost_element_hover,
                 cx.theme().colors().ghost_element_active,
             ),
             InputVariant::Filled => (
-                cx.theme().colors().element,
+                cx.theme().colors().element_background,
                 cx.theme().colors().element_hover,
                 cx.theme().colors().element_active,
             ),

crates/ui2/src/components/keybinding.rs

@@ -66,7 +66,7 @@ impl Key {
             .rounded_md()
             .text_sm()
             .text_color(cx.theme().colors().text)
-            .bg(cx.theme().colors().element)
+            .bg(cx.theme().colors().element_background)
             .child(self.key.clone())
     }
 }

crates/ui2/src/components/list.rs

@@ -79,7 +79,7 @@ impl ListHeader {
 
         h_stack()
             .w_full()
-            .bg(cx.theme().colors().surface)
+            .bg(cx.theme().colors().surface_background)
             // TODO: Add focus state
             // .when(self.state == InteractionState::Focused, |this| {
             //     this.border()
@@ -307,7 +307,7 @@ impl ListEntry {
         div()
             .relative()
             .group("")
-            .bg(cx.theme().colors().surface)
+            .bg(cx.theme().colors().surface_background)
             // TODO: Add focus state
             .child(
                 sized_item

crates/ui2/src/components/notification_toast.rs

@@ -34,7 +34,7 @@ impl NotificationToast {
             .px_1p5()
             .rounded_lg()
             .shadow_md()
-            .bg(cx.theme().colors().elevated_surface)
+            .bg(cx.theme().colors().elevated_surface_background)
             .child(div().size_full().child(self.label.clone()))
     }
 }

crates/ui2/src/components/palette.rs

@@ -47,7 +47,7 @@ impl Palette {
             .id(self.id.clone())
             .w_96()
             .rounded_lg()
-            .bg(cx.theme().colors().elevated_surface)
+            .bg(cx.theme().colors().elevated_surface_background)
             .border()
             .border_color(cx.theme().colors().border)
             .child(
@@ -56,7 +56,12 @@ impl Palette {
                     .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(cx.theme().colors().element))
+                    .child(
+                        div()
+                            .h_px()
+                            .w_full()
+                            .bg(cx.theme().colors().element_background),
+                    )
                     .child(
                         v_stack()
                             .id("items")

crates/ui2/src/components/panel.rs

@@ -107,7 +107,7 @@ impl<V: 'static> Panel<V> {
                 PanelSide::Right => this.border_l(),
                 PanelSide::Bottom => this.border_b().w_full().h(current_size),
             })
-            .bg(cx.theme().colors().surface)
+            .bg(cx.theme().colors().surface_background)
             .border_color(cx.theme().colors().border)
             .children(self.children)
     }

crates/ui2/src/components/tab.rs

@@ -109,12 +109,12 @@ impl Tab {
 
         let (tab_bg, tab_hover_bg, tab_active_bg) = match self.current {
             false => (
-                cx.theme().colors().tab_inactive,
+                cx.theme().colors().tab_inactive_background,
                 cx.theme().colors().ghost_element_hover,
                 cx.theme().colors().ghost_element_active,
             ),
             true => (
-                cx.theme().colors().tab_active,
+                cx.theme().colors().tab_active_background,
                 cx.theme().colors().element_hover,
                 cx.theme().colors().element_active,
             ),

crates/ui2/src/components/toast.rs

@@ -54,7 +54,7 @@ impl<V: 'static> Toast<V> {
             .rounded_lg()
             .shadow_md()
             .overflow_hidden()
-            .bg(cx.theme().colors().elevated_surface)
+            .bg(cx.theme().colors().elevated_surface_background)
             .children(self.children)
     }
 }

crates/ui2/src/to_extract/buffer.rs

@@ -220,7 +220,7 @@ impl Buffer {
             .flex_1()
             .w_full()
             .h_full()
-            .bg(cx.theme().colors().editor)
+            .bg(cx.theme().colors().editor_background)
             .children(rows)
     }
 }

crates/ui2/src/to_extract/buffer_search.rs

@@ -30,14 +30,17 @@ impl Render for BufferSearch {
     type Element = Div<Self>;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Div<Self> {
-        h_stack().bg(cx.theme().colors().toolbar).p_2().child(
-            h_stack().child(Input::new("Search")).child(
-                IconButton::<Self>::new("replace", Icon::Replace)
-                    .when(self.is_replace_open, |this| this.color(IconColor::Accent))
-                    .on_click(|buffer_search, cx| {
-                        buffer_search.toggle_replace(cx);
-                    }),
-            ),
-        )
+        h_stack()
+            .bg(cx.theme().colors().toolbar_background)
+            .p_2()
+            .child(
+                h_stack().child(Input::new("Search")).child(
+                    IconButton::<Self>::new("replace", 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/to_extract/collab_panel.rs

@@ -17,7 +17,7 @@ impl CollabPanel {
         v_stack()
             .id(self.id.clone())
             .h_full()
-            .bg(cx.theme().colors().surface)
+            .bg(cx.theme().colors().surface_background)
             .child(
                 v_stack()
                     .id("crdb")

crates/ui2/src/to_extract/multi_buffer.rs

@@ -24,7 +24,7 @@ impl MultiBuffer {
                             .items_center()
                             .justify_between()
                             .p_4()
-                            .bg(cx.theme().colors().editor_subheader)
+                            .bg(cx.theme().colors().editor_subheader_background)
                             .child(Label::new("main.rs"))
                             .child(IconButton::new("arrow_up_right", Icon::ArrowUpRight)),
                     )

crates/ui2/src/to_extract/notifications_panel.rs

@@ -22,7 +22,7 @@ impl NotificationsPanel {
             .flex()
             .flex_col()
             .size_full()
-            .bg(cx.theme().colors().surface)
+            .bg(cx.theme().colors().surface_background)
             .child(
                 ListHeader::new("Notifications").meta(Some(ListHeaderMeta::Tools(vec![
                     Icon::AtSign,
@@ -43,7 +43,7 @@ impl NotificationsPanel {
                             .p_1()
                             // TODO: Add cursor style
                             // .cursor(Cursor::IBeam)
-                            .bg(cx.theme().colors().element)
+                            .bg(cx.theme().colors().element_background)
                             .border()
                             .border_color(cx.theme().colors().border_variant)
                             .child(

crates/ui2/src/to_extract/panes.rs

@@ -113,7 +113,7 @@ impl<V: 'static> PaneGroup<V> {
                 .gap_px()
                 .w_full()
                 .h_full()
-                .bg(cx.theme().colors().editor)
+                .bg(cx.theme().colors().editor_background)
                 .children(self.groups.into_iter().map(|group| group.render(view, cx)));
 
             if self.split_direction == SplitDirection::Horizontal {

crates/ui2/src/to_extract/project_panel.rs

@@ -19,7 +19,7 @@ impl ProjectPanel {
             .flex()
             .flex_col()
             .size_full()
-            .bg(cx.theme().colors().surface)
+            .bg(cx.theme().colors().surface_background)
             .child(
                 div()
                     .id("project-panel-contents")

crates/ui2/src/to_extract/status_bar.rs

@@ -93,7 +93,7 @@ impl StatusBar {
             .items_center()
             .justify_between()
             .w_full()
-            .bg(cx.theme().colors().status_bar)
+            .bg(cx.theme().colors().status_bar_background)
             .child(self.left_tools(view, cx))
             .child(self.right_tools(view, cx))
     }

crates/ui2/src/to_extract/tab_bar.rs

@@ -31,7 +31,7 @@ impl TabBar {
             .id(self.id.clone())
             .w_full()
             .flex()
-            .bg(cx.theme().colors().tab_bar)
+            .bg(cx.theme().colors().tab_bar_background)
             // Left Side
             .child(
                 div()

crates/ui2/src/to_extract/terminal.rs

@@ -24,7 +24,7 @@ impl Terminal {
                 div()
                     .w_full()
                     .flex()
-                    .bg(cx.theme().colors().surface)
+                    .bg(cx.theme().colors().surface_background)
                     .child(
                         div().px_1().flex().flex_none().gap_2().child(
                             div()

crates/ui2/src/to_extract/toolbar.rs

@@ -56,7 +56,7 @@ impl<V: 'static> Toolbar<V> {
 
     fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         div()
-            .bg(cx.theme().colors().toolbar)
+            .bg(cx.theme().colors().toolbar_background)
             .p_2()
             .flex()
             .justify_between()

crates/ui2/src/to_extract/traffic_lights.rs

@@ -28,7 +28,7 @@ impl TrafficLight {
             (true, TrafficLightColor::Red) => system_colors.mac_os_traffic_light_red,
             (true, TrafficLightColor::Yellow) => system_colors.mac_os_traffic_light_yellow,
             (true, TrafficLightColor::Green) => system_colors.mac_os_traffic_light_green,
-            (false, _) => cx.theme().colors().element,
+            (false, _) => cx.theme().colors().element_background,
         };
 
         div().w_3().h_3().rounded_full().bg(fill)