refactor: remove GlobalStyle

demo/src/app.rs

@@ -117,7 +117,6 @@ fn TheProvider(children: Children) -> impl IntoView {
     view! {
         <ConfigProvider theme>
             <ThemeProvider theme>
-                <GlobalStyle/>
                 <MessageProvider>
                     <LoadingBarProvider>{children()}</LoadingBarProvider>
                 </MessageProvider>

demo_markdown/docs/theme/mod.md

@@ -17,21 +17,6 @@ view! {
 }
 ```
 
-### GlobalStyle
-
-You can use GlobalStyle to sync common global style to the body element.
-
-```rust
-let theme = create_rw_signal(Theme::light());
-
-view! {
-    <ThemeProvider theme>
-        <GlobalStyle />
-        "..."
-    </ThemeProvider>
-}
-```
-
 ### Customize Theme
 
 ```rust demo

thaw/src/config_provider/mod.rs

@@ -4,7 +4,12 @@ use thaw_utils::mount_style;
 
 #[component]
 pub fn ConfigProvider(
-    #[prop(optional, into)] theme: Option<RwSignal<Theme>>,
+    /// Sets the theme used in a scope.
+    #[prop(optional, into)]
+    theme: Option<RwSignal<Theme>>,
+    /// Sets the direction of text & generated styles.
+    #[prop(optional, into)]
+    dir: RwSignal<Option<ConfigDirection>>,
     children: Children,
 ) -> impl IntoView {
     mount_style("config-provider", include_str!("./config-provider.css"));
@@ -13,62 +18,24 @@ pub fn ConfigProvider(
     let css_vars = Memo::new(move |_| {
         let mut css_vars = String::new();
         theme.with(|theme| {
-            // css_vars.push_str(&format!(
-            //     "--fontFamilyBase: {};",
-            //     theme.common.font_family_base
-            // ));
-            // css_vars.push_str(&format!(
-            //     "--fontSizeBase300: {};",
-            //     theme.common.font_size_base_300
-            // ));
-            // css_vars.push_str(&format!(
-            //     "--lineHeightBase300: {};",
-            //     theme.common.line_height_base300,
-            // ));
-            // css_vars.push_str(&format!(
-            //     "--fontWeightRegular: {};",
-            //     theme.common.font_weight_regular
-            // ));
-            // css_vars.push_str(&format!(
-            //     "--fontWeightSemibold: {};",
-            //     theme.common.font_weight_semibold
-            // ));
-            // css_vars.push_str(&format!(
-            //     "--fontWeightBold: {};",
-            //     theme.common.font_weight_bold
-            // ));
-            // css_vars.push_str(&format!(
-            //     "--strokeWidthThin: {};",
-            //     theme.common.stroke_width_thin,
-            // ));
-            // css_vars.push_str(&format!(
-            //     "--borderRadiusMedium: {};",
-            //     theme.common.border_radius_medium
-            // ));
-            // css_vars.push_str(&format!(
-            //     "--spacingHorizontalM: {};",
-            //     theme.common.spacing_horizontal_m
-            // ));
-
-            // css_vars.push_str(&format!(
-            //     "--durationFaster: {};",
-            //     theme.common.duration_faster
-            // ));
-            // css_vars.push_str(&format!(
-            //     "--curveEasyEase: {};",
-            //     theme.common.curve_easy_ease
-            // ));
             theme.common.write_css_vars(&mut css_vars);
             theme.color.write_css_vars(&mut css_vars);
         });
         css_vars
     });
 
-    let config_injection = ConfigInjection { theme };
+    let config_injection = ConfigInjection {
+        theme,
+        dir: dir.clone(),
+    };
 
     view! {
         <Provider value=config_injection>
-            <div style=move || css_vars.get() class="thaw-config-provider">
+            <div
+                class="thaw-config-provider"
+                style=move || css_vars.get()
+                dir=move || dir.get().map(move |dir| dir.as_str())
+            >
                 {children()}
             </div>
         </Provider>
@@ -78,4 +45,22 @@ pub fn ConfigProvider(
 #[derive(Clone)]
 pub struct ConfigInjection {
     theme: RwSignal<Theme>,
+    dir: RwSignal<Option<ConfigDirection>>,
+}
+
+#[derive(Clone)]
+pub enum ConfigDirection {
+    Ltr,
+    Rtl,
+    Auto,
+}
+
+impl ConfigDirection {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            ConfigDirection::Ltr => "ltr",
+            ConfigDirection::Rtl => "rtl",
+            ConfigDirection::Auto => "auto",
+        }
+    }
 }

thaw/src/global_style/mod.rs

@@ -1,24 +0,0 @@
-use crate::{use_theme, Theme};
-use leptos::*;
-
-#[component]
-pub fn GlobalStyle() -> impl IntoView {
-    let theme = use_theme(Theme::light);
-    create_effect(move |_| {
-        theme.with(|theme| {
-            if let Some(body) = document().body() {
-                // _ = body
-                //     .style()
-                //     .set_property("background-color", &theme.common.background_color);
-                // _ = body.style().set_property("color", &theme.common.font_color);
-                // _ = body
-                //     .style()
-                //     .set_property("font-size", &theme.common.font_size);
-                _ = body
-                    .style()
-                    .set_property("color-scheme", &theme.common.color_scheme);
-                _ = body.style().set_property("margin", "0");
-            }
-        });
-    });
-}

thaw/src/input/mod.rs

@@ -164,7 +164,7 @@ pub fn Input(
     }
 
     view! {
-        <div
+        <span
             class=class_list![
                 "thaw-input", ("thaw-input--focus", move || is_focus.get()),
                 ("thaw-input--disabled", move || disabled.get()), ("thaw-input--invalid", move ||
@@ -204,7 +204,7 @@ pub fn Input(
                 None
             }}
 
-        </div>
+        </span>
     }
 }
 

thaw/src/lib.rs

@@ -16,7 +16,6 @@ mod config_provider;
 mod date_picker;
 mod divider;
 mod drawer;
-mod global_style;
 mod grid;
 mod icon;
 mod image;
@@ -64,7 +63,6 @@ pub use config_provider::*;
 pub use date_picker::*;
 pub use divider::*;
 pub use drawer::*;
-pub use global_style::*;
 pub use grid::*;
 pub use icon::*;
 pub use image::*;