@aquera/nile-elements 0.1.40-beta-2.2 → 0.1.40-beta-2.3

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

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

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

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

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

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

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

@@ -20,22 +20,19 @@ export const styles = css`
     display: table-cell;
     vertical-align: middle;
     max-width: var(--max--cell-width);
-    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-3xl , var(--ng-spacing-3xl));
+    padding: 16px 24px;
     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 , 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));
+    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 , var(--ng-font-weight-regular));
+    font-weight: var(--nile-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,18 +16,15 @@ 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-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
     min-height: 44px;
     height: 44px;
   }
@@ -38,12 +35,12 @@ export const styles = css`
     align-items: center;
     height: auto;
     width: 100%;
-    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));
+    gap: 8px;
+    color: var(--nile-colors-gray-light-mode-600);
+    font-family: var(--nile-font-family-serif);
     font-feature-settings: 'clig' off, 'liga' off;
-    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-size: var(--nile-type-scale-2);
+    font-weight: 500;
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
@@ -56,7 +53,7 @@ export const styles = css`
   .sorting__icons {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: centre;
   }
 
   .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;
-    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));
+    --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-table-header-background-color , var(--ng-colors-bg-secondary));
+    background-color: var(--nile-header-background);
   }
 
-  
+  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,9 +13,6 @@ 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 {
@@ -25,31 +22,23 @@ export const styles = css`
     line-height: 1;
     white-space: nowrap;
     user-select: none;
-    border-radius: var(--nile-radius-sm , var(--ng-radius-sm));
-    gap: var(--nile-spacing-sm , var(--ng-spacing-sm));
-    justify-content: space-between;
+    border-radius: 4px;
+    gap: 6px;
   }
 
   .tag__remove::part(base) {
     color: inherit;
-    padding: var(--nile-spacing-none , var(--ng-spacing-none));
+    padding: 0;
   }
 
   /*
    * 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-10px , var(--ng-spacing-md));
-  }
-
   .tag--primary {
     background: 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));
+    border-color: var(--nile-colors-primary-600);
+    border: 2px solid  var(--nile-colors-primary-600);
     color: var(--nile-colors-white-base);
   }
 
@@ -58,82 +47,90 @@ export const styles = css`
   }
 
   .tag--primary:active > nile-icon-button {
-    color: var(--nile-colors-blue-700);
+    color: hsl(200.4 98% 39.4%);
   }
 
   .tag--success {
     background: var(--nile-colors-green-400);
-    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-green-400);
     color: var(--nile-colors-dark-900);
   }
 
   .tag--success:hover {
-    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-green-500);
   }
 
   .tag--success:active > nile-icon-button {
-    color: var(--nile-colors-green-700);
+    color: hsl(142.1 76.2% 36.3%);
   }
 
   .tag--normal {
-    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));
+    background: var(--nile-colors-neutral-400);
+    border: 2px solid var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-900);
   }
-  
+
   .tag--normal:hover {
-    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-neutral-500);
   }
 
+
   .tag--normal:active > nile-icon-button {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 5.2% 33.9%);
   }
 
   .tag--warning {
     background: var(--nile-colors-yellow-400);
-    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-yellow-400);
     color: var(--nile-colors-dark-900);
   }
 
   .tag--warning:hover {
-    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-yellow-500);
   }
 
   .tag--warning:active > nile-icon-button {
-    color: var(--nile-colors-yellow-500);
+    color: hsl(32.1 94.6% 43.7%);
   }
 
 
   .tag--error {
     background: var(--nile-colors-red-400);
-    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-red-400);
     color: var(--nile-colors-dark-900);
   }
 
   .tag--error:hover {
-    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-red-500);
   }
 
   .tag--error:active > nile-icon-button {
-    color: var(--nile-colors-red-500);
+    color: hsl(0 72.2% 50.6%);
   }
 
   .tag--info {
     background: var(--nile-colors-blue-400);
-    border: 2px solid var(--nile-colors-blue-400, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-blue-400);
     color: var(--nile-colors-dark-900);
   }
 
   .tag--info:hover {
-    border: 2px solid var(--nile-colors-blue-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-blue-500);
   }
 
   .tag--info:active > nile-icon-button {
-    color: var(--nile-colors-red-500);
+    color: hsl(0 72.2% 50.6%);
+  }
+
+
+  .tag--medium {
+    font-size: 14px;
+    height: 26px;
+    padding: 0 0.75rem;
   }
 
   .tag__remove {
-    margin-inline-start: var(--nile-spacing-7px , var(--ng-spacing-md));
+    margin-inline-start: 0.5rem;
   }
 
   /*
@@ -141,23 +138,17 @@ export const styles = css`
    */
 
   .tag--pill {
-    border-radius: var(--nile-radius-full , var(--ng-spacing-8xl));
+    border-radius: 9999px;
   }
 
   .tag__prefix {
-  padding: var(--nile-spacing-xs , var(--ng-spacing-xs)) var(--nile-spacing-sm , var(--ng-spacing-sm));
+  padding: 3px 6px;
 }
 
  .tag__content {
-  font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+  font-size: 14px;
 }
 
-  .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,34 +65,27 @@ export class NileTag extends NileElement {
   private handleRemoveClick() {
     this.emit('nile-remove');
   }
-  
+
   getCloseButtonColor() {
-    let primaryColor;
     switch (this.variant) {
       case 'primary':
-        primaryColor = '--nile-colors-blue-500';
-        break;
+        return  '--nile-colors-blue-500'; 
       case 'success':
-        primaryColor = '--nile-colors-green-500';
-        break;
+        return '--nile-colors-green-500'; 
       case 'normal':
-        primaryColor = '--nile-colors-dark-500';
-        break;
+        return '--nile-colors-dark-500'; 
       case 'warning':
-        primaryColor = '--nile-colors-yellow-500';
-        break;
+        return '--nile-colors-yellow-500';
       case 'error':
-        primaryColor = '--nile-colors-red-500';
-        break;
+        return '--nile-colors-red-500';
       case 'info':
-        primaryColor = '--nile-colors-blue-500';
-        break;
+        return '--nile-colors-blue-500';
       default:
-        primaryColor = '--nile-colors-dark-500';
+        return '--nile-colors-dark-500'; 
     }
-    return `var(${primaryColor}, var(--ng-colors-fg-quaternary-400))`;
   }
   
+
   render() {
     const colorVariable = this.getCloseButtonColor();
     return html`
@@ -120,10 +113,9 @@ export class NileTag extends NileElement {
 
         })}
       >
-        <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>
+        <slot name="prefix" part="prefix" class="tag__prefix"></slot>
+
+        <slot part="content" class="tag__content"></slot>
 
         ${this.removable
           ? html`
@@ -133,10 +125,10 @@ export class NileTag extends NileElement {
                 name="close"
                 library="system"
                 label="remove"
-                class="tag__remove cross_icon"
+                class="tag__remove"
                 @click=${this.handleRemoveClick}
                 tabindex="-1"
-                 color=${this.getCloseButtonColor()}
+                color="var(${colorVariable})"
               ></nile-icon-button>
             `
           : ''}