Fixed #7086 - Refactor ToggleButton Implementation and Design Tokens

packages/primevue/src/togglebutton/style/ToggleButtonStyle.js

@@ -5,8 +5,6 @@ const theme = ({ dt }) => `
     display: inline-flex;
     cursor: pointer;
     user-select: none;
-    align-items: center;
-    justify-content: center;
     overflow: hidden;
     position: relative;
     color: ${dt('togglebutton.color')};
@@ -24,35 +22,16 @@ const theme = ({ dt }) => `
 }
 
 .p-togglebutton-content {
-    position: relative;
     display: inline-flex;
+    flex: 1 1 auto;
     align-items: center;
     justify-content: center;
     gap: ${dt('togglebutton.gap')};
-}
+    padding: ${dt('togglebutton.content.padding')};
-
-.p-togglebutton-label,
-.p-togglebutton-icon {
-    position: relative;
-    transition: none;
-}
-
-.p-togglebutton::before {
-    content: "";
     background: transparent;
+    border-radius: ${dt('togglebutton.content.border.radius')};
     transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},
             outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};
-    position: absolute;
-    inset-inline-start: ${dt('togglebutton.content.left')};
-    inset-block-start: ${dt('togglebutton.content.top')};
-    width: calc(100% - calc(2 * ${dt('togglebutton.content.left')}));
-    height: calc(100% - calc(2 * ${dt('togglebutton.content.top')}));
-    border-radius: ${dt('togglebutton.border.radius')};
-}
-
-.p-togglebutton.p-togglebutton-checked::before {
-    background: ${dt('togglebutton.content.checked.background')};
-    box-shadow: ${dt('togglebutton.content.checked.shadow')};
 }
 
 .p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
@@ -66,6 +45,11 @@ const theme = ({ dt }) => `
     color: ${dt('togglebutton.checked.color')};
 }
 
+.p-togglebutton-checked .p-togglebutton-content {
+    background: ${dt('togglebutton.content.checked.background')};
+    box-shadow: ${dt('togglebutton.content.checked.shadow')};
+}
+
 .p-togglebutton:focus-visible {
     box-shadow: ${dt('togglebutton.focus.ring.shadow')};
     outline: ${dt('togglebutton.focus.ring.width')} ${dt('togglebutton.focus.ring.style')} ${dt('togglebutton.focus.ring.color')};
@@ -84,6 +68,12 @@ const theme = ({ dt }) => `
     color: ${dt('togglebutton.disabled.color')};
 }
 
+.p-togglebutton-label,
+.p-togglebutton-icon {
+    position: relative;
+    transition: none;
+}
+
 .p-togglebutton-icon {
     color: ${dt('togglebutton.icon.color')};
 }
@@ -105,10 +95,18 @@ const theme = ({ dt }) => `
     font-size: ${dt('togglebutton.sm.font.size')};
 }
 
+.p-togglebutton-sm .p-togglebutton-content {
+    padding: ${dt('togglebutton.content.sm.padding')};
+}
+
 .p-togglebutton-lg {
     padding: ${dt('togglebutton.lg.padding')};
     font-size: ${dt('togglebutton.lg.font.size')};
 }
+
+.p-togglebutton-lg .p-togglebutton-content {
+    padding: ${dt('togglebutton.content.lg.padding')};
+}
 `;
 
 const classes = {

packages/themes/src/presets/aura/togglebutton/index.js

@@ -1,6 +1,6 @@
 export default {
     root: {
-        padding: '0.5rem 1rem',
+        padding: '0.25rem',
         borderRadius: '{content.border.radius}',
         gap: '0.5rem',
         fontWeight: '500',
@@ -18,20 +18,26 @@ export default {
         transitionDuration: '{form.field.transition.duration}',
         sm: {
             fontSize: '{form.field.sm.font.size}',
-            padding: '0.375rem 0.75rem'
+            padding: '0.25rem'
         },
         lg: {
             fontSize: '{form.field.lg.font.size}',
-            padding: '0.625rem 1.25rem'
+            padding: '0.25rem'
         }
     },
     icon: {
         disabledColor: '{form.field.disabled.color}'
     },
     content: {
-        left: '0.25rem',
+        padding: '0.25rem 0.75rem',
-        top: '0.25rem',
+        borderRadius: '{content.border.radius}',
-        checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)'
+        checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)',
+        sm: {
+            padding: '0.25rem 0.75rem'
+        },
+        lg: {
+            padding: '0.25rem 0.75rem'
+        }
     },
     colorScheme: {
         light: {

packages/themes/src/presets/lara/togglebutton/index.js

@@ -39,10 +39,16 @@ export default {
         disabledColor: '{form.field.disabled.color}'
     },
     content: {
-        left: '0.25rem',
-        top: '0.25rem',
         checkedBackground: 'transparent',
-        checkedShadow: 'none'
+        checkedShadow: 'none',
+        padding: '0',
+        borderRadius: '0',
+        sm: {
+            padding: '0'
+        },
+        lg: {
+            padding: '0'
+        }
     },
     colorScheme: {
         light: {

packages/themes/src/presets/material/togglebutton/index.js

@@ -38,10 +38,16 @@ export default {
         disabledColor: '{form.field.disabled.color}'
     },
     content: {
-        left: '0.25rem',
-        top: '0.25rem',
         checkedBackground: 'transparent',
-        checkedShadow: 'none'
+        checkedShadow: 'none',
+        padding: '0',
+        borderRadius: '0',
+        sm: {
+            padding: '0'
+        },
+        lg: {
+            padding: '0'
+        }
     },
     colorScheme: {
         light: {

packages/themes/src/presets/nora/togglebutton/index.js

@@ -39,10 +39,16 @@ export default {
         disabledColor: '{form.field.disabled.color}'
     },
     content: {
-        left: '0.25rem',
-        top: '0.25rem',
         checkedBackground: 'transparent',
-        checkedShadow: 'none'
+        checkedShadow: 'none',
+        padding: '0',
+        borderRadius: '0',
+        sm: {
+            padding: '0'
+        },
+        lg: {
+            padding: '0'
+        }
     },
     colorScheme: {
         light: {

packages/themes/types/togglebutton/index.d.ts

@@ -221,17 +221,17 @@ export interface ToggleButtonDesignTokens extends ColorSchemeDesignToken<ToggleB
      */
     content?: {
         /**
-         * Left of content
+         * Padding of the content
          *
-         * @designToken togglebutton.content.left
+         * @designToken togglebutton.content.padding
          */
-        left?: string;
+        padding?: string;
         /**
-         * Top of content
+         * Border radius of the content
          *
-         * @designToken togglebutton.content.top
+         * @designToken togglebutton.border.radius
          */
-        top?: string;
+        borderRadius?: string;
         /**
          * Checked shadow of content
          *
@@ -244,5 +244,27 @@ export interface ToggleButtonDesignTokens extends ColorSchemeDesignToken<ToggleB
          * @designToken togglebutton.content.checked.background
          */
         checkedBackground?: string;
+        /**
+         * Sm of content
+         */
+        sm?: {
+            /**
+             * Sm padding of content
+             *
+             * @designToken togglebutton.content.sm.padding
+             */
+            padding?: string;
+        };
+        /**
+         * Lg of root
+         */
+        lg?: {
+            /**
+             * Lg padding of content
+             *
+             * @designToken togglebutton.content.lg.padding
+             */
+            padding?: string;
+        };
     };
 }