From 639ece43f65a8c4502e8d6a908e60242a86beee8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 4 Oct 2024 09:26:32 +0300
Subject: [PATCH] Add new tokens for ToggleSwitch

---
 apps/showcase/doc/toggleswitch/TemplateDoc.vue       | 12 ++++++------
 .../src/toggleswitch/style/ToggleSwitchStyle.js      |  6 +++++-
 .../themes/src/presets/aura/toggleswitch/index.js    | 12 ++++++++++--
 .../themes/src/presets/lara/toggleswitch/index.js    | 12 ++++++++++--
 .../src/presets/material/toggleswitch/index.js       | 12 ++++++++++--
 .../themes/src/presets/nora/toggleswitch/index.js    |  6 +++++-
 6 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/apps/showcase/doc/toggleswitch/TemplateDoc.vue b/apps/showcase/doc/toggleswitch/TemplateDoc.vue
index f8f023691..9055fa083 100644
--- a/apps/showcase/doc/toggleswitch/TemplateDoc.vue
+++ b/apps/showcase/doc/toggleswitch/TemplateDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Custom content for icon is displayed with the handle slot that takes an check state as a parameter.</p>
+        <p>The <i>handle</i> slot is available to display custom content.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card flex justify-center gap-4">
         <ToggleSwitch v-model="checked">
             <template #handle="{ checked }">
-                <i :class="checked ? 'pi pi-check' : 'pi pi-times'" />
+                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
             </template>
         </ToggleSwitch>
     </div>
@@ -21,7 +21,7 @@ export default {
                 basic: `
 <ToggleSwitch v-model="checked">
     <template #handle="{ checked }">
-        <i :class="checked ? 'pi pi-check' : 'pi pi-times'" />
+        <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
     </template>
 </ToggleSwitch>
 `,
@@ -30,7 +30,7 @@ export default {
     <div class="card flex justify-center">
         <ToggleSwitch v-model="checked">
             <template #handle="{ checked }">
-                <i :class="checked ? 'pi pi-check' : 'pi pi-times'" />
+                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
             </template>
         </ToggleSwitch>
     </div>
@@ -51,7 +51,7 @@ export default {
     <div class="card flex justify-center">
         <ToggleSwitch v-model="checked">
             <template #handle="{ checked }">
-                <i :class="checked ? 'pi pi-check' : 'pi pi-times'" />
+                <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
             </template>
         </ToggleSwitch>
     </div>
diff --git a/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js b/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
index 8eaee346a..ede3c4be9 100644
--- a/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
+++ b/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
@@ -47,12 +47,13 @@ const theme = ({ dt }) => `
     justify-content: center;
     align-items: center;
     background: ${dt('toggleswitch.handle.background')};
+    color: ${dt('toggleswitch.handle.color')};
     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: background ${dt('toggleswitch.transition.duration')}, left ${dt('toggleswitch.slide.duration')};
+    transition: background ${dt('toggleswitch.transition.duration')}, color ${dt('toggleswitch.transition.duration')}, left ${dt('toggleswitch.slide.duration')};
 }
 
 .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
@@ -62,6 +63,7 @@ const theme = ({ dt }) => `
 
 .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {
     background: ${dt('toggleswitch.handle.checked.background')};
+    color: ${dt('toggleswitch.handle.checked.color')};
     left: calc(${dt('toggleswitch.width')} - calc(${dt('toggleswitch.handle.size')} + ${dt('toggleswitch.gap')}));
 }
 
@@ -72,6 +74,7 @@ const theme = ({ dt }) => `
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {
     background: ${dt('toggleswitch.handle.hover.background')};
+    color: ${dt('toggleswitch.handle.hover.color')};
 }
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
@@ -81,6 +84,7 @@ const theme = ({ dt }) => `
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {
     background: ${dt('toggleswitch.handle.checked.hover.background')};
+    color: ${dt('toggleswitch.handle.checked.hover.color')};
 }
 
 .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
diff --git a/packages/themes/src/presets/aura/toggleswitch/index.js b/packages/themes/src/presets/aura/toggleswitch/index.js
index bcf63d842..6fa3d9901 100644
--- a/packages/themes/src/presets/aura/toggleswitch/index.js
+++ b/packages/themes/src/presets/aura/toggleswitch/index.js
@@ -39,7 +39,11 @@ export default {
                 background: '{surface.0}',
                 hoverBackground: '{surface.0}',
                 checkedBackground: '{surface.0}',
-                checkedHoverBackground: '{surface.0}'
+                checkedHoverBackground: '{surface.0}',
+                color: '{text.muted.color}',
+                hoverColor: '{text.color}',
+                checkedColor: '{primary.color}',
+                checkedHoverColor: '{primary.hover.color}'
             }
         },
         dark: {
@@ -53,7 +57,11 @@ export default {
                 background: '{surface.400}',
                 hoverBackground: '{surface.300}',
                 checkedBackground: '{surface.900}',
-                checkedHoverBackground: '{surface.900}'
+                checkedHoverBackground: '{surface.900}',
+                color: '{surface.900}',
+                hoverColor: '{surface.800}',
+                checkedColor: '{primary.color}',
+                checkedHoverColor: '{primary.hover.color}'
             }
         }
     }
diff --git a/packages/themes/src/presets/lara/toggleswitch/index.js b/packages/themes/src/presets/lara/toggleswitch/index.js
index 4bfc86641..0ff04ade5 100644
--- a/packages/themes/src/presets/lara/toggleswitch/index.js
+++ b/packages/themes/src/presets/lara/toggleswitch/index.js
@@ -39,7 +39,11 @@ export default {
                 background: '{surface.0}',
                 hoverBackground: '{surface.0}',
                 checkedBackground: '{surface.0}',
-                checkedHoverBackground: '{surface.0}'
+                checkedHoverBackground: '{surface.0}',
+                color: '{text.muted.color}',
+                hoverColor: '{text.color}',
+                checkedColor: '{primary.color}',
+                checkedHoverColor: '{primary.hover.color}'
             }
         },
         dark: {
@@ -53,7 +57,11 @@ export default {
                 background: '{surface.400}',
                 hoverBackground: '{surface.300}',
                 checkedBackground: '{surface.900}',
-                checkedHoverBackground: '{surface.900}'
+                checkedHoverBackground: '{surface.900}',
+                color: '{surface.900}',
+                hoverColor: '{surface.800}',
+                checkedColor: '{primary.color}',
+                checkedHoverColor: '{primary.hover.color}'
             }
         }
     }
diff --git a/packages/themes/src/presets/material/toggleswitch/index.js b/packages/themes/src/presets/material/toggleswitch/index.js
index b0e74818f..71fa71008 100644
--- a/packages/themes/src/presets/material/toggleswitch/index.js
+++ b/packages/themes/src/presets/material/toggleswitch/index.js
@@ -39,7 +39,11 @@ export default {
                 background: '{surface.0}',
                 hoverBackground: '{surface.0}',
                 checkedBackground: '{primary.color}',
-                checkedHoverBackground: '{primary.color}'
+                checkedHoverBackground: '{primary.color}',
+                color: '{text.muted.color}',
+                hoverColor: '{text.color}',
+                checkedColor: '{primary.contrast.color}',
+                checkedHoverColor: '{primary.contrast.color}'
             }
         },
         dark: {
@@ -53,7 +57,11 @@ export default {
                 background: '{surface.400}',
                 hoverBackground: '{surface.300}',
                 checkedBackground: '{primary.200}',
-                checkedHoverBackground: '{primary.200}'
+                checkedHoverBackground: '{primary.200}',
+                color: '{surface.800}',
+                hoverColor: '{surface.900}',
+                checkedColor: '{primary.contrast.color}',
+                checkedHoverColor: '{primary.contrast.color}'
             }
         }
     },
diff --git a/packages/themes/src/presets/nora/toggleswitch/index.js b/packages/themes/src/presets/nora/toggleswitch/index.js
index 3a588a1f8..04ae8d7ba 100644
--- a/packages/themes/src/presets/nora/toggleswitch/index.js
+++ b/packages/themes/src/presets/nora/toggleswitch/index.js
@@ -33,6 +33,10 @@ export default {
         hoverBackground: '{form.field.border.color}',
         checkedBackground: '{primary.contrast.color}',
         checkedHoverBackground: '{primary.contrast.color}',
-        disabledBackground: '{form.field.disabled.color}'
+        disabledBackground: '{form.field.disabled.color}',
+        color: '{surface.0}',
+        hoverColor: '{surface.0}',
+        checkedColor: '{primary.color}',
+        checkedHoverColor: '{primary.color}'
     }
 };