@aquera/nile-elements 0.1.46-beta-2.1 → 0.1.46-beta-2.2

package/src/nile-icon/icons/svg/virtualserver.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBvbHlnb24gcG9pbnRzPSIyIDIgMTIuMDQgMiAxMi4wNCA1Ljk5IDEzLjA0IDUuOTkgMTMuMDQgMSAxIDEgMSAxNS4wMSAzLjAyIDE1LjAxIDMuMDIgMTQuMDEgMiAxNC4wMSAyIDIiLz48cmVjdCB4PSI0LjA0IiB5PSIzLjk5IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iNy4wMiIgeT0iMy45OSIgd2lkdGg9IjMuMDIiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjQuMDQiIHk9IjYuOTkiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cGF0aCBkPSJtMTMuMjksOS4yM2MtLjM2LS44Mi0xLjMzLTEuOTUtMy4yNS0xLjk1LTIuNjQsMC0zLjYxLDEuNzItMy44MiwyLjkzLS44NS4xNi0xLjk3Ljc3LTEuOTcsMi4zOCwwLDEuOTIsMS41OCwyLjQyLDIuNDIsMi40Mmg2LjI1YzEsMCwyLjktLjYxLDIuOS0yLjksMC0yLjA0LTEuNS0yLjc1LTIuNTQtMi44OFptLS4zNiw0Ljc4aC02LjI1Yy0uMTUsMC0xLjQyLS4wNC0xLjQyLTEuNDJzMS4xOS0xLjQyLDEuNDItMS40MmguNDhzLjAyLS40OC4wMi0uNDhjMC0uMjUuMTctMi40LDIuODYtMi40LDEuOTYsMCwyLjM4LDEuNDgsMi40LDEuNTRsLjEuMzhoLjM5Yy4xOSwwLDEuOTEuMDcsMS45MSwxLjkxcy0xLjcxLDEuOS0xLjksMS45WiIvPjwvc3ZnPg==";
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PCEtLSBEb2N1bWVudCBvdXRsaW5lIHBvbHlnb24gYXMgcGF0aCAtLT48cGF0aCBkPSJNMiAyICAgICAgICAgICBIMTIuMDQgICAgICAgICAgIFY1Ljk5ICAgICAgICAgICBIMTMuMDQgICAgICAgICAgIFYxICAgICAgICAgICBIMSAgICAgICAgICAgVjE1LjAxICAgICAgICAgICBIMy4wMiAgICAgICAgICAgVjE0LjAxICAgICAgICAgICBIMiAgICAgICAgICAgVjIgICAgICAgICAgIFoiLz48IS0tIFNtYWxsIHNxdWFyZXMgLS0+PHBhdGggZD0iTTQuMDQgMy45OSAgICAgICAgICAgaDEgICAgICAgICAgIHYxICAgICAgICAgICBoLTEgICAgICAgICAgIFoiLz48cGF0aCBkPSJNNy4wMiAzLjk5ICAgICAgICAgICBoMy4wMiAgICAgICAgICAgdjEgICAgICAgICAgIGgtMy4wMiAgICAgICAgICAgWiIvPjxwYXRoIGQ9Ik00LjA0IDYuOTkgICAgICAgICAgIGgxICAgICAgICAgICB2MSAgICAgICAgICAgaC0xICAgICAgICAgICBaIi8+PCEtLSBDb21wbGV4IGN1cnZlZCBzaGFwZSAtLT48cGF0aCBkPSJNMTMuMjksOS4yMyAgICAgICAgICAgYy0uMzYtLjgyLTEuMzMtMS45NS0zLjI1LTEuOTUgICAgICAgICAgIGMtMi42NCwwLTMuNjEsMS43Mi0zLjgyLDIuOTMgICAgICAgICAgIGMtLjg1LjE2LTEuOTcuNzctMS45NywyLjM4ICAgICAgICAgICBjMCwxLjkyLDEuNTgsMi40MiwyLjQyLDIuNDIgICAgICAgICAgIGg2LjI1ICAgICAgICAgICBjMSwwLDIuOS0uNjEsMi45LTIuOSAgICAgICAgICAgYzAtMi4wNC0xLjUtMi43NS0yLjU0LTIuODggICAgICAgICAgIFogICAgICAgICAgIE0xMi45MywxNC4wMSAgICAgICAgICAgaC02LjI1ICAgICAgICAgICBjLS4xNSwwLTEuNDItLjA0LTEuNDItMS40MiAgICAgICAgICAgczEuMTktMS40MiwxLjQyLTEuNDIgICAgICAgICAgIGguNDggICAgICAgICAgIGMwLS4yNS4xNy0yLjQsMi44Ni0yLjQgICAgICAgICAgIGMxLjk2LDAsMi4zOCwxLjQ4LDIuNCwxLjU0ICAgICAgICAgICBsLjEuMzggICAgICAgICAgIGguMzkgICAgICAgICAgIGMuMTksMCwxLjkxLjA3LDEuOTEsMS45MSAgICAgICAgICAgcy0xLjcxLDEuOS0xLjksMS45ICAgICAgICAgICBaIi8+PC9zdmc+";

package/src/nile-icon/index.ts

@@ -81,6 +81,9 @@ export class NileIcon extends LitElement {
   @property({ type: Boolean })
   public push = false;
 
+  @property({ type: Boolean })
+  public noFill = false;
+
   /**
    * Retain Viewbox
    */
@@ -94,6 +97,9 @@ export class NileIcon extends LitElement {
       justify-content: center;
       contain: content;
       --nile-svg-stroke-width: 1.3;
+      -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
     }
 
     .nds-icon {
@@ -112,6 +118,10 @@ export class NileIcon extends LitElement {
       fill: var(--nile-svg-fill);
     }
 
+    .nds-icon.no-fill svg path {
+      fill: revert-layer;
+    }
+
     .stroke svg path {
       fill: none !important;
       stroke: var(--nile-svg-fill) !important;
@@ -119,7 +129,7 @@ export class NileIcon extends LitElement {
     }
 
     .nds-icon--push {
-      margin-right: 12px;
+      margin-right: var(--nile-spacing-lg);
     }
   `;
 
@@ -130,10 +140,12 @@ export class NileIcon extends LitElement {
   protected override async updated(
     changedProperties: PropertyValues
   ): Promise<void> {
+
     if (changedProperties.has('size')) {
       this.style.setProperty('--nile-svg-height', `${this.size}px`);
       this.style.setProperty('--nile-svg-width', `${this.size}px`);
     }
+ 
     if (changedProperties.has('color')) {
       this.style.setProperty('--nile-svg-fill', `${this.color}`);
     }
@@ -219,6 +231,7 @@ export class NileIcon extends LitElement {
     return {
       'stroke': this.method != 'fill' ,
       'nds-icon--push': this.push,
+      'no-fill': this.noFill,
     } as ButtonClassMap;
   }
 
@@ -239,11 +252,11 @@ export class NileIcon extends LitElement {
       !this.color
     ) {
       // Case 1: _svg does not have fill color or has fill="inherit" and this.color is not mentioned
-      this.style.setProperty('--nile-svg-fill', `var(--nile-colors-dark-500)`);
+      this.style.setProperty('--nile-svg-fill', `var(--nile-colors-dark-500,var(--ng-colors-fg-secondary-700))`);
 
     } else if (this.color) {
       // Case 2: If this.color is mentioned, use it as fill, regardless of _svg color
-      this.style.setProperty('--nile-svg-fill', `${this.color}`);
+     this.style.setProperty('--nile-svg-fill', `${this.color}`);
     }
 
     return html`

package/src/nile-icon-button/nile-icon-button.css.ts

@@ -13,7 +13,10 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
-    color: hsl(240 5.2% 33.9%);
+    color:  var(--nile-colors-neutral-700);
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .icon-button {
@@ -22,10 +25,10 @@ export const styles = css`
     align-items: center;
     background: none;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--nile-radius-sm);
     font-size: inherit;
     color: inherit;
-    padding: 0.5rem;
+    padding: var(--nile-radius-md);
     cursor: pointer;
     transition: 50ms;
     -webkit-appearance: none;
@@ -33,7 +36,7 @@ export const styles = css`
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: hsl(200.4 98% 39.4%);
+    color: var(--nile-colors-blue-500)
   }
 
   .icon-button:active:not(.icon-button--disabled) {

package/src/nile-icon-button/nile-icon-button.ts

@@ -122,6 +122,16 @@ export class NileIconButton extends NileElement {
     this.ishovered = false;
   }
 
+  private getTokenValueResolved(): any {
+    const thisValue = this; 
+  
+    const value = Number(getComputedStyle(thisValue).getPropertyValue('--nile-width-14px').trim().split('px')[0]);
+    if (!value) {
+      return Number(getComputedStyle(thisValue).getPropertyValue('--ng-height-12px').trim().split('px')[0]);
+    }
+    return value;
+  }
+
   render(): TemplateResult {
     const isLink = this.href ? true : false;
     const tag = isLink ? literal`a` : literal`button`;
@@ -161,7 +171,7 @@ export class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size="14"
+            size="${this.getTokenValueResolved()}"
           ></nile-icon>
         </a>
       `;
@@ -201,7 +211,7 @@ export class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size="14"
+            size="${this.getTokenValueResolved()}"
           ></nile-icon>
         </button>
       `;

package/src/nile-inline-edit/nile-inline-edit.css.ts

@@ -13,43 +13,49 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .inline__edit--label {
-    color: var(--nile-inline-edit-label-font-color);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium);
-    line-height: 20px;
-    margin-bottom: 6px;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+    margin-bottom: var(--nile-spacing-sm);
   }
 
   .inline__edit--open--container {
     display: block;
-    width: var(--nile-width-width-xxs);
+    width: var(--nile-width-width-xxs, var(--ng-spacing-80));
     box-sizing: border-box;
   }
 
   .inline__edit--container {
     box-sizing: border-box;
-    width: var(--nile-width-width-xxs);
-    min-width: var(--nile-width-width-xxs);
-    min-height: 40px;
+    width: var(--nile-width-width-xxs, var(--ng-width-80));
+    min-width: var(--nile-width-width-xxs, var(--ng-width-80));
+    min-height: var(--nile-height-40px, var(--ng-height-40px));
     height: auto;
-    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);
-    border-radius: var(--nile-radius-radius-xs);
-    color: var(--nile-inline-edit-font-color);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-4);
+    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));
+    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-spacing-spacing-3xl);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));
     word-wrap: break-word;
   }
 
   .inline__edit--container:hover {
-    background-color:var(--nile-inline-edit-hover-background-color);
+    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
   }
 `;