Use `ui_size` to set relative font sizes

Nate Butler and Marshall Bowers created

Co-Authored-By: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com>

Change summary

crates/ui2/src/components/list.rs         | 16 +-------
crates/ui2/src/components/multi_buffer.rs |  4 +-
crates/ui2/src/elements/button.rs         | 46 +++++++-----------------
crates/ui2/src/elements/label.rs          | 37 ++-----------------
crates/ui2/src/prelude.rs                 |  9 ++++
5 files changed, 31 insertions(+), 81 deletions(-)

Detailed changes

crates/ui2/src/components/list.rs 🔗

@@ -5,9 +5,7 @@ use gpui3::{div, Div};
 use crate::prelude::*;
 use crate::settings::user_settings;
 use crate::theme::theme;
-use crate::{
-    h_stack, v_stack, Avatar, Icon, IconColor, IconElement, IconSize, Label, LabelColor, LabelSize,
-};
+use crate::{h_stack, v_stack, Avatar, Icon, IconColor, IconElement, IconSize, Label, LabelColor};
 
 #[derive(Clone, Copy, Default, Debug, PartialEq)]
 pub enum ListItemVariant {
@@ -129,11 +127,7 @@ impl<S: 'static + Send + Sync + Clone> ListHeader<S> {
                                     .color(IconColor::Muted)
                                     .size(IconSize::Small)
                             }))
-                            .child(
-                                Label::new(self.label.clone())
-                                    .color(LabelColor::Muted)
-                                    .size(LabelSize::Small),
-                            ),
+                            .child(Label::new(self.label.clone()).color(LabelColor::Muted)),
                     )
                     .child(disclosure_control),
             )
@@ -186,11 +180,7 @@ impl<S: 'static + Send + Sync + Clone> ListSubHeader<S> {
                                 .color(IconColor::Muted)
                                 .size(IconSize::Small)
                         }))
-                        .child(
-                            Label::new(self.label.clone())
-                                .color(LabelColor::Muted)
-                                .size(LabelSize::Small),
-                        ),
+                        .child(Label::new(self.label.clone()).color(LabelColor::Muted)),
                 ),
         )
     }

crates/ui2/src/components/multi_buffer.rs 🔗

@@ -1,7 +1,7 @@
 use std::marker::PhantomData;
 
 use crate::prelude::*;
-use crate::{v_stack, Buffer, Icon, IconButton, Label, LabelSize};
+use crate::{v_stack, Buffer, Icon, IconButton, Label};
 
 #[derive(Element)]
 pub struct MultiBuffer<S: 'static + Send + Sync + Clone> {
@@ -33,7 +33,7 @@ impl<S: 'static + Send + Sync + Clone> MultiBuffer<S> {
                             .justify_between()
                             .p_4()
                             .bg(theme.lowest.base.default.background)
-                            .child(Label::new("main.rs").size(LabelSize::Small))
+                            .child(Label::new("main.rs"))
                             .child(IconButton::new(Icon::ArrowUpRight)),
                     )
                     .child(buffer)

crates/ui2/src/elements/button.rs 🔗

@@ -5,7 +5,7 @@ use gpui3::{DefiniteLength, Hsla, Interactive, MouseButton, WindowContext};
 
 use crate::prelude::*;
 use crate::settings::user_settings;
-use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor, LabelSize};
+use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor};
 
 #[derive(Default, PartialEq, Clone, Copy)]
 pub enum IconPosition {
@@ -137,9 +137,7 @@ impl<S: 'static + Send + Sync + Clone> Button<S> {
     }
 
     fn render_label(&self) -> Label<S> {
-        Label::new(self.label.clone())
-            .size(LabelSize::Small)
-            .color(self.label_color())
+        Label::new(self.label.clone()).color(self.label_color())
     }
 
     fn render_icon(&self, icon_color: IconColor) -> Option<IconElement<S>> {
@@ -153,7 +151,7 @@ impl<S: 'static + Send + Sync + Clone> Button<S> {
 
         let mut el = h_stack()
             .p_1()
-            .text_size(ui_size(1.125))
+            .text_size(ui_size(1.))
             .rounded_md()
             .border()
             .border_color(border_color)
@@ -205,7 +203,7 @@ mod stories {
     use gpui3::rems;
     use strum::IntoEnumIterator;
 
-    use crate::{h_stack, v_stack, LabelColor, LabelSize, Story};
+    use crate::{h_stack, v_stack, LabelColor, Story};
 
     use super::*;
 
@@ -241,9 +239,7 @@ mod stories {
                                     v_stack()
                                         .gap_1()
                                         .child(
-                                            Label::new(state.to_string())
-                                                .color(LabelColor::Muted)
-                                                .size(LabelSize::Small),
+                                            Label::new(state.to_string()).color(LabelColor::Muted),
                                         )
                                         .child(
                                             Button::new("Label")
@@ -256,9 +252,7 @@ mod stories {
                                     v_stack()
                                         .gap_1()
                                         .child(
-                                            Label::new(state.to_string())
-                                                .color(LabelColor::Muted)
-                                                .size(LabelSize::Small),
+                                            Label::new(state.to_string()).color(LabelColor::Muted),
                                         )
                                         .child(
                                             Button::new("Label")
@@ -273,9 +267,7 @@ mod stories {
                                     v_stack()
                                         .gap_1()
                                         .child(
-                                            Label::new(state.to_string())
-                                                .color(LabelColor::Muted)
-                                                .size(LabelSize::Small),
+                                            Label::new(state.to_string()).color(LabelColor::Muted),
                                         )
                                         .child(
                                             Button::new("Label")
@@ -293,9 +285,7 @@ mod stories {
                                     v_stack()
                                         .gap_1()
                                         .child(
-                                            Label::new(state.to_string())
-                                                .color(LabelColor::Muted)
-                                                .size(LabelSize::Small),
+                                            Label::new(state.to_string()).color(LabelColor::Muted),
                                         )
                                         .child(
                                             Button::new("Label")
@@ -308,9 +298,7 @@ mod stories {
                                     v_stack()
                                         .gap_1()
                                         .child(
-                                            Label::new(state.to_string())
-                                                .color(LabelColor::Muted)
-                                                .size(LabelSize::Small),
+                                            Label::new(state.to_string()).color(LabelColor::Muted),
                                         )
                                         .child(
                                             Button::new("Label")
@@ -325,9 +313,7 @@ mod stories {
                                     v_stack()
                                         .gap_1()
                                         .child(
-                                            Label::new(state.to_string())
-                                                .color(LabelColor::Muted)
-                                                .size(LabelSize::Small),
+                                            Label::new(state.to_string()).color(LabelColor::Muted),
                                         )
                                         .child(
                                             Button::new("Label")
@@ -345,9 +331,7 @@ mod stories {
                                     v_stack()
                                         .gap_1()
                                         .child(
-                                            Label::new(state.to_string())
-                                                .color(LabelColor::Muted)
-                                                .size(LabelSize::Small),
+                                            Label::new(state.to_string()).color(LabelColor::Muted),
                                         )
                                         .child(
                                             Button::new("Label")
@@ -361,9 +345,7 @@ mod stories {
                                     v_stack()
                                         .gap_1()
                                         .child(
-                                            Label::new(state.to_string())
-                                                .color(LabelColor::Muted)
-                                                .size(LabelSize::Small),
+                                            Label::new(state.to_string()).color(LabelColor::Muted),
                                         )
                                         .child(
                                             Button::new("Label")
@@ -379,9 +361,7 @@ mod stories {
                                     v_stack()
                                         .gap_1()
                                         .child(
-                                            Label::new(state.to_string())
-                                                .color(LabelColor::Muted)
-                                                .size(LabelSize::Small),
+                                            Label::new(state.to_string()).color(LabelColor::Muted),
                                         )
                                         .child(
                                             Button::new("Label")

crates/ui2/src/elements/label.rs 🔗

@@ -38,19 +38,11 @@ impl LabelColor {
     }
 }
 
-#[derive(Default, PartialEq, Copy, Clone)]
-pub enum LabelSize {
-    #[default]
-    Default,
-    Small,
-}
-
 #[derive(Element, Clone)]
 pub struct Label<S: 'static + Send + Sync + Clone> {
     state_type: PhantomData<S>,
     label: SharedString,
     color: LabelColor,
-    size: LabelSize,
     strikethrough: bool,
 }
 
@@ -60,7 +52,6 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
             state_type: PhantomData,
             label: label.into(),
             color: LabelColor::Default,
-            size: LabelSize::Default,
             strikethrough: false,
         }
     }
@@ -70,11 +61,6 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
         self
     }
 
-    pub fn size(mut self, size: LabelSize) -> Self {
-        self.size = size;
-        self
-    }
-
     pub fn set_strikethrough(mut self, strikethrough: bool) -> Self {
         self.strikethrough = strikethrough;
         self
@@ -95,6 +81,7 @@ impl<S: 'static + Send + Sync + Clone> Label<S> {
                         .bg(LabelColor::Hidden.hsla(cx)),
                 )
             })
+            .text_size(ui_size(1.))
             .text_color(self.color.hsla(cx))
             .child(self.label.clone())
     }
@@ -105,7 +92,6 @@ pub struct HighlightedLabel<S: 'static + Send + Sync + Clone> {
     state_type: PhantomData<S>,
     label: SharedString,
     color: LabelColor,
-    size: LabelSize,
     highlight_indices: Vec<usize>,
     strikethrough: bool,
 }
@@ -116,7 +102,6 @@ impl<S: 'static + Send + Sync + Clone> HighlightedLabel<S> {
             state_type: PhantomData,
             label: label.into(),
             color: LabelColor::Default,
-            size: LabelSize::Default,
             highlight_indices,
             strikethrough: false,
         }
@@ -127,11 +112,6 @@ impl<S: 'static + Send + Sync + Clone> HighlightedLabel<S> {
         self
     }
 
-    pub fn size(mut self, size: LabelSize) -> Self {
-        self.size = size;
-        self
-    }
-
     pub fn set_strikethrough(mut self, strikethrough: bool) -> Self {
         self.strikethrough = strikethrough;
         self
@@ -191,17 +171,10 @@ impl<S: 'static + Send + Sync + Clone> HighlightedLabel<S> {
                         .bg(LabelColor::Hidden.hsla(cx)),
                 )
             })
-            .children(runs.into_iter().map(|run| {
-                let mut div = div();
-
-                if self.size == LabelSize::Small {
-                    div = div.text_xs();
-                } else {
-                    div = div.text_sm();
-                }
-
-                div.text_color(run.color).child(run.text)
-            }))
+            .children(
+                runs.into_iter()
+                    .map(|run| div().text_color(run.color).child(run.text)),
+            )
     }
 }
 

crates/ui2/src/prelude.rs 🔗

@@ -158,9 +158,16 @@ impl HighlightColor {
 }
 
 pub fn ui_size(size: f32) -> Rems {
+    const UI_SCALE_RATIO: f32 = 0.875;
+
     let setting = user_settings();
 
-    rems(*setting.ui_scale * size)
+    let rems = rems(*setting.ui_scale * UI_SCALE_RATIO * size);
+    let px = rems * 16.0;
+
+    dbg!(rems, rems * 16.0);
+
+    rems
 }
 
 #[derive(Debug, Default, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, EnumIter)]