diff --git a/demo/src/app.rs b/demo/src/app.rs index 2ee8efe..b366485 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -117,11 +117,9 @@ fn TheProvider(children: Children) -> impl IntoView { view! { - // - {children()} + {children()} // - } } diff --git a/demo/src/components/demo.rs b/demo/src/components/demo.rs index a962380..ba488f0 100644 --- a/demo/src/components/demo.rs +++ b/demo/src/components/demo.rs @@ -11,11 +11,11 @@ pub struct DemoCode { #[component] pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option) -> impl IntoView { - let theme = use_theme(Theme::light); + let theme = Theme::use_theme(Theme::light); let css_vars = Memo::new(move |_| { let mut css_vars = String::new(); theme.with(|theme| { - if theme.common.color_scheme == "dark" { + if theme.color.color_scheme == "dark" { css_vars.push_str("--demo-color: #ffffff60;"); css_vars.push_str("--demo-color-hover: #ffffffe0;"); css_vars.push_str("--demo-border-color: #383f52;"); @@ -24,8 +24,7 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option) - css_vars.push_str("--demo-color: #00000060;"); css_vars.push_str("--demo-color-hover: #000000e0;"); css_vars.push_str(&format!( - "--demo-border-color: {};", - theme.common.border_color + "--demo-border-color: var(--colorNeutralStroke2);", )); css_vars.push_str("--demo-background-color: #f9fafb;"); } @@ -34,12 +33,7 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option) - }); let code_class = Memo::new(move |_| { - theme.with(|theme| { - format!( - "demo-demo__code color-scheme--{}", - theme.common.color_scheme - ) - }) + theme.with(|theme| format!("demo-demo__code color-scheme--{}", theme.color.color_scheme)) }); let is_show_code = RwSignal::new(children.is_none()); diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs index 960700e..c0bcb46 100644 --- a/demo/src/components/site_header.rs +++ b/demo/src/components/site_header.rs @@ -6,7 +6,7 @@ use thaw::*; #[component] pub fn SiteHeader() -> impl IntoView { - let theme = use_rw_theme(); + let theme = Theme::use_rw_theme(); let theme_name = create_memo(move |_| { theme.with(|theme| { if theme.name == *"light" { diff --git a/thaw/src/message/mod.rs b/thaw/src/message/mod.rs index 68c5f3c..7fd32f4 100644 --- a/thaw/src/message/mod.rs +++ b/thaw/src/message/mod.rs @@ -1,10 +1,8 @@ mod message_provider; -mod theme; pub use message_provider::*; -pub use theme::MessageTheme; -use crate::{theme::use_theme, Icon, Theme}; +use crate::{Icon, Theme}; use leptos::*; use thaw_components::{CSSTransition, If, Then}; use uuid::Uuid; @@ -25,13 +23,13 @@ impl MessageVariant { MessageVariant::Error => icondata_ai::AiCheckCircleFilled, } } - fn theme_color(&self, theme: &Theme) -> String { - match self { - MessageVariant::Success => theme.common.color_success.clone(), - MessageVariant::Warning => theme.common.color_warning.clone(), - MessageVariant::Error => theme.common.color_error.clone(), - } - } + // fn theme_color(&self, theme: &Theme) -> String { + // match self { + // MessageVariant::Success => theme.common.color_success.clone(), + // MessageVariant::Warning => theme.common.color_warning.clone(), + // MessageVariant::Error => theme.common.color_error.clone(), + // } + // } } #[component] @@ -49,7 +47,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback) -> ); } - let theme = use_theme(Theme::light); + // let theme = use_theme(Theme::light); let css_vars = create_memo(move |_| { let mut css_vars = String::new(); // theme.with(|theme| { @@ -60,7 +58,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback) -> // }); css_vars }); - let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme))); + // let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme))); let on_before_leave = Callback::new(move |_| { let Some(node_el) = message_ref.get() else { @@ -89,7 +87,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback) ->
- +
{content}
diff --git a/thaw/src/message/theme.rs b/thaw/src/message/theme.rs deleted file mode 100644 index 53a27ff..0000000 --- a/thaw/src/message/theme.rs +++ /dev/null @@ -1,20 +0,0 @@ -use crate::theme::ThemeMethod; - -#[derive(Clone)] -pub struct MessageTheme { - pub background_color: String, -} - -impl ThemeMethod for MessageTheme { - fn light() -> Self { - Self { - background_color: "#fff".into(), - } - } - - fn dark() -> Self { - Self { - background_color: "#48484e".into(), - } - } -} diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs index 7b6ee65..c9078e7 100644 --- a/thaw/src/theme/color.rs +++ b/thaw/src/theme/color.rs @@ -2,6 +2,8 @@ use thaw_macro::WriteCSSVars; #[derive(Clone, WriteCSSVars)] pub struct ColorTheme { + pub color_scheme: String, + pub color_neutral_background_static: String, pub color_neutral_background_inverted: String, pub color_neutral_background_disabled: String, @@ -113,6 +115,8 @@ pub struct ColorTheme { impl ColorTheme { pub fn light() -> Self { Self { + color_scheme: "light".into(), + color_neutral_background_static: "#333333".into(), color_neutral_background_inverted: "#292929".into(), color_neutral_background_disabled: "#f0f0f0".into(), @@ -225,6 +229,8 @@ impl ColorTheme { pub fn dark() -> Self { Self { + color_scheme: "dark".into(), + color_neutral_background_static: "#3d3d3d".into(), color_neutral_background_inverted: "#ffffff".into(), color_neutral_background_disabled: "#141414".into(), diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs index eb9c669..2ad3634 100644 --- a/thaw/src/theme/common.rs +++ b/thaw/src/theme/common.rs @@ -1,24 +1,8 @@ -use super::ThemeMethod; use thaw_macro::WriteCSSVars; #[derive(Clone, WriteCSSVars)] pub struct CommonTheme { pub font_family_base: String, - pub border_color: String, - pub color_scheme: String, - - pub color_primary: String, - pub color_primary_hover: String, - pub color_primary_active: String, - pub color_success: String, - pub color_success_hover: String, - pub color_success_active: String, - pub color_warning: String, - pub color_warning_hover: String, - pub color_warning_active: String, - pub color_error: String, - pub color_error_hover: String, - pub color_error_active: String, pub font_size_base_100: String, pub font_size_base_200: String, @@ -75,34 +59,13 @@ pub struct CommonTheme { pub curve_decelerate_max: String, pub curve_decelerate_mid: String, pub curve_easy_ease: String, - - pub height_tiny: String, - pub height_small: String, - pub height_medium: String, - pub height_large: String, - - pub border_radius: String, } impl CommonTheme { - fn common() -> Self { + pub fn new() -> Self { Self { font_family_base: "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(), - border_color: "".into(), - color_scheme: "".into(), - color_primary: "".into(), - color_primary_hover: "".into(), - color_primary_active: "".into(), - color_success: "".into(), - color_success_hover: "".into(), - color_success_active: "".into(), - color_warning: "".into(), - color_warning_hover: "".into(), - color_warning_active: "".into(), - color_error: "".into(), - color_error_hover: "".into(), - color_error_active: "".into(), - + font_size_base_100: "10px".into(), font_size_base_200: "12px".into(), font_size_base_300: "14px".into(), @@ -158,57 +121,6 @@ impl CommonTheme { curve_decelerate_max: "cubic-bezier(0.1,0.9,0.2,1)".into(), curve_decelerate_mid: "cubic-bezier(0,0,0,1)".into(), curve_easy_ease: "cubic-bezier(0.33,0,0.67,1)".into(), - - height_tiny: "22px".into(), - height_small: "28px".into(), - height_medium: "34px".into(), - height_large: "40px".into(), - - border_radius: "3px".into(), - } - } -} - -impl ThemeMethod for CommonTheme { - fn light() -> Self { - Self { - color_scheme: "light".into(), - color_primary: "#0078ff".into(), - color_primary_hover: "#2994ff".into(), - color_primary_active: "#005ed9".into(), - color_success: "#18a058".into(), - color_success_hover: "#36ad6a".into(), - color_success_active: "#0c7a43".into(), - color_warning: "#f0a020".into(), - color_warning_hover: "#fcb040".into(), - color_warning_active: "#c97c10".into(), - color_error: "#d03050".into(), - color_error_hover: "#de576d".into(), - color_error_active: "#ab1f3f".into(), - border_color: "#e5e8eb".into(), - - ..CommonTheme::common() - } - } - fn dark() -> Self { - Self { - color_scheme: "dark".into(), - color_primary: "#0078ff".into(), - color_primary_hover: "#2994ff".into(), - color_primary_active: "#005ed9".into(), - // color_success: "#63e2b7".into(), - // color_success_hover: "#7fe7c4".into(), - color_success: "#18a058".into(), - color_success_hover: "#36ad6a".into(), - color_success_active: "#5acea7".into(), - color_warning: "#f0a020".into(), - color_warning_hover: "#fcb040".into(), - color_warning_active: "#e6c260".into(), - color_error: "#d03050".into(), - color_error_hover: "#de576d".into(), - color_error_active: "#e57272".into(), - border_color: "#1f2537".into(), - ..CommonTheme::common() } } } diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index d8108ef..2ec011b 100644 --- a/thaw/src/theme/mod.rs +++ b/thaw/src/theme/mod.rs @@ -1,15 +1,11 @@ mod color; mod common; -use self::common::CommonTheme; +use crate::ConfigInjection; pub use color::ColorTheme; +pub use common::CommonTheme; use leptos::*; -pub trait ThemeMethod { - fn light() -> Self; - fn dark() -> Self; -} - #[derive(Clone)] pub struct Theme { pub name: String, @@ -21,58 +17,26 @@ impl Theme { pub fn light() -> Self { Self { name: "light".into(), - common: CommonTheme::light(), + common: CommonTheme::new(), color: ColorTheme::light(), } } pub fn dark() -> Self { Self { name: "dark".into(), - common: CommonTheme::dark(), + common: CommonTheme::new(), color: ColorTheme::dark(), } } -} -impl ThemeMethod for Theme { - fn light() -> Self { - Theme::light() + pub fn use_theme(default: impl Fn() -> Theme) -> ReadSignal { + use_context::() + .map_or_else(|| RwSignal::new(default()), |c| c.theme) + .split() + .0 } - fn dark() -> Self { - Theme::dark() - } -} - -#[component] -pub fn ThemeProvider( - #[prop(optional, into)] theme: Option>, - children: Children, -) -> impl IntoView { - let theme = if let Some(theme) = theme { - theme - } else { - create_rw_signal(Theme::light()) - }; - - view! { } -} - -pub fn use_theme(default: impl Fn() -> Theme) -> ReadSignal { - use_context::>() - .unwrap_or_else(|| create_rw_signal(default())) - .split() - .0 -} - -pub fn use_rw_theme() -> RwSignal { - expect_context::>() -} - -#[cfg(test)] -mod tests { - use super::{use_theme, Theme}; - - fn _t_use_theme() { - use_theme(Theme::dark); + + pub fn use_rw_theme() -> RwSignal { + expect_context::().theme } }