@aquera/nile-elements 0.1.40-beta-1.1 → 0.1.40-beta-1.0

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

@@ -265,62 +265,6 @@ export { default as moveright } from './moveright';
 export { default as mute } from './mute';
 export { default as myintegration } from './my-integration';
 export { default as newcalendar } from './new-calendar';
-export { default as ngactivity } from './ng-activity';
-export { default as ngaligncenter } from './ng-align-center';
-export { default as ngannotationx } from './ng-annotation-x';
-export { default as ngbell01 } from './ng-bell-01';
-export { default as ngbellringing04 } from './ng-bell-ringing-04';
-export { default as ngbold01 } from './ng-bold-01';
-export { default as ngcalendarplus02 } from './ng-calendar-plus-02';
-export { default as ngcalendar } from './ng-calendar';
-export { default as ngcheckcircle } from './ng-check-circle';
-export { default as ngchecksquarebroken } from './ng-check-square-broken';
-export { default as ngchevrondown } from './ng-chevron-down';
-export { default as ngchevronleft } from './ng-chevron-left';
-export { default as ngchevronright } from './ng-chevron-right';
-export { default as ngchevronselectorvertical } from './ng-chevron-selector-vertical';
-export { default as ngchevronupdouble } from './ng-chevron-up-double';
-export { default as ngchevronup } from './ng-chevron-up';
-export { default as ngcopy03 } from './ng-copy-03';
-export { default as ngdotsgrid } from './ng-dots-grid';
-export { default as ngdotsvertical } from './ng-dots-vertical';
-export { default as ngdownload01 } from './ng-download-01';
-export { default as ngdropdown } from './ng-dropdown';
-export { default as ngedit02 } from './ng-edit-02';
-export { default as ngedit05 } from './ng-edit-05';
-export { default as ngexpand06 } from './ng-expand-06';
-export { default as ngfilecheck02 } from './ng-file-check-02';
-export { default as ngfilequestion03 } from './ng-file-question-03';
-export { default as ngfilterlines } from './ng-filter-lines';
-export { default as nggrid01 } from './ng-grid-01';
-export { default as nghelpcircle } from './ng-help-circle';
-export { default as ngimageuserleft } from './ng-image-user-left';
-export { default as nginfocircle } from './ng-info-circle';
-export { default as ngitalic01 } from './ng-italic-01';
-export { default as nglist } from './ng-list';
-export { default as ngmail01 } from './ng-mail-01';
-export { default as ngmail04 } from './ng-mail-04';
-export { default as ngmenu05 } from './ng-menu-05';
-export { default as ngminimize02 } from './ng-minimize-02';
-export { default as ngplus } from './ng-plus';
-export { default as ngrocket02 } from './ng-rocket-02';
-export { default as ngsearchlg } from './ng-search-lg';
-export { default as ngsend01 } from './ng-send-01';
-export { default as ngsettings01 } from './ng-settings-01';
-export { default as ngshare06 } from './ng-share-06';
-export { default as ngstars02 } from './ng-stars-02';
-export { default as ngtrash01 } from './ng-trash-01';
-export { default as ngtrash03 } from './ng-trash-03';
-export { default as ngtrendup01 } from './ng-trend-up-01';
-export { default as ngunderline01 } from './ng-underline-01';
-export { default as ngupload01 } from './ng-upload-01';
-export { default as nguser01 } from './ng-user-01';
-export { default as ngusercheck021 } from './ng-user-check-02-1';
-export { default as ngusercheck02 } from './ng-user-check-02';
-export { default as nguserplus02 } from './ng-user-plus-02';
-export { default as nguserright01 } from './ng-user-right-01';
-export { default as ngxclose } from './ng-x-close';
-export { default as ngxsquare } from './ng-x-square';
 export { default as nightingalechart } from './nightingale-chart';
 export { default as nlp } from './nlp';
 export { default as nomatch } from './nomatch';

package/src/nile-icon/index.ts

@@ -68,9 +68,6 @@ export class NileIcon extends LitElement {
   @property({ type: String, reflect: true })
   public size = SMALL_ICON_SIZE;
 
-  @property({ type: String })
-  public size_token = `${SMALL_ICON_SIZE}px`;
-
   @state()
   private _svg = '';
 
@@ -84,9 +81,6 @@ export class NileIcon extends LitElement {
   @property({ type: Boolean })
   public push = false;
 
-  @property({ type: Boolean })
-  public noFill = false;
-
   /**
    * Retain Viewbox
    */
@@ -100,9 +94,6 @@ 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 {
@@ -121,10 +112,6 @@ 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;
@@ -132,7 +119,7 @@ export class NileIcon extends LitElement {
     }
 
     .nds-icon--push {
-      margin-right: var(--nile-spacing-lg);
+      margin-right: 12px;
     }
   `;
 
@@ -147,10 +134,6 @@ export class NileIcon extends LitElement {
       this.style.setProperty('--nile-svg-height', `${this.size}px`);
       this.style.setProperty('--nile-svg-width', `${this.size}px`);
     }
-    else if (changedProperties.has('size_token')) {
-      this.style.setProperty('--nile-svg-height', `${this.size_token}`);
-      this.style.setProperty('--nile-svg-width', `${this.size_token}`);
-    }
     if (changedProperties.has('color')) {
       this.style.setProperty('--nile-svg-fill', `${this.color}`);
     }
@@ -236,7 +219,6 @@ export class NileIcon extends LitElement {
     return {
       'stroke': this.method != 'fill' ,
       'nds-icon--push': this.push,
-      'no-fill': this.noFill,
     } as ButtonClassMap;
   }
 
@@ -257,11 +239,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,var(--ng-colors-fg-secondary-700))`);
+      this.style.setProperty('--nile-svg-fill', `var(--nile-colors-dark-500)`);
 
     } 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,10 +13,7 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
-    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));
+    color: hsl(240 5.2% 33.9%);
   }
 
   .icon-button {
@@ -25,10 +22,10 @@ export const styles = css`
     align-items: center;
     background: none;
     border: none;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 0.25rem;
     font-size: inherit;
     color: inherit;
-    padding: var(--nile-radius-md);
+    padding: 0.5rem;
     cursor: pointer;
     transition: 50ms;
     -webkit-appearance: none;
@@ -36,7 +33,7 @@ export const styles = css`
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--nile-colors-blue-500)
+    color: hsl(200.4 98% 39.4%);
   }
 
   .icon-button:active:not(.icon-button--disabled) {

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

@@ -161,7 +161,7 @@ export class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size_token="var(--nile-width-14px, var(--ng-width-2-5))"
+            size="14"
           ></nile-icon>
         </a>
       `;
@@ -201,7 +201,7 @@ export class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size_token="var(--nile-width-14px, var(--ng-width-2-5))"
+            size="14"
           ></nile-icon>
         </button>
       `;

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

@@ -13,49 +13,43 @@ 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, 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));
+    color: var(--nile-inline-edit-label-font-color);
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-type-scale-3);
     font-style: normal;
-    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);
+    font-weight: var(--nile-font-weight-medium);
+    line-height: 20px;
+    margin-bottom: 6px;
   }
 
   .inline__edit--open--container {
     display: block;
-    width: var(--nile-width-width-xxs, var(--ng-spacing-80));
+    width: var(--nile-width-width-xxs);
     box-sizing: border-box;
   }
 
   .inline__edit--container {
     box-sizing: border-box;
-    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));
+    width: var(--nile-width-width-xxs);
+    min-width: var(--nile-width-width-xxs);
+    min-height: 40px;
     height: auto;
-    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));
+    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);
     font-style: normal;
-    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));
+    font-weight: var(--nile-font-weight-regular);
+    line-height: var(--nile-spacing-spacing-3xl);
     word-wrap: break-word;
   }
 
   .inline__edit--container:hover {
-    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
+    background-color:var(--nile-inline-edit-hover-background-color);
   }
 `;