diff --git a/crates/ui/src/button/button.rs b/crates/ui/src/button/button.rs index 6b17c16c..8207d4da 100644 --- a/crates/ui/src/button/button.rs +++ b/crates/ui/src/button/button.rs @@ -1,6 +1,6 @@ use crate::{ h_flex, indicator::Indicator, tooltip::Tooltip, ActiveTheme, Colorize as _, Disableable, Icon, - Selectable, Sizable, Size, + Selectable, Sizable, Size, StyleSized, }; use gpui::{ div, prelude::FluentBuilder as _, relative, AnyElement, App, ClickEvent, Corners, Div, Edges, @@ -432,10 +432,11 @@ impl RenderOnce for Button { .id("label") .items_center() .justify_center() + .button_text_size(self.size) .map(|this| match self.size { - Size::XSmall => this.gap_1().text_xs(), - Size::Small => this.gap_1().text_sm(), - _ => this.gap_2().text_base(), + Size::XSmall => this.gap_1(), + Size::Small => this.gap_1(), + _ => this.gap_2(), }) .when(!self.loading, |this| { this.when_some(self.icon, |this, icon| { diff --git a/crates/ui/src/styled.rs b/crates/ui/src/styled.rs index 701f3a81..41ece208 100644 --- a/crates/ui/src/styled.rs +++ b/crates/ui/src/styled.rs @@ -283,6 +283,7 @@ pub trait StyleSized { fn size_with(self, size: Size) -> Self; /// Apply the table cell size (Font size, padding) with the given `Size`. fn table_cell_size(self, size: Size) -> Self; + fn button_text_size(self, size: Size) -> Self; } impl StyleSized for T { @@ -399,6 +400,14 @@ impl StyleSized for T { .pt(padding.top) .pb(padding.bottom) } + + fn button_text_size(self, size: Size) -> Self { + match size { + Size::XSmall => self.text_xs(), + Size::Small => self.text_sm(), + _ => self.text_base(), + } + } } pub trait AxisExt { diff --git a/crates/ui/src/tab/tab.rs b/crates/ui/src/tab/tab.rs index 6e1a0217..a2903e51 100644 --- a/crates/ui/src/tab/tab.rs +++ b/crates/ui/src/tab/tab.rs @@ -47,12 +47,24 @@ impl Default for TabStyle { impl TabVariant { fn height(&self, size: Size) -> Pixels { match size { - Size::Small | Size::XSmall => match self { + Size::XSmall => match self { + TabVariant::Tab => px(22.), + TabVariant::Pill => px(20.), + TabVariant::Segmented => px(20.), + TabVariant::Underline => px(26.), + }, + Size::Small => match self { TabVariant::Tab => px(24.), TabVariant::Pill => px(24.), TabVariant::Segmented => px(24.), TabVariant::Underline => px(30.), }, + Size::Large => match self { + TabVariant::Tab => px(36.), + TabVariant::Pill => px(36.), + TabVariant::Segmented => px(36.), + TabVariant::Underline => px(42.), + }, _ => match self { TabVariant::Tab => px(30.), TabVariant::Pill => px(31.), @@ -64,12 +76,24 @@ impl TabVariant { fn inner_height(&self, size: Size) -> Pixels { match size { - Size::Small | Size::XSmall => match self { - TabVariant::Tab => px(25.), - TabVariant::Pill => px(26.), - TabVariant::Segmented => px(26.), + Size::XSmall => match self { + TabVariant::Tab => px(20.), + TabVariant::Pill => px(20.), + TabVariant::Segmented => px(20.), + TabVariant::Underline => px(20.), + }, + Size::Small => match self { + TabVariant::Tab => px(24.), + TabVariant::Pill => px(24.), + TabVariant::Segmented => px(24.), TabVariant::Underline => px(22.), }, + Size::Large => match self { + TabVariant::Tab => px(36.), + TabVariant::Pill => px(36.), + TabVariant::Segmented => px(36.), + TabVariant::Underline => px(30.), + }, _ => match self { TabVariant::Tab => px(30.), TabVariant::Pill => px(31.), @@ -81,56 +105,33 @@ impl TabVariant { fn inner_paddings(&self, size: Size) -> Edges { match size { - Size::Small | Size::XSmall => match self { - TabVariant::Tab => Edges { - left: px(10.), - right: px(10.), - ..Default::default() - }, - TabVariant::Pill => Edges { - left: px(14.), - right: px(14.), - ..Default::default() - }, - TabVariant::Segmented => Edges { - left: px(8.), - right: px(8.), - ..Default::default() - }, - TabVariant::Underline => Edges { - left: px(10.), - right: px(10.), - ..Default::default() - }, + Size::XSmall => Edges { + left: px(8.), + right: px(8.), + ..Default::default() }, - _ => match self { - TabVariant::Tab => Edges { - left: px(12.), - right: px(12.), - ..Default::default() - }, - TabVariant::Pill => Edges { - left: px(16.), - right: px(16.), - ..Default::default() - }, - TabVariant::Segmented => Edges { - left: px(10.), - right: px(10.), - ..Default::default() - }, - TabVariant::Underline => Edges { - left: px(12.), - right: px(12.), - ..Default::default() - }, + Size::Small => Edges { + left: px(12.), + right: px(12.), + ..Default::default() + }, + Size::Large => Edges { + left: px(20.), + right: px(20.), + ..Default::default() + }, + _ => Edges { + left: px(16.), + right: px(16.), + ..Default::default() }, } } fn inner_margins(&self, size: Size) -> Edges { match size { - Size::Small | Size::XSmall => match self { + Size::XSmall => Edges::all(px(0.)), + Size::Small => match self { TabVariant::Underline => Edges { bottom: px(2.), ..Default::default() @@ -514,6 +515,11 @@ impl RenderOnce for Tab { .h(height) .overflow_hidden() .text_color(tab_style.fg) + .map(|this| match self.size { + Size::XSmall => this.text_xs(), + Size::Large => this.text_base(), + _ => this.text_sm(), + }) .bg(tab_style.bg) .border_l(tab_style.borders.left) .border_r(tab_style.borders.right) @@ -534,7 +540,6 @@ impl RenderOnce for Tab { .rounded(tab_style.radius) }) }) - .text_sm() .when_some(self.prefix, |this, prefix| this.child(prefix)) .child( div() diff --git a/crates/ui/src/tab/tab_bar.rs b/crates/ui/src/tab/tab_bar.rs index 40c582e3..ad023a62 100644 --- a/crates/ui/src/tab/tab_bar.rs +++ b/crates/ui/src/tab/tab_bar.rs @@ -135,6 +135,7 @@ impl RenderOnce for TabBar { fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement { let default_gap = match self.size { Size::Small | Size::XSmall => px(8.), + Size::Large => px(16.), _ => px(12.), }; let (bg, paddings, gap) = match self.variant {