From 09cba205a4e6bf4b3e77889f9a83741af4d56d31 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Sun, 9 Mar 2025 22:53:19 +0800
Subject: [PATCH] adjust Switch component styles.

---
 src/components/Switch.module.css | 31 ++++++++++++++++---------------
 src/components/Switch.tsx        |  2 ++
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/Switch.module.css b/src/components/Switch.module.css
index b8103a5..8450931 100644
--- a/src/components/Switch.module.css
+++ b/src/components/Switch.module.css
@@ -4,7 +4,7 @@
     align-items: center;
     gap: 1em;
     cursor: pointer;
-    &[aria-disabled] {
+    &[aria-disabled='true'] {
       cursor: not-allowed;
     }
   }
@@ -14,11 +14,11 @@
     height: calc(var(--spacing) * 5);
     border: 1px solid var(--color-primary);
     border-radius: calc(var(--border-radius) * 2);
-    background-color: var(--color-surface-container-high);
+    background-color: color-mix(in oklch, var(--color-surface-container-high) 38%, transparent);
     &::before {
       content: '';
       position: absolute;
-      transform: translate(1px, 2px);
+      transform: translate(2px, 3px);
       width: calc(var(--spacing) * 3);
       height: calc(var(--spacing) * 3);
       border-radius: calc(var(--border-radius) * 2);
@@ -26,20 +26,21 @@
       transition: transform 0.2s ease-in-out;
     }
     &.checked {
-      background-color: var(--color-primary);
+      background-color: color-mix(in oklch, var(--color-primary) 38%, transparent);
       &::before {
-        transform: translate(calc(var(--spacing) * 5 - 1px), 2px);
+        background-color: var(--color-primary);
+        transform: translate(calc(var(--spacing) * 5 - 2px), 3px);
       }
-      [aria-disabled] & {
-        --disabled-color: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
-        background-color: var(--disabled-color);
-        border-color: var(--disabled-color);
-        &.checked {
-          background-color: var(--disabled-color);
-        }
-        &::before {
-          background-color: color-mix(in oklch, var(--color-on-surface) 45%, transparent);
-        }
+    }
+    [aria-disabled='true'] & {
+      --disabled-color: var(--color-on-surface);
+      background-color: color-mix(in oklch, var(--disabled-color) 8%, transparent);
+      border-color: var(--disabled-color);
+      &.checked {
+        background-color: color-mix(in oklch, var(--disabled-color) 20%, transparent);
+      }
+      &::before {
+        background-color: color-mix(in oklch, var(--disabled-color) 38%, transparent);
       }
     }
   }
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index cf83535..4ea58fa 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -36,3 +36,5 @@ const Switch: FC<SwitchProps> = ({ name, checked = false, disabled = false, onCh
     </div>
   );
 };
+
+export default Switch;