feat: ConfigProvider CSSVars

demo/src/app.rs

@@ -59,6 +59,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 <Route path="/card" view=CardMdPage/>
                 <Route path="/checkbox" view=CheckboxMdPage/>
                 <Route path="/color-picker" view=ColorPickerMdPage/>
+                <Route path="/config-provider" view=ConfigProviderMdPage/>
                 <Route path="/date-picker" view=DatePickerMdPage/>
                 <Route path="/divider" view=DividerMdPage/>
                 <Route path="/drawer" view=DrawerMdPage/>
@@ -86,7 +87,6 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 <Route path="/table" view=TableMdPage/>
                 <Route path="/tabs" view=TabsMdPage/>
                 <Route path="/tag" view=TagMdPage/>
-                <Route path="/theme" view=ThemeMdPage/>
                 <Route path="/time-picker" view=TimePickerMdPage/>
                 <Route path="/typography" view=TypographyMdPage/>
                 <Route path="/upload" view=UploadMdPage/>

demo/src/pages/components.rs

@@ -106,7 +106,7 @@ impl IntoView for MenuItemOption {
 pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
     vec![
         MenuGroupOption {
-            label: "Common Components".into(),
+            label: "Components".into(),
             children: vec![
                 MenuItemOption {
                     value: "accordion".into(),
@@ -124,6 +124,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "card".into(),
                     label: "Card".into(),
                 },
+                MenuItemOption {
+                    value: "config-provider".into(),
+                    label: "Config Provider".into(),
+                },
                 MenuItemOption {
                     value: "divider".into(),
                     label: "Divider".into(),
@@ -310,13 +314,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                 label: "Scrollbar".into(),
             }],
         },
-        MenuGroupOption {
-            label: "Config Components".into(),
-            children: vec![MenuItemOption {
-                value: "theme".into(),
-                label: "Theme".into(),
-            }],
-        },
         MenuGroupOption {
             label: "Mobile Components".into(),
             children: vec![

demo_markdown/docs/config_provider/mod.md

@@ -1,47 +1,47 @@
-# Theme
+# ConfigProvider
 
-### ThemeProvider
+### Theme
 
 ```rust demo
-let theme = create_rw_signal(Theme::light());
+let theme = RwSignal::new(Theme::light());
 
 view! {
-    <ThemeProvider theme>
+    <ConfigProvider theme>
         <Card>
             <Space>
                 <Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
                 <Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
             </Space>
         </Card>
-    </ThemeProvider>
+    </ConfigProvider>
 }
 ```
 
 ### Customize Theme
 
 ```rust demo
-let theme = create_rw_signal(Theme::light());
+let theme = RwSignal::new(Theme::light());
 let on_customize_theme = move |_| {
     theme.update(|theme| {
-        theme.common.color_primary = "#f5222d".to_string();
+        theme.color.color_brand_background = "#f5222d".to_string();
-        theme.common.color_primary_hover = "#ff4d4f".to_string();
+        theme.color.color_brand_background_hover = "#ff4d4f".to_string();
-        theme.common.color_primary_active = "#cf1322".to_string();
+        theme.color.color_brand_background_pressed = "#cf1322".to_string();
     });
 };
 
 view! {
-    <ThemeProvider theme>
+    <ConfigProvider theme>
         <Card>
             <Space>
-                <Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
+                <Button appearance=ButtonAppearance::Primary on_click=move |_| theme.set(Theme::light())>"Light"</Button>
-                <Button on_click=on_customize_theme>"Customize Theme"</Button>
+                <Button appearance=ButtonAppearance::Primary on_click=on_customize_theme>"Customize Theme"</Button>
             </Space>
         </Card>
-    </ThemeProvider>
+    </ConfigProvider>
 }
 ```
 
-### ThemeProvider Props
+### ConfigProvider Props
 
 | Name  | Type                      | Default              | Description |
 | ----- | ------------------------- | -------------------- | ----------- |

demo_markdown/src/lib.rs

@@ -41,6 +41,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "CardMdPage" => "../docs/card/mod.md",
         "CheckboxMdPage" => "../docs/checkbox/mod.md",
         "ColorPickerMdPage" => "../docs/color_picker/mod.md",
+        "ConfigProviderMdPage" => "../docs/config_provider/mod.md",
         "DatePickerMdPage" => "../docs/date_picker/mod.md",
         "DividerMdPage" => "../docs/divider/mod.md",
         "DrawerMdPage" => "../docs/drawer/mod.md",
@@ -68,7 +69,6 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "TableMdPage" => "../docs/table/mod.md",
         "TabsMdPage" => "../docs/tabs/mod.md",
         "TagMdPage" => "../docs/tag/mod.md",
-        "ThemeMdPage" => "../docs/theme/mod.md",
         "TimePickerMdPage" => "../docs/time_picker/mod.md",
         "TypographyMdPage" => "../docs/typography/mod.md",
         "UploadMdPage" => "../docs/upload/mod.md"

thaw/src/config_provider/mod.rs

@@ -16,6 +16,7 @@ pub fn ConfigProvider(
 
     let theme = theme.unwrap_or_else(|| RwSignal::new(Theme::light()));
     let id = StoredValue::new(uuid::Uuid::new_v4().to_string());
+
     mount_dynamic_style(id.get_value(), move || {
         let mut css_vars = String::new();
         theme.with(|theme| {
@@ -28,7 +29,19 @@ pub fn ConfigProvider(
         )
     });
 
-    let config_injection = ConfigInjection { theme, dir };
+    on_cleanup(move || {
+        if let Ok(Some(style)) =
+            document().query_selector(&format!("head style[data-thaw-id=\"{}\"]", id.get_value()))
+        {
+            style.remove();
+        }
+    });
+
+    let config_injection = ConfigInjection {
+        theme,
+        dir,
+        id: id.get_value(),
+    };
 
     view! {
         <Provider value=config_injection>
@@ -47,6 +60,13 @@ pub fn ConfigProvider(
 pub struct ConfigInjection {
     pub theme: RwSignal<Theme>,
     pub dir: RwSignal<Option<ConfigDirection>>,
+    id: String,
+}
+
+impl ConfigInjection {
+    pub fn id(&self) -> &String {
+        &self.id
+    }
 }
 
 #[derive(Clone)]