tuix-webcomponents 0.0.21 → 0.1.0

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

@@ -2,17 +2,16 @@ import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { customElement, property } from 'lit/decorators.js';
-import { TextType, TextColor } from '../enums/tuix-text.enums.js';
-import { ColorText } from '../utils/colors.js';
+import { TextSize } from './enums/tuix-text.enums.js';
+import { textStyles } from './TuixText.styles.js';
+import { TextVariant, colorText } from '../utils/colors.js';
+import { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';
 let TuixText = class TuixText extends LitElement {
-    getTextClass() {
-        return `${this.type} ${this.size}`;
-    }
     render() {
         return html ` <div
-      class="text ${this.getTextClass()}"
+      class="text ${this.size}"
       style="${styleMap({
-            color: ColorText[this.color || TextColor.Primary],
+            color: colorText[this.color || TextVariant.PRIMARY],
         })}"
     >
       <slot></slot>
@@ -24,133 +23,16 @@ TuixText.styles = [
       .text {
         font-family: 'Rubik', sans-serif;
       }
-
-      .text.headline.xl {
-        font-size: 4rem;
-        font-weight: 600;
-        line-height: 4.4rem;
-      }
-
-      .text.headline.l {
-        font-size: 3.5rem;
-        font-weight: 600;
-        line-height: 4.2rem;
-      }
-
-      .text.headline.m {
-        font-size: 2.25rem;
-        font-weight: 500;
-        line-height: 2.7rem;
-      }
-
-      .text.headline.s {
-        font-size: 1.5rem;
-        font-weight: 500;
-        line-height: 1.8rem;
-      }
-
-      .text.headline.xs {
-        font-size: 1.125rem;
-        font-weight: 500;
-        line-height: 1.35;
-      }
-
-      .text.body.m {
-        font-size: 1rem;
-        font-weight: 300;
-        line-height: 1.4rem;
-      }
-
-      .text.body.s {
-        font-size: 0.875rem;
-        font-weight: 300;
-        line-height: 1.225rem;
-      }
-
-      .text.button_link.xl {
-        font-size: 1.25rem;
-        font-weight: 400;
-        line-height: 1.5rem;
-      }
-
-      .text.button_link.l {
-        font-size: 1.25rem;
-        font-weight: 400;
-        line-height: 1.5rem;
-      }
-
-      @media only screen and (max-width: 40rem) {
-        .text.button_link.m {
-          font-size: 1rem;
-          font-weight: 400;
-          line-height: 1.25rem;
-        }
-
-        .text.body.m {
-          line-height: 1.3rem;
-        }
-
-        .text.body.s {
-          line-height: 1.1375rem;
-        }
-
-        .text.headline.xl {
-          font-size: 3rem;
-          line-height: 3.3rem;
-        }
-        .text.headline.l {
-          font-size: 2rem;
-          line-height: 2.4rem;
-        }
-        .text.headline.m {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
-        }
-        .text.headline.s {
-          font-size: 1.125rem;
-          line-height: 1.35rem;
-        }
-        .text.headline.xs {
-          font-size: 1rem;
-          line-height: 1.2rem;
-        }
-      }
-
-      @media only screen and (max-width: 20rem) {
-        .text.button_link.s {
-          font-size: 0.875rem;
-          font-weight: 400;
-          line-height: 1rem;
-        }
-        .text.button_link.xs {
-          font-size: 0.875rem;
-          font-weight: 400;
-          line-height: 1rem;
-        }
-        .text.headline.xl {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
-        }
-        .text.headline.l {
-          font-size: 1.375rem;
-          line-height: 1.65rem;
-        }
-        .text.headline.m {
-          font-size: 1.25rem;
-          line-height: 1.5rem;
-        }
-      }
     `,
+    textStyles,
+    buttonSizeStyles,
 ];
 __decorate([
-    property({ type: String })
+    property({ type: TextSize })
 ], TuixText.prototype, "size", void 0);
 __decorate([
-    property({ type: TextColor })
+    property({ type: TextVariant })
 ], TuixText.prototype, "color", void 0);
-__decorate([
-    property({ type: TextType })
-], TuixText.prototype, "type", void 0);
 TuixText = __decorate([
     customElement('tuix-text')
 ], TuixText);

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,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAY,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAsItC,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,YAAY,EAAE;eACxB,QAAQ,CAAC;YAChB,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,OAAO,CAAC;SAClD,CAAC;;;WAGG,CAAC;IACV,CAAC;;AAzIM,eAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwHF;CACF,AA1HY,CA0HX;AAlIF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACZ;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACb;AARL,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAoJpB;SApJY,QAAQ","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TextType, TextColor, TextSize } from '../enums/tuix-text.enums.js';\nimport { ColorText } from '../utils/colors.js';\n\n@customElement('tuix-text')\nexport class TuixText extends LitElement {\n  @property({ type: String })\n  size?: TextSize;\n\n  @property({ type: TextColor })\n  color?: TextColor;\n\n  @property({ type: TextType })\n  type?: TextType;\n\n  static styles = [\n    css`\n      .text {\n        font-family: 'Rubik', sans-serif;\n      }\n\n      .text.headline.xl {\n        font-size: 4rem;\n        font-weight: 600;\n        line-height: 4.4rem;\n      }\n\n      .text.headline.l {\n        font-size: 3.5rem;\n        font-weight: 600;\n        line-height: 4.2rem;\n      }\n\n      .text.headline.m {\n        font-size: 2.25rem;\n        font-weight: 500;\n        line-height: 2.7rem;\n      }\n\n      .text.headline.s {\n        font-size: 1.5rem;\n        font-weight: 500;\n        line-height: 1.8rem;\n      }\n\n      .text.headline.xs {\n        font-size: 1.125rem;\n        font-weight: 500;\n        line-height: 1.35;\n      }\n\n      .text.body.m {\n        font-size: 1rem;\n        font-weight: 300;\n        line-height: 1.4rem;\n      }\n\n      .text.body.s {\n        font-size: 0.875rem;\n        font-weight: 300;\n        line-height: 1.225rem;\n      }\n\n      .text.button_link.xl {\n        font-size: 1.25rem;\n        font-weight: 400;\n        line-height: 1.5rem;\n      }\n\n      .text.button_link.l {\n        font-size: 1.25rem;\n        font-weight: 400;\n        line-height: 1.5rem;\n      }\n\n      @media only screen and (max-width: 40rem) {\n        .text.button_link.m {\n          font-size: 1rem;\n          font-weight: 400;\n          line-height: 1.25rem;\n        }\n\n        .text.body.m {\n          line-height: 1.3rem;\n        }\n\n        .text.body.s {\n          line-height: 1.1375rem;\n        }\n\n        .text.headline.xl {\n          font-size: 3rem;\n          line-height: 3.3rem;\n        }\n        .text.headline.l {\n          font-size: 2rem;\n          line-height: 2.4rem;\n        }\n        .text.headline.m {\n          font-size: 1.5rem;\n          line-height: 1.8rem;\n        }\n        .text.headline.s {\n          font-size: 1.125rem;\n          line-height: 1.35rem;\n        }\n        .text.headline.xs {\n          font-size: 1rem;\n          line-height: 1.2rem;\n        }\n      }\n\n      @media only screen and (max-width: 20rem) {\n        .text.button_link.s {\n          font-size: 0.875rem;\n          font-weight: 400;\n          line-height: 1rem;\n        }\n        .text.button_link.xs {\n          font-size: 0.875rem;\n          font-weight: 400;\n          line-height: 1rem;\n        }\n        .text.headline.xl {\n          font-size: 1.5rem;\n          line-height: 1.8rem;\n        }\n        .text.headline.l {\n          font-size: 1.375rem;\n          line-height: 1.65rem;\n        }\n        .text.headline.m {\n          font-size: 1.25rem;\n          line-height: 1.5rem;\n        }\n      }\n    `,\n  ];\n\n  getTextClass() {\n    return `${this.type} ${this.size}`;\n  }\n\n  render() {\n    return html` <div\n      class=\"text ${this.getTextClass()}\"\n      style=\"${styleMap({\n        color: ColorText[this.color || TextColor.Primary],\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,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAGvE,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAiBtC,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,IAAI;eACd,QAAQ,CAAC;YAChB,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC;SACpD,CAAC;;;WAGG,CAAC;IACV,CAAC;;AAnBM,eAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;IACD,UAAU;IACV,gBAAgB;CACjB,AARY,CAQX;AAbF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACb;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;uCACJ;AALjB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA2BpB;SA3BY,QAAQ","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TextSize } from './enums/tuix-text.enums.js';\nimport { textStyles } from './TuixText.styles.js';\nimport { TextVariant, colorText } from '../utils/colors.js';\nimport { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';\n\n@customElement('tuix-text')\nexport class TuixText extends LitElement {\n  @property({ type: TextSize })\n  size?: TextSize;\n\n  @property({ type: TextVariant })\n  color?: TextVariant.PRIMARY;\n\n  static styles = [\n    css`\n      .text {\n        font-family: 'Rubik', sans-serif;\n      }\n    `,\n    textStyles,\n    buttonSizeStyles,\n  ];\n\n  render() {\n    return html` <div\n      class=\"text ${this.size}\"\n      style=\"${styleMap({\n        color: colorText[this.color || TextVariant.PRIMARY],\n      })}\"\n    >\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,114 @@
+import { css } from 'lit';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+export const textStyles = css `
+  .xl {
+    font-size: 4rem;
+    font-weight: 600;
+    line-height: 4.4rem;
+  }
+
+  .l {
+    font-size: 3.5rem;
+    font-weight: 600;
+    line-height: 4.2rem;
+  }
+
+  .m {
+    font-size: 2.25rem;
+    font-weight: 500;
+    line-height: 2.7rem;
+  }
+
+  .s {
+    font-size: 1.5rem;
+    font-weight: 500;
+    line-height: 1.8rem;
+  }
+
+  .xs {
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.35rem;
+  }
+
+  .body1 {
+    font-size: 1rem;
+    font-weight: 300;
+    line-height: 1.4rem;
+  }
+
+  .body2 {
+    font-size: 0.875rem;
+    font-weight: 300;
+    line-height: 1.225rem;
+  }
+
+  .field1 {
+    font-size: 1rem;
+    font-weight: 300;
+    line-height: 1.5rem;
+  }
+
+  .field2 {
+    font-size: 0.75rem;
+    font-weight: 300;
+    line-height: 1rem;
+  }
+
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    .body1 {
+      line-height: 1.3rem;
+    }
+
+    .body2 {
+      line-height: 1.1375rem;
+    }
+
+    .xl {
+      font-size: 3rem;
+      line-height: 3.3rem;
+    }
+    .l {
+      font-size: 2rem;
+      line-height: 2.4rem;
+    }
+    .m {
+      font-size: 1.5rem;
+      line-height: 1.8rem;
+    }
+    .s {
+      font-size: 1.125rem;
+      line-height: 1.35rem;
+    }
+    .xs {
+      font-size: 1rem;
+      line-height: 1.2rem;
+      font-weight: 400;
+    }
+  }
+
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    .body1 {
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1.1375rem;
+    }
+    .body2 {
+      font-size: 0.75rem;
+      line-height: 0.975rem;
+    }
+    .xl {
+      font-size: 1.5rem;
+      line-height: 1.8rem;
+    }
+    .l {
+      font-size: 1.375rem;
+      line-height: 1.65rem;
+    }
+    .m {
+      font-size: 1.25rem;
+      line-height: 1.5rem;
+    }
+  }
+`;
+//# sourceMappingURL=TuixText.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixText.styles.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAuDU,WAAW,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAgClB,WAAW,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAuBxD,CAAC","sourcesContent":["import { css } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nexport const textStyles = css`\n  .xl {\n    font-size: 4rem;\n    font-weight: 600;\n    line-height: 4.4rem;\n  }\n\n  .l {\n    font-size: 3.5rem;\n    font-weight: 600;\n    line-height: 4.2rem;\n  }\n\n  .m {\n    font-size: 2.25rem;\n    font-weight: 500;\n    line-height: 2.7rem;\n  }\n\n  .s {\n    font-size: 1.5rem;\n    font-weight: 500;\n    line-height: 1.8rem;\n  }\n\n  .xs {\n    font-size: 1.125rem;\n    font-weight: 500;\n    line-height: 1.35rem;\n  }\n\n  .body1 {\n    font-size: 1rem;\n    font-weight: 300;\n    line-height: 1.4rem;\n  }\n\n  .body2 {\n    font-size: 0.875rem;\n    font-weight: 300;\n    line-height: 1.225rem;\n  }\n\n  .field1 {\n    font-size: 1rem;\n    font-weight: 300;\n    line-height: 1.5rem;\n  }\n\n  .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    .body1 {\n      line-height: 1.3rem;\n    }\n\n    .body2 {\n      line-height: 1.1375rem;\n    }\n\n    .xl {\n      font-size: 3rem;\n      line-height: 3.3rem;\n    }\n    .l {\n      font-size: 2rem;\n      line-height: 2.4rem;\n    }\n    .m {\n      font-size: 1.5rem;\n      line-height: 1.8rem;\n    }\n    .s {\n      font-size: 1.125rem;\n      line-height: 1.35rem;\n    }\n    .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    .body1 {\n      font-size: 0.875rem;\n      font-weight: 300;\n      line-height: 1.1375rem;\n    }\n    .body2 {\n      font-size: 0.75rem;\n      line-height: 0.975rem;\n    }\n    .xl {\n      font-size: 1.5rem;\n      line-height: 1.8rem;\n    }\n    .l {\n      font-size: 1.375rem;\n      line-height: 1.65rem;\n    }\n    .m {\n      font-size: 1.25rem;\n      line-height: 1.5rem;\n    }\n  }\n`;\n"]}

package/dist/src/{enums → tuix-text/enums}/tuix-text.enums.d.ts

@@ -3,7 +3,12 @@ export declare enum TextSize {
     L = "l",
     M = "m",
     S = "s",
-    XS = "xs"
+    XS = "xs",
+    Body1 = "body1",
+    Body2 = "body2",
+    Button = "button",
+    Field1 = "field1",
+    Field2 = "field2"
 }
 export declare enum TextColor {
     Primary = "primary",
@@ -15,10 +20,3 @@ export declare enum TextColor {
     Error = "error",
     Success = "success"
 }
-export declare enum TextType {
-    Headline = "headline",
-    Body = "body",
-    Button = "button_link",
-    Link = "button_link",
-    Fields = "fields"
-}

package/dist/src/{enums → tuix-text/enums}/tuix-text.enums.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 export var TextSize;
 (function (TextSize) {
     TextSize["XL"] = "xl";
@@ -6,6 +5,11 @@ export var TextSize;
     TextSize["M"] = "m";
     TextSize["S"] = "s";
     TextSize["XS"] = "xs";
+    TextSize["Body1"] = "body1";
+    TextSize["Body2"] = "body2";
+    TextSize["Button"] = "button";
+    TextSize["Field1"] = "field1";
+    TextSize["Field2"] = "field2";
 })(TextSize || (TextSize = {}));
 export var TextColor;
 (function (TextColor) {
@@ -18,12 +22,4 @@ export var TextColor;
     TextColor["Error"] = "error";
     TextColor["Success"] = "success";
 })(TextColor || (TextColor = {}));
-export var TextType;
-(function (TextType) {
-    TextType["Headline"] = "headline";
-    TextType["Body"] = "body";
-    TextType["Button"] = "button_link";
-    TextType["Link"] = "button_link";
-    TextType["Fields"] = "fields";
-})(TextType || (TextType = {}));
 //# sourceMappingURL=tuix-text.enums.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-text.enums.js","sourceRoot":"","sources":["../../../../src/tuix-text/enums/tuix-text.enums.ts"],"names":[],"mappings":"AAAA,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,SASX;AATD,WAAY,SAAS;IACnB,gCAAmB,CAAA;IACnB,oCAAuB,CAAA;IACvB,0BAAa,CAAA;IACb,oCAAuB,CAAA;IACvB,kCAAqB,CAAA;IACrB,sCAAyB,CAAA;IACzB,4BAAe,CAAA;IACf,gCAAmB,CAAA;AACrB,CAAC,EATW,SAAS,KAAT,SAAS,QASpB","sourcesContent":["export 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 TextColor {\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Grey = 'grey',\n  LightGrey = 'lightGrey',\n  Disabled = 'disabled',\n  Validation = 'validation',\n  Error = 'error',\n  Success = 'success',\n}\n"]}

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

@@ -1,10 +1,12 @@
-export declare const ColorText: {
-    primary: string;
-    secondary: string;
-    grey: string;
-    lightGrey: string;
-    disabled: string;
-    validation: string;
-    error: string;
-    success: string;
-};
+export declare const palette: Record<string, string>;
+export declare enum TextVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    GREY = "grey",
+    LIGHT_GREY = "light_grey",
+    DISABLED = "disabled",
+    VALIDATION = "validation",
+    ERROR = "error",
+    SUCCESS = "success"
+}
+export declare const colorText: Record<TextVariant, string>;

package/dist/src/utils/colors.js

@@ -1,11 +1,46 @@
-export const ColorText = {
-    primary: '#000000',
-    secondary: '#FFFFFF',
-    grey: '#8A8894',
-    lightGrey: '#C9C8D3',
-    disabled: '#BEC0DA',
+export const palette = {
+    primary_50: '#F5F5FA',
+    primary_100: '#EBEAF4',
+    primary_200: '#D1D1E6',
+    primary_300: '#A8A9D1',
+    main: '#585A9D',
+    primary_600: '#454584',
+    primary_700: '#3A396B',
+    primary_800: '#32325A',
+    primary_900: '#2E2D4D',
+    primary_950: '#1F1E33',
+    secondary: '#BBADFF',
+    white: '#FFFFFF',
+    black: '#121212',
+    neutral_200: '#C9C8D3',
+    neutral_600: '#8A8894',
+    success: '#439F6E',
     validation: '#FFB82E',
+    validation_50: '#FFFBF4',
+    validation_200: '#FFEAC1',
     error: '#F93232',
-    success: '#439F6E',
+    error_50: '#FFF5F5',
+    error_200: '#FFD8D8',
+};
+export var TextVariant;
+(function (TextVariant) {
+    TextVariant["PRIMARY"] = "primary";
+    TextVariant["SECONDARY"] = "secondary";
+    TextVariant["GREY"] = "grey";
+    TextVariant["LIGHT_GREY"] = "light_grey";
+    TextVariant["DISABLED"] = "disabled";
+    TextVariant["VALIDATION"] = "validation";
+    TextVariant["ERROR"] = "error";
+    TextVariant["SUCCESS"] = "success";
+})(TextVariant || (TextVariant = {}));
+export const colorText = {
+    [TextVariant.PRIMARY]: palette.black,
+    [TextVariant.SECONDARY]: palette.white,
+    [TextVariant.GREY]: palette.neutral_600,
+    [TextVariant.LIGHT_GREY]: palette.neutral_200,
+    [TextVariant.DISABLED]: palette.primary_200,
+    [TextVariant.VALIDATION]: palette.validation,
+    [TextVariant.ERROR]: palette.error,
+    [TextVariant.SUCCESS]: palette.success,
 };
 //# 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,CAAC,MAAM,SAAS,GAAG;IACvB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC","sourcesContent":["export const ColorText = {\n  primary: '#000000',\n  secondary: '#FFFFFF',\n  grey: '#8A8894',\n  lightGrey: '#C9C8D3',\n  disabled: '#BEC0DA',\n  validation: '#FFB82E',\n  error: '#F93232',\n  success: '#439F6E',\n};\n"]}
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/utils/colors.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAA2B;IAC7C,UAAU,EAAE,SAAS;IACrB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,IAAI,EAAE,SAAS;IACf,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,SAAS;IACzB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,CAAN,IAAY,WASX;AATD,WAAY,WAAW;IACrB,kCAA6B,CAAA;IAC7B,sCAAiC,CAAA;IACjC,4BAAa,CAAA;IACb,wCAAyB,CAAA;IACzB,oCAAqB,CAAA;IACrB,wCAAyB,CAAA;IACzB,8BAAe,CAAA;IACf,kCAAmB,CAAA;AACrB,CAAC,EATW,WAAW,KAAX,WAAW,QAStB;AAED,MAAM,CAAC,MAAM,SAAS,GAAgC;IACpD,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;CACvC,CAAC","sourcesContent":["import { MainVariant } from './mainVariant.enum';\n\nexport const palette: Record<string, string> = {\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};\n\nexport enum TextVariant {\n  PRIMARY = MainVariant.PRIMARY,\n  SECONDARY = MainVariant.SECONDARY,\n  GREY = 'grey',\n  LIGHT_GREY = 'light_grey',\n  DISABLED = 'disabled',\n  VALIDATION = 'validation',\n  ERROR = 'error',\n  SUCCESS = 'success',\n}\n\nexport const colorText: Record<TextVariant, string> = {\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};\n"]}

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

@@ -0,0 +1 @@
+export declare const darkPalette: Record<string, string>;

package/dist/src/utils/darkColors.js

@@ -0,0 +1,11 @@
+import { palette } from './colors';
+export const darkPalette = {
+    ...palette,
+    main: '#7A7CB6',
+    success: '#82C5A9',
+    validation: '#FFD489',
+    error: '#FF8486',
+    error_50: '#FFF5F5',
+    error_200: '#FFD8D8',
+};
+//# sourceMappingURL=darkColors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"darkColors.js","sourceRoot":"","sources":["../../../src/utils/darkColors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,MAAM,CAAC,MAAM,WAAW,GAA2B;IACjD,GAAG,OAAO;IACV,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;CACrB,CAAC","sourcesContent":["import { palette } from './colors';\n\nexport const darkPalette: Record<string, string> = {\n  ...palette,\n  main: '#7A7CB6',\n  success: '#82C5A9',\n  validation: '#FFD489',\n  error: '#FF8486',\n  error_50: '#FFF5F5',\n  error_200: '#FFD8D8',\n};\n"]}

package/dist/src/utils/hex-rgb.d.ts

@@ -0,0 +1,5 @@
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+};

package/dist/src/utils/hex-rgb.js

@@ -0,0 +1,16 @@
+export const hexToRgb = (hex) => {
+    const hexExp = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+    const result = hexExp.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : {
+            r: 0,
+            g: 0,
+            b: 0,
+        };
+};
+//# sourceMappingURL=hex-rgb.js.map

package/dist/src/utils/hex-rgb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hex-rgb.js","sourceRoot":"","sources":["../../../src/utils/hex-rgb.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE;IACtC,MAAM,MAAM,GAAG,2CAA2C,CAAC;IAC3D,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChC,OAAO,MAAM;QACX,CAAC,CAAC;YACE,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;YAC1B,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;YAC1B,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;SAC3B;QACH,CAAC,CAAC;YACE,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACL,CAAC;AACR,CAAC,CAAC","sourcesContent":["export const hexToRgb = (hex: string) => {\n  const hexExp = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n  const result = hexExp.exec(hex);\n  return result\n    ? {\n        r: parseInt(result[1], 16),\n        g: parseInt(result[2], 16),\n        b: parseInt(result[3], 16),\n      }\n    : {\n        r: 0,\n        g: 0,\n        b: 0,\n      };\n};\n"]}

package/dist/src/utils/mainVariant.enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum MainVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary"
+}

package/dist/src/utils/mainVariant.enum.js

@@ -0,0 +1,6 @@
+export var MainVariant;
+(function (MainVariant) {
+    MainVariant["PRIMARY"] = "primary";
+    MainVariant["SECONDARY"] = "secondary";
+})(MainVariant || (MainVariant = {}));
+//# sourceMappingURL=mainVariant.enum.js.map

package/dist/src/utils/mainVariant.enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mainVariant.enum.js","sourceRoot":"","sources":["../../../src/utils/mainVariant.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,kCAAmB,CAAA;IACnB,sCAAuB,CAAA;AACzB,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB","sourcesContent":["export enum MainVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n}\n"]}

package/dist/src/utils/screenSizes.enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum ScreenSizes {
+    TABLET = 640,
+    MOBILE = 320
+}

package/dist/src/utils/screenSizes.enum.js

@@ -0,0 +1,7 @@
+// Sizes in px
+export var ScreenSizes;
+(function (ScreenSizes) {
+    ScreenSizes[ScreenSizes["TABLET"] = 640] = "TABLET";
+    ScreenSizes[ScreenSizes["MOBILE"] = 320] = "MOBILE";
+})(ScreenSizes || (ScreenSizes = {}));
+//# sourceMappingURL=screenSizes.enum.js.map

package/dist/src/utils/screenSizes.enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenSizes.enum.js","sourceRoot":"","sources":["../../../src/utils/screenSizes.enum.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,mDAAY,CAAA;IACZ,mDAAY,CAAA;AACd,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB","sourcesContent":["// Sizes in px\nexport enum ScreenSizes {\n  TABLET = 640,\n  MOBILE = 320,\n}\n"]}