@aquera/nile-elements 0.1.39-beta-1.2 → 0.1.40-beta-1.1

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

@@ -40,7 +40,7 @@ export const styles = css`
     gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
-  
+
   .form__divider {
     width: 100%;
   }
@@ -57,7 +57,7 @@ export const styles = css`
     flex-direction: column;
     align-items: flex-start;
     gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));
-    justify-content:centre;
+    justify-content:center;
   }
 
   .form__title {

package/src/nile-heading/index.ts

@@ -14,12 +14,11 @@ export class NileHeading extends LitElement {
     :host {
       display: block;
       border: solid 1px gray;
-      padding: 16px;
+      padding: 16px 16px var(--nile-spacing-1-x) 16px;
       font-size: var(--nile-type-scale-5);
-      padding-bottom: var(--nile-spacing-1-x);   
       -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));   
+      -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));
     }
 
     :host([size='header-1']) {

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

@@ -15,7 +15,7 @@ export const styles = css`
     display: block;
     --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);
     --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);
-    --ng-nxt-gent-outline-transparent: var(--ng-border-width-1) solid transparent;
+    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;
     --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);
     -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));
@@ -89,11 +89,11 @@ export const styles = css`
   /* Error message */
   .form-control__error-message {
     display: block;
-    color: var(--nile-colors-red-700, var(--ng-primitives-colors-error-600));
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
     margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));
     font-size: var(--nile-type-scale-2);
     font-style: normal;
-    line-height: var( --nile-form-error-text-line-height,  var(--ng-nile-line-height-small));
+    line-height: var( --nile-form-error-text-line-height,  var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }
 
@@ -133,8 +133,8 @@ export const styles = css`
   .input--standard {
     background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));
     border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));
-    box-shadow: var(--nile-input-shadow-standard, var(--ng-box-shadow-1));
-    outline:var(--nile-outline-none, var(--ng-nxt-gent-outline-transparent))
+    box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));
+    outline:var(--nile-outline-none, var(--ng-private-outline-transparent));
   }
 
   .input--standard:hover:not(.input--disabled):not(.input--error) {
@@ -147,6 +147,10 @@ export const styles = css`
     outline: var(--nile-outline-none, var(--ng-outline-none));
   }
 
+  :host([no-padding]) .input--medium .input__control {
+    padding: 0px !important;
+  }
+
   .input--standard.input--focused:not(.input--disabled) {
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));
@@ -184,7 +188,7 @@ export const styles = css`
 
   .input--standard.input--error:hover:not(.input--disabled) {
     border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
-    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline-error));
+    outline: var(--nile-outline-none, var(--ng-colors-border-error));
   }
 
   .input--standard.input--success {
@@ -327,7 +331,7 @@ export const styles = css`
   .input--standard:focus {
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     border: 1px solid var(--nile-colors-primary-500);
-    box-shadow: var(---nile-box-shadow-1, var(--ng-box-shadow-1));
+    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));
   }
 
   /*
@@ -342,7 +346,7 @@ export const styles = css`
 
   .input--small .input__control {
     height: calc(1.875rem);
-    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg)); 
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   .input--small .input__clear {

package/src/nile-input/nile-input.ts

@@ -229,6 +229,8 @@ export class NileInput extends NileElement implements NileFormControl {
 
   @property() noOutline: any = false;
 
+  @property() noPadding: any = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');

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

@@ -14,8 +14,8 @@ export const styles = css`
   :host {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-md, var(--ng-spacing-2));
-    padding: var(--nile-spacing-xl, var(--ng-spacing-4));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
     -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-list-item/nile-list-item.css.ts

@@ -14,8 +14,8 @@ export const styles = css`
   :host {
     display: flex;
     padding: 
-      var(--nile-spacing-lg, var(--ng-spacing-3)) 
-      var(--nile-spacing-xl, var(--ng-spacing-4));
+      var(--nile-spacing-lg, var(--ng-spacing-lg)) 
+      var(--nile-spacing-xl, var(--ng-spacing-xl));
     flex-direction: row;
     align-items: flex-start;
     justify-content: start;
@@ -27,12 +27,12 @@ export const styles = css`
   }
 
   :host(:hover) {
-    background-color: var(--nile-colors-neutral-400, var(--ng-color-grayneutral-400)); /* Change background color on hover */
+    background-color: var(--nile-colors-neutral-400, var( --ng-colors-bg-brand-primary)); /* Change background color on hover */
   }
 
   .preffix__icon {
     display: inline-block;
-    margin-right: var(--nile-spacing-lg, var(--ng-spacing-3));
+    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   .list__item {
@@ -45,7 +45,7 @@ export const styles = css`
   .content__wrapper {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xs, var(--ng-spacing-1));
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
     height: 100%;
     box-sizing: border-box;
   }

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

@@ -45,16 +45,16 @@ export const styles = css`
   }
 
   ::slotted(nile-divider) {
-    --spacing: var(--nile-spacing-md);
+    --spacing: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .menu__footer {
     display: var(--nile-display-flex, var(--ng-display-none)); 
     /* No need to tokenize below - token not required*/
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
     align-items: stretch;
-    font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     line-height: 180%;
     letter-spacing: normal;
     color: var(--nile-colors-primary-600,var(--ng-colors-text-brand-secondary-700));
@@ -64,11 +64,11 @@ export const styles = css`
     white-space: nowrap;
     cursor: pointer;
     padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);
-    margin: auto var(--nile-spacing-none);
+    margin: auto var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   .menu__footer:hover {
-    background-color:var(--nile-menu-item-background-color);
+    background-color:var(--nile-menu-item-background-color, var(--ng-colors-bg-secondary));
   }
 `;
 

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

@@ -36,7 +36,7 @@ export const styles = css`
     transition: 150ms fill;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     cursor: pointer;
-    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-0-5) )
+    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )
   }
 
   .option--single-select {

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

@@ -12,7 +12,7 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    box-sizing: 'border-box';
+    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));
@@ -26,7 +26,7 @@ export const styles = css`
     font-style: normal;
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
-    letter-spacing: vat(--nile-spacing-one-by-five-x, var(--ng-spacing-none));
+    letter-spacing: var(--nile-spacing-one-by-five-x, var(--ng-spacing-none));
   }
 
   .popover__box {
@@ -34,8 +34,8 @@ export const styles = css`
     flex-direction: column;
     height: auto;
     min-width: var(--nile-width-352px, var(--ng-width-80));
-    gap: var(--nile-spacing-xl, var(--ng-spacing-4));
-    padding: var(--nile-spacing-xl, var(--ng-spacing-4));
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));

package/src/nile-progress-bar/nile-progress-bar.css.ts

@@ -21,7 +21,6 @@ export default css`
     display: flex;
     height: var(--nile-height-6px, var(--ng-height-8px));
     justify-content: space-between;
-    display: inline-block;
   }
 
   .nile-progress-bar__progress-bar li {

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

@@ -24,7 +24,6 @@ export const styles = css`
 
   .radio {
     display: inline-flex;
-    align-items: top;
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
@@ -76,7 +75,7 @@ export const styles = css`
   /* Hover */
   .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
     border: 1px solid var(--nile-radio-hover-border-color, var(--ng-colors-border-disabled-subtle));
-    background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-white));
+    background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-primary));
   }
 
   /* Checked */
@@ -89,7 +88,7 @@ export const styles = css`
   /* Checked + hover */
   .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
     border: 1px solid var(--nile-radio-checked-hover-border-color, var(--ng-colors-border-brand-alt));
-    background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid)); 
+    background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid));
   }
 
   /* Checked + hover */
@@ -140,6 +139,6 @@ export const styles = css`
   .radio__label_border {
     padding: var(--nile-spacing-lg, var(--ng-spacing-xl));
     border-radius: var(--nile-radius-sm, var(--ng-radius-xl));
-    border: 1px solid var(--Neutral-Normal, var(--nile-colors-neutral-400, var(--ng-colors-border-secondary)));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 `;

package/src/nile-section-message/nile-section-message.css.ts

@@ -16,7 +16,7 @@ export const styles = css`
     width: 100%;
     box-sizing: border-box;
     --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));
-    min-width: var(--nile-width-width-xxs, var(--ng-spacing-80));
+    min-width: var(--nile-width-width-xxs, var(--ng-width-80));
     -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));
@@ -40,15 +40,15 @@ export const styles = css`
   }
 
   .section--success {
-    background-color: var(--nile-section-message-background-color-success);
+    background-color: var(--nile-section-message-background-color-success, var(--ng-colors-bg-primary-alt));
   }
 
   .section--warning {
-    background-color: var(--nile-section-message-background-color-warning);
+    background-color: var(--nile-section-message-background-color-warning, var(--ng-colors-bg-primary-alt));
   }
 
   .section--error {
-    background-color: var(--nile-section-message-background-color-error);
+    background-color: var(--nile-section-message-background-color-error, var(--ng-colors-bg-primary-alt));
   }
 
   .left__wrapper {

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

@@ -15,8 +15,8 @@ export const styles = css`
     box-sizing: border-box;
     --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);
     --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);
-    --ng-nxt-gen-outline-transparent: var(--ng-border-width-1) solid transparent;
-    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadows-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadows-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadows-shadow-lg-03, rgba(10, 13, 18, 0.04));
+    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;
+    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));
     -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));
@@ -214,7 +214,7 @@ export const styles = css`
   .select--standard .select__combobox {
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
-    outline: var(--nile-outline-none, --ng-nxt-gen-outline-transparent);
+    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
   }
 
   .select--standard .select__combobox:hover {
@@ -225,13 +225,13 @@ export const styles = css`
 
   .select--error:hover:not(.select--disabled)  .select__combobox{
     border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
-    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline-error));
+    outline: var(--nile-outline-none, var(--ng-colors-border-error));
   }
 
   .select--standard.select--disabled .select__combobox {
     background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));
     border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-primary) );
-    color: var(--nile-colors-dark-500j, var(--ng-colors-text-disabled));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
     opacity: var(--nile-opacity-50, var(--ng-opacity-100));
     cursor: not-allowed;
     outline: none;
@@ -248,7 +248,7 @@ export const styles = css`
 
   .select--error .select__combobox {
     border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
-    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline-transparent));
+    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
   }
 
 
@@ -299,13 +299,12 @@ export const styles = css`
   }
 
   .select--medium .select__prefix.multiple::slotted(*) {
-    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
     margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));
   }
 
   .select--medium.select--multiple:not(.select--placeholder-visible)
     .select__combobox {
-    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-0));
+    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   .select--medium .select__tags {
@@ -384,7 +383,7 @@ export const styles = css`
     /* Make sure it adheres to the popup's auto size */
     max-width: var(--nile-width-auto, var(--ng-width-auto));
     max-height: var(--nile-height-247px, var(--ng-spacing-64));
-    box-shadow: var(--nile-box-shadow-none, var(--ng-box-shadow)) ;
+    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));
   }
 
   .select__options__search-enabled {

package/src/nile-sidebar/index.ts

@@ -28,7 +28,7 @@ export class NileSidebar extends LitElement {
   static override styles = css`
     :host {
       background-color: var(--nile-alert-color-background-base);
-      border-right: 1px solid var(--nile-colors-neutral-400);      
+      border-right: 1px solid var(--nile-colors-neutral-400);
       min-height: 100vh;
       background: var(--nile-colors-neutral-100);
       border: 1px solid var(--nile-colors-neutral-400);
@@ -63,10 +63,10 @@ export class NileSidebar extends LitElement {
     }
 
     .nile-menu__hr {
-      border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+      border-bottom: solid 1px var(--nile-colors-dark-100);
       margin-top: var(--nile-spacing-lg) !important;
       margin-bottom: var(--nile-spacing-lg) !important;
-      background-color: rrgba(0, 0, 0, 0.1);
+      background-color: var(--nile-colors-dark-100);
     }
 
     .nds-menu--bottom {
@@ -98,7 +98,7 @@ export class NileSidebar extends LitElement {
   }
 
   // class="nds-menu ${classMap(this.buttonClassMap)}"
-  
+
   override render() {
     return html`
       <div class="nile-menu--wrapper  ${classMap(this.buttonClassMap)}" >
@@ -111,7 +111,7 @@ export class NileSidebar extends LitElement {
               height="31.06px"
               tabindex="1"
             />
-          </a>          
+          </a>
           <div class="menu-group">
             <slot name="menu"></slot>
           </div>

package/src/nile-slide-toggle/nile-slide-toggle.css.ts

@@ -31,17 +31,17 @@ export default css`
   }
 
   .nile-slide-toggle__switch--left{
-    margin-right: var(--nile-spacing-md, var(--ng-spacing-2));
+    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .nile-slide-toggle__switch--right{
-    margin-left: var(--nile-spacing-md, var(--ng-spacing-2));
+    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xxs, var(--ng-spacing-0-5));
+    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     letter-spacing: 0.2px;
     font-style: normal;
@@ -85,11 +85,11 @@ export default css`
   }
 
   .nile-slide-toggle__slider:active {
-    box-shadow: var(--nile-box-shadow-4, 0px 0px 0px 2px var(--ng-colors-bg-primary, var(--ng-colors-bg-primary)), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring, var(--ng-colors-effects-focus-ring)));
+    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
   }
 
   .nile-slide-toggle__slider:focus {
-    box-shadow: var(--nile-box-shadow-4, 0px 0px 0px 2px var(--ng-colors-bg-primary, var(--ng-colors-bg-primary)), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring, var(--ng-colors-effects-focus-ring)));
+    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
   }
 
   .nile-slide-toggle__slider:before {
@@ -112,7 +112,7 @@ export default css`
   .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
     --focus-shadow-glow: 0 0 1px var(--nile-slide-toggle-color-background-active);
     --focus-shadow-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary-alt), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
-    box-shadow: var(--focus-shadow-glow, var(--focus-shadow-ring));
+    box-shadow: var(--focus-shadow-glow, var(--ng-focus-ring));
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {
@@ -128,7 +128,7 @@ export default css`
   }
 
   .nile-slide--disabled .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-tertiary));
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
   }
 
   .nile-slide--disabled .nile-slide-toggle__switch {
@@ -140,6 +140,6 @@ export default css`
     .nile-slide-toggle__switch
     input:checked
     + .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-tertiary));
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
   }
 `;

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

@@ -45,8 +45,8 @@ export const styles = css`
     position: relative;
     align-items: center;
     justify-content: center;
-    background-color: var(--nile-colors-neutral-100 var(--ng-componentcolors-utility-gray-50));
-    color: var(--nile-colors-dark-900,var(--ng-color-graytrue-900));
+    background-color: var(--nile-colors-neutral-400 , var(--ng-colors-bg-quaternary));
+    color: var(--nile-colors-dark-900,var(--ng-colors-text-primary-900));
     z-index: 1;
   }
 
@@ -55,8 +55,8 @@ export const styles = css`
   }
 
   :host(:not([disabled])) .divider:focus-visible {
-    background-color: var(--nile-colors-blue-500, var(--ng-color-blue-500));
-    color: var(--nile-colors-white-base, var(--ng-color-base-white));
+    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));
+    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
 
   :host([disabled]) .divider {

package/src/nile-stepper-item/nile-stepper-item.css.ts

@@ -38,8 +38,8 @@ export const styles = css`
 
 	.stepper__item--lg {
 		--item-spacing: var( --nile-spacing-md, var(--ng-spacing-lg));
-		--stepper-item-title-size: var( --nile-type-scale-3, var(--ng-font-size-text-md) );
-		--stepper-item-subtitle-size: var( --nile-type-scale-2, var(--ng-font-size-text-md) );
+		--stepper-item-title-size: var( --nile-type-scale-3, var(--ng-font-size-text-sm) );
+		--stepper-item-subtitle-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );
 		--stepper-item-text-line-height: var( --nile-line-height-small, var(--ng-line-height-text-md) );
 		--circle-height:22px;
 	}

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

@@ -18,7 +18,7 @@ export const styles = css`
   :host {
     display: inline-block;
     --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));
-    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-xs, var(--ng-spacing-1)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-xs, var(--ng-spacing-1));
+    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-xs, var(--ng-spacing-xs));
     --tab-hover-background-color:transparent;
     --tab-active-background-color: transparent;
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
@@ -48,7 +48,7 @@ export const styles = css`
     font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
-    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
     height: 36px;
     box-sizing: border-box;
   }
@@ -72,7 +72,7 @@ export const styles = css`
   }
 
   .tab.tab--closable {
-    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-1));
+    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
   .tab.tab--disabled {
@@ -82,11 +82,11 @@ export const styles = css`
 
   .tab__close-button {
     font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
-    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-1));
+    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
   .tab__close-button::part(base) {
-    padding: var(--nile-spacing-xs, var(--ng-spacing-1));
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
   @media (forced-colors: active) {

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

@@ -19,7 +19,7 @@ export const styles = css`
     --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-3));
+    --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));
@@ -40,7 +40,7 @@ export const styles = css`
 
   .hide__track {
     --track-width: 0px;
-    --tab-gap: var(--nile-spacing-xs, var(--ng-spacing-1));
+    --tab-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
   .tab-group__indicator {
@@ -59,7 +59,7 @@ export const styles = css`
 
   .tab-group--has-scroll-controls .tab-group__nav-container {
     position: relative;
-    padding: var(--nile-spacing-none) var(--ng-spacing-3);
+    padding: var(--nile-spacing-none) var(--ng-spacing-lg);
   }
 
   .tab-group__body {
@@ -138,7 +138,7 @@ export const styles = css`
   }
 
   .tab-group--top ::slotted(nile-tab-panel) {
-    --padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-none, var(--ng-spacing-none));
+    --padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   /*
@@ -221,7 +221,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-3));
+    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   /*
@@ -258,13 +258,13 @@ 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-3));
+    --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: 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-3));
-    --tab-hover-background-color: var(--nile-colors-neutral-100, var(--ng-colors-background-bg-secondary));
+    --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));
   }
 `;

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

@@ -20,7 +20,7 @@ export const styles = css`
     -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);
@@ -56,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

@@ -26,9 +26,7 @@ export const styles = css`
     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: var(--nile-colors-red-500);
-  }
+  
 `;
 
 export default [styles];