feat: checkbox

thaw/src/checkbox/checkbox.css

@@ -1,33 +1,89 @@
 .thaw-checkbox {
+    position: relative;
     display: inline-flex;
-    align-items: center;
+    vertical-align: middle;
+    color: var(--colorNeutralForeground3);
     cursor: pointer;
 }
 
+.thaw-checkbox--checked {
+    --thaw-checkbox__indicator--background-color: var(
+        --colorCompoundBrandBackground
+    );
+    --thaw-checkbox__indicator--color: var(--colorNeutralForegroundInverted);
+    --thaw-checkbox__indicator--border-color: var(
+        --colorCompoundBrandBackground
+    );
+}
+
+.thaw-checkbox:hover {
+    color: var(--colorNeutralForeground2);
+
+    --thaw-checkbox__indicator--border-color: var(
+        --colorNeutralStrokeAccessibleHover
+    );
+}
+
+.thaw-checkbox:active {
+    color: var(--colorNeutralForeground1);
+
+    --thaw-checkbox__indicator--border-color: var(
+        --colorNeutralStrokeAccessiblePressed
+    );
+}
+
+.thaw-checkbox:focus,
+.thaw-checkbox:focus-visible {
+    outline-style: none;
+}
+
 .thaw-checkbox__input {
-    width: 0;
-    height: 0;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: calc(16px + 2 * var(--spacingHorizontalS));
+    height: 100%;
+    margin: 0px;
     opacity: 0;
+    box-sizing: border-box;
+    cursor: inherit;
 }
-.thaw-checkbox__dot {
-    display: inline-flex;
-    justify-content: center;
+
+.thaw-checkbox__indicator {
+    align-self: flex-start;
+    flex-shrink: 0;
+    display: flex;
     align-items: center;
-    width: 14px;
-    height: 14px;
-    border: 1px solid #ddd;
-    border-radius: 2px;
-}
-.thaw-checkbox:hover .thaw-checkbox__dot,
-.thaw-checkbox--checked .thaw-checkbox__dot {
-    border-color: var(--thaw-background-color-checked);
-}
-.thaw-checkbox--checked .thaw-checkbox__dot {
-    background-color: var(--thaw-background-color-checked);
+    justify-content: center;
+    margin: var(--spacingVerticalS) var(--spacingHorizontalS);
+    height: 16px;
+    width: 16px;
+    background-color: var(--thaw-checkbox__indicator--background-color);
+    font-size: 12px;
+    color: var(--thaw-checkbox__indicator--color);
+    border-color: var(
+        --thaw-checkbox__indicator--border-color,
+        var(--colorNeutralStrokeAccessible)
+    );
+    border-style: solid;
+    border-width: var(--strokeWidthThin);
+    border-radius: var(--borderRadiusSmall);
+    fill: currentcolor;
+    box-sizing: border-box;
+    pointer-events: none;
+    overflow: hidden;
 }
 
 .thaw-checkbox__label {
-    display: inline-block;
-    padding: 0 6px;
-    user-select: none;
+    align-self: center;
+    margin-bottom: calc((16px - var(--lineHeightBase300)) / 2);
+    margin-top: calc((16px - var(--lineHeightBase300)) / 2);
+    padding-bottom: var(--spacingVerticalS);
+    padding-top: var(--spacingVerticalS);
+    padding-left: var(--spacingHorizontalXS);
+    padding-right: var(--spacingHorizontalS);
+    line-height: var(--lineHeightBase300);
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    color: inherit;
 }

thaw/src/checkbox/mod.rs

@@ -4,7 +4,7 @@ mod checkbox_item;
 pub use checkbox_group::CheckboxGroup;
 pub use checkbox_item::CheckboxItem;
 
-use crate::{icon::*, theme::use_theme, Theme};
+use crate::icon::*;
 use leptos::*;
 use thaw_components::*;
 use thaw_utils::{class_list, mount_style, Model, OptionalProp};
@@ -15,20 +15,8 @@ pub fn Checkbox(
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
-    let theme = use_theme(Theme::light);
     mount_style("checkbox", include_str!("./checkbox.css"));
 
-    let css_vars = create_memo(move |_| {
-        let mut css_vars = String::new();
-        theme.with(|theme| {
-            css_vars.push_str(&format!(
-                "--thaw-background-color-checked: {};",
-                theme.common.color_primary
-            ));
-        });
-        css_vars
-    });
-
     view! {
         <div
             class=class_list![
@@ -36,11 +24,10 @@ pub fn Checkbox(
                 move || c.get())
             ]
 
-            style=move || css_vars.get()
             on:click=move |_| value.set(!value.get_untracked())
         >
             <input class="thaw-checkbox__input" type="checkbox"/>
-            <div class="thaw-checkbox__dot">
+            <div class="thaw-checkbox__indicator">
                 <If cond=value.signal()>
                     <Then slot>
                         <Icon icon=icondata_ai::AiCheckOutlined style="color: white"/>
@@ -48,7 +35,7 @@ pub fn Checkbox(
                 </If>
             </div>
             <OptionComp value=children let:children>
-                <div class="thaw-checkbox__label">{children()}</div>
+                <label class="thaw-checkbox__label">{children()}</label>
             </OptionComp>
         </div>
     }

thaw/src/theme/common.rs

@@ -46,11 +46,13 @@ pub struct CommonTheme {
     pub border_radius_circular: String,
 
     pub spacing_horizontal_x_x_s: String,
+    pub spacing_horizontal_x_s: String,
     pub spacing_horizontal_s_nudge: String,
     pub spacing_horizontal_s: String,
     pub spacing_horizontal_m_nudge: String,
     pub spacing_horizontal_m: String,
     pub spacing_horizontal_l: String,
+    pub spacing_vertical_s: String,
     pub spacing_vertical_m_nudge: String,
     pub spacing_vertical_l: String,
 
@@ -116,11 +118,13 @@ impl CommonTheme {
             border_radius_circular: "10000px".into(),
 
             spacing_horizontal_x_x_s: "2px".into(),
+            spacing_horizontal_x_s: "4px".into(),
             spacing_horizontal_s_nudge: "6px".into(),
             spacing_horizontal_s: "8px".into(),
             spacing_horizontal_m_nudge: "10px".into(),
             spacing_horizontal_m: "12px".into(),
             spacing_horizontal_l: "16px".into(),
+            spacing_vertical_s: "8px".into(),
             spacing_vertical_m_nudge: "10px".into(),
             spacing_vertical_l: "16px".into(),