@aquera/nile-elements 0.0.64 → 0.0.66

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-avatar/nile-avatar.css.ts

@@ -19,15 +19,15 @@ export const styles = css`
     font-family: var(--nile-font-family-serif);
     font-style: normal;
     font-weight: 500;
-    color:var(--nile-colors-white-base);
+    color: var(--nile-colors-white-base);
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    border: 1px solid;
-    border-color: var(--nile-colors-neutral-500);
+    border: 0.5px solid;
+    border-color: rgba(0, 0, 0, 0.08);
   }
 
   .avatar {
@@ -70,34 +70,24 @@ export const styles = css`
     border-radius: 50%;
   }
 
-  .variant__yellow {
-    color: var(--nile-colors-yellow-700);
-    border-color: var(--nile-colors-yellow-500);
-    background: var(--nile-colors-yellow-400);
+  .variant__orange {
+    background: #e04f16;
   }
 
-  .variant__blue {
-    color: var(--nile-colors-blue-700);
-    border-color: var(--nile-colors-blue-500);
-    background: var(--nile-colors-blue-400);
+  .variant__pink {
+    background: #c11574;
   }
 
-  .variant__red {
-    color: var(--nile-colors-button-caution-pressed-border);
-    border-color: var(--nile-colors-red-500);
-    background: var(--nile-colors-red-400);
+  .variant__blue {
+    background: #3538cd;
   }
 
-  .variant__green {
-    color: var(--nile-colors-green-700);
-    border-color: var(--nile-colors-green-500);
-    background: var(--nile-colors-green-400);
+  .variant__light_blue {
+    background: #0086c9;
   }
 
-  .variant__neutral {
-    color: var(--nile-colors-neutral-700);
-    border-color: var(--nile-colors-neutral-500);
-    background: var(--nile-colors-dark-200);
+  .variant__green {
+    background: #079455;
   }
 `;
 

package/src/nile-avatar/nile-avatar.ts

@@ -42,13 +42,15 @@ export class NileAvatar extends NileElement {
   @property({ type: String, reflect: true }) name = '';
 
   /** Gives the default bg color  to the Avatar */
-  @property({ type: String, reflect: true }) color = '';
+  @property({ type: String, reflect: true,attribute: 'bg-color' }) bgColor = '';
 
-    /** Gives the default text color  to the Avatar */
-  @property({ type: String, reflect: true ,attribute:'text-color' }) textColor = '#fff';
+  /** Gives the default text color  to the Avatar */
+  @property({ type: String, reflect: true, attribute: 'text-color' })
+  textColor = '#fff';
 
-  /** Gives the default bg color  to the Avatar */
-  @property({ type: String, reflect: true ,attribute:'border-color'}) borderColor = 'transparent';
+  /** Gives the default border color  to the Avatar */
+  @property({ type: String, reflect: true, attribute: 'border-color' })
+  borderColor = 'rgba(0, 0, 0, 0.08)';
 
   /** Size of the Avatar */
   @property({ reflect: true }) size:
@@ -94,6 +96,7 @@ export class NileAvatar extends NileElement {
   private handleImageError(event: Event): void {
     const defaultInitials = this.generateInitials(this.name);
     const variant__code = this.generateVariantCode(defaultInitials);
+
     this.defaultAvatarContent = html`<div
       class=${classMap({
         text__avatar: true,
@@ -102,14 +105,14 @@ export class NileAvatar extends NileElement {
         avatar__large: this.size === 'large',
         avatar__extralarge: this.size === 'extralarge',
         avatar__rounded: this.isRounded,
-        variant__yellow: variant__code === 0 && !this.color,
-        variant__blue: variant__code === 1 && !this.color ,
-        variant__red: variant__code === 2 && !this.color ,
-        variant__green: variant__code === 3 && !this.color,
-        variant__neutral: variant__code === 4 && !this.color,
+        variant__orange: variant__code === 0 && !this.bgColor,
+        variant__pink: variant__code === 1 && !this.bgColor,
+        variant__blue: variant__code === 2 && !this.bgColor,
+        variant__light_blue: variant__code === 3 && !this.bgColor,
+        variant__green: variant__code === 4 && !this.bgColor,
       })}
-      style="background-color: ${this.color}; border-color: ${this
-        .borderColor}; color:${this.textColor}"
+      style="background-color: ${this.bgColor};color:${this
+        .textColor};border-color:${this.borderColor}"
     >
       ${defaultInitials
         ? defaultInitials
@@ -143,7 +146,6 @@ export class NileAvatar extends NileElement {
 
   /* #endregion */
 }
-// onerror="this.onerror=null;this.src='${defaultimg}';"
 
 export default NileAvatar;
 

package/src/nile-card/nile-card.css.ts

@@ -26,11 +26,10 @@ export const styles = css`
   }
 
   :host {
-    --border-color: var(--nile-card-color-border); /* for v2 */
+    --border-color: var(--nile-card-color-border);
     --border-radius: 8px;
     --border-width: 1px;
     --padding: 18px;
-    --footer-padding: var(--nile-card-footer-padding); /*for v2 */
     display: inline-block;
   }
 
@@ -41,26 +40,16 @@ export const styles = css`
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
     box-shadow: var(--nile-card-box-shadow) rgba(16, 24, 40, 0.05);
+    padding: var(--nile-type-scale-4);
   }
 
   .card__body {
     display: block;
-    padding: var(--padding);
-  }
-
-  .card--has-footer {
-    border-radius: var(--border-radius) var(--border-radius) 0 0;
-    border-bottom: none;
   }
 
   .card__footer {
     display: block;
-    border-top: solid var(--border-width) var(--border-color);
-    padding: var(--footer-padding);
-    border:1px solid var(--nile-card-footer-border-color);
-    border-width: var(--nile-card-footer-border-width);
-    border-radius:var(--nile-card-footer-border-radius);
-    background-color:var(--nile-card-footer-background-color);
+    margin-top: var(--nile-type-scale-4);
   }
 
   .card:not(.card--has-footer) .card__footer {

package/src/nile-card/nile-card.ts

@@ -37,8 +37,9 @@ export class NileCard extends NileElements {
         })}
       >
         <slot part="body" class="card__body"></slot>
+        <slot name="footer" part="footer" ?hidden="${!this.hasSlotController.test('footer')}"  class="card__footer"></slot>
       </div>
-      <slot name="footer" part="footer" ?hidden="${!this.hasSlotController.test('footer')}"  class="card__footer"></slot>
+      
     `;
   }
 }

package/src/nile-table-body/nile-table-body.css.ts

@@ -13,20 +13,15 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    --nile-table-background--odd: var(
-      --nile-table-body-row-odd-background-color
-    );
-    --nile-table-background--even: var(
-      --nile-table-body-row-even-background-color
-    );
+    --nile-table-background--odd: var(--nile-colors-base-white);
+    --nile-table-background--even: var(--nile-colors-base-white);
   }
 
   .base {
     background-color: var(--nile-colors-white-base);
     border: 1px solid var(--nile-table-row-border-color);
     border-radius: var(--nile-radius-radius-xl);
-    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
-      0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),0px 1px 2px 0px rgba(16, 24, 40, 0.06);
     overflow: hidden;
   }
 
@@ -38,11 +33,11 @@ export const styles = css`
   .nile__table__body {
     display: table;
     border-collapse: collapse;
-    width:100%;
+    width: 100%;
   }
 
   slot::slotted(nile-table-row:nth-child(odd)) {
-    border-bottom: 1px solid #e4e2e4;
+    border-bottom: 1px solid #eaecf0;
     background: var(--nile-table-background--odd);
   }
 

package/src/nile-table-cell-item/nile-table-cell-item.css.ts

@@ -11,30 +11,25 @@ import { css } from 'lit-element';
  * TableCellItem CSS
  */
 export const styles = css`
-
   :host {
     box-sizing: border-box;
     display: table-cell;
+    vertical-align: middle;
     --min--height: 52px;
-    --max--cell-width:auto;
+    --max--cell-width: auto;
     max-width: var(--max--cell-width);
-    overflow: hidden;
+    padding: 16px 24px;
+    min-height: var(--min--height);
   }
 
   .column {
-    display: flex;
-    flex-direction: row;
-    padding: 0 var(--nile-type-scale-4);
-    align-items: center;
-    min-height: var(--min--height);
-    height: auto;
-    width: auto;
-    color: var(--nile-colors-dark-900);
-    font-feature-settings: 'clig' off, 'liga' off;
+    height: 100%;
+    color: var(--nile-colors-gray-light-mode-600);
+    font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-3);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-3); /* 100% */
+    line-height: var(--nile-type-scale-6);
     letter-spacing: 0.2px;
   }
 `;

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -14,24 +14,23 @@ export const styles = css`
   :host {
     display: table-cell;
     box-sizing: border-box;
-    --min-height: 52px;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
+    min-height: 44px;
   }
 
   .headers {
     display: flex;
-    padding: 0 var(--nile-type-scale-4);
     align-items: center;
     height: auto;
-    min-height: var(--min-height);
     width: 100%;
     gap: 8px;
     color: var(--nile-colors-dark-900);
+    font-family: var(--nile-font-family-serif);
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-3);
+    font-size: var(--nile-type-scale-2);
+    font-weight: 500;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-3);
-    letter-spacing: 0.2px;
+    line-height: var(--nile-type-scale-5);
   }
 
   slot {
@@ -45,7 +44,7 @@ export const styles = css`
   .sorting__icons {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     align-items: centre;
   }
 

package/src/nile-table-row/nile-table-row.css.ts

@@ -13,14 +13,20 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
     display: table-row;
-    width:100%;
-    --nile-header-background:var(--nile-table-header-background-color);
+    width: 100%;
+    height: 100%;
+    height: max-content;
+    --nile-header-background: var(--nile-table-header-background-color);
     border-bottom: 1px solid var(--nile-table-row-border-color);
   }
 
   slot::slotted(nile-table-header-item) {
     background-color: var(--nile-header-background);
   }
+
+  nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
+    color: red;
+  }
 `;
 
 export default [styles];