feat: modify the spinner style

demo/src/pages/mod.rs

@@ -85,5 +85,3 @@ pub use time_picker::*;
 pub use toast::*;
 pub use typography::*;
 pub use upload::*;
-
-

demo/src/pages/spinner/mod.rs

@@ -58,14 +58,22 @@ pub fn SpinnerPage() -> impl IntoView {
                 <tbody>
                     <tr>
                         <td>"class"</td>
-                        <td>"MaybeSignal<String>"</td>
-                        <td>"Default::default()"</td>
+                        <td>
+                            <Text code=true>"MaybeSignal<String>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"Default::default()"</Text>
+                        </td>
                         <td>"Additional classes for the spinner element."</td>
                     </tr>
                     <tr>
                         <td>"size"</td>
-                        <td>"MaybeSignal<SpinnerSize>"</td>
-                        <td>"SpinnerSize::Medium"</td>
+                        <td>
+                            <Text code=true>"MaybeSignal<SpinnerSize>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"SpinnerSize::Medium"</Text>
+                        </td>
                         <td>"Spinner size."</td>
                     </tr>
                 </tbody>

src/spinner/mod.rs

@@ -2,7 +2,11 @@ mod theme;
 
 #[cfg(not(feature = "ssr"))]
 use crate::utils::dyn_classes;
-use crate::{theme::use_theme, utils::{mount_style, ssr_class}, Theme};
+use crate::{
+    theme::use_theme,
+    utils::{mount_style, ssr_class},
+    Theme,
+};
 use leptos::*;
 
 pub use theme::SpinnerTheme;
@@ -17,7 +21,6 @@ pub enum SpinnerSize {
 }
 
 impl SpinnerSize {
-
     fn theme_height(&self, theme: &Theme) -> String {
         match self {
             SpinnerSize::Tiny => theme.common.height_tiny.clone(),
@@ -28,13 +31,12 @@ impl SpinnerSize {
     }
 }
 
-
 #[component]
 pub fn Spinner(
     #[prop(optional, into)] class: MaybeSignal<String>,
     #[prop(optional, into)] size: MaybeSignal<SpinnerSize>,
 ) -> impl IntoView {
-    mount_style("tag", include_str!("./spinner.css"));
+    mount_style("spinner", include_str!("./spinner.css"));
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
@@ -47,21 +49,18 @@ pub fn Spinner(
                 "--thaw-background-color: {};",
                 &theme.spinner.background_color
             ));
-            css_vars.push_str(&format!(
-                "--thaw-color: {};",
-                &theme.spinner.color
-            ));
+            css_vars.push_str(&format!("--thaw-color: {};", &theme.common.color_primary));
         });
         css_vars
     });
 
     let ssr_class = ssr_class(&class);
     view! {
-        <div 
+        <div
             class=ssr_class
             use:dyn_classes=class
-            class="thaw-spinner" 
-            style=move || css_vars.get()>
-        </div>
+            class="thaw-spinner"
+            style=move || css_vars.get()
+        ></div>
     }
 }

src/spinner/spinner.css

@@ -8,6 +8,7 @@
     height: var(--thaw-height);
     outline: 1px solid transparent;
     animation: 1s linear 0s infinite normal none running spin;
+    box-sizing: border-box;
 }
 
 @keyframes spin {

src/spinner/theme.rs

@@ -3,21 +3,18 @@ use crate::theme::ThemeMethod;
 #[derive(Clone)]
 pub struct SpinnerTheme {
     pub background_color: String,
-    pub color: String,
 }
 
 impl ThemeMethod for SpinnerTheme {
     fn light() -> Self {
         Self {
             background_color: "#0000000a".into(),
-            color: " #0078ff".into(),
         }
     }
 
     fn dark() -> Self {
         Self {
             background_color: "#2b2f31".into(),
-            color: "#0078ff".into(),
         }
     }
 }

src/theme/mod.rs

@@ -5,8 +5,8 @@ use crate::{
     mobile::{NavBarTheme, TabbarTheme},
     AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, CalendarTheme,
     ColorPickerTheme, InputTheme, MenuTheme, MessageTheme, ProgressTheme, SelectTheme,
-    SkeletionTheme, SliderTheme, SwitchTheme, TableTheme, TagTheme, TimePickerTheme,
-    TypographyTheme, UploadTheme, SpinnerTheme
+    SkeletionTheme, SliderTheme, SpinnerTheme, SwitchTheme, TableTheme, TagTheme, TimePickerTheme,
+    TypographyTheme, UploadTheme,
 };
 use leptos::*;