feat: Use System fonts

crates/components/src/button.rs

@@ -191,6 +191,7 @@ pub fn Button(
             text_align: "center",
             main_align: "center",
             cross_align: "center",
+            line_height: "1",
             {&children}
         }
     )

crates/core/src/lib.rs

@@ -6,6 +6,7 @@ pub mod node;
 pub mod platform_state;
 pub mod plugins;
 pub mod render;
+pub mod style;
 pub mod types;
 
 pub mod prelude {
@@ -18,6 +19,7 @@ pub mod prelude {
         platform_state::*,
         plugins::*,
         render::*,
+        style::*,
         types::*,
     };
 }

crates/core/src/style.rs

@@ -0,0 +1,12 @@
+pub fn default_fonts() -> Vec<String> {
+    let mut fonts = vec!["Noto Sans".to_string(), "Arial".to_string()];
+    if cfg!(target_os = "windows") {
+        fonts.insert(0, "Segoe UI".to_string());
+        fonts.insert(1, "Segoe UI Emoji".to_string());
+    } else if cfg!(target_os = "macos") {
+        fonts.insert(0, "San Francisco (SF)".to_string());
+    } else if cfg!(target_os = "linux") {
+        fonts.insert(0, "Ubuntu".to_string());
+    }
+    fonts
+}

crates/elements/src/definitions.rs

@@ -228,6 +228,8 @@ builder_constructors! {
         opacity: String,
         #[doc = include_str!("_docs/attributes/content.md")]
         content: String,
+        #[doc = include_str!("_docs/attributes/line_height.md")]
+        line_height: String,
 
         name: String,
         focusable: String,

crates/hooks/src/theming/light.rs

@@ -25,7 +25,7 @@ pub const LIGHT_THEME: Theme = Theme {
         border_fill: cow_borrowed!("rgb(210, 210, 210)"),
         focus_border_fill: cow_borrowed!("rgb(180, 180, 180)"),
         shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
-        padding: cow_borrowed!("8 16"),
+        padding: cow_borrowed!("10 16"),
         margin: cow_borrowed!("4"),
         corner_radius: cow_borrowed!("8"),
         width: cow_borrowed!("auto"),

crates/hooks/tests/use_editable.rs

@@ -77,12 +77,8 @@ pub async fn multiple_lines_single_editor() {
     // Cursor has been moved
     let root = utils.root().get(0);
     let cursor = root.get(1).get(0);
-    #[cfg(not(target_os = "linux"))]
     assert_eq!(cursor.text(), Some("0:5"));
 
-    #[cfg(target_os = "linux")]
-    assert_eq!(cursor.text(), Some("0:4"));
-
     // Insert text
     utils.push_event(PlatformEvent::Keyboard {
         name: EventName::KeyDown,
@@ -96,17 +92,8 @@ pub async fn multiple_lines_single_editor() {
     // Text and cursor have changed
     let cursor = root.get(1).get(0);
     let content = root.get(0).get(0).get(0);
-    #[cfg(not(target_os = "linux"))]
-    {
-        assert_eq!(content.text(), Some("Hello! Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:6"));
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-        assert_eq!(content.text(), Some("Hell!o Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:5"));
-    }
+    assert_eq!(content.text(), Some("Hello! Rustaceans\nHello Rustaceans"));
+    assert_eq!(cursor.text(), Some("0:6"));
 
     // Move cursor to the begining
     utils.push_event(PlatformEvent::Mouse {
@@ -275,12 +262,8 @@ pub async fn single_line_mulitple_editors() {
     // Cursor has been moved
     let root = utils.root().get(0);
     let cursor = root.get(2).get(0);
-    #[cfg(not(target_os = "linux"))]
     assert_eq!(cursor.text(), Some("0:5"));
 
-    #[cfg(target_os = "linux")]
-    assert_eq!(cursor.text(), Some("0:4"));
-
     // Insert text
     utils.push_event(PlatformEvent::Keyboard {
         name: EventName::KeyDown,
@@ -295,17 +278,8 @@ pub async fn single_line_mulitple_editors() {
     let cursor = root.get(2).get(0);
     let content = root.get(0).get(0).get(0);
 
-    #[cfg(not(target_os = "linux"))]
-    {
-        assert_eq!(content.text(), Some("Hello! Rustaceans\n"));
-        assert_eq!(cursor.text(), Some("0:6"));
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-        assert_eq!(content.text(), Some("Hell!o Rustaceans\n"));
-        assert_eq!(cursor.text(), Some("0:5"));
-    }
+    assert_eq!(content.text(), Some("Hello! Rustaceans\n"));
+    assert_eq!(cursor.text(), Some("0:6"));
 
     // Second line
     let content = root.get(1).get(0).get(0);
@@ -391,18 +365,7 @@ pub async fn highlight_multiple_lines_single_editor() {
     utils.wait_for_update().await;
 
     let highlights = root.child(0).unwrap().state().cursor.highlights.clone();
-
-    #[cfg(not(target_os = "linux"))]
-    let start = 5;
-    #[cfg(not(target_os = "linux"))]
-    let end = 28;
-
-    #[cfg(target_os = "linux")]
-    let start = 4;
-    #[cfg(target_os = "linux")]
-    let end = 27;
-
-    assert_eq!(highlights, Some(vec![(start, end)]))
+    assert_eq!(highlights, Some(vec![(5, 28)]))
 }
 
 #[tokio::test]
@@ -510,32 +473,10 @@ pub async fn highlights_single_line_mulitple_editors() {
     utils.wait_for_update().await;
 
     let highlights_1 = root.child(0).unwrap().state().cursor.highlights.clone();
-
-    #[cfg(not(target_os = "linux"))]
-    let start = 5;
-    #[cfg(not(target_os = "linux"))]
-    let end = 17;
-
-    #[cfg(target_os = "linux")]
-    let start = 4;
-    #[cfg(target_os = "linux")]
-    let end = 17;
-
-    assert_eq!(highlights_1, Some(vec![(start, end)]));
+    assert_eq!(highlights_1, Some(vec![(5, 17)]));
 
     let highlights_2 = root.child(1).unwrap().state().cursor.highlights.clone();
-
-    #[cfg(not(target_os = "linux"))]
-    let start = 0;
-    #[cfg(not(target_os = "linux"))]
-    let end = 11;
-
-    #[cfg(target_os = "linux")]
-    let start = 0;
-    #[cfg(target_os = "linux")]
-    let end = 10;
-
-    assert_eq!(highlights_2, Some(vec![(start, end)]));
+    assert_eq!(highlights_2, Some(vec![(0, 11)]));
 }
 
 #[tokio::test]
@@ -801,12 +742,8 @@ pub async fn backspace_remove() {
     // Cursor has been moved
     let root = utils.root().get(0);
     let cursor = root.get(1).get(0);
-    #[cfg(not(target_os = "linux"))]
     assert_eq!(cursor.text(), Some("0:5"));
 
-    #[cfg(target_os = "linux")]
-    assert_eq!(cursor.text(), Some("0:4"));
-
     // Insert text
     utils.push_event(PlatformEvent::Keyboard {
         name: EventName::KeyDown,
@@ -821,17 +758,8 @@ pub async fn backspace_remove() {
     // Text and cursor have changed
     let cursor = root.get(1).get(0);
     let content = root.get(0).get(0).get(0);
-    #[cfg(not(target_os = "linux"))]
-    {
-        assert_eq!(content.text(), Some("Hello🦀 Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:6"));
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-        assert_eq!(content.text(), Some("Hell🦀o Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:5"));
-    }
+    assert_eq!(content.text(), Some("Hello🦀 Rustaceans\nHello Rustaceans"));
+    assert_eq!(cursor.text(), Some("0:6"));
 
     // Remove text
     utils.push_event(PlatformEvent::Keyboard {
@@ -847,17 +775,8 @@ pub async fn backspace_remove() {
     // Text and cursor have changed
     let cursor = root.get(1).get(0);
     let content = root.get(0).get(0).get(0);
-    #[cfg(not(target_os = "linux"))]
-    {
-        assert_eq!(content.text(), Some("Hello Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:5"));
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-        assert_eq!(content.text(), Some("Hello Rustaceans\nHello Rustaceans"));
-        assert_eq!(cursor.text(), Some("0:4"));
-    }
+    assert_eq!(content.text(), Some("Hello Rustaceans\nHello Rustaceans"));
+    assert_eq!(cursor.text(), Some("0:5"));
 }
 
 #[tokio::test]
@@ -965,18 +884,7 @@ pub async fn highlight_shift_click_multiple_lines_single_editor() {
     utils.wait_for_update().await;
 
     let highlights = root.child(0).unwrap().state().cursor.highlights.clone();
-
-    #[cfg(not(target_os = "linux"))]
-    let start = 5;
-    #[cfg(not(target_os = "linux"))]
-    let end = 28;
-
-    #[cfg(target_os = "linux")]
-    let start = 4;
-    #[cfg(target_os = "linux")]
-    let end = 27;
-
-    assert_eq!(highlights, Some(vec![(start, end)]))
+    assert_eq!(highlights, Some(vec![(5, 28)]))
 }
 
 #[tokio::test]
@@ -1099,31 +1007,11 @@ pub async fn highlights_shift_click_single_line_mulitple_editors() {
 
     let highlights_1 = root.child(0).unwrap().state().cursor.highlights.clone();
 
-    #[cfg(not(target_os = "linux"))]
-    let start = 5;
-    #[cfg(not(target_os = "linux"))]
-    let end = 17;
-
-    #[cfg(target_os = "linux")]
-    let start = 4;
-    #[cfg(target_os = "linux")]
-    let end = 17;
-
-    assert_eq!(highlights_1, Some(vec![(start, end)]));
+    assert_eq!(highlights_1, Some(vec![(5, 17)]));
 
     let highlights_2 = root.child(1).unwrap().state().cursor.highlights.clone();
 
-    #[cfg(not(target_os = "linux"))]
-    let start = 0;
-    #[cfg(not(target_os = "linux"))]
-    let end = 11;
-
-    #[cfg(target_os = "linux")]
-    let start = 0;
-    #[cfg(target_os = "linux")]
-    let end = 10;
-
-    assert_eq!(highlights_2, Some(vec![(start, end)]));
+    assert_eq!(highlights_2, Some(vec![(0, 11)]));
 }
 
 #[tokio::test]

crates/renderer/src/app.rs

@@ -93,7 +93,7 @@ impl Application {
         }
 
         let font_mgr: FontMgr = provider.into();
-        font_collection.set_default_font_manager(def_mgr, "Fira Sans");
+        font_collection.set_default_font_manager(def_mgr, None);
         font_collection.set_dynamic_font_manager(font_mgr.clone());
 
         let (event_emitter, event_receiver) = mpsc::unbounded_channel();

crates/renderer/src/config.rs

@@ -3,9 +3,12 @@ use std::{
     sync::Arc,
 };
 
-use freya_core::plugins::{
-    FreyaPlugin,
-    PluginsManager,
+use freya_core::{
+    plugins::{
+        FreyaPlugin,
+        PluginsManager,
+    },
+    style::default_fonts,
 };
 use freya_engine::prelude::Color;
 use freya_node_state::Parse;
@@ -88,7 +91,7 @@ impl<'a, T: Clone> Default for LaunchConfig<'a, T> {
             window_config: Default::default(),
             embedded_fonts: Default::default(),
             plugins: Default::default(),
-            default_fonts: vec!["Fira Sans".to_string()],
+            default_fonts: default_fonts(),
         }
     }
 }

crates/testing/src/launch.rs

@@ -47,7 +47,7 @@ pub fn launch_test_with_config(root: AppComponent, config: TestingConfig) -> Tes
     let mut font_collection = FontCollection::new();
     let font_mgr = FontMgr::default();
     font_collection.set_dynamic_font_manager(font_mgr.clone());
-    font_collection.set_default_font_manager(font_mgr, "Fira Sans");
+    font_collection.set_default_font_manager(font_mgr, None);
 
     let mut handler = TestingHandler {
         vdom,

crates/testing/src/test_handler.rs

@@ -204,7 +204,7 @@ impl TestingHandler {
             },
             &mut self.font_collection,
             SCALE_FACTOR as f32,
-            &["Fira Sans".to_string()],
+            &default_fonts(),
         );
 
         let dom = &self.utils.sdom().get_mut();