Fixed toast border issues and update demo

components/lib/themes/aura/toast/index.js

@@ -2,7 +2,7 @@ export default {
     root: {
         width: '25rem',
         borderRadius: '{content.border.radius}',
-        borderWidth: '0 0 0 6px',
+        borderWidth: '1px',
         transitionDuration: '{transition.duration}'
     },
     icon: {

components/lib/themes/nora/toast/index.js

@@ -38,7 +38,7 @@ export default {
     },
     colorScheme: {
         light: {
-            blur: '1.5px',
+            blur: '0',
             info: {
                 background: '{blue.800}',
                 borderColor: '{blue.800}',
@@ -125,7 +125,7 @@ export default {
             }
         },
         dark: {
-            blur: '10px',
+            blur: '0',
             info: {
                 background: '{blue.200}',
                 borderColor: '{blue.200}',

doc/toast/MultipleDoc.vue

@@ -3,7 +3,7 @@
         <p>Multiple messages are displayed by passing an array to the <i>show</i> method.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button label="Multiple" severity="warn" @click="showMultiple()" />
+        <Button label="Multiple" @click="showMultiple()" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,13 +15,13 @@ export default {
             code: {
                 basic: `
 <Toast />
-<Button label="Multiple" severity="warn" @click="showMultiple()" />
+<Button label="Multiple" @click="showMultiple()" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <Toast />
-        <Button label="Multiple" severity="warn" @click="showMultiple()" />
+        <Button label="Multiple" @click="showMultiple()" />
     </div>
 </template>
 
@@ -42,7 +42,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <Toast />
-        <Button label="Multiple" severity="warn" @click="showMultiple()" />
+        <Button label="Multiple" @click="showMultiple()" />
     </div>
 </template>
 

doc/toast/PositionDoc.vue

@@ -5,8 +5,8 @@
     <div class="card flex justify-center">
         <div class="flex flex-wrap gap-2">
             <Button label="Top Left" @click="showTopLeft" />
-            <Button label="Bottom Left" severity="warn" @click="showBottomLeft" />
-            <Button label="Bottom Right" severity="help" @click="showBottomRight" />
+            <Button label="Bottom Left" @click="showBottomLeft" />
+            <Button label="Bottom Right" @click="showBottomRight" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -23,8 +23,8 @@ export default {
 <Toast position="bottom-right" group="br" />
 
 <Button label="Top Left" @click="showTopLeft" />
-<Button label="Bottom Left" severity="warn" @click="showBottomLeft" />
-<Button label="Bottom Right" severity="help" @click="showBottomRight" />
+<Button label="Bottom Left" @click="showBottomLeft" />
+<Button label="Bottom Right" @click="showBottomRight" />
 `,
                 options: `
 <template>
@@ -35,8 +35,8 @@ export default {
 
         <div class="flex flex-wrap gap-2">
             <Button label="Top Left" @click="showTopLeft" />
-            <Button label="Bottom Left" severity="warn" @click="showBottomLeft" />
-            <Button label="Bottom Right" severity="help" @click="showBottomRight" />
+            <Button label="Bottom Left" @click="showBottomLeft" />
+            <Button label="Bottom Right" @click="showBottomRight" />
         </div>
     </div>
 </template>
@@ -66,8 +66,8 @@ export default {
 
         <div class="flex flex-wrap gap-2">
             <Button label="Top Left" @click="showTopLeft" />
-            <Button label="Bottom Left" severity="warn" @click="showBottomLeft" />
-            <Button label="Bottom Right" severity="help" @click="showBottomRight" />
+            <Button label="Bottom Left" @click="showBottomLeft" />
+            <Button label="Bottom Right" @click="showBottomRight" />
         </div>
     </div>
 </template>

doc/toast/TemplateDoc.vue

@@ -1,17 +1,17 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Custom content inside a message is defined with the <i>content</i> template.</p>
+        <p>Custom content inside a message is defined with the <i>message</i> template.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Toast position="bottom-center" group="bc" @close="onClose">
             <template #message="slotProps">
-                <div class="flex flex-col items-start" style="flex: 1">
+                <div class="flex flex-col items-start flex-auto">
                     <div class="flex items-center gap-2">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
+                        <span class="font-bold">Amy Elsner</span>
                     </div>
-                    <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
-                    <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
+                    <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
+                    <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
                 </div>
             </template>
         </Toast>
@@ -29,13 +29,13 @@ export default {
                 basic: `
 <Toast position="bottom-center" group="bc" @close="onClose">
     <template #message="slotProps">
-        <div class="flex flex-col items-start" style="flex: 1">
+        <div class="flex flex-col items-start flex-auto">
             <div class="flex items-center gap-2">
-                <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-                <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <span class="font-bold">Amy Elsner</span>
             </div>
-            <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
-            <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
+            <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
+            <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
         </div>
     </template>
 </Toast>
@@ -46,13 +46,13 @@ export default {
     <div class="card flex justify-center">
         <Toast position="bottom-center" group="bc" @close="onClose">
             <template #message="slotProps">
-                <div class="flex flex-col items-start" style="flex: 1">
+                <div class="flex flex-col items-start flex-auto">
                     <div class="flex items-center gap-2">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
+                        <span class="font-bold">Amy Elsner</span>
                     </div>
-                    <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
-                    <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
+                    <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
+                    <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
                 </div>
             </template>
         </Toast>
@@ -90,13 +90,13 @@ export default {
     <div class="card flex justify-center">
         <Toast position="bottom-center" group="bc" @close="onClose">
             <template #message="slotProps">
-                <div class="flex flex-col items-start" style="flex: 1">
+                <div class="flex flex-col items-start flex-auto">
                     <div class="flex items-center gap-2">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
+                        <span class="font-bold">Amy Elsner</span>
                     </div>
-                    <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
-                    <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
+                    <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
+                    <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
                 </div>
             </template>
         </Toast>