diff --git a/crates/ui/src/acp_panel.rs b/crates/ui/src/acp_panel.rs index 2ebe7fec0..f8976f4b3 100644 --- a/crates/ui/src/acp_panel.rs +++ b/crates/ui/src/acp_panel.rs @@ -238,7 +238,7 @@ impl Render for AcpAgentCard { let agent = self.store.read(cx).installed_acp_agent(&self.agent_id); v_flex() .w_full() - .rounded(material::radius_card()) + .rounded(material::radius_card(cx)) .bg(cx.theme().secondary) .overflow_hidden() .when_some(agent, |card, agent| { @@ -500,7 +500,7 @@ impl AcpPanel { .flex_1() .min_h_0() .relative() - .rounded(material::radius_card()) + .rounded(material::radius_card(cx)) .bg(cx.theme().muted) .child(rows) .when(!window.is_inspector_picking(cx), |rows| { @@ -549,7 +549,7 @@ impl AcpPanel { .p_3() .gap_3() .items_center() - .rounded(material::radius_card()) + .rounded(material::radius_card(cx)) .bg(cx.theme().muted) .child(glyph.text_color(if enabled { cx.theme().foreground @@ -639,7 +639,7 @@ impl AcpPanel { .id(id) .px_3() .py_1p5() - .rounded(material::radius_button()) + .rounded(material::radius_button(cx)) .cursor_pointer() .when(active, |s| s.bg(cx.theme().accent).font_medium()) .hover(|s| s.bg(cx.theme().accent)) diff --git a/crates/ui/src/add_project_dialog.rs b/crates/ui/src/add_project_dialog.rs index 66c8c05f8..d8c8a27d5 100644 --- a/crates/ui/src/add_project_dialog.rs +++ b/crates/ui/src/add_project_dialog.rs @@ -63,7 +63,7 @@ pub(super) fn open(store: Entity, window: &mut Window, cx: &mut let dialog_content = content.clone(); builder .w(px(680.)) - .rounded(crate::material::radius_overlay()) + .rounded(crate::material::radius_overlay(cx)) .bg(cx.theme().popover) .border_1() .border_color(cx.theme().border) @@ -236,7 +236,7 @@ impl AddProjectDialog { let progress_content = content.clone(); builder .w(px(480.)) - .rounded(crate::material::radius_overlay()) + .rounded(crate::material::radius_overlay(cx)) .bg(cx.theme().popover) .border_1() .border_color(cx.theme().border) @@ -299,7 +299,7 @@ impl AddProjectDialog { .gap_1() .px_3() .py_2() - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .text_size(px(13.)) .cursor_pointer() .hover(|style| style.bg(cx.theme().list_hover)) @@ -374,12 +374,12 @@ impl Render for AddProjectDialog { .child( Input::new(&self.path_input) .flex_1() - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ) .when(can_browse, |row| { row.child( Button::new("browse-project-directory") - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .label(crate::tr!("sidebar.browse")) .on_click(cx.listener(|dialog, _, window, cx| { dialog.browse_clicked(window, cx); @@ -515,7 +515,7 @@ impl Render for ImportProgress { .child( h_flex().w_full().justify_end().child( Button::new("external-import-ok") - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .primary() .label(crate::tr!("sidebar.import_ok")) .on_click(move |_, window, cx| { @@ -533,13 +533,13 @@ impl Render for ImportProgress { fn render_add_footer( dialog: &Entity, _window: &mut Window, - _cx: &mut App, + cx: &mut App, ) -> AnyElement { let open = dialog.clone(); DialogActions::new() .child( Button::new("add-project-cancel") - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .label(crate::tr!("sidebar.cancel")) .on_click(move |_, window, cx| { window.close_dialog(cx); @@ -547,7 +547,7 @@ fn render_add_footer( ) .child( Button::new("add-project-open") - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .primary() .label(crate::tr!("sidebar.open")) .on_click(move |_, window, cx| { diff --git a/crates/ui/src/attachments.rs b/crates/ui/src/attachments.rs index d7f32403a..444197718 100644 --- a/crates/ui/src/attachments.rs +++ b/crates/ui/src/attachments.rs @@ -20,9 +20,10 @@ pub(crate) fn open_image_lightbox( // Leave room for the dialog header, padding and bottom margin in short windows. let max_h = (viewport.height * 0.75).min(viewport.height * 0.9 - px(96.)); let source = source.clone(); + let image_radius = crate::material::radius_card(cx); builder .w(px(1200.)) - .rounded(crate::material::radius_overlay()) + .rounded(crate::material::radius_overlay(cx)) .bg(cx.theme().popover) .border_1() .border_color(cx.theme().border) @@ -34,7 +35,7 @@ pub(crate) fn open_image_lightbox( img(source.clone()) .max_w_full() .max_h(max_h) - .rounded(crate::material::radius_card()), + .rounded(image_radius), ), ) }) diff --git a/crates/ui/src/chat/components/activity.rs b/crates/ui/src/chat/components/activity.rs index c4d4c5c89..0177c01d1 100644 --- a/crates/ui/src/chat/components/activity.rs +++ b/crates/ui/src/chat/components/activity.rs @@ -167,7 +167,7 @@ pub(crate) fn activity_row( move || format!("activity-row-{id}") }) .aria_expanded(expanded) - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .cursor_pointer() .hover(|row| row.bg(cx.theme().accent)) .on_click(on_toggle) diff --git a/crates/ui/src/chat/components/assistant.rs b/crates/ui/src/chat/components/assistant.rs index e83ac6794..f692bfb9a 100644 --- a/crates/ui/src/chat/components/assistant.rs +++ b/crates/ui/src/chat/components/assistant.rs @@ -163,7 +163,7 @@ pub(crate) fn action_button( Button::new(id.into()) .ghost() .small() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .icon(Icon::new(icon).text_color(cx.theme().muted_foreground)) .tooltip(label.into()) } diff --git a/crates/ui/src/chat/components/bubble.rs b/crates/ui/src/chat/components/bubble.rs index ba90c46a5..9ac71f028 100644 --- a/crates/ui/src/chat/components/bubble.rs +++ b/crates/ui/src/chat/components/bubble.rs @@ -79,7 +79,7 @@ pub(crate) fn native_rewind_button( .disabled(disabled) .when(compact, |button| button.min_w(px(44.)).min_h(px(44.))); Some( - crate::material::overlay_popover(("rewind-menu", turn)) + crate::material::overlay_popover(("rewind-menu", turn), cx) .anchor(Anchor::TopRight) .when(compact, |popover| { popover.bottom_sheet(crate::tr!("chat.rewind")) @@ -129,7 +129,7 @@ pub(crate) fn native_rewind_button( .py_1p5() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .text_size(px(13.)) .hover(move |style| style.bg(accent)) @@ -248,7 +248,7 @@ pub(crate) fn user_bubble( .mb(px(-2.)) .flex() .items_center() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .bg(cx.theme().muted) .text_size(px(11.)) .text_color(cx.theme().muted_foreground) @@ -268,7 +268,7 @@ pub(crate) fn user_bubble( .max_w_3_4() .px(px(10.)) .py(px(6.)) - .rounded(px(12.)) + .rounded(cx.theme().tokens.radius.lg) .bg(cx.theme().foreground.opacity(0.08)) .when(pending, |bubble| { bubble diff --git a/crates/ui/src/chat/components/changed_files.rs b/crates/ui/src/chat/components/changed_files.rs index 741d0c711..cd5b52d48 100644 --- a/crates/ui/src/chat/components/changed_files.rs +++ b/crates/ui/src/chat/components/changed_files.rs @@ -118,7 +118,7 @@ pub(crate) fn changed_files( .px_2() .gap_1() .items_center() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .border_1() .border_color(cx.theme().border) .bg(crate::material::content_surface(cx)) @@ -184,7 +184,7 @@ pub(crate) fn quiet_control( .h(px(22.)) .px_1p5() .items_center() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .text_size(px(11.5)) .text_color(cx.theme().muted_foreground) .cursor_pointer() @@ -251,7 +251,7 @@ pub(crate) fn file_edit_row( cx, ) .aria_expanded(expanded) - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .cursor_pointer() .hover(|header| header.bg(cx.theme().accent)) .on_click(on_toggle) diff --git a/crates/ui/src/chat/components/disclosure.rs b/crates/ui/src/chat/components/disclosure.rs index af0cb8ae4..e6df4ff64 100644 --- a/crates/ui/src/chat/components/disclosure.rs +++ b/crates/ui/src/chat/components/disclosure.rs @@ -79,7 +79,7 @@ pub(crate) fn disclosure( .px_1p5() .gap_1p5() .items_center() - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .text_size(px(11.)) .text_color(muted) .cursor_pointer() @@ -108,7 +108,7 @@ fn disclosure_body(key: &str, full_text: &str, cx: &App) -> Div { let muted = cx.theme().muted_foreground; div() .w_full() - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .bg(cx.theme().muted) // The card keeps clicks to itself, but a pan that its body cannot use // must still reach the timeline behind it. @@ -276,7 +276,7 @@ pub(crate) fn proposed_plan_card( h_flex() .w_full() .items_stretch() - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .overflow_hidden() .bg(cx.theme().muted.opacity(0.6)) .child( diff --git a/crates/ui/src/chat/components/error_card.rs b/crates/ui/src/chat/components/error_card.rs index 7f3e23553..b25ad2d1b 100644 --- a/crates/ui/src/chat/components/error_card.rs +++ b/crates/ui/src/chat/components/error_card.rs @@ -125,7 +125,7 @@ pub(crate) fn error_card( h_flex() .w_full() .items_stretch() - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .overflow_hidden() .border_1() .border_color(danger.opacity(0.22)) diff --git a/crates/ui/src/chat/components/subagent.rs b/crates/ui/src/chat/components/subagent.rs index ffd21b19b..66ec66ecc 100644 --- a/crates/ui/src/chat/components/subagent.rs +++ b/crates/ui/src/chat/components/subagent.rs @@ -65,7 +65,7 @@ pub(crate) fn subagent_row( .px_2() .gap_1() .items_center() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .bg(cx.theme().success.opacity(0.12)) .text_color(cx.theme().success) .text_size(px(11.5)) @@ -77,7 +77,7 @@ pub(crate) fn subagent_row( .px_2() .gap_1() .items_center() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .bg(cx.theme().warning.opacity(0.12)) .text_color(cx.theme().warning) .text_size(px(11.5)) @@ -93,7 +93,7 @@ pub(crate) fn subagent_row( .px_2() .gap_1() .items_center() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .bg(cx.theme().danger.opacity(0.12)) .text_color(cx.theme().danger) .text_size(px(11.5)) @@ -124,7 +124,7 @@ pub(crate) fn subagent_row( div() .flex_none() .px_2() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .bg(cx.theme().muted.opacity(0.4)) .text_color(muted) .font_family(cx.theme().mono_font_family.clone()) diff --git a/crates/ui/src/chat/components/work_log.rs b/crates/ui/src/chat/components/work_log.rs index ab55b6d0f..9887feb06 100644 --- a/crates/ui/src/chat/components/work_log.rs +++ b/crates/ui/src/chat/components/work_log.rs @@ -75,7 +75,7 @@ pub(crate) fn work_log( .px_1p5() .gap_1p5() .items_center() - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .text_size(px(12.5)) .font_medium() .text_color(muted) @@ -102,7 +102,7 @@ pub(crate) fn work_log( .px_2() .gap_1() .items_center() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .bg(cx.theme().danger.opacity(0.12)) .text_color(cx.theme().danger) .text_size(px(11.5)) diff --git a/crates/ui/src/chat/mod.rs b/crates/ui/src/chat/mod.rs index 2f4d3ee60..a05c74965 100644 --- a/crates/ui/src/chat/mod.rs +++ b/crates/ui/src/chat/mod.rs @@ -2487,7 +2487,7 @@ impl ChatView { // ChatView entity (the popover content runs at App level, not in a view // context, so `cx.listener` is unavailable here). let chat = cx.entity(); - let chevron = crate::material::overlay_popover("git-menu") + let chevron = crate::material::overlay_popover("git-menu", cx) .anchor(Anchor::TopRight) .trigger( Button::new("git-menu-trigger") @@ -2515,7 +2515,7 @@ impl ChatView { .py_1p5() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .text_size(px(13.)) .child(git_action_icon(action).xsmall().text_color(muted)) .child(div().flex_1().child(label)); @@ -2548,7 +2548,7 @@ impl ChatView { .flex_none() .h(px(28.)) .items_center() - .rounded(px(8.)) + .rounded(cx.theme().tokens.radius.md) .border_1() .border_color(border) .overflow_hidden() @@ -2606,7 +2606,7 @@ impl ChatView { let main_cwd = cwd.clone(); let menu_cwd = cwd; - let chevron = crate::material::overlay_popover("open-menu") + let chevron = crate::material::overlay_popover("open-menu", cx) .anchor(Anchor::TopRight) .trigger( Button::new("open-menu-trigger") @@ -2632,7 +2632,7 @@ impl ChatView { .py_1p5() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .text_size(px(13.)) .hover(move |s| s.bg(accent)) @@ -2688,7 +2688,7 @@ impl ChatView { .h(px(28.)) .on_mouse_down(gpui::MouseButton::Left, |_, _, cx| cx.stop_propagation()) .items_center() - .rounded(px(8.)) + .rounded(cx.theme().tokens.radius.md) .border_1() .border_color(border) .overflow_hidden() @@ -2853,7 +2853,7 @@ impl ChatView { .items_center() .gap_2() .px_3() - .rounded(cx.theme().radius) + .rounded(cx.theme().tokens.radius.md) .cursor_pointer() .hover(|row| row.bg(cx.theme().accent)) .on_click(cx.listener(move |this, _, _, cx| { @@ -2925,7 +2925,7 @@ impl ChatView { // The outline button's bg is ~transparent; an opaque popover // backing keeps the pill readable over the chat text below. div() - .rounded(cx.theme().radius) + .rounded(cx.theme().tokens.radius.md) .bg(cx.theme().popover) .shadow_md() .child( @@ -3227,7 +3227,7 @@ impl Render for ChatView { CONTENT_MIN_PADDING })) .when(this.highlighted_turn == Some(row.turn), |item| { - item.rounded(crate::material::radius_card()) + item.rounded(crate::material::radius_card(cx)) .bg(cx.theme().list_active) }) .when(index == 0, |item| item.pt(px(TIMELINE_EDGE_PADDING))) @@ -3343,7 +3343,7 @@ impl Render for ChatView { .px(px(10.)) .py(px(6.)) .text_size(px(15.)) - .rounded(px(12.)) + .rounded(cx.theme().tokens.radius.lg) .bg(cx.theme().foreground.opacity(0.08)) .text_color(if acknowledged { cx.theme().foreground diff --git a/crates/ui/src/commit_dialog.rs b/crates/ui/src/commit_dialog.rs index 27a4fafed..82af740d6 100644 --- a/crates/ui/src/commit_dialog.rs +++ b/crates/ui/src/commit_dialog.rs @@ -240,7 +240,7 @@ impl Render for CommitDialog { .w_full() .p_3() .gap_2() - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .border_1() .border_color(cx.theme().warning) .bg(cx.theme().warning.opacity(0.08)) @@ -313,7 +313,7 @@ impl Render for CommitDialog { v_flex().w_full().gap_1().child(files_header).child( div() .w_full() - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .border_1() .border_color(cx.theme().border) .pt_1() @@ -337,7 +337,7 @@ impl Render for CommitDialog { ) .child( Button::new("commit-regenerate") - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .ghost() .xsmall() .icon(IconName::Undo) @@ -356,14 +356,14 @@ impl Render for CommitDialog { .w_full() .gap_1() .child(message_header) - .child(Textarea::new(&self.message).rounded(crate::material::radius_input())), + .child(Textarea::new(&self.message).rounded(crate::material::radius_input(cx))), ); crate::material::overlay_contour( div() .w_full() .min_w(px(520.)) - .rounded(crate::material::radius_overlay()), + .rounded(crate::material::radius_overlay(cx)), cx, ) .child(body) diff --git a/crates/ui/src/composer/components/approval.rs b/crates/ui/src/composer/components/approval.rs index 769076a27..e0d4b2fe1 100644 --- a/crates/ui/src/composer/components/approval.rs +++ b/crates/ui/src/composer/components/approval.rs @@ -48,7 +48,7 @@ impl Composer { .max_h(px(240.)) .overflow_y_scroll_area() .p_2() - .rounded(px(8.)) + .rounded(cx.theme().tokens.radius.md) .bg(detail_bg) .child(content) .into_any_element() @@ -79,7 +79,7 @@ impl Composer { div() .debug_selector(|| "approval-detail".into()) .w_full() - .rounded(px(8.)) + .rounded(cx.theme().tokens.radius.md) .bg(detail_bg) .child( crate::scroll::VirtualList::measured( @@ -135,7 +135,7 @@ impl Composer { .w_full() .gap_2() .p(px(14.)) - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .border_1() .border_color(cx.theme().border) .bg(cx.theme().popover) @@ -245,7 +245,7 @@ impl Composer { .flex_none() }) .disabled(!self.interactive(cx) || pending) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .label(option.label.clone()) .on_click(cx.listener(move |this, _, _, cx| { this.respond( @@ -298,7 +298,7 @@ impl Composer { .small() .h(px(28.)) .disabled(!interactive) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .label(crate::tr!("approval.cancel_turn")) .text_color(cx.theme().muted_foreground) .on_click(cx.listener(move |this, _, _, cx| { @@ -311,7 +311,7 @@ impl Composer { .small() .h(px(28.)) .disabled(!interactive) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .label(if compact { crate::tr!("mobile.deny") } else { @@ -328,7 +328,7 @@ impl Composer { .small() .h(px(28.)) .disabled(!interactive) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .label(if compact { crate::tr!("mobile.always_allow") } else { @@ -348,7 +348,7 @@ impl Composer { .small() .h(px(28.)) .disabled(!interactive) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .label(if compact { crate::tr!("mobile.allow") } else { diff --git a/crates/ui/src/composer/components/checkout.rs b/crates/ui/src/composer/components/checkout.rs index 51eda83ab..132189143 100644 --- a/crates/ui/src/composer/components/checkout.rs +++ b/crates/ui/src/composer/components/checkout.rs @@ -54,7 +54,7 @@ impl Composer { .child(picker_current.clone()) .child(Icon::new(IconName::ChevronDown).xsmall().text_color(muted)), ); - crate::material::overlay_popover("branch-popover") + crate::material::overlay_popover("branch-popover", cx) .anchor(Anchor::BottomRight) .trigger(trigger) .on_open_change(move |open, _window, cx| { @@ -189,7 +189,7 @@ impl Composer { .child(label) .child(Icon::new(IconName::ChevronDown).xsmall().text_color(muted)), ); - crate::material::overlay_popover("workspace-popover") + crate::material::overlay_popover("workspace-popover", cx) .anchor(Anchor::BottomLeft) .trigger(trigger) .content(move |_state, _window, cx| { @@ -209,7 +209,7 @@ impl Composer { .py_1p5() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .text_size(px(13.)) .hover(|s| s.bg(cx.theme().muted)) @@ -293,7 +293,7 @@ fn branch_row( .py_1p5() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .text_size(px(13.)) .hover(|s| s.bg(cx.theme().muted)) diff --git a/crates/ui/src/composer/components/fallback.rs b/crates/ui/src/composer/components/fallback.rs index 347fcec9f..8e37b09bf 100644 --- a/crates/ui/src/composer/components/fallback.rs +++ b/crates/ui/src/composer/components/fallback.rs @@ -74,7 +74,7 @@ impl Composer { cx, ) .size(px(22.)) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .flex() .items_center() .justify_center() @@ -102,7 +102,7 @@ impl Composer { .outline() .small() .h(px(28.)) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .label(crate::tr!("fallback.edit_retry")) .on_click(cx.listener(move |this, _, _, cx| { this.workspace_store.update(cx, |store, _cx| { @@ -119,7 +119,7 @@ impl Composer { .primary() .small() .h(px(28.)) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .label(crate::tr!("fallback.retry_on", model = model.clone())) .on_click(cx.listener(move |this, _, window, cx| { this.workspace_store.update(cx, |store, _cx| { @@ -139,7 +139,7 @@ impl Composer { .w_full() .gap_2() .p(px(14.)) - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .border_1() .border_color(cx.theme().border) .bg(cx.theme().popover) @@ -213,7 +213,7 @@ impl Composer { cx, ) .size(px(22.)) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .flex() .items_center() .justify_center() @@ -239,7 +239,7 @@ impl Composer { .gap_2() .px_2() .py_1() - .rounded(px(8.)) + .rounded(cx.theme().tokens.radius.md) .border_1() .border_color(cx.theme().input) .bg(cx.theme().popover) @@ -259,7 +259,7 @@ impl Composer { cx, ) .size(px(28.)) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .flex() .items_center() .justify_center() @@ -298,7 +298,7 @@ impl Composer { .w_full() .gap_2() .p(px(14.)) - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .border_1() .border_color(cx.theme().border) .bg(cx.theme().popover) diff --git a/crates/ui/src/composer/components/images.rs b/crates/ui/src/composer/components/images.rs index f518683df..b367dcb54 100644 --- a/crates/ui/src/composer/components/images.rs +++ b/crates/ui/src/composer/components/images.rs @@ -470,14 +470,14 @@ impl Composer { .items_center() .pl(px(2.)) .pr_1() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .overflow_hidden() .bg(cx.theme().secondary) .cursor_pointer() .child( img(crate::store::host_image(path)) .size(px(18.)) - .rounded(crate::material::radius_chip()), + .rounded(crate::material::radius_chip(cx)), ) .child( div() @@ -498,7 +498,7 @@ impl Composer { .flex() .items_center() .justify_center() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .cursor_pointer() .hover(|s| s.bg(cx.theme().muted)) .child( diff --git a/crates/ui/src/composer/components/pickers.rs b/crates/ui/src/composer/components/pickers.rs index f58ce5f54..587a21d01 100644 --- a/crates/ui/src/composer/components/pickers.rs +++ b/crates/ui/src/composer/components/pickers.rs @@ -209,7 +209,7 @@ impl Composer { .h(px(28.)) .when(self.compact, |button| button.min_h(px(44.)).min_w(px(44.))) .disabled(!self.interactive(cx)) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .child( h_flex() .when(self.compact || store.native_subagent_readonly(), |el| { @@ -241,7 +241,7 @@ impl Composer { // field asks for the keyboard. let search_focus = (!crate::window_seam::is_mobile(cx)) .then(|| self.model_search.read(cx).focus_handle(cx)); - crate::material::overlay_popover(("model-picker-popover", self.model_picker_token)) + crate::material::overlay_popover(("model-picker-popover", self.model_picker_token), cx) .when_some(search_focus, |popover, focus| popover.track_focus(&focus)) .anchor(Anchor::BottomLeft) .when(self.compact, |popover| { @@ -362,7 +362,7 @@ impl Composer { .h(px(28.)) .when(self.compact, |button| button.min_h(px(44.)).min_w(px(44.))) .disabled(!self.interactive(cx)) - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .child( h_flex() .gap_1p5() @@ -376,7 +376,7 @@ impl Composer { let store_entity = self.workspace_store.clone(); let composer_entity = cx.entity(); let context_window_custom = self.context_window_custom.clone(); - crate::material::overlay_popover("traits-popover") + crate::material::overlay_popover("traits-popover", cx) .anchor(Anchor::BottomLeft) .when(self.compact, |popover| { popover.bottom_sheet(crate::tr!("mobile.model")) @@ -435,7 +435,7 @@ impl Composer { .h(px(28.)) .when(self.compact, |button| button.min_h(px(44.)).min_w(px(44.))) .disabled(!self.interactive(cx)) - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .tooltip(tooltip) .child( h_flex() @@ -480,14 +480,14 @@ impl Composer { .h(px(28.)) .when(self.compact, |button| button.min_h(px(44.)).min_w(px(44.))) .disabled(!self.interactive(cx)) - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .child(div().size(px(16.)).child(crate::widgets::ring::ring_canvas( pct.unwrap_or(0.0), ring_color, track, ))); - crate::material::overlay_popover("context-popover") + crate::material::overlay_popover("context-popover", cx) .anchor(Anchor::BottomLeft) .when(self.compact, |popover| { popover.bottom_sheet(crate::tr!("composer.context_window_title")) @@ -517,7 +517,7 @@ impl Composer { .h(px(28.)) .when(self.compact, |button| button.min_h(px(44.)).min_w(px(44.))) .disabled(!self.interactive(cx)) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .child( h_flex() .min_w_0() @@ -534,7 +534,7 @@ impl Composer { let store_entity = self.workspace_store.clone(); let compact = self.compact; let pending_restart = composer.approval_pending_restart; - crate::material::overlay_popover("permission-popover") + crate::material::overlay_popover("permission-popover", cx) .anchor(Anchor::BottomLeft) .when(self.compact, |popover| { popover.bottom_sheet(crate::tr!("mobile.approval_mode")) @@ -569,7 +569,7 @@ impl Composer { .aria_label(crate::tr!("attach.add").into_owned()) .child(Icon::new(IconName::Plus).small().text_color(muted)); - crate::material::overlay_popover("attach-popover") + crate::material::overlay_popover("attach-popover", cx) .anchor(Anchor::BottomLeft) .bottom_sheet(crate::tr!("attach.add")) .trigger(trigger) @@ -590,7 +590,7 @@ impl Composer { .py_1p5() .gap_1p5() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .text_size(px(13.)) .text_color(muted) @@ -629,7 +629,7 @@ impl Composer { .tooltip(crate::tr!("composer.more_controls")) .child(Icon::new(IconName::Ellipsis).small().text_color(muted)); - crate::material::overlay_popover("overflow-popover") + crate::material::overlay_popover("overflow-popover", cx) .anchor(Anchor::BottomLeft) .when(self.compact, |popover| { popover.bottom_sheet(crate::tr!("composer.more_controls")) @@ -682,7 +682,7 @@ fn render_model_pane( crate::material::tab(id, label.clone(), active, cx) .flex_none() .size(px(if compact { 44. } else { 28. })) - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .when(active, |s| s.bg(cx.theme().muted)) .hover(|s| s.bg(cx.theme().muted)) .tooltip(move |window, cx| { @@ -870,7 +870,7 @@ fn render_model_pane( .when(composer.read(cx).compact, |pane| pane.w_full()) .h(px(360.)) .items_stretch() - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .overflow_hidden() .on_key_down(move |ev, window, cx| { if !ev.keystroke.modifiers.secondary() { @@ -1074,7 +1074,7 @@ fn render_model_row( .py_1() .gap_2() .items_center() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .cursor_pointer() .when(is_current, |row| row.bg(cx.theme().list_active)) .hover(|s| s.bg(cx.theme().muted)) @@ -1147,7 +1147,7 @@ fn render_model_row( .flex_none() .px_1() .py(px(1.)) - .rounded(px(4.)) + .rounded(cx.theme().tokens.radius.sm) .border_1() .border_color(cx.theme().border) .text_size(px(11.)) @@ -1176,7 +1176,7 @@ fn render_model_row( .items_center() .justify_center() }) - .rounded(px(4.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .hover(|s| s.bg(cx.theme().accent)) .child( @@ -1262,7 +1262,7 @@ fn render_permission_pane( .py_1() .gap_2() .items_start() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .when(is_current, |row| row.bg(cx.theme().list_active)) .when(is_disabled, |row| row.opacity(0.55)) .when(!is_disabled, |row| { @@ -1449,7 +1449,7 @@ fn render_traits_pane( .py_1p5() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .text_size(px(13.)) .hover(|s| s.bg(cx.theme().muted)) @@ -1499,7 +1499,7 @@ fn render_traits_pane( .py_1p5() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .text_size(px(13.)) .hover(|s| s.bg(cx.theme().muted)) @@ -1561,7 +1561,7 @@ fn render_traits_pane( .py_1p5() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .text_size(px(13.)) .hover(|s| s.bg(cx.theme().muted)) @@ -1712,7 +1712,7 @@ fn render_overflow_pane( .py_1p5() .gap_1p5() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .text_size(px(13.)) .text_color(muted) .child(icon.small().text_color(muted)) @@ -1751,7 +1751,7 @@ fn render_overflow_pane( .py_1p5() .gap_1p5() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .text_size(px(13.)) .text_color(muted) @@ -1997,7 +1997,7 @@ mod sheet_tests { let store = self.store.clone(); let context = self.context; div().size_full().p_4().child( - crate::material::overlay_popover("picker-regression") + crate::material::overlay_popover("picker-regression", cx) .when(compact, |popover| popover.bottom_sheet("Details")) .trigger( Button::new("open") diff --git a/crates/ui/src/composer/components/plan.rs b/crates/ui/src/composer/components/plan.rs index ffdd17c08..d14e17f65 100644 --- a/crates/ui/src/composer/components/plan.rs +++ b/crates/ui/src/composer/components/plan.rs @@ -19,7 +19,7 @@ impl Composer { let fg = cx.theme().primary_foreground; let store_main = self.workspace_store.clone(); - let chevron = crate::material::overlay_popover("implement-menu") + let chevron = crate::material::overlay_popover("implement-menu", cx) .anchor(Anchor::TopRight) .trigger( Button::new("implement-menu-trigger") @@ -42,7 +42,7 @@ impl Composer { .py_1p5() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .text_size(px(13.)) .hover(|s| s.bg(cx.theme().muted)) @@ -75,7 +75,7 @@ impl Composer { .flex_none() .h(px(32.)) .items_center() - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .bg(primary) .text_color(fg) .overflow_hidden() diff --git a/crates/ui/src/composer/components/trigger_menu.rs b/crates/ui/src/composer/components/trigger_menu.rs index 6f2c2f69d..bf04da43e 100644 --- a/crates/ui/src/composer/components/trigger_menu.rs +++ b/crates/ui/src/composer/components/trigger_menu.rs @@ -325,7 +325,7 @@ impl Composer { .role(Role::ListBox) .aria_label(crate::tr!("composer.trigger_results")) .w_full() - .rounded(crate::material::radius_overlay()) + .rounded(crate::material::radius_overlay(cx)) .border_1() .border_color(cx.theme().border) .bg(cx.theme().popover) @@ -373,7 +373,7 @@ fn render_menu_row( .px_2() .gap_2() .items_center() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .cursor_pointer() .when(is_active, |s| s.bg(cx.theme().list_active)) .hover(|s| s.bg(cx.theme().muted)) diff --git a/crates/ui/src/composer/components/user_input.rs b/crates/ui/src/composer/components/user_input.rs index 599a1c228..bb95aa744 100644 --- a/crates/ui/src/composer/components/user_input.rs +++ b/crates/ui/src/composer/components/user_input.rs @@ -99,7 +99,7 @@ impl Composer { .rounded(if multi { px(5.) } else { - crate::material::radius_input() + crate::material::radius_input(cx) }) .border_1() .border_color(if is_selected { primary } else { muted }) @@ -117,7 +117,7 @@ impl Composer { .py_1() .gap_2() .items_start() - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .cursor_pointer() .when(is_selected, |s| s.bg(cx.theme().list_active)) .hover(|s| s.bg(cx.theme().muted)) @@ -179,7 +179,7 @@ impl Composer { .gap_2() .px_2() .py_1() - .rounded(px(8.)) + .rounded(cx.theme().tokens.radius.md) .border_1() .border_color(cx.theme().input) .bg(cx.theme().popover) @@ -199,7 +199,7 @@ impl Composer { cx, ) .size(px(if self.compact { 44. } else { 28. })) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .flex() .items_center() .justify_center() @@ -241,7 +241,7 @@ impl Composer { .small() .h(px(28.)) .when(self.compact, |button| button.min_h(px(44.)).min_w(px(44.))) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .label(crate::tr!("userinput.previous")) .on_click(cx.listener(move |this, _, window, cx| { this.ui_go(-1, &questions_previous, window, cx) @@ -257,7 +257,7 @@ impl Composer { .small() .h(px(28.)) .when(self.compact, |button| button.min_h(px(44.)).min_w(px(44.))) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .label(crate::tr!("userinput.next_question")) .on_click(cx.listener(move |this, _, window, cx| { this.ui_go(1, &questions_next, window, cx) @@ -271,7 +271,7 @@ impl Composer { .small() .h(px(28.)) .when(self.compact, |button| button.min_h(px(44.)).min_w(px(44.))) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .label(crate::tr!("userinput.done")) .on_click(cx.listener(move |this, _, window, cx| { this.ui_submit(&questions_submit, request_submit.clone(), window, cx); @@ -307,7 +307,7 @@ impl Composer { .w_full() .gap_2() .p(px(14.)) - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .border_1() .border_color(cx.theme().border) .bg(cx.theme().popover) @@ -498,7 +498,7 @@ impl Composer { .gap_2() .px_3() .py_1p5() - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .border_1() .border_color(cx.theme().border) .bg(cx.theme().secondary) @@ -528,7 +528,7 @@ impl Composer { .when(is_selected, |button| button.primary()) .when(!is_selected, |button| button.outline()) .when(self.compact, |button| button.min_h(px(touch))) - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .label(option.label.clone()) .on_click(cx.listener(move |this, _, window, cx| { this.ui_toggle_option(&question_for_click, label.clone(), cx); @@ -548,7 +548,7 @@ impl Composer { .items_center() .gap_2() .pl_2() - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .border_1() .border_color(cx.theme().input) .bg(cx.theme().background) diff --git a/crates/ui/src/composer/components/voice.rs b/crates/ui/src/composer/components/voice.rs index f08d5e9c6..c26f03518 100644 --- a/crates/ui/src/composer/components/voice.rs +++ b/crates/ui/src/composer/components/voice.rs @@ -100,7 +100,7 @@ impl Composer { .ghost() .compact() .h(px(28.)) - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .tooltip(tooltip) .child(if preparing { Spinner::new().small().color(color).into_any_element() diff --git a/crates/ui/src/composer/mod.rs b/crates/ui/src/composer/mod.rs index f64087d5d..474a3b33a 100644 --- a/crates/ui/src/composer/mod.rs +++ b/crates/ui/src/composer/mod.rs @@ -855,7 +855,7 @@ impl Composer { cx, ) .size(px(28.)) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .flex() .items_center() .justify_center() @@ -882,7 +882,7 @@ impl Composer { cx, ) .size(px(28.)) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .flex() .items_center() .justify_center() @@ -940,7 +940,7 @@ impl Composer { cx, ) .size(px(28.)) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .flex() .items_center() .justify_center() @@ -1167,7 +1167,7 @@ impl Render for Composer { .ghost() .small() .h(px(22.)) - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .text_size(px(11.5)) .font_family(cx.theme().mono_font_family.clone()) .label(format!("{} · {} ×", context.terminal_label, range)) @@ -1193,7 +1193,7 @@ impl Render for Composer { .ghost() .small() .h(px(22.)) - .rounded(crate::material::radius_chip()) + .rounded(crate::material::radius_chip(cx)) .text_size(px(11.5)) .font_family(cx.theme().mono_font_family.clone()) .label(format!("{} {} ×", comment.file, range)) @@ -1216,7 +1216,7 @@ impl Render for Composer { .rounded(if self.compact { px(16.) } else { - crate::material::radius_composer() + crate::material::radius_composer(cx) }) .border_1() .border_color(if composer_focused { diff --git a/crates/ui/src/diff/view.rs b/crates/ui/src/diff/view.rs index 5857d92c0..d69672874 100644 --- a/crates/ui/src/diff/view.rs +++ b/crates/ui/src/diff/view.rs @@ -700,7 +700,7 @@ impl DiffPanel { .h(px(28.)) .px_2p5() .gap_1p5() - .rounded(material::radius_button()) + .rounded(material::radius_button(cx)) .text_size(px(13.)) .font_medium() .when(is_active, |s| s.bg(tab_active)) @@ -914,7 +914,7 @@ impl DiffPanel { .px_2() .py_1() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .text_size(px(13.)) .cursor_pointer() .hover(|row| row.bg(cx.theme().list_hover)) @@ -1007,7 +1007,7 @@ impl DiffPanel { .border_1() .border_color(cx.theme().border) .shadow_xl() - .rounded(material::radius_overlay()); + .rounded(material::radius_overlay(cx)); let base_selector = (selected_scope == Some(DiffScope::Branch)).then(|| { @@ -1094,7 +1094,7 @@ impl DiffPanel { .border_1() .border_color(cx.theme().border) .shadow_xl() - .rounded(material::radius_overlay()) + .rounded(material::radius_overlay(cx)) .into_any_element() }); @@ -1525,7 +1525,7 @@ impl DiffPanel { .gap_2() .items_center() .bg(cx.theme().secondary) - .rounded(material::radius_card()) + .rounded(material::radius_card(cx)) .relative() .when_some(rail, |this, color| { this.child( @@ -1650,7 +1650,7 @@ impl DiffPanel { .gap_1p5() .items_start() .bg(cx.theme().warning.opacity(0.12)) - .rounded(material::radius_card()) + .rounded(material::radius_card(cx)) .text_size(px(11.)) .text_color(cx.theme().warning_foreground) .font_family(cx.theme().font_family.clone()) @@ -1699,7 +1699,7 @@ impl DiffPanel { .py_1p5() .gap_2() .relative() - .rounded(material::radius_card()) + .rounded(material::radius_card(cx)) .bg(cx.theme().muted) .font_family(cx.theme().font_family.clone()) .text_size(px(11.)) @@ -1734,7 +1734,7 @@ impl DiffPanel { .py_2() .gap_2() .bg(cx.theme().muted) - .rounded(material::radius_card()) + .rounded(material::radius_card(cx)) .font_family(cx.theme().font_family.clone()) .child(Input::new(input).appearance(false)) .child( @@ -1757,7 +1757,7 @@ impl DiffPanel { .px_3() .py_1() .bg(cx.theme().muted) - .rounded(material::radius_card()) + .rounded(material::radius_card(cx)) .font_family(cx.theme().font_family.clone()) .child( Button::new("diff-add-comment") @@ -1941,7 +1941,7 @@ fn turn_row( .py_1() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .text_size(px(13.)) .cursor_pointer() .hover(|s| s.bg(cx.theme().list_hover)) @@ -1990,7 +1990,7 @@ fn base_row( .w_full() .px_2() .py_1() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .hover(|row| row.bg(cx.theme().list_hover)) .when(selected, |row| row.bg(cx.theme().list_active)) diff --git a/crates/ui/src/host_permissions.rs b/crates/ui/src/host_permissions.rs index c2c8d2205..9564a7e39 100644 --- a/crates/ui/src/host_permissions.rs +++ b/crates/ui/src/host_permissions.rs @@ -98,6 +98,7 @@ impl Render for HostPermissions { crate::tr!(label), bg.opacity(0.12), fg, + cx, )), ); } diff --git a/crates/ui/src/local_permissions.rs b/crates/ui/src/local_permissions.rs index 4685405dc..cbcb41c8e 100644 --- a/crates/ui/src/local_permissions.rs +++ b/crates/ui/src/local_permissions.rs @@ -165,7 +165,7 @@ impl LocalPermissions { .flex_none() .gap_2() .items_center() - .child(crate::material::semantic_chip(chip, bg, fg)); + .child(crate::material::semantic_chip(chip, bg, fg, cx)); if !granted { controls = controls .child( @@ -218,7 +218,7 @@ impl LocalPermissions { .w_full() .items_center() .gap_3() - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .bg(cx.theme().warning.opacity(0.12)) .px_3() .py_2p5() diff --git a/crates/ui/src/markdown/image_link.rs b/crates/ui/src/markdown/image_link.rs index 53f6a7183..d71dabaa7 100644 --- a/crates/ui/src/markdown/image_link.rs +++ b/crates/ui/src/markdown/image_link.rs @@ -51,7 +51,7 @@ pub(super) fn badge( let hover = cx.theme().secondary_active; let tooltip_url = url.clone(); let badge = Button::new(("markdown-image-link", ix)) - .rounded(px(8.)) + .rounded(cx.theme().tokens.radius.md) .h(px(badge_height)) .px_2() .gap_1() diff --git a/crates/ui/src/markdown/render.rs b/crates/ui/src/markdown/render.rs index 2d1ab59b6..2ef1ccdc6 100644 --- a/crates/ui/src/markdown/render.rs +++ b/crates/ui/src/markdown/render.rs @@ -1043,7 +1043,7 @@ fn render_code_block( rendered_lines.push(line); offset = end.saturating_add(1); } - let radius = cx.theme().radius; + let radius = cx.theme().tokens.radius.md; div() .id(span_id(&options.path, &span)) .when(last && !options.is_last, |block| block.pb(rems(1.))) @@ -1207,7 +1207,7 @@ fn render_scroll_table( .w(px(total_width)) .border_1() .border_color(cx.theme().border) - .rounded(cx.theme().radius) + .rounded(cx.theme().tokens.radius.md) .overflow_hidden() .children(rows); #[cfg(test)] diff --git a/crates/ui/src/material.rs b/crates/ui/src/material.rs index a44744572..0d2880b58 100644 --- a/crates/ui/src/material.rs +++ b/crates/ui/src/material.rs @@ -68,39 +68,39 @@ pub fn content_surface(cx: &App) -> Hsla { } } -/// Popovers, menus, dialogs, toasts. -pub fn radius_overlay() -> Pixels { - px(10.) +/// Popovers, menus, dialogs, toasts: the theme's large-element radius. +pub fn radius_overlay(cx: &App) -> Pixels { + cx.theme().tokens.radius.lg } /// Cards, event cards, diff blocks. -pub fn radius_card() -> Pixels { - px(10.) +pub fn radius_card(cx: &App) -> Pixels { + cx.theme().tokens.radius.md } /// Plain inputs and button-group containers. -pub fn radius_input() -> Pixels { - px(8.) +pub fn radius_input(cx: &App) -> Pixels { + cx.theme().tokens.radius.md } /// Buttons. -pub fn radius_button() -> Pixels { - px(8.) +pub fn radius_button(cx: &App) -> Pixels { + cx.theme().tokens.radius.md } /// Chips and compact status badges. -pub fn radius_chip() -> Pixels { - px(6.) +pub fn radius_chip(cx: &App) -> Pixels { + cx.theme().tokens.radius.sm } /// Composer field corners. -pub fn radius_composer() -> Pixels { - px(14.) +pub fn radius_composer(cx: &App) -> Pixels { + cx.theme().tokens.radius.lg } /// The phone's bottom sheet, top corners only. -pub fn radius_overlay_sheet() -> Pixels { - px(16.) +pub fn radius_overlay_sheet(cx: &App) -> Pixels { + cx.theme().tokens.radius.xl } /// A T3 overlay popover: one panel surface at the overlay radius with the /// component library's large soft shadow. -pub fn overlay_popover(id: impl Into) -> Popover { - Popover::new(id).rounded(radius_overlay()).shadow_xl() +pub fn overlay_popover(id: impl Into, cx: &App) -> Popover { + Popover::new(id).rounded(radius_overlay(cx)).shadow_xl() } /// A 1px separator that fades out toward both ends, replacing full-bleed @@ -137,7 +137,7 @@ pub fn overlay_contour(el: Div, cx: &App) -> Div { pub fn group(cx: &App) -> Div { v_flex() .w_full() - .rounded(radius_card()) + .rounded(radius_card(cx)) .border_1() .border_color(cx.theme().border) .bg(cx.theme().popover) @@ -312,7 +312,7 @@ pub(crate) fn segmented_track( .flex_shrink_0() .gap(px(2.)) .p(px(3.)) - .rounded(px(10.)) + .rounded(cx.theme().tokens.radius.md) .bg(cx.theme().secondary) .children(segments), ) @@ -342,7 +342,7 @@ pub fn segment( // label's default line height gave it. .h(px(21.)) .px(px(6.)) - .rounded(px(8.)) + .rounded(cx.theme().tokens.radius.md) .cursor_pointer() .text_size(px(13.)) .text_color(cx.theme().muted_foreground) @@ -409,12 +409,12 @@ pub fn rail_detail(content: impl IntoElement, cx: &App) -> Div { ) } -pub fn semantic_chip(label: impl Into, bg: Hsla, fg: Hsla) -> Div { +pub fn semantic_chip(label: impl Into, bg: Hsla, fg: Hsla, cx: &App) -> Div { div() .flex_none() .px_2() .py(px(1.)) - .rounded(radius_chip()) + .rounded(radius_chip(cx)) .bg(bg) .text_size(px(11.)) .font_medium() @@ -499,14 +499,14 @@ pub fn loading_skeleton(cx: &gpui::App) -> gpui::AnyElement { div() .w(gpui::relative(0.7)) .h(px(14.)) - .rounded(px(4.)) + .rounded(cx.theme().tokens.radius.sm) .bg(cx.theme().secondary), ) .child( div() .w(gpui::relative(0.35)) .h(px(11.)) - .rounded(px(4.)) + .rounded(cx.theme().tokens.radius.sm) .bg(cx.theme().secondary), ) })) diff --git a/crates/ui/src/orchestrate_settings.rs b/crates/ui/src/orchestrate_settings.rs index 1767cc807..c50759609 100644 --- a/crates/ui/src/orchestrate_settings.rs +++ b/crates/ui/src/orchestrate_settings.rs @@ -480,7 +480,7 @@ impl OrchestrateSettingsPanel { ), ); let panel = cx.entity(); - let dropdown = crate::material::overlay_popover("orchestrate-child-approval-popover") + let dropdown = crate::material::overlay_popover("orchestrate-child-approval-popover", cx) .trigger(trigger) .content(move |_, _, cx| { let option = |mode: ChildApprovalMode, @@ -497,7 +497,7 @@ impl OrchestrateSettingsPanel { .py_1() .gap_2() .items_center() - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .text_size(px(13.)) .cursor_pointer() .hover(|style| style.bg(cx.theme().accent)) @@ -847,7 +847,7 @@ impl OrchestrateSettingsPanel { } else { crate::tr!("orchestrate.children.disabled") }; - crate::material::semantic_chip(label, bg, fg) + crate::material::semantic_chip(label, bg, fg, cx) }) .child( Switch::new(("orchestrate-child-enabled", index)) @@ -947,7 +947,7 @@ impl OrchestrateSettingsPanel { .child( Textarea::new(&row.description) .text_sm() - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ) .into_any_element(), ); diff --git a/crates/ui/src/overlay/dialog.rs b/crates/ui/src/overlay/dialog.rs index 2420e4a96..3ddd881f9 100644 --- a/crates/ui/src/overlay/dialog.rs +++ b/crates/ui/src/overlay/dialog.rs @@ -391,7 +391,7 @@ impl RenderOnce for Dialog { .bg(cx.theme().popover) .border_1() .border_color(cx.theme().border) - .rounded(crate::material::radius_overlay()) + .rounded(crate::material::radius_overlay(cx)) .shadow_xl() .occlude() .refine_style(&self.style) diff --git a/crates/ui/src/overlay/notification.rs b/crates/ui/src/overlay/notification.rs index 932d58a3a..affc1f20c 100644 --- a/crates/ui/src/overlay/notification.rs +++ b/crates/ui/src/overlay/notification.rs @@ -312,7 +312,7 @@ impl Render for Notification { .occlude() .w_full() .p_4() - .rounded(crate::material::radius_overlay()) + .rounded(crate::material::radius_overlay(cx)) .border_1() .border_color(cx.theme().border) .bg(cx.theme().popover) diff --git a/crates/ui/src/palette.rs b/crates/ui/src/palette.rs index deaacbb0a..1940814c0 100644 --- a/crates/ui/src/palette.rs +++ b/crates/ui/src/palette.rs @@ -647,7 +647,7 @@ impl CommandPalette { .px_2() .gap_2() .items_center() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .when(is_sel, |s| s.bg(cx.theme().list_active)) .when(!is_sel, |s| { @@ -786,10 +786,10 @@ impl Render for CommandPalette { }) .h(px(440.).min(available)) .when(compact, |card| { - card.rounded_t(crate::material::radius_overlay_sheet()) + card.rounded_t(crate::material::radius_overlay_sheet(cx)) }) .when(!compact, |card| { - card.rounded(crate::material::radius_overlay()) + card.rounded(crate::material::radius_overlay(cx)) }) .overflow_hidden(), cx, @@ -806,7 +806,7 @@ impl Render for CommandPalette { div().flex_1().child( Input::new(&self.query) .appearance(false) - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ), ), ) diff --git a/crates/ui/src/project_icon.rs b/crates/ui/src/project_icon.rs index 7ba078ff7..0ee9d22bb 100644 --- a/crates/ui/src/project_icon.rs +++ b/crates/ui/src/project_icon.rs @@ -223,7 +223,7 @@ impl Picker { .gap_1() .items_center() .justify_center() - .rounded(cx.theme().radius) + .rounded(cx.theme().tokens.radius.md) .border_1() .border_color(if is_selected { cx.theme().primary diff --git a/crates/ui/src/provider_card.rs b/crates/ui/src/provider_card.rs index efbdc586a..3ab5f75e7 100644 --- a/crates/ui/src/provider_card.rs +++ b/crates/ui/src/provider_card.rs @@ -260,7 +260,7 @@ impl ProviderCard { div() .id("reveal-email") .px_1() - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .cursor_pointer() .hover(|s| s.bg(cx.theme().accent)) .child(shown) @@ -302,7 +302,7 @@ impl ProviderCard { .and_then(|v| v.update_command_summary.clone()); let store = self.store.clone(); - crate::material::overlay_popover("update-popover") + crate::material::overlay_popover("update-popover", cx) .p_3() .trigger( Button::new("update-available") @@ -371,7 +371,7 @@ impl ProviderCard { .w_full() .gap_1() .items_center() - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .border_1() .border_color(cx.theme().border) .bg(cx.theme().muted) diff --git a/crates/ui/src/provider_dialog.rs b/crates/ui/src/provider_dialog.rs index 404d51466..1c7ee4f24 100644 --- a/crates/ui/src/provider_dialog.rs +++ b/crates/ui/src/provider_dialog.rs @@ -460,7 +460,7 @@ impl ProviderDialog { .into_owned() .into(), Input::new(&self.display_name) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .into_any_element(), cx, ), @@ -532,7 +532,7 @@ impl ProviderDialog { .into_owned() .into(), Input::new(&self.binary) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .into_any_element(), cx, ), @@ -544,7 +544,7 @@ impl ProviderDialog { crate::tr!(home_label).into_owned().into(), crate::tr!(home_help).into_owned().into(), Input::new(&self.home) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .into_any_element(), cx, ), @@ -575,7 +575,7 @@ impl ProviderDialog { crate::tr!("providers.launch_args").into_owned().into(), crate::tr!("providers.launch_args_help").into_owned().into(), Input::new(&self.launch_args) - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .into_any_element(), cx, ), @@ -644,37 +644,36 @@ impl ProviderDialog { ); } else { for (index, row) in self.env_rows.iter().enumerate() { - block = - block.child( - h_flex() - .w_full() - .gap_2() - .items_center() - .child(div().flex_1().min_w_0().child( - Input::new(&row.name).rounded(crate::material::radius_input()), - )) - .child(div().flex_1().min_w_0().child( - Input::new(&row.value).rounded(crate::material::radius_input()), - )) - .child( - Switch::new(("env-sensitive", index)) - .checked(row.sensitive) - .tooltip(crate::tr!("providers.env.sensitive")) - .on_click(cx.listener(move |this, _: &bool, window, cx| { - this.toggle_env_sensitive(index, window, cx); - })), - ) - .child( - Button::new(("env-remove", index)) - .ghost() - .xsmall() - .icon(IconName::Delete) - .tooltip(crate::tr!("providers.env.remove")) - .on_click(cx.listener(move |this, _, window, cx| { - this.remove_env_row(index, window, cx); - })), - ), - ); + block = block.child( + h_flex() + .w_full() + .gap_2() + .items_center() + .child(div().flex_1().min_w_0().child( + Input::new(&row.name).rounded(crate::material::radius_input(cx)), + )) + .child(div().flex_1().min_w_0().child( + Input::new(&row.value).rounded(crate::material::radius_input(cx)), + )) + .child( + Switch::new(("env-sensitive", index)) + .checked(row.sensitive) + .tooltip(crate::tr!("providers.env.sensitive")) + .on_click(cx.listener(move |this, _: &bool, window, cx| { + this.toggle_env_sensitive(index, window, cx); + })), + ) + .child( + Button::new(("env-remove", index)) + .ghost() + .xsmall() + .icon(IconName::Delete) + .tooltip(crate::tr!("providers.env.remove")) + .on_click(cx.listener(move |this, _, window, cx| { + this.remove_env_row(index, window, cx); + })), + ), + ); } } block @@ -717,11 +716,9 @@ impl ProviderDialog { .pt_2() .gap_2() .items_center() - .child( - div().flex_1().min_w_0().child( - Input::new(&self.custom_model).rounded(crate::material::radius_input()), - ), - ) + .child(div().flex_1().min_w_0().child( + Input::new(&self.custom_model).rounded(crate::material::radius_input(cx)), + )) .child( Button::new("add-custom-model") .outline() @@ -771,6 +768,7 @@ impl ProviderDialog { crate::tr!("providers.models.custom").into_owned(), cx.theme().info.opacity(0.12), cx.theme().info_foreground, + cx, )); } if hidden { @@ -778,6 +776,7 @@ impl ProviderDialog { crate::tr!("providers.models.hidden").into_owned(), cx.theme().warning.opacity(0.12), cx.theme().warning_foreground, + cx, )); } diff --git a/crates/ui/src/provider_model_picker.rs b/crates/ui/src/provider_model_picker.rs index 999234035..4bfda4943 100644 --- a/crates/ui/src/provider_model_picker.rs +++ b/crates/ui/src/provider_model_picker.rs @@ -219,7 +219,7 @@ impl ProviderModelPicker { impl Render for ProviderModelPicker { fn render(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement { let picker = cx.entity(); - crate::material::overlay_popover(self.popover_id) + crate::material::overlay_popover(self.popover_id, cx) .trigger(self.trigger(cx)) .content(move |_, window, cx| { let (profiles, selected_profile, selected, excluded) = { @@ -335,7 +335,7 @@ impl Render for ProviderModelPicker { .items_center() .justify_center() .gap_1p5() - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .cursor_pointer() .when(is_selected, |tab| tab.bg(cx.theme().accent).font_medium()) .hover(|tab| tab.bg(cx.theme().accent)) @@ -383,7 +383,7 @@ fn option_row( .py_1p5() .gap_2() .items_center() - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .cursor_pointer() .hover(|style| style.bg(cx.theme().accent)) .child(tinted_glyph(store, option.provider, option.profile_id.as_deref(), cx).small()) diff --git a/crates/ui/src/remote/hosted.rs b/crates/ui/src/remote/hosted.rs index 384df85ab..193c1b239 100644 --- a/crates/ui/src/remote/hosted.rs +++ b/crates/ui/src/remote/hosted.rs @@ -173,7 +173,7 @@ impl HostedPanel { }; row = row.p_3().gap_4().items_start().child(invitation); if let Some(link) = &state.invite { - row = row.children(super::qr::qr_element(link)); + row = row.children(super::qr::qr_element(link, cx)); } column = column.child(crate::material::group(cx).child(row)); } diff --git a/crates/ui/src/remote/hosting.rs b/crates/ui/src/remote/hosting.rs index 6be783fa8..3a476ef04 100644 --- a/crates/ui/src/remote/hosting.rs +++ b/crates/ui/src/remote/hosting.rs @@ -610,7 +610,7 @@ impl HostingPanel { .child( Input::new(&self.host_name_input) .small() - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ), ) .into_any_element(); @@ -687,7 +687,7 @@ impl HostingPanel { .child( Input::new(&self.traverse_url_input) .small() - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ), ) .into_any_element() @@ -813,7 +813,7 @@ pub(super) fn invitation_card( cx: &mut Context, ) -> AnyElement { let link = invitation.url(); - let qr = qr_element(&link); + let qr = qr_element(&link, cx); let text = v_flex() .flex_1() .min_w_0() diff --git a/crates/ui/src/remote/mod.rs b/crates/ui/src/remote/mod.rs index 8098f2f8a..e8856e748 100644 --- a/crates/ui/src/remote/mod.rs +++ b/crates/ui/src/remote/mod.rs @@ -771,7 +771,7 @@ impl RemotePanel { .child( Input::new(&self.form.invitation) .large() - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ), ) .children(self.attempt_status(cx)) diff --git a/crates/ui/src/remote/qr.rs b/crates/ui/src/remote/qr.rs index 2bc6dfc09..8a62c9384 100644 --- a/crates/ui/src/remote/qr.rs +++ b/crates/ui/src/remote/qr.rs @@ -1,4 +1,4 @@ -use gpui::{AnyElement, IntoElement as _, ParentElement as _, Styled as _, div, px}; +use gpui::{AnyElement, App, IntoElement as _, ParentElement as _, Styled as _, div, px}; use gpui_base::{h_flex, v_flex}; /// A QR code as `(width_in_modules, dark_module_flags)`, row-major. fn qr_modules(payload: &str) -> Option<(usize, Vec)> { @@ -15,7 +15,7 @@ fn qr_modules(payload: &str) -> Option<(usize, Vec)> { /// Paint the matrix as one flex row per module row, collapsing consecutive /// same-colour modules into a single box — a per-module element would be /// thousands of nodes repainting every countdown tick. -pub(super) fn qr_element(payload: &str) -> Option { +pub(super) fn qr_element(payload: &str, cx: &App) -> Option { const MODULE: f32 = 4.; const QUIET: f32 = 12.; let (width, modules) = qr_modules(payload)?; @@ -46,7 +46,7 @@ pub(super) fn qr_element(payload: &str) -> Option { div() .flex_none() .p(px(QUIET)) - .rounded(crate::material::radius_card()) + .rounded(crate::material::radius_card(cx)) .bg(gpui::white()) .child(grid) .into_any_element(), diff --git a/crates/ui/src/settings_page.rs b/crates/ui/src/settings_page.rs index bde898fca..e604fe5a4 100644 --- a/crates/ui/src/settings_page.rs +++ b/crates/ui/src/settings_page.rs @@ -842,7 +842,7 @@ impl SettingsPage { .justify_start() .gap_2() .px_2() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .when(active, |s| s.bg(cx.theme().list_active)) .when(!active, |s| s.hover(|s| s.bg(cx.theme().sidebar_accent))) .child(Icon::new(section.icon()).size_4().text_color(fg)) @@ -1607,7 +1607,7 @@ impl SettingsPage { .child( Input::new(&self.device_name_input.state) .small() - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ), ) .into_any_element() @@ -1638,7 +1638,7 @@ impl SettingsPage { .child( Input::new(&self.remote_attachment_limit_input.state) .w(px(72.)) - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ) .into_any_element() } @@ -1648,7 +1648,7 @@ impl SettingsPage { let version = status.latest.unwrap_or_default(); let release_url = status.release_url.unwrap_or_default(); - crate::material::overlay_popover("tcode-update-popover") + crate::material::overlay_popover("tcode-update-popover", cx) .p_3() .trigger( Button::new("tcode-update-available") @@ -1916,6 +1916,7 @@ impl SettingsPage { crate::usage::plan_label(&plan), cx.theme().muted, muted, + cx, )) }) .into_any_element() @@ -2070,7 +2071,7 @@ impl SettingsPage { .child( Input::new(&self.auto_archive_idle_input.state) .w(px(72.)) - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ) .into_any_element(), self.row_frame(cx) @@ -2083,7 +2084,7 @@ impl SettingsPage { .child( Input::new(&self.auto_archive_keep_input.state) .w(px(72.)) - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ) .into_any_element(), ]; @@ -2490,7 +2491,7 @@ impl SettingsPage { div().w(px(240.)).child( Input::new(&self.home_url_input.state) .small() - .rounded(crate::material::radius_input()), + .rounded(crate::material::radius_input(cx)), ), ) .into_any_element() @@ -2804,7 +2805,7 @@ impl SettingsPage { let page = cx.entity(); let on_select = Rc::new(on_select); let menu_label = title.clone(); - let dropdown = crate::material::overlay_popover(popover_id) + let dropdown = crate::material::overlay_popover(popover_id, cx) .trigger(trigger) .content(move |_, _, cx| { v_flex() @@ -2830,7 +2831,7 @@ impl SettingsPage { .w_full() .px_2() .gap_2() - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .cursor_pointer() .hover(|s| s.bg(cx.theme().accent)); let item = if let Some(description) = option.description { diff --git a/crates/ui/src/shell.rs b/crates/ui/src/shell.rs index 843d2b6f5..381338d01 100644 --- a/crates/ui/src/shell.rs +++ b/crates/ui/src/shell.rs @@ -1316,7 +1316,7 @@ fn back_button(id: &'static str, parent: SharedString, cx: &App) -> gpui::Statef .pr(px(10.)) .gap(px(2.)) .items_center() - .rounded(px(12.)) + .rounded(cx.theme().tokens.radius.lg) .cursor_pointer() .text_color(cx.theme().foreground) .active(|s| s.bg(cx.theme().foreground.opacity(0.08))) @@ -1353,7 +1353,7 @@ fn nav_icon_button( .flex() .items_center() .justify_center() - .rounded(px(12.)) + .rounded(cx.theme().tokens.radius.lg) .cursor_pointer() .text_color(if enabled { theme.foreground diff --git a/crates/ui/src/sidebar.rs b/crates/ui/src/sidebar.rs index 889360ca5..536fd75b8 100644 --- a/crates/ui/src/sidebar.rs +++ b/crates/ui/src/sidebar.rs @@ -1636,7 +1636,7 @@ impl SessionsSidebar { .items_center() .gap_2() .px_2() - .rounded(cx.theme().radius) + .rounded(cx.theme().tokens.radius.md) .cursor_pointer() .hover(|s| s.bg(cx.theme().sidebar_accent)) .on_click(cx.listener(|this, _, _, cx| { @@ -1705,7 +1705,7 @@ impl SessionsSidebar { .items_center() .gap_2() .px_2() - .rounded(cx.theme().radius) + .rounded(cx.theme().tokens.radius.md) .cursor_pointer() .when(active, |row| row.bg(cx.theme().list_active)) .when(!active, |row| { @@ -1994,7 +1994,7 @@ impl SessionsSidebar { .items_center() .gap_1() .px_2() - .rounded(cx.theme().radius) + .rounded(cx.theme().tokens.radius.md) .cursor_pointer() .hover(|s| s.bg(cx.theme().sidebar_accent)) .on_click(cx.listener(move |this, _, _, cx| { @@ -2038,7 +2038,7 @@ impl SessionsSidebar { .size_5() .items_center() .justify_center() - .rounded(cx.theme().radius * 0.5) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() // Opacity (rather than `visibility: hidden`) keeps this in Root's // tab-stop registry so keyboard focus can reveal it. `focus`, not @@ -2541,7 +2541,7 @@ impl SessionsSidebar { .gap_2() .pl(px(if is_child { 42. } else { 30. })) .pr(px(THREAD_ROW_PADDING_X)) - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) // First child so the row's content paints over the mark. .when_some( self.provider_mark(meta, GROUPED_ROW_HEIGHT, THREAD_ROW_PADDING_X, cx), @@ -2660,7 +2660,7 @@ impl SessionsSidebar { .size_5() .items_center() .justify_center() - .rounded(cx.theme().radius * 0.5) + .rounded(cx.theme().tokens.radius.sm) .cursor_pointer() .opacity(0.) .group_hover(row_key, |button| button.opacity(1.)) @@ -2741,7 +2741,7 @@ impl SessionsSidebar { .gap(px(2.)) }) .px(px(THREAD_ROW_PADDING_X)) - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) // First child so the row's content paints over the mark. .when_some( self.provider_mark(meta, row_height, THREAD_ROW_PADDING_X, cx), diff --git a/crates/ui/src/terminal_drawer.rs b/crates/ui/src/terminal_drawer.rs index b425e1c1e..b4d3da233 100644 --- a/crates/ui/src/terminal_drawer.rs +++ b/crates/ui/src/terminal_drawer.rs @@ -1462,7 +1462,7 @@ impl Render for TerminalDrawer { .h(px(25.)) .gap(px(2.)) .px_2() - .rounded(material::radius_button()) + .rounded(material::radius_button(cx)) .bg(if selected { cx.theme().list_active } else { diff --git a/crates/ui/src/terminal_key_bar.rs b/crates/ui/src/terminal_key_bar.rs index 7c21c5ff0..d15144d28 100644 --- a/crates/ui/src/terminal_key_bar.rs +++ b/crates/ui/src/terminal_key_bar.rs @@ -210,7 +210,7 @@ impl TerminalKeyBar { .items_center() .justify_center() .cursor_pointer() - .rounded(material::radius_button()) + .rounded(material::radius_button(cx)) .text_size(px(13.)) .hover(|style| style.bg(cx.theme().accent)) .on_click(cx.listener(move |_, _, window, cx| { @@ -240,7 +240,7 @@ impl TerminalKeyBar { .items_center() .justify_center() .cursor_pointer() - .rounded(material::radius_button()) + .rounded(material::radius_button(cx)) .text_size(px(12.)) .font_medium() .when(selected, |style| { diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs index 71ca22959..cd01e4497 100644 --- a/crates/ui/src/theme.rs +++ b/crates/ui/src/theme.rs @@ -1,6 +1,6 @@ use std::{collections::HashMap, sync::Arc, sync::LazyLock}; -use gpui::{App, Global, Hsla, Pixels, Rgba, SharedString, Window, WindowAppearance, px}; +use gpui::{App, Global, Hsla, Rgba, SharedString, Window, WindowAppearance, px}; use gpui_base::{ ColorTokens, PlotTheme, RadiusTokens, ResizableTheme, ScrollbarMode, ScrollbarStyles, ScrollbarTheme, SemanticThemeTokens, ThemeAppearance, TypographyTokens, @@ -65,7 +65,6 @@ pub struct Theme { pub popover: Hsla, pub primary: Hsla, pub primary_foreground: Hsla, - pub radius: Pixels, pub ring: Hsla, pub scrollbar: Hsla, pub scrollbar_thumb: Hsla, @@ -150,6 +149,8 @@ struct ThemeConfig { #[serde(rename = "mono_font.family")] mono_font_family: String, radius: f32, + #[serde(rename = "radius.lg")] + radius_lg: f32, colors: HashMap, } @@ -207,8 +208,6 @@ impl TryFrom for Theme { let popover = color("popover.background")?; let danger = color("danger.background")?; let danger_foreground = color("danger.foreground")?; - let radius = px(config.radius); - let tokens = SemanticThemeTokens { colors: ColorTokens { selection: primary.alpha(0.3), @@ -230,11 +229,12 @@ impl TryFrom for Theme { input, ring, }, + // The scale gpui-kit derives from the same two theme-file keys. radius: RadiusTokens { - sm: px(config.radius * 0.5), - md: radius, - lg: px(config.radius + 4.), - xl: px(config.radius + 8.), + sm: px(config.radius / 2.), + md: px(config.radius), + lg: px(config.radius_lg), + xl: px(config.radius * 2.), ..Default::default() }, typography: TypographyTokens { @@ -272,7 +272,6 @@ impl TryFrom for Theme { popover, primary, primary_foreground, - radius, ring, scrollbar: color("scrollbar.background")?, scrollbar_thumb: color("scrollbar.thumb.background")?, @@ -318,6 +317,7 @@ pub fn change_mode(mode: ThemeMode, window: Option<&mut Window>, cx: &mut App) { ThemeMode::Light => cx.global::().light.clone(), ThemeMode::Dark => cx.global::().dark.clone(), }; + let radius = theme.tokens.radius; let base_theme = gpui_base::Theme { appearance: match mode { ThemeMode::Light => ThemeAppearance::Light, @@ -335,10 +335,10 @@ pub fn change_mode(mode: ThemeMode, window: Option<&mut Window>, cx: &mut App) { .track(|style| style.bg(theme.scrollbar)) .track_hover(|style| style.bg(theme.scrollbar)) .track_active(|style| style.bg(theme.scrollbar).border_color(theme.border)) - .thumb(|style| style.bg(theme.scrollbar_thumb).radius(theme.radius)) - .thumb_hover(|style| style.bg(theme.scrollbar_thumb_hover).radius(theme.radius)) + .thumb(|style| style.bg(theme.scrollbar_thumb).radius(radius.full)) + .thumb_hover(|style| style.bg(theme.scrollbar_thumb_hover).radius(radius.full)) .thumb_active(|style| { - style.bg(theme.scrollbar_thumb_hover).radius(theme.radius) + style.bg(theme.scrollbar_thumb_hover).radius(radius.full) }), ), resizable: ResizableTheme { diff --git a/crates/ui/src/thread_export.rs b/crates/ui/src/thread_export.rs index 7612b4b7c..7b8bb09aa 100644 --- a/crates/ui/src/thread_export.rs +++ b/crates/ui/src/thread_export.rs @@ -77,7 +77,7 @@ fn open_delivery_dialog( let directory = directory.clone(); builder .w(px(420.)) - .rounded(crate::material::radius_overlay()) + .rounded(crate::material::radius_overlay(cx)) .bg(cx.theme().popover) .border_1() .border_color(cx.theme().border) @@ -97,13 +97,13 @@ fn open_delivery_dialog( DialogActions::new() .child( Button::new("export-cancel") - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .label(crate::tr!("export.cancel")) .on_click(|_, window, cx| window.close_dialog(cx)), ) .child( Button::new("export-copy") - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .label(crate::tr!("export.copy")) .on_click(move |_, window, cx| { cx.write_to_clipboard(ClipboardItem::new_string( @@ -121,7 +121,7 @@ fn open_delivery_dialog( let store = download_store.clone(); actions.child( Button::new("export-download") - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .label(crate::tr!("export.download")) .on_click(move |_, window, cx| { let result = store.read(cx).deliver_artifact( @@ -154,7 +154,7 @@ fn open_delivery_dialog( let directory = directory.clone(); actions.child( Button::new("export-save") - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .primary() .label(crate::tr!("export.save")) .on_click(move |_, window, cx| { diff --git a/crates/ui/src/toast.rs b/crates/ui/src/toast.rs index fc278e631..9daad827f 100644 --- a/crates/ui/src/toast.rs +++ b/crates/ui/src/toast.rs @@ -97,7 +97,7 @@ pub fn notification( .id(("toast-detail-scroll", id as usize)) .max_h_40() .p_2() - .rounded(crate::material::radius_input()) + .rounded(crate::material::radius_input(cx)) .bg(cx.theme().muted) .text_xs() .font_family(cx.theme().mono_font_family.clone()) diff --git a/crates/ui/src/touch_selection/edit_menu.rs b/crates/ui/src/touch_selection/edit_menu.rs index 240be7727..de07cded3 100644 --- a/crates/ui/src/touch_selection/edit_menu.rs +++ b/crates/ui/src/touch_selection/edit_menu.rs @@ -85,7 +85,7 @@ impl RenderOnce for EditMenu { let on_paint = self.on_paint; // A T3 pill, as iOS draws its edit menu: the overlay contour at the // overlay radius, its items filling it edge to edge. - let radius = material::radius_overlay(); + let radius = material::radius_overlay(cx); // Inside the hairline border, so a pressed end item's fill follows // the pill's corner. let inner_radius = radius - px(1.); diff --git a/crates/ui/src/widgets/button.rs b/crates/ui/src/widgets/button.rs index 088abfc9b..26fd12ec7 100644 --- a/crates/ui/src/widgets/button.rs +++ b/crates/ui/src/widgets/button.rs @@ -268,7 +268,7 @@ impl RenderOnce for Button { (bg, fg) }; let corners = match self.rounded { - ButtonRounded::Medium => Corners::all(theme.radius), + ButtonRounded::Medium => Corners::all(theme.tokens.radius.md), ButtonRounded::Size(value) => Corners::all(value), ButtonRounded::Corners(corners) => corners, }; diff --git a/crates/ui/src/widgets/checkbox.rs b/crates/ui/src/widgets/checkbox.rs index e9b12d7e3..6734fe633 100644 --- a/crates/ui/src/widgets/checkbox.rs +++ b/crates/ui/src/widgets/checkbox.rs @@ -112,7 +112,7 @@ impl RenderOnce for Checkbox { .size(indicator_size) .flex_shrink_0() .border_1() - .rounded(cx.theme().radius.min(px(4.))) + .rounded(cx.theme().tokens.radius.sm) .bg(cx.theme().background) .border_color(cx.theme().input) .styles(|styles| { diff --git a/crates/ui/src/widgets/input.rs b/crates/ui/src/widgets/input.rs index 72da3afac..c5b2df37e 100644 --- a/crates/ui/src/widgets/input.rs +++ b/crates/ui/src/widgets/input.rs @@ -302,7 +302,7 @@ impl RenderOnce for Input { }) .when(self.appearance, |this| { this.bg(theme.background) - .rounded(theme.radius) + .rounded(theme.tokens.radius.md) .when(self.bordered, |this| { this.border_1().border_color(theme.input) }) diff --git a/crates/ui/src/widgets/kbd.rs b/crates/ui/src/widgets/kbd.rs index 6f0c76d92..0be6598f8 100644 --- a/crates/ui/src/widgets/kbd.rs +++ b/crates/ui/src/widgets/kbd.rs @@ -144,7 +144,7 @@ impl RenderOnce for Kbd { .px_1() .min_w_5() .text_center() - .rounded(cx.theme().radius * 0.5) + .rounded(cx.theme().tokens.radius.sm) .line_height(relative(1.)) .text_xs() .whitespace_normal() diff --git a/crates/ui/src/widgets/menu.rs b/crates/ui/src/widgets/menu.rs index 9c5690471..7865f0982 100644 --- a/crates/ui/src/widgets/menu.rs +++ b/crates/ui/src/widgets/menu.rs @@ -216,7 +216,7 @@ impl Render for PopupMenu { .flex_col() .min_w(px(160.)) .max_w(px(420.)) - .rounded(crate::material::radius_overlay()) + .rounded(crate::material::radius_overlay(cx)) .bg(cx.theme().popover) .border_1() .border_color(cx.theme().border) @@ -259,7 +259,7 @@ impl Render for PopupMenu { .px_2() .py_1() .when(self.touch, |el| el.min_h(px(44.))) - .rounded(crate::material::radius_button()) + .rounded(crate::material::radius_button(cx)) .text_sm() .when(selected, |el| el.bg(cx.theme().muted)) .when(disabled, |el| el.text_color(cx.theme().muted_foreground)) diff --git a/crates/ui/src/widgets/popover.rs b/crates/ui/src/widgets/popover.rs index 77bed5671..d3b094005 100644 --- a/crates/ui/src/widgets/popover.rs +++ b/crates/ui/src/widgets/popover.rs @@ -185,7 +185,7 @@ impl RenderOnce for Popover { .occlude() .when(appearance, |el| { el.p_1() - .rounded(crate::material::radius_overlay()) + .rounded(crate::material::radius_overlay(cx)) .bg(cx.theme().popover) .border_1() .border_color(cx.theme().border) @@ -263,7 +263,7 @@ impl Popover { .max_w(viewport.width) .flex_none() .max_h(max_height) - .rounded_t(crate::material::radius_overlay_sheet()) + .rounded_t(crate::material::radius_overlay_sheet(cx)) .bg(cx.theme().popover) .border_t_1() .border_color(cx.theme().border) diff --git a/crates/ui/src/widgets/tooltip.rs b/crates/ui/src/widgets/tooltip.rs index 2bcd50bcd..17cd3bfc3 100644 --- a/crates/ui/src/widgets/tooltip.rs +++ b/crates/ui/src/widgets/tooltip.rs @@ -1,7 +1,7 @@ use crate::{theme::ActiveTheme as _, widgets::Kbd}; use gpui::{ Action, AnyElement, AnyView, App, AppContext as _, Context, IntoElement, ParentElement as _, - Render, SharedString, StyleRefinement, Styled, Window, div, prelude::FluentBuilder as _, px, + Render, SharedString, StyleRefinement, Styled, Window, div, prelude::FluentBuilder as _, }; use gpui_base::StyledExt as _; @@ -81,7 +81,7 @@ impl Render for Tooltip { .border_1() .border_color(cx.theme().border) .shadow_md() - .rounded(px(6.)) + .rounded(cx.theme().tokens.radius.sm) .justify_between() .py_0p5() .px_2()