fix(core): update

test/elements/test-demoelement.ts

@@ -4,6 +4,8 @@ import {
   TemplateResult,
   html,
   property,
+  css,
+  cssManager,
 } from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
@@ -38,32 +40,42 @@ export class TestDemoelement extends DeesElement {
   })
   public demoENum: ETestEnum = ETestEnum.first;
 
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    css`
+      .maincontainer,
+      .themeindicator {
+        display: block;
+        padding: 10px;
+        border-radius: 10px;
+        margin-bottom: 20px;
+      }
+      .maincontainer {
+        color: #fff;
+        background: #000;
+      }
+      .themeindicator {
+        color: ${cssManager.bdTheme('#000', '#fff')};
+        background: ${cssManager.bdTheme('#fff', '#000')};
+      }
+      ${domtools.breakpoints.cssForPhablet(css`
+        .maincontainer,
+        .themeindicator {
+          border-radius: 50px;
+        }
+      `)}
+      pre b {
+        color: green;
+      }
+    `,
+  ];
+
   public render() {
     return html`
-      <style>
-        .maincontainer, .themeindicator {
-          display: block;
-          padding: 10px;
-          border-radius: 10px;
-          margin-bottom: 20px;
-        }
-        .maincontainer {
-            color: #fff;
-            background: #000;
-        }
-        .themeindicator {
-          color: ${this.goBright ? '#000' : '#fff'};
-          background: ${this.goBright ? '#fff' : '#000'};
-        }
-        ${domtools.breakpoints.cssForPhablet(`
-          .maincontainer, .themeindicator {
-            border-radius: 50px;
-          }
-        `)}
-        pre b {
-          color: green;
-        }
-      </style>
+      <style></style>
       <div class="maincontainer"><slot>This is a demo element</slot></div>
       <div class="themeindicator">
         You have selected the ${this.goBright ? 'bright' : 'dark'} theme.
@@ -72,7 +84,8 @@ export class TestDemoelement extends DeesElement {
           demoString is <b>"${this.demoString}"</b>
           demoNumber is <b>${this.demoNumber}</b>
           demoEnum is <b>"${this.demoENum}"</b>
-        </pre>
+        </pre
+        >
       </div>
     `;
   }