feat: alert component theme

src/alert/alert.css

@@ -4,18 +4,24 @@
     background-color: var(--background-color);
     border: 1px solid var(--border-color);
     border-radius: 3px;
+    line-height: 1.6;
 }
 
 .melt-alert__icon {
     position: absolute;
     top: 12px;
-    left: 8px;
+    left: 10px;
+    font-size: 24px;
+    color: var(--icon-color);
 }
 
 .melt-alert__header {
     font-size: 16px;
+    line-height: 19px;
+    font-weight: 500;
 }
 
-.melt-alert__header + .alert-body__content {
+.melt-alert__header + .melt-alert__content {
     margin-top: 8px;
+    font-size: 14px;
 }

src/alert/mod.rs

@@ -1,6 +1,9 @@
+mod theme;
+
 use crate::{theme::use_theme, utils::mount_style::mount_style, Icon, Theme};
 use icondata::AiIcon;
 use leptos::*;
+pub use theme::AlertTheme;
 
 #[derive(Clone)]
 pub enum AlertVariant {
@@ -10,13 +13,27 @@ pub enum AlertVariant {
 }
 
 impl AlertVariant {
-    pub fn theme_border_color(&self, theme: &Theme) -> String {
+    pub fn theme_icon_color(&self, theme: &Theme) -> String {
         match self {
             AlertVariant::SUCCESS => theme.common.color_success.clone(),
             AlertVariant::WARNING => theme.common.color_warning.clone(),
             AlertVariant::ERROR => theme.common.color_error.clone(),
         }
     }
+    pub fn theme_background_color(&self, theme: &Theme) -> String {
+        match self {
+            AlertVariant::SUCCESS => theme.alert.success_background_color.clone(),
+            AlertVariant::WARNING => theme.alert.warning_background_color.clone(),
+            AlertVariant::ERROR => theme.alert.error_background_color.clone(),
+        }
+    }
+    pub fn theme_border_color(&self, theme: &Theme) -> String {
+        match self {
+            AlertVariant::SUCCESS => theme.alert.success_border_color.clone(),
+            AlertVariant::WARNING => theme.alert.warning_border_color.clone(),
+            AlertVariant::ERROR => theme.alert.error_border_color.clone(),
+        }
+    }
 }
 
 #[component]
@@ -36,9 +53,18 @@ pub fn Alert(
 
             theme.with(|theme| {
                 let variant = variant.get();
-                let border_color = variant.theme_border_color(&theme);
+                css_vars.push_str(&format!(
-                css_vars.push_str(&format!("--background-color: {border_color}aa;"));
+                    "--icon-color: {};",
-                css_vars.push_str(&format!("--border-color: {border_color};"));
+                    variant.theme_icon_color(&theme)
+                ));
+                css_vars.push_str(&format!(
+                    "--background-color: {};",
+                    variant.theme_background_color(&theme)
+                ));
+                css_vars.push_str(&format!(
+                    "--border-color: {};",
+                    variant.theme_border_color(&theme)
+                ));
             });
 
             css_vars
@@ -70,7 +96,7 @@ pub fn Alert(
                         }
                     }
                 }
-                <div class="melt-alert-body__content">
+                <div class="melt-alert__content">
                     { children() }
                 </div>
             </div>

src/alert/theme.rs

@@ -0,0 +1,35 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct AlertTheme {
+    pub success_background_color: String,
+    pub success_border_color: String,
+    pub warning_background_color: String,
+    pub warning_border_color: String,
+    pub error_background_color: String,
+    pub error_border_color: String,
+}
+
+impl ThemeMethod for AlertTheme {
+    fn light() -> Self {
+        Self {
+            success_background_color: "#edf7f2".into(),
+            success_border_color: "#c5e7d5".into(),
+            warning_background_color: "#fef7ed".into(),
+            warning_border_color: "#fae0b5".into(),
+            error_background_color: "#fbeef1".into(),
+            error_border_color: "#f3cbd3".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            success_background_color: "#edf7f2".into(),
+            success_border_color: "#c5e7d5".into(),
+            warning_background_color: "#fef7ed".into(),
+            warning_border_color: "#fae0b5".into(),
+            error_background_color: "#fbeef1".into(),
+            error_border_color: "#f3cbd3".into(),
+        }
+    }
+}

src/theme/mod.rs

@@ -2,7 +2,7 @@ mod common;
 use leptos::*;
 
 use self::common::CommonTheme;
-use crate::{ButtonTheme, InputTheme, MenuTheme, TableTheme};
+use crate::{AlertTheme, ButtonTheme, InputTheme, MenuTheme, TableTheme};
 
 pub trait ThemeMethod {
     fn light() -> Self;
@@ -16,6 +16,7 @@ pub struct Theme {
     pub input: InputTheme,
     pub menu: MenuTheme,
     pub table: TableTheme,
+    pub alert: AlertTheme,
 }
 
 impl Theme {
@@ -26,6 +27,7 @@ impl Theme {
             input: InputTheme::light(),
             menu: MenuTheme::light(),
             table: TableTheme::light(),
+            alert: AlertTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -35,6 +37,7 @@ impl Theme {
             input: InputTheme::dark(),
             menu: MenuTheme::dark(),
             table: TableTheme::dark(),
+            alert: AlertTheme::dark(),
         }
     }
 }
@@ -47,6 +50,7 @@ impl ThemeMethod for Theme {
             input: InputTheme::light(),
             menu: MenuTheme::light(),
             table: TableTheme::light(),
+            alert: AlertTheme::light(),
         }
     }
     fn dark() -> Self {
@@ -56,6 +60,7 @@ impl ThemeMethod for Theme {
             input: InputTheme::dark(),
             menu: MenuTheme::dark(),
             table: TableTheme::dark(),
+            alert: AlertTheme::dark(),
         }
     }
 }