diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index 78593e7..2141d39 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -152,7 +152,7 @@ pub fn SiteHeader() -> impl IntoView {
                 <Popover placement=PopoverPlacement::BottomEnd class="demo-header__menu-popover-mobile">
                     <PopoverTrigger slot class="demo-header__menu-mobile">
                         <Button
-                            variant=ButtonAppearance::Subtle
+                            appearance=ButtonAppearance::Subtle
                             icon=icondata::AiUnorderedListOutlined
                             style="font-size: 22px; padding: 0px 6px;"
                         />
@@ -173,7 +173,7 @@ pub fn SiteHeader() -> impl IntoView {
                 </Popover>
                 <Space class="demo-header__right-btn" align=SpaceAlign::Center>
                     <Button
-                        variant=ButtonAppearance::Subtle
+                        appearance=ButtonAppearance::Subtle
                         on_click=move |_| {
                             let navigate = use_navigate();
                             navigate("/guide/installation", Default::default());
@@ -183,7 +183,7 @@ pub fn SiteHeader() -> impl IntoView {
                         "Guide"
                     </Button>
                     <Button
-                        variant=ButtonAppearance::Subtle
+                        appearance=ButtonAppearance::Subtle
                         on_click=move |_| {
                             let navigate = use_navigate();
                             navigate("/components/button", Default::default());
@@ -192,12 +192,12 @@ pub fn SiteHeader() -> impl IntoView {
 
                         "Components"
                     </Button>
-                    <Button variant=ButtonAppearance::Subtle on_click=Callback::new(move |_| change_theme.call(()))>
+                    <Button appearance=ButtonAppearance::Subtle on_click=Callback::new(move |_| change_theme.call(()))>
                         {move || theme_name.get()}
                     </Button>
                     <SwitchVersion />
                     <Button
-                        variant=ButtonAppearance::Subtle
+                        appearance=ButtonAppearance::Subtle
                         icon=icondata::AiGithubOutlined
                         round=true
                         style="font-size: 22px; padding: 0px 6px;"
diff --git a/demo/src/pages/home.rs b/demo/src/pages/home.rs
index 4229039..9aa4f9b 100644
--- a/demo/src/pages/home.rs
+++ b/demo/src/pages/home.rs
@@ -23,7 +23,7 @@ pub fn Home() -> impl IntoView {
                     navigate("/components/button", Default::default());
                 }>"Read the docs"</Button>
                 <Button
-                    variant=ButtonAppearance::Subtle
+                    appearance=ButtonAppearance::Subtle
                     on_click=move |_| {
                         _ = window().open_with_url("http://github.com/thaw-ui/thaw");
                     }
diff --git a/demo_markdown/docs/button/mod.md b/demo_markdown/docs/button/mod.md
index c4e08d4..580711c 100644
--- a/demo_markdown/docs/button/mod.md
+++ b/demo_markdown/docs/button/mod.md
@@ -4,22 +4,21 @@
 view! {
     <Space>
         <Button>"Secondary"</Button>
-        <Button variant=ButtonAppearance::Primary>"Primary"</Button>
-        <Button variant=ButtonAppearance::Subtle>"Subtle"</Button>
-        <Button variant=ButtonAppearance::Transparent>"Transparent"</Button>
+        <Button appearance=ButtonAppearance::Primary>"Primary"</Button>
+        <Button appearance=ButtonAppearance::Subtle>"Subtle"</Button>
+        <Button appearance=ButtonAppearance::Transparent>"Transparent"</Button>
     </Space>
 }
 ```
 
-### Color
+### Shape
 
 ```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>
+        <Button>"Rounded"</Button>
+        <Button shape=ButtonShape::Circular>"Circular"</Button>
+        <Button shape=ButtonShape::Square>"Square"</Button>
     </Space>
 }
 ```
@@ -76,6 +75,20 @@ view! {
 }
 ```
 
+### 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
@@ -107,16 +120,16 @@ view! {
 ```rust demo
 view! {
     <Space>
-        <Button variant=ButtonAppearance::Primary disabled=true>
+        <Button appearance=ButtonAppearance::Primary disabled=true>
             "Primary"
         </Button>
         <Button disabled=true>
             "Outlined"
         </Button>
-        <Button variant=ButtonAppearance::Subtle disabled=true>
+        <Button appearance=ButtonAppearance::Subtle disabled=true>
             "Subtle"
         </Button>
-        <Button variant=ButtonAppearance::Transparent disabled=true>
+        <Button appearance=ButtonAppearance::Transparent disabled=true>
             "Transparent"
         </Button>
     </Space>
@@ -171,7 +184,7 @@ view! {
 | --- | --- | --- | --- |
 | class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the button element. |
 | style | `Option<MaybeSignal<String>>` | `Default::default()` | Button's style. |
-| variant | `MaybeSignal<ButtonAppearance>` | `ButtonAppearance::Primary` | Button's variant. |
+| appearance | `MaybeSignal<ButtonAppearance>` | `ButtonAppearance::Primary` | Button's variant. |
 | color | `MaybeSignal<ButtonColor>` | `ButtonColor::Primary` | Button's color. |
 | block | `MaybeSignal<bool>` | `false` | Whether the button is displayed as block. |
 | round | `MaybeSignal<bool>` | `false` | Whether the button shows rounded corners. |
diff --git a/thaw/src/button/button.css b/thaw/src/button/button.css
index 9f6fab3..d9a0c58 100644
--- a/thaw/src/button/button.css
+++ b/thaw/src/button/button.css
@@ -90,6 +90,13 @@
     border-color: transparent;
 }
 
+.thaw-button--circular {
+    border-radius: var(--borderRadiusCircular);
+}
+.thaw-button--square {
+    border-radius: var(--borderRadiusNone);
+}
+
 .thaw-button--block {
     display: flex;
     width: 100%;
diff --git a/thaw/src/button/mod.rs b/thaw/src/button/mod.rs
index ef3e674..339a926 100644
--- a/thaw/src/button/mod.rs
+++ b/thaw/src/button/mod.rs
@@ -29,6 +29,24 @@ impl ButtonAppearance {
     }
 }
 
+#[derive(Default, PartialEq, Clone, Copy)]
+pub enum ButtonShape {
+    #[default]
+    Rounded,
+    Circular,
+    Square
+}
+
+impl ButtonShape {
+    fn as_str(&self) -> &str {
+        match self {
+            ButtonShape::Rounded => "rounded",
+            ButtonShape::Circular => "circular",
+            ButtonShape::Square => "square",
+        }
+    }
+}
+
 #[derive(Default, Clone)]
 pub enum ButtonColor {
     #[default]
@@ -76,15 +94,6 @@ pub enum ButtonSize {
 }
 
 impl ButtonSize {
-    fn theme_font_size(&self, theme: &Theme) -> String {
-        match self {
-            ButtonSize::Tiny => theme.common.font_size_tiny.clone(),
-            ButtonSize::Small => theme.common.font_size_small.clone(),
-            ButtonSize::Medium => theme.common.font_size_medium.clone(),
-            ButtonSize::Large => theme.common.font_size_large.clone(),
-        }
-    }
-
     fn theme_height(&self, theme: &Theme) -> String {
         match self {
             ButtonSize::Tiny => theme.common.height_tiny.clone(),
@@ -108,7 +117,8 @@ impl ButtonSize {
 pub fn Button(
     #[prop(optional, into)] style: Option<MaybeSignal<String>>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
-    #[prop(optional, into)] variant: MaybeSignal<ButtonAppearance>,
+    #[prop(optional, into)] appearance: MaybeSignal<ButtonAppearance>,
+    #[prop(optional, into)] shape: MaybeSignal<ButtonShape>,
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
     #[prop(optional, into)] size: MaybeSignal<ButtonSize>,
     #[prop(optional, into)] block: MaybeSignal<bool>,
@@ -129,10 +139,6 @@ pub fn Button(
                 "--thaw-font-color-disabled: {};",
                 theme.button.color_text_disabled
             ));
-            css_vars.push_str(&format!(
-                "--thaw-font-size: {};",
-                size.get().theme_font_size(theme)
-            ));
             css_vars.push_str(&format!(
                 "--thaw-height: {};",
                 size.get().theme_height(theme)
@@ -142,7 +148,7 @@ pub fn Button(
                 size.get().theme_padding(theme)
             ));
 
-            match variant.get() {
+            match appearance.get() {
                 ButtonAppearance::Secondary => {}
                 ButtonAppearance::Primary => {
                     let bg_color_hover = color.get().theme_color_hover(theme);
@@ -190,7 +196,7 @@ pub fn Button(
     mount_style("button", include_str!("./button.css"));
 
     let icon_style = if children.is_some() {
-        "margin-right: 6px"
+        "margin-right: var(--spacingHorizontalSNudge)"
     } else {
         ""
     };
@@ -224,7 +230,8 @@ pub fn Button(
                 "thaw-button", ("thaw-button--round", move || round.get()),
                 ("thaw-button--circle", move || circle.get()), ("thaw-button--disabled", move ||
                 disabled.get()), ("thaw-button--block", move || block.get()),
-                move || format!("thaw-button--{}", variant.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())
             ]
 
diff --git a/thaw/src/card/mod.rs b/thaw/src/card/mod.rs
index 437b0e1..5468546 100644
--- a/thaw/src/card/mod.rs
+++ b/thaw/src/card/mod.rs
@@ -34,9 +34,10 @@ pub fn Card(
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         theme.with(|theme| {
+            // TODO
             css_vars.push_str(&format!(
-                "--thaw-background-color: {};",
-                theme.common.background_color
+                "--thaw-background-color: ;",
+                // theme.common.background_color
             ));
             css_vars.push_str(&format!(
                 "--thaw-border-color: {};",
diff --git a/thaw/src/config_provider/mod.rs b/thaw/src/config_provider/mod.rs
index bfb69db..e2e66cb 100644
--- a/thaw/src/config_provider/mod.rs
+++ b/thaw/src/config_provider/mod.rs
@@ -13,52 +13,52 @@ pub fn ConfigProvider(
     let css_vars = Memo::new(move |_| {
         let mut css_vars = String::new();
         theme.with(|theme| {
-            css_vars.push_str(&format!(
-                "--fontFamilyBase: {};",
-                theme.common.font_family_base
-            ));
-            css_vars.push_str(&format!(
-                "--fontSizeBase300: {};",
-                theme.common.font_size_base_300
-            ));
-            css_vars.push_str(&format!(
-                "--lineHeightBase300: {};",
-                theme.common.line_height_base300,
-            ));
-            css_vars.push_str(&format!(
-                "--fontWeightRegular: {};",
-                theme.common.font_weight_regular
-            ));
-            css_vars.push_str(&format!(
-                "--fontWeightSemibold: {};",
-                theme.common.font_weight_semibold
-            ));
-            css_vars.push_str(&format!(
-                "--fontWeightBold: {};",
-                theme.common.font_weight_bold
-            ));
-            css_vars.push_str(&format!(
-                "--strokeWidthThin: {};",
-                theme.common.stroke_width_thin,
-            ));
-            css_vars.push_str(&format!(
-                "--borderRadiusMedium: {};",
-                theme.common.border_radius_medium
-            ));
-            css_vars.push_str(&format!(
-                "--spacingHorizontalM: {};",
-                theme.common.spacing_horizontal_m
-            ));
+            // css_vars.push_str(&format!(
+            //     "--fontFamilyBase: {};",
+            //     theme.common.font_family_base
+            // ));
+            // css_vars.push_str(&format!(
+            //     "--fontSizeBase300: {};",
+            //     theme.common.font_size_base_300
+            // ));
+            // css_vars.push_str(&format!(
+            //     "--lineHeightBase300: {};",
+            //     theme.common.line_height_base300,
+            // ));
+            // css_vars.push_str(&format!(
+            //     "--fontWeightRegular: {};",
+            //     theme.common.font_weight_regular
+            // ));
+            // css_vars.push_str(&format!(
+            //     "--fontWeightSemibold: {};",
+            //     theme.common.font_weight_semibold
+            // ));
+            // css_vars.push_str(&format!(
+            //     "--fontWeightBold: {};",
+            //     theme.common.font_weight_bold
+            // ));
+            // css_vars.push_str(&format!(
+            //     "--strokeWidthThin: {};",
+            //     theme.common.stroke_width_thin,
+            // ));
+            // css_vars.push_str(&format!(
+            //     "--borderRadiusMedium: {};",
+            //     theme.common.border_radius_medium
+            // ));
+            // css_vars.push_str(&format!(
+            //     "--spacingHorizontalM: {};",
+            //     theme.common.spacing_horizontal_m
+            // ));
 
-            css_vars.push_str(&format!(
-                "--durationFaster: {};",
-                theme.common.duration_faster
-            ));
-            css_vars.push_str(&format!(
-                "--curveEasyEase: {};",
-                theme.common.curve_easy_ease
-            ));
-        
+            // css_vars.push_str(&format!(
+            //     "--durationFaster: {};",
+            //     theme.common.duration_faster
+            // ));
+            // css_vars.push_str(&format!(
+            //     "--curveEasyEase: {};",
+            //     theme.common.curve_easy_ease
+            // ));
+            theme.common.write_css_vars(&mut css_vars);
             theme.color.write_css_vars(&mut css_vars);
         });
         css_vars
diff --git a/thaw/src/date_picker/panel/date_panel.rs b/thaw/src/date_picker/panel/date_panel.rs
index d79c2fe..e02ca11 100644
--- a/thaw/src/date_picker/panel/date_panel.rs
+++ b/thaw/src/date_picker/panel/date_panel.rs
@@ -88,27 +88,27 @@ pub fn DatePanel(
             <div class="thaw-date-picker-date-panel__calendar">
                 <div class="thaw-date-picker-date-panel__header">
                     <Button
-                        variant=ButtonAppearance::Transparent
+                        appearance=ButtonAppearance::Transparent
                         size=ButtonSize::Small
                         icon=icondata_ai::AiArrowLeftOutlined
                         on_click=previous_year
                     />
                     <Button
-                        variant=ButtonAppearance::Transparent
+                        appearance=ButtonAppearance::Transparent
                         size=ButtonSize::Small
                         icon=icondata_ai::AiLeftOutlined
                         on_click=previous_month
                     />
                     <div class="thaw-date-picker-date-panel__header-month-year">
                         <Button
-                            variant=ButtonAppearance::Subtle
+                            appearance=ButtonAppearance::Subtle
                             size=ButtonSize::Small
                             on_click=move |_| panel_variant.set(PanelVariant::Month)
                         >
                             {move || Month::try_from(show_date.get().month() as u8).unwrap().name()}
                         </Button>
                         <Button
-                            variant=ButtonAppearance::Subtle
+                            appearance=ButtonAppearance::Subtle
                             size=ButtonSize::Small
                             on_click=move |_| panel_variant.set(PanelVariant::Year)
                         >
@@ -116,13 +116,13 @@ pub fn DatePanel(
                         </Button>
                     </div>
                     <Button
-                        variant=ButtonAppearance::Transparent
+                        appearance=ButtonAppearance::Transparent
                         size=ButtonSize::Small
                         icon=icondata_ai::AiRightOutlined
                         on_click=next_month
                     />
                     <Button
-                        variant=ButtonAppearance::Transparent
+                        appearance=ButtonAppearance::Transparent
                         size=ButtonSize::Small
                         icon=icondata_ai::AiArrowRightOutlined
                         on_click=next_year
diff --git a/thaw/src/date_picker/panel/month_panel.rs b/thaw/src/date_picker/panel/month_panel.rs
index 4dfe415..9b32170 100644
--- a/thaw/src/date_picker/panel/month_panel.rs
+++ b/thaw/src/date_picker/panel/month_panel.rs
@@ -23,14 +23,14 @@ pub fn MonthPanel(
         <div class="thaw-date-picker-month-panel">
             <div class="thaw-date-picker-month-panel__header">
                 <Button
-                    variant=ButtonAppearance::Transparent
+                    appearance=ButtonAppearance::Transparent
                     size=ButtonSize::Small
                     icon=icondata_ai::AiArrowLeftOutlined
                     on_click=previous_year
                 />
                 <div class="thaw-date-picker-date-panel__header-year">
                     <Button
-                        variant=ButtonAppearance::Subtle
+                        appearance=ButtonAppearance::Subtle
                         size=ButtonSize::Small
                         on_click=move |_| panel_variant.set(PanelVariant::Year)
                     >
@@ -38,7 +38,7 @@ pub fn MonthPanel(
                     </Button>
                 </div>
                 <Button
-                    variant=ButtonAppearance::Transparent
+                    appearance=ButtonAppearance::Transparent
                     size=ButtonSize::Small
                     icon=icondata_ai::AiArrowRightOutlined
                     on_click=next_year
diff --git a/thaw/src/date_picker/panel/year_panel.rs b/thaw/src/date_picker/panel/year_panel.rs
index 47948e0..9e3fd81 100644
--- a/thaw/src/date_picker/panel/year_panel.rs
+++ b/thaw/src/date_picker/panel/year_panel.rs
@@ -30,7 +30,7 @@ pub fn YearPanel(
         <div>
             <div class="thaw-date-picker-year-panel__header">
                 <Button
-                    variant=ButtonAppearance::Transparent
+                    appearance=ButtonAppearance::Transparent
                     size=ButtonSize::Small
                     icon=icondata_ai::AiArrowLeftOutlined
                     on_click=previous_year_range
@@ -43,7 +43,7 @@ pub fn YearPanel(
 
                 </div>
                 <Button
-                    variant=ButtonAppearance::Transparent
+                    appearance=ButtonAppearance::Transparent
                     size=ButtonSize::Small
                     icon=icondata_ai::AiArrowRightOutlined
                     on_click=next_year_range
diff --git a/thaw/src/global_style/mod.rs b/thaw/src/global_style/mod.rs
index 4a901d7..fad8395 100644
--- a/thaw/src/global_style/mod.rs
+++ b/thaw/src/global_style/mod.rs
@@ -7,10 +7,10 @@ pub fn GlobalStyle() -> impl IntoView {
     create_effect(move |_| {
         theme.with(|theme| {
             if let Some(body) = document().body() {
-                _ = body
-                    .style()
-                    .set_property("background-color", &theme.common.background_color);
-                _ = body.style().set_property("color", &theme.common.font_color);
+                // _ = body
+                //     .style()
+                //     .set_property("background-color", &theme.common.background_color);
+                // _ = body.style().set_property("color", &theme.common.font_color);
                 // _ = body
                 //     .style()
                 //     .set_property("font-size", &theme.common.font_size);
diff --git a/thaw/src/input_number/mod.rs b/thaw/src/input_number/mod.rs
index 7ca0404..2943f11 100644
--- a/thaw/src/input_number/mod.rs
+++ b/thaw/src/input_number/mod.rs
@@ -90,10 +90,10 @@ where
             on_blur=set_within_range
         >
             <InputSuffix slot>
-                <Button disabled=minus_disabled variant=ButtonAppearance::Transparent on_click=sub>
+                <Button disabled=minus_disabled appearance=ButtonAppearance::Transparent on_click=sub>
                     <Icon icon=icondata_ai::AiMinusOutlined style="font-size: 18px"/>
                 </Button>
-                <Button disabled=plus_disabled variant=ButtonAppearance::Transparent on_click=add>
+                <Button disabled=plus_disabled appearance=ButtonAppearance::Transparent on_click=add>
                     <Icon icon=icondata_ai::AiPlusOutlined style="font-size: 18px"/>
                 </Button>
             </InputSuffix>
diff --git a/thaw/src/popover/mod.rs b/thaw/src/popover/mod.rs
index 992b8ff..93614ff 100644
--- a/thaw/src/popover/mod.rs
+++ b/thaw/src/popover/mod.rs
@@ -38,7 +38,9 @@ pub fn Popover(
             let font_color = if tooltip {
                 "#fff"
             } else {
-                &theme.common.font_color
+                // TODO
+                // &theme.common.font_color
+                ""
             };
             css_vars.push_str(&format!("--thaw-font-color: {};", font_color));
         });
diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs
index 56fd03c..6aa459d 100644
--- a/thaw/src/theme/common.rs
+++ b/thaw/src/theme/common.rs
@@ -1,10 +1,9 @@
 use super::ThemeMethod;
+use thaw_macro::WriteCSSVars;
 
-#[derive(Clone)]
+#[derive(Clone, WriteCSSVars)]
 pub struct CommonTheme {
     pub font_family_base: String,
-    pub font_color: String,
-    pub background_color: String,
     pub border_color: String,
     pub color_scheme: String,
 
@@ -31,8 +30,11 @@ pub struct CommonTheme {
 
     pub stroke_width_thin: String,
 
+    pub border_radius_none: String,
     pub border_radius_medium: String,
-
+    pub border_radius_circular: String,
+    
+    pub spacing_horizontal_s_nudge: String,
     pub spacing_horizontal_m: String,
 
     pub duration_faster: String,
@@ -52,8 +54,6 @@ impl CommonTheme {
     fn common() -> Self {
         Self {
             font_family_base: "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(),
-            font_color: "".into(),
-            background_color: "".into(),
             border_color: "".into(),
             color_scheme: "".into(),
             color_primary: "".into(),
@@ -79,8 +79,11 @@ impl CommonTheme {
 
             stroke_width_thin: "1px".into(),
 
+            border_radius_none: "0".into(),
             border_radius_medium: "4px".into(),
+            border_radius_circular: "10000px".into(),
 
+            spacing_horizontal_s_nudge: "6px".into(),
             spacing_horizontal_m: "12px".into(),
 
             duration_faster: "100ms".into(),
@@ -101,8 +104,6 @@ impl CommonTheme {
 impl ThemeMethod for CommonTheme {
     fn light() -> Self {
         Self {
-            font_color: "#11181c".into(),
-            background_color: "#fff".into(),
             color_scheme: "light".into(),
             color_primary: "#0078ff".into(),
             color_primary_hover: "#2994ff".into(),
@@ -123,8 +124,6 @@ impl ThemeMethod for CommonTheme {
     }
     fn dark() -> Self {
         Self {
-            font_color: "#ecedee".into(),
-            background_color: "#1a1d1e".into(),
             color_scheme: "dark".into(),
             color_primary: "#0078ff".into(),
             color_primary_hover: "#2994ff".into(),