@aquera/nile-elements 0.1.44-beta-1.4 → 0.1.44-beta-1.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.44-beta-1.4",
+  "version": "0.1.44-beta-1.6",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -50,7 +50,7 @@ export const styles = css`
   .accordian--md{
     --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
     --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl));
     --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   }
 

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

@@ -32,10 +32,8 @@ export const styles = css`
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     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));
+    line-height: var(--nile-type-scale-5, var(--ng-font-size-text-xs));
     letter-spacing: 0.2px;
-    display: flex;
-    align-items: center;
   }
 
   .badge--primary {

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

@@ -44,8 +44,8 @@ export const styles = css`
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
     border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));
     padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));
-    gap: var(--nile-spacing-sm, var(--ng-spacing-xs));
-    line-height: var(--nile-line-height-small);
+    gap: var(--nile-spacing-5px, var(--ng-spacing-xs));
+    line-height: var(--nile-type-scale-6, var(--ng-spacing-5));
     box-sizing: border-box;
     height: var(--nile-height-40px, var(--ng-height-40px));
   }
@@ -197,33 +197,35 @@ export const styles = css`
 
   /* ghost  */
   .button--standard.button--ghost {
-    background-color: var(--nile-colors-white-base);
-    border-color: transparent;
-    color: var(--nile-colors-dark-900);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
 
   .button--standard.button--ghost:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-dark-200);
-    border-color: transparent;
-    color: var(--nile-colors-dark-900);
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));
+    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));
   }
 
   .button--standard.button--ghost:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: transparent;
-    color: var(--nile-colors-dark-900);
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
+    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
 
   .button--standard.button--ghost.button--disabled,
   .button--standard.button--ghost.button--disabled:hover,
   .button--standard.button--ghost.button--disabled:active {
-    border-color: transparent;
-    background-color: var(--nile-colors-white-base);
-    color: var(--nile-colors-neutral-500);
+    border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));
     cursor: not-allowed;
     box-shadow: none;
   }
 
+  
+
   /* caution */
   .button--standard.button--caution {
     background-color: var(--nile-colors-red-500);

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

@@ -103,7 +103,7 @@ export const styles = css`
 
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
-    margin-top: var(--nile-spacing-xs);
+    margin-top: var(--nile-spacing-xxxsmall);
   }
 
   .input {
@@ -137,20 +137,6 @@ export const styles = css`
     outline:var(--nile-outline-none, var(--ng-private-outline-transparent));
   }
 
-  .input--standard:hover:not(.input--disabled):not(.input--error) {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: 1px solid var(--nile-colors-primary-500, var(--ng-colors-border-brand));
-    outline: var(--nile-outline-none,var(--ng-nxt-gen-outline));
-  }
-
-  :host([no-outline]) .input--standard:hover {
-    outline: var(--nile-outline-none, var(--ng-outline-none));
-  }
-
-  :host([no-padding]) .input--medium .input__control {
-    padding: 0px !important;
-  }
-
   .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-colors-border-error));
@@ -367,7 +353,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-10px, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));
   }
 
   .input--small .input__clear {
@@ -379,11 +365,11 @@ export const styles = css`
   }
 
   .input--small .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-lg);
+    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));
   }
 
   .input--small .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));
   }
 
   .input--medium {
@@ -393,7 +379,7 @@ export const styles = css`
   }
 
   .input--medium .input__control {
-    height: var(--nile-height-auto, var(--ng-height-auto));
+    height: var(--nile-type-scale-3, var(--ng-height-auto));
     padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
@@ -433,11 +419,11 @@ export const styles = css`
   }
 
   .input--large .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-xl);
+    margin-inline-start: var(--nile-spacing-small, var(--ng-spacing-lg));
   }
 
   .input--large .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-xl);
+    margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));
   }
 
   /*
@@ -445,15 +431,15 @@ export const styles = css`
    */
 
   .input--pill.input--small {
-    border-radius:var(--nile-radius-3xl);
+    border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));
   }
 
   .input--pill.input--medium {
-    border-radius: var(--nile-radius-4xl);
+    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));
   }
 
   .input--pill.input--large {
-    border-radius: var(--nile-radius-4xl);
+    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));
   }
 
   /*
@@ -525,7 +511,7 @@ export const styles = css`
   }
 
   :host([no-outline]) .input--standard {
-    outline:var(--ng-outline-none);
+    outline: var(--nile-outline-unset, var(--ng-outline-none));
   }
 
   :host([no-border]) .input--standard:hover:not(.input--disabled) {
@@ -563,7 +549,7 @@ export const styles = css`
 
   .input__remove-non-printable {
     color: var(--nile-colors-red-500);
-    margin-left: var(--nile-spacing-md);
+    margin-left: var(--nile-spacing-10px);
     font-size: var(--nile-type-scale-3);
     color: var(--nile-colors-dark-900);
     cursor: pointer;

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

@@ -18,38 +18,38 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);
+    padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
   }
 
   .pagination-wrapper.v2 {
     justify-content: flex-start;
-    gap: var(--nile-spacing-spacing-lg);
+    gap: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
   }
 
   .pagination-wrapper.v2 .pager-container {
     flex-direction: row;
     align-items: center;
-    gap: var(--nile-spacing-spacing-md);
-    margin-right: var(--nile-spacing-spacing-xl);
+    gap: var(--nile-spacing-spacing-md,  var(--ng-spacing-md));
+    margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
   }
 
   .pagination-wrapper.v2 .range-text {
-    margin-right: var(--nile-spacing-spacing-md);
-    font-size: var(--nile-font-size-small);
-    color: var(--nile-colors-dark-900);
+    margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
     font-feature-settings: 'liga' off, 'clig' off;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .pager-container {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-spacing-3xl);
+    gap: var(--nile-spacing-spacing-3xl, var( --ng-spacing-3xl));
   }
 
   .range-text {
-    font-size: var(--nile-font-size-small);
-    color: var(--nile-colors-dark-900);
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
     white-space: nowrap;
   }
 
@@ -61,13 +61,13 @@ export const styles = css`
   ul.pagination {
     display: flex;
     list-style: none;
-    padding: var(--nile-spacing-spacing-none);
-    margin: var(--nile-spacing-spacing-none);
-    gap: var(--nile-radius-radius-xxs);
+    padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
+    gap: var(--nile-radius-radius-xxs, var(--ng-spacing-xs));
   }
 
   ul.pagination li {
-    margin: var(--nile-spacing-spacing-none);
+    margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
   }
 
   .ellipsis-scroll-wrapper {
@@ -78,7 +78,7 @@ export const styles = css`
 
   .ellipsis-dropdown nile-menu {
     overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
@@ -90,39 +90,45 @@ export const styles = css`
   }
 
   ul.pagination li:first-child {
-    margin-right: var(--nile-spacing-spacing-xs);
+    margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
   }
   ul.pagination li:last-child {
-    margin-left: var(--nile-spacing-spacing-md);
+    margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
   }
 
   .page-size-label {
-    font-size: var(--nile-type-scale-3);
-    color: var(--nile-colors-dark-500);
-    margin-left: var(--nile-spacing-spacing-md);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
     font-feature-settings: 'liga' off, 'clig' off;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   nile-button::part(base) {
       min-width: 32px;
+     
   height: 32px;
   padding: 0px 6px;
-  box-shadow: none;
+   
 }
 
   nile-button::part(base):active {
   min-width: 32px;
   height: 32px;
   padding: 0px 6px;
-  box-shadow: none;
+  box-shadow: var(--nile-box-shadow-none);
   border:none;
 }
  
  nile-button.down::part(base){
   min-width: 62px;
+  border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+ }
 
+  nile-button.arrow::part(base){
+  border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
  }
+
 .page-size-dropdown .chevron {
   transition: transform 0.2s;
 }

package/src/nile-pagination/nile-pagination.ts

@@ -91,7 +91,7 @@ export class NilePagination extends NileElement {
             ?disabled=${this.disabled}
           >
             ${this.pageSize}
-            <nile-icon name="chevrondown" size="14" color="var(--nile-colors-dark-500)" class="chevron"></nile-icon>
+            <nile-icon name="chevrondown" size="14" color="var(--nile-colors-dark-500,var(--ng-colors-fg-quaternary-400))" class="chevron"></nile-icon>
           </nile-button>
           <nile-menu class="page-size-menu">
             ${this.pageSizeOptions.map(
@@ -114,11 +114,12 @@ export class NilePagination extends NileElement {
     return html`
       <li>
         <nile-button
+        class="arrow"
           variant="tertiary"
           ?disabled=${this.currentPage === 1 || this.disabled}
           @click=${() => this.goToPage(this.currentPage - 1)}
         >
-          <nile-icon name="arrowleft" size="14"></nile-icon>
+          <nile-icon name="arrowleft" color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))" size="14"></nile-icon>
         </nile-button>
       </li>
     `;
@@ -129,10 +130,11 @@ export class NilePagination extends NileElement {
       <li>
         <nile-button
           variant="tertiary"
+          class="arrow" 
           ?disabled=${this.currentPage === this.totalPages || this.disabled}
           @click=${() => this.goToPage(this.currentPage + 1)}
         >
-          <nile-icon name="arrowright" size="14"></nile-icon>
+          <nile-icon name="arrowright" color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))" size="14"></nile-icon>
         </nile-button>
       </li>
     `;

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

@@ -29,7 +29,7 @@ export const styles = css`
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
     vertical-align: middle;
     cursor: pointer;
-    margin: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));
     align-items: center;
   }
 

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

@@ -49,7 +49,7 @@ export const styles = css`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
-    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }