feat: button disabled

demo/src/components/site_header.rs

@@ -199,7 +199,6 @@ pub fn SiteHeader() -> impl IntoView {
                     <Button
                         appearance=ButtonAppearance::Subtle
                         icon=icondata::AiGithubOutlined
-                        round=true
                         style="font-size: 22px; padding: 0px 6px;"
                         on_click=move |_| {
                             _ = window().open_with_url("http://github.com/thaw-ui/thaw");

demo_markdown/docs/button/mod.md

@@ -54,97 +54,82 @@ view! {
             </Button>
         </Space>
         <Space>
-            <Button color=ButtonColor::Error icon=icondata::AiCloseOutlined>
+            <Button icon=icondata::AiCloseOutlined>
                 "Error Color Icon"
             </Button>
-            <Button color=ButtonColor::Error icon=icondata::AiCloseOutlined>
+            <Button icon=icondata::AiCloseOutlined>
-                "Error Color Icon"
             </Button>
-            <Button
-                color=ButtonColor::Error
-                icon=icondata::AiCloseOutlined
-                round=true
-            />
-            <Button
-                color=ButtonColor::Error
-                icon=icondata::AiCloseOutlined
-                circle=true
-            />
         </Space>
     </Space>
 }
 ```
 
-### Color
-
-```rust demo
-view! {
-    <Space>
-        <Button color=ButtonColor::Primary>"Primary Color"</Button>
-        <Button color=ButtonColor::Success>"Success Color"</Button>
-        <Button color=ButtonColor::Warning>"Warning Color"</Button>
-        <Button color=ButtonColor::Error>"Error Color"</Button>
-    </Space>
-}
-```
-
-
-### Loading
-
-```rust demo
-let loading = create_rw_signal(false);
-let on_click = move |_| {
-    loading.set(true);
-    set_timeout(
-        move || {
-            loading.set(false);
-        },
-        std::time::Duration::new(2, 0),
-    );
-};
-
-view! {
-    <Space>
-        <Button loading on_click icon=icondata::AiCloseOutlined>
-            "Click Me"
-        </Button>
-        <Button loading on_click>
-            "Click Me"
-        </Button>
-    </Space>
-}
-```
-
-### Disabled
-
-```rust demo
-view! {
-    <Space>
-        <Button appearance=ButtonAppearance::Primary disabled=true>
-            "Primary"
-        </Button>
-        <Button disabled=true>
-            "Outlined"
-        </Button>
-        <Button appearance=ButtonAppearance::Subtle disabled=true>
-            "Subtle"
-        </Button>
-        <Button appearance=ButtonAppearance::Transparent disabled=true>
-            "Transparent"
-        </Button>
-    </Space>
-}
-```
-
 ### Size
 
 ```rust demo
 view! {
-    <Space>
+    <Space vertical=true>
-        <Button size=ButtonSize::Tiny>"Primary"</Button>
+        <Space>
-        <Button size=ButtonSize::Small>"Primary"</Button>
+            <Button size=ButtonSize::Small>"Small"</Button>
-        <Button size=ButtonSize::Medium>"Primary"</Button>
+            <Button size=ButtonSize::Small icon=icondata::AiCloseOutlined>
-        <Button size=ButtonSize::Large>"Primary"</Button>
+                "Small with calendar icon"
+            </Button>
+            <Button size=ButtonSize::Small icon=icondata::AiCloseOutlined>
+            </Button>
+        </Space>
+        <Space>
+            <Button>"Medium"</Button>
+            <Button icon=icondata::AiCloseOutlined>
+                "Medium with calendar icon"
+            </Button>
+            <Button icon=icondata::AiCloseOutlined>
+            </Button>
+        </Space>
+        <Space>
+            <Button size=ButtonSize::Large>"Large"</Button>
+            <Button size=ButtonSize::Large icon=icondata::AiCloseOutlined>
+                "Large with calendar icon"
+            </Button>
+            <Button size=ButtonSize::Large icon=icondata::AiCloseOutlined>
+            </Button>
+        </Space>
+    </Space>
+}
+```
+
+### Disabled
+
+```rust demo
+view! {
+    <Space vertical=true>
+        <Space>
+            <Button disabled=true>
+                "Secondary"
+            </Button>
+            <Button appearance=ButtonAppearance::Primary disabled=true>
+                "Primary"
+            </Button>
+            <Button appearance=ButtonAppearance::Subtle disabled=true>
+                "Subtle"
+            </Button>
+            <Button appearance=ButtonAppearance::Transparent disabled=true>
+                "Transparent"
+            </Button>
+        </Space>
+        <Space>
+            <Button disabled_focusable=true>
+                "Secondary"
+            </Button>
+            <Button appearance=ButtonAppearance::Primary disabled_focusable=true>
+                "Primary"
+            </Button>
+            <Button appearance=ButtonAppearance::Subtle disabled_focusable=true>
+                "Subtle"
+            </Button>
+            <Button appearance=ButtonAppearance::Transparent disabled_focusable=true>
+                "Transparent"
+            </Button>
+        </Space>
     </Space>
 }
 ```

thaw/src/button/button.css

@@ -97,99 +97,87 @@
     border-radius: var(--borderRadiusNone);
 }
 
+.thaw-button--small {
+    min-width: 64px;
+
+    padding: 3px var(--spacingHorizontalS);
+
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    font-weight: var(--fontWeightRegular);
+}
+
+.thaw-button--large {
+    min-width: 96px;
+
+    padding: 8px var(--spacingHorizontalL);
+
+    font-size: var(--fontSizeBase400);
+    line-height: var(--lineHeightBase400);
+    font-weight: var(--fontWeightSemibold);
+}
+
+.thaw-button--only-icon {
+    max-width: 32px;
+    min-width: 32px;
+    padding: 5px;
+}
+
+.thaw-button:not(.thaw-button--only-icon) .thaw-button__icon {
+    margin-right: var(--spacingHorizontalSNudge);
+}
+
+.thaw-button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+}
+
+.thaw-button--small.thaw-button--only-icon {
+    max-width: 24px;
+    min-width: 24px;
+    padding: 1px;
+}
+
+.thaw-button--large.thaw-button--only-icon {
+    max-width: 40px;
+    min-width: 40px;
+    padding: 7px;
+}
+.thaw-button--large.thaw-button--only-icon .thaw-button__icon {
+    width: 24px;
+    height: 24px;
+}
+
+.thaw-button--disabled:hover:active,
+.thaw-button--disabled:hover,
+.thaw-button--disabled {
+    color: var(--colorNeutralForegroundDisabled);
+    background-color: var(--colorNeutralBackgroundDisabled);
+    border-color: var(--colorNeutralStrokeDisabled);
+    cursor: not-allowed;
+}
+
+.thaw-button--primary.thaw-button--disabled:hover:active,
+.thaw-button--primary.thaw-button--disabled:hover,
+.thaw-button--primary.thaw-button--disabled {
+    border-color: transparent;
+}
+
+.thaw-button--subtle.thaw-button--disabled:hover:active,
+.thaw-button--subtle.thaw-button--disabled:hover,
+.thaw-button--subtle.thaw-button--disabled,
+.thaw-button--transparent.thaw-button--disabled:hover:active,
+.thaw-button--transparent.thaw-button--disabled:hover,
+.thaw-button--transparent.thaw-button--disabled {
+    background-color: transparent;
+    border-color: transparent;
+}
+
 .thaw-button--block {
     display: flex;
     width: 100%;
 }
-
-.thaw-button--disabled:not(.thaw-button--text, .thaw-button--link) {
-    border-color: var(--thaw-border-color-disabled);
-    background-color: var(--thaw-background-color-disabled);
-}
-
-.thaw-button.thaw-button--disabled {
-    color: var(--thaw-font-color-disabled);
-    cursor: not-allowed;
-}
-
-/* .thaw-button:active:not(.thaw-button--disabled) {
-    transition: all 0.3s;
-    border-color: var(--thaw-border-color-hover);
-    background-color: var(--thaw-background-color-active);
-} */
-
-.thaw-button--outlined {
-    background-color: transparent;
-    color: inherit;
-    transition: all 0.3s;
-}
-
-.thaw-button--outlined:hover:not(.thaw-button--disabled) {
-    cursor: pointer;
-    color: var(--thaw-font-color-hover);
-    border-color: var(--thaw-border-color-hover);
-}
-
-.thaw-button--text,
-.thaw-button--link {
-    border: none;
-}
-
-.thaw-button--link {
-    background-color: transparent;
-    color: inherit;
-    height: auto;
-    padding: inherit;
-}
-.thaw-button--text:hover:not(.thaw-button--disabled),
-.thaw-button--link:hover:not(.thaw-button--disabled) {
-    color: var(--thaw-font-color-hover);
-}
-
-.thaw-button--round {
-    border-radius: var(--thaw-height);
-}
-
-.thaw-button--circle:not(.thaw-button--link) {
-    width: var(--thaw-height);
-    padding: 0;
-    border-radius: var(--thaw-height);
-}
-
-@keyframes thawLoadingCircle {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.thaw-button .thaw-wave {
-    pointer-events: none;
-    animation-iteration-count: 1;
-    animation-duration: 0.6s;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1),
-        cubic-bezier(0, 0, 0.2, 1);
-}
-
-.thaw-button .thaw-wave.thaw-wave--active {
-    opacity: 0;
-    z-index: 1;
-    animation-name: thawButtonWaveSpread, thawButtonWaveOpacity;
-}
-
-@keyframes thawButtonWaveSpread {
-    from {
-        box-shadow: 0 0 0.5px 0 var(--thaw-ripple-color);
-    }
-    to {
-        box-shadow: 0 0 0.5px 6px var(--thaw-ripple-color);
-    }
-}
-
-@keyframes thawButtonWaveOpacity {
-    from {
-        opacity: 0.6;
-    }
-    to {
-        opacity: 0;
-    }
-}

thaw/src/button/mod.rs

@@ -1,13 +1,11 @@
 mod button_group;
-mod theme;
 
 pub use button_group::ButtonGroup;
-pub use theme::ButtonTheme;
 
-use crate::{icon::Icon, theme::*};
+use crate::icon::Icon;
 use leptos::*;
-use thaw_components::{OptionComp, Wave, WaveRef};
+use thaw_components::OptionComp;
-use thaw_utils::{class_list, mount_style, ComponentRef, OptionalMaybeSignal, OptionalProp};
+use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
 
 #[derive(Default, PartialEq, Clone, Copy)]
 pub enum ButtonAppearance {
@@ -34,7 +32,7 @@ pub enum ButtonShape {
     #[default]
     Rounded,
     Circular,
-    Square
+    Square,
 }
 
 impl ButtonShape {
@@ -56,37 +54,8 @@ pub enum ButtonColor {
     Error,
 }
 
-impl ButtonColor {
+#[derive(Default, PartialEq, Clone)]
-    fn theme_color(&self, theme: &Theme) -> String {
-        match self {
-            ButtonColor::Primary => theme.common.color_primary.clone(),
-            ButtonColor::Success => theme.common.color_success.clone(),
-            ButtonColor::Warning => theme.common.color_warning.clone(),
-            ButtonColor::Error => theme.common.color_error.clone(),
-        }
-    }
-    fn theme_color_hover(&self, theme: &Theme) -> String {
-        match self {
-            ButtonColor::Primary => theme.common.color_primary_hover.clone(),
-            ButtonColor::Success => theme.common.color_success_hover.clone(),
-            ButtonColor::Warning => theme.common.color_warning_hover.clone(),
-            ButtonColor::Error => theme.common.color_error_hover.clone(),
-        }
-    }
-
-    fn theme_color_active(&self, theme: &Theme) -> String {
-        match self {
-            ButtonColor::Primary => theme.common.color_primary_active.clone(),
-            ButtonColor::Success => theme.common.color_success_active.clone(),
-            ButtonColor::Warning => theme.common.color_warning_active.clone(),
-            ButtonColor::Error => theme.common.color_error_active.clone(),
-        }
-    }
-}
-
-#[derive(Default, Clone)]
 pub enum ButtonSize {
-    Tiny,
     Small,
     #[default]
     Medium,
@@ -94,21 +63,11 @@ pub enum ButtonSize {
 }
 
 impl ButtonSize {
-    fn theme_height(&self, theme: &Theme) -> String {
+    fn as_str(&self) -> &str {
         match self {
-            ButtonSize::Tiny => theme.common.height_tiny.clone(),
+            ButtonSize::Small => "small",
-            ButtonSize::Small => theme.common.height_small.clone(),
+            ButtonSize::Medium => "medium",
-            ButtonSize::Medium => theme.common.height_medium.clone(),
+            ButtonSize::Large => "large",
-            ButtonSize::Large => theme.common.height_large.clone(),
-        }
-    }
-
-    fn theme_padding(&self, theme: &Theme) -> String {
-        match self {
-            ButtonSize::Tiny => theme.button.padding_tiny.clone(),
-            ButtonSize::Small => theme.button.padding_small.clone(),
-            ButtonSize::Medium => theme.button.padding_medium.clone(),
-            ButtonSize::Large => theme.button.padding_large.clone(),
         }
     }
 }
@@ -122,151 +81,58 @@ pub fn Button(
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
     #[prop(optional, into)] size: MaybeSignal<ButtonSize>,
     #[prop(optional, into)] block: MaybeSignal<bool>,
-    #[prop(optional, into)] round: MaybeSignal<bool>,
-    #[prop(optional, into)] circle: MaybeSignal<bool>,
     #[prop(optional, into)] icon: OptionalMaybeSignal<icondata_core::Icon>,
-    #[prop(optional, into)] loading: MaybeSignal<bool>,
     #[prop(optional, into)] disabled: MaybeSignal<bool>,
+    #[prop(optional, into)] disabled_focusable: MaybeSignal<bool>,
     #[prop(optional, into)] on_click: Option<Callback<ev::MouseEvent>>,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
-    let theme = use_theme(Theme::light);
-    let css_vars = create_memo(move |_| {
-        let mut css_vars = String::new();
-        theme.with(|theme| {
-            let bg_color = color.get().theme_color(theme);
-            css_vars.push_str(&format!(
-                "--thaw-font-color-disabled: {};",
-                theme.button.color_text_disabled
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-height: {};",
-                size.get().theme_height(theme)
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-padding: {};",
-                size.get().theme_padding(theme)
-            ));
-
-            match appearance.get() {
-                ButtonAppearance::Secondary => {}
-                ButtonAppearance::Primary => {
-                    let bg_color_hover = color.get().theme_color_hover(theme);
-                    let bg_color_active = color.get().theme_color_active(theme);
-                    css_vars.push_str(&format!("--thaw-background-color: {bg_color};"));
-                    css_vars.push_str(&format!("--thaw-background-color-hover: {bg_color_hover};"));
-                    css_vars.push_str(&format!(
-                        "--thaw-background-color-active: {bg_color_active};"
-                    ));
-                    css_vars.push_str("--thaw-font-color: #fff;");
-                    css_vars.push_str(&format!("--thaw-border-color: {bg_color};"));
-                    css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
-                    css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
-
-                    css_vars.push_str(&format!(
-                        "--thaw-background-color-disabled: {};",
-                        theme.button.color_background_disabled
-                    ));
-                    css_vars.push_str(&format!(
-                        "--thaw-border-color-disabled: {};",
-                        theme.button.color_border_disabled
-                    ));
-                }
-                ButtonAppearance::Subtle => {
-                    css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
-                    css_vars.push_str(&format!(
-                        "--thaw-background-color-hover: {};",
-                        theme.button.color_text_hover
-                    ));
-                    css_vars.push_str(&format!(
-                        "--thaw-background-color-active: {};",
-                        theme.button.color_text_active
-                    ));
-                    css_vars.push_str("--thaw-ripple-color: #0000;");
-                }
-                ButtonAppearance::Transparent => {
-                    css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
-                    css_vars.push_str("--thaw-ripple-color: #0000;");
-                }
-            }
-        });
-
-        css_vars
-    });
     mount_style("button", include_str!("./button.css"));
 
-    let icon_style = if children.is_some() {
+    let none_children = children.is_none();
-        "margin-right: var(--spacingHorizontalSNudge)"
+    let only_icon = Memo::new(move |_| icon.with(|i| i.is_some()) && none_children);
-    } else {
+    let btn_disabled = Memo::new(move |_| disabled.get() || disabled_focusable.get());
-        ""
-    };
 
-    let disabled = create_memo(move |_| {
+    let on_click = move |e| {
-        if loading.get() {
+        if btn_disabled.get_untracked() {
-            return true;
-        }
-
-        disabled.get()
-    });
-
-    let wave_ref = ComponentRef::<WaveRef>::default();
-
-    let on_click = move |event| {
-        if disabled.get() {
             return;
         }
-        if let Some(wave_ref) = wave_ref.get_untracked() {
+
-            wave_ref.play();
-        }
         let Some(callback) = on_click.as_ref() else {
             return;
         };
-        callback.call(event);
+        callback.call(e);
     };
 
     view! {
         <button
             class=class_list![
-                "thaw-button", ("thaw-button--round", move || round.get()),
+                "thaw-button",
-                ("thaw-button--circle", move || circle.get()), ("thaw-button--disabled", move ||
+                ("thaw-button--disabled", btn_disabled),
-                disabled.get()), ("thaw-button--block", move || block.get()),
+                ("thaw-button--block", move || block.get()),
+                ("thaw-button--only-icon", only_icon),
+                move || format!("thaw-button--{}", size.get().as_str()),
                 move || format!("thaw-button--{}", appearance.get().as_str()),
                 move || format!("thaw-button--{}", shape.get().as_str()),
                 class.map(| c | move || c.get())
             ]
 
-            style=move || {
+            style=move || style.as_ref().map(|s| s.get())
-                format!("{}{}", css_vars.get(), style.as_ref().map(|s| s.get()).unwrap_or_default())
+            disabled=move || disabled.get().then_some("")
-            }
+            aria-disabled=move || disabled_focusable.get().then_some("true")
-
-            disabled=move || disabled.get()
             on:click=on_click
         >
-            <Wave comp_ref=wave_ref/>
+             {
-            {move || {
-                if loading.get() {
-                    view! {
-                        <Icon
-                            icon=icondata_ai::AiLoadingOutlined
-                            style=format!(
-                                "animation: thawLoadingCircle 1s infinite linear;{icon_style}",
-                            )
-                        />
-                    }
-                        .into_view()
-                } else {
-                    (move || {
-                        let icon = icon.get();
-                        view! {
-                            <OptionComp value=icon let:icon>
-                                <Icon icon=icon style=icon_style/>
-                            </OptionComp>
-                        }
-                    })
-                        .into_view()
-                }
-            }}
 
+                move || {
+                    let icon = icon.get();
+                    view! {
+                        <OptionComp value=icon let:icon>
+                            <Icon icon=icon class="thaw-button__icon"/>
+                        </OptionComp>
+                    }
+                }
+            }
             <OptionComp value=children let:children>
                 {children()}
             </OptionComp>

thaw/src/button/theme.rs

@@ -1,50 +0,0 @@
-use crate::theme::ThemeMethod;
-
-#[derive(Clone)]
-pub struct ButtonTheme {
-    pub padding_tiny: String,
-    pub padding_small: String,
-    pub padding_medium: String,
-    pub padding_large: String,
-
-    pub border_color_outlined: String,
-    pub color_text_hover: String,
-    pub color_text_active: String,
-    pub color_text_disabled: String,
-    pub color_background_disabled: String,
-    pub color_border_disabled: String,
-}
-
-impl ThemeMethod for ButtonTheme {
-    fn light() -> Self {
-        Self {
-            padding_tiny: "0 6px".into(),
-            padding_small: "0 10px".into(),
-            padding_medium: "0 14px".into(),
-            padding_large: "0 18px".into(),
-
-            border_color_outlined: "#e0e0e6".into(),
-            color_text_hover: "#f1f3f5".into(),
-            color_text_active: "#eceef0".into(),
-            color_text_disabled: "#00000040".into(),
-            color_background_disabled: "#0000000a".into(),
-            color_border_disabled: "#d9d9d9".into(),
-        }
-    }
-
-    fn dark() -> Self {
-        Self {
-            padding_tiny: "0 6px".into(),
-            padding_small: "0 10px".into(),
-            padding_medium: "0 14px".into(),
-            padding_large: "0 18px".into(),
-
-            border_color_outlined: "#ffffff3d".into(),
-            color_text_hover: "#ffffff1a".into(),
-            color_text_active: "#ffffff26".into(),
-            color_text_disabled: "#4c5155".into(),
-            color_background_disabled: "#2b2f31".into(),
-            color_border_disabled: "#2b2f31".into(),
-        }
-    }
-}

thaw/src/date_picker/panel/date_panel.rs

@@ -157,7 +157,7 @@ pub fn DatePanel(
                 </div>
             </div>
             <div class="thaw-date-picker-date-panel__footer">
-                <Button size=ButtonSize::Tiny on_click=now>
+                <Button size=ButtonSize::Small on_click=now>
                     "Now"
                 </Button>
             </div>

thaw/src/theme/color.rs

@@ -2,9 +2,12 @@ use thaw_macro::WriteCSSVars;
 
 #[derive(Clone, WriteCSSVars)]
 pub struct ColorTheme {
+    pub color_neutral_background_disabled: String,
     pub color_neutral_background_1: String,
     pub color_neutral_background_1_hover: String,
     pub color_neutral_background_1_pressed: String,
+    
+    pub color_neutral_foreground_disabled: String,
     pub color_neutral_foreground_1: String,
     pub color_neutral_foreground_1_hover: String,
     pub color_neutral_foreground_1_pressed: String,
@@ -14,6 +17,8 @@ pub struct ColorTheme {
     pub color_neutral_foreground_2_brand_hover: String,
     pub color_neutral_foreground_2_brand_pressed: String,
     pub color_neutral_foreground_on_brand: String,
+
+    pub color_neutral_stroke_disabled: String,
     pub color_neutral_stroke_1: String,
     pub color_neutral_stroke_1_hover: String,
     pub color_neutral_stroke_1_pressed: String,
@@ -31,9 +36,11 @@ pub struct ColorTheme {
 impl ColorTheme {
     pub fn light() -> Self {
         Self {
+            color_neutral_background_disabled: "#f0f0f0".into(),
             color_neutral_background_1: "#fff".into(),
             color_neutral_background_1_hover: "#f5f5f5".into(),
             color_neutral_background_1_pressed: "#e0e0e0".into(),
+            color_neutral_foreground_disabled: "#bdbdbd".into(),
             color_neutral_foreground_1: "#242424".into(),
             color_neutral_foreground_1_hover: "#242424".into(),
             color_neutral_foreground_1_pressed: "#242424".into(),
@@ -43,6 +50,8 @@ impl ColorTheme {
             color_neutral_foreground_2_brand_hover: "#0f6cbd".into(),
             color_neutral_foreground_2_brand_pressed: "#115ea3".into(),
             color_neutral_foreground_on_brand: "#fff".into(),
+
+            color_neutral_stroke_disabled: "#e0e0e0".into(),
             color_neutral_stroke_1: "#d1d1d1".into(),
             color_neutral_stroke_1_hover: "#c7c7c7".into(),
             color_neutral_stroke_1_pressed: "#b3b3b3".into(),
@@ -60,9 +69,11 @@ impl ColorTheme {
 
     pub fn dark() -> Self {
         Self {
+            color_neutral_background_disabled: "#141414".into(),
             color_neutral_background_1: "#292929".into(),
             color_neutral_background_1_hover: "#3d3d3d".into(),
             color_neutral_background_1_pressed: "#1f1f1f".into(),
+            color_neutral_foreground_disabled: "#5c5c5c".into(),
             color_neutral_foreground_1: "#fff".into(),
             color_neutral_foreground_1_hover: "#fff".into(),
             color_neutral_foreground_1_pressed: "#fff".into(),
@@ -72,6 +83,8 @@ impl ColorTheme {
             color_neutral_foreground_2_brand_hover: "#479ef5".into(),
             color_neutral_foreground_2_brand_pressed: "#2886de".into(),
             color_neutral_foreground_on_brand: "#fff".into(),
+
+            color_neutral_stroke_disabled: "#424242".into(),
             color_neutral_stroke_1: "#666666".into(),
             color_neutral_stroke_1_hover: "#757575".into(),
             color_neutral_stroke_1_pressed: "#6b6b6b".into(),

thaw/src/theme/common.rs

@@ -20,9 +20,13 @@ pub struct CommonTheme {
     pub color_error_hover: String,
     pub color_error_active: String,
 
+    pub font_size_base_200: String,
     pub font_size_base_300: String,
+    pub font_size_base_400: String,
 
-    pub line_height_base300: String,
+    pub line_height_base_200: String,
+    pub line_height_base_300: String,
+    pub line_height_base_400: String,
 
     pub font_weight_regular: String,
     pub font_weight_semibold: String,
@@ -35,7 +39,9 @@ pub struct CommonTheme {
     pub border_radius_circular: String,
     
     pub spacing_horizontal_s_nudge: String,
+    pub spacing_horizontal_s: String,
     pub spacing_horizontal_m: String,
+    pub spacing_horizontal_l: String,
 
     pub duration_faster: String,
     pub curve_easy_ease: String,
@@ -69,9 +75,13 @@ impl CommonTheme {
             color_error_hover: "".into(),
             color_error_active: "".into(),
 
+            font_size_base_200: "12px".into(),
             font_size_base_300: "14px".into(),
+            font_size_base_400: "16px".into(),
 
-            line_height_base300: "20px".into(),
+            line_height_base_200: "16px".into(),
+            line_height_base_300: "20px".into(),
+            line_height_base_400: "22px".into(),
 
             font_weight_regular: "400".into(),
             font_weight_semibold: "600".into(),
@@ -84,7 +94,9 @@ impl CommonTheme {
             border_radius_circular: "10000px".into(),
 
             spacing_horizontal_s_nudge: "6px".into(),
+            spacing_horizontal_s: "8px".into(),
             spacing_horizontal_m: "12px".into(),
+            spacing_horizontal_l: "16px".into(),
 
             duration_faster: "100ms".into(),
             curve_easy_ease: "cubic-bezier(0.33,0,0.67,1)".into(),

thaw/src/theme/mod.rs

@@ -1,16 +1,16 @@
-mod common;
 mod color;
+mod common;
 
 use self::common::CommonTheme;
-pub use color::ColorTheme;
 use crate::{
     mobile::{NavBarTheme, TabbarTheme},
     AlertTheme, AnchorTheme, AutoCompleteTheme, AvatarTheme, BackTopTheme, BreadcrumbTheme,
-    ButtonTheme, CalendarTheme, CollapseTheme, ColorPickerTheme, DatePickerTheme, InputTheme,
+    CalendarTheme, CollapseTheme, ColorPickerTheme, DatePickerTheme, InputTheme, MenuTheme,
-    MenuTheme, MessageTheme, PopoverTheme, ProgressTheme, ScrollbarTheme, SelectTheme,
+    MessageTheme, PopoverTheme, ProgressTheme, ScrollbarTheme, SelectTheme, SkeletionTheme,
-    SkeletionTheme, SliderTheme, SpinnerTheme, SwitchTheme, TableTheme, TagTheme, TimePickerTheme,
+    SliderTheme, SpinnerTheme, SwitchTheme, TableTheme, TagTheme, TimePickerTheme, TypographyTheme,
-    TypographyTheme, UploadTheme,
+    UploadTheme,
 };
+pub use color::ColorTheme;
 use leptos::*;
 
 pub trait ThemeMethod {
@@ -23,7 +23,6 @@ pub struct Theme {
     pub name: String,
     pub common: CommonTheme,
     pub color: ColorTheme,
-    pub button: ButtonTheme,
     pub input: InputTheme,
     pub menu: MenuTheme,
     pub table: TableTheme,
@@ -60,7 +59,6 @@ impl Theme {
             name: "light".into(),
             common: CommonTheme::light(),
             color: ColorTheme::light(),
-            button: ButtonTheme::light(),
             input: InputTheme::light(),
             menu: MenuTheme::light(),
             table: TableTheme::light(),
@@ -96,7 +94,6 @@ impl Theme {
             name: "dark".into(),
             common: CommonTheme::dark(),
             color: ColorTheme::dark(),
-            button: ButtonTheme::dark(),
             input: InputTheme::dark(),
             menu: MenuTheme::dark(),
             table: TableTheme::dark(),

thaw/src/time_picker/mod.rs

@@ -286,10 +286,10 @@ fn Panel(
                     </div>
                 </div>
                 <div class="thaw-time-picker-panel__footer">
-                    <Button size=ButtonSize::Tiny on_click=now>
+                    <Button size=ButtonSize::Small on_click=now>
                         "Now"
                     </Button>
-                    <Button size=ButtonSize::Tiny on_click=ok>
+                    <Button size=ButtonSize::Small on_click=ok>
                         "OK"
                     </Button>
                 </div>

thaw_utils/src/class_list.rs

@@ -1,6 +1,6 @@
 #[cfg(not(feature = "ssr"))]
 use leptos::create_render_effect;
-use leptos::{Attribute, IntoAttribute, Oco, RwSignal, SignalUpdate, SignalWith};
+use leptos::{Attribute, IntoAttribute, Memo, Oco, RwSignal, SignalGet, SignalUpdate, SignalWith};
 use std::{collections::HashSet, rc::Rc};
 
 pub struct ClassList(RwSignal<HashSet<Oco<'static, str>>>);
@@ -163,6 +163,12 @@ where
     }
 }
 
+impl IntoClass for (&'static str, Memo<bool>) {
+    fn into_class(self) -> Class {
+        Class::Fn(self.0.into(), Box::new(move || self.1.get()))
+    }
+}
+
 impl<T> IntoClass for (String, T)
 where
     T: Fn() -> bool + 'static,