@aquera/nile-elements 0.1.44-beta-1.5 → 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.5",
+  "version": "0.1.44-beta-1.6",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -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

@@ -379,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));
   }
 

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;
   }