feat: progress theme

demo/src/pages/progress/mod.rs

@@ -11,8 +11,12 @@ pub fn ProgressPage() -> impl IntoView {
             <h1>"Progress"</h1>
             <Demo>
                 <Space vertical=true>
+                    <Progress percentage show_indicator=false/>
                     <Progress percentage />
                     <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
+                    <Progress percentage variant=ProgressVariant::Success/>
+                    <Progress percentage variant=ProgressVariant::Warning/>
+                    <Progress percentage variant=ProgressVariant::Error/>
                     <Space>
                         <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
                             "-10%"
@@ -30,8 +34,12 @@ pub fn ProgressPage() -> impl IntoView {
 
                     view! {
                         <Space vertical=true>
+                            <Progress percentage show_indicator=false/>
                             <Progress percentage />
                             <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
+                            <Progress percentage variant=ProgressVariant::Success/>
+                            <Progress percentage variant=ProgressVariant::Warning/>
+                            <Progress percentage variant=ProgressVariant::Error/>
                             <Space>
                                 <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
                                     "-10%"
@@ -50,6 +58,43 @@ pub fn ProgressPage() -> impl IntoView {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Progress Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"percentage"</td>
+                        <td>"MaybeSignal<f32>"</td>
+                        <td>"0"</td>
+                        <td>"Percentage value."</td>
+                    </tr>
+                    <tr>
+                        <td>"variant"</td>
+                        <td>"MaybeSignal<ProgressVariant>"</td>
+                        <td>"ProgressVariant::Primary"</td>
+                        <td>"Progress variant."</td>
+                    </tr>
+                    <tr>
+                        <td>"show_indicator"</td>
+                        <td>"MaybeSignal<bool>"</td>
+                        <td>"true"</td>
+                        <td>"Whether to display indicators."</td>
+                    </tr>
+                    <tr>
+                        <td>"indicator_placement"</td>
+                        <td>"MaybeSignal<ProgressIndicatorPlacement>"</td>
+                        <td>"ProgressIndicatorPlacement::Outside"</td>
+                        <td>"Indicator placement."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }

src/progress/mod.rs

@@ -1,5 +1,8 @@
+mod theme;
+
 use crate::{use_theme, utils::mount_style, Theme};
 use leptos::*;
+pub use theme::ProgressTheme;
 
 #[derive(Default, Clone, PartialEq)]
 pub enum ProgressIndicatorPlacement {
@@ -19,16 +22,50 @@ impl ProgressIndicatorPlacement {
     }
 }
 
+#[derive(Default, Clone)]
+pub enum ProgressVariant {
+    #[default]
+    Primary,
+    Success,
+    Warning,
+    Error,
+}
+
+impl ProgressVariant {
+    fn theme_background_color(&self, theme: &Theme) -> String {
+        match self {
+            Self::Primary => theme.common.color_primary.clone(),
+            Self::Success => theme.common.color_success.clone(),
+            Self::Warning => theme.common.color_warning.clone(),
+            Self::Error => theme.common.color_error.clone(),
+        }
+    }
+}
+
 #[component]
 pub fn Progress(
     #[prop(into, optional)] percentage: MaybeSignal<f32>,
+    #[prop(into, optional)] variant: MaybeSignal<ProgressVariant>,
     #[prop(into, default = MaybeSignal::Static(true))] show_indicator: MaybeSignal<bool>,
     #[prop(into, optional)] indicator_placement: MaybeSignal<ProgressIndicatorPlacement>,
 ) -> impl IntoView {
     mount_style("progress", include_str!("./progress.css"));
     let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
+        let mut css_vars = String::new();
+        theme.with(|theme| {
+            css_vars.push_str(&format!(
+                "--thaw-background-color: {};",
+                theme.progress.background_color
+            ));
+            css_vars.push_str(&format!(
+                "--thaw-inner-background-color: {};",
+                variant.get().theme_background_color(theme)
+            ));
+        });
+        css_vars
+    });
     let style = move || {
-        let mut style = String::new();
         let percentage = percentage.get();
         let percentage = if percentage < 0.0 {
             0.0
@@ -37,14 +74,7 @@ pub fn Progress(
         } else {
             percentage
         };
-        style.push_str(&format!("width: {}%;", percentage));
-        theme.with(|theme| {
-            style.push_str(&format!(
-                "--thaw-background-color: {};",
-                theme.common.color_primary
-            ));
-        });
-        style
+        format!("width: {}%;", percentage)
     };
 
     let class = move || {
@@ -59,7 +89,7 @@ pub fn Progress(
     };
 
     view! {
-        <div class="thaw-progress">
+        <div class="thaw-progress" style=move || css_vars.get() >
             <div class=class>
                 <div class="thaw-progress__progress-inner" style=style>
                     <Show when=move || show_indicator.get() && indicator_placement.get() == ProgressIndicatorPlacement::Inside>

src/progress/progress.css

@@ -9,19 +9,21 @@
     flex: 1;
     position: relative;
     height: 8px;
-    background: #f2f2f2;
+    line-height: 8px;
+    background: var(--thaw-background-color);
     border-radius: 4px;
 }
 
 .thaw-progress__progress--indicator-inside {
     height: 16px;
+    line-height: 16px;
     font-size: 12px;
     border-radius: 8px;
 }
 
 .thaw-progress__progress-inner {
     position: absolute;
-    background: var(--thaw-background-color);
+    background: var(--thaw-inner-background-color);
     height: 100%;
     border-radius: inherit;
     transition: width 0.1s;

src/progress/theme.rs

@@ -0,0 +1,20 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct ProgressTheme {
+    pub background_color: String,
+}
+
+impl ThemeMethod for ProgressTheme {
+    fn light() -> Self {
+        Self {
+            background_color: "#ebebeb".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            background_color: "#ffffff1f".into(),
+        }
+    }
+}

src/theme/mod.rs

@@ -4,8 +4,8 @@ use self::common::CommonTheme;
 use crate::{
     mobile::{NavBarTheme, TabbarTheme},
     AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, ColorPickerTheme,
-    InputTheme, MenuTheme, MessageTheme, SelectTheme, SkeletionTheme, SliderTheme, SwitchTheme,
-    TableTheme, TagTheme, UploadTheme,
+    InputTheme, MenuTheme, MessageTheme, ProgressTheme, SelectTheme, SkeletionTheme, SliderTheme,
+    SwitchTheme, TableTheme, TagTheme, UploadTheme,
 };
 use leptos::*;
 
@@ -36,6 +36,7 @@ pub struct Theme {
     pub auto_complete: AutoCompleteTheme,
     pub color_picker: ColorPickerTheme,
     pub breadcrumb: BreadcrumbTheme,
+    pub progress: ProgressTheme,
 }
 
 impl Theme {
@@ -61,6 +62,7 @@ impl Theme {
             auto_complete: AutoCompleteTheme::light(),
             color_picker: ColorPickerTheme::light(),
             breadcrumb: BreadcrumbTheme::light(),
+            progress: ProgressTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -85,6 +87,7 @@ impl Theme {
             auto_complete: AutoCompleteTheme::dark(),
             color_picker: ColorPickerTheme::dark(),
             breadcrumb: BreadcrumbTheme::dark(),
+            progress: ProgressTheme::dark(),
         }
     }
 }