@aquera/nile-elements 0.1.40-beta-1.6 → 0.1.40-beta-1.8

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

@@ -12,198 +12,166 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    -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));
   }
 
   .badge {
-    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-sm));
+    padding: 2px 6px;
+    border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    height: var(--nile-height-22px, var(--ng-height-22px));
+    height: 22px;
   }
 
   .badge__content {
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-family: var(--nile-font-family-serif);
+    font-size: 12px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    line-height: var(--nile-line-height-small, var(--ng-font-size-text-xs));
+    font-weight: 500;
+    line-height: 18px;
     letter-spacing: 0.2px;
-    display: flex;
-    align-items: center;
   }
 
   .badge--primary {
-    background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));
-    color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));
+    background: var(--nile-badge-color-background-primary);
+    color: var(--nile-badge-color-font-primary);
   }
 
   .badge--normal {
-    background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));
+    background: var(--nile-badge-color-background-normal);
   }
 
   .badge--info {
-    background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));
+    background: var(--nile-badge-color-background-info);
   }
 
   /* for v2 */
-
-    .badge--pill-outline {
-    background: transparent ;
-  }
   .badge--pink {
-    color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));
-    background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));
+    color: var(--nile-badge-color-font-pink);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-pink);
+    background: var(--nile-badge-color-background-pink);
   }
 
   .badge--orange {
-    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));
-    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));
+    color: var(--nile-badge-color-font-orange);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-orange);
+    background: var(--nile-badge-color-background-orange);
   }
 
   .badge--purple {
-    color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));
-    background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));
+    color: var(--nile-badge-color-font-purple);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-purple);
+    background: var(--nile-badge-color-background-purple);
   }
 
   .badge--indigo {
-    color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));
-    background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));
+    color: var(--nile-badge-color-font-indigo);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-indigo);
+    background: var(--nile-badge-color-background-indigo);
   }
 
   .badge--blue {
-    color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));
-    background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));
+    color: var(--nile-badge-color-font-blue);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-blue);
+    background: var(--nile-badge-color-background-blue);
   }
   .badge--blue-light {
-    color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));
-    background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));
+    color:var(--nile-badge-color-font-bluelight);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-bluelight);
+    background: var(--nile-badge-color-background-bluelight);
   }
 
   .badge--gray-blue {
-    color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));
-    background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));
+    color: var(--nile-badge-color-font-grayblue);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-grablue);
+    background: var(--nile-badge-color-background-grayblue);
   }
 
   .badge--success {
-    color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));
-    background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));
+    color: var(--nile-badge-color-font-success);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-success);
+    background: var(--nile-badge-color-background-success);
   }
   .badge--warning {
-    color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));
-    background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));
+    color: var(--nile-badge-color-font-warning);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-warning);
+    background: var(--nile-badge-color-background-warning);
   }
 
   .badge--error {
-    color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));
-    background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));
+    color: var(--nile-badge-color-font-error);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-error);
+    background: var(--nile-badge-color-background-error);
   }
 
   .badge--brand {
-    color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));
-    background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));
+    color: var(--nile-badge-color-font-brand);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-brand);
+    background: var(--nile-badge-color-background-brand);
   }
 
   .badge--gray {
-    color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));
-    background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
+    color: var(--nile-badge-color-font-gray);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-gray);
+    background: var(--nile-badge-color-background-gray);
   }
 
   .badge--pink.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-pink);
   }
 
   .badge--orange.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-orange);
   }
 
   .badge--purple.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-purple);
   }
 
   .badge--indigo.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-indigo));
   }
 
   .badge--blue.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-blue));
   }
 
   .badge--blue-light.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight,  var(--ng-componentcolors-utility-blue-light-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-bluelight);
   }
 
   .badge--gray-blue.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);
   }
 
   .badge--success.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-success);
   }
 
   .badge--warning.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-warning);
   }
 
   .badge--error.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-error);
   }
 
   .badge--brand.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-brand);
   }
 
   .badge--gray.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);
   }
 
-
+  .badge--pill-outline {
+    background: transparent;
+  }
 
   .badge--rounded {
-    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md));
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    padding: 2px 8px;
+    border-radius: 100px;
   }
 `;
 export default [styles];
-

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

@@ -14,9 +14,6 @@ export const styles = css`
   :host {
     display: flex;
     align-items: center;
-    -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-breadcrumb-item/nile-breadcrumb-item.css.ts

@@ -15,19 +15,16 @@ export const styles = css`
     display: flex;
     align-items: center;
     text-align: center;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-font-size-small);
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
-    letter-spacing: 0.2px; 
-    -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));
+    font-weight: var(--nile-font-weight-regular);
+    line-height: 16.8px;
+    letter-spacing: 0.2px;
   }
 
   .nile-breadcrumb-item__arrow {
-    margin: 0 var(--nile-spacing-md, var(--ng-spacing-md));
+    margin: 0 8px;
   }
 
   .nile-breadcrumb-item__arrow-hidden {
@@ -35,16 +32,16 @@ export const styles = css`
   }
 
   .nile-breadcrumb-item__slot-text {
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
+    color: var(--nile-colors-dark-500);
   }
 
   .nile-breadcrumb-item__slot-text:hover {
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-hover));
+    color: var(--nile-colors-primary-600);
     cursor: pointer;
   }
 
   .nile-breadcrumb-item__last-slot-text {
-    color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));
+    color: var(--nile-breadcrumb-color);
   }
 `;
 

package/src/nile-breadcrumb-item/nile-breadcrumb-item.ts

@@ -41,9 +41,6 @@ export class NileBreadcrumbItem extends NileElement {
    * Render method
    * @slot This is a slot test
    */
-
-  @property({ type: String }) separator = 'arrowright';
-
   private handleClick() {
     if (this.isLast) {
       return;
@@ -61,9 +58,9 @@ export class NileBreadcrumbItem extends NileElement {
         @click=${this.handleClick}
       ></slot>
       <nile-icon
-        name=${this.separator}
-        aria-label=${this.separator}
-        color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))"
+        name="arrowright"
+        aria-label="arrowright"
+        color="var(--nile-colors-dark-500)"
         class=${classMap({
           'nile-breadcrumb-item__arrow': true,
           'nile-breadcrumb-item__arrow-hidden': this.isLast,