diff --git a/components/lib/themes/aura/togglebutton/index.js b/components/lib/themes/aura/togglebutton/index.js
index 94ce34b78..ab35fce07 100644
--- a/components/lib/themes/aura/togglebutton/index.js
+++ b/components/lib/themes/aura/togglebutton/index.js
@@ -1,43 +1,68 @@
 export default {
+    root: {
+        padding: '0.5rem 1rem',
+        borderRadius: '{content.border.radius}',
+        gap: '0.5rem',
+        fontWeight: '500',
+        disabledBackground: '{form.field.disabled.background}',
+        disabledBorderColor: '{form.field.disabled.background}',
+        disabledColor: '{form.field.disabled.color}',
+        invalidBorderColor: '{form.field.invalid.border.color}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
+    icon: {
+        disabledColor: '{form.field.disabled.color}'
+    },
+    content: {
+        left: '0.25rem',
+        top: '0.25rem',
+        checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)'
+    },
     colorScheme: {
         light: {
             root: {
                 background: '{surface.100}',
-                checkedBackground: '{surface.0}',
-                disabledBackground: '{form.field.disabled.background}',
+                checkedBackground: '{surface.100}',
+                hoverBackground: '{surface.100}',
                 borderColor: '{surface.100}',
-                disabledBorderColor: '{form.field.disabled.background}',
-                invalidBorderColor: '{form.field.invalid.border.color}',
                 color: '{surface.500}',
                 hoverColor: '{surface.700}',
                 checkedColor: '{surface.900}',
-                disabledColor: '{form.field.disabled.color}'
+                checkedBorderColor: '{surface.100}'
+            },
+            content: {
+                checkedBackground: '{surface.0}'
             },
             icon: {
                 color: '{surface.500}',
                 hoverColor: '{surface.700}',
-                checkedColor: '{surface.900}',
-                disabledColor: '{form.field.disabled.color}'
+                checkedColor: '{surface.900}'
             }
         },
         dark: {
             root: {
                 background: '{surface.950}',
-                checkedBackground: '{surface.800}',
-                disabledBackground: '{form.field.disabled.background}',
+                checkedBackground: '{surface.950}',
+                hoverBackground: '{surface.950}',
                 borderColor: '{surface.950}',
-                disabledBorderColor: '{form.field.disabled.background}',
-                invalidBorderColor: '{form.field.invalid.border.color}',
                 color: '{surface.400}',
                 hoverColor: '{surface.300}',
                 checkedColor: '{surface.0}',
-                disabledColor: '{form.field.disabled.color}'
+                checkedBorderColor: '{surface.950}'
+            },
+            content: {
+                checkedBackground: '{surface.800}'
             },
             icon: {
                 color: '{surface.400}',
                 hoverColor: '{surface.300}',
-                checkedColor: '{surface.0}',
-                disabledColor: '{form.field.disabled.color}'
+                checkedColor: '{surface.0}'
             }
         }
     }
diff --git a/components/lib/themes/lara/togglebutton/index.js b/components/lib/themes/lara/togglebutton/index.js
index 94ce34b78..50682030c 100644
--- a/components/lib/themes/lara/togglebutton/index.js
+++ b/components/lib/themes/lara/togglebutton/index.js
@@ -1,43 +1,49 @@
 export default {
+    root: {
+        padding: '0.625rem 1rem',
+        borderRadius: '{content.border.radius}',
+        gap: '0.5rem',
+        fontWeight: '500',
+        background: '{form.field.background}',
+        borderColor: '{form.field.border.color}',
+        color: '{form.field.color}',
+        hoverColor: '{form.field.color}',
+        checkedBackground: '{highlight.background}',
+        checkedColor: '{highlight.color}',
+        checkedBorderColor: '{highlight.focus.background}',
+        disabledBackground: '{form.field.disabled.background}',
+        disabledBorderColor: '{form.field.disabled.background}',
+        disabledColor: '{form.field.disabled.color}',
+        invalidBorderColor: '{form.field.invalid.border.color}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
+    },
+    icon: {
+        color: '{text.muted.color}',
+        hoverColor: '{text.muted.color}',
+        checkedColor: '{highlight.color}',
+        disabledColor: '{form.field.disabled.color}'
+    },
+    content: {
+        left: '0.25rem',
+        top: '0.25rem',
+        checkedBackground: 'transparent',
+        checkedShadow: 'none'
+    },
     colorScheme: {
         light: {
             root: {
-                background: '{surface.100}',
-                checkedBackground: '{surface.0}',
-                disabledBackground: '{form.field.disabled.background}',
-                borderColor: '{surface.100}',
-                disabledBorderColor: '{form.field.disabled.background}',
-                invalidBorderColor: '{form.field.invalid.border.color}',
-                color: '{surface.500}',
-                hoverColor: '{surface.700}',
-                checkedColor: '{surface.900}',
-                disabledColor: '{form.field.disabled.color}'
-            },
-            icon: {
-                color: '{surface.500}',
-                hoverColor: '{surface.700}',
-                checkedColor: '{surface.900}',
-                disabledColor: '{form.field.disabled.color}'
+                hoverBackground: '{surface.100}'
             }
         },
         dark: {
             root: {
-                background: '{surface.950}',
-                checkedBackground: '{surface.800}',
-                disabledBackground: '{form.field.disabled.background}',
-                borderColor: '{surface.950}',
-                disabledBorderColor: '{form.field.disabled.background}',
-                invalidBorderColor: '{form.field.invalid.border.color}',
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                checkedColor: '{surface.0}',
-                disabledColor: '{form.field.disabled.color}'
-            },
-            icon: {
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                checkedColor: '{surface.0}',
-                disabledColor: '{form.field.disabled.color}'
+                hoverBackground: '{surface.800}'
             }
         }
     }
diff --git a/components/lib/togglebutton/style/ToggleButtonStyle.js b/components/lib/togglebutton/style/ToggleButtonStyle.js
index bf87cde40..dd62bdeaf 100644
--- a/components/lib/togglebutton/style/ToggleButtonStyle.js
+++ b/components/lib/togglebutton/style/ToggleButtonStyle.js
@@ -12,13 +12,15 @@ const theme = ({ dt }) => `
     color: ${dt('togglebutton.color')};
     background: ${dt('togglebutton.background')};
     border: 1px solid ${dt('togglebutton.border.color')};
-    padding: 0.5rem 1rem;
+    padding: ${dt('togglebutton.padding')};
     font-size: 1rem;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    border-radius: ${dt('border.radius.md')};
+    font-family: inherit;
+    font-feature-settings: inherit;
+    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('togglebutton.border.radius')};
     outline-color: transparent;
-    gap: 0.5rem;
-    font-weight: 500;
+    gap: ${dt('togglebutton.gap')};
+    font-weight: ${dt('togglebutton.font.weight')};
 }
 
 .p-togglebutton-label,
@@ -30,31 +32,35 @@ const theme = ({ dt }) => `
 .p-togglebutton::before {
     content: "";
     background: transparent;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     position: absolute;
-    left: 0.25rem;
-    top: 0.25rem;
-    width: calc(100% - 0.5rem);
-    height: calc(100% - 0.5rem);
-    border-radius: ${dt('border.radius.sm')};
+    left: ${dt('togglebutton.content.left')};
+    top: ${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.checked.background')};
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
+    background: ${dt('togglebutton.content.checked.background')};
+    box-shadow: ${dt('togglebutton.content.checked.shadow')};
 }
 
 .p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
+    background: ${dt('togglebutton.hover.background')};
     color: ${dt('togglebutton.hover.color')};
 }
 
 .p-togglebutton.p-togglebutton-checked {
+    background: ${dt('togglebutton.checked.background')};
+    border-color: ${dt('togglebutton.checked.border.color')};
     color: ${dt('togglebutton.checked.color')};
 }
 
 .p-togglebutton:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    box-shadow: ${dt('togglebutton.focus.ring.shadow')};
+    outline: ${dt('togglebutton.focus.ring.width')} ${dt('togglebutton.focus.ring.style')} ${dt('togglebutton.focus.ring.color')};
+    outline-offset: ${dt('togglebutton.focus.ring.offset')};
 }
 
 .p-togglebutton.p-invalid {