@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

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

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

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

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

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

@@ -13,12 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: contents;
-    -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));
 
     /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: var(--nile-spacing-none);
+    margin: 0;
   }
 
   .alert {
@@ -27,11 +24,11 @@ export const styles = css`
     position: relative;
     display: flex;
     align-items: flex-start;
-    border: solid 2px;
-    border-radius: var(--nile-radius-md, var(--ng-radius-xl));
+    border: solid 2px 2px;
+    border-radius: 8px;
     margin: inherit;
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
-    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding: 16px;
+    gap: 16px;
     width: max-content;
     min-width: 400px;
   }
@@ -42,8 +39,8 @@ export const styles = css`
   }
 
   .alert__prefix-icon-container {
-    background-color: var(--nile-colors-red-500);
-    border-radius: var(--nile-radius-sm);
+    background-color: red;
+    border-radius: 4px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
@@ -54,57 +51,57 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--nile-type-scale-1);
+    font-size: 10px;
   }
 
   .alert--success {
-    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));
-    background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));
-    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
+    border: 1px solid var(--nile-toast-color-border-success);
+    background: var(--nile-toast-color-background-success);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--success .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));
+    background: var(--nile-toast-color-icon-background-color-success);
   }
 
   .alert--info {
-    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));
-    background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));
-    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
+    border: 1px solid var(--nile-toast-color-border-info);
+    background: var(--nile-toast-color-background-info);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--info .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));
+    background: var(--nile-toast-color-icon-background-color-info);
   }
 
   .alert--warning {
-    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));
-    background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));
-    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
+    border: 1px solid var(--nile-toast-color-border-warning);
+    background: var(--nile-toast-color-background-warning);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--warning .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));
+    background: var(--nile-toast-color-icon-background-color-warning);
   }
 
   .alert--error {
-    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));
-    background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));
-    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
+    border: 1px solid var(--nile-toast-color-border-error);
+    background: var(--nile-toast-color-background-error);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--error .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));
+    background: var(--nile-toast-color-icon-background-color-error);
   }
 
   .alert--gray {
-    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));
-    background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));
-    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
+    border: 1px solid var(--nile-toast-color-border-gray);
+    background: var(--nile-toast-color-background-gray);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--gray .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));
+    background: var(--nile-toast-color-icon-background-color-gray);
   }
 
   .alert--black {
@@ -124,23 +121,25 @@ export const styles = css`
     align-items: center;
     flex-direction: column;
     align-items: flex-start;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-display));
-    font-size: var(--nile-type-scale-3);
-    color: var(--nile-colors-dark-900);
-    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    font-family: var(--nile-font-family-serif);
+    font-size: 14px;
+    line-height: 20px;
+    color: black;
+    gap:3px;
   }
 
   .alert__message--title {
-    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semiboldibold));
-    color:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    font-weight: 600;
+    color:var(--nile-colors-dark-900);
   }
 
   .alert__message--content {
-    font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    font-weight:400;
+    color:var(--nile-colors-dark-500);
   }
 
   .alert__message--content-only {
+    margin-top: 3px;
   }
 
   .alert__close-button {
@@ -152,14 +151,14 @@ export const styles = css`
   .alert__tags {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    gap: 10px;
+    margin-top: 4px;
   }
 
   .alert__tag {
     height: 24px;
     display: flex;
-    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+    border-radius: 4px;
     border: 1px solid var(--nile-colors-neutral-400);
     background: var(--nile-colors-white-base);
   }
@@ -169,26 +168,26 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));
+    padding: 0 6px;
 
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
-    font-family:  var(--nile-font-family-serif, var(--ng-font-family-display));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-900);
+    font-family:  var(--nile-font-family-serif);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    font-weight: 400;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
   .alert__tag-image {
     height: 24px;
     width: 24px;
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border-radius: 4px 0 0 4px;
   }
 
   .alert__prefix-img {
     height: 24px;
-    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+    border-radius: 4px;
   }
 
   .alert--no-content{

package/src/nile-toast/nile-toast.ts

@@ -83,7 +83,7 @@ export class NileToast extends NileElement {
 
   @property({ type: String, reflect: true }) prefixImageUrl = '';
   
-  @property({ type: String, reflect: true }) closeIconName = 'var(--nile-icon-close, var(--ng-icon-x-close))';
+  @property({ type: String, reflect: true }) closeIconName = 'close';
 
   /** The alert's theme variant. */
   @property({ reflect: true }) variant:
@@ -192,32 +192,32 @@ export class NileToast extends NileElement {
   getIconNameByVariant() {
     switch (this.variant) {
       case 'success':
-        return 'var(--nile-icon-check-circle, var(--ng-icon-check-circle))';
+        return 'check-circle';
       case 'info':
-        return 'var(--nile-icon-info, var(--ng-icon-info-circle))';
+        return 'info-circle';
       case 'warning':
-        return 'var(--nile-icon-alert-circle, var(--ng-icon-alert-circle))';
+        return 'alert-circle';
       case 'error':
-        return 'var(--nile-icon-alert-circle, var(--ng-icon-alert-circle))';
+        return 'alert-circle';
       case 'gray':
-        return 'var(--nile-icon-info, var(--ng-icon-info-circle))';
+        return 'info-circle';
       case 'black':
-        return 'var(--nile-icon-info, var(--ng-icon-info-circle))';
+        return 'info-circle';
     }
   }
 
   getIconColorByVariant() {
     switch (this.variant) {
       case 'success':
-        return 'var(--nile-toast-color-icon-color-success, var(--ng-colors-fg-success-primary))';
+        return 'var(--nile-toast-color-icon-color-success)';
       case 'info':
-        return 'var(--nile-toast-color-icon-color-info, var(--ng-colors-fg-brand-primary-600))';
+        return 'var(--nile-toast-color-icon-color-info)';
       case 'warning':
-        return 'var(--nile-toast-color-icon-color-warning, var(--ng-colors-fg-warning-primary))';
+        return 'var(--nile-toast-color-icon-color-warning)';
       case 'error':
-        return 'var(--nile-toast-color-icon-color-error, var(--ng-colors-fg-error-primary))';
+        return 'var(--nile-toast-color-icon-color-error)';
       case 'gray':
-        return 'var(--nile-toast-color-icon-color-gray, var(--ng-colors-fg-tertiary-600))';
+        return 'var(--nile-toast-color-icon-color-gray)';
       case 'black':
         return 'var(--nile-toast-color-icon-color-black)';
     }
@@ -315,7 +315,7 @@ export class NileToast extends NileElement {
                     name="${this.getIconNameByVariant()}"
                     size="20"
                     color="${this.getIconColorByVariant()}"
-                    method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))"
+                    method="stroke"
                   ></nile-icon>
                 </div>
               `
@@ -371,7 +371,7 @@ export class NileToast extends NileElement {
                 name="${this.closeIconName}"
                 label="close"
                 size="20"
-                color="var(--nile-colors-neutral-700,var(--ng-colors-fg-quaternary-400))"
+                color="var(--nile-colors-neutral-700)"
                 @click=${this.handleCloseClick}
               ></nile-icon-button>
             `

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

@@ -14,9 +14,6 @@ export const styles = css`
   :host {
     display: block;
     width: 100%;
-    -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));
   }
 
   .toolbar {
@@ -26,12 +23,12 @@ export const styles = css`
     padding: 0 48px;
     box-sizing: border-box;
     min-height: 64px;
-    line-height: var(--nile-toolbar-line-height, var(--ng-line-height-text-xl));
-    font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-medium));
-    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
-    font-size: var(--nile-toolbar-font-size, var(--ng-font-size-text-xl));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    /* color: var(--nile-toolbar-text-color, var(--ng-color-base-black)); */  // TODO: Need to be tokenized in future.
+    line-height: var(--nile-toolbar-line-height);
+    font-weight: var(--nile-toolbar-font-weight);
+    font-family: var(--nile-font-family-sans-serif);
+    font-size: var(--nile-toolbar-font-size);
+    background-color: var(--nile-toolbar-background-color, var(--nile-colors-white-base));
+    color: var(--nile-toolbar-text-color, rgba(0, 0, 0, 0.87));
   }
 `;