From e9c2359aeb9d3c7d32eb020616a24aa3b36b77a4 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 21 Mar 2024 21:53:29 +0800
Subject: [PATCH 1/2] pref: Switch style

---
 thaw/src/switch/switch.css | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/thaw/src/switch/switch.css b/thaw/src/switch/switch.css
index 2cc75f78..079e37f8 100644
--- a/thaw/src/switch/switch.css
+++ b/thaw/src/switch/switch.css
@@ -1,24 +1,23 @@
 .thaw-switch {
     position: relative;
     display: inline-block;
-    width: 35px;
-    height: 19px;
-    padding: 2px 5px 3px;
+    width: 40px;
+    height: 22px;
     background-color: var(--thaw-background-color);
-    border-radius: 25px;
+    border-radius: 11px;
     cursor: pointer;
     box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.05);
     transition: all 0.4s ease;
-    box-sizing: content-box;
 }
 
 .thaw-switch__button {
     position: absolute;
-    left: 4px;
+    top: 2px;
+    left: 2px;
     display: inline-block;
-    width: 19px;
-    height: 19px;
-    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    border-radius: 9px;
     background-color: #fff;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3),
         inset 0 0 1px 0 rgba(0, 0, 0, 0.05);
@@ -30,5 +29,13 @@
 }
 
 .thaw-switch--active .thaw-switch__button {
-    left: 22px;
+    left: 20px;
+}
+
+.thaw-switch--active:active .thaw-switch__button {
+    left: 14px;
+}
+
+.thaw-switch:active .thaw-switch__button {
+    width: 24px;
 }

From d0593883b6916fb384591fca2da7524778fd77f5 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 21 Mar 2024 22:01:50 +0800
Subject: [PATCH 2/2] pref: Switch style and ARIA

---
 thaw/src/switch/mod.rs     | 2 ++
 thaw/src/switch/switch.css | 1 +
 2 files changed, 3 insertions(+)

diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs
index 5c578c80..cee6148e 100644
--- a/thaw/src/switch/mod.rs
+++ b/thaw/src/switch/mod.rs
@@ -37,6 +37,8 @@ pub fn Switch(
 
             style=move || css_vars.get()
             on:click=move |_| value.set(!value.get_untracked())
+            role="switch"
+            aria-checked=move || if value.get() { "true" } else { "false" }
         >
             <div class="thaw-switch__button"></div>
         </div>
diff --git a/thaw/src/switch/switch.css b/thaw/src/switch/switch.css
index 079e37f8..0a2118d7 100644
--- a/thaw/src/switch/switch.css
+++ b/thaw/src/switch/switch.css
@@ -8,6 +8,7 @@
     cursor: pointer;
     box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.05);
     transition: all 0.4s ease;
+    user-select: none;
 }
 
 .thaw-switch__button {