dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme: Update default radius to 6px, and modal to 8px. (#995)

Browse source
This commit is contained in:
Jason Lee 2025-06-20 20:07:19 +08:00 committed by GitHub
parent fdeb46b293
commit 7360d2834d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 49 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
crates/story/src/title_bar.rs
View file

@ -290,10 +290,11 @@ impl Render for FontSizeSelector {
.label("Border Radius") .label("Border Radius")
.menu_with_check("8px", radius == 8, Box::new(SelectRadius(8))) .menu_with_check("8px", radius == 8, Box::new(SelectRadius(8)))
.menu_with_check( .menu_with_check(
"4px (default)", "6px (default)",
radius == 4, radius == 6,
Box::new(SelectRadius(4)), Box::new(SelectRadius(6)),
) )
.menu_with_check("4px", radius == 4, Box::new(SelectRadius(4)))
.menu_with_check("0px", radius == 0, Box::new(SelectRadius(0))) .menu_with_check("0px", radius == 0, Box::new(SelectRadius(0)))
.separator() .separator()
.label("Scrollbar") .label("Scrollbar")

17
crates/ui/src/checkbox.rs
View file

@ -100,15 +100,20 @@ impl Sizable for Checkbox {
impl RenderOnce for Checkbox { impl RenderOnce for Checkbox {
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement { 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 { 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), cx.theme().primary_foreground.opacity(0.5),
) )
} else { } 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( div().child(
self.base self.base
@ -139,8 +144,9 @@ impl RenderOnce for Checkbox {
.border_1() .border_1()
.border_color(color) .border_color(color)
.rounded(radius) .rounded(radius)
.when(cx.theme().shadow && !self.disabled, |this| this.shadow_sm())
.map(|this| match self.checked { .map(|this| match self.checked {
false => this.bg(cx.theme().transparent), false => this.bg(cx.theme().background),
_ => this.bg(color), _ => this.bg(color),
}) })
.child( .child(
@ -174,6 +180,9 @@ impl RenderOnce for Checkbox {
div() div()
.size_full() .size_full()
.text_color(cx.theme().foreground) .text_color(cx.theme().foreground)
.when(self.disabled, |this| {
this.text_color(cx.theme().muted_foreground)
})
.line_height(relative(1.)) .line_height(relative(1.))
.child(label), .child(label),
) )

3
crates/ui/src/modal.rs
View file

@ -353,7 +353,6 @@ impl RenderOnce for Modal {
let offset_top = px(layer_ix as f32 * 16.); let offset_top = px(layer_ix as f32 * 16.);
let y = self.margin_top.unwrap_or(view_size.height / 10.) + offset_top; let y = self.margin_top.unwrap_or(view_size.height / 10.) + offset_top;
let x = bounds.center().x - self.width / 2.; 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_right = px(24.);
let mut padding_left = px(24.); let mut padding_left = px(24.);
@ -397,7 +396,7 @@ impl RenderOnce for Modal {
.bg(cx.theme().background) .bg(cx.theme().background)
.border_1() .border_1()
.border_color(cx.theme().border) .border_color(cx.theme().border)
.rounded(border_radius) .rounded(cx.theme().radius_lg)
.shadow_xl() .shadow_xl()
.min_h_24() .min_h_24()
.py_6() .py_6()

12
crates/ui/src/notification.rs
View file

@ -266,17 +266,17 @@ impl Render for Notification {
.group("") .group("")
.occlude() .occlude()
.relative() .relative()
.w_96() .w_112()
.border_1() .border_1()
.border_color(cx.theme().border) .border_color(cx.theme().border)
.bg(cx.theme().popover) .bg(cx.theme().popover)
.rounded(cx.theme().radius * 1.5) .rounded(cx.theme().radius_lg)
.shadow_md() .shadow_md()
.py_3p5() .py_3p5()
.px_4() .px_4()
.gap_3() .gap_3()
.when_some(icon, |this, icon| { .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( .child(
v_flex() v_flex()
@ -294,7 +294,7 @@ impl Render for Notification {
}), }),
) )
.when_some(self.action_builder.clone(), |this, action_builder| { .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| { .when_some(self.on_click.clone(), |this, on_click| {
this.on_click(cx.listener(move |view, event, window, cx| { this.on_click(cx.listener(move |view, event, window, cx| {
@ -305,8 +305,8 @@ impl Render for Notification {
.child( .child(
h_flex() h_flex()
.absolute() .absolute()
.top_1() .top_3p5()
.right_1() .right_3p5()
.invisible() .invisible()
.group_hover("", |this| this.visible()) .group_hover("", |this| this.visible())
.child( .child(

24
crates/ui/src/radio.rs
View file

@ -75,10 +75,15 @@ impl ParentElement for Radio {
impl RenderOnce for Radio { impl RenderOnce for Radio {
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement { fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
let color = if self.disabled { let (border_color, bg) = if self.checked {
cx.theme().primary.opacity(0.5) (cx.theme().primary, cx.theme().primary)
} else { } 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 // wrap a flex to patch for let Radio display inline
@ -97,15 +102,19 @@ impl RenderOnce for Radio {
.flex_shrink_0() .flex_shrink_0()
.rounded_full() .rounded_full()
.border_1() .border_1()
.border_color(color) .border_color(border_color)
.when(self.checked, |this| this.bg(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( .child(
svg() svg()
.absolute() .absolute()
.top_px() .top_px()
.left_px() .left_px()
.size_3() .size_3()
.text_color(color) .text_color(bg)
.when(self.checked, |this| { .when(self.checked, |this| {
this.text_color(cx.theme().primary_foreground) this.text_color(cx.theme().primary_foreground)
}) })
@ -126,6 +135,9 @@ impl RenderOnce for Radio {
.size_full() .size_full()
.overflow_hidden() .overflow_hidden()
.line_height(relative(1.)) .line_height(relative(1.))
.when(self.disabled, |this| {
this.text_color(cx.theme().muted_foreground)
})
.child(label), .child(label),
) )
}) })

10
crates/ui/src/theme.rs
View file

@ -284,7 +284,7 @@ impl ThemeColor {
info_active: crate::sky_600(), info_active: crate::sky_600(),
info_hover: crate::sky_500().opacity(0.9), info_hover: crate::sky_500().opacity(0.9),
info_foreground: crate::sky_50(), 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: hsl(221.0, 83.0, 53.0),
link_active: hsl(221.0, 83.0, 53.0).darken(0.2), link_active: hsl(221.0, 83.0, 53.0).darken(0.2),
link_hover: hsl(221.0, 83.0, 53.0).lighten(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_active: crate::sky_900().darken(0.2),
info_foreground: crate::sky_50(), info_foreground: crate::sky_50(),
info_hover: crate::sky_900().opacity(0.8), 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: hsl(221.0, 83.0, 53.0),
link_active: hsl(221.0, 83.0, 53.0).darken(0.2), link_active: hsl(221.0, 83.0, 53.0).darken(0.2),
link_hover: hsl(221.0, 83.0, 53.0).lighten(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 mode: ThemeMode,
pub font_family: SharedString, pub font_family: SharedString,
pub font_size: Pixels, pub font_size: Pixels,
/// Radius for the general elements.
pub radius: Pixels, pub radius: Pixels,
/// Radius for the large elements, e.g.: Modal, Notification border radius.
pub radius_lg: Pixels,
pub shadow: bool, pub shadow: bool,
pub transparent: Hsla, pub transparent: Hsla,
/// Show the scrollbar mode, default: Scrolling /// Show the scrollbar mode, default: Scrolling
@ -645,7 +648,8 @@ impl From<ThemeColor> for Theme {
} else { } else {
"FreeMono".into() "FreeMono".into()
}, },
radius: px(4.), radius: px(6.),
radius_lg: px(8.),
shadow: true, shadow: true,
scrollbar_show: ScrollbarShow::default(), scrollbar_show: ScrollbarShow::default(),
tile_grid_size: px(8.), tile_grid_size: px(8.),