diff --git a/components/lib/message/style/MessageStyle.js b/components/lib/message/style/MessageStyle.js
index 5d2719d17..f53eea87c 100644
--- a/components/lib/message/style/MessageStyle.js
+++ b/components/lib/message/style/MessageStyle.js
@@ -55,7 +55,7 @@ const theme = ({ dt }) => `
 }
 
 .p-message-info .p-message-close-button:hover {
-    background: ${dt('message.info.close.hover.background')};
+    background: ${dt('message.info.close.button.hover.background')};
 }
 
 .p-message-success {
@@ -70,7 +70,7 @@ const theme = ({ dt }) => `
 }
 
 .p-message-success .p-message-close-button:hover {
-    background: ${dt('message.success.close.hover.background')};
+    background: ${dt('message.success.close.button.hover.background')};
 }
 
 .p-message-warn {
@@ -85,7 +85,7 @@ const theme = ({ dt }) => `
 }
 
 .p-message-warn .p-message-close-button:hover {
-    background: ${dt('message.warn.close.hover.background')};
+    background: ${dt('message.warn.close.button.hover.background')};
 }
 
 .p-message-error {
@@ -100,7 +100,7 @@ const theme = ({ dt }) => `
 }
 
 .p-message-error .p-message-close-button:hover {
-    background: ${dt('message.error.close.hover.background')};
+    background: ${dt('message.error.close.button.hover.background')};
 }
 
 .p-message-secondary {
@@ -115,7 +115,7 @@ const theme = ({ dt }) => `
 }
 
 .p-message-secondary .p-message-close-button:hover {
-    background: ${dt('message.secondary.close.hover.background')};
+    background: ${dt('message.secondary.close.button.hover.background')};
 }
 
 .p-message-contrast {
@@ -130,7 +130,7 @@ const theme = ({ dt }) => `
 }
 
 .p-message-contrast .p-message-close-button:hover {
-    background: ${dt('message.contrast.close.hover.background')};
+    background: ${dt('message.contrast.close.button.hover.background')};
 }
 
 .p-message-text {
diff --git a/components/lib/themes/aura/message/index.js b/components/lib/themes/aura/message/index.js
index 935883d83..410fa31af 100644
--- a/components/lib/themes/aura/message/index.js
+++ b/components/lib/themes/aura/message/index.js
@@ -6,42 +6,54 @@ export default {
                 borderColor: '{blue.200}',
                 color: '{blue.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
-                closeHoverBackground: '{blue.100}'
+                closeButton: {
+                    hoverBackground: '{blue.100}'
+                }
             },
             success: {
                 background: 'color-mix(in srgb, {green.50}, transparent 5%)',
                 borderColor: '{green.200}',
                 color: '{green.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
-                closeHoverBackground: '{green.100}'
+                closeButton: {
+                    hoverBackground: '{green.100}'
+                }
             },
             warn: {
                 background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
                 borderColor: '{yellow.200}',
                 color: '{yellow.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
-                closeHoverBackground: '{yellow.100}'
+                closeButton: {
+                    hoverBackground: '{yellow.100}'
+                }
             },
             error: {
                 background: 'color-mix(in srgb, {red.50}, transparent 5%)',
                 borderColor: '{red.200}',
                 color: '{red.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
-                closeHoverBackground: '{red.100}'
+                closeButton: {
+                    hoverBackground: '{red.100}'
+                }
             },
             secondary: {
                 background: '{surface.100}',
                 borderColor: '{surface.200}',
                 color: '{surface.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
-                closeHoverBackground: '{surface.200}'
+                closeButton: {
+                    hoverBackground: '{surface.200}'
+                }
             },
             contrast: {
                 background: '{surface.900}',
                 borderColor: '{surface.950}',
                 color: '{surface.50}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
-                closeHoverBackground: '{surface.800}'
+                closeButton: {
+                    hoverBackground: '{surface.800}'
+                }
             }
         },
         dark: {
@@ -50,42 +62,54 @@ export default {
                 borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
                 color: '{blue.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
-                closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
+                closeButton: {
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                }
             },
             success: {
                 background: 'color-mix(in srgb, {green.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
                 color: '{green.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
-                closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
+                closeButton: {
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                }
             },
             warn: {
                 background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
                 color: '{yellow.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
-                closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
+                closeButton: {
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                }
             },
             error: {
                 background: 'color-mix(in srgb, {red.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
                 color: '{red.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
-                closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
+                closeButton: {
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                }
             },
             secondary: {
                 background: '{surface.800}',
                 borderColor: '{surface.700}',
                 color: '{surface.300}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
-                closeHoverBackground: '{surface.700}'
+                closeButton: {
+                    hoverBackground: '{surface.700}'
+                }
             },
             contrast: {
                 background: '{surface.0}',
                 borderColor: '{surface.100}',
                 color: '{surface.950}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
-                closeHoverBackground: '{surface.100}'
+                closeButton: {
+                    hoverBackground: '{surface.100}'
+                }
             }
         }
     }
diff --git a/components/lib/themes/aura/toast/index.js b/components/lib/themes/aura/toast/index.js
index 7218e7f45..24d048684 100644
--- a/components/lib/themes/aura/toast/index.js
+++ b/components/lib/themes/aura/toast/index.js
@@ -8,7 +8,9 @@ export default {
                 color: '{blue.600}',
                 detailColor: '{surface.700}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
-                closeHoverBackground: '{blue.100}'
+                closeButton: {
+                    hoverBackground: '{blue.100}'
+                }
             },
             success: {
                 background: 'color-mix(in srgb, {green.50}, transparent 5%)',
@@ -16,7 +18,9 @@ export default {
                 color: '{green.600}',
                 detailColor: '{surface.700}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
-                closeHoverBackground: '{green.100}'
+                closeButton: {
+                    hoverBackground: '{green.100}'
+                }
             },
             warn: {
                 background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
@@ -24,7 +28,9 @@ export default {
                 color: '{yellow.600}',
                 detailColor: '{surface.700}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
-                closeHoverBackground: '{yellow.100}'
+                closeButton: {
+                    hoverBackground: '{yellow.100}'
+                }
             },
             error: {
                 background: 'color-mix(in srgb, {red.50}, transparent 5%)',
@@ -32,7 +38,9 @@ export default {
                 color: '{red.600}',
                 detailColor: '{surface.700}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
-                closeHoverBackground: '{red.100}'
+                closeButton: {
+                    hoverBackground: '{red.100}'
+                }
             },
             secondary: {
                 background: '{surface.100}',
@@ -40,7 +48,9 @@ export default {
                 color: '{surface.600}',
                 detailColor: '{surface.700}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
-                closeHoverBackground: '{surface.200}'
+                closeButton: {
+                    hoverBackground: '{surface.200}'
+                }
             },
             contrast: {
                 background: '{surface.900}',
@@ -48,7 +58,9 @@ export default {
                 color: '{surface.50}',
                 detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
-                closeHoverBackground: '{surface.800}'
+                closeButton: {
+                    hoverBackground: '{surface.800}'
+                }
             }
         },
         dark: {
@@ -59,7 +71,9 @@ export default {
                 color: '{blue.500}',
                 detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
-                closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
+                closeButton: {
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                }
             },
             success: {
                 background: 'color-mix(in srgb, {green.500}, transparent 84%)',
@@ -67,7 +81,9 @@ export default {
                 color: '{green.500}',
                 detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
-                closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
+                closeButton: {
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                }
             },
             warn: {
                 background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
@@ -75,7 +91,9 @@ export default {
                 color: '{yellow.500}',
                 detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
-                closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
+                closeButton: {
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                }
             },
             error: {
                 background: 'color-mix(in srgb, {red.500}, transparent 84%)',
@@ -83,7 +101,9 @@ export default {
                 color: '{red.500}',
                 detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
-                closeHoverBackground: 'rgba(255, 255, 255, 0.05)'
+                closeButton: {
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                }
             },
             secondary: {
                 background: '{surface.800}',
@@ -91,7 +111,9 @@ export default {
                 color: '{surface.300}',
                 detailColor: '{surface.0}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
-                closeHoverBackground: '{surface.700}'
+                closeButton: {
+                    hoverBackground: '{surface.700}'
+                }
             },
             contrast: {
                 background: '{surface.0}',
@@ -99,7 +121,9 @@ export default {
                 color: '{surface.950}',
                 detailColor: '{surface.950}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
-                closeHoverBackground: '{surface.100}'
+                closeButton: {
+                    hoverBackground: '{surface.100}'
+                }
             }
         }
     }
diff --git a/components/lib/toast/style/ToastStyle.js b/components/lib/toast/style/ToastStyle.js
index 581bb2465..9536d653a 100644
--- a/components/lib/toast/style/ToastStyle.js
+++ b/components/lib/toast/style/ToastStyle.js
@@ -82,7 +82,7 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-info .p-toast-close-button:hover {
-    background: ${dt('toast.info.close.hover.background')};
+    background: ${dt('toast.info.close.button.hover.background')};
 }
 
 .p-toast-message-success {
@@ -101,7 +101,7 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-success .p-toast-close-button:hover {
-    background: ${dt('toast.success.close.hover.background')};
+    background: ${dt('toast.success.close.button.hover.background')};
 }
 
 .p-toast-message-warn {
@@ -120,7 +120,7 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-warn .p-toast-close-button:hover {
-    background: ${dt('toast.warn.close.hover.background')};
+    background: ${dt('toast.warn.close.button.hover.background')};
 }
 
 .p-toast-message-error {
@@ -139,7 +139,7 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-error .p-toast-close-button:hover {
-    background: ${dt('toast.error.close.hover.background')};
+    background: ${dt('toast.error.close.button.hover.background')};
 }
 
 .p-toast-message-secondary {
@@ -158,7 +158,7 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-secondary .p-toast-close-button:hover {
-    background: ${dt('toast.secondary.close.hover.background')};
+    background: ${dt('toast.secondary.close.button.hover.background')};
 }
 
 .p-toast-message-contrast {
@@ -177,7 +177,7 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-contrast .p-toast-close-button:hover {
-    background: ${dt('toast.contrast.close.hover.background')};
+    background: ${dt('toast.contrast.close.button.hover.background')};
 }
 
 .p-toast-top-center {