✨ feat: add theme

examples/basic/src/main.rs

@@ -9,9 +9,11 @@ fn main() {
 pub fn App(cx: Scope) -> impl IntoView {
     let (count, set_count) = create_signal(cx, 0.0);
     let (open, set_open) = create_signal(cx, true);
+    let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
     view! { cx,
         <div class="root">
-            <Button on:click=move |_| set_count.update(move |value| *value += 1.0)>"click"</Button>
+            <Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>"click"</Button>
+            <Button on:click=move |_| set_count.update(move |value| *value += 1.0) type_=button_type>"click"</Button>
             {move || count.get()}
             <Modal title=Some("".to_string()) open=open on_cancel=Some(Box::new(move || { set_open.set(false) }))>
                 "sd" {move || count.get()}

src/button/mod.rs

@@ -1,12 +1,37 @@
-use crate::utils::mount_style::mount_style;
+mod theme;
+use crate::{theme::Theme, utils::mount_style::mount_style};
 use leptos::*;
 use stylers::style_sheet_str;
+pub use theme::ButtonTheme;
+
+#[derive(Default, PartialEq, Clone)]
+pub enum ButtonType {
+    #[default]
+    PRIMARY,
+    SOLID,
+    TEXT
+}
+
+#[derive(Default)]
+pub enum ButtonColor {
+    #[default]
+    PRIMARY,
+    WARNING,
+    Error,
+}
 
 #[component]
-pub fn Button(cx: Scope, #[prop(default = false)] text: bool, children: Children) -> impl IntoView {
+pub fn Button(
+    cx: Scope,
+    #[prop(optional, into)] type_: MaybeSignal<ButtonType>,
+    #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
+    children: Children,
+) -> impl IntoView {
+    // let theme = use_context::<ReadSignal<Theme>>(cx);
+    // let css_vars = create_memo(cx, |_| format!("--font-color"));
     let class_name = mount_style("button", || style_sheet_str!("./src/button/button.css"));
     let class = move || {
-        if text {
+        if type_.get() == ButtonType::TEXT {
             "melt-button melt-button--text"
         } else {
             "melt-button"

src/button/theme.rs

@@ -0,0 +1,14 @@
+use crate::theme::ThemeMethod;
+pub struct ButtonTheme {
+
+}
+
+impl ThemeMethod for ButtonTheme {
+    fn light() -> Self {
+        Self {  }
+    }
+
+    fn dark() -> Self {
+        Self {  }
+    }
+}

src/lib.rs

@@ -4,6 +4,7 @@ mod modal;
 mod progress;
 mod table;
 mod teleport;
+mod theme;
 mod utils;
 
 pub use button::*;

src/theme/common.rs

@@ -0,0 +1,74 @@
+use super::ThemeMethod;
+pub struct CommonTheme {
+    pub font_family: String,
+
+    pub color_primary: String,
+
+    pub font_size: String,
+    pub font_size_small: String,
+    pub font_size_medium: String,
+    pub font_size_large: String,
+    pub font_size_huge: String,
+
+    pub line_height: String,
+    pub line_height_small: String,
+    pub line_height_medium: String,
+    pub line_height_large: String,
+    pub line_height_huge: String,
+
+    pub border_radius: String,
+    pub border_radius_small: String,
+    pub border_radius_medium: String,
+    pub border_radius_large: String,
+}
+
+impl ThemeMethod for CommonTheme {
+    fn light() -> Self {
+        Self {
+            font_family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'".into(),
+            
+            color_primary: "#f5222d".into(),
+            
+            font_size: "14px".into(),
+            font_size_small: "12px".into(),
+            font_size_medium: "16px".into(),
+            font_size_large: "20px".into(),
+            font_size_huge: "24px".into(),
+
+            line_height: "22px".into(),
+            line_height_small: "20px".into(),
+            line_height_medium: "24px".into(),
+            line_height_large: "28px".into(),
+            line_height_huge: "32px".into(),
+
+            border_radius: "3px".into(),
+            border_radius_small: "2px".into(),
+            border_radius_medium: "4px".into(),
+            border_radius_large: "8px".into(),
+        }
+    }
+    fn dark() -> Self {
+        Self {
+            font_family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'".into(),
+            
+            color_primary: "#d32029".into(),
+            
+            font_size: "14px".into(),
+            font_size_small: "12px".into(),
+            font_size_medium: "16px".into(),
+            font_size_large: "20px".into(),
+            font_size_huge: "24px".into(),
+
+            line_height: "22px".into(),
+            line_height_small: "20px".into(),
+            line_height_medium: "24px".into(),
+            line_height_large: "28px".into(),
+            line_height_huge: "32px".into(),
+
+            border_radius: "3px".into(),
+            border_radius_small: "2px".into(),
+            border_radius_medium: "4px".into(),
+            border_radius_large: "8px".into(),
+        }
+    }
+}

src/theme/mod.rs

@@ -0,0 +1,28 @@
+mod common;
+use self::common::CommonTheme;
+use crate::ButtonTheme;
+
+pub trait ThemeMethod {
+    fn light() -> Self;
+    fn dark() -> Self;
+}
+
+pub struct Theme {
+    common: CommonTheme,
+    button: ButtonTheme,
+}
+
+impl ThemeMethod for Theme {
+    fn light() -> Self {
+        Self {
+            common: CommonTheme::light(),
+            button: ButtonTheme::light(),
+        }
+    }
+    fn dark() -> Self {
+        Self {
+            common: CommonTheme::dark(),
+            button: ButtonTheme::dark(),
+        }
+    }
+}