fix(core): update

ts_web/elements/dees-button.ts

@@ -1,4 +1,13 @@
-import { customElement, html, DeesElement, property, TemplateResult } from '@designestate/dees-element';
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+} from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
@@ -10,7 +19,7 @@ declare global {
 
 @customElement('dees-button')
 export class DeesButton extends DeesElement {
-  public static demo = () => html`<dees-button></dees-button>`
+  public static demo = () => html`<dees-button></dees-button>`;
 
   @property()
   text: string;
@@ -31,79 +40,87 @@ export class DeesButton extends DeesElement {
     super();
   }
 
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+
+      .button {
+        transition: all 0.2s ease;
+        font-size: 14px;
+        display: block;
+        text-align: center;
+        background: ${cssManager.bdTheme('#eee', '#333')};
+        border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
+        border-radius: 2px;
+        line-height: 40px;
+        padding: 0px 10px;
+        min-width: 100px;
+        user-select: none;
+        color: ${cssManager.bdTheme('#333', ' #ccc')};
+      }
+
+      .button:hover {
+        cursor: pointer;
+        background: #039be5;
+        border-top: 1px solid #039be5;
+        color: #ffffff;
+      }
+
+      .button:active {
+        background: #0277bd;
+        border-top: 1px solid #0277bd;
+      }
+
+      .button.disabled {
+        background: #fff;
+        border: 1px solid #eeeff3;
+        color: #9b9b9e;
+        cursor: default;
+      }
+
+      .button.highlighted {
+        background: #e4002b;
+        color: #fff;
+      }
+
+      .button.discreet {
+        background: none;
+        border: 1px solid #9b9b9e;
+        color: #000;
+      }
+
+      .button.discreet:hover {
+        background: rgba(0, 0, 0, 0.1);
+      }
+      .hidden {
+        display: none;
+      }
+
+      .big {
+        display: inline-block;
+        line-height: 48px;
+        font-size: 16px;
+        padding: 0px 48px;
+        margin-top: 36px;
+      }
+    `,
+  ];
+
   public render(): TemplateResult {
     return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        :host {
-          display: block;
-          box-sizing: border-box;
-        }
-        :host([hidden]) {
-          display: none;
-        }
-
-        .button {
-          transition: all 0.2s ease;
-          font-size: 14px;
-          display: block;
-          text-align: center;
-          background: ${this.goBright ? '#eee' : '#333'};
-          border-top: ${this.goBright ? '1px solid #eee' : '1px solid #444'};
-          border-radius: 2px;
-          line-height: 40px;
-          padding: 0px 10px;
-          min-width: 100px;
-          user-select: none;
-          color: ${this.goBright ? '#333' : ' #ccc'};
-        }
-
-        .button:hover {
-          cursor: pointer;
-          background: #039BE5;
-          border-top: 1px solid #039BE5;
-          color: #ffffff;
-        }
-
-        .button:active {
-          background: #0277BD;
-          border-top: 1px solid #0277BD;
-        }
-
-        .button.disabled {
-          background: #fff;
-          border: 1px solid #eeeff3;
-          color: #9b9b9e;
-          cursor: default;
-        }
-
-        .button.highlighted {
-          background: #e4002b;
-          color: #fff;
-        }
-
-        .button.discreet {
-          background: none;
-          border: 1px solid #9b9b9e;
-          color: #000;
-        }
-
-        .button.discreet:hover {
-          background: rgba(0,0,0,0.1)
-        }
-        .hidden {
-            display: none;
-        }
-
-        .big {
-          display: inline-block;
-          line-height: 48px;
-          font-size: 16px;
-          padding: 0px 48px;
-          margin-top: 36px;
-        }
-      </style>
-      <div class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.disabled ? 'disabled' : null}" @click="${this.dispatchClick}">
+      <div
+        class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.disabled
+          ? 'disabled'
+          : null}"
+        @click="${this.dispatchClick}"
+      >
         ${this.text ? this.text : this.textContent}
       </div>
     `;
@@ -111,19 +128,20 @@ export class DeesButton extends DeesElement {
 
   public async dispatchClick() {
     if (this.disabled) {
-
       return;
     }
 
-    this.dispatchEvent(new CustomEvent('clicked', {
-      detail: {
-        data: this.eventDetailData
-      },
-      bubbles: true
-    }));
+    this.dispatchEvent(
+      new CustomEvent('clicked', {
+        detail: {
+          data: this.eventDetailData,
+        },
+        bubbles: true,
+      })
+    );
   }
 
-  public async firstUpdated () {
+  public async firstUpdated() {
     if (!this.textContent) {
       this.textContent = 'Button';
       this.performUpdate();