@aquera/nile-elements 0.1.37 → 0.1.38-beta-1.4

package/src/nile-table-cell-item/nile-table-cell-item.css.ts

@@ -20,7 +20,7 @@ export const styles = css`
     display: table-cell;
     vertical-align: middle;
     max-width: var(--max--cell-width);
-    padding: 16px 24px;
+    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-2xl , var(--ng-spacing-3xl));
     min-height: var(--min--height);
   }
 
@@ -28,11 +28,11 @@ export const styles = css`
     min-width:var(--min-cell-width);
     width:var(--cell-width);
     height: 100%;
-    color: var(--nile-colors-gray-light-mode-600);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-tertiary-600));
+    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular , var(--ng-font-weight-regular));
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -24,7 +24,7 @@ export const styles = css`
     display:flex;
     align-items:center;
     box-sizing: border-box;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
+    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-2xl , var(--ng-spacing-3xl));
     min-height: 44px;
     height: 44px;
   }
@@ -35,12 +35,12 @@ export const styles = css`
     align-items: center;
     height: auto;
     width: 100%;
-    gap: 8px;
-    color: var(--nile-colors-gray-light-mode-600);
-    font-family: var(--nile-font-family-serif);
+    gap: var(--nile-spacing-md , var(--ng-spacing-xs));
+    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));
+    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-2);
-    font-weight: 500;
+    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;

package/src/nile-table-row/nile-table-row.css.ts

@@ -16,16 +16,15 @@ export const styles = css`
     width: 100%;
     height: 100%;
     height: max-content;
-    --nile-header-background: var(--nile-table-header-background-color);
-    border-bottom: 1px solid var(--nile-table-row-border-color);
+    border-bottom: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));
   }
 
   slot::slotted(nile-table-header-item) {
-    background-color: var(--nile-header-background);
+    background-color: var(--nile-table-header-background-color , var(--ng-colors-bg-secondary));
   }
 
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
-    color: red;
+    color: var(--nile-colors-red-500);
   }
 `;
 

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

@@ -22,23 +22,30 @@ export const styles = css`
     line-height: 1;
     white-space: nowrap;
     user-select: none;
-    border-radius: 4px;
-    gap: 6px;
+    border-radius: var(--nile-radius-sm , var(--ng-radius-sm));
+    gap: var(--nile-spacing-sm , var(--ng-spacing-1-5));
   }
 
   .tag__remove::part(base) {
     color: inherit;
-    padding: 0;
+    padding: var(--nile-spacing-none , var(--ng-spacing-none));
   }
 
   /*
    * Variant modifiers
    */
 
+  .tag--medium {
+    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+    height: var(--nile-height-26px , var(--ng-height-auto));
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
+    padding: var(--nile-spacing-none , var(--ng-spacing-1)) var(--nile-spacing-lg , var(--ng-spacing-2));
+  }
+
   .tag--primary {
     background: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    border: 2px solid  var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-primary));
+    border: 2px solid  var(--nile-colors-primary-600, var(--ng-colors-border-primary));
     color: var(--nile-colors-white-base);
   }
 
@@ -47,90 +54,82 @@ export const styles = css`
   }
 
   .tag--primary:active > nile-icon-button {
-    color: hsl(200.4 98% 39.4%);
+    color: var(--nile-colors-blue-700);
   }
 
   .tag--success {
     background: var(--nile-colors-green-400);
-    border: 2px solid var(--nile-colors-green-400);
+    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--success:hover {
-    border: 2px solid var(--nile-colors-green-500);
+    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));
   }
 
   .tag--success:active > nile-icon-button {
-    color: hsl(142.1 76.2% 36.3%);
+    color: var(--nile-colors-green-700);
   }
 
   .tag--normal {
-    background: var(--nile-colors-neutral-400);
-    border: 2px solid var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-neutral-400 , var(--ng-colors-bg-primary));
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
+    color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));
   }
-
+  
   .tag--normal:hover {
-    border: 2px solid var(--nile-colors-neutral-500);
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
   }
 
-
   .tag--normal:active > nile-icon-button {
-    color: hsl(240 5.2% 33.9%);
+    color: var(--nile-colors-neutral-700);
   }
 
   .tag--warning {
     background: var(--nile-colors-yellow-400);
-    border: 2px solid var(--nile-colors-yellow-400);
+    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--warning:hover {
-    border: 2px solid var(--nile-colors-yellow-500);
+    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));
   }
 
   .tag--warning:active > nile-icon-button {
-    color: hsl(32.1 94.6% 43.7%);
+    color: var(--nile-colors-yellow-500);
   }
 
 
   .tag--error {
     background: var(--nile-colors-red-400);
-    border: 2px solid var(--nile-colors-red-400);
+    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--error:hover {
-    border: 2px solid var(--nile-colors-red-500);
+    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));
   }
 
   .tag--error:active > nile-icon-button {
-    color: hsl(0 72.2% 50.6%);
+    color: var(--nile-colors-red-500);
   }
 
   .tag--info {
     background: var(--nile-colors-blue-400);
-    border: 2px solid var(--nile-colors-blue-400);
+    border: 2px solid var(--nile-colors-blue-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--info:hover {
-    border: 2px solid var(--nile-colors-blue-500);
+    border: 2px solid var(--nile-colors-blue-500, var(--ng-colors-border-primary));
   }
 
   .tag--info:active > nile-icon-button {
-    color: hsl(0 72.2% 50.6%);
-  }
-
-
-  .tag--medium {
-    font-size: 14px;
-    height: 26px;
-    padding: 0 0.75rem;
+    color: var(--nile-colors-red-500);
   }
 
   .tag__remove {
-    margin-inline-start: 0.5rem;
+    margin-inline-start: var(--nile-spacing-md , var(--ng-spacing-2));
   }
 
   /*
@@ -138,17 +137,21 @@ export const styles = css`
    */
 
   .tag--pill {
-    border-radius: 9999px;
+    border-radius: var(--nile-radius-full , var(--ng-spacing-20));
   }
 
   .tag__prefix {
-  padding: 3px 6px;
+  padding: var(--nile-spacing-xs , var(--ng-spacing-1)) var(--nile-spacing-sm , var(--ng-spacing-1-5));
 }
 
  .tag__content {
-  font-size: 14px;
+  font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
 }
 
+  .cross_icon {
+    margin-left: auto;
+  }
+
 `;
 
 export default [styles];

package/src/nile-tag/nile-tag.ts

@@ -65,27 +65,34 @@ export class NileTag extends NileElement {
   private handleRemoveClick() {
     this.emit('nile-remove');
   }
-
+  
   getCloseButtonColor() {
+    let primaryColor;
     switch (this.variant) {
       case 'primary':
-        return  '--nile-colors-blue-500'; 
+        primaryColor = '--nile-colors-blue-500';
+        break;
       case 'success':
-        return '--nile-colors-green-500'; 
+        primaryColor = '--nile-colors-green-500';
+        break;
       case 'normal':
-        return '--nile-colors-dark-500'; 
+        primaryColor = '--nile-colors-dark-500';
+        break;
       case 'warning':
-        return '--nile-colors-yellow-500';
+        primaryColor = '--nile-colors-yellow-500';
+        break;
       case 'error':
-        return '--nile-colors-red-500';
+        primaryColor = '--nile-colors-red-500';
+        break;
       case 'info':
-        return '--nile-colors-blue-500';
+        primaryColor = '--nile-colors-blue-500';
+        break;
       default:
-        return '--nile-colors-dark-500'; 
+        primaryColor = '--nile-colors-dark-500';
     }
+    return `var(${primaryColor}, var(--ng-colors-fg-quaternary-400))`;
   }
   
-
   render() {
     const colorVariable = this.getCloseButtonColor();
     return html`
@@ -125,10 +132,10 @@ export class NileTag extends NileElement {
                 name="close"
                 library="system"
                 label="remove"
-                class="tag__remove"
+                class="tag__remove cross_icon"
                 @click=${this.handleRemoveClick}
                 tabindex="-1"
-                color="var(${colorVariable})"
+                 color=${this.getCloseButtonColor()}
               ></nile-icon-button>
             `
           : ''}

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

@@ -22,47 +22,47 @@ export const styles = css`
   /* Label */
   .form-control--has-label .form-control__label {
     display: inline-block;
-    margin-bottom: 12px;
-    color: var(--nile-textarea-label-color);
-    font-family: var(--nile-font-family-serif);
-    font-size: 14px;
+    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-sm));
+    color: var(--nile-textarea-label-color, var(--ng-colors-text-secondary-700));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-textarea-label-font-weight);
-    line-height: var(--nile-textarea-label-line-height);
+    font-weight: var(--nile-textarea-label-font-weight, var(--ng-font-weight-500));
+    line-height: var(--nile-textarea-label-line-height, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--nile-font-size-base);
+    font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: var( --nile-colors-red-700);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));
   }
 
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: var(--nile-colors-dark-500);
-    margin-top: 6px;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   /* Error message */
   .form-control__error-message {
     display: block;
-    color: var(--nile-colors-red-700);
-    margin-top: 12px;
-    font-size: 12px;
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));
+    font-size: var(--nile-type-scale-2), var(--ng-font-size-text-md);
     font-style: normal;
-    font-weight: 400;
-    line-height: 12px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));
     letter-spacing: 0.2px;
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: 10.24px;
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));
   }
 
   /* Host styles */
@@ -78,67 +78,78 @@ export const styles = css`
     width: 100%;
     letter-spacing: 0.5px;
     vertical-align: middle;
-    border-radius: var(--nile-radius-base-standard);
-    transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    transition: 0.3s color, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) border, 0.3s box-shadow, 0.3s background-color;
     cursor: text;
-    min-height: 12px;
+    min-height: var(--nile-height-12px, var(--ng-height-12px));
   }
 
   /* Standard textareas */
   .textarea--standard {
-    background-color: var(--nile-colors-white-base);
-    border: 1px solid var(--nile-textarea-standard-border-color);
-    box-shadow:var(--nile-textarea-standard-box-shadow);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: 1px solid var(--nile-textarea-standard-border-color, var(--ng-colors-border-primary));
+    box-shadow:var(--nile-textarea-standard-box-shadow, var(--ng-colors-effects-shadow-xs));
   }
 
   .textarea--standard:hover:not(.textarea--disabled) {
-    background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-textarea-standard-hover-border-color);
-    border-radius: var(--nile-radius-base-standard);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
   }
 
   .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
-    border-color: var(--nile-colors-dark-900);
-    border-radius: var(--nile-radius-base-standard);
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
   }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
-    background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-textarea-standard-focused-border-color);
-    box-shadow:var(--nile-textarea-standard-focused-box-shadow);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-shadow: var(--nile-textarea-standard-focused-box-shadow, var(--ng-colors-effects-shadow-xs));
+    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-brand));
+    border-width: var(--nile-border-width-1, var(--ng-border-width-2));
+  }
+
+  .textarea--standard.textarea--warning.textarea--focused:not(.textarea--disabled) {
+    border-color: var(--nile-colors-dark-900, var(--ng-componentcolors-utility-warning-500));
+    border-width: var(--nile-border-width-1, var(--ng-border-width-2));
+  }
+
+  .textarea--standard.textarea--error.textarea--focused:not(.textarea--disabled) {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));
+    border-width: var(--nile-border-width-1, var(--ng-border-width-2));
   }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled)
     .textarea__control {
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .textarea--standard.textarea--disabled {
-    border-color: var(--nile-textarea-standard-disabled-border-color);
-    background: var(--nile-textarea-standard-disabled-background-color);
+    border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));
+    background: var(--nile-textarea-standard-disabled-background-color, var(--ng-colors-border-disabled-subtle));
     opacity: 0.5;
     cursor: not-allowed;
-    box-shadow:var(--nile-textarea-standard-disabled-box-shadow);
+    box-shadow:var(--nile-textarea-standard-disabled-box-shadow, var(--ng-colors-effects-shadow-xs));
   }
 
   .textarea--standard.textarea--disabled .textarea__control {
-    color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
   }
 
   .textarea--standard.textarea--disabled .textarea__control::placeholder {
-    color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));
   }
 
   /* Textarea control styles */
   .textarea__control {
     flex: 1 1 auto;
-    font-family: Colfax-regular;
-    font-size: 14px;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-style: normal;
-    font-weight: 400;
-    line-height: 14px; /* 100% */
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md)); /* 100% */
     letter-spacing: 0.2px;
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     border: none;
     background: none;
     box-shadow: none;
@@ -154,7 +165,7 @@ export const styles = css`
   }
 
   .textarea__control::placeholder {
-    color: var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
     user-select: none;
   }
 
@@ -163,82 +174,81 @@ export const styles = css`
   }
 
   .textarea--medium .textarea__control {
-    padding:var(--nile-textarea-padding);
+    padding: var(--nile-textarea-padding, var(--ng-spacing-lg)) var(--nile-textarea-padding, var(--ng-spacing-lg));
   }
 
   /* Resize types */
   .textarea--resize-none .textarea__control {
     resize: none;
-    min-height: 12px;
+    min-height: var(--nile-height-12px, var(--ng-height-12px));
   }
 
   .textarea--resize-vertical .textarea__control {
     resize: vertical;
-    min-height: 12px;
+    min-height: var(--nile-height-12px, var(--ng-height-12px));
   }
 
   .textarea--resize-auto .textarea__control {
     resize: none;
     overflow-y: hidden;
-    min-height: 12px;
+    min-height: var(--nile-height-12px, var(--ng-height-12px));
   }
 
   .textarea--standard.textarea--warning {
-    border-color: var(--nile-colors-yellow-500);
+    border-color: var(--nile-colors-yellow-500, var(--ng-componentcolors-utility-warning-500));
   }
 
   .textarea--standard.textarea--error {
-    border-color: var(--nile-colors-red-500);
+    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));
   }
 
   .textarea--standard.textarea--success {
-    border-color: var(--nile-colors-green-500);
+    border-color: var(--nile-colors-green-500, var(--ng-colors-text-success-primary-600));
   }
 
   .textarea--standard.textarea--destructive {
     border-color: var(--nile-colors-red-400);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    box-shadow: var(--nile-box-shadow-1, var(--ng-colors-effects-shadow-xs));
   }
 
   .textarea--standard.textarea--destructive.textarea--focused {
-    border-color: var(--nile-colors-red-400);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+    border-color: var(--nile-colors-red-400, var(--ng-colors-border-error));
+    box-shadow: var(--nile-box-shadow-5, var(--ng-colors-effects-shadow-xs));
   }
 
   .input__non-printable {
-    border-radius: 4px;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
     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: 10px;
-    font-size: 12px;
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));
+    color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));
     max-height: 300px;
     overflow-y: scroll;
-    line-height: 16px;
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));
   }
 
   .input__remove-non-printable {
-    color: var(--nile-colors-red-500);
-    margin-left: 10px;
-    font-size: 14px;
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));
+    margin-left: var(--nile-spacing-lg, var(--ng-nile-spacing-lg));
+    font-size: var(--nile-type-scale-3, var(--nile-font-size-base));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     cursor: pointer;
   }
 
   .input__srtiked-text-container {
-    margin-top: 4px;
-    color: var(--nile-colors-dark-900);
+    margin-top: var(--nile-spacing-xs, var(--ng-nile-spacing-xs));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     word-wrap: break-all;
-    line-height: 16px;
+    line-height: var(--nile-line-height-xsmall, var(--ng-nile-line-height-xsmall));
   }
 
   .input__srtiked-text {
     text-decoration: line-through;
-    text-decoration-color: var(--nile-colors-white-base);
-    color: var(--nile-colors-white-base);
-    background-color: var(--nile-colors-red-500);
+    text-decoration-color: var(--nile-colors-white-base, var(--ng-colors-background-bg-primary));
+    color: var(--nile-colors-white-base, var(--ng-colors-background-bg-primary));
+    background-color: var(--nile-colors-red-500, var(--ng-colors-text-text-error-primary600));
   }
 `;
 

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

@@ -12,7 +12,7 @@ import {css} from 'lit';
  */
 export const styles = css`
 	:host {
-    font: 500 20px / 30px var(--nile-font-family-sans-serif);
+    font: 500 20px / 30px var(--nile-font-family-sans-serif,var(--ng-font-family-body));
 	}
 `;