@dile/ui 2.0.1 → 2.0.3

package/components/app-drawer/src/DileAppDrawer.js

@@ -55,7 +55,7 @@ export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
         position: fixed;
         box-sizing: border-box;
         z-index: var(--dile-app-drawer-z-index, 10000);
-        background-color: var(--dile-app-drawer-background-color, #ddd);
+        background-color: var(--dile-primary-light-color, #ddd);
         transition: transform 0.3s ease;
         overflow: auto;
       }

package/components/avatar/src/DileAvatar.js

@@ -1,7 +1,5 @@
 import { LitElement, html, css } from "lit";
 
-let defaultIcon = `data:image/svg+xml;utf8,<svg style="fill:%23888;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/><path d="M0 0h24v24H0z" fill="none"/></svg>`;
-
 export class DileAvatar extends LitElement {
   static get styles() {
     return css`
@@ -30,6 +28,7 @@ export class DileAvatar extends LitElement {
     return {
       src: { type: String },
       initial: { type: String },
+      darkIcon: { type: Boolean },
     };
   }
   constructor() {
@@ -57,7 +56,7 @@ export class DileAvatar extends LitElement {
     return html`<div
         id="img"
         role="img"
-        style="background-image: url('${this._asignImage(this.src)}');"
+        style="background-image: url('${this._asignImage(this.src, this.darkIcon)}');"
       >&nbsp;</div>`;
   }
 
@@ -69,10 +68,14 @@ export class DileAvatar extends LitElement {
       >${this.initial}</div>`;
   }
 
-  _asignImage(src) {
+  _asignImage(src, isDark) {
     if (src == "" || !src) {
-      return defaultIcon;
+      return this.defaultIcon(isDark);
     }
     return src;
   }
+
+  defaultIcon(isDark) {
+    return `data:image/svg+xml;utf8,<svg style="fill:%23${isDark ? '303030' : 'fff'};" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/><path d="M0 0h24v24H0z" fill="none"/></svg>`;
+  }
 }

package/components/hamburger/src/DileHamburger.js

@@ -13,7 +13,7 @@ export class DileHamburger extends LitElement {
         display: inline-block;
       }
       .hamburger {
-        padding: var(--dile-hamburger-padding-y, 15px) var(--dile-hamburger-padding-x, 15px);
+        padding: var(--dile-hamburger-padding-y, 5px) var(--dile-hamburger-padding-x, 5px);
         display: flex;
         align-items: center;
         cursor: pointer;
@@ -57,7 +57,7 @@ export class DileHamburger extends LitElement {
       .hamburger-inner::after {
         width: var(--dile-hamburger-width, 24px);
         height: var(--dile-hamburger-line-size, 3px);
-        background-color: var(--dile-hamburger-color, #000);
+        background-color: var(--dile-foreground-color, #000);
         border-radius: var(--dile-hamburger-line-size, 3px);
         position: absolute;
         transition-property: transform;

package/components/nav/src/DileNav.js

@@ -6,8 +6,8 @@ export class DileNav extends LitElement {
         :host {
           display: grid;
           grid-template-columns: auto 1fr auto;
-          color: var(--dile-nav-color, #fff);
-          background-color: var(--dile-nav-background-color, #666);
+          color: var(--dile-foreground-color, #fff);
+          background-color: var(--dile-primary-color, #2962FF);
           align-items: var(--dile-nav-align-items, center);
           column-gap: var(--dile-nav-column-gap, 1rem);
           padding: var(--dile-nav-padding-y, 0.8rem) var(--dile-nav-padding-x, 0.6rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -20,10 +20,11 @@
   },
   "homepage": "https://github.com/Polydile/Components#readme",
   "dependencies": {
-    "lit": "^3.1.2"
+    "@dile/icons": "^2.0.2",
+    "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "840c8bb284fd7504eb8a0eebd31b55f692f7f852"
+  "gitHead": "41b99158b3537b02a2e823bdd162cfdd0b7e7323"
 }