feat(toast): add rounded close button and hover effects for severity

RISDEV-4777

src/primevue/toast/toast.ts

@@ -28,14 +28,14 @@ const toast: ToastPassThroughOptions = {
   }),
 
   messageIcon: ({ props }) => {
-    const baseIcon = tw`h-20 w-20 flex-none shrink-0 p-2`; // Enforcing no shrinking
+    const baseIcon = tw`h-20 w-20 flex-none shrink-0 p-2`; 
 
     const severity = props.message?.severity ?? "info";
 
     const successIcon = tw`text-green-900`;
-    const errorIcon = tw`text-red-800`;
-    const warnIcon = tw`text-yellow-800`;
-    const infoIcon = tw`text-blue-800`;
+    const errorIcon = tw`text-red-900`;
+    const warnIcon = tw`text-yellow-900`;
+    const infoIcon = tw`text-blue-900`;
 
     return {
       class: {
@@ -53,12 +53,36 @@ const toast: ToastPassThroughOptions = {
   }),
 
   summary: () => ({
-    class: tw`ris-body2-bold`,
+    class: tw`ris-label2-bold`,
   }),
+  closeButton: ({props}) => {
+    const base = tw`p-2 rounded-sm`;
 
-  closeIcon: () => ({
-    class: tw`text-blue-800`,
-  }),
+    const severity = props.message?.severity ?? "info";
+
+    const successHover = tw`hover:bg-green-400`;
+    const errorHover = tw`hover:bg-red-400`;
+    const warnHover = tw`hover:bg-yellow-400`;
+    const infoHover = tw`hover:bg-blue-400`;
+
+    return {
+      class: {
+        [base]: true,
+        [successHover]: severity === "success",
+        [errorHover]: severity === "error",
+        [warnHover]: severity === "warn",
+        [infoHover]: severity === "info",
+      },
+    };
+  },
+  closeIcon: ({ }) => {
+    const base = tw`text-black`;
+    return {
+      class: {
+        [base]: true,
+      },
+    };
+  },
 };
 
 export default toast;