From 1bdc9a26c43f233e32594acbc37d4787d17bb177 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Fri, 31 Mar 2023 13:02:44 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/basic/src/main.rs | 4 ++- src/button/mod.rs | 31 ++++++++++++++-- src/button/theme.rs | 14 ++++++++ src/lib.rs | 1 + src/theme/common.rs | 74 ++++++++++++++++++++++++++++++++++++++ src/theme/mod.rs | 28 +++++++++++++++ 6 files changed, 148 insertions(+), 4 deletions(-) create mode 100644 src/button/theme.rs create mode 100644 src/theme/common.rs create mode 100644 src/theme/mod.rs diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs index 6202280..54644ca 100644 --- a/examples/basic/src/main.rs +++ b/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,
- + + {move || count.get()} "sd" {move || count.get()} diff --git a/src/button/mod.rs b/src/button/mod.rs index 6372cda..26abd13 100644 --- a/src/button/mod.rs +++ b/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, + #[prop(optional, into)] color: MaybeSignal, + children: Children, +) -> impl IntoView { + // let theme = use_context::>(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" diff --git a/src/button/theme.rs b/src/button/theme.rs new file mode 100644 index 0000000..debd26b --- /dev/null +++ b/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 { } + } +} \ No newline at end of file diff --git a/src/lib.rs b/src/lib.rs index 2c944f6..f5c3362 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -4,6 +4,7 @@ mod modal; mod progress; mod table; mod teleport; +mod theme; mod utils; pub use button::*; diff --git a/src/theme/common.rs b/src/theme/common.rs new file mode 100644 index 0000000..990e32a --- /dev/null +++ b/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(), + } + } +} \ No newline at end of file diff --git a/src/theme/mod.rs b/src/theme/mod.rs new file mode 100644 index 0000000..292c27c --- /dev/null +++ b/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(), + } + } +}