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

package/dist/src/nile-tag/nile-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tag.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QAGL,+BAA+B;QACF,YAAO,GAMvB,QAAQ,CAAC;QAEtB,sBAAsB;QACO,SAAI,GAAiC,QAAQ,CAAC;QAE3E,iDAAiD;QACL,SAAI,GAAG,KAAK,CAAC;QAEzD,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;IA2EjD,CAAC;IAzES,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3B,CAAC;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,OAAQ,wBAAwB,CAAC;YACnC,KAAK,SAAS;gBACZ,OAAO,yBAAyB,CAAC;YACnC,KAAK,QAAQ;gBACX,OAAO,wBAAwB,CAAC;YAClC,KAAK,SAAS;gBACZ,OAAO,0BAA0B,CAAC;YACpC,KAAK,OAAO;gBACV,OAAO,uBAAuB,CAAC;YACjC,KAAK,MAAM;gBACT,OAAO,wBAAwB,CAAC;YAClC;gBACE,OAAO,wBAAwB,CAAC;QACpC,CAAC;IACH,CAAC;IAGD,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACjD,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,GAAG,EAAE,IAAI;YAET,QAAQ;YACR,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACxC,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACtC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAEpC,QAAQ;YACR,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAEnC,YAAY;YACZ,WAAW,EAAE,IAAI,CAAC,IAAI;YACtB,gBAAgB,EAAE,IAAI,CAAC,SAAS;SAEjC,CAAC;;;;;;UAMA,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;;;;;yBAQS,IAAI,CAAC,iBAAiB;;6BAElB,aAAa;;aAE7B;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AA5FM,cAAM,GAAmB,MAAM,AAAzB,CAA0B;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAMN;AAGO;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA+C;AAG/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAc;AAG5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAnBpC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA8FnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { styles } from './nile-tag.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-tag\n *\n */\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The tag's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-tag')\nexport class NileTag extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The tag's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'success'\n    | 'normal'\n    | 'warning'\n    | 'error'\n    | 'info' = 'normal';\n\n  /** The tag's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style tag with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /** Makes the tag removable and shows a remove button. */\n  @property({ type: Boolean }) removable = false;\n\n  private handleRemoveClick() {\n    this.emit('nile-remove');\n  }\n\n  getCloseButtonColor() {\n    switch (this.variant) {\n      case 'primary':\n        return  '--nile-colors-blue-500'; \n      case 'success':\n        return '--nile-colors-green-500'; \n      case 'normal':\n        return '--nile-colors-dark-500'; \n      case 'warning':\n        return '--nile-colors-yellow-500';\n      case 'error':\n        return '--nile-colors-red-500';\n      case 'info':\n        return '--nile-colors-blue-500';\n      default:\n        return '--nile-colors-dark-500'; \n    }\n  }\n  \n\n  render() {\n    const colorVariable = this.getCloseButtonColor();\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          tag: true,\n\n          // Types\n          'tag--primary': this.variant === 'primary',\n          'tag--success': this.variant === 'success',\n          'tag--normal': this.variant === 'normal',\n          'tag--warning': this.variant === 'warning',\n          'tag--error': this.variant === 'error',\n          'tag--info': this.variant === 'info',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifiers\n          'tag--pill': this.pill,\n          'tag--removable': this.removable,\n\n        })}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"tag__prefix\"></slot>\n\n        <slot part=\"content\" class=\"tag__content\"></slot>\n\n        ${this.removable\n          ? html`\n              <nile-icon-button\n                part=\"remove-button\"\n                exportparts=\"base:remove-button__base\"\n                name=\"close\"\n                library=\"system\"\n                label=\"remove\"\n                class=\"tag__remove\"\n                @click=${this.handleRemoveClick}\n                tabindex=\"-1\"\n                color=\"var(${colorVariable})\"\n              ></nile-icon-button>\n            `\n          : ''}\n      </span>\n    `;\n  }\n}\n\nexport default NileTag;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tag': NileTag;\n  }\n}\n"]}
+{"version":3,"file":"nile-tag.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QAGL,+BAA+B;QACF,YAAO,GAMvB,QAAQ,CAAC;QAEtB,sBAAsB;QACO,SAAI,GAAiC,QAAQ,CAAC;QAE3E,iDAAiD;QACL,SAAI,GAAG,KAAK,CAAC;QAEzD,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;IAkFjD,CAAC;IAhFS,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3B,CAAC;IAED,mBAAmB;QACjB,IAAI,YAAY,CAAC;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,YAAY,GAAG,wBAAwB,CAAC;gBACxC,MAAM;YACR,KAAK,SAAS;gBACZ,YAAY,GAAG,yBAAyB,CAAC;gBACzC,MAAM;YACR,KAAK,QAAQ;gBACX,YAAY,GAAG,wBAAwB,CAAC;gBACxC,MAAM;YACR,KAAK,SAAS;gBACZ,YAAY,GAAG,0BAA0B,CAAC;gBAC1C,MAAM;YACR,KAAK,OAAO;gBACV,YAAY,GAAG,uBAAuB,CAAC;gBACvC,MAAM;YACR,KAAK,MAAM;gBACT,YAAY,GAAG,wBAAwB,CAAC;gBACxC,MAAM;YACR;gBACE,YAAY,GAAG,wBAAwB,CAAC;QAC5C,CAAC;QACD,OAAO,OAAO,YAAY,uCAAuC,CAAC;IACpE,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACjD,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,GAAG,EAAE,IAAI;YAET,QAAQ;YACR,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACxC,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACtC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAEpC,QAAQ;YACR,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAEnC,YAAY;YACZ,WAAW,EAAE,IAAI,CAAC,IAAI;YACtB,gBAAgB,EAAE,IAAI,CAAC,SAAS;SAEjC,CAAC;;;;;;UAMA,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;;;;;yBAQS,IAAI,CAAC,iBAAiB;;yBAEtB,IAAI,CAAC,mBAAmB,EAAE;;aAEtC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAnGM,cAAM,GAAmB,MAAM,AAAzB,CAA0B;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAMN;AAGO;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA+C;AAG/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAc;AAG5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAnBpC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAqGnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { styles } from './nile-tag.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-tag\n *\n */\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The tag's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-tag')\nexport class NileTag extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The tag's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'success'\n    | 'normal'\n    | 'warning'\n    | 'error'\n    | 'info' = 'normal';\n\n  /** The tag's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style tag with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /** Makes the tag removable and shows a remove button. */\n  @property({ type: Boolean }) removable = false;\n\n  private handleRemoveClick() {\n    this.emit('nile-remove');\n  }\n  \n  getCloseButtonColor() {\n    let primaryColor;\n    switch (this.variant) {\n      case 'primary':\n        primaryColor = '--nile-colors-blue-500';\n        break;\n      case 'success':\n        primaryColor = '--nile-colors-green-500';\n        break;\n      case 'normal':\n        primaryColor = '--nile-colors-dark-500';\n        break;\n      case 'warning':\n        primaryColor = '--nile-colors-yellow-500';\n        break;\n      case 'error':\n        primaryColor = '--nile-colors-red-500';\n        break;\n      case 'info':\n        primaryColor = '--nile-colors-blue-500';\n        break;\n      default:\n        primaryColor = '--nile-colors-dark-500';\n    }\n    return `var(${primaryColor}, var(--ng-colors-fg-quaternary-400))`;\n  }\n  \n  render() {\n    const colorVariable = this.getCloseButtonColor();\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          tag: true,\n\n          // Types\n          'tag--primary': this.variant === 'primary',\n          'tag--success': this.variant === 'success',\n          'tag--normal': this.variant === 'normal',\n          'tag--warning': this.variant === 'warning',\n          'tag--error': this.variant === 'error',\n          'tag--info': this.variant === 'info',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifiers\n          'tag--pill': this.pill,\n          'tag--removable': this.removable,\n\n        })}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"tag__prefix\"></slot>\n\n        <slot part=\"content\" class=\"tag__content\"></slot>\n\n        ${this.removable\n          ? html`\n              <nile-icon-button\n                part=\"remove-button\"\n                exportparts=\"base:remove-button__base\"\n                name=\"close\"\n                library=\"system\"\n                label=\"remove\"\n                class=\"tag__remove cross_icon\"\n                @click=${this.handleRemoveClick}\n                tabindex=\"-1\"\n                 color=${this.getCloseButtonColor()}\n              ></nile-icon-button>\n            `\n          : ''}\n      </span>\n    `;\n  }\n}\n\nexport default NileTag;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tag': NileTag;\n  }\n}\n"]}

package/dist/src/nile-textarea/nile-textarea.css.js

@@ -20,47 +20,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 */
@@ -76,67 +76,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;
@@ -152,7 +163,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;
   }
 
@@ -161,82 +172,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));
   }
 `;
 export default [styles];

package/dist/src/nile-textarea/nile-textarea.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-textarea.css.js","sourceRoot":"","sources":["../../../src/nile-textarea/nile-textarea.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsOxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TextArea CSS\n */\nexport const styles = css`\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    margin-bottom: 12px;\n    color: var(--nile-textarea-label-color);\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: var(--nile-textarea-label-font-weight);\n    line-height: var(--nile-textarea-label-line-height);\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-font-size-base);\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var( --nile-colors-red-700);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: 6px;\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700);\n    margin-top: 12px;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: 10.24px;\n  }\n\n  /* Host styles */\n  :host {\n    display: block;\n  }\n\n  /* Textarea styles */\n  .textarea {\n    display: flex;\n    align-items: center;\n    position: relative;\n    width: 100%;\n    letter-spacing: 0.5px;\n    vertical-align: middle;\n    border-radius: var(--nile-radius-base-standard);\n    transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;\n    cursor: text;\n    min-height: 12px;\n  }\n\n  /* Standard textareas */\n  .textarea--standard {\n    background-color: var(--nile-colors-white-base);\n    border: 1px solid var(--nile-textarea-standard-border-color);\n    box-shadow:var(--nile-textarea-standard-box-shadow);\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-textarea-standard-hover-border-color);\n    border-radius: var(--nile-radius-base-standard);\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n    border-color: var(--nile-colors-dark-900);\n    border-radius: var(--nile-radius-base-standard);\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-textarea-standard-focused-border-color);\n    box-shadow:var(--nile-textarea-standard-focused-box-shadow);\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled)\n    .textarea__control {\n    color: var(--nile-colors-dark-900);\n  }\n\n  .textarea--standard.textarea--disabled {\n    border-color: var(--nile-textarea-standard-disabled-border-color);\n    background: var(--nile-textarea-standard-disabled-background-color);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow:var(--nile-textarea-standard-disabled-box-shadow);\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control {\n    color: var(--nile-colors-neutral-500);\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control::placeholder {\n    color: var(--nile-colors-neutral-500);\n  }\n\n  /* Textarea control styles */\n  .textarea__control {\n    flex: 1 1 auto;\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px; /* 100% */\n    letter-spacing: 0.2px;\n    color: var(--nile-colors-dark-900);\n    border: none;\n    background: none;\n    box-shadow: none;\n    cursor: inherit;\n    -webkit-appearance: none;\n  }\n\n  .textarea__control::-webkit-search-decoration,\n  .textarea__control::-webkit-search-cancel-button,\n  .textarea__control::-webkit-search-results-button,\n  .textarea__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .textarea__control::placeholder {\n    color: var(--nile-colors-dark-500);\n    user-select: none;\n  }\n\n  .textarea__control:focus {\n    outline: none;\n  }\n\n  .textarea--medium .textarea__control {\n    padding:var(--nile-textarea-padding);\n  }\n\n  /* Resize types */\n  .textarea--resize-none .textarea__control {\n    resize: none;\n    min-height: 12px;\n  }\n\n  .textarea--resize-vertical .textarea__control {\n    resize: vertical;\n    min-height: 12px;\n  }\n\n  .textarea--resize-auto .textarea__control {\n    resize: none;\n    overflow-y: hidden;\n    min-height: 12px;\n  }\n\n  .textarea--standard.textarea--warning {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .textarea--standard.textarea--error {\n    border-color: var(--nile-colors-red-500);\n  }\n\n  .textarea--standard.textarea--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .textarea--standard.textarea--destructive {\n    border-color: var(--nile-colors-red-400);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .textarea--standard.textarea--destructive.textarea--focused {\n    border-color: var(--nile-colors-red-400);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  .input__non-printable {\n    border-radius: 4px;\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base);\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: 10px;\n    font-size: 12px;\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: 16px;\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: 10px;\n    font-size: 14px;\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: 4px;\n    color: var(--nile-colors-dark-900);\n    word-wrap: break-all;\n    line-height: 16px;\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-textarea.css.js","sourceRoot":"","sources":["../../../src/nile-textarea/nile-textarea.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgPxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TextArea CSS\n */\nexport const styles = css`\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    color: var(--nile-textarea-label-color, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-textarea-label-font-weight, var(--ng-font-weight-500));\n    line-height: var(--nile-textarea-label-line-height, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2), var(--ng-font-size-text-md);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));\n  }\n\n  /* Host styles */\n  :host {\n    display: block;\n  }\n\n  /* Textarea styles */\n  .textarea {\n    display: flex;\n    align-items: center;\n    position: relative;\n    width: 100%;\n    letter-spacing: 0.5px;\n    vertical-align: middle;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    transition: 0.3s color, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) border, 0.3s box-shadow, 0.3s background-color;\n    cursor: text;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  /* Standard textareas */\n  .textarea--standard {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-textarea-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow:var(--nile-textarea-standard-box-shadow, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-textarea-standard-focused-box-shadow, var(--ng-colors-effects-shadow-xs));\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-brand));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--warning.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-colors-dark-900, var(--ng-componentcolors-utility-warning-500));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--error.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled)\n    .textarea__control {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .textarea--standard.textarea--disabled {\n    border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));\n    background: var(--nile-textarea-standard-disabled-background-color, var(--ng-colors-border-disabled-subtle));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow:var(--nile-textarea-standard-disabled-box-shadow, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control::placeholder {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));\n  }\n\n  /* Textarea control styles */\n  .textarea__control {\n    flex: 1 1 auto;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md)); /* 100% */\n    letter-spacing: 0.2px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border: none;\n    background: none;\n    box-shadow: none;\n    cursor: inherit;\n    -webkit-appearance: none;\n  }\n\n  .textarea__control::-webkit-search-decoration,\n  .textarea__control::-webkit-search-cancel-button,\n  .textarea__control::-webkit-search-results-button,\n  .textarea__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .textarea__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n  }\n\n  .textarea__control:focus {\n    outline: none;\n  }\n\n  .textarea--medium .textarea__control {\n    padding: var(--nile-textarea-padding, var(--ng-spacing-lg)) var(--nile-textarea-padding, var(--ng-spacing-lg));\n  }\n\n  /* Resize types */\n  .textarea--resize-none .textarea__control {\n    resize: none;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--resize-vertical .textarea__control {\n    resize: vertical;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--resize-auto .textarea__control {\n    resize: none;\n    overflow-y: hidden;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--standard.textarea--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-componentcolors-utility-warning-500));\n  }\n\n  .textarea--standard.textarea--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .textarea--standard.textarea--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-text-success-primary-600));\n  }\n\n  .textarea--standard.textarea--destructive {\n    border-color: var(--nile-colors-red-400);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard.textarea--destructive.textarea--focused {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-border-error));\n    box-shadow: var(--nile-box-shadow-5, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n    color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));\n    margin-left: var(--nile-spacing-lg, var(--ng-nile-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--nile-font-size-base));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs, var(--ng-nile-spacing-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    word-wrap: break-all;\n    line-height: var(--nile-line-height-xsmall, var(--ng-nile-line-height-xsmall));\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base, var(--ng-colors-background-bg-primary));\n    color: var(--nile-colors-white-base, var(--ng-colors-background-bg-primary));\n    background-color: var(--nile-colors-red-500, var(--ng-colors-text-text-error-primary600));\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-title/nile-title.css.js

@@ -10,7 +10,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));
 	}
 `;
 export default [styles];

package/dist/src/nile-title/nile-title.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-title.css.js","sourceRoot":"","sources":["../../../src/nile-title/nile-title.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Title CSS\n */\nexport const styles = css`\n\t:host {\n    font: 500 20px / 30px var(--nile-font-family-sans-serif);\n\t}\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-title.css.js","sourceRoot":"","sources":["../../../src/nile-title/nile-title.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Title CSS\n */\nexport const styles = css`\n\t:host {\n    font: 500 20px / 30px var(--nile-font-family-sans-serif,var(--ng-font-family-body));\n\t}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-toast/nile-toast.css.js

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

package/dist/src/nile-toast/nile-toast.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2LxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    max-width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: 8px;\n    margin: inherit;\n    padding: 16px;\n    gap: 16px;\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: red;\n    border-radius: 4px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    line-height: 20px;\n    color: black;\n    gap:3px;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n    color:var(--nile-colors-dark-900);\n  }\n\n  .alert__message--content {\n    font-weight:400;\n    color:var(--nile-colors-dark-500);\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family:  var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: var(--nile-spacing-none);\n  }\n\n  .alert {\n    max-width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n    margin: inherit;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: var(--nile-colors-red-500);\n    border-radius: var(--nile-radius-sm);\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .alert__message--title {\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    color:var(--nile-colors-dark-900, var(--ng-colors-primary-900));\n  }\n\n  .alert__message--content {\n    font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .alert__message--content-only {\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));\n\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    font-family:  var(--nile-font-family-serif, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    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));\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -71,7 +71,7 @@ export declare class NileToast extends NileElement {
     /** Hides the alert */
     hide(): Promise<void>;
     getIconNameByVariant(): "check-circle" | "info-circle" | "alert-circle";
-    getIconColorByVariant(): "var(--nile-toast-color-icon-color-success)" | "var(--nile-toast-color-icon-color-info)" | "var(--nile-toast-color-icon-color-warning)" | "var(--nile-toast-color-icon-color-error)" | "var(--nile-toast-color-icon-color-gray)" | "var(--nile-toast-color-icon-color-black)";
+    getIconColorByVariant(): "var(--nile-toast-color-icon-color-success, var(--ng-colors-fg-success-primary))" | "var(--nile-toast-color-icon-color-info, var(--ng-colors-fg-brand-primary-600))" | "var(--nile-toast-color-icon-color-warning, var(--ng-colors-fg-warning-primary))" | "var(--nile-toast-color-icon-color-error, var(--ng-colors-fg-error-primary))" | "var(--nile-toast-color-icon-color-gray, var(--ng-colors-fg-tertiary-600))" | "var(--nile-toast-color-icon-color-black)";
     handleSlotChange(e: any): void;
     /**
      * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when