From 2b4936d7e490e2f621bc831e93c2f3272a5b6749 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 25 May 2024 12:52:59 +0300
Subject: [PATCH] New border tokens for toggle switch

---
 components/lib/themes/aura/toggleswitch/index.js       | 3 +++
 components/lib/themes/lara/toggleswitch/index.js       | 3 +++
 components/lib/themes/nora/toggleswitch/index.js       | 3 +++
 components/lib/toggleswitch/style/ToggleSwitchStyle.js | 4 +++-
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/lib/themes/aura/toggleswitch/index.js b/components/lib/themes/aura/toggleswitch/index.js
index 74ac147fb..08e2c7cd6 100644
--- a/components/lib/themes/aura/toggleswitch/index.js
+++ b/components/lib/themes/aura/toggleswitch/index.js
@@ -14,6 +14,9 @@ export default {
         },
         borderWidth: '1px',
         borderColor: 'transparent',
+        hoverBorderColor: 'transparent',
+        checkedBorderColor: 'transparent',
+        checkedHoverBorderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
         transitionDuration: '{form.field.transition.duration}',
         slideDuration: '0.2s'
diff --git a/components/lib/themes/lara/toggleswitch/index.js b/components/lib/themes/lara/toggleswitch/index.js
index 53c3831ba..0c838821b 100644
--- a/components/lib/themes/lara/toggleswitch/index.js
+++ b/components/lib/themes/lara/toggleswitch/index.js
@@ -14,6 +14,9 @@ export default {
         },
         borderWidth: '1px',
         borderColor: 'transparent',
+        hoverBorderColor: 'transparent',
+        checkedBorderColor: 'transparent',
+        checkedHoverBorderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
         transitionDuration: '{form.field.transition.duration}',
         slideDuration: '0.2s'
diff --git a/components/lib/themes/nora/toggleswitch/index.js b/components/lib/themes/nora/toggleswitch/index.js
index b9e730857..492c9e4cf 100644
--- a/components/lib/themes/nora/toggleswitch/index.js
+++ b/components/lib/themes/nora/toggleswitch/index.js
@@ -14,6 +14,9 @@ export default {
         },
         borderWidth: '1px',
         borderColor: '{form.field.border.color}',
+        hoverBorderColor: '{form.field.border.color}',
+        checkedBorderColor: '{primary.color}',
+        checkedHoverBorderColor: '{primary.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
         background: '{form.field.background}',
         hoverBackground: '{form.field.background}',
diff --git a/components/lib/toggleswitch/style/ToggleSwitchStyle.js b/components/lib/toggleswitch/style/ToggleSwitchStyle.js
index b62a3f633..74c775909 100644
--- a/components/lib/toggleswitch/style/ToggleSwitchStyle.js
+++ b/components/lib/toggleswitch/style/ToggleSwitchStyle.js
@@ -55,6 +55,7 @@ const theme = ({ dt }) => `
 
 .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
     background: ${dt('toggleswitch.checked.background')};
+    border-color: ${dt('toggleswitch.checked.border.color')};
 }
 
 .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider:before {
@@ -64,6 +65,7 @@ const theme = ({ dt }) => `
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
     background: ${dt('toggleswitch.hover.background')};
+    border-color: ${dt('toggleswitch.hover.border.color')};
 }
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider:before {
@@ -72,6 +74,7 @@ const theme = ({ dt }) => `
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
     background: ${dt('toggleswitch.checked.hover.background')};
+    border-color: ${dt('toggleswitch.checked.hover.border.color')};
 }
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider:before {
@@ -79,7 +82,6 @@ const theme = ({ dt }) => `
 }
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
-    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')};