root: Impl Styled for Root. (#1573)

crates/story/examples/tiles.rs

@@ -411,7 +411,6 @@ pub fn open_new(
 impl Render for StoryTiles {
     fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         div()
-            .font_family(".SystemUIFont")
             .relative()
             .size_full()
             .flex()

crates/ui/src/root.rs

@@ -3,12 +3,12 @@ use crate::{
     input::InputState,
     notification::{Notification, NotificationList},
     sheet::Sheet,
-    window_border, ActiveTheme, Placement, TITLE_BAR_HEIGHT,
+    window_border, ActiveTheme, Placement, StyledExt, TITLE_BAR_HEIGHT,
 };
 use gpui::{
     actions, canvas, div, prelude::FluentBuilder as _, AnyView, App, AppContext, Context,
     DefiniteLength, Entity, FocusHandle, InteractiveElement, IntoElement, KeyBinding,
-    ParentElement as _, Render, Styled, Window,
+    ParentElement as _, Render, StyleRefinement, Styled, Window,
 };
 use std::{any::TypeId, rc::Rc};
 
@@ -210,6 +210,7 @@ impl WindowExt for Window {
 ///
 /// It is used to manage the Sheet, Dialog, and Notification.
 pub struct Root {
+    style: StyleRefinement,
     /// Used to store the focus handle of the previous view.
     /// When the Dialog, Sheet closes, we will focus back to the previous view.
     previous_focus_handle: Option<FocusHandle>,
@@ -237,6 +238,7 @@ pub(crate) struct ActiveDialog {
 impl Root {
     pub fn new(view: AnyView, window: &mut Window, cx: &mut Context<Self>) -> Self {
         Self {
+            style: StyleRefinement::default(),
             previous_focus_handle: None,
             active_sheet: None,
             active_dialogs: Vec::new(),
@@ -385,6 +387,12 @@ impl Root {
     }
 }
 
+impl Styled for Root {
+    fn style(&mut self) -> &mut StyleRefinement {
+        &mut self.style
+    }
+}
+
 impl Render for Root {
     fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let base_font_size = cx.theme().font_size;
@@ -396,11 +404,12 @@ impl Render for Root {
                 .key_context(CONTEXT)
                 .on_action(cx.listener(Self::on_action_tab))
                 .on_action(cx.listener(Self::on_action_tab_prev))
-                .relative()
-                .size_full()
                 .font_family(".SystemUIFont")
                 .bg(cx.theme().background)
                 .text_color(cx.theme().foreground)
+                .refine_style(&self.style)
+                .relative()
+                .size_full()
                 .child(self.view.clone())
                 .children(self.render_sheet_layer(window, cx))
                 .children(self.render_dialog_layer(window, cx))

docs/docs/root.md

@@ -30,4 +30,19 @@ fn main() {
 }
 ```
 
+## Setup base styles
+
+You can setup window level base styles by using `Styled` fluent method on [Root], then all child views will inherit these styles.
+
+```rs
+Root::new(view.into(), window, cx)
+    // This default is `.SystemUIFont` it will use system UI font.
+    .font_family("Your Special Font")
+    .text_sm()
+```
+
 [Root]: https://docs.rs/gpui-component/latest/gpui_component/root/struct.Root.html
+
+```
+
+```

examples/window_title/src/main.rs

@@ -79,7 +79,7 @@ fn main() {
 
             cx.open_window(window_options, |window, cx| {
                 let view = cx.new(|_| Example);
-                cx.new(|cx| Root::new(view.into(), window, cx))
+                cx.new(|cx| Root::new(view.into(), window, cx).text_sm())
             })?;
 
             Ok::<_, anyhow::Error>(())