@aquera/nile-elements 0.1.47-beta-2.1 → 0.1.49-beta-1.0

package/src/nile-tab-group/nile-tab-group.css.ts

@@ -16,17 +16,20 @@ export const styles = css`
   }
 
   :host {
-    --indicator-color: var(--nile-colors-primary-600);
-    --track-color: var(--nile-colors-neutral-400);
-    --track-width: 2px;
-    --tab-gap: 12px;
+    --indicator-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    --track-color: var(--nile-colors-neutral-400, var(--ng-componentcolors-utility-gray-500));
+    --track-width: var(--nile-width-2px, var(--ng-width-0-5));
+    --tab-gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    -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));
 
     display: block;
   }
 
   .tab-group {
     display: flex;
-    border-radius: 0;
+    border-radius: var(--nile-radius-none, var(--ng-radius-none));
   }
 
   .tab-group__tabs {
@@ -37,7 +40,7 @@ export const styles = css`
 
   .hide__track {
     --track-width: 0px;
-    --tab-gap: 3px;
+    --tab-gap: var(--nile-spacing-3px, var(--ng-spacing-xs));
   }
 
   .tab-group__indicator {
@@ -49,14 +52,14 @@ export const styles = css`
     position: absolute;
     height: var(--track-width);
     width: 100%;
-    background: var(--nile-colors-neutral-400);
+    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));
     bottom:0px;
     z-index:0;
   }
 
   .tab-group--has-scroll-controls .tab-group__nav-container {
     position: relative;
-    padding: 0 10px;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-10px, var(--ng-spacing-lg));
   }
 
   .tab-group__body {
@@ -126,7 +129,7 @@ export const styles = css`
 
   .tab-group--top .tab-group__indicator {
     bottom: 0px;
-    border-bottom: 2px solid var(--nile-colors-primary-600);
+    border-bottom: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     z-index:0;
   }
 
@@ -135,7 +138,7 @@ export const styles = css`
   }
 
   .tab-group--top ::slotted(nile-tab-panel) {
-    --padding: 10px 0;
+    --padding: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   /*
@@ -181,7 +184,7 @@ export const styles = css`
   }
 
   .tab-group--bottom ::slotted(nile-tab-panel) {
-    --padding: 10px 0;
+    --padding: var(--nile-spacing-10px, var(--ng-spacing-2-5)) var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   /*
@@ -218,7 +221,7 @@ export const styles = css`
   }
 
   .tab-group--start ::slotted(nile-tab-panel) {
-    --padding: 0 10px;
+    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-10px, var(--ng-spacing-lg));
   }
 
   /*
@@ -255,15 +258,16 @@ export const styles = css`
   }
 
   .tab-group--end ::slotted(nile-tab-panel) {
-    --padding: 0 10px;
+    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   .hide__track slot::slotted(nile-tab) {
-    --tab-border-radius: 4px;
-    --tab-padding:8px 12px;
-    --tab-hover-background-color: var(--nile-colors-neutral-100);
-    --tab-active-background-color: var(--nile-colors-brand-50);
+    --tab-border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    --tab-padding:var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    --tab-hover-background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    --tab-active-background-color: var(--nile-colors-brand-50, var(--ng-colors-bg-brand-primary-alt));
   }
 `;
 
 export default [styles];
+

package/src/nile-tab-panel/nile-tab-panel.css.ts

@@ -16,8 +16,10 @@ export const styles = css`
   }
 
   :host {
-    --padding: 0;
-
+    --padding: var(--nile-spacing-none, var(--ng-spacing-none));
+-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));
     display: none;
   }
 

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

@@ -14,6 +14,9 @@ export const styles = css`
 	:host {
 		display:block;
 		width:100%;
+		-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));
 	}
 `;
 

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

@@ -74,7 +74,7 @@ export class NileTable extends NileElement {
 	handleBodyCssUpdate(){
     if (this.rows.length<2) return;
     const tableBodies = this.rows;
-		const firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base')
+		const firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base');
 		if(firstEl) {
 			firstEl.style.borderTopRightRadius="var(--nile-radius-radius-xl)";
 			firstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';
@@ -84,7 +84,7 @@ export class NileTable extends NileElement {
 		}
 		tableBodies.forEach((tb,i)=>{
 			if(i>0 && i<tableBodies.length-1){
-				const el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base')
+				const el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base');
 				if(el) {
 					el.style.borderTopRightRadius="0px";
 					el.style.borderTopLeftRadius = "0px";

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

@@ -13,16 +13,19 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    --nile-table-background--odd: var(--nile-colors-base-white);
-    --nile-table-background--even: var(--nile-colors-base-white);
+    --nile-table-background--odd: var(--nile-colors-base-white , var(--ng-colors-bg-primary));
+    --nile-table-background--even: var(--nile-colors-base-white , var(--ng-colors-bg-primary));
+    -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));
   }
 
   .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);
+    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
+    border: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-md , var(--ng-radius-xl));
     overflow: hidden;
+    box-shadow: var(--nile-box-shadow-3 , var(--ng-shadow-xs));
   }
 
   .table__header {
@@ -37,7 +40,7 @@ export const styles = css`
   }
 
   slot::slotted(nile-table-row:nth-child(odd)) {
-    border-bottom: 1px solid var(--nile-colors-neutral-400);
+    border-bottom: 1px solid var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));
     background: var(--nile-table-background--odd);
   }
 

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

@@ -20,19 +20,22 @@ export const styles = css`
     display: table-cell;
     vertical-align: middle;
     max-width: var(--max--cell-width);
-    padding: 16px 24px;
+    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-3xl , var(--ng-spacing-3xl));
     min-height: var(--min--height);
+    -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));
   }
 
   .column {
     min-width:var(--min-cell-width);
     width:var(--cell-width);
     height: 100%;
-    color: var(--nile-colors-gray-light-mode-600);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-tertiary-600));
+    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-regular);
+    font-weight: var(--nile-font-weight-regular , var(--ng-font-weight-regular));
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;

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

@@ -16,15 +16,18 @@ export const styles = css`
     --cell-width: auto;
     display: table-cell;
     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));
   }
-  
+
   .header__item__wrapper{
     min-width:var(--cell-min-width);
     width:var(--cell-width);
     display:flex;
     align-items:center;
     box-sizing: border-box;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
+    padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));
     min-height: 44px;
     height: 44px;
   }
@@ -35,12 +38,12 @@ export const styles = css`
     align-items: center;
     height: auto;
     width: 100%;
-    gap: 8px;
-    color: var(--nile-colors-gray-light-mode-600);
-    font-family: var(--nile-font-family-serif);
+    gap: var(--nile-spacing-md , var(--ng-spacing-xs));
+    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));
+    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-2);
-    font-weight: 500;
+    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
@@ -53,7 +56,7 @@ export const styles = css`
   .sorting__icons {
     display: flex;
     flex-direction: column;
-    align-items: centre;
+    align-items: center;
   }
 
   .sorting__icons nile-icon:hover {

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

@@ -16,17 +16,17 @@ export const styles = css`
     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);
+    border-bottom: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));
+    -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));
   }
 
   slot::slotted(nile-table-header-item) {
-    background-color: var(--nile-header-background);
+    background-color: var(--nile-table-header-background-color , var(--ng-colors-bg-secondary));
   }
 
-  nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
-    color: red;
-  }
+  
 `;
 
 export default [styles];

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

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
+    -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));
   }
 
   .tag {
@@ -22,23 +25,30 @@ export const styles = css`
     line-height: 1;
     white-space: nowrap;
     user-select: none;
-    border-radius: 4px;
-    gap: 6px;
+    border-radius: var(--nile-radius-sm , var(--ng-radius-sm));
+    gap: var(--nile-spacing-sm , var(--ng-spacing-sm));
   }
 
   .tag__remove::part(base) {
     color: inherit;
-    padding: 0;
+    padding: var(--nile-spacing-none , var(--ng-spacing-none));
   }
 
   /*
    * Variant modifiers
    */
 
+  .tag--medium {
+    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+    height: var(--nile-height-26px , var(--ng-height-auto));
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
+    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-xsmall , var(--ng-spacing-md));
+  }
+
   .tag--primary {
     background: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    border: 2px solid  var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-primary));
+    border: 2px solid  var(--nile-colors-primary-600, var(--ng-colors-border-primary));
     color: var(--nile-colors-white-base);
   }
 
@@ -47,90 +57,82 @@ export const styles = css`
   }
 
   .tag--primary:active > nile-icon-button {
-    color: hsl(200.4 98% 39.4%);
+    color: var(--nile-colors-blue-700);
   }
 
   .tag--success {
     background: var(--nile-colors-green-400);
-    border: 2px solid var(--nile-colors-green-400);
+    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--success:hover {
-    border: 2px solid var(--nile-colors-green-500);
+    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));
   }
 
   .tag--success:active > nile-icon-button {
-    color: hsl(142.1 76.2% 36.3%);
+    color: var(--nile-colors-green-700);
   }
 
   .tag--normal {
-    background: var(--nile-colors-neutral-400);
-    border: 2px solid var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-neutral-400 , var(--ng-colors-bg-primary));
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
+    color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));
   }
-
+  
   .tag--normal:hover {
-    border: 2px solid var(--nile-colors-neutral-500);
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
   }
 
-
   .tag--normal:active > nile-icon-button {
-    color: hsl(240 5.2% 33.9%);
+    color: var(--nile-colors-neutral-700);
   }
 
   .tag--warning {
     background: var(--nile-colors-yellow-400);
-    border: 2px solid var(--nile-colors-yellow-400);
+    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--warning:hover {
-    border: 2px solid var(--nile-colors-yellow-500);
+    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));
   }
 
   .tag--warning:active > nile-icon-button {
-    color: hsl(32.1 94.6% 43.7%);
+    color: var(--nile-colors-yellow-500);
   }
 
 
   .tag--error {
     background: var(--nile-colors-red-400);
-    border: 2px solid var(--nile-colors-red-400);
+    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--error:hover {
-    border: 2px solid var(--nile-colors-red-500);
+    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));
   }
 
   .tag--error:active > nile-icon-button {
-    color: hsl(0 72.2% 50.6%);
+    color: var(--nile-colors-red-500);
   }
 
   .tag--info {
     background: var(--nile-colors-blue-400);
-    border: 2px solid var(--nile-colors-blue-400);
+    border: 2px solid var(--nile-colors-blue-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--info:hover {
-    border: 2px solid var(--nile-colors-blue-500);
+    border: 2px solid var(--nile-colors-blue-500, var(--ng-colors-border-primary));
   }
 
   .tag--info:active > nile-icon-button {
-    color: hsl(0 72.2% 50.6%);
-  }
-
-
-  .tag--medium {
-    font-size: 14px;
-    height: 26px;
-    padding: 0 0.75rem;
+    color: var(--nile-colors-red-500);
   }
 
   .tag__remove {
-    margin-inline-start: 0.5rem;
+    margin-inline-start: var(--nile-spacing-7px , var(--ng-spacing-md));
   }
 
   /*
@@ -138,17 +140,23 @@ export const styles = css`
    */
 
   .tag--pill {
-    border-radius: 9999px;
+    border-radius: var(--nile-radius-full , var(--ng-spacing-8xl));
   }
 
   .tag__prefix {
-  padding: 3px 6px;
+  padding: var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-sm , var(--ng-spacing-sm));
 }
 
  .tag__content {
-  font-size: 14px;
+  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
 }
 
+  .prefix_content_wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
+  }
 `;
 
 export default [styles];

package/src/nile-tag/nile-tag.ts

@@ -65,27 +65,34 @@ export class NileTag extends NileElement {
   private handleRemoveClick() {
     this.emit('nile-remove');
   }
-
+  
   getCloseButtonColor() {
+    let primaryColor;
     switch (this.variant) {
       case 'primary':
-        return  '--nile-colors-blue-500'; 
+        primaryColor = '--nile-colors-blue-500';
+        break;
       case 'success':
-        return '--nile-colors-green-500'; 
+        primaryColor = '--nile-colors-green-500';
+        break;
       case 'normal':
-        return '--nile-colors-dark-500'; 
+        primaryColor = '--nile-colors-dark-500';
+        break;
       case 'warning':
-        return '--nile-colors-yellow-500';
+        primaryColor = '--nile-colors-yellow-500';
+        break;
       case 'error':
-        return '--nile-colors-red-500';
+        primaryColor = '--nile-colors-red-500';
+        break;
       case 'info':
-        return '--nile-colors-blue-500';
+        primaryColor = '--nile-colors-blue-500';
+        break;
       default:
-        return '--nile-colors-dark-500'; 
+        primaryColor = '--nile-colors-dark-500';
     }
+    return `var(${primaryColor}, var(--ng-colors-fg-quaternary-400))`;
   }
   
-
   render() {
     const colorVariable = this.getCloseButtonColor();
     return html`
@@ -113,9 +120,10 @@ export class NileTag extends NileElement {
 
         })}
       >
-        <slot name="prefix" part="prefix" class="tag__prefix"></slot>
-
-        <slot part="content" class="tag__content"></slot>
+        <div class="prefix_content_wrapper" part="prefix_content_wrapper">
+          <slot name="prefix" part="prefix" class="tag__prefix"></slot>
+          <slot part="content" class="tag__content"></slot>
+        </div>
 
         ${this.removable
           ? html`
@@ -125,10 +133,10 @@ export class NileTag extends NileElement {
                 name="close"
                 library="system"
                 label="remove"
-                class="tag__remove"
+                class="tag__remove cross_icon"
                 @click=${this.handleRemoveClick}
                 tabindex="-1"
-                color="var(${colorVariable})"
+                 color=${this.getCloseButtonColor()}
               ></nile-icon-button>
             `
           : ''}