From 86bc960d5f47e8da939390e12f2007919d1a8584 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 8 May 2024 13:51:06 +0300
Subject: [PATCH] New tokens for ToggleSwitch

---
 .../lib/themes/aura/toggleswitch/index.js     | 16 +++++++++++--
 .../lib/themes/lara/toggleswitch/index.js     | 16 +++++++++++--
 .../toggleswitch/style/ToggleSwitchStyle.js   | 23 +++++++++++--------
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/components/lib/themes/aura/toggleswitch/index.js b/components/lib/themes/aura/toggleswitch/index.js
index fd33edf7c..c62647120 100644
--- a/components/lib/themes/aura/toggleswitch/index.js
+++ b/components/lib/themes/aura/toggleswitch/index.js
@@ -1,9 +1,21 @@
 export default {
     handle: {
-        borderRadius: '50%'
+        borderRadius: '50%',
+        size: '1rem'
     },
     root: {
-        borderRadius: '30px'
+        width: '2.5rem',
+        height: '1.5rem',
+        borderRadius: '30px',
+        gap: '0.25rem',
+        shadow: '{form.field.shadow}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     },
     colorScheme: {
         light: {
diff --git a/components/lib/themes/lara/toggleswitch/index.js b/components/lib/themes/lara/toggleswitch/index.js
index fd33edf7c..e07293a9b 100644
--- a/components/lib/themes/lara/toggleswitch/index.js
+++ b/components/lib/themes/lara/toggleswitch/index.js
@@ -1,9 +1,21 @@
 export default {
     handle: {
-        borderRadius: '50%'
+        borderRadius: '50%',
+        size: '1.25rem'
     },
     root: {
-        borderRadius: '30px'
+        width: '3rem',
+        height: '1.75rem',
+        borderRadius: '30px',
+        gap: '0.25rem',
+        shadow: '{form.field.shadow}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
     },
     colorScheme: {
         light: {
diff --git a/components/lib/toggleswitch/style/ToggleSwitchStyle.js b/components/lib/toggleswitch/style/ToggleSwitchStyle.js
index 5e75248e4..0b1883905 100644
--- a/components/lib/toggleswitch/style/ToggleSwitchStyle.js
+++ b/components/lib/toggleswitch/style/ToggleSwitchStyle.js
@@ -3,8 +3,8 @@ import BaseStyle from 'primevue/base/style';
 const theme = ({ dt }) => `
 .p-toggleswitch {
     display: inline-block;
-    width: 2.5rem;
-    height: 1.5rem;
+    width: ${dt('toggleswitch.width')};
+    height: ${dt('toggleswitch.height')};
 }
 
 .p-toggleswitch-input {
@@ -32,9 +32,10 @@ const theme = ({ dt }) => `
     bottom: 0;
     border: 0 none;
     background: ${dt('toggleswitch.background')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     border-radius: ${dt('toggleswitch.border.radius')};
     outline-color: transparent;
+    box-shadow: ${dt('toggleswitch.shadow')};
 }
 
 .p-toggleswitch-slider:before {
@@ -42,10 +43,10 @@ const theme = ({ dt }) => `
     content: "";
     top: 50%;
     background: ${dt('toggleswitch.handle.background')};
-    width: 1rem;
-    height: 1rem;
-    left: 0.25rem;
-    margin-top: -0.5rem;
+    width: ${dt('toggleswitch.handle.size')};
+    height: ${dt('toggleswitch.handle.size')};
+    left: ${dt('toggleswitch.gap')};
+    margin-top: calc(-1 * calc(${dt('toggleswitch.handle.size')} / 2));
     border-radius: ${dt('toggleswitch.handle.border.radius')};
     transition: all ${dt('transition.duration')};
 }
@@ -56,7 +57,7 @@ const theme = ({ dt }) => `
 
 .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider:before {
     background: ${dt('toggleswitch.handle.checked.background')};
-    left: 1.25rem;
+    left: calc(${dt('toggleswitch.width')} - calc(${dt('toggleswitch.handle.size')} + ${dt('toggleswitch.gap')}));
 }
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
@@ -76,8 +77,10 @@ const theme = ({ dt }) => `
 }
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    border-color: ${dt('toggleswitch.focus.border.color')};
+    box-shadow: ${dt('toggleswitch.focus.ring.shadow')};
+    outline: ${dt('toggleswitch.focus.ring.width')} ${dt('toggleswitch.focus.ring.style')} ${dt('toggleswitch.focus.ring.color')};
+    outline-offset: ${dt('toggleswitch.focus.ring.offset')};
 }
 
 .p-toggleswitch.p-invalid > .p-toggleswitch-slider {