@aquera/nile-elements 0.1.60-beta-1.0 → 0.1.61-beta-1.0

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-3px, 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-none)) var(--nile-spacing-10px, 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-10px, 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-10px, var(--ng-spacing-2-5)) var(--nile-spacing-none, var(--ng-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-10px, 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

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { tableLayoutStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableBody CSS
@@ -14,19 +13,16 @@ import { tableLayoutStyles } from '../internal/resizable-table-styles';
 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 {
@@ -41,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);
   }
 
@@ -52,8 +48,6 @@ export const styles = css`
   slot::slotted(nile-table-row:last-child) {
     border-bottom: 0px;
   }
-
-  ${tableLayoutStyles}
 `;
 
 export default [styles];

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

@@ -24,7 +24,6 @@ import {
 import { styles } from './nile-table-body.css';
 import NileElement from '../internal/nile-element';
 import { getInnerHTML } from '../slot';
-import { hasResizableColumns } from '../internal/resizable-table-helper';
 
 /**
  * nile-table-body component.
@@ -47,7 +46,6 @@ export class NileTableBody extends NileElement {
   @state() private header_rows_data: any[] = [];
   @state() private sort__index: number;
   @state() private search__index: number;
-  @state() private hasResizableColumns = false;
 
   public static get styles(): CSSResultArray {
     return [styles];
@@ -69,10 +67,6 @@ export class NileTableBody extends NileElement {
     return this.header_rows_data.indexOf(index__value);
   }
 
-  private checkForResizableColumns() {
-    this.hasResizableColumns = hasResizableColumns(this);
-  }
-
   handleSlotchange(e: any) {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
@@ -94,8 +88,6 @@ export class NileTableBody extends NileElement {
         row_data = [];
       }
     });
-    
-    this.checkForResizableColumns();
   }
 
   private handleSort(e: any) {
@@ -123,7 +115,6 @@ export class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
-          ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>
       </div>

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

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableCellItem CSS
@@ -20,35 +19,24 @@ export const styles = css`
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
-    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-3xl , var(--ng-spacing-3xl));
     max-width: var(--max--cell-width);
+    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;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
   }
-
-  ${resizableHostStyles}
-  ${resizerStyles}
-  ${resizableSlotStyles}
 `;
 
 export default [styles];

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

@@ -15,7 +15,6 @@ import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-table-cell-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
-import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile table Cell Item component.
@@ -34,36 +33,20 @@ export class NileTableCellItem extends NileElement {
     return [styles];
   }
 
-  /** Enables the resize functionality. */
-  @property({ type: Boolean, reflect: true }) resizable = false;
-
   /* #endregion */
 
   /* #region Methods */
 
-  private handleResizeStart = createResizeHandler(this, 50);
-
   /**
    * Render method
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    if (this.resizable) {
-      return html`
-        <div class="cell__wrapper" part="nile__table-cell">
-          ${this.hasSlotController.test('[default]')
-            ? html` <div class="column" part="nile__table-cell"><slot></slot></div>`
-            : ''}
-          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
-        </div>
-      `;
-    } else {
-      return html`
-        ${this.hasSlotController.test('[default]')
-          ? html` <slot class="column" part="nile__table-cell"> </slot>`
-          : ''}
-      `;
-    }
+    return html`
+      ${this.hasSlotController.test('[default]')
+        ? html` <slot class="column" part="nile__table-cell"> </slot>`
+        : ''}
+    `;
   }
 
   /* #endregion */

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

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableHeaderItem CSS
@@ -17,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;
   }
@@ -39,17 +35,15 @@ 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-semibold));
+    font-size: var(--nile-type-scale-2);
+    font-weight: 500;
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   nile-icon {
@@ -59,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 {
@@ -73,9 +67,6 @@ export const styles = css`
   .headers:hover .hover__arrow {
     opacity: 0.3;
   }
-
-  ${resizableHeaderStyles}
-  ${headerResizerStyles}
 `;
 
 export default [styles];

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

@@ -15,7 +15,6 @@ import { customElement, state, property } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
-import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile icon component.
@@ -44,9 +43,6 @@ export class NileTableHeaderItem extends NileElement {
   @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
     '';
 
-  /** Enables the resize functionality. */
-  @property({ type: Boolean, reflect: true }) resizable = false;
-
   @state() sorting_ct = 0;
 
   /* #endregion */
@@ -70,10 +66,9 @@ export class NileTableHeaderItem extends NileElement {
     this.emit('nile-search', { value: e.detail.value });
   }
 
-  private handleResizeStart = createResizeHandler(this, 50);
-
   public render(): TemplateResult {
-    return html`
+    return html` ${this.hasSlotController.test('[default]')
+      ? html`
       <div class="header__item__wrapper" part="nile__table-header-cell">
         <div class="headers">
           <slot> </slot>
@@ -114,11 +109,10 @@ export class NileTableHeaderItem extends NileElement {
               </nile-popover>`
             : html``}
         </div>
-        ${this.resizable 
-          ? html`<div class="resizer" @mousedown=${this.handleResizeStart}></div>`
-          : null}
-      </div>`;
+      </div>`
+      : null}`;
   }
+  /* #endregion */
 }
 
 export default NileTableHeaderItem;

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,30 +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));
+    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-xsmall , 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);
   }
 
@@ -57,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;
   }
 
   /*
@@ -140,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-3px, 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];