From a8c70f981d063baa125359c5b0d110efa23d0131 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 9 May 2024 18:22:29 +0300
Subject: [PATCH] Updated tokens for Toast and Message

---
 components/lib/themes/aura/message/index.js |  28 ++---
 components/lib/themes/aura/toast/index.js   | 131 ++++++++++++++++----
 components/lib/themes/lara/message/index.js |  24 ++--
 components/lib/themes/lara/toast/index.js   | 131 ++++++++++++++++----
 components/lib/toast/style/ToastStyle.js    |  59 +++++----
 5 files changed, 278 insertions(+), 95 deletions(-)

diff --git a/components/lib/themes/aura/message/index.js b/components/lib/themes/aura/message/index.js
index 6c268667e..10f3a8e72 100644
--- a/components/lib/themes/aura/message/index.js
+++ b/components/lib/themes/aura/message/index.js
@@ -12,7 +12,7 @@ export default {
         fontWeight: '500'
     },
     icon: {
-        size: '1rem'
+        size: '1.125rem'
     },
     closeButton: {
         width: '1.75rem',
@@ -33,7 +33,7 @@ export default {
                 background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
                 borderColor: '{blue.200}',
                 color: '{blue.600}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{blue.100}',
                     focusRing: {
@@ -46,7 +46,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{green.100}',
                     focusRing: {
@@ -59,7 +59,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{yellow.100}',
                     focusRing: {
@@ -72,7 +72,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{red.100}',
                     focusRing: {
@@ -85,7 +85,7 @@ export default {
                 background: '{surface.100}',
                 borderColor: '{surface.200}',
                 color: '{surface.600}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{surface.200}',
                     focusRing: {
@@ -98,7 +98,7 @@ export default {
                 background: '{surface.900}',
                 borderColor: '{surface.950}',
                 color: '{surface.50}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{surface.800}',
                     focusRing: {
@@ -113,7 +113,7 @@ export default {
                 background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -126,7 +126,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -139,7 +139,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -152,7 +152,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -165,7 +165,7 @@ export default {
                 background: '{surface.800}',
                 borderColor: '{surface.700}',
                 color: '{surface.300}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{surface.700}',
                     focusRing: {
@@ -178,11 +178,11 @@ export default {
                 background: '{surface.0}',
                 borderColor: '{surface.100}',
                 color: '{surface.950}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{surface.100}',
                     focusRing: {
-                        color: '{blue.950}',
+                        color: '{surface.950}',
                         shadow: 'none'
                     }
                 }
diff --git a/components/lib/themes/aura/toast/index.js b/components/lib/themes/aura/toast/index.js
index 24d048684..b52529037 100644
--- a/components/lib/themes/aura/toast/index.js
+++ b/components/lib/themes/aura/toast/index.js
@@ -1,4 +1,39 @@
 export default {
+    root: {
+        width: '25rem',
+        borderRadius: '{content.border.radius}'
+    },
+    icon: {
+        size: '1.125rem'
+    },
+    content: {
+        padding: '{overlay.popover.padding}',
+        gap: '0.5rem'
+    },
+    text: {
+        gap: '0.5rem'
+    },
+    summary: {
+        fontWeight: '500',
+        fontSize: '1rem'
+    },
+    detail: {
+        fontWeight: '500',
+        fontSize: '0.875rem'
+    },
+    closeButton: {
+        width: '1.75rem',
+        height: '1.75rem',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            offset: '{focus.ring.offset}'
+        }
+    },
+    closeIcon: {
+        size: '1rem'
+    },
     colorScheme: {
         light: {
             blur: '1.5px',
@@ -7,9 +42,13 @@ export default {
                 borderColor: '{blue.200}',
                 color: '{blue.600}',
                 detailColor: '{surface.700}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{blue.100}'
+                    hoverBackground: '{blue.100}',
+                    focusRing: {
+                        color: '{blue.600}',
+                        shadow: 'none'
+                    }
                 }
             },
             success: {
@@ -17,9 +56,13 @@ export default {
                 borderColor: '{green.200}',
                 color: '{green.600}',
                 detailColor: '{surface.700}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{green.100}'
+                    hoverBackground: '{green.100}',
+                    focusRing: {
+                        color: '{green.600}',
+                        shadow: 'none'
+                    }
                 }
             },
             warn: {
@@ -27,9 +70,13 @@ export default {
                 borderColor: '{yellow.200}',
                 color: '{yellow.600}',
                 detailColor: '{surface.700}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{yellow.100}'
+                    hoverBackground: '{yellow.100}',
+                    focusRing: {
+                        color: '{yellow.600}',
+                        shadow: 'none'
+                    }
                 }
             },
             error: {
@@ -37,9 +84,13 @@ export default {
                 borderColor: '{red.200}',
                 color: '{red.600}',
                 detailColor: '{surface.700}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{red.100}'
+                    hoverBackground: '{red.100}',
+                    focusRing: {
+                        color: '{red.600}',
+                        shadow: 'none'
+                    }
                 }
             },
             secondary: {
@@ -47,9 +98,13 @@ export default {
                 borderColor: '{surface.200}',
                 color: '{surface.600}',
                 detailColor: '{surface.700}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.200}'
+                    hoverBackground: '{surface.200}',
+                    focusRing: {
+                        color: '{surface.600}',
+                        shadow: 'none'
+                    }
                 }
             },
             contrast: {
@@ -57,9 +112,13 @@ export default {
                 borderColor: '{surface.950}',
                 color: '{surface.50}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.800}'
+                    hoverBackground: '{surface.800}',
+                    focusRing: {
+                        color: '{surface.50}',
+                        shadow: 'none'
+                    }
                 }
             }
         },
@@ -70,9 +129,13 @@ export default {
                 borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
                 color: '{blue.500}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{blue.500}',
+                        shadow: 'none'
+                    }
                 }
             },
             success: {
@@ -80,9 +143,13 @@ export default {
                 borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
                 color: '{green.500}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{green.500}',
+                        shadow: 'none'
+                    }
                 }
             },
             warn: {
@@ -90,9 +157,13 @@ export default {
                 borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
                 color: '{yellow.500}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{yellow.500}',
+                        shadow: 'none'
+                    }
                 }
             },
             error: {
@@ -100,9 +171,13 @@ export default {
                 borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
                 color: '{red.500}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{red.500}',
+                        shadow: 'none'
+                    }
                 }
             },
             secondary: {
@@ -110,9 +185,13 @@ export default {
                 borderColor: '{surface.700}',
                 color: '{surface.300}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.700}'
+                    hoverBackground: '{surface.700}',
+                    focusRing: {
+                        color: '{surface.300}',
+                        shadow: 'none'
+                    }
                 }
             },
             contrast: {
@@ -120,9 +199,13 @@ export default {
                 borderColor: '{surface.100}',
                 color: '{surface.950}',
                 detailColor: '{surface.950}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.100}'
+                    hoverBackground: '{surface.100}',
+                    focusRing: {
+                        color: '{surface.950}',
+                        shadow: 'none'
+                    }
                 }
             }
         }
diff --git a/components/lib/themes/lara/message/index.js b/components/lib/themes/lara/message/index.js
index 20721c4ef..cfc5e552a 100644
--- a/components/lib/themes/lara/message/index.js
+++ b/components/lib/themes/lara/message/index.js
@@ -33,7 +33,7 @@ export default {
                 background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
                 borderColor: '{blue.200}',
                 color: '{blue.600}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{blue.100}',
                     focusRing: {
@@ -46,7 +46,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{green.100}',
                     focusRing: {
@@ -59,7 +59,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{yellow.100}',
                     focusRing: {
@@ -72,7 +72,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{red.100}',
                     focusRing: {
@@ -85,7 +85,7 @@ export default {
                 background: '{surface.100}',
                 borderColor: '{surface.200}',
                 color: '{surface.600}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{surface.200}',
                     focusRing: {
@@ -98,7 +98,7 @@ export default {
                 background: '{surface.900}',
                 borderColor: '{surface.950}',
                 color: '{surface.50}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{surface.800}',
                     focusRing: {
@@ -113,7 +113,7 @@ export default {
                 background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -126,7 +126,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -139,7 +139,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -152,7 +152,7 @@ export default {
                 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%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -165,7 +165,7 @@ export default {
                 background: '{surface.800}',
                 borderColor: '{surface.700}',
                 color: '{surface.300}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{surface.700}',
                     focusRing: {
@@ -178,7 +178,7 @@ export default {
                 background: '{surface.0}',
                 borderColor: '{surface.100}',
                 color: '{surface.950}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
                     hoverBackground: '{surface.100}',
                     focusRing: {
diff --git a/components/lib/themes/lara/toast/index.js b/components/lib/themes/lara/toast/index.js
index 24d048684..bcfb7b87e 100644
--- a/components/lib/themes/lara/toast/index.js
+++ b/components/lib/themes/lara/toast/index.js
@@ -1,4 +1,39 @@
 export default {
+    root: {
+        width: '25rem',
+        borderRadius: '{content.border.radius}'
+    },
+    icon: {
+        size: '1.25rem'
+    },
+    content: {
+        padding: '{overlay.popover.padding}',
+        gap: '0.5rem'
+    },
+    text: {
+        gap: '0.5rem'
+    },
+    summary: {
+        fontWeight: '500',
+        fontSize: '1rem'
+    },
+    detail: {
+        fontWeight: '500',
+        fontSize: '0.875rem'
+    },
+    closeButton: {
+        width: '2rem',
+        height: '2rem',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            offset: '{focus.ring.offset}'
+        }
+    },
+    closeIcon: {
+        size: '1rem'
+    },
     colorScheme: {
         light: {
             blur: '1.5px',
@@ -7,9 +42,13 @@ export default {
                 borderColor: '{blue.200}',
                 color: '{blue.600}',
                 detailColor: '{surface.700}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{blue.100}'
+                    hoverBackground: '{blue.100}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {blue.200}'
+                    }
                 }
             },
             success: {
@@ -17,9 +56,13 @@ export default {
                 borderColor: '{green.200}',
                 color: '{green.600}',
                 detailColor: '{surface.700}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{green.100}'
+                    hoverBackground: '{green.100}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {green.200}'
+                    }
                 }
             },
             warn: {
@@ -27,9 +70,13 @@ export default {
                 borderColor: '{yellow.200}',
                 color: '{yellow.600}',
                 detailColor: '{surface.700}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{yellow.100}'
+                    hoverBackground: '{yellow.100}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {yellow.200}'
+                    }
                 }
             },
             error: {
@@ -37,9 +84,13 @@ export default {
                 borderColor: '{red.200}',
                 color: '{red.600}',
                 detailColor: '{surface.700}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{red.100}'
+                    hoverBackground: '{red.100}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {red.200}'
+                    }
                 }
             },
             secondary: {
@@ -47,9 +98,13 @@ export default {
                 borderColor: '{surface.200}',
                 color: '{surface.600}',
                 detailColor: '{surface.700}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.200}'
+                    hoverBackground: '{surface.200}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {surface.200}'
+                    }
                 }
             },
             contrast: {
@@ -57,9 +112,13 @@ export default {
                 borderColor: '{surface.950}',
                 color: '{surface.50}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.800}'
+                    hoverBackground: '{surface.800}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {surface.400}'
+                    }
                 }
             }
         },
@@ -70,9 +129,13 @@ export default {
                 borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
                 color: '{blue.500}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {blue.500}, transparent 80%)'
+                    }
                 }
             },
             success: {
@@ -80,9 +143,13 @@ export default {
                 borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
                 color: '{green.500}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {green.500}, transparent 80%)'
+                    }
                 }
             },
             warn: {
@@ -90,9 +157,13 @@ export default {
                 borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
                 color: '{yellow.500}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {yellow.500}, transparent 80%)'
+                    }
                 }
             },
             error: {
@@ -100,9 +171,13 @@ export default {
                 borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
                 color: '{red.500}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {red.500}, transparent 80%)'
+                    }
                 }
             },
             secondary: {
@@ -110,9 +185,13 @@ export default {
                 borderColor: '{surface.700}',
                 color: '{surface.300}',
                 detailColor: '{surface.0}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.700}'
+                    hoverBackground: '{surface.700}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.300}, transparent 80%)'
+                    }
                 }
             },
             contrast: {
@@ -120,9 +199,13 @@ export default {
                 borderColor: '{surface.100}',
                 color: '{surface.950}',
                 detailColor: '{surface.950}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.100}'
+                    hoverBackground: '{surface.100}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.950}, transparent 80%)'
+                    }
                 }
             }
         }
diff --git a/components/lib/toast/style/ToastStyle.js b/components/lib/toast/style/ToastStyle.js
index 4a7e54097..22756583f 100644
--- a/components/lib/toast/style/ToastStyle.js
+++ b/components/lib/toast/style/ToastStyle.js
@@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
 
 const theme = ({ dt }) => `
 .p-toast {
-    width: 25rem;
+    width: ${dt('toast.width')};
     white-space: pre-line;
     word-break: break-word;
 }
@@ -10,33 +10,38 @@ const theme = ({ dt }) => `
 .p-toast-message {
     backdrop-filter: blur(${dt('toast.blur')});
     margin: 0 0 1rem 0;
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('toast.border.radius')};
 }
 
 .p-toast-message-icon {
     flex-shrink: 0;
-    font-size: 1.125rem;
-    width: 1.125rem;
-    height: 1.125rem;
+    font-size: ${dt('toast.icon.size')};
+    width: ${dt('toast.icon.size')};
+    height: ${dt('toast.icon.size')};
 }
 
 .p-toast-message-content {
     display: flex;
     align-items: flex-start;
-    padding: 0.75rem;
-    gap: 0.5rem;
+    padding: ${dt('toast.content.padding')};
+    gap: ${dt('toast.content.gap')};
 }
 
 .p-toast-message-text {
     flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('toast.text.gap')};
 }
 
-.p-toast-summary {
-    font-weight: 500;
+.p-toast-summary 
+    font-weight: ${dt('toast.summary.font.weight')};
+    font-size: ${dt('toast.summary.font.size')};
 }
+
 .p-toast-detail {
-    margin-top: 0.5rem;
-    font-size: 0.875rem;
+    font-weight: ${dt('toast.detail.font.weight')};
+    font-size: ${dt('toast.detail.font.size')};
 }
 
 .p-toast-close-button {
@@ -45,14 +50,14 @@ const theme = ({ dt }) => `
     justify-content: center;
     overflow: hidden;
     position: relative;
-    border-radius: 50%;
     cursor: pointer;
     background: transparent;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
     color: inherit;
-    width: 1.75rem;
-    height: 1.75rem;
+    width: ${dt('toast.close.button.width')};
+    height: ${dt('toast.close.button.height')};
+    border-radius: ${dt('toast.close.button.border.radius')};
     margin: -25% 0 0 0;
     right: -25%;
     padding: 0;
@@ -60,6 +65,12 @@ const theme = ({ dt }) => `
     user-select: none;
 }
 
+.p-toast-close-icon {
+    font-size: ${dt('toast.close.icon.size')};
+    width: ${dt('toast.close.icon.size')};
+    height: ${dt('toast.close.icon.size')};
+}
+
 .p-toast-close-button:focus-visible {
     outline-width: ${dt('focus.ring.width')};
     outline-style: ${dt('focus.ring.style')};
@@ -78,7 +89,8 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-info .p-toast-close-button:focus-visible {
-    color: ${dt('toast.info.color')};
+    outline-color: ${dt('toast.info.close.button.focus.ring.color')};
+    box-shadow: ${dt('toast.info.close.button.focus.ring.shadow')};
 }
 
 .p-toast-message-info .p-toast-close-button:hover {
@@ -97,7 +109,8 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-success .p-toast-close-button:focus-visible {
-    color: ${dt('toast.success.color')};
+    outline-color: ${dt('toast.success.close.button.focus.ring.color')};
+    box-shadow: ${dt('toast.success.close.button.focus.ring.shadow')};
 }
 
 .p-toast-message-success .p-toast-close-button:hover {
@@ -116,7 +129,8 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-warn .p-toast-close-button:focus-visible {
-    color: ${dt('toast.warn.color')};
+    outline-color: ${dt('toast.warn.close.button.focus.ring.color')};
+    box-shadow: ${dt('toast.warn.close.button.focus.ring.shadow')};
 }
 
 .p-toast-message-warn .p-toast-close-button:hover {
@@ -135,7 +149,8 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-error .p-toast-close-button:focus-visible {
-    color: ${dt('toast.error.color')};
+    outline-color: ${dt('toast.error.close.button.focus.ring.color')};
+    box-shadow: ${dt('toast.error.close.button.focus.ring.shadow')};
 }
 
 .p-toast-message-error .p-toast-close-button:hover {
@@ -154,7 +169,8 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-secondary .p-toast-close-button:focus-visible {
-    color: ${dt('toast.secondary.color')};
+    outline-color: ${dt('toast.secondary.close.button.focus.ring.color')};
+    box-shadow: ${dt('toast.secondary.close.button.focus.ring.shadow')};
 }
 
 .p-toast-message-secondary .p-toast-close-button:hover {
@@ -173,7 +189,8 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message-contrast .p-toast-close-button:focus-visible {
-    color: ${dt('toast.contrast.color')};
+    outline-color: ${dt('toast.contrast.close.button.focus.ring.color')};
+    box-shadow: ${dt('toast.contrast.close.button.focus.ring.shadow')};
 }
 
 .p-toast-message-contrast .p-toast-close-button:hover {