tuix-webcomponents 0.4.0 → 0.6.0

package/dist/src/tuix-text/TuixText.js

@@ -3,15 +3,28 @@ import { html, css, LitElement, unsafeCSS } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { customElement, property } from 'lit/decorators.js';
 import { TextSize, TextVariant, colorText, colorTextDark, } from './enums/tuix-text.enums.js';
-import { textStyles } from './TuixText.styles.js';
+import { linkFontStyles, textStyles } from './TuixText.styles.js';
 import { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';
 import slottedClassName from '../utils/slottedClassName.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { LINK_TEXT_COLOR_VAR_NAME } from '../tuix-link/TuixLink.styles.js';
 let TuixText = class TuixText extends LitElement {
     constructor() {
         super(...arguments);
         this.size = TextSize.Body1;
         this.color = TextVariant.PRIMARY;
         this.dark = false;
+        this._getStyleMap = () => {
+            return {
+                color: `var(${LINK_TEXT_COLOR_VAR_NAME}, ${this._getTextColor()})`,
+            };
+        };
+        this._getClassMap = () => {
+            return {
+                text: true,
+                [this.size]: true,
+            };
+        };
     }
     _getTextColor() {
         const colorMap = this.dark ? colorTextDark : colorText;
@@ -19,10 +32,8 @@ let TuixText = class TuixText extends LitElement {
     }
     render() {
         return html ` <div
-      class="text ${this.size}"
-      style="${styleMap({
-            color: this._getTextColor(),
-        })}"
+      class="${classMap(this._getClassMap())}"
+      style="${styleMap(this._getStyleMap())}"
     >
       <slot></slot>
     </div>`;
@@ -32,11 +43,12 @@ TuixText.styles = [
     css `
       ${unsafeCSS(slottedClassName('text'))} {
         font-family: 'Rubik', sans-serif;
-        display: block;
+        display: inline;
         margin: 0;
       }
     `,
     textStyles,
+    linkFontStyles,
     buttonSizeStyles,
 ];
 __decorate([

package/dist/src/tuix-text/TuixText.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixText.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,aAAa,GACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,gBAAgB,MAAM,8BAA8B,CAAC;AAG5D,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAEE,SAAI,GAAG,QAAQ,CAAC,KAAK,CAAC;QAGtB,UAAK,GAAI,WAAW,CAAC,OAAO,CAAC;QAG7B,SAAI,GAAG,KAAK,CAAC;IA6Bf,CAAC;IAfS,aAAa;QACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;QACvD,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,IAAI;eACd,QAAQ,CAAC;YAChB,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;SAC5B,CAAC;;;WAGG,CAAC;IACV,CAAC;;AA1BM,eAAM,GAAG;IACd,GAAG,CAAA;QACC,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;;;;;KAKtC;IACD,UAAU;IACV,gBAAgB;CACjB,AAVY,CAUX;AAlBF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACP;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;uCACH;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AARF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqCpB;SArCY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  TextSize,\n  TextVariant,\n  colorText,\n  colorTextDark,\n} from './enums/tuix-text.enums.js';\nimport { textStyles } from './TuixText.styles.js';\nimport { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';\nimport slottedClassName from '../utils/slottedClassName.js';\n\n@customElement('tuix-text')\nexport class TuixText extends LitElement {\n  @property({ type: TextSize })\n  size = TextSize.Body1;\n\n  @property({ type: TextVariant })\n  color? = TextVariant.PRIMARY;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  static styles = [\n    css`\n      ${unsafeCSS(slottedClassName('text'))} {\n        font-family: 'Rubik', sans-serif;\n        display: block;\n        margin: 0;\n      }\n    `,\n    textStyles,\n    buttonSizeStyles,\n  ];\n\n  private _getTextColor() {\n    const colorMap = this.dark ? colorTextDark : colorText;\n    return colorMap[this.color || TextVariant.PRIMARY];\n  }\n\n  render() {\n    return html` <div\n      class=\"text ${this.size}\"\n      style=\"${styleMap({\n        color: this._getTextColor(),\n      })}\"\n    >\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"TuixText.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,aAAa,GACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,gBAAgB,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAG3E,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAEE,SAAI,GAAG,QAAQ,CAAC,KAAK,CAAC;QAGtB,UAAK,GAAI,WAAW,CAAC,OAAO,CAAC;QAG7B,SAAI,GAAG,KAAK,CAAC;QAoBL,iBAAY,GAAG,GAAG,EAAE;YAC1B,OAAO;gBACL,KAAK,EAAE,OAAO,wBAAwB,KAAK,IAAI,CAAC,aAAa,EAAE,GAAG;aACnE,CAAC;QACJ,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAc,EAAE;YACrC,OAAO;gBACL,IAAI,EAAE,IAAI;gBACV,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;aAClB,CAAC;QACJ,CAAC,CAAC;IAUJ,CAAC;IA1BS,aAAa;QACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;QACvD,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAeD,MAAM;QACJ,OAAO,IAAI,CAAA;eACA,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;eAC7B,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;;;WAGjC,CAAC;IACV,CAAC;;AAtCM,eAAM,GAAG;IACd,GAAG,CAAA;QACC,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;;;;;KAKtC;IACD,UAAU;IACV,cAAc;IACd,gBAAgB;CACjB,AAXY,CAWX;AAnBF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACP;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;uCACH;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AARF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiDpB;SAjDY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  TextSize,\n  TextVariant,\n  colorText,\n  colorTextDark,\n} from './enums/tuix-text.enums.js';\nimport { linkFontStyles, textStyles } from './TuixText.styles.js';\nimport { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';\nimport slottedClassName from '../utils/slottedClassName.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { LINK_TEXT_COLOR_VAR_NAME } from '../tuix-link/TuixLink.styles.js';\n\n@customElement('tuix-text')\nexport class TuixText extends LitElement {\n  @property({ type: TextSize })\n  size = TextSize.Body1;\n\n  @property({ type: TextVariant })\n  color? = TextVariant.PRIMARY;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  static styles = [\n    css`\n      ${unsafeCSS(slottedClassName('text'))} {\n        font-family: 'Rubik', sans-serif;\n        display: inline;\n        margin: 0;\n      }\n    `,\n    textStyles,\n    linkFontStyles,\n    buttonSizeStyles,\n  ];\n\n  private _getTextColor() {\n    const colorMap = this.dark ? colorTextDark : colorText;\n    return colorMap[this.color || TextVariant.PRIMARY];\n  }\n\n  private _getStyleMap = () => {\n    return {\n      color: `var(${LINK_TEXT_COLOR_VAR_NAME}, ${this._getTextColor()})`,\n    };\n  };\n\n  private _getClassMap = (): ClassInfo => {\n    return {\n      text: true,\n      [this.size]: true,\n    };\n  };\n\n  render() {\n    return html` <div\n      class=\"${classMap(this._getClassMap())}\"\n      style=\"${styleMap(this._getStyleMap())}\"\n    >\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/dist/src/tuix-text/TuixText.styles.d.ts

@@ -1 +1,2 @@
+export declare const linkFontStyles: import("lit").CSSResult;
 export declare const textStyles: import("lit").CSSResult;

package/dist/src/tuix-text/TuixText.styles.js

@@ -2,6 +2,22 @@ import { css, unsafeCSS } from 'lit';
 import { ScreenSizes } from '../utils/screenSizes.enum';
 import { TextSize } from './enums/tuix-text.enums';
 import slottedClassName from '../utils/slottedClassName';
+export const linkFontStyles = css `
+  ${unsafeCSS(`
+  ${slottedClassName(TextSize.Link)} {
+    font-family: 'Rubik', sans-serif;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.25rem;    
+  }
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    ${slottedClassName(TextSize.Link)} {   
+      font-size: 0.875rem;
+      line-height: 1rem;    
+    }  
+  }
+`)}
+`;
 export const textStyles = css `
   ${unsafeCSS(`
   ${slottedClassName(TextSize.XL)} {
@@ -100,6 +116,11 @@ export const textStyles = css `
       font-size: 0.75rem;
       line-height: 0.975rem;
     }
+    ${slottedClassName(TextSize.Field1)} {
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1.25rem;
+    }
     ${slottedClassName(TextSize.XL)} {
       font-size: 1.5rem;
       line-height: 1.8rem;

package/dist/src/tuix-text/TuixText.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixText.styles.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AAEzD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;IACzB,SAAS,CAAC;IACV,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;;IAM7B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;;IAM5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;;IAM5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;;IAM5B,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;;IAM7B,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;;IAMhC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;;IAMhC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;IAMjC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;uCAME,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;MAIhC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;MAIhC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;MAI7B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;;;uCAOI,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;MAKhC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;MAIhC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;MAI7B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;CAKjC,CAAC;CACD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { TextSize } from './enums/tuix-text.enums';\nimport slottedClassName from '../utils/slottedClassName';\n\nexport const textStyles = css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.XL)} {\n    font-size: 4rem;\n    font-weight: 600;\n    line-height: 4.4rem;\n  }\n\n  ${slottedClassName(TextSize.L)} {\n    font-size: 3.5rem;\n    font-weight: 600;\n    line-height: 4.2rem;\n  }\n\n  ${slottedClassName(TextSize.M)} {\n    font-size: 2.25rem;\n    font-weight: 500;\n    line-height: 2.7rem;\n  }\n\n  ${slottedClassName(TextSize.S)} {\n    font-size: 1.5rem;\n    font-weight: 500;\n    line-height: 1.8rem;\n  }\n\n  ${slottedClassName(TextSize.XS)} {\n    font-size: 1.125rem;\n    font-weight: 500;\n    line-height: 1.35rem;\n  }\n\n  ${slottedClassName(TextSize.Body1)} {\n    font-size: 1rem;\n    font-weight: 300;\n    line-height: 1.4rem;\n  }\n\n  ${slottedClassName(TextSize.Body2)} {\n    font-size: 0.875rem;\n    font-weight: 300;\n    line-height: 1.225rem;\n  }\n\n  ${slottedClassName(TextSize.Field1)} {\n    font-size: 1rem;\n    font-weight: 300;\n    line-height: 1.5rem;\n  }\n\n  ${slottedClassName(TextSize.Field2)} {\n    font-size: 0.75rem;\n    font-weight: 300;\n    line-height: 1rem;\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.Body1)} {\n      line-height: 1.3rem;\n    }\n\n    ${slottedClassName(TextSize.Body2)} {\n      line-height: 1.1375rem;\n    }\n\n    ${slottedClassName(TextSize.XL)} {\n      font-size: 3rem;\n      line-height: 3.3rem;\n    }\n    ${slottedClassName(TextSize.L)} {\n      font-size: 2rem;\n      line-height: 2.4rem;\n    }\n    ${slottedClassName(TextSize.M)} {\n      font-size: 1.5rem;\n      line-height: 1.8rem;\n    }\n    ${slottedClassName(TextSize.S)} {\n      font-size: 1.125rem;\n      line-height: 1.35rem;\n    }\n    ${slottedClassName(TextSize.XS)} {\n      font-size: 1rem;\n      line-height: 1.2rem;\n      font-weight: 400;\n    }\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Body1)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1.1375rem;\n    }\n    ${slottedClassName(TextSize.Body2)} {\n      font-size: 0.75rem;\n      line-height: 0.975rem;\n    }\n    ${slottedClassName(TextSize.XL)} {\n      font-size: 1.5rem;\n      line-height: 1.8rem;\n    }\n    ${slottedClassName(TextSize.L)} {\n      font-size: 1.375rem;\n      line-height: 1.65rem;\n    }\n    ${slottedClassName(TextSize.M)} {\n      font-size: 1.25rem;\n      line-height: 1.5rem;\n    }\n  }\n`)}\n`;\n"]}
+{"version":3,"file":"TuixText.styles.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AAEzD,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;IAC7B,SAAS,CAAC;IACV,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC;;;;;;uCAMI,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC;;;;;CAKpC,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;IACzB,SAAS,CAAC;IACV,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;;IAM7B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;;IAM5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;;IAM5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;;IAM5B,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;;IAM7B,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;;IAMhC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;;IAMhC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;IAMjC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;uCAME,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;MAIhC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;MAIhC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;MAI7B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;;;uCAOI,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;;MAKhC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;;MAIhC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;MAKjC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;MAI7B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;MAI5B,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;CAKjC,CAAC;CACD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { TextSize } from './enums/tuix-text.enums';\nimport slottedClassName from '../utils/slottedClassName';\n\nexport const linkFontStyles = css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.Link)} {\n    font-family: 'Rubik', sans-serif;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.25rem;    \n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.Link)} {   \n      font-size: 0.875rem;\n      line-height: 1rem;    \n    }  \n  }\n`)}\n`;\n\nexport const textStyles = css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.XL)} {\n    font-size: 4rem;\n    font-weight: 600;\n    line-height: 4.4rem;\n  }\n\n  ${slottedClassName(TextSize.L)} {\n    font-size: 3.5rem;\n    font-weight: 600;\n    line-height: 4.2rem;\n  }\n\n  ${slottedClassName(TextSize.M)} {\n    font-size: 2.25rem;\n    font-weight: 500;\n    line-height: 2.7rem;\n  }\n\n  ${slottedClassName(TextSize.S)} {\n    font-size: 1.5rem;\n    font-weight: 500;\n    line-height: 1.8rem;\n  }\n\n  ${slottedClassName(TextSize.XS)} {\n    font-size: 1.125rem;\n    font-weight: 500;\n    line-height: 1.35rem;\n  }\n\n  ${slottedClassName(TextSize.Body1)} {\n    font-size: 1rem;\n    font-weight: 300;\n    line-height: 1.4rem;\n  }\n\n  ${slottedClassName(TextSize.Body2)} {\n    font-size: 0.875rem;\n    font-weight: 300;\n    line-height: 1.225rem;\n  }\n\n  ${slottedClassName(TextSize.Field1)} {\n    font-size: 1rem;\n    font-weight: 300;\n    line-height: 1.5rem;\n  }\n\n  ${slottedClassName(TextSize.Field2)} {\n    font-size: 0.75rem;\n    font-weight: 300;\n    line-height: 1rem;\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.Body1)} {\n      line-height: 1.3rem;\n    }\n\n    ${slottedClassName(TextSize.Body2)} {\n      line-height: 1.1375rem;\n    }\n\n    ${slottedClassName(TextSize.XL)} {\n      font-size: 3rem;\n      line-height: 3.3rem;\n    }\n    ${slottedClassName(TextSize.L)} {\n      font-size: 2rem;\n      line-height: 2.4rem;\n    }\n    ${slottedClassName(TextSize.M)} {\n      font-size: 1.5rem;\n      line-height: 1.8rem;\n    }\n    ${slottedClassName(TextSize.S)} {\n      font-size: 1.125rem;\n      line-height: 1.35rem;\n    }\n    ${slottedClassName(TextSize.XS)} {\n      font-size: 1rem;\n      line-height: 1.2rem;\n      font-weight: 400;\n    }\n  }\n\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Body1)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1.1375rem;\n    }\n    ${slottedClassName(TextSize.Body2)} {\n      font-size: 0.75rem;\n      line-height: 0.975rem;\n    }\n    ${slottedClassName(TextSize.Field1)} {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1.25rem;\n    }\n    ${slottedClassName(TextSize.XL)} {\n      font-size: 1.5rem;\n      line-height: 1.8rem;\n    }\n    ${slottedClassName(TextSize.L)} {\n      font-size: 1.375rem;\n      line-height: 1.65rem;\n    }\n    ${slottedClassName(TextSize.M)} {\n      font-size: 1.25rem;\n      line-height: 1.5rem;\n    }\n  }\n`)}\n`;\n"]}

package/dist/src/tuix-text/enums/tuix-text.enums.d.ts

@@ -6,6 +6,7 @@ export declare enum TextSize {
     XS = "xs",
     Body1 = "body1",
     Body2 = "body2",
+    Link = "link",
     Button = "button",
     Field1 = "field1",
     Field2 = "field2"
@@ -14,6 +15,7 @@ export declare enum TextVariant {
     PRIMARY = "primary",
     SECONDARY = "secondary",
     MAIN = "main",
+    DARK_MAIN = "dark_main",
     GREY = "grey",
     LIGHT_GREY = "light_grey",
     DISABLED = "disabled",
@@ -21,7 +23,8 @@ export declare enum TextVariant {
     ERROR = "error",
     SUCCESS = "success",
     LIGHT = "light",
-    DARK = "dark"
+    DARK = "dark",
+    DARK_BLUE = "dark_blue"
 }
 export declare const colorText: Record<TextVariant, string>;
 export declare const colorTextDark: Record<TextVariant, string>;

package/dist/src/tuix-text/enums/tuix-text.enums.js

@@ -9,6 +9,7 @@ export var TextSize;
     TextSize["XS"] = "xs";
     TextSize["Body1"] = "body1";
     TextSize["Body2"] = "body2";
+    TextSize["Link"] = "link";
     TextSize["Button"] = "button";
     TextSize["Field1"] = "field1";
     TextSize["Field2"] = "field2";
@@ -18,6 +19,7 @@ export var TextVariant;
     TextVariant["PRIMARY"] = "primary";
     TextVariant["SECONDARY"] = "secondary";
     TextVariant["MAIN"] = "main";
+    TextVariant["DARK_MAIN"] = "dark_main";
     TextVariant["GREY"] = "grey";
     TextVariant["LIGHT_GREY"] = "light_grey";
     TextVariant["DISABLED"] = "disabled";
@@ -26,9 +28,11 @@ export var TextVariant;
     TextVariant["SUCCESS"] = "success";
     TextVariant["LIGHT"] = "light";
     TextVariant["DARK"] = "dark";
+    TextVariant["DARK_BLUE"] = "dark_blue";
 })(TextVariant || (TextVariant = {}));
 export const colorText = {
     [TextVariant.MAIN]: Palette.MAIN,
+    [TextVariant.DARK_MAIN]: Palette.DARK_MAIN,
     [TextVariant.PRIMARY]: Palette.BLACK,
     [TextVariant.SECONDARY]: Palette.WHITE,
     [TextVariant.GREY]: Palette.NEUTRAL_600,
@@ -39,9 +43,12 @@ export const colorText = {
     [TextVariant.SUCCESS]: Palette.SUCCESS,
     [TextVariant.LIGHT]: Palette.WHITE,
     [TextVariant.DARK]: Palette.BLACK,
+    [TextVariant.DARK_BLUE]: Palette.DARK_MAIN,
 };
 export const colorTextDark = {
     ...colorText,
+    [TextVariant.MAIN]: DarkPalette.MAIN,
+    [TextVariant.DARK_MAIN]: DarkPalette.NEUTRAL_600,
     [TextVariant.PRIMARY]: DarkPalette.WHITE,
     [TextVariant.SECONDARY]: Palette.BLACK,
     [TextVariant.GREY]: DarkPalette.NEUTRAL_600,
@@ -49,5 +56,6 @@ export const colorTextDark = {
     [TextVariant.ERROR]: DarkPalette.ERROR,
     [TextVariant.SUCCESS]: DarkPalette.SUCCESS,
     [TextVariant.LIGHT]: DarkPalette.WHITE,
+    [TextVariant.DARK_BLUE]: DarkPalette.PRIMARY_800,
 };
 //# sourceMappingURL=tuix-text.enums.js.map

package/dist/src/tuix-text/enums/tuix-text.enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"tuix-text.enums.js","sourceRoot":"","sources":["../../../../src/tuix-text/enums/tuix-text.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGrD,MAAM,CAAN,IAAY,QAWX;AAXD,WAAY,QAAQ;IAClB,qBAAS,CAAA;IACT,mBAAO,CAAA;IACP,mBAAO,CAAA;IACP,mBAAO,CAAA;IACP,qBAAS,CAAA;IACT,2BAAe,CAAA;IACf,2BAAe,CAAA;IACf,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;AACnB,CAAC,EAXW,QAAQ,KAAR,QAAQ,QAWnB;AAED,MAAM,CAAN,IAAY,WAYX;AAZD,WAAY,WAAW;IACrB,kCAA6B,CAAA;IAC7B,sCAAiC,CAAA;IACjC,4BAAa,CAAA;IACb,4BAAa,CAAA;IACb,wCAAyB,CAAA;IACzB,oCAAqB,CAAA;IACrB,wCAAyB,CAAA;IACzB,8BAAe,CAAA;IACf,kCAAmB,CAAA;IACnB,8BAAe,CAAA;IACf,4BAAa,CAAA;AACf,CAAC,EAZW,WAAW,KAAX,WAAW,QAYtB;AAED,MAAM,CAAC,MAAM,SAAS,GAAgC;IACpD,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI;IAChC,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK;IACpC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW;IACvC,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,WAAW;IAC7C,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW;IAC3C,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU;IAC5C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IAClC,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO;IACtC,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IAClC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAgC;IACxD,GAAG,SAAS;IACZ,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,KAAK;IACxC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,WAAW;IAC3C,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU;IAChD,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO;IAC1C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;CACvC,CAAC","sourcesContent":["import { Palette } from '../../utils/colors';\nimport { DarkPalette } from '../../utils/darkColors';\nimport { MainVariant } from '../../utils/mainVariant.enum';\n\nexport enum TextSize {\n  XL = 'xl',\n  L = 'l',\n  M = 'm',\n  S = 's',\n  XS = 'xs',\n  Body1 = 'body1',\n  Body2 = 'body2',\n  Button = 'button',\n  Field1 = 'field1',\n  Field2 = 'field2',\n}\n\nexport enum TextVariant {\n  PRIMARY = MainVariant.PRIMARY,\n  SECONDARY = MainVariant.SECONDARY,\n  MAIN = 'main',\n  GREY = 'grey',\n  LIGHT_GREY = 'light_grey',\n  DISABLED = 'disabled',\n  VALIDATION = 'validation',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  LIGHT = 'light',\n  DARK = 'dark',\n}\n\nexport const colorText: Record<TextVariant, string> = {\n  [TextVariant.MAIN]: Palette.MAIN,\n  [TextVariant.PRIMARY]: Palette.BLACK,\n  [TextVariant.SECONDARY]: Palette.WHITE,\n  [TextVariant.GREY]: Palette.NEUTRAL_600,\n  [TextVariant.LIGHT_GREY]: Palette.NEUTRAL_200,\n  [TextVariant.DISABLED]: Palette.PRIMARY_200,\n  [TextVariant.VALIDATION]: Palette.VALIDATION,\n  [TextVariant.ERROR]: Palette.ERROR,\n  [TextVariant.SUCCESS]: Palette.SUCCESS,\n  [TextVariant.LIGHT]: Palette.WHITE,\n  [TextVariant.DARK]: Palette.BLACK,\n};\n\nexport const colorTextDark: Record<TextVariant, string> = {\n  ...colorText,\n  [TextVariant.PRIMARY]: DarkPalette.WHITE,\n  [TextVariant.SECONDARY]: Palette.BLACK,\n  [TextVariant.GREY]: DarkPalette.NEUTRAL_600,\n  [TextVariant.VALIDATION]: DarkPalette.VALIDATION,\n  [TextVariant.ERROR]: DarkPalette.ERROR,\n  [TextVariant.SUCCESS]: DarkPalette.SUCCESS,\n  [TextVariant.LIGHT]: DarkPalette.WHITE,\n};\n"]}
+{"version":3,"file":"tuix-text.enums.js","sourceRoot":"","sources":["../../../../src/tuix-text/enums/tuix-text.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGrD,MAAM,CAAN,IAAY,QAYX;AAZD,WAAY,QAAQ;IAClB,qBAAS,CAAA;IACT,mBAAO,CAAA;IACP,mBAAO,CAAA;IACP,mBAAO,CAAA;IACP,qBAAS,CAAA;IACT,2BAAe,CAAA;IACf,2BAAe,CAAA;IACf,yBAAa,CAAA;IACb,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;AACnB,CAAC,EAZW,QAAQ,KAAR,QAAQ,QAYnB;AAED,MAAM,CAAN,IAAY,WAcX;AAdD,WAAY,WAAW;IACrB,kCAA6B,CAAA;IAC7B,sCAAiC,CAAA;IACjC,4BAAa,CAAA;IACb,sCAAuB,CAAA;IACvB,4BAAa,CAAA;IACb,wCAAyB,CAAA;IACzB,oCAAqB,CAAA;IACrB,wCAAyB,CAAA;IACzB,8BAAe,CAAA;IACf,kCAAmB,CAAA;IACnB,8BAAe,CAAA;IACf,4BAAa,CAAA;IACb,sCAAuB,CAAA;AACzB,CAAC,EAdW,WAAW,KAAX,WAAW,QActB;AAED,MAAM,CAAC,MAAM,SAAS,GAAgC;IACpD,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI;IAChC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS;IAC1C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK;IACpC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW;IACvC,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,WAAW;IAC7C,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW;IAC3C,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU;IAC5C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IAClC,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO;IACtC,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IAClC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK;IACjC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAgC;IACxD,GAAG,SAAS;IACZ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,IAAI;IACpC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW;IAChD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,KAAK;IACxC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,WAAW;IAC3C,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU;IAChD,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO;IAC1C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW;CACjD,CAAC","sourcesContent":["import { Palette } from '../../utils/colors';\nimport { DarkPalette } from '../../utils/darkColors';\nimport { MainVariant } from '../../utils/mainVariant.enum';\n\nexport enum TextSize {\n  XL = 'xl',\n  L = 'l',\n  M = 'm',\n  S = 's',\n  XS = 'xs',\n  Body1 = 'body1',\n  Body2 = 'body2',\n  Link = 'link',\n  Button = 'button',\n  Field1 = 'field1',\n  Field2 = 'field2',\n}\n\nexport enum TextVariant {\n  PRIMARY = MainVariant.PRIMARY,\n  SECONDARY = MainVariant.SECONDARY,\n  MAIN = 'main',\n  DARK_MAIN = 'dark_main',\n  GREY = 'grey',\n  LIGHT_GREY = 'light_grey',\n  DISABLED = 'disabled',\n  VALIDATION = 'validation',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  LIGHT = 'light',\n  DARK = 'dark',\n  DARK_BLUE = 'dark_blue',\n}\n\nexport const colorText: Record<TextVariant, string> = {\n  [TextVariant.MAIN]: Palette.MAIN,\n  [TextVariant.DARK_MAIN]: Palette.DARK_MAIN,\n  [TextVariant.PRIMARY]: Palette.BLACK,\n  [TextVariant.SECONDARY]: Palette.WHITE,\n  [TextVariant.GREY]: Palette.NEUTRAL_600,\n  [TextVariant.LIGHT_GREY]: Palette.NEUTRAL_200,\n  [TextVariant.DISABLED]: Palette.PRIMARY_200,\n  [TextVariant.VALIDATION]: Palette.VALIDATION,\n  [TextVariant.ERROR]: Palette.ERROR,\n  [TextVariant.SUCCESS]: Palette.SUCCESS,\n  [TextVariant.LIGHT]: Palette.WHITE,\n  [TextVariant.DARK]: Palette.BLACK,\n  [TextVariant.DARK_BLUE]: Palette.DARK_MAIN,\n};\n\nexport const colorTextDark: Record<TextVariant, string> = {\n  ...colorText,\n  [TextVariant.MAIN]: DarkPalette.MAIN,\n  [TextVariant.DARK_MAIN]: DarkPalette.NEUTRAL_600,\n  [TextVariant.PRIMARY]: DarkPalette.WHITE,\n  [TextVariant.SECONDARY]: Palette.BLACK,\n  [TextVariant.GREY]: DarkPalette.NEUTRAL_600,\n  [TextVariant.VALIDATION]: DarkPalette.VALIDATION,\n  [TextVariant.ERROR]: DarkPalette.ERROR,\n  [TextVariant.SUCCESS]: DarkPalette.SUCCESS,\n  [TextVariant.LIGHT]: DarkPalette.WHITE,\n  [TextVariant.DARK_BLUE]: DarkPalette.PRIMARY_800,\n};\n"]}

package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js

@@ -101,7 +101,7 @@ export const toggleButtonLabelStyles = css `
     font-size: 1rem;
     line-height: 1.5rem;
     font-weight: 300;
-    font-family: 'rubik', sans-serif;
+    font-family: 'Rubik', sans-serif;
     color: var(--t-text-color-label);
     margin-left: 0.625rem;
   }

package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixToggleButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;IACrC,UAAU;;4BAEc,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;4BAK/B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;;CAE9D,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B7C,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC7C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;wBAElB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;;;;;;;;;CAc/C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBzC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const toggleButtonHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-bg-color-primary: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);\n    --t-toggle-inner-radio: 1rem;\n  }\n  :host([dark]) {\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.NEUTRAL_200)};\n  }\n`;\n\nexport const toggleButtonContainerStyles = css`\n  .t-toggle-button-full-container {\n    display: flex;\n    justify-content: space-between;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-toggle-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-toggle-button-container {\n    display: block;\n    position: relative;\n    height: 1.5rem;\n    width: 3rem;\n  }\n  .t-toggle-button-container .t-toggle-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  .t-radio-button-full-container:not(.t-with-label-left) {\n    justify-content: flex-start;\n  }\n`;\n\nexport const toggleButtonCheckmarkStyles = css`\n  .t-toggle-button-container .t-toggle-button-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: 1.5rem;\n    width: 3rem;\n    border-radius: 0.75rem;\n    background-color: var(--t-bg-color-primary);\n    box-sizing: border-box;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-main-color-tuix);\n  }\n  .t-toggle-button-full-container:hover\n    .t-toggle-button-container\n    .t-toggle-button-checkmark {\n    box-shadow: 0px 4px 4px 0px var(--t-toggle-shadow-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:focus\n    ~ .t-toggle-button-checkmark {\n    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:disabled\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    box-shadow: none;\n  }\n`;\n\nexport const toggleButtonInnerStyles = css`\n  .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {\n    background-color: ${unsafeCSS(Palette.WHITE)};\n    margin: auto auto auto 0.25rem;\n    height: var(--t-toggle-inner-radio);\n    width: var(--t-toggle-inner-radio);\n    border-radius: 50%;\n    display: block;\n    transition: 0.3s;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark\n    .t-toggle-button-inner {\n    transform: translateX(calc(3rem - var(--t-toggle-inner-radio) - 0.5rem));\n  }\n`;\n\nexport const toggleButtonLabelStyles = css`\n  .t-toggle-button-label {\n    display: block;\n    font-size: 1rem;\n    line-height: 1.5rem;\n    font-weight: 300;\n    font-family: 'rubik', sans-serif;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-toggle-button-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-toggle-button-full-container.t-with-label-left .t-toggle-button-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}
+{"version":3,"file":"TuixToggleButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;IACrC,UAAU;;4BAEc,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;4BAK/B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;;CAE9D,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B7C,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC7C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;wBAElB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;;;;;;;;;CAc/C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBzC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const toggleButtonHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-bg-color-primary: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);\n    --t-toggle-inner-radio: 1rem;\n  }\n  :host([dark]) {\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.NEUTRAL_200)};\n  }\n`;\n\nexport const toggleButtonContainerStyles = css`\n  .t-toggle-button-full-container {\n    display: flex;\n    justify-content: space-between;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-toggle-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-toggle-button-container {\n    display: block;\n    position: relative;\n    height: 1.5rem;\n    width: 3rem;\n  }\n  .t-toggle-button-container .t-toggle-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  .t-radio-button-full-container:not(.t-with-label-left) {\n    justify-content: flex-start;\n  }\n`;\n\nexport const toggleButtonCheckmarkStyles = css`\n  .t-toggle-button-container .t-toggle-button-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: 1.5rem;\n    width: 3rem;\n    border-radius: 0.75rem;\n    background-color: var(--t-bg-color-primary);\n    box-sizing: border-box;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-main-color-tuix);\n  }\n  .t-toggle-button-full-container:hover\n    .t-toggle-button-container\n    .t-toggle-button-checkmark {\n    box-shadow: 0px 4px 4px 0px var(--t-toggle-shadow-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:focus\n    ~ .t-toggle-button-checkmark {\n    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:disabled\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    box-shadow: none;\n  }\n`;\n\nexport const toggleButtonInnerStyles = css`\n  .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {\n    background-color: ${unsafeCSS(Palette.WHITE)};\n    margin: auto auto auto 0.25rem;\n    height: var(--t-toggle-inner-radio);\n    width: var(--t-toggle-inner-radio);\n    border-radius: 50%;\n    display: block;\n    transition: 0.3s;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark\n    .t-toggle-button-inner {\n    transform: translateX(calc(3rem - var(--t-toggle-inner-radio) - 0.5rem));\n  }\n`;\n\nexport const toggleButtonLabelStyles = css`\n  .t-toggle-button-label {\n    display: block;\n    font-size: 1rem;\n    line-height: 1.5rem;\n    font-weight: 300;\n    font-family: 'Rubik', sans-serif;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-toggle-button-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-toggle-button-full-container.t-with-label-left .t-toggle-button-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}

package/dist/src/utils/colors.d.ts

@@ -4,6 +4,7 @@ export declare enum Palette {
     PRIMARY_200 = "#D1D1E6",
     PRIMARY_300 = "#A8A9D1",
     MAIN = "#585A9D",
+    DARK_MAIN = "#33355B",
     PRIMARY_600 = "#454584",
     PRIMARY_700 = "#3A396B",
     PRIMARY_800 = "#32325A",
@@ -21,5 +22,6 @@ export declare enum Palette {
     ERROR = "#F93232",
     ERROR_50 = "#FFF5F5",
     ERROR_200 = "#FFD8D8",
-    SECTION_BG = "#FAFAFA"
+    SECTION_BG = "#FAFAFA",
+    SHADOW = "rgba(66, 79, 101, 0.16)"
 }

package/dist/src/utils/colors.js

@@ -5,6 +5,7 @@ export var Palette;
     Palette["PRIMARY_200"] = "#D1D1E6";
     Palette["PRIMARY_300"] = "#A8A9D1";
     Palette["MAIN"] = "#585A9D";
+    Palette["DARK_MAIN"] = "#33355B";
     Palette["PRIMARY_600"] = "#454584";
     Palette["PRIMARY_700"] = "#3A396B";
     Palette["PRIMARY_800"] = "#32325A";
@@ -23,5 +24,6 @@ export var Palette;
     Palette["ERROR_50"] = "#FFF5F5";
     Palette["ERROR_200"] = "#FFD8D8";
     Palette["SECTION_BG"] = "#FAFAFA";
+    Palette["SHADOW"] = "rgba(66, 79, 101, 0.16)";
 })(Palette || (Palette = {}));
 //# sourceMappingURL=colors.js.map

package/dist/src/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,OAwBX;AAxBD,WAAY,OAAO;IACjB,iCAAsB,CAAA;IACtB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,2BAAgB,CAAA;IAChB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,gCAAqB,CAAA;IACrB,4BAAiB,CAAA;IACjB,4BAAiB,CAAA;IACjB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,8BAAmB,CAAA;IACnB,iCAAsB,CAAA;IACtB,oCAAyB,CAAA;IACzB,qCAA0B,CAAA;IAC1B,4BAAiB,CAAA;IACjB,+BAAoB,CAAA;IACpB,gCAAqB,CAAA;IACrB,iCAAsB,CAAA;AACxB,CAAC,EAxBW,OAAO,KAAP,OAAO,QAwBlB","sourcesContent":["export enum Palette {\n  PRIMARY_50 = '#F5F5FA',\n  PRIMARY_100 = '#EBEAF4',\n  PRIMARY_200 = '#D1D1E6',\n  PRIMARY_300 = '#A8A9D1',\n  MAIN = '#585A9D',\n  PRIMARY_600 = '#454584',\n  PRIMARY_700 = '#3A396B',\n  PRIMARY_800 = '#32325A',\n  PRIMARY_900 = '#2E2D4D',\n  PRIMARY_950 = '#1F1E33',\n  SECONDARY = '#BBADFF',\n  WHITE = '#FFFFFF',\n  BLACK = '#121212',\n  NEUTRAL_200 = '#C9C8D3',\n  NEUTRAL_600 = '#8A8894',\n  SUCCESS = '#439F6E',\n  VALIDATION = '#FFB82E',\n  VALIDATION_50 = '#FFFBF4',\n  VALIDATION_200 = '#FFEAC1',\n  ERROR = '#F93232',\n  ERROR_50 = '#FFF5F5',\n  ERROR_200 = '#FFD8D8',\n  SECTION_BG = '#FAFAFA',\n}\n"]}
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,OA0BX;AA1BD,WAAY,OAAO;IACjB,iCAAsB,CAAA;IACtB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,2BAAgB,CAAA;IAChB,gCAAqB,CAAA;IACrB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,gCAAqB,CAAA;IACrB,4BAAiB,CAAA;IACjB,4BAAiB,CAAA;IACjB,kCAAuB,CAAA;IACvB,kCAAuB,CAAA;IACvB,8BAAmB,CAAA;IACnB,iCAAsB,CAAA;IACtB,oCAAyB,CAAA;IACzB,qCAA0B,CAAA;IAC1B,4BAAiB,CAAA;IACjB,+BAAoB,CAAA;IACpB,gCAAqB,CAAA;IACrB,iCAAsB,CAAA;IACtB,6CAAkC,CAAA;AACpC,CAAC,EA1BW,OAAO,KAAP,OAAO,QA0BlB","sourcesContent":["export enum Palette {\n  PRIMARY_50 = '#F5F5FA',\n  PRIMARY_100 = '#EBEAF4',\n  PRIMARY_200 = '#D1D1E6',\n  PRIMARY_300 = '#A8A9D1',\n  MAIN = '#585A9D',\n  DARK_MAIN = '#33355B',\n  PRIMARY_600 = '#454584',\n  PRIMARY_700 = '#3A396B',\n  PRIMARY_800 = '#32325A',\n  PRIMARY_900 = '#2E2D4D',\n  PRIMARY_950 = '#1F1E33',\n  SECONDARY = '#BBADFF',\n  WHITE = '#FFFFFF',\n  BLACK = '#121212',\n  NEUTRAL_200 = '#C9C8D3',\n  NEUTRAL_600 = '#8A8894',\n  SUCCESS = '#439F6E',\n  VALIDATION = '#FFB82E',\n  VALIDATION_50 = '#FFFBF4',\n  VALIDATION_200 = '#FFEAC1',\n  ERROR = '#F93232',\n  ERROR_50 = '#FFF5F5',\n  ERROR_200 = '#FFD8D8',\n  SECTION_BG = '#FAFAFA',\n  SHADOW = 'rgba(66, 79, 101, 0.16)',\n}\n"]}

package/dist/src/utils/darkColors.d.ts

@@ -4,6 +4,7 @@ export declare enum DarkPalette {
     PRIMARY_200 = "#D1D1E6",
     PRIMARY_300 = "#A8A9D1",
     MAIN = "#7A7CB6",
+    DARK_MAIN = "#33355B",
     PRIMARY_600 = "#454584",
     PRIMARY_700 = "#3A396B",
     PRIMARY_800 = "#32325A",
@@ -11,7 +12,7 @@ export declare enum DarkPalette {
     PRIMARY_950 = "#1F1E33",
     SECONDARY = "#BBADFF",
     WHITE = "rgba(255, 255, 255, 0.87)",
-    BLACK = "#1A1A1F",
+    BLACK = "#121212",
     NEUTRAL_200 = "#C9C8D3",
     NEUTRAL_600 = "rgba(255, 255, 255, 0.60)",
     SUCCESS = "#82C5A9",
@@ -21,5 +22,9 @@ export declare enum DarkPalette {
     ERROR = "#FF8486",
     ERROR_50 = "#FFF5F5",
     ERROR_200 = "#FFD8D8",
-    SECTION_BG = "#0E0E0E"
+    SECTION_BG = "#0E0E0E",
+    ELEVATION_1 = "#17171A",
+    ELEVATION_2 = "#1A1A1F",
+    ELEVATION_3 = "#1D1E24",
+    ELEVATION_4 = "#212128"
 }

package/dist/src/utils/darkColors.js

@@ -5,6 +5,7 @@ export var DarkPalette;
     DarkPalette["PRIMARY_200"] = "#D1D1E6";
     DarkPalette["PRIMARY_300"] = "#A8A9D1";
     DarkPalette["MAIN"] = "#7A7CB6";
+    DarkPalette["DARK_MAIN"] = "#33355B";
     DarkPalette["PRIMARY_600"] = "#454584";
     DarkPalette["PRIMARY_700"] = "#3A396B";
     DarkPalette["PRIMARY_800"] = "#32325A";
@@ -12,7 +13,7 @@ export var DarkPalette;
     DarkPalette["PRIMARY_950"] = "#1F1E33";
     DarkPalette["SECONDARY"] = "#BBADFF";
     DarkPalette["WHITE"] = "rgba(255, 255, 255, 0.87)";
-    DarkPalette["BLACK"] = "#1A1A1F";
+    DarkPalette["BLACK"] = "#121212";
     DarkPalette["NEUTRAL_200"] = "#C9C8D3";
     DarkPalette["NEUTRAL_600"] = "rgba(255, 255, 255, 0.60)";
     DarkPalette["SUCCESS"] = "#82C5A9";
@@ -23,5 +24,9 @@ export var DarkPalette;
     DarkPalette["ERROR_50"] = "#FFF5F5";
     DarkPalette["ERROR_200"] = "#FFD8D8";
     DarkPalette["SECTION_BG"] = "#0E0E0E";
+    DarkPalette["ELEVATION_1"] = "#17171A";
+    DarkPalette["ELEVATION_2"] = "#1A1A1F";
+    DarkPalette["ELEVATION_3"] = "#1D1E24";
+    DarkPalette["ELEVATION_4"] = "#212128";
 })(DarkPalette || (DarkPalette = {}));
 //# sourceMappingURL=darkColors.js.map

package/dist/src/utils/darkColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"darkColors.js","sourceRoot":"","sources":["../../../src/utils/darkColors.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,WAwBX;AAxBD,WAAY,WAAW;IACrB,qCAA+B,CAAA;IAC/B,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,+BAAgB,CAAA;IAChB,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,oCAA6B,CAAA;IAC7B,kDAAmC,CAAA;IACnC,gCAAiB,CAAA;IACjB,sCAAiC,CAAA;IACjC,wDAAyC,CAAA;IACzC,kCAAmB,CAAA;IACnB,qCAAsB,CAAA;IACtB,wCAAyB,CAAA;IACzB,yCAA0B,CAAA;IAC1B,gCAAiB,CAAA;IACjB,mCAA2B,CAAA;IAC3B,oCAA6B,CAAA;IAC7B,qCAAsB,CAAA;AACxB,CAAC,EAxBW,WAAW,KAAX,WAAW,QAwBtB","sourcesContent":["import { Palette } from './colors';\n\nexport enum DarkPalette {\n  PRIMARY_50 = Palette.PRIMARY_50,\n  PRIMARY_100 = Palette.PRIMARY_100,\n  PRIMARY_200 = Palette.PRIMARY_200,\n  PRIMARY_300 = Palette.PRIMARY_300,\n  MAIN = '#7A7CB6',\n  PRIMARY_600 = Palette.PRIMARY_600,\n  PRIMARY_700 = Palette.PRIMARY_700,\n  PRIMARY_800 = Palette.PRIMARY_800,\n  PRIMARY_900 = Palette.PRIMARY_900,\n  PRIMARY_950 = Palette.PRIMARY_950,\n  SECONDARY = Palette.SECONDARY,\n  WHITE = 'rgba(255, 255, 255, 0.87)',\n  BLACK = '#1A1A1F',\n  NEUTRAL_200 = Palette.NEUTRAL_200,\n  NEUTRAL_600 = 'rgba(255, 255, 255, 0.60)',\n  SUCCESS = '#82C5A9',\n  VALIDATION = '#FFD489',\n  VALIDATION_50 = '#FFFBF4',\n  VALIDATION_200 = '#FFEAC1',\n  ERROR = '#FF8486',\n  ERROR_50 = Palette.ERROR_50,\n  ERROR_200 = Palette.ERROR_200,\n  SECTION_BG = '#0E0E0E',\n}\n"]}
+{"version":3,"file":"darkColors.js","sourceRoot":"","sources":["../../../src/utils/darkColors.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,WA6BX;AA7BD,WAAY,WAAW;IACrB,qCAA+B,CAAA;IAC/B,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,+BAAgB,CAAA;IAChB,oCAA6B,CAAA;IAC7B,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,sCAAiC,CAAA;IACjC,oCAA6B,CAAA;IAC7B,kDAAmC,CAAA;IACnC,gCAAiB,CAAA;IACjB,sCAAiC,CAAA;IACjC,wDAAyC,CAAA;IACzC,kCAAmB,CAAA;IACnB,qCAAsB,CAAA;IACtB,wCAAyB,CAAA;IACzB,yCAA0B,CAAA;IAC1B,gCAAiB,CAAA;IACjB,mCAA2B,CAAA;IAC3B,oCAA6B,CAAA;IAC7B,qCAAsB,CAAA;IACtB,sCAAuB,CAAA;IACvB,sCAAuB,CAAA;IACvB,sCAAuB,CAAA;IACvB,sCAAuB,CAAA;AACzB,CAAC,EA7BW,WAAW,KAAX,WAAW,QA6BtB","sourcesContent":["import { Palette } from './colors';\n\nexport enum DarkPalette {\n  PRIMARY_50 = Palette.PRIMARY_50,\n  PRIMARY_100 = Palette.PRIMARY_100,\n  PRIMARY_200 = Palette.PRIMARY_200,\n  PRIMARY_300 = Palette.PRIMARY_300,\n  MAIN = '#7A7CB6',\n  DARK_MAIN = Palette.DARK_MAIN,\n  PRIMARY_600 = Palette.PRIMARY_600,\n  PRIMARY_700 = Palette.PRIMARY_700,\n  PRIMARY_800 = Palette.PRIMARY_800,\n  PRIMARY_900 = Palette.PRIMARY_900,\n  PRIMARY_950 = Palette.PRIMARY_950,\n  SECONDARY = Palette.SECONDARY,\n  WHITE = 'rgba(255, 255, 255, 0.87)',\n  BLACK = '#121212',\n  NEUTRAL_200 = Palette.NEUTRAL_200,\n  NEUTRAL_600 = 'rgba(255, 255, 255, 0.60)',\n  SUCCESS = '#82C5A9',\n  VALIDATION = '#FFD489',\n  VALIDATION_50 = '#FFFBF4',\n  VALIDATION_200 = '#FFEAC1',\n  ERROR = '#FF8486',\n  ERROR_50 = Palette.ERROR_50,\n  ERROR_200 = Palette.ERROR_200,\n  SECTION_BG = '#0E0E0E',\n  ELEVATION_1 = '#17171A',\n  ELEVATION_2 = '#1A1A1F',\n  ELEVATION_3 = '#1D1E24',\n  ELEVATION_4 = '#212128',\n}\n"]}