@umbraco-ui/uui-toast-notification 0.2.1 → 1.0.0-alpha.0

package/custom-elements.json

@@ -6,7 +6,7 @@
       "path": "./lib/uui-toast-notification.element.ts",
       "attributes": [
         {
-          "name": "look",
+          "name": "color",
           "description": "Changes the look of the notification to one of the predefined, symbolic looks. Example set this to danger for errors.",
           "type": "\"\"|\"primary\"|\"positive\"|\"warning\"|\"danger\"",
           "default": "\"\\\"\\\"\""
@@ -31,8 +31,8 @@
           "default": "[\"UUITextStyles\",null]"
         },
         {
-          "name": "look",
-          "attribute": "look",
+          "name": "color",
+          "attribute": "color",
           "description": "Changes the look of the notification to one of the predefined, symbolic looks. Example set this to danger for errors.",
           "type": "\"\"|\"primary\"|\"positive\"|\"warning\"|\"danger\"",
           "default": "\"\\\"\\\"\""

package/lib/index.js

@@ -1,5 +1,4 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { InterfaceLookDefaultValue } from '@umbraco-ui/uui-base/lib/types';
 import { Timer, demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { iconRemove } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
@@ -28,7 +27,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 let UUIToastNotificationElement = class extends LitElement {
   constructor() {
     super();
-    this.look = InterfaceLookDefaultValue;
+    this.color = "";
     this._autoClose = null;
     this._onOpenTimerComplete = () => {
       if (this._open) {
@@ -170,7 +169,8 @@ let UUIToastNotificationElement = class extends LitElement {
           <div id="close">
             <uui-button
               .label=${"close"}
-              .look=${this.look}
+              ?color=${this.color}
+              .look=${this.color ? "primary" : "default"}
               @click=${() => this.open = false}>
               <uui-icon
                 name="remove"
@@ -229,7 +229,7 @@ UUIToastNotificationElement.styles = [
 
         box-sizing: border-box;
         box-shadow: var(--uui-shadow-depth-1,0 1px 3px rgba(0,0,0,0.12) , 0 1px 2px rgba(0,0,0,0.24));
-        background-color: var(--uui-interface-surface,#fefefe);
+        background-color: var(--uui-color-surface,#fff);
         padding: var(--uui-size-layout-1,24px);
         padding-right: var(--uui-size-layout-1,24px);
         padding-left: var(--uui-size-layout-3,42px);
@@ -256,29 +256,36 @@ UUIToastNotificationElement.styles = [
         --uui-button-padding-right-factor: 1.5;
       }
 
-      :host([look='primary']) #toast > div {
-        background-color: var(--uui-look-primary-surface,#1b264f);
-        color: var(--uui-look-primary-contrast,#fefefe);
+      :host #toast > div {
+        background-color: var(--uui-color-surface,#fff);
+        color: var(--uui-color-text,#060606);
+        border-color: var(--uui-color-surface,#fff);
       }
-      :host([look='positive']) #toast > div {
-        background-color: var(--uui-look-positive-surface,#25aa60);
-        color: var(--uui-look-positive-contrast,#fefefe);
+      :host([color='primary']) #toast > div {
+        background-color: var(--uui-color-default,#1b264f);
+        color: var(--uui-color-default-contrast,#fff);
+        border-color: var(--uui-color-default-standalone,rgb(28, 35, 59));
       }
-      :host([look='warning']) #toast > div {
-        background-color: var(--uui-look-warning-surface,#fad634);
-        color: var(--uui-look-warning-contrast,#060606);
-        border-color: var(--uui-look-warning-border,#fad634);
+      :host([color='positive']) #toast > div {
+        background-color: var(--uui-color-positive,#25aa60);
+        color: var(--uui-color-positive-contrast,#fff);
+        border-color: var(--uui-color-positive-standalone,rgb(38, 156, 91));
       }
-      :host([look='danger']) #toast > div {
-        background-color: var(--uui-look-danger-surface,#d42054);
-        color: var(--uui-look-danger-contrast,#fefefe);
-        border-color: var(--uui-look-danger-border,#d42054);
+      :host([color='warning']) #toast > div {
+        background-color: var(--uui-color-warning,#fad634);
+        color: var(--uui-color-warning-contrast,#000);
+        border-color: var(--uui-color-warning-standalone,rgb(224, 193, 51));
+      }
+      :host([color='danger']) #toast > div {
+        background-color: var(--uui-color-danger,#d42054);
+        color: var(--uui-color-danger-contrast,white);
+        border-color: var(--uui-color-danger-standalone,rgb(191, 33, 78));
       }
     `
 ];
 __decorateClass([
   property({ reflect: true })
-], UUIToastNotificationElement.prototype, "look", 2);
+], UUIToastNotificationElement.prototype, "color", 2);
 __decorateClass([
   property({ type: Number })
 ], UUIToastNotificationElement.prototype, "autoClose", 1);

package/lib/uui-toast-notification.element.d.ts

@@ -1,4 +1,3 @@
-import { InterfaceLookType } from '@umbraco-ui/uui-base/lib/types';
 import { LitElement } from 'lit';
 /**
  *  @element uui-toast-notification
@@ -17,7 +16,7 @@ export declare class UUIToastNotificationElement extends LitElement {
      * @attr
      * @default ""
      */
-    look: InterfaceLookType;
+    color: string;
     private _autoClose;
     /**
      * Set an auto-close timer.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-toast-notification",
-  "version": "0.2.1",
+  "version": "1.0.0-alpha.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,11 +30,11 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.2.1",
-    "@umbraco-ui/uui-button": "0.3.1",
-    "@umbraco-ui/uui-css": "0.1.1",
-    "@umbraco-ui/uui-icon": "0.2.1",
-    "@umbraco-ui/uui-icon-registry-essential": "0.2.1"
+    "@umbraco-ui/uui-base": "1.0.0-alpha.0",
+    "@umbraco-ui/uui-button": "1.0.0-alpha.0",
+    "@umbraco-ui/uui-css": "1.0.0-alpha.0",
+    "@umbraco-ui/uui-icon": "1.0.0-alpha.0",
+    "@umbraco-ui/uui-icon-registry-essential": "1.0.0-alpha.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-toast-notification",
-  "gitHead": "cb61546f85d6c2f122fa8c130409507e8def4bd5"
+  "gitHead": "7d7608bf2fb63a8a077fcd8f0346dea73584b878"
 }