From b29f1dad1da87bb0522720b31ac9dd1401e1aef2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Sep 2024 15:44:18 +0300
Subject: [PATCH] Material toggle switch

---
 .../src/presets/material/checkbox/index.js    |  8 ++--
 .../src/presets/material/radiobutton/index.js |  8 ++--
 .../presets/material/toggleswitch/index.js    | 43 ++++++++++++++-----
 3 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/packages/themes/src/presets/material/checkbox/index.js b/packages/themes/src/presets/material/checkbox/index.js
index 1bbf1e6d3..007bdae96 100644
--- a/packages/themes/src/presets/material/checkbox/index.js
+++ b/packages/themes/src/presets/material/checkbox/index.js
@@ -52,14 +52,14 @@ export default {
     box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
 }
 
-.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) {
-    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('checkbox.checked.background')}, transparent 92%);
-}
-
 .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
     box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 88%);
 }
 
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('checkbox.checked.background')}, transparent 92%);
+}
+
 .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
     box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('checkbox.checked.background')}, transparent 84%);
 }
diff --git a/packages/themes/src/presets/material/radiobutton/index.js b/packages/themes/src/presets/material/radiobutton/index.js
index 8784fec24..a9c4bc2d3 100644
--- a/packages/themes/src/presets/material/radiobutton/index.js
+++ b/packages/themes/src/presets/material/radiobutton/index.js
@@ -50,14 +50,14 @@ export default {
     box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
 }
 
-.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) {
-    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 92%);
-}
-
 .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
     box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 88%);
 }
 
+.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 92%);
+}
+
 .p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
     box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 84%);
 }
diff --git a/packages/themes/src/presets/material/toggleswitch/index.js b/packages/themes/src/presets/material/toggleswitch/index.js
index bcf63d842..a7507dfd2 100644
--- a/packages/themes/src/presets/material/toggleswitch/index.js
+++ b/packages/themes/src/presets/material/toggleswitch/index.js
@@ -1,10 +1,10 @@
 export default {
     root: {
-        width: '2.5rem',
-        height: '1.5rem',
+        width: '2.75rem',
+        height: '1rem',
         borderRadius: '30px',
-        gap: '0.25rem',
-        shadow: '{form.field.shadow}',
+        gap: '0',
+        shadow: 'none',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',
@@ -24,22 +24,22 @@ export default {
     },
     handle: {
         borderRadius: '50%',
-        size: '1rem',
+        size: '1.5rem',
         disabledBackground: '{form.field.disabled.color}'
     },
     colorScheme: {
         light: {
             root: {
                 background: '{surface.300}',
-                hoverBackground: '{surface.400}',
-                checkedBackground: '{primary.color}',
-                checkedHoverBackground: '{primary.hover.color}'
+                hoverBackground: '{surface.300}',
+                checkedBackground: '{primary.200}',
+                checkedHoverBackground: '{primary.200}'
             },
             handle: {
                 background: '{surface.0}',
                 hoverBackground: '{surface.0}',
-                checkedBackground: '{surface.0}',
-                checkedHoverBackground: '{surface.0}'
+                checkedBackground: '{primary.color}',
+                checkedHoverBackground: '{primary.color}'
             }
         },
         dark: {
@@ -56,5 +56,26 @@ export default {
                 checkedHoverBackground: '{surface.900}'
             }
         }
-    }
+    },
+    style: ({ dt }) => `
+.p-toggleswitch-slider:before {
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider:before {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider:before {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 88%), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider:before {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('toggleswitch.handle.checked.background')}, transparent 92%), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible).p-toggleswitch-checked .p-toggleswitch-slider:before {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('toggleswitch.handle.checked.background')}, transparent 84%), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+`
 };