theme: Ensure all elements to use radius.

crates/story/src/dropdown_story.rs

@@ -259,7 +259,7 @@ impl Render for DropdownStory {
                     .w_full()
                     .items_center()
                     .p_10()
-                    .rounded_lg()
+                    .rounded(cx.theme().radius)
                     .bg(cx.theme().card)
                     .border_1()
                     .border_color(cx.theme().border)

crates/story/src/lib.rs

@@ -237,7 +237,7 @@ pub fn section(title: impl IntoElement, cx: &App) -> Div {
         .gap_4()
         .p_4()
         .w_full()
-        .rounded_lg()
+        .rounded(cx.theme().radius)
         .border_1()
         .border_color(theme.border)
         .flex_wrap()

crates/story/src/list_story.rs

@@ -128,7 +128,7 @@ impl RenderOnce for CompanyListItem {
                             .child(
                                 h_flex().w(px(65.)).justify_end().child(
                                     div()
-                                        .rounded_md()
+                                        .rounded(cx.theme().radius)
                                         .whitespace_nowrap()
                                         .text_size(px(12.))
                                         .px_1()
@@ -428,7 +428,7 @@ impl Render for ListStory {
                     .w_full()
                     .border_1()
                     .border_color(cx.theme().border)
-                    .rounded_md()
+                    .rounded(cx.theme().radius)
                     .child(self.company_list.clone()),
             )
     }

crates/story/src/modal_story.rs

@@ -324,7 +324,7 @@ impl ModalStory {
                     div()
                         .border_1()
                         .border_color(cx.theme().border)
-                        .rounded_md()
+                        .rounded(cx.theme().radius)
                         .size_full()
                         .flex_1()
                         .h(list_h)

crates/story/src/progress_story.rs

@@ -11,7 +11,7 @@ use ui::{
     progress::Progress,
     skeleton::Skeleton,
     slider::{Slider, SliderEvent},
-    v_flex, Colorize as _, ContextModal, IconName, Sizable,
+    v_flex, ActiveTheme as _, Colorize as _, ContextModal, IconName, Sizable,
 };
 
 pub struct ProgressStory {
@@ -271,7 +271,7 @@ impl Render for ProgressStory {
                                 h_flex()
                                     .w_32()
                                     .p_1()
-                                    .rounded_lg()
+                                    .rounded(cx.theme().radius)
                                     .justify_center()
                                     .bg(self.slider_hsl_value)
                                     .child(rgb.clone())

crates/story/src/sidebar_story.rs

@@ -200,7 +200,7 @@ impl Render for SidebarStory {
         ];
 
         h_flex()
-            .rounded_md()
+            .rounded(cx.theme().radius)
             .border_1()
             .border_color(cx.theme().border)
             .h_full()
@@ -216,7 +216,7 @@ impl Render for SidebarStory {
                                     .flex()
                                     .items_center()
                                     .justify_center()
-                                    .rounded_md()
+                                    .rounded(cx.theme().radius)
                                     .bg(ui::blue_500())
                                     .text_color(ui::white())
                                     .size_8()

crates/story/src/switch_story.rs

@@ -84,7 +84,7 @@ impl Render for SwitchStory {
                 .gap_4()
                 .p_4()
                 .w_full()
-                .rounded_lg()
+                .rounded(cx.theme().radius)
                 .border_1()
                 .border_color(theme.border)
         }

crates/story/src/title_bar.rs

@@ -1,7 +1,7 @@
 use std::rc::Rc;
 
 use gpui::{
-    div, AnyElement, App, AppContext, ClickEvent, Context, Corner, Entity, FocusHandle, Hsla,
+    div, px, AnyElement, App, AppContext, ClickEvent, Context, Corner, Entity, FocusHandle, Hsla,
     InteractiveElement as _, IntoElement, MouseButton, ParentElement as _, Render, SharedString,
     Styled as _, Window,
 };
@@ -226,7 +226,7 @@ impl FontSizeSelector {
         window: &mut Window,
         cx: &mut Context<Self>,
     ) {
-        Theme::global_mut(cx).font_size = font_size.0 as f32;
+        Theme::global_mut(cx).font_size = px(font_size.0 as f32);
         window.refresh();
     }
 
@@ -236,7 +236,7 @@ impl FontSizeSelector {
         window: &mut Window,
         cx: &mut Context<Self>,
     ) {
-        Theme::global_mut(cx).radius = radius.0 as f32;
+        Theme::global_mut(cx).radius = px(radius.0 as f32);
         window.refresh();
     }
 
@@ -254,8 +254,8 @@ impl FontSizeSelector {
 impl Render for FontSizeSelector {
     fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let focus_handle = self.focus_handle.clone();
-        let font_size = cx.theme().font_size as i32;
-        let radius = cx.theme().radius as i32;
+        let font_size = cx.theme().font_size.0 as i32;
+        let radius = cx.theme().radius.0 as i32;
         let scroll_show = cx.theme().scrollbar_show;
 
         div()
@@ -278,7 +278,6 @@ impl Render for FontSizeSelector {
                         .menu_with_check("Font Default", font_size == 16, Box::new(SelectFont(16)))
                         .menu_with_check("Font Small", font_size == 14, Box::new(SelectFont(14)))
                         .separator()
-                        .menu_with_check("Radius 16px", radius == 16, Box::new(SelectRadius(16)))
                         .menu_with_check("Radius 8px", radius == 8, Box::new(SelectRadius(8)))
                         .menu_with_check(
                             "Radius 4px (default)",

crates/ui/src/accordion.rs

@@ -223,7 +223,9 @@ impl RenderOnce for AccordionItem {
             .bg(cx.theme().accordion)
             .overflow_hidden()
             .when(self.bordered, |this| {
-                this.border_1().border_color(cx.theme().border).rounded_md()
+                this.border_1()
+                    .border_color(cx.theme().border)
+                    .rounded(cx.theme().radius)
             })
             .text_size(text_size)
             .child(

crates/ui/src/button/button.rs

@@ -3,8 +3,8 @@ use crate::{
     Selectable, Sizable, Size,
 };
 use gpui::{
-    div, prelude::FluentBuilder as _, px, relative, AnyElement, App, ClickEvent, Corners, Div,
-    Edges, ElementId, Hsla, InteractiveElement, IntoElement, MouseButton, ParentElement, Pixels,
+    div, prelude::FluentBuilder as _, relative, AnyElement, App, ClickEvent, Corners, Div, Edges,
+    ElementId, Hsla, InteractiveElement, IntoElement, MouseButton, ParentElement, Pixels,
     RenderOnce, SharedString, StatefulInteractiveElement as _, Styled, Window,
 };
 
@@ -359,19 +359,19 @@ impl RenderOnce for Button {
             .when(
                 self.border_corners.top_left && self.border_corners.bottom_left,
                 |this| match self.rounded {
-                    ButtonRounded::Small => this.rounded_l(px(cx.theme().radius * 0.5)),
-                    ButtonRounded::Medium => this.rounded_l(px(cx.theme().radius)),
-                    ButtonRounded::Large => this.rounded_l(px(cx.theme().radius * 2.0)),
+                    ButtonRounded::Small => this.rounded_l(cx.theme().radius * 0.5),
+                    ButtonRounded::Medium => this.rounded_l(cx.theme().radius),
+                    ButtonRounded::Large => this.rounded_l(cx.theme().radius * 2.0),
                     ButtonRounded::Size(px) => this.rounded_l(px),
                     ButtonRounded::None => this.rounded_none(),
                 },
             )
             .when(
                 self.border_corners.top_right && self.border_corners.bottom_right,
                 |this| match self.rounded {
-                    ButtonRounded::Small => this.rounded_r(px(cx.theme().radius * 0.5)),
-                    ButtonRounded::Medium => this.rounded_r(px(cx.theme().radius)),
-                    ButtonRounded::Large => this.rounded_r(px(cx.theme().radius * 2.0)),
+                    ButtonRounded::Small => this.rounded_r(cx.theme().radius * 0.5),
+                    ButtonRounded::Medium => this.rounded_r(cx.theme().radius),
+                    ButtonRounded::Large => this.rounded_r(cx.theme().radius * 2.0),
                     ButtonRounded::Size(px) => this.rounded_r(px),
                     ButtonRounded::None => this.rounded_none(),
                 },

crates/ui/src/checkbox.rs

@@ -1,6 +1,6 @@
 use crate::{h_flex, v_flex, ActiveTheme, Disableable, IconName, Selectable};
 use gpui::{
-    div, prelude::FluentBuilder as _, relative, svg, App, ElementId, InteractiveElement,
+    div, prelude::FluentBuilder as _, px, relative, svg, App, ElementId, InteractiveElement,
     IntoElement, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement as _,
     Styled as _, Window,
 };
@@ -69,6 +69,7 @@ impl RenderOnce for Checkbox {
         } else {
             (cx.theme().primary, cx.theme().primary_foreground)
         };
+        let radius = (cx.theme().radius / 2.).min(px(6.));
 
         // wrap a flex to patch for let Checkbox display inline
         div().flex().child(
@@ -82,7 +83,7 @@ impl RenderOnce for Checkbox {
                         .relative()
                         .border_1()
                         .border_color(color)
-                        .rounded_sm()
+                        .rounded(radius)
                         .size_4()
                         .flex_shrink_0()
                         .map(|this| match self.checked {

crates/ui/src/color_picker.rs

@@ -260,7 +260,7 @@ impl ColorPicker {
                                 .border_1()
                                 .border_color(hovered_color.darken(0.2))
                                 .size_5()
-                                .rounded(px(cx.theme().radius)),
+                                .rounded(cx.theme().radius),
                         )
                         .child(self.color_input.clone()),
                 )
@@ -320,7 +320,7 @@ impl Render for ColorPicker {
                             .bg(cx.theme().background)
                             .border_1()
                             .border_color(cx.theme().input)
-                            .rounded(px(cx.theme().radius))
+                            .rounded(cx.theme().radius)
                             .bg(cx.theme().background)
                             .shadow_sm()
                             .overflow_hidden()
@@ -359,12 +359,12 @@ impl Render for ColorPicker {
                                     })
                                     .w_72()
                                     .overflow_hidden()
-                                    .rounded_lg()
+                                    .rounded(cx.theme().radius)
                                     .p_3()
                                     .border_1()
                                     .border_color(cx.theme().border)
                                     .shadow_lg()
-                                    .rounded_lg()
+                                    .rounded(cx.theme().radius)
                                     .bg(cx.theme().background)
                                     .on_mouse_up_out(
                                         MouseButton::Left,

crates/ui/src/dock/tab_panel.rs

@@ -55,7 +55,7 @@ impl Render for DragPanel {
             .whitespace_nowrap()
             .border_1()
             .border_color(cx.theme().border)
-            .rounded_md()
+            .rounded(cx.theme().radius)
             .text_color(cx.theme().tab_foreground)
             .bg(cx.theme().tab_active)
             .opacity(0.75)

crates/ui/src/dropdown.rs

@@ -608,6 +608,7 @@ where
         let bounds = self.bounds;
         let allow_open = !(self.open || self.disabled);
         let outline_visible = self.open || is_focused && !self.disabled;
+        let popup_radius = cx.theme().radius.min(px(8.));
 
         // If the size has change, set size to self.list, to change the QueryInput size.
         if self.list.read(cx).size != self.size {
@@ -636,7 +637,7 @@ where
                     .bg(cx.theme().background)
                     .border_1()
                     .border_color(cx.theme().input)
-                    .rounded(px(cx.theme().radius))
+                    .rounded(cx.theme().radius)
                     .when(cx.theme().shadow, |this| this.shadow_sm())
                     .map(|this| {
                         if self.disabled {
@@ -726,7 +727,7 @@ where
                                         .bg(cx.theme().background)
                                         .border_1()
                                         .border_color(cx.theme().border)
-                                        .rounded(px(cx.theme().radius))
+                                        .rounded(popup_radius)
                                         .shadow_md()
                                         .on_mouse_down_out(|_, _, cx| {
                                             cx.dispatch_action(&Escape);

crates/ui/src/input/input.rs

@@ -1619,7 +1619,7 @@ impl Render for TextInput {
                 })
                 .border_color(cx.theme().input)
                 .border_1()
-                .rounded(px(cx.theme().radius))
+                .rounded(cx.theme().radius)
                 .when(cx.theme().shadow, |this| this.shadow_sm())
                 .when(focused, |this| this.outline(cx))
             })

crates/ui/src/input/number_input.rs

@@ -178,7 +178,7 @@ impl Render for NumberInput {
             .bg(cx.theme().background)
             .border_color(cx.theme().input)
             .border_1()
-            .rounded_md()
+            .rounded(cx.theme().radius)
             .when(focused, |this| this.outline(cx))
             .child(
                 Button::new("minus")

crates/ui/src/input/otp_input.rs

@@ -233,7 +233,7 @@ impl Render for OtpInput {
                     .when(cx.theme().shadow, |this| this.shadow_sm())
                     .items_center()
                     .justify_center()
-                    .rounded_md()
+                    .rounded(cx.theme().radius)
                     .text_size(text_size)
                     .map(|this| match self.size {
                         Size::XSmall => this.w_6().h_6(),

crates/ui/src/modal.rs

@@ -112,11 +112,13 @@ pub(crate) fn overlay_color(overlay: bool, _: &Window, cx: &App) -> Hsla {
 
 impl Modal {
     pub fn new(_: &mut Window, cx: &mut App) -> Self {
+        let radius = (cx.theme().radius * 2.).min(px(20.));
+
         let base = v_flex()
             .bg(cx.theme().background)
             .border_1()
             .border_color(cx.theme().border)
-            .rounded_lg()
+            .rounded(radius)
             .shadow_xl()
             .min_h_24()
             .p_4()

crates/ui/src/notification.rs

@@ -224,7 +224,7 @@ impl Render for Notification {
             .border_1()
             .border_color(cx.theme().border)
             .bg(cx.theme().popover)
-            .rounded_md()
+            .rounded(cx.theme().radius)
             .shadow_md()
             .py_2()
             .px_4()

crates/ui/src/popup_menu.rs

@@ -521,6 +521,7 @@ impl Render for PopupMenu {
         );
 
         const ITEM_HEIGHT: Pixels = px(26.);
+        let item_radius = cx.theme().radius.min(px(8.));
 
         v_flex()
             .id("popup-menu")
@@ -573,7 +574,7 @@ impl Render for PopupMenu {
                                             .text_sm()
                                             .py_0()
                                             .px_1()
-                                            .rounded_md()
+                                            .rounded(item_radius)
                                             .items_center()
                                             .on_mouse_enter(cx.listener(move |this, _, _, cx| {
                                                 this.hovered_menu_ix = Some(ix);

crates/ui/src/progress.rs

@@ -27,7 +27,8 @@ impl Progress {
 
 impl RenderOnce for Progress {
     fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
-        let rounded = px(self.height / 2.);
+        // Match the theme radius, if theme radius is zero use it.
+        let radius = px(self.height / 2.).min(cx.theme().radius);
         let relative_w = relative(match self.value {
             v if v < 0. => 0.,
             v if v > 100. => 1.,
@@ -37,7 +38,7 @@ impl RenderOnce for Progress {
         div()
             .relative()
             .h(px(self.height))
-            .rounded(rounded)
+            .rounded(radius)
             .bg(cx.theme().progress_bar.opacity(0.2))
             .child(
                 div()
@@ -48,8 +49,8 @@ impl RenderOnce for Progress {
                     .w(relative_w)
                     .bg(cx.theme().progress_bar)
                     .map(|this| match self.value {
-                        v if v >= 100. => this.rounded(rounded),
-                        _ => this.rounded_l(rounded),
+                        v if v >= 100. => this.rounded(radius),
+                        _ => this.rounded_l(radius),
                     }),
             )
     }

crates/ui/src/sidebar/footer.rs

@@ -63,7 +63,7 @@ impl RenderOnce for SidebarFooter {
             .w_full()
             .justify_between()
             .cursor_pointer()
-            .rounded_md()
+            .rounded(cx.theme().radius)
             .hover(|this| {
                 this.bg(cx.theme().sidebar_accent)
                     .text_color(cx.theme().sidebar_accent_foreground)

crates/ui/src/sidebar/group.rs

@@ -53,7 +53,7 @@ impl<E: Collapsible + IntoElement> RenderOnce for SidebarGroup<E> {
                     div()
                         .flex_shrink_0()
                         .px_2()
-                        .rounded_md()
+                        .rounded(cx.theme().radius)
                         .text_xs()
                         .text_color(cx.theme().sidebar_foreground.opacity(0.7))
                         .h_8()