@aquera/nile-elements 0.1.46-beta-2.4 → 0.1.46-beta-2.5

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

@@ -5,9 +5,6 @@ export default css`
     --slide-toggle-width:auto;
     display:inline-block;
     width:var(--slide-toggle-width);
-    -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-slide-toggle {
@@ -27,43 +24,43 @@ export default css`
     display: inline-block;
     width: 36px;
     height: 20px;
-    line-height: var(--nile-height-22px, var(--ng-height-20px));
+    line-height: 22px;
   }
 
   .nile-slide-toggle__switch--left{
-    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-right: 8px;
   }
 
   .nile-slide-toggle__switch--right{
-    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-left: 8px;
   }
 
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    gap: 2px;
+    font-family: var(--nile-font-family-serif);
     letter-spacing: 0.2px;
     font-style: normal;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
-    line-height: var(--nile-spacing-spacing-2xl, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-dark-900);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
   }
 
   .nile-slide-toggle__sublabel {
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-family: var(--nile-font-family-serif);
     letter-spacing: 0.2px;
     font-style: normal;
-    color: var(--nile-colors-gray-light-mode-600, var(--ng-colors-text-tertiary-600));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
-    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-gray-light-mode-600);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
   }
 
   .nile-slide--disabled .nile-slide-toggle__label,
   .nile-slide--disabled .nile-slide-toggle__sublabel{
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    color: var(--nile-colors-dark-500);
   }
 
   .nile-slide-toggle__switch input {
@@ -79,17 +76,17 @@ export default css`
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-tertiary));
+    background-color: var(--nile-slide-toggle-color-background-inactive);
     transition: 0.4s;
-    border-radius: var(--nile-radius-3xl, var(--ng-radius-full));
+    border-radius: 34px;
   }
 
   .nile-slide-toggle__slider:active {
-    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
   }
 
   .nile-slide-toggle__slider:focus {
-    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
   }
 
   .nile-slide-toggle__slider:before {
@@ -99,20 +96,17 @@ export default css`
     width: 16px;
     bottom: 2px;
     left: 2px;
-    background-color: var(--nile-slide-toggle-color-indicator, var(--ng-colors-bg-primary-alt));
+    background-color: var(--nile-slide-toggle-color-indicator);
     transition: 0.4s;
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
-    box-shadow: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);
+    border-radius: 50%;
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {
-    background-color: var(--nile-slide-toggle-color-background-active, var(--ng-colors-bg-brand-solid));
+    background-color: var(--nile-slide-toggle-color-background-active);
   }
 
   .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(--ng-focus-ring));
+    box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {
@@ -120,15 +114,15 @@ export default css`
   }
 
   .nile-slide-toggle__slider.round {
-    border-radius: var(--nile-radius-xl, var(--ng-radius-full));
+    border-radius: 20px;
   }
 
   .nile-slide-toggle__slider.round:before {
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    border-radius: 50%;
   }
 
   .nile-slide--disabled .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-dark-200);
   }
 
   .nile-slide--disabled .nile-slide-toggle__switch {
@@ -140,6 +134,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-disabled));
+    background-color: var(--nile-colors-dark-200);
   }
 `;

package/src/nile-slider/index.ts

@@ -0,0 +1 @@
+export { NileSlider } from './nile-slider';

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

@@ -0,0 +1,112 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * Slider CSS
+ */
+export const styles = css`
+  :host {
+    display: block;
+  }
+
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    height: 100px;
+  }
+
+  .align-item-center {
+    align-items: center;
+  }
+
+  slot.span {
+    font-size: var(--nile-font-size-micro);
+    margin-top: 14px;
+  }
+
+  .range-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-sm);
+  }
+
+  .column-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .label-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .label-container span {
+    margin: var(--nile-spacing-none);
+    padding: var(--nile-spacing-none);
+    font-size: var(--nile-font-size-micro);
+  }
+
+  .range {
+    position: relative;
+    width: 228px;
+    height: 4px;
+    background-color: var(--nile-colors-white-base);
+	  border-radius: var(--nile-radius-radius-3xl);
+  }
+
+  .range-completed {
+    position: absolute;
+    height: 100%;
+    width: 0%;
+    background-color: var(--nile-colors-primary-600);
+    top: 0px;
+    left: 0px;
+    z-index: 98;
+    border-radius: var(--nile-radius-radius-3xl);
+  }
+
+  .range-button {
+    height: 12px;
+    width: 12px;
+    background-color: var(--nile-colors-primary-600);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: var(--nile-radius-radius-3xl);
+    left: 0;
+    z-index: 100;
+    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
+  }
+
+  .range-button:hover, .range-button-two:hover {
+    cursor: grab;
+    background-color: var(--nile-colors-primary-700);
+  }
+
+  .range-button:active, .range-button-two:active {
+    cursor: grabbing;
+    background-color: var(--nile-colors-primary-700);
+  }
+
+  .range-button-two {
+    height: 12px;
+    width: 12px;
+    background-color: var(--nile-colors-primary-600);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: var(--nile-radius-radius-3xl);
+    left: 100%;
+    z-index: 100;
+    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
+  }
+`;
+
+export default [styles];

package/src/nile-slider/nile-slider.template.ts

@@ -0,0 +1,47 @@
+import { TemplateResult, html } from 'lit';
+import NileSlider from './nile-slider';
+
+export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div>
+      <nile-tooltip
+        content=${nileSlider.rangeOneValue}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div id="range-one" class="range-button" part="range-button"></div>
+      </nile-tooltip>
+      <nile-tooltip
+        content=${nileSlider.rangeTwoValue}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div
+          id="range-two"
+          class="range-button-two"
+          part="range-button-two"
+        ></div>
+      </nile-tooltip>
+    </div>
+  `;
+};
+
+export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div>
+      <nile-tooltip
+        content=${nileSlider.value}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div class="range-button" part="range-button"></div>
+      </nile-tooltip>
+    </div>
+  `;
+};
+
+export const lableContaier = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div part="label-container" class="label-container">
+      <span>${nileSlider.labelStart}</span>
+      <span>${nileSlider.labelEnd}</span>
+    </div>
+  `;
+}

package/src/nile-slider/nile-slider.ts

@@ -0,0 +1,177 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { styles } from './nile-slider.css';
+import NileElement from '../internal/nile-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TooltipPosition } from './types/nile-slider.types';
+import { NileSliderEvents } from './types/nile-slider.enums';
+import { rangeSlider, singleSlider, lableContaier } from './nile-slider.template';
+import { 
+  handleSingleSlider, 
+  handleRangeOne, 
+  handleRangeTwo, 
+  getHtmlElements, 
+  removeMoveListeners,
+  valueToPercent,
+  handleTwoThumbClick
+} from './utils/nile-slider.utils'
+
+/** 
+ * Nile slider component.
+ *
+ * @tag nile-slider
+ */
+@customElement('nile-slider')
+export class NileSlider extends NileElement {
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Number }) value: number = 0;
+  @property({ type: Number }) minValue: number = 0;
+  @property({ type: Number }) maxValue: number = 0;
+  @property({ type: Number }) rangeOneValue: number = this.minValue;
+  @property({ type: Number }) rangeTwoValue: number = this.maxValue;
+  @property({ type: Boolean}) showLabel: boolean = false;
+  @property({ type: String }) labelStart: string = "";
+  @property({ type: String }) labelEnd: string = "";
+  @property({ type: Boolean}) rangeSlider: boolean = false;
+  @property({ type: String }) labelPosition: string = "top";
+  @property({ type: String }) tooltipPosition: TooltipPosition = "top";
+
+  public buttonOne!: HTMLElement;
+  public buttonTwo!: HTMLElement;
+  public range!: HTMLElement;
+  public completed!: HTMLElement;
+  public activeThumb: 'one' | 'two' | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.emit(NileSliderEvents.NILE_INIT); 
+  }
+
+  firstUpdated(changedProps: Map<string, any>): void {
+    getHtmlElements(this);
+
+    if (!this.rangeSlider && changedProps.has('value')) {
+      this.value = this.checkValueValidity(this.value, this.minValue, this.maxValue);
+      const percent = valueToPercent(this.value, this);
+
+      this.buttonOne.style.left = `${percent}%`;
+      this.completed.style.width = `${percent}%`;
+    } else if (this.rangeSlider && changedProps.has('rangeOneValue') || changedProps.has('rangeTwoValue')) {
+      this.rangeOneValue = this.checkValueValidity(this.rangeOneValue, this.minValue, this.maxValue);
+      this.rangeTwoValue = this.checkValueValidity(this.rangeTwoValue, this.minValue, this.maxValue);
+
+      const percentOne = valueToPercent(this.rangeOneValue, this);
+      const percentTwo = valueToPercent(this.rangeTwoValue, this);
+
+      if (this.buttonOne) this.buttonOne.style.left = `${percentOne}%`;
+      if (this.buttonTwo) this.buttonTwo.style.left = `${percentTwo}%`;
+
+      const left = Math.min(percentOne, percentTwo);
+      const width = Math.abs(percentTwo - percentOne);
+
+      this.completed.style.left = `${left}%`;
+      this.completed.style.width = `${width}%`;
+    }
+  }
+
+  checkValueValidity(value: number, min: number, max: number): number {
+    return Math.max(min, Math.min(value, max));
+  }
+
+  public onMouseMove = (e: MouseEvent): void => {
+    const rect = this.range.getBoundingClientRect();
+
+    if (!this.rangeSlider) {
+      handleSingleSlider(e, rect, this);
+    } else {
+      if (this.activeThumb === 'one') {
+        handleRangeOne(e, rect, this);
+      } else if (this.activeThumb === 'two') {
+        handleRangeTwo(e, rect, this);
+      }
+
+      const start = valueToPercent(this.rangeOneValue, this);
+      const end = valueToPercent(this.rangeTwoValue, this);
+      const left = Math.min(start, end);
+      const width = Math.abs(end - start);
+
+      if(this.rangeTwoValue >= this.rangeOneValue) {
+        this.completed.style.left = `${left}%`;
+        this.completed.style.width = `${width}%`;
+      }
+    }
+  };
+
+  public onMouseUp = (): void => {
+    if(!this.rangeSlider) this.emit(NileSliderEvents.NILE_CHANGE_END, { value: this.value });
+    else {
+      this.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE_END, { value: this.rangeOneValue });
+      this.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE_END, { value: this.rangeTwoValue });
+    }
+    this.activeThumb = null;
+    removeMoveListeners(this);
+  };
+
+  public onMouseClick = (e: MouseEvent): void => {
+    const rect = this.range.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percent = (clickX / rect.width) * 100;
+    const value = this.minValue + (percent / 100) * (this.maxValue - this.minValue);
+  
+    if (!this.rangeSlider) {
+      handleSingleSlider(e, rect, this);
+    } else {
+      handleTwoThumbClick(value, this);
+    }
+  };
+  
+
+  public render(): TemplateResult {
+    return html`
+      <div part="base" class=${classMap({
+        container: true,
+        'align-item-center': !this.showLabel
+      })}>
+        <slot class="span" name="prefix"></slot>
+        <div part="range-container" class=${classMap({
+          'range-container': true,
+          'column-reverse': this.labelPosition === "bottom"
+        })}>
+          ${this.showLabel
+            ? lableContaier(this)
+            : html``}
+          <div class="range" part="range">
+            <span class="range-completed" part="range-completed"></span>
+            ${this.rangeSlider
+              ? rangeSlider(this)
+              : singleSlider(this)}
+          </div>
+        </div>
+        <slot class="span" name="suffix"></slot>
+      </div>
+    `;
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.emit(NileSliderEvents.NILE_DESTROY);
+  }
+}
+
+export default NileSlider;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-slider': NileSlider;
+  }
+}

package/src/nile-slider/types/nile-slider.enums.ts

@@ -0,0 +1,10 @@
+export const enum NileSliderEvents {
+  NILE_INIT = "nile-init",
+  NILE_CHANGE = "nile-change",
+  NILE_CHANGE_END = "nile-change-end",
+  NILE_BUTTON_FIRST_CHANGE = "nile-button-first-change",
+  NILE_BUTTON_LAST_CHANGE =  "nile-button-last-change",
+  NILE_BUTTON_FIRST_CHANGE_END = "nile-button-first-change-end",
+  NILE_BUTTON_LAST_CHANGE_END =  "nile-button-last-change-end",
+  NILE_DESTROY = "nile-destroy",
+}

package/src/nile-slider/types/nile-slider.types.ts

@@ -0,0 +1,13 @@
+export type TooltipPosition =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end';

package/src/nile-slider/utils/nile-slider.utils.ts

@@ -0,0 +1,118 @@
+import NileSlider from '../nile-slider';
+import { NileSliderEvents } from '../types/nile-slider.enums';
+
+export const getClampedPercent = (rect: DOMRect, x: number): number => {
+  const clamped = Math.max(0, Math.min(x, rect.width));
+  return (clamped / rect.width) * 100;
+};
+
+export const percentToValue = (percent: number, nileSlider: NileSlider): number => {
+  return Math.floor((percent / 100) * nileSlider.maxValue);
+};
+
+export const valueToPercent = (value: number, nileSlider: NileSlider): number => {
+  return (value / nileSlider.maxValue) * 100;
+};
+
+export const handleSingleSlider = (
+  e: MouseEvent,
+  rect: DOMRect,
+  nileSlider: NileSlider
+): void => {
+  const x = e.clientX - rect.left;
+  const percent = getClampedPercent(rect, x);
+  nileSlider.value = percentToValue(percent, nileSlider);
+  nileSlider.emit(NileSliderEvents.NILE_CHANGE, { value: nileSlider.value });
+  nileSlider.buttonOne.style.left = `${percent}%`;
+  nileSlider.completed.style.width = `${percent}%`;
+};
+
+export const handleRangeOne = (
+  e: MouseEvent,
+  rect: DOMRect,
+  nileSlider: NileSlider
+): void => {
+  const x = e.clientX - rect.left;
+  const percent = getClampedPercent(rect, x);
+  nileSlider.rangeOneValue = percentToValue(percent, nileSlider);
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {
+    value: nileSlider.rangeOneValue,
+  });
+  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) nileSlider.buttonOne.style.left = `${percent}%`;
+};
+
+export const handleRangeTwo = (
+  e: MouseEvent,
+  rect: DOMRect,
+  nileSlider: NileSlider
+): void => {
+  const x = e.clientX - rect.left;
+  const percent = getClampedPercent(rect, x);
+  nileSlider.rangeTwoValue = percentToValue(percent, nileSlider);
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {
+    value: nileSlider.rangeTwoValue,
+  });
+  if (nileSlider.rangeTwoValue >= nileSlider.rangeOneValue) nileSlider.buttonTwo.style.left = `${percent}%`;
+};
+
+export const getHtmlElements = (nileSlider: NileSlider) => {
+  nileSlider.range = nileSlider.renderRoot.querySelector('.range') as HTMLElement;
+  nileSlider.buttonOne = nileSlider.renderRoot.querySelector('.range-button') as HTMLElement;
+  nileSlider.buttonTwo = nileSlider.renderRoot.querySelector('.range-button-two') as HTMLElement;
+  nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed') as HTMLElement;
+
+  nileSlider.range.addEventListener('click', nileSlider.onMouseClick);
+
+  nileSlider.buttonOne?.addEventListener('mousedown', () => {
+    nileSlider.activeThumb = 'one';
+    addMoveListeners(nileSlider);
+  });
+
+  nileSlider.buttonTwo?.addEventListener('mousedown', () => {
+    nileSlider.activeThumb = 'two';
+    addMoveListeners(nileSlider);
+  });
+};
+
+export const addMoveListeners = (nileSlider: NileSlider): void => {
+  nileSlider.range.addEventListener('mousemove', nileSlider.onMouseMove);
+  nileSlider.range.addEventListener('mouseup', nileSlider.onMouseUp);
+};
+
+export const removeMoveListeners = (nileSlider: NileSlider): void => {
+  nileSlider.range.removeEventListener('mousemove', nileSlider.onMouseMove);
+  nileSlider.range.removeEventListener('mouseup', nileSlider.onMouseUp);
+};
+
+export const handleTwoThumbClick = (
+  value: number,
+  nileSlider: NileSlider
+): void => {
+  const distToOne = Math.abs(value - nileSlider.rangeOneValue);
+  const distToTwo = Math.abs(value - nileSlider.rangeTwoValue);
+
+  if (distToOne <= distToTwo) {
+    nileSlider.rangeOneValue = Math.floor(nileSlider.checkValueValidity(value, nileSlider.minValue, nileSlider.maxValue));
+  } else {
+    nileSlider.rangeTwoValue = Math.floor(nileSlider.checkValueValidity(value, nileSlider.minValue, nileSlider.maxValue));
+  }
+
+  const percentOne = valueToPercent(nileSlider.rangeOneValue, nileSlider);
+  const percentTwo = valueToPercent(nileSlider.rangeTwoValue, nileSlider);
+
+  nileSlider.buttonOne.style.left = `${percentOne}%`;
+  nileSlider.buttonTwo.style.left = `${percentTwo}%`;
+
+  const left = Math.min(percentOne, percentTwo);
+  const width = Math.abs(percentTwo - percentOne);
+
+  nileSlider.completed.style.left = `${left}%`;
+  nileSlider.completed.style.width = `${width}%`;
+
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {
+    value: nileSlider.rangeOneValue,
+  });
+  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {
+    value: nileSlider.rangeTwoValue,
+  });
+};

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

@@ -16,9 +16,6 @@ export const styles = css`
     --track-color: rgb(128 128 128 / 25%);
     --indicator-color: var(--nile-colors-white-base);
     --speed: 2s;
-    -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: inline-flex;
     width: 1em;

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

@@ -29,9 +29,6 @@ export const styles = css`
     --max: 100%;
 
     display: grid;
-    -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));
   }
 
   .start,
@@ -45,8 +42,8 @@ export const styles = css`
     position: relative;
     align-items: center;
     justify-content: center;
-    background-color: var(--nile-colors-neutral-400 , var(--ng-colors-bg-quaternary));
-    color: var(--nile-colors-dark-900,var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-dark-900);
     z-index: 1;
   }
 
@@ -55,8 +52,8 @@ export const styles = css`
   }
 
   :host(:not([disabled])) .divider:focus-visible {
-    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    background-color: var(--nile-colors-blue-500);
+    color: var(--nile-colors-white-base);
   }
 
   :host([disabled]) .divider {

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

@@ -17,21 +17,18 @@ export const styles = css`
 	:host {
 		display:block;
 		height: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));
 	}
 	.nile-stepper--horizontal{
 		display:flex;
 		align-items:center;
-		padding: var( --nile-spacing-2xl, var(--ng-spacing-2xl));
+		padding: var(--nile-spacing-spacing-3xl);
 	}
 
 	.nile-stepper--vertical{
 		height:100%;
 		display:flex;
 		flex-direction:column;
-		padding: var( --nile-spacing-2xl, var(--ng-spacing-2xl));
+		padding: var(--nile-spacing-spacing-3xl);
 	}
 `;