tuix-webcomponents 0.0.20 → 0.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/README.md +29 -5
  2. package/dist/src/index.d.ts +7 -0
  3. package/dist/src/index.js +9 -7
  4. package/dist/src/index.js.map +1 -1
  5. package/dist/src/tuix-button/TuixButton.d.ts +17 -0
  6. package/dist/src/tuix-button/TuixButton.js +108 -0
  7. package/dist/src/tuix-button/TuixButton.js.map +1 -0
  8. package/dist/src/tuix-button/TuixButton.styles.d.ts +2 -0
  9. package/dist/src/tuix-button/TuixButton.styles.js +74 -0
  10. package/dist/src/tuix-button/TuixButton.styles.js.map +1 -0
  11. package/dist/src/tuix-button/enums/tuix-button.enums.d.ts +2 -0
  12. package/dist/src/tuix-button/enums/tuix-button.enums.js +7 -0
  13. package/dist/src/tuix-button/enums/tuix-button.enums.js.map +1 -0
  14. package/dist/src/tuix-dropdown/TuixDropdown.d.ts +46 -0
  15. package/dist/src/tuix-dropdown/TuixDropdown.js +275 -0
  16. package/dist/src/tuix-dropdown/TuixDropdown.js.map +1 -0
  17. package/dist/src/tuix-dropdown/TuixDropdown.styles.d.ts +3 -0
  18. package/dist/src/tuix-dropdown/TuixDropdown.styles.js +85 -0
  19. package/dist/src/tuix-dropdown/TuixDropdown.styles.js.map +1 -0
  20. package/dist/src/tuix-dropdown/enums/tuix-dropdown.enums.d.ts +10 -0
  21. package/dist/src/tuix-dropdown/enums/tuix-dropdown.enums.js +13 -0
  22. package/dist/src/tuix-dropdown/enums/tuix-dropdown.enums.js.map +1 -0
  23. package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.d.ts +1 -0
  24. package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.js +2 -0
  25. package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.js.map +1 -0
  26. package/dist/src/tuix-icon/TuixIcon.d.ts +11 -0
  27. package/dist/src/tuix-icon/TuixIcon.icons.d.ts +6 -0
  28. package/dist/src/tuix-icon/TuixIcon.icons.js +103 -0
  29. package/dist/src/tuix-icon/TuixIcon.icons.js.map +1 -0
  30. package/dist/src/tuix-icon/TuixIcon.js +65 -0
  31. package/dist/src/tuix-icon/TuixIcon.js.map +1 -0
  32. package/dist/src/tuix-icon/enums/tuix-icon.enums.d.ts +43 -0
  33. package/dist/src/tuix-icon/enums/tuix-icon.enums.js +52 -0
  34. package/dist/src/tuix-icon/enums/tuix-icon.enums.js.map +1 -0
  35. package/dist/src/tuix-icon-button/TuixIconButton.d.ts +14 -0
  36. package/dist/src/tuix-icon-button/TuixIconButton.js +80 -0
  37. package/dist/src/tuix-icon-button/TuixIconButton.js.map +1 -0
  38. package/dist/src/tuix-input/TuixInput.d.ts +46 -0
  39. package/dist/src/tuix-input/TuixInput.js +327 -0
  40. package/dist/src/tuix-input/TuixInput.js.map +1 -0
  41. package/dist/src/tuix-input/TuixInput.styles.d.ts +8 -0
  42. package/dist/src/tuix-input/TuixInput.styles.js +307 -0
  43. package/dist/src/tuix-input/TuixInput.styles.js.map +1 -0
  44. package/dist/src/tuix-input/enums/tuix-input.enums.d.ts +36 -0
  45. package/dist/src/tuix-input/enums/tuix-input.enums.js +42 -0
  46. package/dist/src/tuix-input/enums/tuix-input.enums.js.map +1 -0
  47. package/dist/src/tuix-input/interfaces/tuix-input.interface.d.ts +13 -0
  48. package/dist/src/tuix-input/interfaces/tuix-input.interface.js +2 -0
  49. package/dist/src/tuix-input/interfaces/tuix-input.interface.js.map +1 -0
  50. package/dist/src/tuix-link/TuixLink.d.ts +11 -0
  51. package/dist/src/tuix-link/TuixLink.js +72 -0
  52. package/dist/src/tuix-link/TuixLink.js.map +1 -0
  53. package/dist/src/tuix-link/enums/linkTarget.enum.d.ts +6 -0
  54. package/dist/src/tuix-link/enums/linkTarget.enum.js +8 -0
  55. package/dist/src/tuix-link/enums/linkTarget.enum.js.map +1 -0
  56. package/dist/src/tuix-paper/TuixPaper.d.ts +7 -0
  57. package/dist/src/tuix-paper/TuixPaper.js +40 -0
  58. package/dist/src/tuix-paper/TuixPaper.js.map +1 -0
  59. package/dist/src/tuix-paper/enums/tuix-paper.enum.d.ts +7 -0
  60. package/dist/src/tuix-paper/enums/tuix-paper.enum.js +9 -0
  61. package/dist/src/tuix-paper/enums/tuix-paper.enum.js.map +1 -0
  62. package/dist/src/tuix-text/TuixText.d.ts +3 -4
  63. package/dist/src/tuix-text/TuixText.js +23 -144
  64. package/dist/src/tuix-text/TuixText.js.map +1 -1
  65. package/dist/src/tuix-text/TuixText.styles.d.ts +1 -0
  66. package/dist/src/tuix-text/TuixText.styles.js +114 -0
  67. package/dist/src/tuix-text/TuixText.styles.js.map +1 -0
  68. package/dist/src/{enums → tuix-text/enums}/tuix-text.enums.d.ts +6 -8
  69. package/dist/src/tuix-text/enums/tuix-text.enums.js +25 -0
  70. package/dist/src/tuix-text/enums/tuix-text.enums.js.map +1 -0
  71. package/dist/src/utils/colors.d.ts +12 -10
  72. package/dist/src/utils/colors.js +42 -10
  73. package/dist/src/utils/colors.js.map +1 -1
  74. package/dist/src/utils/darkColors.d.ts +1 -0
  75. package/dist/src/utils/darkColors.js +11 -0
  76. package/dist/src/utils/darkColors.js.map +1 -0
  77. package/dist/src/utils/hex-rgb.d.ts +5 -0
  78. package/dist/src/utils/hex-rgb.js +16 -0
  79. package/dist/src/utils/hex-rgb.js.map +1 -0
  80. package/dist/src/utils/mainVariant.enum.d.ts +4 -0
  81. package/dist/src/utils/mainVariant.enum.js +6 -0
  82. package/dist/src/utils/mainVariant.enum.js.map +1 -0
  83. package/dist/src/utils/screenSizes.enum.d.ts +4 -0
  84. package/dist/src/utils/screenSizes.enum.js +7 -0
  85. package/dist/src/utils/screenSizes.enum.js.map +1 -0
  86. package/dist/tsconfig.publish.tsbuildinfo +1 -1
  87. package/package.json +17 -6
  88. package/dist/src/enums/tuix-text.enums.js +0 -32
  89. package/dist/src/enums/tuix-text.enums.js.map +0 -1
@@ -1,21 +1,17 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TuixText = void 0;
4
- const tslib_1 = require("tslib");
5
- const lit_1 = require("lit");
6
- const style_map_js_1 = require("lit/directives/style-map.js");
7
- const decorators_js_1 = require("lit/decorators.js");
8
- const tuix_text_enums_js_1 = require("../enums/tuix-text.enums.js");
9
- const colors_js_1 = require("../utils/colors.js");
10
- let TuixText = class TuixText extends lit_1.LitElement {
11
- getTextClass() {
12
- return `${this.type} ${this.size}`;
13
- }
1
+ import { __decorate } from "tslib";
2
+ import { html, css, LitElement } from 'lit';
3
+ import { styleMap } from 'lit/directives/style-map.js';
4
+ import { customElement, property } from 'lit/decorators.js';
5
+ import { TextSize } from './enums/tuix-text.enums.js';
6
+ import { textStyles } from './TuixText.styles.js';
7
+ import { TextVariant, colorText } from '../utils/colors.js';
8
+ import { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';
9
+ let TuixText = class TuixText extends LitElement {
14
10
  render() {
15
- return (0, lit_1.html) ` <div
16
- class="text ${this.getTextClass()}"
17
- style="${(0, style_map_js_1.styleMap)({
18
- color: colors_js_1.ColorText[this.color || tuix_text_enums_js_1.TextColor.Primary],
11
+ return html ` <div
12
+ class="text ${this.size}"
13
+ style="${styleMap({
14
+ color: colorText[this.color || TextVariant.PRIMARY],
19
15
  })}"
20
16
  >
21
17
  <slot></slot>
@@ -23,139 +19,22 @@ let TuixText = class TuixText extends lit_1.LitElement {
23
19
  }
24
20
  };
25
21
  TuixText.styles = [
26
- (0, lit_1.css) `
22
+ css `
27
23
  .text {
28
24
  font-family: 'Rubik', sans-serif;
29
25
  }
30
-
31
- .text.headline.xl {
32
- font-size: 4rem;
33
- font-weight: 600;
34
- line-height: 4.4rem;
35
- }
36
-
37
- .text.headline.l {
38
- font-size: 3.5rem;
39
- font-weight: 600;
40
- line-height: 4.2rem;
41
- }
42
-
43
- .text.headline.m {
44
- font-size: 2.25rem;
45
- font-weight: 500;
46
- line-height: 2.7rem;
47
- }
48
-
49
- .text.headline.s {
50
- font-size: 1.5rem;
51
- font-weight: 500;
52
- line-height: 1.8rem;
53
- }
54
-
55
- .text.headline.xs {
56
- font-size: 1.125rem;
57
- font-weight: 500;
58
- line-height: 1.35;
59
- }
60
-
61
- .text.body.m {
62
- font-size: 1rem;
63
- font-weight: 300;
64
- line-height: 1.4rem;
65
- }
66
-
67
- .text.body.s {
68
- font-size: 0.875rem;
69
- font-weight: 300;
70
- line-height: 1.225rem;
71
- }
72
-
73
- .text.button_link.xl {
74
- font-size: 1.25rem;
75
- font-weight: 400;
76
- line-height: 1.5rem;
77
- }
78
-
79
- .text.button_link.l {
80
- font-size: 1.25rem;
81
- font-weight: 400;
82
- line-height: 1.5rem;
83
- }
84
-
85
- @media only screen and (max-width: 40rem) {
86
- .text.button_link.m {
87
- font-size: 1rem;
88
- font-weight: 400;
89
- line-height: 1.25rem;
90
- }
91
-
92
- .text.body.m {
93
- line-height: 1.3rem;
94
- }
95
-
96
- .text.body.s {
97
- line-height: 1.1375rem;
98
- }
99
-
100
- .text.headline.xl {
101
- font-size: 3rem;
102
- line-height: 3.3rem;
103
- }
104
- .text.headline.l {
105
- font-size: 2rem;
106
- line-height: 2.4rem;
107
- }
108
- .text.headline.m {
109
- font-size: 1.5rem;
110
- line-height: 1.8rem;
111
- }
112
- .text.headline.s {
113
- font-size: 1.125rem;
114
- line-height: 1.35rem;
115
- }
116
- .text.headline.xs {
117
- font-size: 1rem;
118
- line-height: 1.2rem;
119
- }
120
- }
121
-
122
- @media only screen and (max-width: 20rem) {
123
- .text.button_link.s {
124
- font-size: 0.875rem;
125
- font-weight: 400;
126
- line-height: 1rem;
127
- }
128
- .text.button_link.xs {
129
- font-size: 0.875rem;
130
- font-weight: 400;
131
- line-height: 1rem;
132
- }
133
- .text.headline.xl {
134
- font-size: 1.5rem;
135
- line-height: 1.8rem;
136
- }
137
- .text.headline.l {
138
- font-size: 1.375rem;
139
- line-height: 1.65rem;
140
- }
141
- .text.headline.m {
142
- font-size: 1.25rem;
143
- line-height: 1.5rem;
144
- }
145
- }
146
26
  `,
27
+ textStyles,
28
+ buttonSizeStyles,
147
29
  ];
148
- tslib_1.__decorate([
149
- (0, decorators_js_1.property)({ type: String })
30
+ __decorate([
31
+ property({ type: TextSize })
150
32
  ], TuixText.prototype, "size", void 0);
151
- tslib_1.__decorate([
152
- (0, decorators_js_1.property)({ type: tuix_text_enums_js_1.TextColor })
33
+ __decorate([
34
+ property({ type: TextVariant })
153
35
  ], TuixText.prototype, "color", void 0);
154
- tslib_1.__decorate([
155
- (0, decorators_js_1.property)({ type: tuix_text_enums_js_1.TextType })
156
- ], TuixText.prototype, "type", void 0);
157
- TuixText = tslib_1.__decorate([
158
- (0, decorators_js_1.customElement)('tuix-text')
36
+ TuixText = __decorate([
37
+ customElement('tuix-text')
159
38
  ], TuixText);
160
- exports.TuixText = TuixText;
39
+ export { TuixText };
161
40
  //# sourceMappingURL=TuixText.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TuixText.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.ts"],"names":[],"mappings":";;;;AAAA,6BAA4C;AAC5C,8DAAuD;AACvD,qDAA4D;AAC5D,oEAA4E;AAC5E,kDAA+C;AAG/C,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,gBAAU;IAsItC,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,IAAA,UAAI,EAAA;oBACK,IAAI,CAAC,YAAY,EAAE;eACxB,IAAA,uBAAQ,EAAC;YAChB,KAAK,EAAE,qBAAS,CAAC,IAAI,CAAC,KAAK,IAAI,8BAAS,CAAC,OAAO,CAAC;SAClD,CAAC;;;WAGG,CAAC;IACV,CAAC;;AAzIM,eAAM,GAAG;IACd,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwHF;CACF,AA1HY,CA0HX;AAlIF;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACX;AAGhB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,8BAAS,EAAE,CAAC;uCACZ;AAGlB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,6BAAQ,EAAE,CAAC;sCACb;AARL,QAAQ;IADpB,IAAA,6BAAa,EAAC,WAAW,CAAC;GACd,QAAQ,CAoJpB;AApJY,4BAAQ","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"]}
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,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"]}
@@ -0,0 +1 @@
1
+ export declare const textStyles: import("lit").CSSResult;
@@ -0,0 +1,114 @@
1
+ import { css } from 'lit';
2
+ import { ScreenSizes } from '../utils/screenSizes.enum';
3
+ export const textStyles = css `
4
+ .xl {
5
+ font-size: 4rem;
6
+ font-weight: 600;
7
+ line-height: 4.4rem;
8
+ }
9
+
10
+ .l {
11
+ font-size: 3.5rem;
12
+ font-weight: 600;
13
+ line-height: 4.2rem;
14
+ }
15
+
16
+ .m {
17
+ font-size: 2.25rem;
18
+ font-weight: 500;
19
+ line-height: 2.7rem;
20
+ }
21
+
22
+ .s {
23
+ font-size: 1.5rem;
24
+ font-weight: 500;
25
+ line-height: 1.8rem;
26
+ }
27
+
28
+ .xs {
29
+ font-size: 1.125rem;
30
+ font-weight: 500;
31
+ line-height: 1.35rem;
32
+ }
33
+
34
+ .body1 {
35
+ font-size: 1rem;
36
+ font-weight: 300;
37
+ line-height: 1.4rem;
38
+ }
39
+
40
+ .body2 {
41
+ font-size: 0.875rem;
42
+ font-weight: 300;
43
+ line-height: 1.225rem;
44
+ }
45
+
46
+ .field1 {
47
+ font-size: 1rem;
48
+ font-weight: 300;
49
+ line-height: 1.5rem;
50
+ }
51
+
52
+ .field2 {
53
+ font-size: 0.75rem;
54
+ font-weight: 300;
55
+ line-height: 1rem;
56
+ }
57
+
58
+ @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
59
+ .body1 {
60
+ line-height: 1.3rem;
61
+ }
62
+
63
+ .body2 {
64
+ line-height: 1.1375rem;
65
+ }
66
+
67
+ .xl {
68
+ font-size: 3rem;
69
+ line-height: 3.3rem;
70
+ }
71
+ .l {
72
+ font-size: 2rem;
73
+ line-height: 2.4rem;
74
+ }
75
+ .m {
76
+ font-size: 1.5rem;
77
+ line-height: 1.8rem;
78
+ }
79
+ .s {
80
+ font-size: 1.125rem;
81
+ line-height: 1.35rem;
82
+ }
83
+ .xs {
84
+ font-size: 1rem;
85
+ line-height: 1.2rem;
86
+ font-weight: 400;
87
+ }
88
+ }
89
+
90
+ @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
91
+ .body1 {
92
+ font-size: 0.875rem;
93
+ font-weight: 300;
94
+ line-height: 1.1375rem;
95
+ }
96
+ .body2 {
97
+ font-size: 0.75rem;
98
+ line-height: 0.975rem;
99
+ }
100
+ .xl {
101
+ font-size: 1.5rem;
102
+ line-height: 1.8rem;
103
+ }
104
+ .l {
105
+ font-size: 1.375rem;
106
+ line-height: 1.65rem;
107
+ }
108
+ .m {
109
+ font-size: 1.25rem;
110
+ line-height: 1.5rem;
111
+ }
112
+ }
113
+ `;
114
+ //# sourceMappingURL=TuixText.styles.js.map
@@ -0,0 +1 @@
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"]}
@@ -3,7 +3,12 @@ export declare enum TextSize {
3
3
  L = "l",
4
4
  M = "m",
5
5
  S = "s",
6
- XS = "xs"
6
+ XS = "xs",
7
+ Body1 = "body1",
8
+ Body2 = "body2",
9
+ Button = "button",
10
+ Field1 = "field1",
11
+ Field2 = "field2"
7
12
  }
8
13
  export declare enum TextColor {
9
14
  Primary = "primary",
@@ -15,10 +20,3 @@ export declare enum TextColor {
15
20
  Error = "error",
16
21
  Success = "success"
17
22
  }
18
- export declare enum TextType {
19
- Headline = "headline",
20
- Body = "body",
21
- Button = "button_link",
22
- Link = "button_link",
23
- Fields = "fields"
24
- }
@@ -0,0 +1,25 @@
1
+ export var TextSize;
2
+ (function (TextSize) {
3
+ TextSize["XL"] = "xl";
4
+ TextSize["L"] = "l";
5
+ TextSize["M"] = "m";
6
+ TextSize["S"] = "s";
7
+ TextSize["XS"] = "xs";
8
+ TextSize["Body1"] = "body1";
9
+ TextSize["Body2"] = "body2";
10
+ TextSize["Button"] = "button";
11
+ TextSize["Field1"] = "field1";
12
+ TextSize["Field2"] = "field2";
13
+ })(TextSize || (TextSize = {}));
14
+ export var TextColor;
15
+ (function (TextColor) {
16
+ TextColor["Primary"] = "primary";
17
+ TextColor["Secondary"] = "secondary";
18
+ TextColor["Grey"] = "grey";
19
+ TextColor["LightGrey"] = "lightGrey";
20
+ TextColor["Disabled"] = "disabled";
21
+ TextColor["Validation"] = "validation";
22
+ TextColor["Error"] = "error";
23
+ TextColor["Success"] = "success";
24
+ })(TextColor || (TextColor = {}));
25
+ //# sourceMappingURL=tuix-text.enums.js.map
@@ -0,0 +1 @@
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"]}
@@ -1,10 +1,12 @@
1
- export declare const ColorText: {
2
- primary: string;
3
- secondary: string;
4
- grey: string;
5
- lightGrey: string;
6
- disabled: string;
7
- validation: string;
8
- error: string;
9
- success: string;
10
- };
1
+ export declare const palette: Record<string, string>;
2
+ export declare enum TextVariant {
3
+ PRIMARY = "primary",
4
+ SECONDARY = "secondary",
5
+ GREY = "grey",
6
+ LIGHT_GREY = "light_grey",
7
+ DISABLED = "disabled",
8
+ VALIDATION = "validation",
9
+ ERROR = "error",
10
+ SUCCESS = "success"
11
+ }
12
+ export declare const colorText: Record<TextVariant, string>;
@@ -1,14 +1,46 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ColorText = void 0;
4
- exports.ColorText = {
5
- primary: '#000000',
6
- secondary: '#FFFFFF',
7
- grey: '#8A8894',
8
- lightGrey: '#C9C8D3',
9
- disabled: '#BEC0DA',
1
+ export const palette = {
2
+ primary_50: '#F5F5FA',
3
+ primary_100: '#EBEAF4',
4
+ primary_200: '#D1D1E6',
5
+ primary_300: '#A8A9D1',
6
+ main: '#585A9D',
7
+ primary_600: '#454584',
8
+ primary_700: '#3A396B',
9
+ primary_800: '#32325A',
10
+ primary_900: '#2E2D4D',
11
+ primary_950: '#1F1E33',
12
+ secondary: '#BBADFF',
13
+ white: '#FFFFFF',
14
+ black: '#121212',
15
+ neutral_200: '#C9C8D3',
16
+ neutral_600: '#8A8894',
17
+ success: '#439F6E',
10
18
  validation: '#FFB82E',
19
+ validation_50: '#FFFBF4',
20
+ validation_200: '#FFEAC1',
11
21
  error: '#F93232',
12
- success: '#439F6E',
22
+ error_50: '#FFF5F5',
23
+ error_200: '#FFD8D8',
24
+ };
25
+ export var TextVariant;
26
+ (function (TextVariant) {
27
+ TextVariant["PRIMARY"] = "primary";
28
+ TextVariant["SECONDARY"] = "secondary";
29
+ TextVariant["GREY"] = "grey";
30
+ TextVariant["LIGHT_GREY"] = "light_grey";
31
+ TextVariant["DISABLED"] = "disabled";
32
+ TextVariant["VALIDATION"] = "validation";
33
+ TextVariant["ERROR"] = "error";
34
+ TextVariant["SUCCESS"] = "success";
35
+ })(TextVariant || (TextVariant = {}));
36
+ export const colorText = {
37
+ [TextVariant.PRIMARY]: palette.black,
38
+ [TextVariant.SECONDARY]: palette.white,
39
+ [TextVariant.GREY]: palette.neutral_600,
40
+ [TextVariant.LIGHT_GREY]: palette.neutral_200,
41
+ [TextVariant.DISABLED]: palette.primary_200,
42
+ [TextVariant.VALIDATION]: palette.validation,
43
+ [TextVariant.ERROR]: palette.error,
44
+ [TextVariant.SUCCESS]: palette.success,
13
45
  };
14
46
  //# sourceMappingURL=colors.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/utils/colors.ts"],"names":[],"mappings":";;;AAAa,QAAA,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"]}
1
+ {"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"]}
@@ -0,0 +1 @@
1
+ export declare const darkPalette: Record<string, string>;
@@ -0,0 +1,11 @@
1
+ import { palette } from './colors';
2
+ export const darkPalette = {
3
+ ...palette,
4
+ main: '#7A7CB6',
5
+ success: '#82C5A9',
6
+ validation: '#FFD489',
7
+ error: '#FF8486',
8
+ error_50: '#FFF5F5',
9
+ error_200: '#FFD8D8',
10
+ };
11
+ //# sourceMappingURL=darkColors.js.map
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,5 @@
1
+ export declare const hexToRgb: (hex: string) => {
2
+ r: number;
3
+ g: number;
4
+ b: number;
5
+ };
@@ -0,0 +1,16 @@
1
+ export const hexToRgb = (hex) => {
2
+ const hexExp = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
3
+ const result = hexExp.exec(hex);
4
+ return result
5
+ ? {
6
+ r: parseInt(result[1], 16),
7
+ g: parseInt(result[2], 16),
8
+ b: parseInt(result[3], 16),
9
+ }
10
+ : {
11
+ r: 0,
12
+ g: 0,
13
+ b: 0,
14
+ };
15
+ };
16
+ //# sourceMappingURL=hex-rgb.js.map
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,4 @@
1
+ export declare enum MainVariant {
2
+ PRIMARY = "primary",
3
+ SECONDARY = "secondary"
4
+ }
@@ -0,0 +1,6 @@
1
+ export var MainVariant;
2
+ (function (MainVariant) {
3
+ MainVariant["PRIMARY"] = "primary";
4
+ MainVariant["SECONDARY"] = "secondary";
5
+ })(MainVariant || (MainVariant = {}));
6
+ //# sourceMappingURL=mainVariant.enum.js.map
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,4 @@
1
+ export declare enum ScreenSizes {
2
+ TABLET = 640,
3
+ MOBILE = 320
4
+ }
@@ -0,0 +1,7 @@
1
+ // Sizes in px
2
+ export var ScreenSizes;
3
+ (function (ScreenSizes) {
4
+ ScreenSizes[ScreenSizes["TABLET"] = 640] = "TABLET";
5
+ ScreenSizes[ScreenSizes["MOBILE"] = 320] = "MOBILE";
6
+ })(ScreenSizes || (ScreenSizes = {}));
7
+ //# sourceMappingURL=screenSizes.enum.js.map
@@ -0,0 +1 @@
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"]}