theme: Update default radius to 6px, and modal to 8px. (#995)
This commit is contained in:
Jason Lee
GitHub
parent
fdeb46b293
commit
7360d2834d
6 changed files with 49 additions and 24 deletions
|
|
@ -290,10 +290,11 @@ impl Render for FontSizeSelector {
|
|||
.label("Border Radius")
|
||||
.menu_with_check("8px", radius == 8, Box::new(SelectRadius(8)))
|
||||
.menu_with_check(
|
||||
"4px (default)",
|
||||
radius == 4,
|
||||
Box::new(SelectRadius(4)),
|
||||
"6px (default)",
|
||||
radius == 6,
|
||||
Box::new(SelectRadius(6)),
|
||||
)
|
||||
.menu_with_check("4px", radius == 4, Box::new(SelectRadius(4)))
|
||||
.menu_with_check("0px", radius == 0, Box::new(SelectRadius(0)))
|
||||
.separator()
|
||||
.label("Scrollbar")
|
||||
|
|
|
|||
|
|
@ -100,15 +100,20 @@ impl Sizable for Checkbox {
|
|||
|
||||
impl RenderOnce for Checkbox {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let border_color = if self.checked {
|
||||
cx.theme().primary
|
||||
} else {
|
||||
cx.theme().input
|
||||
};
|
||||
let (color, icon_color) = if self.disabled {
|
||||
(
|
||||
cx.theme().primary.opacity(0.5),
|
||||
border_color.opacity(0.5),
|
||||
cx.theme().primary_foreground.opacity(0.5),
|
||||
)
|
||||
} else {
|
||||
(cx.theme().primary, cx.theme().primary_foreground)
|
||||
(border_color, cx.theme().primary_foreground)
|
||||
};
|
||||
let radius = (cx.theme().radius / 2.).min(px(6.));
|
||||
let radius = cx.theme().radius.min(px(4.));
|
||||
|
||||
div().child(
|
||||
self.base
|
||||
|
|
@ -139,8 +144,9 @@ impl RenderOnce for Checkbox {
|
|||
.border_1()
|
||||
.border_color(color)
|
||||
.rounded(radius)
|
||||
.when(cx.theme().shadow && !self.disabled, |this| this.shadow_sm())
|
||||
.map(|this| match self.checked {
|
||||
false => this.bg(cx.theme().transparent),
|
||||
false => this.bg(cx.theme().background),
|
||||
_ => this.bg(color),
|
||||
})
|
||||
.child(
|
||||
|
|
@ -174,6 +180,9 @@ impl RenderOnce for Checkbox {
|
|||
div()
|
||||
.size_full()
|
||||
.text_color(cx.theme().foreground)
|
||||
.when(self.disabled, |this| {
|
||||
this.text_color(cx.theme().muted_foreground)
|
||||
})
|
||||
.line_height(relative(1.))
|
||||
.child(label),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -353,7 +353,6 @@ impl RenderOnce for Modal {
|
|||
let offset_top = px(layer_ix as f32 * 16.);
|
||||
let y = self.margin_top.unwrap_or(view_size.height / 10.) + offset_top;
|
||||
let x = bounds.center().x - self.width / 2.;
|
||||
let border_radius = (cx.theme().radius * 2.).min(px(20.));
|
||||
|
||||
let mut padding_right = px(24.);
|
||||
let mut padding_left = px(24.);
|
||||
|
|
@ -397,7 +396,7 @@ impl RenderOnce for Modal {
|
|||
.bg(cx.theme().background)
|
||||
.border_1()
|
||||
.border_color(cx.theme().border)
|
||||
.rounded(border_radius)
|
||||
.rounded(cx.theme().radius_lg)
|
||||
.shadow_xl()
|
||||
.min_h_24()
|
||||
.py_6()
|
||||
|
|
|
|||
|
|
@ -266,17 +266,17 @@ impl Render for Notification {
|
|||
.group("")
|
||||
.occlude()
|
||||
.relative()
|
||||
.w_96()
|
||||
.w_112()
|
||||
.border_1()
|
||||
.border_color(cx.theme().border)
|
||||
.bg(cx.theme().popover)
|
||||
.rounded(cx.theme().radius * 1.5)
|
||||
.rounded(cx.theme().radius_lg)
|
||||
.shadow_md()
|
||||
.py_3p5()
|
||||
.px_4()
|
||||
.gap_3()
|
||||
.when_some(icon, |this, icon| {
|
||||
this.child(div().absolute().top_3().left_4().child(icon))
|
||||
this.child(div().absolute().py_3p5().left_4().child(icon))
|
||||
})
|
||||
.child(
|
||||
v_flex()
|
||||
|
|
@ -294,7 +294,7 @@ impl Render for Notification {
|
|||
}),
|
||||
)
|
||||
.when_some(self.action_builder.clone(), |this, action_builder| {
|
||||
this.child(action_builder(window, cx).small().outline().mr_1())
|
||||
this.child(action_builder(window, cx).small().outline().mr_3p5())
|
||||
})
|
||||
.when_some(self.on_click.clone(), |this, on_click| {
|
||||
this.on_click(cx.listener(move |view, event, window, cx| {
|
||||
|
|
@ -305,8 +305,8 @@ impl Render for Notification {
|
|||
.child(
|
||||
h_flex()
|
||||
.absolute()
|
||||
.top_1()
|
||||
.right_1()
|
||||
.top_3p5()
|
||||
.right_3p5()
|
||||
.invisible()
|
||||
.group_hover("", |this| this.visible())
|
||||
.child(
|
||||
|
|
|
|||
|
|
@ -75,10 +75,15 @@ impl ParentElement for Radio {
|
|||
|
||||
impl RenderOnce for Radio {
|
||||
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let color = if self.disabled {
|
||||
cx.theme().primary.opacity(0.5)
|
||||
let (border_color, bg) = if self.checked {
|
||||
(cx.theme().primary, cx.theme().primary)
|
||||
} else {
|
||||
cx.theme().primary
|
||||
(cx.theme().input, cx.theme().input.opacity(0.3))
|
||||
};
|
||||
let (border_color, bg) = if self.disabled {
|
||||
(border_color.opacity(0.5), bg.opacity(0.5))
|
||||
} else {
|
||||
(border_color, bg)
|
||||
};
|
||||
|
||||
// wrap a flex to patch for let Radio display inline
|
||||
|
|
@ -97,15 +102,19 @@ impl RenderOnce for Radio {
|
|||
.flex_shrink_0()
|
||||
.rounded_full()
|
||||
.border_1()
|
||||
.border_color(color)
|
||||
.when(self.checked, |this| this.bg(color))
|
||||
.border_color(border_color)
|
||||
.when(cx.theme().shadow && !self.disabled, |this| this.shadow_sm())
|
||||
.map(|this| match self.checked {
|
||||
false => this.bg(cx.theme().background),
|
||||
_ => this.bg(bg),
|
||||
})
|
||||
.child(
|
||||
svg()
|
||||
.absolute()
|
||||
.top_px()
|
||||
.left_px()
|
||||
.size_3()
|
||||
.text_color(color)
|
||||
.text_color(bg)
|
||||
.when(self.checked, |this| {
|
||||
this.text_color(cx.theme().primary_foreground)
|
||||
})
|
||||
|
|
@ -126,6 +135,9 @@ impl RenderOnce for Radio {
|
|||
.size_full()
|
||||
.overflow_hidden()
|
||||
.line_height(relative(1.))
|
||||
.when(self.disabled, |this| {
|
||||
this.text_color(cx.theme().muted_foreground)
|
||||
})
|
||||
.child(label),
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -284,7 +284,7 @@ impl ThemeColor {
|
|||
info_active: crate::sky_600(),
|
||||
info_hover: crate::sky_500().opacity(0.9),
|
||||
info_foreground: crate::sky_50(),
|
||||
input: hsl(240.0, 5.9, 90.0),
|
||||
input: hsl(0.0, 0.09, 88.),
|
||||
link: hsl(221.0, 83.0, 53.0),
|
||||
link_active: hsl(221.0, 83.0, 53.0).darken(0.2),
|
||||
link_hover: hsl(221.0, 83.0, 53.0).lighten(0.2),
|
||||
|
|
@ -383,7 +383,7 @@ impl ThemeColor {
|
|||
info_active: crate::sky_900().darken(0.2),
|
||||
info_foreground: crate::sky_50(),
|
||||
info_hover: crate::sky_900().opacity(0.8),
|
||||
input: hsl(240.0, 3.7, 15.9),
|
||||
input: hsl(0.0, 0.0, 100.).opacity(0.15),
|
||||
link: hsl(221.0, 83.0, 53.0),
|
||||
link_active: hsl(221.0, 83.0, 53.0).darken(0.2),
|
||||
link_hover: hsl(221.0, 83.0, 53.0).lighten(0.2),
|
||||
|
|
@ -460,7 +460,10 @@ pub struct Theme {
|
|||
pub mode: ThemeMode,
|
||||
pub font_family: SharedString,
|
||||
pub font_size: Pixels,
|
||||
/// Radius for the general elements.
|
||||
pub radius: Pixels,
|
||||
/// Radius for the large elements, e.g.: Modal, Notification border radius.
|
||||
pub radius_lg: Pixels,
|
||||
pub shadow: bool,
|
||||
pub transparent: Hsla,
|
||||
/// Show the scrollbar mode, default: Scrolling
|
||||
|
|
@ -645,7 +648,8 @@ impl From<ThemeColor> for Theme {
|
|||
} else {
|
||||
"FreeMono".into()
|
||||
},
|
||||
radius: px(4.),
|
||||
radius: px(6.),
|
||||
radius_lg: px(8.),
|
||||
shadow: true,
|
||||
scrollbar_show: ScrollbarShow::default(),
|
||||
tile_grid_size: px(8.),
|
||||
|
|
|
|||
Loading…
Reference in a new issue