adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: remove ThemeProvider

Browse source
This commit is contained in:
luoxiao 2024-06-28 11:17:21 +08:00
parent be74dc584e
commit b52d826073
8 changed files with 37 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
demo/src/app.rs
View file

@ -117,11 +117,9 @@ fn TheProvider(children: Children) -> impl IntoView {
view! {
<ConfigProvider theme>
<ThemeProvider theme>
// <MessageProvider>
<LoadingBarProvider>{children()}</LoadingBarProvider>
<LoadingBarProvider>{children()}</LoadingBarProvider>
// </MessageProvider>
</ThemeProvider>
</ConfigProvider>
}
}

14
demo/src/components/demo.rs
View file

@ -11,11 +11,11 @@ pub struct DemoCode {
#[component]
pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -> 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<Children>) -
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<Children>) -
});
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());

2
demo/src/components/site_header.rs
View file

@ -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" {

24
thaw/src/message/mod.rs
View file

@ -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<Uuid, ()>) ->
);
}
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<Uuid, ()>) ->
// });
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<Uuid, ()>) ->
<div class="thaw-message-wrapper" ref=message_ref>
<div class="thaw-message" style=move || css_vars.get()>
<div class="thaw-message__icon">
<Icon icon=variant.icon() style/>
<Icon icon=variant.icon()/>
</div>
<div class="thaw-message__content">{content}</div>
<If cond=closable>

20
thaw/src/message/theme.rs
View file

@ -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(),
}
}
}

6
thaw/src/theme/color.rs
View file

@ -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(),

92
thaw/src/theme/common.rs
View file

@ -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()
}
}
}

60
thaw/src/theme/mod.rs
View file

@ -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<Theme> {
use_context::<ConfigInjection>()
.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<RwSignal<Theme>>,
children: Children,
) -> impl IntoView {
let theme = if let Some(theme) = theme {
theme
} else {
create_rw_signal(Theme::light())
};
view! { <Provider value=theme children/> }
}
pub fn use_theme(default: impl Fn() -> Theme) -> ReadSignal<Theme> {
use_context::<RwSignal<Theme>>()
.unwrap_or_else(|| create_rw_signal(default()))
.split()
.0
}
pub fn use_rw_theme() -> RwSignal<Theme> {
expect_context::<RwSignal<Theme>>()
}
#[cfg(test)]
mod tests {
use super::{use_theme, Theme};
fn _t_use_theme() {
use_theme(Theme::dark);
pub fn use_rw_theme() -> RwSignal<Theme> {
expect_context::<ConfigInjection>().theme
}
}