refactor: Calendar

thaw/src/calendar/calendar.css

@@ -23,7 +23,8 @@
     grid-auto-rows: 1fr;
     border-top: 1px solid;
     border-left: 1px solid;
-    border-color: var(--thaw-border-color);
+    border-color: var(--colorNeutralStroke2);
+    border-radius: var(--borderRadiusMedium);
 }
 
 .thaw-calendar-item {
@@ -31,16 +32,16 @@
     padding: 8px 12px;
     border-right: 1px solid;
     border-bottom: 1px solid;
-    border-color: var(--thaw-border-color);
+    border-color: var(--colorNeutralStroke2);
     cursor: pointer;
 }
 
 .thaw-calendar-item:hover {
-    background-color: var(--thaw-background-color-hover);
+    background-color: var(--colorNeutralBackground1Hover);
 }
 
 .thaw-calendar-item--other-month {
-    color: var(--thaw-font-color-other-month);
+    color: var(--colorNeutralForegroundDisabled);
 }
 
 .thaw-calendar-item__header {
@@ -53,7 +54,7 @@
     justify-content: center;
     align-items: center;
     color: white;
-    background-color: var(--thaw-background-color-today);
+    background-color: var(--colorBrandBackground);
     border-radius: 50%;
     margin-left: -0.4em;
     margin-top: -0.3em;
@@ -66,6 +67,6 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--thaw-background-color-today);
+    background-color: var(--colorBrandBackground);
     height: 3px;
 }

thaw/src/calendar/mod.rs

@@ -1,8 +1,4 @@
-mod theme;
-
-pub use theme::CalendarTheme;
-
-use crate::{use_theme, Button, ButtonGroup, Theme};
+use crate::{Button, ButtonGroup};
 use chrono::{Datelike, Days, Local, Month, Months, NaiveDate};
 use leptos::*;
 use std::ops::Deref;
@@ -14,31 +10,8 @@ pub fn Calendar(
     #[prop(optional, into)] value: Model<Option<NaiveDate>>,
 ) -> impl IntoView {
     mount_style("calendar", include_str!("./calendar.css"));
-    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.calendar.other_month_font_color,
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-border-color: {};",
-                theme.calendar.border_color
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-background-color-hover: {};",
-                theme.calendar.background_color_hover
-            ));
-        });
-        css_vars
-    });
-    let show_date = create_rw_signal(value.get_untracked().unwrap_or(now_date()));
-    create_effect(move |_| {
+    let show_date = RwSignal::new(value.get_untracked().unwrap_or(now_date()));
+    Effect::new(move |_| {
         if let Some(selected_date) = value.get() {
             let show_date_data = show_date.get_untracked();
             if selected_date.year() != show_date_data.year()
@@ -49,7 +22,7 @@ pub fn Calendar(
         }
     });
 
-    let dates = create_memo(move |_| {
+    let dates = Memo::new(move |_| {
         let show_date = show_date.get();
         let show_date_month = show_date.month();
         let mut dates = vec![];
@@ -115,7 +88,6 @@ pub fn Calendar(
     view! {
         <div
             class=class_list!["thaw-calendar", class.map(| c | move || c.get())]
-            style=move || css_vars.get()
         >
             <div class="thaw-calendar__header">
                 <span class="thaw-calendar__header-title">
@@ -132,21 +104,19 @@ pub fn Calendar(
                     }}
 
                 </span>
-                <span>
-                    <ButtonGroup>
-                        <Button
-                            icon=icondata_ai::AiLeftOutlined
-                            on_click=previous_month
-                        />
-                        <Button on_click=today>
-                            "Today"
-                        </Button>
-                        <Button
-                            icon=icondata_ai::AiRightOutlined
-                            on_click=next_month
-                        />
-                    </ButtonGroup>
-                </span>
+                <ButtonGroup>
+                    <Button
+                        icon=icondata_ai::AiLeftOutlined
+                        on_click=previous_month
+                    />
+                    <Button on_click=today>
+                        "Today"
+                    </Button>
+                    <Button
+                        icon=icondata_ai::AiRightOutlined
+                        on_click=next_month
+                    />
+                </ButtonGroup>
             </div>
             <div class="thaw-calendar__dates">
 
@@ -172,7 +142,7 @@ fn CalendarItem(
     index: usize,
     date: CalendarItemDate,
 ) -> impl IntoView {
-    let is_selected = create_memo({
+    let is_selected = Memo::new({
         let date = date.clone();
         move |_| value.with(|value_date| value_date.as_ref() == Some(date.deref()))
     });

thaw/src/calendar/theme.rs

@@ -1,26 +0,0 @@
-use crate::theme::ThemeMethod;
-
-#[derive(Clone)]
-pub struct CalendarTheme {
-    pub border_color: String,
-    pub other_month_font_color: String,
-    pub background_color_hover: String,
-}
-
-impl ThemeMethod for CalendarTheme {
-    fn light() -> Self {
-        Self {
-            border_color: "#efeff5".into(),
-            other_month_font_color: "#c2c2c2".into(),
-            background_color_hover: "#f3f3f5".into(),
-        }
-    }
-
-    fn dark() -> Self {
-        Self {
-            border_color: "#2d2d30".into(),
-            other_month_font_color: "#ffffff61".into(),
-            background_color_hover: "#2d2d30".into(),
-        }
-    }
-}

thaw/src/theme/mod.rs

@@ -2,10 +2,7 @@ mod color;
 mod common;
 
 use self::common::CommonTheme;
-use crate::{
-    AlertTheme, AnchorTheme, CalendarTheme, MessageTheme, ProgressTheme, ScrollbarTheme,
-    SelectTheme,
-};
+use crate::{AlertTheme, AnchorTheme, MessageTheme, ProgressTheme, ScrollbarTheme, SelectTheme};
 pub use color::ColorTheme;
 use leptos::*;
 
@@ -23,7 +20,6 @@ pub struct Theme {
     pub message: MessageTheme,
     pub select: SelectTheme,
     pub progress: ProgressTheme,
-    pub calendar: CalendarTheme,
     pub scrollbar: ScrollbarTheme,
     pub anchor: AnchorTheme,
 }
@@ -37,9 +33,7 @@ impl Theme {
             alert: AlertTheme::light(),
             message: MessageTheme::light(),
             select: SelectTheme::light(),
-
             progress: ProgressTheme::light(),
-            calendar: CalendarTheme::light(),
             scrollbar: ScrollbarTheme::light(),
             anchor: AnchorTheme::light(),
         }
@@ -53,7 +47,6 @@ impl Theme {
             message: MessageTheme::dark(),
             select: SelectTheme::dark(),
             progress: ProgressTheme::dark(),
-            calendar: CalendarTheme::dark(),
             scrollbar: ScrollbarTheme::dark(),
             anchor: AnchorTheme::dark(),
         }