Rename fill to bg

This commit is contained in:
Antonio Scandurra 2023-10-18 09:39:23 +02:00
parent 597a9f9548
commit 296a2b8e5d
35 changed files with 136 additions and 106 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -37,7 +37,7 @@ impl<S: 'static + Send + Sync> TrafficLight<S> {
(false, _) => theme.lowest.base.active.background, (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) Story::container(cx)
.child(Story::title_for::<_, TrafficLights<S>>(cx)) .child(Story::title_for::<_, TrafficLights<S>>(cx))
.child(Story::label(cx, "Default")) .child(Story::label(cx, "Default"))

View file

@ -151,7 +151,7 @@ impl Workspace {
.justify_start() .justify_start()
.items_start() .items_start()
.text_color(theme.lowest.base.default.foreground) .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(self.title_bar.clone())
.child( .child(
div() div()

View file

@ -39,7 +39,7 @@ impl<S: 'static + Send + Sync> Avatar<S> {
img.uri(self.src.clone()) img.uri(self.src.clone())
.size_4() .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) Story::container(cx)
.child(Story::title_for::<_, Avatar<S>>(cx)) .child(Story::title_for::<_, Avatar<S>>(cx))
.child(Story::label(cx, "Default")) .child(Story::label(cx, "Default"))

View file

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

View file

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

View file

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

View file

@ -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> { fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
let theme = theme(cx); 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)
} }
} }

View file

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