From 99daeaab7855899d985b13b641ad40048201f615 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 15 May 2024 01:26:11 +0300
Subject: [PATCH] Toggle Switch style for Nora

---
 .../lib/themes/aura/toggleswitch/index.js     | 13 +++--
 .../lib/themes/lara/toggleswitch/index.js     | 13 +++--
 .../lib/themes/nora/toggleswitch/index.js     | 47 +++++--------------
 .../toggleswitch/style/ToggleSwitchStyle.js   | 10 ++--
 4 files changed, 28 insertions(+), 55 deletions(-)

diff --git a/components/lib/themes/aura/toggleswitch/index.js b/components/lib/themes/aura/toggleswitch/index.js
index 74983d74a..64cd12213 100644
--- a/components/lib/themes/aura/toggleswitch/index.js
+++ b/components/lib/themes/aura/toggleswitch/index.js
@@ -15,13 +15,15 @@ export default {
             color: '{focus.ring.color}',
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
-        }
+        },
+        borderWidth: '1px',
+        borderColor: 'transparent',
+        invalidBorderColor: '{form.field.invalid.border.color}'
     },
     colorScheme: {
         light: {
             root: {
                 background: '{surface.300}',
-                invalidBackground: '{red.400}',
                 hoverBackground: '{surface.400}',
                 checkedBackground: '{primary.color}',
                 checkedHoverBackground: '{primary.hover.color}'
@@ -30,14 +32,12 @@ export default {
                 background: '{surface.0}',
                 hoverBackground: '{surface.0}',
                 checkedBackground: '{surface.0}',
-                checkedHoverBackground: '{surface.0}',
-                invalidBackground: '{surface.0}'
+                checkedHoverBackground: '{surface.0}'
             }
         },
         dark: {
             root: {
                 background: '{surface.700}',
-                invalidBackground: '{red.300}',
                 hoverBackground: '{surface.600}',
                 checkedBackground: '{primary.color}',
                 checkedHoverBackground: '{primary.hover.color}'
@@ -46,8 +46,7 @@ export default {
                 background: '{surface.400}',
                 hoverBackground: '{surface.300}',
                 checkedBackground: '{surface.900}',
-                checkedHoverBackground: '{surface.900}',
-                invalidBackground: '{surface.900}'
+                checkedHoverBackground: '{surface.900}'
             }
         }
     }
diff --git a/components/lib/themes/lara/toggleswitch/index.js b/components/lib/themes/lara/toggleswitch/index.js
index bc4181a2b..33a8a624f 100644
--- a/components/lib/themes/lara/toggleswitch/index.js
+++ b/components/lib/themes/lara/toggleswitch/index.js
@@ -15,13 +15,15 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        borderWidth: '1px',
+        borderColor: 'transparent',
+        invalidBorderColor: '{form.field.invalid.border.color}'
     },
     colorScheme: {
         light: {
             root: {
                 background: '{surface.300}',
-                invalidBackground: '{red.400}',
                 hoverBackground: '{surface.400}',
                 checkedBackground: '{primary.color}',
                 checkedHoverBackground: '{primary.hover.color}'
@@ -30,14 +32,12 @@ export default {
                 background: '{surface.0}',
                 hoverBackground: '{surface.0}',
                 checkedBackground: '{surface.0}',
-                checkedHoverBackground: '{surface.0}',
-                invalidBackground: '{surface.0}'
+                checkedHoverBackground: '{surface.0}'
             }
         },
         dark: {
             root: {
                 background: '{surface.700}',
-                invalidBackground: '{red.300}',
                 hoverBackground: '{surface.600}',
                 checkedBackground: '{primary.color}',
                 checkedHoverBackground: '{primary.hover.color}'
@@ -46,8 +46,7 @@ export default {
                 background: '{surface.400}',
                 hoverBackground: '{surface.300}',
                 checkedBackground: '{surface.900}',
-                checkedHoverBackground: '{surface.900}',
-                invalidBackground: '{surface.900}'
+                checkedHoverBackground: '{surface.900}'
             }
         }
     }
diff --git a/components/lib/themes/nora/toggleswitch/index.js b/components/lib/themes/nora/toggleswitch/index.js
index 74983d74a..2d09e8291 100644
--- a/components/lib/themes/nora/toggleswitch/index.js
+++ b/components/lib/themes/nora/toggleswitch/index.js
@@ -1,7 +1,11 @@
 export default {
     handle: {
         borderRadius: '50%',
-        size: '1rem'
+        size: '1rem',
+        background: '{form.field.border.color}',
+        hoverBackground: '{form.field.border.color}',
+        checkedBackground: '{primary.contrast.color}',
+        checkedHoverBackground: '{primary.contrast.color}'
     },
     root: {
         width: '2.5rem',
@@ -15,40 +19,13 @@ export default {
             color: '{focus.ring.color}',
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
-        }
-    },
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.300}',
-                invalidBackground: '{red.400}',
-                hoverBackground: '{surface.400}',
-                checkedBackground: '{primary.color}',
-                checkedHoverBackground: '{primary.hover.color}'
-            },
-            handle: {
-                background: '{surface.0}',
-                hoverBackground: '{surface.0}',
-                checkedBackground: '{surface.0}',
-                checkedHoverBackground: '{surface.0}',
-                invalidBackground: '{surface.0}'
-            }
         },
-        dark: {
-            root: {
-                background: '{surface.700}',
-                invalidBackground: '{red.300}',
-                hoverBackground: '{surface.600}',
-                checkedBackground: '{primary.color}',
-                checkedHoverBackground: '{primary.hover.color}'
-            },
-            handle: {
-                background: '{surface.400}',
-                hoverBackground: '{surface.300}',
-                checkedBackground: '{surface.900}',
-                checkedHoverBackground: '{surface.900}',
-                invalidBackground: '{surface.900}'
-            }
-        }
+        borderWidth: '1px',
+        borderColor: '{form.field.border.color}',
+        invalidBorderColor: '{form.field.invalid.border.color}',
+        background: '{form.field.background}',
+        hoverBackground: '{form.field.background}',
+        checkedBackground: '{primary.color}',
+        checkedHoverBackground: '{primary.color}'
     }
 };
diff --git a/components/lib/toggleswitch/style/ToggleSwitchStyle.js b/components/lib/toggleswitch/style/ToggleSwitchStyle.js
index 0b1883905..b13648d92 100644
--- a/components/lib/toggleswitch/style/ToggleSwitchStyle.js
+++ b/components/lib/toggleswitch/style/ToggleSwitchStyle.js
@@ -30,7 +30,9 @@ const theme = ({ dt }) => `
     left: 0;
     right: 0;
     bottom: 0;
-    border: 0 none;
+    border-width: ${dt('toggleswitch.border.width')};
+    border-style: solid;
+    border-color: ${dt('toggleswitch.border.color')};
     background: ${dt('toggleswitch.background')};
     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')};
@@ -84,11 +86,7 @@ const theme = ({ dt }) => `
 }
 
 .p-toggleswitch.p-invalid > .p-toggleswitch-slider {
-    background: ${dt('toggleswitch.invalid.background')};
-}
-
-.p-toggleswitch.p-invalid > .p-toggleswitch-slider:before {
-    background: ${dt('toggleswitch.handle.invalid.background')};
+    border-color: ${dt('toggleswitch.invalid.border.color')};
 }
 `;