From bb483ef4a68ef20827f7c13e75985dfaae92cbd4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 3 Jul 2024 12:00:25 +0300
Subject: [PATCH] Disabled style for toggle switch

---
 apps/showcase/doc/radiobutton/DisabledDoc.vue        |  4 ++--
 .../src/toggleswitch/style/ToggleSwitchStyle.js      | 12 ++++++++++++
 .../themes/src/presets/aura/toggleswitch/index.js    |  6 ++++--
 .../themes/src/presets/lara/toggleswitch/index.js    |  6 ++++--
 .../themes/src/presets/nora/toggleswitch/index.js    |  6 ++++--
 5 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/apps/showcase/doc/radiobutton/DisabledDoc.vue b/apps/showcase/doc/radiobutton/DisabledDoc.vue
index 93b47ccd7..235777828 100644
--- a/apps/showcase/doc/radiobutton/DisabledDoc.vue
+++ b/apps/showcase/doc/radiobutton/DisabledDoc.vue
@@ -21,7 +21,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex justify-center gap-2">
         <RadioButton v-model="value" :value="1" disabled />
         <RadioButton v-model="value" :value="2" disabled />
     </div>
@@ -39,7 +39,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex justify-center gap-2">
         <RadioButton v-model="value" :value="1" disabled />
         <RadioButton v-model="value" :value="2" disabled />
     </div>
diff --git a/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js b/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
index c6061e6a6..0487d8aac 100644
--- a/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
+++ b/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
@@ -90,6 +90,18 @@ const theme = ({ dt }) => `
 .p-toggleswitch.p-invalid > .p-toggleswitch-slider {
     border-color: ${dt('toggleswitch.invalid.border.color')};
 }
+
+.p-toggleswitch.p-disabled {
+    opacity: 1;
+}
+
+.p-toggleswitch.p-disabled .p-toggleswitch-slider {
+    background: ${dt('toggleswitch.disabled.background')};
+}
+
+.p-toggleswitch.p-disabled .p-toggleswitch-slider:before {
+    background: ${dt('toggleswitch.handle.disabled.background')};
+}
 `;
 
 const inlineStyles = {
diff --git a/packages/themes/src/presets/aura/toggleswitch/index.js b/packages/themes/src/presets/aura/toggleswitch/index.js
index 08e2c7cd6..bcf63d842 100644
--- a/packages/themes/src/presets/aura/toggleswitch/index.js
+++ b/packages/themes/src/presets/aura/toggleswitch/index.js
@@ -19,11 +19,13 @@ export default {
         checkedHoverBorderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
         transitionDuration: '{form.field.transition.duration}',
-        slideDuration: '0.2s'
+        slideDuration: '0.2s',
+        disabledBackground: '{form.field.disabled.background}'
     },
     handle: {
         borderRadius: '50%',
-        size: '1rem'
+        size: '1rem',
+        disabledBackground: '{form.field.disabled.color}'
     },
     colorScheme: {
         light: {
diff --git a/packages/themes/src/presets/lara/toggleswitch/index.js b/packages/themes/src/presets/lara/toggleswitch/index.js
index 0c838821b..4bfc86641 100644
--- a/packages/themes/src/presets/lara/toggleswitch/index.js
+++ b/packages/themes/src/presets/lara/toggleswitch/index.js
@@ -19,11 +19,13 @@ export default {
         checkedHoverBorderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
         transitionDuration: '{form.field.transition.duration}',
-        slideDuration: '0.2s'
+        slideDuration: '0.2s',
+        disabledBackground: '{form.field.disabled.background}'
     },
     handle: {
         borderRadius: '50%',
-        size: '1.25rem'
+        size: '1.25rem',
+        disabledBackground: '{form.field.disabled.color}'
     },
     colorScheme: {
         light: {
diff --git a/packages/themes/src/presets/nora/toggleswitch/index.js b/packages/themes/src/presets/nora/toggleswitch/index.js
index 492c9e4cf..3a588a1f8 100644
--- a/packages/themes/src/presets/nora/toggleswitch/index.js
+++ b/packages/themes/src/presets/nora/toggleswitch/index.js
@@ -23,7 +23,8 @@ export default {
         checkedBackground: '{primary.color}',
         checkedHoverBackground: '{primary.color}',
         transitionDuration: '{form.field.transition.duration}',
-        slideDuration: '0.1s'
+        slideDuration: '0.1s',
+        disabledBackground: '{form.field.disabled.background}'
     },
     handle: {
         borderRadius: '50%',
@@ -31,6 +32,7 @@ export default {
         background: '{form.field.border.color}',
         hoverBackground: '{form.field.border.color}',
         checkedBackground: '{primary.contrast.color}',
-        checkedHoverBackground: '{primary.contrast.color}'
+        checkedHoverBackground: '{primary.contrast.color}',
+        disabledBackground: '{form.field.disabled.color}'
     }
 };