refactor: BackTop

thaw/src/back_top/back-top.css

@@ -1,4 +1,4 @@
-.thaw-back-top {
+div.thaw-back-top {
     position: fixed;
     cursor: pointer;
     display: flex;
@@ -10,8 +10,8 @@
     border-radius: 22px;
     height: 44px;
     min-width: 44px;
-    box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--shadow4);
-    background-color: var(--thaw-background-color);
+    background-color: var(--colorNeutralBackground1);
 }
 
 .thaw-back-top.fade-in-scale-up-transition-leave-active {
@@ -43,18 +43,15 @@
     transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.thaw-back-top:hover {
+.thaw-back-top:hover,
-    box-shadow: 0 2px 12px 0px #0000002e;
+.thaw-back-top:active {
+    box-shadow: var(--shadow16);
 }
 
 .thaw-back-top:hover > svg {
-    color: var(--thaw-icon-color-hover);
+    color: var(--colorBrandBackgroundHover);
-}
-
-.thaw-back-top:active {
-    box-shadow: 0 2px 12px 0px #0000002e;
 }
 
 .thaw-back-top:active svg {
-    color: var(--thaw-icon-color-active);
+    color: var(--colorBrandBackgroundPressed);
 }

thaw/src/back_top/mod.rs

@@ -1,12 +1,9 @@
-mod theme;
+use crate::{ConfigInjection, Icon};
-
-pub use theme::BackTopTheme;
-
-use crate::{use_theme, Icon, Theme};
 use leptos::{html::ToHtmlElement, *};
 use thaw_components::{CSSTransition, Fallback, OptionComp, Teleport};
 use thaw_utils::{
-    add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle, OptionalProp,
+    add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle,
+    OptionalProp,
 };
 
 #[component]
@@ -18,27 +15,7 @@ pub fn BackTop(
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     mount_style("back-top", include_str!("./back-top.css"));
-    let theme = use_theme(Theme::light);
+    let config_provider = ConfigInjection::use_();
-    let style = Memo::new(move |_| {
-        let mut style = String::new();
-        style.push_str(&format!("right: {}px;", right.get_untracked()));
-        style.push_str(&format!("bottom: {}px;", bottom.get_untracked()));
-        theme.with(|theme| {
-            style.push_str(&format!(
-                "--thaw-icon-color-hover: {};",
-                theme.common.color_primary_hover
-            ));
-            style.push_str(&format!(
-                "--thaw-icon-color-active: {};",
-                theme.common.color_primary_active
-            ));
-            style.push_str(&format!(
-                "--thaw-background-color: {};",
-                theme.back_top.background_color
-            ));
-        });
-        style
-    });
     let placeholder_ref = NodeRef::<html::Div>::new();
     let back_top_ref = NodeRef::<html::Div>::new();
     let is_show_back_top = RwSignal::new(false);
@@ -105,10 +82,11 @@ pub fn BackTop(
                     let:display
                 >
                     <div
-                        class=class_list!["thaw-back-top", class.map(| c | move || c.get())]
+                        class=class_list!["thaw-config-provider thaw-back-top", class.map(| c | move || c.get())]
+                        data-thaw-id=config_provider.id().clone()
                         ref=back_top_ref
                         style=move || {
-                            display.get().map(|d| d.to_string()).unwrap_or_else(|| style.get())
+                            display.get().map_or_else(|| format!("right: {}px; bottom: {}px", right.get(), bottom.get()), |d| d.to_string())
                         }
                         on:click=on_click
                     >

thaw/src/back_top/theme.rs

@@ -1,21 +0,0 @@
-use crate::theme::ThemeMethod;
-
-#[derive(Clone)]
-pub struct BackTopTheme {
-    pub background_color: String,
-    
-}
-
-impl ThemeMethod for BackTopTheme {
-    fn light() -> Self {
-        Self {
-            background_color: "#fff".into(),
-        }
-    }
-
-    fn dark() -> Self {
-        Self {
-            background_color: "#48484e".into(),
-        }
-    }
-}

thaw/src/theme/mod.rs

@@ -3,8 +3,8 @@ mod common;
 
 use self::common::CommonTheme;
 use crate::{
-    AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, MessageTheme, ProgressTheme,
+    AlertTheme, AnchorTheme, CalendarTheme, MessageTheme, ProgressTheme, ScrollbarTheme,
-    ScrollbarTheme, SelectTheme,
+    SelectTheme,
 };
 pub use color::ColorTheme;
 use leptos::*;
@@ -25,7 +25,6 @@ pub struct Theme {
     pub progress: ProgressTheme,
     pub calendar: CalendarTheme,
     pub scrollbar: ScrollbarTheme,
-    pub back_top: BackTopTheme,
     pub anchor: AnchorTheme,
 }
 
@@ -42,7 +41,6 @@ impl Theme {
             progress: ProgressTheme::light(),
             calendar: CalendarTheme::light(),
             scrollbar: ScrollbarTheme::light(),
-            back_top: BackTopTheme::light(),
             anchor: AnchorTheme::light(),
         }
     }
@@ -57,7 +55,6 @@ impl Theme {
             progress: ProgressTheme::dark(),
             calendar: CalendarTheme::dark(),
             scrollbar: ScrollbarTheme::dark(),
-            back_top: BackTopTheme::dark(),
             anchor: AnchorTheme::dark(),
         }
     }