diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 72f4338..4b2fb5c 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -163,6 +163,10 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/config-provider".into(), label: "Config Provider".into(), }, + MenuItemOption { + value: "/components/date-picker".into(), + label: "Date Picker".into(), + }, MenuItemOption { value: "/components/divider".into(), label: "Divider".into(), @@ -215,10 +219,6 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/checkbox".into(), label: "Checkbox".into(), }, - MenuItemOption { - value: "/components/date-picker".into(), - label: "Date Picker".into(), - }, MenuItemOption { value: "/components/input".into(), label: "Input".into(), diff --git a/thaw/src/date_picker/date-picker.css b/thaw/src/date_picker/date-picker.css index d00891b..f3f6343 100644 --- a/thaw/src/date_picker/date-picker.css +++ b/thaw/src/date_picker/date-picker.css @@ -1,10 +1,9 @@ .thaw-date-picker-panel { width: 300px; - background-color: var(--thaw-background-color); - border-radius: 3px; + background-color: var(--colorNeutralBackground1); + border-radius: var(--borderRadiusMedium); box-sizing: border-box; - box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), - 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow16); } .thaw-date-picker-date-panel__calendar { @@ -18,10 +17,6 @@ justify-content: space-between; } -.thaw-date-picker-date-panel__header > button { - color: var(--thaw-font-color-other-month); -} - .thaw-date-picker-date-panel__header-month-year { flex: 1; display: flex; @@ -37,7 +32,7 @@ } .thaw-date-picker-date-panel__weekdays { - border-bottom: 1px solid var(--thaw-item-border-color); + border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1); margin-bottom: 2px; padding: 6px 4px; } @@ -55,7 +50,7 @@ } .thaw-date-picker-date-panel__item--other-month { - color: var(--thaw-font-color-other-month); + color: var(--colorNeutralForegroundDisabled); } .thaw-date-picker-date-panel__item-day { @@ -75,17 +70,17 @@ height: 4px; width: 4px; border-radius: 2px; - background-color: var(--thaw-background-color-today); + background-color: var(--colorBrandBackground); } .thaw-date-picker-date-panel__item:hover .thaw-date-picker-date-panel__item-day { - background-color: var(--thaw-item-background-color-hover); + background-color: var(--colorNeutralBackground1Hover); } .thaw-date-picker-date-panel__item--selected .thaw-date-picker-date-panel__item-day { - background-color: var(--thaw-background-color-today) !important; + background-color: var(--colorBrandBackground) !important; color: white; } @@ -95,7 +90,7 @@ flex-direction: row-reverse; justify-content: space-between; align-items: center; - border-top: 1px solid var(--thaw-item-border-color); + border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1); } .thaw-date-picker-date-panel__header-year { @@ -110,7 +105,7 @@ grid-template-columns: 28px 1fr 28px; align-items: center; justify-content: space-between; - border-bottom: 1px solid var(--thaw-item-border-color); + border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1); padding: 2px 6px; } @@ -118,15 +113,10 @@ display: flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid var(--thaw-item-border-color); + border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1); padding: 4px 6px; } -.thaw-date-picker-year-panel__header > button, -.thaw-date-picker-month-panel__header > button { - color: var(--thaw-font-color-other-month); -} - .thaw-date-picker-year-panel__years, .thaw-date-picker-month-panel__months { display: grid; @@ -137,7 +127,7 @@ .thaw-date-picker-year-panel__item:first-child, .thaw-date-picker-year-panel__item:last-child { - color: var(--thaw-font-color-other-month); + color: var(--colorNeutralForegroundDisabled); } .thaw-date-picker-year-panel__item, @@ -153,7 +143,7 @@ .thaw-date-picker-year-panel__item-year, .thaw-date-picker-month-panel__item--selected .thaw-date-picker-month-panel__item-month { - background-color: var(--thaw-background-color-today) !important; + background-color: var(--colorBrandBackground) !important; color: white; } @@ -161,7 +151,7 @@ .thaw-date-picker-year-panel__item-year, .thaw-date-picker-month-panel__item:hover .thaw-date-picker-month-panel__item-month { - background-color: var(--thaw-item-background-color-hover); + background-color: var(--colorNeutralBackground1Hover); } .thaw-date-picker-year-panel__item-year, diff --git a/thaw/src/date_picker/mod.rs b/thaw/src/date_picker/mod.rs index 6797885..de35d39 100644 --- a/thaw/src/date_picker/mod.rs +++ b/thaw/src/date_picker/mod.rs @@ -1,8 +1,4 @@ mod panel; -mod theme; - -pub use theme::DatePickerTheme; - use crate::{Icon, Input, InputSuffix, SignalWatch}; use chrono::NaiveDate; use leptos::*; diff --git a/thaw/src/date_picker/panel/mod.rs b/thaw/src/date_picker/panel/mod.rs index 30e42ca..ddba399 100644 --- a/thaw/src/date_picker/panel/mod.rs +++ b/thaw/src/date_picker/panel/mod.rs @@ -2,7 +2,7 @@ mod date_panel; mod month_panel; mod year_panel; -use crate::{use_theme, Theme}; +use crate::ConfigInjection; use chrono::NaiveDate; use date_panel::DatePanel; use leptos::*; @@ -19,33 +19,33 @@ pub fn Panel( #[prop(into)] is_show_panel: MaybeSignal, #[prop(optional)] comp_ref: ComponentRef, ) -> impl IntoView { - let theme = use_theme(Theme::light); - let css_vars = create_memo(move |_| { - let mut css_vars = String::new(); - theme.with(|theme| { - css_vars.push_str(&format!( - "--thaw-background-color-today: {};", - theme.common.color_primary - )); - css_vars.push_str(&format!( - "--thaw-font-color-other-month: {};", - theme.date_picker.panel_other_month_font_color, - )); - css_vars.push_str(&format!( - "--thaw-background-color: {};", - theme.date_picker.panel_background_color - )); - css_vars.push_str(&format!( - "--thaw-item-background-color-hover: {};", - theme.date_picker.panel_date_item_background_color_hover - )); - css_vars.push_str(&format!( - "--thaw-item-border-color: {};", - theme.date_picker.panel_border_color - )); - }); - css_vars - }); + let config_provider = ConfigInjection::use_(); + // let css_vars = create_memo(move |_| { + // let mut css_vars = String::new(); + // theme.with(|theme| { + // css_vars.push_str(&format!( + // "--thaw-background-color-today: {};", + // theme.common.color_primary + // )); + // css_vars.push_str(&format!( + // "--thaw-font-color-other-month: {};", + // theme.date_picker.panel_other_month_font_color, + // )); + // css_vars.push_str(&format!( + // "--thaw-background-color: {};", + // theme.date_picker.panel_background_color + // )); + // css_vars.push_str(&format!( + // "--thaw-item-background-color-hover: {};", + // theme.date_picker.panel_date_item_background_color_hover + // )); + // css_vars.push_str(&format!( + // "--thaw-item-border-color: {};", + // theme.date_picker.panel_border_color + // )); + // }); + // css_vars + // }); let panel_ref = create_node_ref::(); #[cfg(any(feature = "csr", feature = "hydrate"))] @@ -98,8 +98,9 @@ pub fn Panel( let:display >
diff --git a/thaw/src/date_picker/theme.rs b/thaw/src/date_picker/theme.rs deleted file mode 100644 index c7597ca..0000000 --- a/thaw/src/date_picker/theme.rs +++ /dev/null @@ -1,29 +0,0 @@ -use crate::theme::ThemeMethod; - -#[derive(Clone)] -pub struct DatePickerTheme { - pub panel_background_color: String, - pub panel_date_item_background_color_hover: String, - pub panel_border_color: String, - pub panel_other_month_font_color: String, -} - -impl ThemeMethod for DatePickerTheme { - fn light() -> Self { - Self { - panel_background_color: "#fff".into(), - panel_date_item_background_color_hover: "#f1f3f5".into(), - panel_border_color: "#e0e0e6".into(), - panel_other_month_font_color: "#c2c2c2".into(), - } - } - - fn dark() -> Self { - Self { - panel_background_color: "#48484e".into(), - panel_date_item_background_color_hover: "#ffffff1a".into(), - panel_border_color: "#ffffff3d".into(), - panel_other_month_font_color: "#ffffff61".into(), - } - } -} diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index 11a7d63..052d21e 100644 --- a/thaw/src/theme/mod.rs +++ b/thaw/src/theme/mod.rs @@ -4,7 +4,7 @@ mod common; use self::common::CommonTheme; use crate::{ mobile::{NavBarTheme, TabbarTheme}, - AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, DatePickerTheme, MessageTheme, + AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, MessageTheme, ProgressTheme, ScrollbarTheme, SelectTheme, TimePickerTheme, UploadTheme, }; pub use color::ColorTheme; @@ -29,7 +29,6 @@ pub struct Theme { pub progress: ProgressTheme, pub calendar: CalendarTheme, pub time_picker: TimePickerTheme, - pub date_picker: DatePickerTheme, pub scrollbar: ScrollbarTheme, pub back_top: BackTopTheme, pub anchor: AnchorTheme, @@ -50,7 +49,6 @@ impl Theme { progress: ProgressTheme::light(), calendar: CalendarTheme::light(), time_picker: TimePickerTheme::light(), - date_picker: DatePickerTheme::light(), scrollbar: ScrollbarTheme::light(), back_top: BackTopTheme::light(), anchor: AnchorTheme::light(), @@ -70,7 +68,6 @@ impl Theme { progress: ProgressTheme::dark(), calendar: CalendarTheme::dark(), time_picker: TimePickerTheme::dark(), - date_picker: DatePickerTheme::dark(), scrollbar: ScrollbarTheme::dark(), back_top: BackTopTheme::dark(), anchor: AnchorTheme::dark(),