Rename `fill` to `bg`

Antonio Scandurra created 2 years ago

Change summary

crates/gpui3/src/style.rs                   |  6 +-
crates/gpui3/src/styled.rs                  |  4 
crates/storybook2/src/collab_panel.rs       | 12 ++--
crates/storybook2/src/stories/text.rs       |  2 
crates/storybook2/src/stories/z_index.rs    |  6 +-
crates/storybook2/src/workspace.rs          | 52 +++++++++++-----------
crates/ui2/src/components/breadcrumb.rs     |  2 
crates/ui2/src/components/buffer.rs         | 12 +++-
crates/ui2/src/components/buffer_search.rs  |  2 
crates/ui2/src/components/collab_panel.rs   | 16 +++---
crates/ui2/src/components/context_menu.rs   |  8 ++
crates/ui2/src/components/icon_button.rs    |  4 
crates/ui2/src/components/keybinding.rs     |  8 ++
crates/ui2/src/components/list.rs           | 10 ++--
crates/ui2/src/components/multi_buffer.rs   |  2 
crates/ui2/src/components/palette.rs        |  6 +-
crates/ui2/src/components/panel.rs          |  6 +-
crates/ui2/src/components/panes.rs          |  6 +-
crates/ui2/src/components/player_stack.rs   | 14 ++---
crates/ui2/src/components/project_panel.rs  |  2 
crates/ui2/src/components/status_bar.rs     |  2 
crates/ui2/src/components/tab.rs            |  8 ++
crates/ui2/src/components/tab_bar.rs        |  8 ++
crates/ui2/src/components/terminal.rs       |  2 
crates/ui2/src/components/title_bar.rs      |  2 
crates/ui2/src/components/toast.rs          |  2 
crates/ui2/src/components/toolbar.rs        |  2 
crates/ui2/src/components/traffic_lights.rs |  8 ++
crates/ui2/src/components/workspace.rs      |  2 
crates/ui2/src/elements/avatar.rs           |  8 ++
crates/ui2/src/elements/button.rs           |  2 
crates/ui2/src/elements/input.rs            |  4 
crates/ui2/src/elements/label.rs            |  8 ++
crates/ui2/src/elements/tool_divider.rs     |  2 
crates/ui2/src/story.rs                     |  2 
35 files changed, 136 insertions(+), 106 deletions(-)

Detailed changes

crates/gpui3/src/style.rs

@@ -83,7 +83,7 @@ pub struct Style {
     pub flex_shrink: f32,
 
     /// The fill color of this element
-    pub fill: Option<Fill>,
+    pub background: Option<Fill>,
 
     /// The border color of this element
     pub border_color: Option<Hsla>,
@@ -263,7 +263,7 @@ impl Style {
             );
         });
 
-        let background_color = self.fill.as_ref().and_then(Fill::color);
+        let background_color = self.background.as_ref().and_then(Fill::color);
         if background_color.is_some() || self.is_border_visible() {
             cx.stack(1, |cx| {
                 cx.paint_quad(
@@ -314,7 +314,7 @@ impl Default for Style {
             flex_grow: 0.0,
             flex_shrink: 1.0,
             flex_basis: Length::Auto,
-            fill: None,
+            background: None,
             border_color: None,
             corner_radii: Corners::default(),
             box_shadow: Default::default(),

crates/gpui3/src/styled.rs

@@ -178,12 +178,12 @@ pub trait Styled {
         self
     }
 
-    fn fill<F>(mut self, fill: F) -> Self
+    fn bg<F>(mut self, fill: F) -> Self
     where
         F: Into<Fill>,
         Self: Sized,
     {
-        self.style().fill = Some(fill.into());
+        self.style().background = Some(fill.into());
         self
     }
 

crates/storybook2/src/collab_panel.rs

@@ -34,7 +34,7 @@ impl CollabPanel {
             .text_color(theme.middle.base.default.foreground)
             .border_color(theme.middle.base.default.border)
             .border()
-            .fill(theme.middle.base.default.background)
+            .bg(theme.middle.base.default.background)
             .child(
                 div()
                     .w_full()
@@ -132,7 +132,7 @@ impl CollabPanel {
             .flex()
             .justify_between()
             .items_center()
-            .active(|style| style.fill(theme.highest.accent.default.background))
+            .active(|style| style.bg(theme.highest.accent.default.background))
             .child(div().flex().gap_1().text_sm().child(label))
             .child(
                 div().flex().h_full().gap_1().items_center().child(
@@ -177,14 +177,14 @@ impl CollabPanel {
                             // .uri(avatar_uri)
                             .size_3p5()
                             .rounded_full()
-                            .fill(theme.middle.positive.default.foreground)
+                            .bg(theme.middle.positive.default.foreground)
                             .shadow()
                             .group_hover("", |style| {
-                                style.fill(theme.middle.negative.default.foreground)
+                                style.bg(theme.middle.negative.default.foreground)
                             })
-                            .hover(|style| style.fill(theme.middle.warning.default.foreground))
+                            .hover(|style| style.bg(theme.middle.warning.default.foreground))
                             .group_active("", |style| {
-                                style.fill(theme.middle.accent.default.foreground)
+                                style.bg(theme.middle.accent.default.foreground)
                             }),
                     )
                     .child(label),

crates/storybook2/src/stories/text.rs

@@ -9,7 +9,7 @@ impl TextStory {
         view(cx.entity(|cx| ()), |_, cx| {
             div()
                 .size_full()
-                .fill(white())
+                .bg(white())
                 .child(concat!(
                     "The quick brown fox jumps over the lazy dog. ",
                     "Meanwhile, the lazy dog decided it was time for a change. ",

crates/storybook2/src/stories/z_index.rs

@@ -69,7 +69,7 @@ trait Styles: Styled + Sized {
     }
 
     fn blue(self) -> Self {
-        self.fill(rgb::<Hsla>(0xe5e8fc))
+        self.bg(rgb::<Hsla>(0xe5e8fc))
             .border_5()
             .border_color(rgb::<Hsla>(0x112382))
             // HACK: Simulate `line-height: 55px`.
@@ -79,7 +79,7 @@ trait Styles: Styled + Sized {
     }
 
     fn red(self) -> Self {
-        self.fill(rgb::<Hsla>(0xfce5e7))
+        self.bg(rgb::<Hsla>(0xfce5e7))
             .border_5()
             .border_color(rgb::<Hsla>(0xe3a1a7))
             // HACK: Simulate `text-align: center`.
@@ -115,7 +115,7 @@ impl<S: 'static + Send + Sync> ZIndexExample<S> {
                     .left(px(15.))
                     .w(px(180.))
                     .h(px(230.))
-                    .fill(rgb::<Hsla>(0xfcfbe5))
+                    .bg(rgb::<Hsla>(0xfcfbe5))
                     .text_color(rgb::<Hsla>(0x000000))
                     .border_5()
                     .border_color(rgb::<Hsla>(0xe3e0a1))

crates/storybook2/src/workspace.rs

@@ -34,18 +34,18 @@ impl Workspace {
                 .w_full()
                 .h_5()
                 .mt_10()
-                .fill(theme.middle.warning.default.foreground)
+                .bg(theme.middle.warning.default.foreground)
                 .flex()
                 .flex_row()
                 .justify_center()
                 .child(
                     div()
                         .size_5()
-                        .fill(theme.middle.negative.default.foreground)
+                        .bg(theme.middle.negative.default.foreground)
                         .group_hover("", |style| {
-                            style.fill(theme.middle.positive.default.foreground)
+                            style.bg(theme.middle.positive.default.foreground)
                         })
-                        .hover(|style| style.fill(theme.middle.variant.default.foreground)),
+                        .hover(|style| style.bg(theme.middle.variant.default.foreground)),
                 ),
         )
     }
@@ -63,7 +63,7 @@ impl Workspace {
                 .justify_start()
                 .items_start()
                 .text_color(theme.lowest.base.default.foreground)
-                .fill(theme.middle.base.default.background)
+                .bg(theme.middle.base.default.background)
                 .child(titlebar(cx))
                 .child(
                     div()
@@ -91,7 +91,7 @@ pub fn titlebar<S: 'static + Send + Sync>(cx: &mut ViewContext<S>) -> impl Eleme
         .justify_between()
         .w_full()
         .h_8()
-        .fill(theme.lowest.base.default.background)
+        .bg(theme.lowest.base.default.background)
         .child(this.left_group(cx))
         .child(this.right_group(cx))
 }
@@ -108,7 +108,7 @@ impl Titlebar {
             .justify_between()
             .w_full()
             .h_8()
-            .fill(theme.lowest.base.default.background)
+            .bg(theme.lowest.base.default.background)
             .child(self.left_group(cx))
             .child(self.right_group(cx))
     }
@@ -131,25 +131,25 @@ impl Titlebar {
                     .items_center()
                     .gap_2()
                     .child(
-                        div()
-                            .w_3()
-                            .h_3()
-                            .rounded_full()
-                            .fill(theme.lowest.positive.default.foreground),
+                        div().w_3().h_3().rounded_full().bg(theme
+                            .lowest
+                            .positive
+                            .default
+                            .foreground),
                     )
                     .child(
-                        div()
-                            .w_3()
-                            .h_3()
-                            .rounded_full()
-                            .fill(theme.lowest.warning.default.foreground),
+                        div().w_3().h_3().rounded_full().bg(theme
+                            .lowest
+                            .warning
+                            .default
+                            .foreground),
                     )
                     .child(
-                        div()
-                            .w_3()
-                            .h_3()
-                            .rounded_full()
-                            .fill(theme.lowest.negative.default.foreground),
+                        div().w_3().h_3().rounded_full().bg(theme
+                            .lowest
+                            .negative
+                            .default
+                            .foreground),
                     ),
             )
             // === Project Info === //
@@ -220,7 +220,7 @@ impl Titlebar {
                     ),
                 ),
             )
-            .child(div().w_px().h_3().fill(theme.lowest.base.default.border))
+            .child(div().w_px().h_3().bg(theme.lowest.base.default.border))
             // === Comms === //
             .child(
                 div().child(
@@ -290,7 +290,7 @@ impl Titlebar {
                         ),
                 ),
             )
-            .child(div().w_px().h_3().fill(theme.lowest.base.default.border))
+            .child(div().w_px().h_3().bg(theme.lowest.base.default.border))
             // User Group
             .child(
                 div().child(
@@ -311,7 +311,7 @@ impl Titlebar {
                                 .uri("https://avatars.githubusercontent.com/u/1714999?v=4")
                                 .size_4()
                                 .rounded_md()
-                                .fill(theme.middle.on.default.foreground),
+                                .bg(theme.middle.on.default.foreground),
                         )
                         .child(
                             svg()
@@ -341,7 +341,7 @@ mod statusbar {
             .justify_between()
             .w_full()
             .h_8()
-            .fill(theme.lowest.base.default.background)
+            .bg(theme.lowest.base.default.background)
         // .child(left_group(cx))
         // .child(right_group(cx))
     }

crates/ui2/src/components/breadcrumb.rs

@@ -47,7 +47,7 @@ impl<S: 'static + Send + Sync + Clone> Breadcrumb<S> {
             .text_sm()
             .text_color(theme.middle.base.default.foreground)
             .rounded_md()
-            .hover(|style| style.fill(theme.highest.base.hovered.background))
+            .hover(|style| style.bg(theme.highest.base.hovered.background))
             .child(self.path.clone().to_str().unwrap().to_string())
             .child(if !self.symbols.is_empty() {
                 self.render_separator(&theme)

crates/ui2/src/components/buffer.rs

@@ -179,7 +179,7 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
         };
 
         h_stack()
-            .fill(line_background)
+            .bg(line_background)
             .w_full()
             .gap_2()
             .px_1()
@@ -201,7 +201,7 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
                     ),
                 )
             })
-            .child(div().mx_0p5().w_1().h_full().fill(row.status.hsla(cx)))
+            .child(div().mx_0p5().w_1().h_full().bg(row.status.hsla(cx)))
             .children(row.line.map(|line| {
                 div()
                     .flex()
@@ -232,7 +232,7 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
             .flex_1()
             .w_full()
             .h_full()
-            .fill(theme.highest.base.default.background)
+            .bg(theme.highest.base.default.background)
             .children(rows)
     }
 }
@@ -263,7 +263,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 theme = theme(cx);
 
             Story::container(cx)

crates/ui2/src/components/buffer_search.rs

@@ -30,7 +30,7 @@ impl BufferSearch {
         let theme = theme(cx);
 
         h_stack()
-            .fill(theme.highest.base.default.background)
+            .bg(theme.highest.base.default.background)
             .p_2()
             .child(
                 h_stack()

crates/ui2/src/components/collab_panel.rs

@@ -29,14 +29,14 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
 
         v_stack()
             .h_full()
-            .fill(color.surface)
+            .bg(color.surface)
             .child(
                 v_stack()
                     .w_full()
                     .overflow_y_scroll(self.scroll_state.clone())
                     .child(
                         div()
-                            .fill(theme.lowest.base.default.background)
+                            .bg(theme.lowest.base.default.background)
                             .pb_1()
                             .border_color(theme.lowest.base.default.border)
                             .border_b()
@@ -137,7 +137,7 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
             .px_2()
             .flex()
             .items_center()
-            .hover(|style| style.fill(theme.lowest.variant.hovered.background))
+            .hover(|style| style.bg(theme.lowest.variant.hovered.background))
             // .active(|style| style.fill(theme.lowest.variant.pressed.background))
             .child(
                 div()
@@ -146,11 +146,11 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
                     .gap_1()
                     .text_sm()
                     .child(
-                        img()
-                            .uri(avatar_uri)
-                            .size_3p5()
-                            .rounded_full()
-                            .fill(theme.middle.positive.default.foreground),
+                        img().uri(avatar_uri).size_3p5().rounded_full().bg(theme
+                            .middle
+                            .positive
+                            .default
+                            .foreground),
                     )
                     .child(label.into()),
             )

crates/ui2/src/components/context_menu.rs

@@ -48,7 +48,7 @@ impl<S: 'static + Send + Sync + Clone> ContextMenu<S> {
 
         v_stack()
             .flex()
-            .fill(theme.lowest.base.default.background)
+            .bg(theme.lowest.base.default.background)
             .border()
             .border_color(theme.lowest.base.default.border)
             .child(
@@ -87,7 +87,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::<_, ContextMenu<S>>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/icon_button.rs

@@ -76,7 +76,7 @@ impl<S: 'static + Send + Sync> IconButton<S> {
 
         let mut div = div();
         if self.variant == ButtonVariant::Filled {
-            div = div.fill(theme.highest.on.default.background);
+            div = div.bg(theme.highest.on.default.background);
         }
 
         if let Some(click_handler) = self.handlers.click.clone() {
@@ -91,7 +91,7 @@ impl<S: 'static + Send + Sync> IconButton<S> {
             .items_center()
             .justify_center()
             .rounded_md()
-            .hover(|style| style.fill(theme.highest.base.hovered.background))
+            .hover(|style| style.bg(theme.highest.base.hovered.background))
             // .active()
             // .fill(theme.highest.base.pressed.background)
             .child(IconElement::new(self.icon).color(icon_color))

crates/ui2/src/components/keybinding.rs

@@ -81,7 +81,7 @@ impl<S: 'static + Send + Sync> Key<S> {
             .rounded_md()
             .text_sm()
             .text_color(theme.lowest.on.default.foreground)
-            .fill(theme.lowest.on.default.background)
+            .bg(theme.lowest.on.default.background)
             .child(self.key.clone())
     }
 }
@@ -189,7 +189,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 all_modifier_permutations = ModifierKey::iter().permutations(2);
 
             Story::container(cx)

crates/ui2/src/components/list.rs

@@ -106,7 +106,7 @@ impl<S: 'static + Send + Sync + Clone> ListHeader<S> {
         h_stack()
             .flex_1()
             .w_full()
-            .fill(color.surface)
+            .bg(color.surface)
             .when(self.state == InteractionState::Focused, |this| {
                 this.border().border_color(color.border_focused)
             })
@@ -398,7 +398,7 @@ impl<S: 'static + Send + Sync + Clone> ListEntry<S> {
         div()
             .relative()
             .group("")
-            .fill(color.surface)
+            .bg(color.surface)
             .when(self.state == InteractionState::Focused, |this| {
                 this.border().border_color(color.border_focused)
             })
@@ -412,11 +412,11 @@ impl<S: 'static + Send + Sync + Clone> ListEntry<S> {
                             .h_full()
                             .flex()
                             .justify_center()
-                            .group_hover("", |style| style.fill(color.border_focused))
+                            .group_hover("", |style| style.bg(color.border_focused))
                             .child(
                                 h_stack()
                                     .child(div().w_px().h_full())
-                                    .child(div().w_px().h_full().fill(color.border)),
+                                    .child(div().w_px().h_full().bg(color.border)),
                             )
                     }))
                     .flex()
@@ -445,7 +445,7 @@ impl<S: 'static + Send + Sync> ListSeparator<S> {
     fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
         let color = ThemeColor::new(cx);
 
-        div().h_px().w_full().fill(color.border)
+        div().h_px().w_full().bg(color.border)
     }
 }
 

crates/ui2/src/components/multi_buffer.rs

@@ -32,7 +32,7 @@ impl<S: 'static + Send + Sync + Clone> MultiBuffer<S> {
                             .items_center()
                             .justify_between()
                             .p_4()
-                            .fill(theme.lowest.base.default.background)
+                            .bg(theme.lowest.base.default.background)
                             .child(Label::new("main.rs").size(LabelSize::Small))
                             .child(IconButton::new(Icon::ArrowUpRight)),
                     )

crates/ui2/src/components/palette.rs

@@ -53,7 +53,7 @@ impl<S: 'static + Send + Sync + Clone> Palette<S> {
         v_stack()
             .w_96()
             .rounded_lg()
-            .fill(theme.lowest.base.default.background)
+            .bg(theme.lowest.base.default.background)
             .border()
             .border_color(theme.lowest.base.default.border)
             .child(
@@ -64,7 +64,7 @@ impl<S: 'static + Send + Sync + Clone> Palette<S> {
                             Label::new(self.input_placeholder).color(LabelColor::Placeholder),
                         ),
                     ))
-                    .child(div().h_px().w_full().fill(theme.lowest.base.default.border))
+                    .child(div().h_px().w_full().bg(theme.lowest.base.default.border))
                     .child(
                         v_stack()
                             .py_0p5()
@@ -89,7 +89,7 @@ impl<S: 'static + Send + Sync + Clone> Palette<S> {
                                     .px_2()
                                     .py_0p5()
                                     .rounded_lg()
-                                    .hover(|style| style.fill(theme.lowest.base.hovered.background))
+                                    .hover(|style| style.bg(theme.lowest.base.hovered.background))
                                     // .active()
                                     // .fill(theme.lowest.base.pressed.background)
                                     .child(item.clone())

crates/ui2/src/components/panel.rs

@@ -109,7 +109,7 @@ impl<S: 'static + Send + Sync> Panel<S> {
                     .h_full()
                     // .w(current_width)
                     .w_64()
-                    .fill(theme.middle.base.default.background)
+                    .bg(theme.middle.base.default.background)
                     .border_r()
                     .border_color(theme.middle.base.default.border);
             }
@@ -119,7 +119,7 @@ impl<S: 'static + Send + Sync> Panel<S> {
                     .h_full()
                     // .w(current_width)
                     .w_64()
-                    .fill(theme.middle.base.default.background)
+                    .bg(theme.middle.base.default.background)
                     .border_l()
                     .border_color(theme.middle.base.default.border);
             }
@@ -129,7 +129,7 @@ impl<S: 'static + Send + Sync> Panel<S> {
                     .w_full()
                     // .h(current_width)
                     .h_64()
-                    .fill(theme.middle.base.default.background)
+                    .bg(theme.middle.base.default.background)
                     .border_t()
                     .border_color(theme.middle.base.default.border);
             }

crates/ui2/src/components/panes.rs

@@ -48,7 +48,7 @@ impl<S: 'static + Send + Sync> Pane<S> {
         div()
             .flex()
             .flex_initial()
-            .fill(self.fill)
+            .bg(self.fill)
             .w(self.size.width)
             .h(self.size.height)
             .overflow_y_scroll(self.scroll_state.clone())
@@ -99,7 +99,7 @@ impl<S: 'static + Send + Sync> PaneGroup<S> {
                 .gap_px()
                 .w_full()
                 .h_full()
-                .fill(theme.lowest.base.default.background)
+                .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 +116,7 @@ impl<S: 'static + Send + Sync> PaneGroup<S> {
                 .gap_px()
                 .w_full()
                 .h_full()
-                .fill(theme.lowest.base.default.background)
+                .bg(theme.lowest.base.default.background)
                 .children(self.groups.iter_mut().map(|group| group.render(view, cx)));
 
             if self.split_direction == SplitDirection::Horizontal {

crates/ui2/src/components/player_stack.rs

@@ -39,13 +39,11 @@ impl<S: 'static + Send + Sync> PlayerStack<S> {
             .gap_px()
             .justify_center()
             .child(
-                div().flex().justify_center().w_full().child(
-                    div()
-                        .w_4()
-                        .h_0p5()
-                        .rounded_sm()
-                        .fill(player.cursor_color(cx)),
-                ),
+                div()
+                    .flex()
+                    .justify_center()
+                    .w_full()
+                    .child(div().w_4().h_0p5().rounded_sm().bg(player.cursor_color(cx))),
             )
             .child(
                 div()
@@ -55,7 +53,7 @@ impl<S: 'static + Send + Sync> PlayerStack<S> {
                     .h_6()
                     .pl_1()
                     .rounded_lg()
-                    .fill(if followers.is_none() {
+                    .bg(if followers.is_none() {
                         system_color.transparent
                     } else {
                         player.selection_color(cx)

crates/ui2/src/components/project_panel.rs

@@ -29,7 +29,7 @@ impl<S: 'static + Send + Sync + Clone> ProjectPanel<S> {
             .flex_col()
             .w_full()
             .h_full()
-            .fill(color.surface)
+            .bg(color.surface)
             .child(
                 div()
                     .w_full()

crates/ui2/src/components/status_bar.rs

@@ -96,7 +96,7 @@ impl StatusBar {
             .items_center()
             .justify_between()
             .w_full()
-            .fill(theme.lowest.base.default.background)
+            .bg(theme.lowest.base.default.background)
             .child(self.left_tools(view, &theme))
             .child(self.right_tools(view, &theme))
     }

crates/ui2/src/components/tab.rs

@@ -102,7 +102,7 @@ impl<S: 'static + Send + Sync + Clone> Tab<S> {
             .flex()
             .items_center()
             .justify_center()
-            .fill(if self.current {
+            .bg(if self.current {
                 theme.highest.base.default.background
             } else {
                 theme.middle.base.default.background
@@ -157,7 +157,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 git_statuses = GitStatus::iter();
             let fs_statuses = FileSystemStatus::iter();
 

crates/ui2/src/components/tab_bar.rs

@@ -31,7 +31,7 @@ impl<S: 'static + Send + Sync + Clone> TabBar<S> {
         div()
             .w_full()
             .flex()
-            .fill(theme.middle.base.default.background)
+            .bg(theme.middle.base.default.background)
             // Left Side
             .child(
                 div()
@@ -105,7 +105,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::<_, TabBar<S>>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/terminal.rs

@@ -32,7 +32,7 @@ impl<S: 'static + Send + Sync + Clone> Terminal<S> {
                 div()
                     .w_full()
                     .flex()
-                    .fill(theme.middle.base.default.background)
+                    .bg(theme.middle.base.default.background)
                     .child(
                         div().px_1().flex().flex_none().gap_2().child(
                             div()

crates/ui2/src/components/title_bar.rs

@@ -108,7 +108,7 @@ impl TitleBar {
             .justify_between()
             .w_full()
             .h_8()
-            .fill(theme.lowest.base.default.background)
+            .bg(theme.lowest.base.default.background)
             .child(
                 div()
                     .flex()

crates/ui2/src/components/toast.rs

@@ -56,7 +56,7 @@ impl<S: 'static + Send + Sync> Toast<S> {
             .rounded_lg()
             .shadow_md()
             .overflow_hidden()
-            .fill(color.elevated_surface)
+            .bg(color.elevated_surface)
             .children(self.children.drain(..))
     }
 }

crates/ui2/src/components/toolbar.rs

@@ -59,7 +59,7 @@ impl<S: 'static + Send + Sync> Toolbar<S> {
         let theme = theme(cx);
 
         div()
-            .fill(theme.highest.base.default.background)
+            .bg(theme.highest.base.default.background)
             .p_2()
             .flex()
             .justify_between()

crates/ui2/src/components/traffic_lights.rs

@@ -37,7 +37,7 @@ impl<S: 'static + Send + Sync> TrafficLight<S> {
             (false, _) => theme.lowest.base.active.background,
         };
 
-        div().w_3().h_3().rounded_full().fill(fill)
+        div().w_3().h_3().rounded_full().bg(fill)
     }
 }
 
@@ -104,7 +104,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::<_, TrafficLights<S>>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/workspace.rs

@@ -151,7 +151,7 @@ impl Workspace {
             .justify_start()
             .items_start()
             .text_color(theme.lowest.base.default.foreground)
-            .fill(theme.lowest.base.default.background)
+            .bg(theme.lowest.base.default.background)
             .child(self.title_bar.clone())
             .child(
                 div()

crates/ui2/src/elements/avatar.rs

@@ -39,7 +39,7 @@ impl<S: 'static + Send + Sync> Avatar<S> {
 
         img.uri(self.src.clone())
             .size_4()
-            .fill(theme.middle.warning.default.foreground)
+            .bg(theme.middle.warning.default.foreground)
     }
 }
 
@@ -64,7 +64,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::<_, Avatar<S>>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/elements/button.rs

@@ -162,7 +162,7 @@ impl<S: 'static + Send + Sync + Clone> Button<S> {
             .rounded_md()
             .border()
             .border_color(border_color)
-            .fill(self.background_color(cx));
+            .bg(self.background_color(cx));
 
         match (self.icon, self.icon_position) {
             (Some(_), Some(IconPosition::Left)) => {

crates/ui2/src/elements/input.rs

@@ -87,11 +87,11 @@ impl<S: 'static + Send + Sync> Input<S> {
             .px_2()
             .border()
             .border_color(border_color_default)
-            .fill(background_color_default)
+            .bg(background_color_default)
             .hover(|style| {
                 style
                     .border_color(border_color_hover)
-                    .fill(background_color_active)
+                    .bg(background_color_active)
             })
             // .active(|a| .border_color(border_color_active))
             .flex()

crates/ui2/src/elements/label.rs

@@ -141,7 +141,7 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
                         .my_auto()
                         .w_full()
                         .h_px()
-                        .fill(LabelColor::Hidden.hsla(cx)),
+                        .bg(LabelColor::Hidden.hsla(cx)),
                 )
             })
             .children(runs.into_iter().map(|run| {
@@ -185,7 +185,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::<_, Label<S>>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/elements/tool_divider.rs

@@ -18,6 +18,6 @@ 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);
 
-        div().w_px().h_3().fill(theme.lowest.base.default.border)
+        div().w_px().h_3().bg(theme.lowest.base.default.border)
     }
 }

crates/ui2/src/story.rs

@@ -16,7 +16,7 @@ impl Story {
             .pt_2()
             .px_4()
             .font("Zed Mono Extended")
-            .fill(theme.lowest.base.default.background)
+            .bg(theme.lowest.base.default.background)
     }
 
     pub fn title<S: 'static + Send + Sync>(