chore: Add base ui attributes to Root and add change font size to story to test font adjust. (#409)

assets/icons/a-large-small.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-a-large-small"><path d="M21 14h-5"/><path d="M16 16v-3.5a2.5 2.5 0 0 1 5 0V16"/><path d="M4.5 13h6"/><path d="m3 16 4.5-9 4.5 9"/></svg>

crates/app/src/story_workspace.rs

@@ -28,7 +28,10 @@ const MAIN_DOCK_AREA: DockAreaTab = DockAreaTab {
 #[derive(Clone, PartialEq, Eq, Deserialize)]
 struct SelectLocale(SharedString);
 
-impl_actions!(locale_switcher, [SelectLocale]);
+#[derive(Clone, PartialEq, Eq, Deserialize)]
+struct SelectFont(usize);
+
+impl_actions!(story, [SelectLocale, SelectFont]);
 
 actions!(workspace, [Open, CloseWindow]);
 
@@ -43,6 +46,7 @@ pub struct StoryWorkspace {
     theme_color: Option<Hsla>,
     dock_area: View<DockArea>,
     locale_selector: View<LocaleSelector>,
+    font_size_selector: View<FontSizeSelector>,
     theme_color_picker: View<ColorPicker>,
     last_layout_state: Option<DockAreaState>,
     _save_layout_task: Option<Task<()>>,
@@ -95,6 +99,7 @@ impl StoryWorkspace {
         .detach();
 
         let locale_selector = cx.new_view(LocaleSelector::new);
+        let font_size_selector = cx.new_view(FontSizeSelector::new);
 
         let theme_color_picker = cx.new_view(|cx| {
             let mut picker = ColorPicker::new("theme-color-picker", cx)
@@ -118,6 +123,7 @@ impl StoryWorkspace {
             theme_color: None,
             dock_area,
             locale_selector,
+            font_size_selector,
             theme_color_picker,
             last_layout_state: None,
             _save_layout_task: None,
@@ -325,13 +331,10 @@ impl Render for StoryWorkspace {
         let notifications_count = cx.notifications().len();
 
         div()
-            .font_family(".SystemUIFont")
             .relative()
             .size_full()
             .flex()
             .flex_col()
-            .bg(cx.theme().background)
-            .text_color(cx.theme().foreground)
             .child(
                 TitleBar::new()
                     // left side
@@ -358,6 +361,7 @@ impl Render for StoryWorkspace {
                                     .on_click(cx.listener(Self::change_color_mode)),
                             )
                             .child(self.locale_selector.clone())
+                            .child(self.font_size_selector.clone())
                             .child(
                                 Button::new("github")
                                     .icon(IconName::GitHub)
@@ -451,3 +455,44 @@ impl Render for LocaleSelector {
             )
     }
 }
+
+struct FontSizeSelector {
+    focus_handle: FocusHandle,
+}
+
+impl FontSizeSelector {
+    pub fn new(cx: &mut ViewContext<Self>) -> Self {
+        Self {
+            focus_handle: cx.focus_handle(),
+        }
+    }
+
+    fn on_select(&mut self, font_size: &SelectFont, cx: &mut ViewContext<Self>) {
+        Theme::global_mut(cx).font_size = font_size.0 as f32;
+        cx.refresh();
+    }
+}
+
+impl Render for FontSizeSelector {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        let focus_handle = self.focus_handle.clone();
+        let font_size = cx.theme().font_size as i32;
+
+        div()
+            .id("font-size-selector")
+            .track_focus(&focus_handle)
+            .on_action(cx.listener(Self::on_select))
+            .child(
+                Button::new("btn")
+                    .small()
+                    .ghost()
+                    .icon(IconName::ALargeSmall)
+                    .popup_menu(move |this, _| {
+                        this.menu_with_check("Large", font_size == 18, Box::new(SelectFont(18)))
+                            .menu_with_check("Default", font_size == 16, Box::new(SelectFont(16)))
+                            .menu_with_check("Small", font_size == 14, Box::new(SelectFont(14)))
+                    })
+                    .anchor(AnchorCorner::TopRight),
+            )
+    }
+}

crates/ui/src/icon.rs

@@ -6,6 +6,7 @@ use gpui::{
 
 #[derive(IntoElement, Clone)]
 pub enum IconName {
+    ALargeSmall,
     ArrowDown,
     ArrowLeft,
     ArrowRight,
@@ -68,6 +69,7 @@ pub enum IconName {
 impl IconName {
     pub fn path(self) -> SharedString {
         match self {
+            IconName::ALargeSmall => "icons/a-large-small.svg",
             IconName::ArrowDown => "icons/arrow-down.svg",
             IconName::ArrowLeft => "icons/arrow-left.svg",
             IconName::ArrowRight => "icons/arrow-right.svg",

crates/ui/src/root.rs

@@ -341,9 +341,14 @@ impl Root {
 
 impl Render for Root {
     fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl IntoElement {
+        let base_font_size = cx.theme().font_size;
+        cx.set_rem_size(base_font_size);
+
         div()
             .id("root")
             .size_full()
+            .font_family(".SystemUIFont")
+            .bg(cx.theme().background)
             .text_color(cx.theme().foreground)
             .child(self.view.clone())
     }

crates/ui/src/theme.rs

@@ -493,7 +493,7 @@ impl From<ThemeColor> for Theme {
         Theme {
             mode: ThemeMode::default(),
             transparent: Hsla::transparent_black(),
-            font_size: 14.0,
+            font_size: 16.0,
             font_family: if cfg!(target_os = "macos") {
                 ".SystemUIFont".into()
             } else if cfg!(target_os = "windows") {
@@ -607,4 +607,14 @@ impl Theme {
         cx.set_global(theme);
         cx.refresh();
     }
+
+    /// Returns the global theme reference
+    pub fn global(cx: &AppContext) -> &Theme {
+        cx.global::<Theme>()
+    }
+
+    /// Returns the global theme mutable reference
+    pub fn global_mut(cx: &mut AppContext) -> &mut Theme {
+        cx.global_mut::<Theme>()
+    }
 }