toast notification

Author: JesmoDev

packages/uui-toast-notification/lib/uui-toast-notification.element.ts

@@ -91,6 +91,11 @@ export class UUIToastNotificationElement extends LitElement {
         --uui-button-padding-right-factor: 1.5;
       }
 
+      :host #toast > div {
+        background-color: var(--uui-color-surface);
+        color: var(--uui-color-text);
+        border-color: var(--uui-color-surface);
+      }
       :host([color='primary']) #toast > div {
         background-color: var(--uui-color-primary);
         color: var(--uui-color-primary-contrast);
@@ -338,7 +343,8 @@ export class UUIToastNotificationElement extends LitElement {
           <div id="close">
             <uui-button
               .label=${'close'}
-              .color=${this.color}
+              ?color=${this.color}
+              .look=${this.color ? 'primary' : 'default'}
               @click=${() => (this.open = false)}>
               <uui-icon
                 name="remove"

packages/uui-toast-notification/lib/uui-toast-notification.story.ts

@@ -9,7 +9,6 @@ export default {
   component: 'uui-toast-notification',
   args: {
     open: true,
-    color: '',
     headline: 'Toast notification layout headline',
     slot: 'Message to be displayed, shown by toast notification layout.',
   },
@@ -47,7 +46,7 @@ export const ErrorStyle: Story = props => html`<uui-toast-notification
   .color=${props.color}>
   <uui-toast-notification-layout .headline=${props.headline}>
     ${props.slot}
-    <uui-button slot="actions" color="danger">Retry</uui-button>
+    <uui-button slot="actions" look="primary" color="danger">Retry</uui-button>
   </uui-toast-notification-layout>
 </uui-toast-notification>`;
 ErrorStyle.args = {
@@ -74,7 +73,7 @@ export const PositiveStyle: Story = props => html`<uui-toast-notification
   .color=${props.color}>
   <uui-toast-notification-layout .headline=${props.headline}>
     ${props.slot}
-    <uui-button slot="actions" .color=${props.color}
+    <uui-button slot="actions" look="primary" .color=${props.color}
       >View in browser</uui-button
     >
   </uui-toast-notification-layout>