@aquera/nile-elements 0.1.35-beta-1.7 → 0.1.35-beta-1.11

package/src/nile-icon/index.ts

@@ -5,6 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import * as Icons from './icons/svg';
+import { aliasMap }    from './aliasmap';
 
 interface IconPaths {
   [key: string]: string;
@@ -118,7 +119,7 @@ export class NileIcon extends LitElement {
     }
 
     .nds-icon--push {
-      margin-right: var(--nile-spacing-lg);
+      margin-right: 12px;
     }
   `;
 
@@ -136,11 +137,9 @@ export class NileIcon extends LitElement {
     if (changedProperties.has('color')) {
       this.style.setProperty('--nile-svg-fill', `${this.color}`);
     }
-    if (
-      changedProperties.has('name') ||
-      changedProperties.has('customSvgPath')
-    ) {
-      let iconName = this.name ? this.removeHyphens(this.name) : undefined;
+    if (changedProperties.has('name') || changedProperties.has('customSvgPath')) {
+      const raw = this.name?.replace(/-/g, '') ?? '';
+      const iconName = aliasMap[raw] || raw;
       if (iconName && iconPaths[iconName]) {
         this._svg = atob(iconPaths[iconName]);
       } else if (this.customSvgPath) {
@@ -248,15 +247,15 @@ export class NileIcon extends LitElement {
     }
 
     return html`
-    <span class="nds-icon ${classMap(this.buttonClassMap)}">
-      ${unsafeSVG(this.getSvgTemplate())}
+      <span class="nds-icon ${classMap(this.buttonClassMap)}">
+        ${unsafeSVG(this.getSvgTemplate())}
       </span>
     `
-    }
+  }
 }
 
 declare global {
- interface HTMLElementTagNameMap {
+  interface HTMLElementTagNameMap {
     'nile-icon': NileIcon;
   }
 }

package/src/nile-icon-button/nile-icon-button.css.ts

@@ -13,7 +13,7 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
-    color:  var(--nile-colors-neutral-700)
+    color: hsl(240 5.2% 33.9%);
   }
 
   .icon-button {
@@ -22,10 +22,10 @@ export const styles = css`
     align-items: center;
     background: none;
     border: none;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 0.25rem;
     font-size: inherit;
     color: inherit;
-    padding: var(--nile-radius-md);
+    padding: 0.5rem;
     cursor: pointer;
     transition: 50ms;
     -webkit-appearance: none;
@@ -33,7 +33,7 @@ export const styles = css`
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--nile-colors-blue-500)
+    color: hsl(200.4 98% 39.4%);
   }
 
   .icon-button:active:not(.icon-button--disabled) {

package/src/nile-inline-edit/nile-inline-edit.css.ts

@@ -21,8 +21,8 @@ export const styles = css`
     font-size: var(--nile-type-scale-3);
     font-style: normal;
     font-weight: var(--nile-font-weight-medium);
-    line-height: var(--nile-line-height-small);
-    margin-bottom: var(--nile-spacing-sm);
+    line-height: 20px;
+    margin-bottom: 6px;
   }
 
   .inline__edit--open--container {

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

@@ -19,8 +19,8 @@ export const styles = css`
   input::-webkit-contacts-auto-fill-button {
     visibility: hidden;
     width: 0;
-    margin: var(--nile-spacing-none);
-    padding: var(--nile-spacing-none);
+    margin: 0;
+    padding: 0;
   }
 
   .form-control .form-control__label {
@@ -35,18 +35,18 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: var(--nile-spacing-sm);
+    margin-bottom: 6px;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium);
-    line-height: var(--nile-line-height-small);
+    font-weight: 500;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
@@ -59,27 +59,27 @@ export const styles = css`
   .form-control--has-help-text .form-control__help-text {
     display: block;
     color: var(--nile-colors-dark-500);
-    margin-top: var(--nile-spacing-sm);
+    margin-top: 6px;
   }
 
   /* Error message */
   .form-control__error-message {
     display: block;
     color: var(--nile-colors-red-700);
-    margin-top: var(--nile-spacing-lg);
-    font-size: var(--nile-type-scale-2);
+    margin-top: 12px;
+    font-size: 12px;
     font-style: normal;
     line-height: 12px;
     letter-spacing: 0.2px;
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--nile-type-scale-1);
+    font-size: 10.24px;
   }
 
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
-    margin-top: var(--nile-spacing-xs);
+    margin-top: 0.25rem;
   }
 
   .input {
@@ -89,7 +89,7 @@ export const styles = css`
     justify-content: start;
     position: relative;
     width: 100%;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: 400;
     vertical-align: middle;
     overflow: hidden;
     cursor: text;
@@ -97,8 +97,8 @@ export const styles = css`
       150ms background-color;
     box-sizing: border-box;
     color: var(--nile-colors-dark-900);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-family: Colfax-regular;
+    font-size: 14px;
     font-style: normal;
     line-height: 14px;
     letter-spacing: 0.2px;
@@ -112,18 +112,18 @@ export const styles = css`
   }
 
   .input--standard:hover:not(.input--disabled) {
-    background-color: var(--nile-colors-white-base);
+    background-color: hsl(0, 0%, 100%);
     border-color: var(--nile-colors-dark-900);
   }
 
   .input--standard.input--focused:not(.input--disabled) {
-    background-color: var(--nile-colors-white-base);
+    background-color: hsl(0, 0%, 100%);
     border-color: var(--nile-colors-primary-500);
     box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--nile-colors-primary-900);
+    color: hsl(240 5.3% 26.1%);
   }
 
   .input--standard.input--disabled {
@@ -197,16 +197,16 @@ export const styles = css`
     border: none;
     background: none;
     box-shadow: none;
-    padding: var(--nile-spacing-none);
-    margin: var(--nile-spacing-none);
+    padding: 0;
+    margin: 0;
     cursor: inherit;
     -webkit-appearance: none;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-sans-serif);
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 16px;
     letter-spacing: 0.2px;
   }
 
@@ -218,25 +218,25 @@ export const styles = css`
   }
 
   .input__control:-webkit-autofill {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:hover {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:focus {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
@@ -279,15 +279,15 @@ export const styles = css`
   }
 
   .input__prefix::slotted(nile-icon) {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
   }
 
   .input__suffix::slotted(nile-icon) {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
   }
 
   .input--standard:focus {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
     border: 1px solid var(--nile-colors-primary-500);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
@@ -297,14 +297,14 @@ export const styles = css`
    */
 
   .input--small {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 0.25rem;
     font-size: var(--nile-input-font-size-small);
     height: 1.875rem;
   }
 
   .input--small .input__control {
     height: calc(1.875rem);
-    padding: var(--nile-spacing-none) var(--nile-spacing-lg);
+    padding: 0 0.75rem;
   }
 
   .input--small .input__clear {
@@ -316,22 +316,22 @@ export const styles = css`
   }
 
   .input--small .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-lg);
+    margin-inline-start: 0.75rem;
   }
 
   .input--small .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg);
+    margin-inline-end: 0.75rem;
   }
 
   .input--medium {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 0.25rem;
     font-size: var(--nile-input-font-size-medium);
     height: 40px;
   }
 
   .input--medium .input__control {
     height: 14px;
-    padding: var(--nile-spacing-lg);
+    padding: 12px;
   }
 
   .input--medium .input__clear {
@@ -343,22 +343,22 @@ export const styles = css`
   }
 
   .input--medium .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-lg);
+    margin-inline-start: 12px;
   }
 
   .input--medium .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg);
+    margin-inline-end: 12px;
   }
 
   .input--large {
-    border-radius: var(--nile-radius-sm);
-    font-size: var(--nile-type-scale-6);
+    border-radius: 0.25rem;
+    font-size: 1.25rem;
     height: 3.125rem;
   }
 
   .input--large .input__control {
     height: calc(3.125rem - 1px * 2);
-    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
+    padding: 0 1.25rem;
   }
 
   .input--large .input__clear {
@@ -370,11 +370,11 @@ export const styles = css`
   }
 
   .input--large .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-xl);
+    margin-inline-start: 1.25rem;
   }
 
   .input--large .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-xl);
+    margin-inline-end: 1.25rem;
   }
 
   /*
@@ -382,15 +382,15 @@ export const styles = css`
    */
 
   .input--pill.input--small {
-    border-radius:var(--nile-radius-3xl);
+    border-radius: 1.875rem;
   }
 
   .input--pill.input--medium {
-    border-radius: var(--nile-radius-4xl);
+    border-radius: 2.5rem;
   }
 
   .input--pill.input--large {
-    border-radius: var(--nile-radius-4xl);
+    border-radius: 3.125rem;
   }
 
   /*
@@ -402,10 +402,10 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
     border: none;
     background: none;
-    padding: var(--nile-spacing-none);
+    padding: 0;
     transition: 150ms color;
     cursor: pointer;
   }
@@ -415,20 +415,20 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
     border: none;
     background: none;
-    padding: var(--nile-spacing-none);
+    padding: 0;
     transition: 150ms color;
     cursor: pointer;
   }
 
   .input__clear:hover {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 5.2% 33.9%);
   }
 
   .input__password-toggle:hover {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 5.2% 33.9%);
   }
 
   .input__clear:focus,
@@ -482,31 +482,31 @@ export const styles = css`
   }
 
   .input__non-printable {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
     max-width: 400px;
     background-color: var(--nile-colors-white-base);
     border: 1px solid var(--nile-colors-red-500);
     color: var(--nile-colors-red-500);
-    padding: var(--nile-spacing-lg);
-    font-size: var(--nile-type-scale-2);
+    padding: 10px;
+    font-size: 12px;
     max-height: 300px;
     overflow-y: scroll;
-    line-height: var(--nile-line-height-xsmall);
+    line-height: 16px;
   }
 
   .input__remove-non-printable {
     color: var(--nile-colors-red-500);
-    margin-left: var(--nile-spacing-md);
-    font-size: var(--nile-type-scale-3);
+    margin-left: 10px;
+    font-size: 14px;
     color: var(--nile-colors-dark-900);
     cursor: pointer;
   }
 
   .input__srtiked-text-container {
-    margin-top: var(--nile-spacing-xs);
+    margin-top: 4px;
     color: var(--nile-colors-dark-900);
     word-break: break-all;
-    line-height: var(--nile-line-height-xsmall);
+    line-height: 16px;
   }
 
   .input__srtiked-text {

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

@@ -21,8 +21,8 @@ export const styles = css`
     text-align: center;
     user-select: none;
     white-space: nowrap;
-    padding: var(--nile-spacing-lg);
-    gap: var(--nile-spacing-md);
+    padding: 12px;
+    gap: 8px;
     height: 38px;
     box-sizing: border-box;
     cursor: pointer;
@@ -35,8 +35,8 @@ export const styles = css`
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-3);
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 14px;
     letter-spacing: 0.2px;
   }
 
@@ -59,14 +59,14 @@ export const styles = css`
 
   .link__button:hover {
     color: var(--nile-colors-primary-700);
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-radius-xs);
     background: var(--nile-colors-dark-200);
   }
 
   .link__button:active {
     color: var(--nile-colors-primary-100);
-    border-radius: var(--nile-radius-sm);
-    background: var(--nile-colors-primary-100);
+    border-radius: var(--nile-radius-radius-xs);
+    background: rgba(0, 94, 166, 0.1);
   }
 
 `;

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);
-    padding: var(--nile-spacing-xl);
+    gap: 9px;
+    padding: 16px;
   }
 `;
 

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

@@ -13,7 +13,7 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: flex;
-    padding: var(--nile-spacing-lg) var(--nile-sapcing-xl);
+    padding: 12px 16px;
     flex-direction: row;
     align-items: flex-start;
     justify-content: start;
@@ -27,34 +27,34 @@ export const styles = css`
 
   .preffix__icon {
     display: inline-block;
-    margin-right: var(--nile-spacing-lg);
+    margin-right: 12px;
   }
 
   .list__item {
     cursor: pointer;
     height: 100%;
     display: block;
-    font-size: var(--nile-type-scale-4);
+    font-size: 16px;
   }
 
   .content__wrapper {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xs);
+    gap: 3px;
     height: 100%;
     box-sizing: border-box;
   }
 
   .heading {
     display: inline-block;
-    font-size: var(--nile-type-scale-5);
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-size: 18px;
+    font-weight: 600;
   }
 
   .subheading {
     display: inline-block;
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: 12px;
+    font-weight: 300;
   }
 
   .list-item__suffix {

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

@@ -2,9 +2,9 @@ import { css } from 'lit';
 
 export default css`
   :host {
-    --loader-spacing: var(--nile-spacing-lg);
-    --loader-label-font-size: var(--nile-type-scale-3);
-    --loader-label-line-height: var(--nile-line-height-small);
+    --loader-spacing: var(--nile-spacing-spacing-lg);
+    --loader-label-font-size: 14px;
+    --loader-label-line-height: 20px;
   }
 
   .loader__container {
@@ -19,14 +19,14 @@ export default css`
   .loader__container--md {}
 
   .loader__container--lg {
-    --loader-label-font-size: var(--nile-type-scale-5);
-    --loader-label-line-height: var(--nile-line-height-large);
+    --loader-label-font-size: 18px;
+    --loader-label-line-height: 28px;
   }
   
   .loader__container--xl {
-    --loader-spacing: var(--nile-spacing-xl);
-    --loader-label-font-size: var(--nile-type-scale-5);
-    --loader-label-line-height: var(--nile-line-height-large);
+    --loader-spacing: var(--nile-spacing-spacing-xl);
+    --loader-label-font-size: 18px;
+    --loader-label-line-height: 28px;
   }
 
   .svg__container {
@@ -40,7 +40,7 @@ export default css`
     line-height: var(--loader-label-line-height); 
     font-family: Inter;
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium);
+    font-weight: 500;
   }
 
   .nile-loader__v1 {

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

@@ -14,9 +14,9 @@ export const styles = css`
   :host {
     display: block;
     position: relative;
-    background: var(--nile-colors-white-base);
-    border: solid 1px var(--nile-colors-dark-200);
-    border-radius: var(--nile-radius-sm);
+    background: hsl(0, 0%, 100%);
+    border: solid 1px hsl(240 5.9% 90%);
+    border-radius: 6px;
     overflow: hidden;
     height: 100%;
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
@@ -28,11 +28,11 @@ export const styles = css`
 
   .search__wrapper {
     box-sizing: border-box;
-    padding: var(--nile-spacing-lg) var(--nile-spacing-sm);
+    padding: 12px 6px;
     position: sticky;
     z-index: 999;
     top: 0px;
-    background: var(--nile-colors-white-base);
+    background: hsl(0, 0%, 100%);
     height: 64px;
   }
 
@@ -42,14 +42,14 @@ export const styles = css`
   }
 
   ::slotted(nile-divider) {
-    --spacing: var(--nile-spacing-md);
+    --spacing: 0.5rem;
   }
 
   .menu__footer {
     display: flex;
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-radius-sm);
     align-items: stretch;
-    font-size: var(--nile-type-scale-4);
+    font-size: 1rem;
     font-weight: var(--nile-font-weight-regular);
     line-height: 180%;
     letter-spacing: normal;
@@ -59,8 +59,8 @@ export const styles = css`
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);
-    margin: auto var(--nile-spacing-none);
+    padding: 0 var(--nile-spacing-spacing-xl);
+    margin: auto 0;
   }
 
   .menu__footer:hover {