Add new tokens for ToggleSwitch

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>

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 {

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}'
             }
         }
     }

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}'
             }
         }
     }

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}'
             }
         }
     },

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}'
     }
 };