tycho-components 0.0.2 → 0.0.3

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 (26) hide show
  1. package/.storybook/preview.tsx +2 -2
  2. package/package.json +15 -13
  3. package/src/AppModal/AppModal.tsx +14 -12
  4. package/src/AppModal/AppModalConfirm.tsx +10 -11
  5. package/src/AppModal/AppModalRemove.tsx +9 -4
  6. package/src/AppModal/style.scss +1 -1
  7. package/src/Participants/ParticipantCreate/ParticipantCreate.tsx +1 -1
  8. package/src/Participants/Participants.tsx +5 -5
  9. package/src/TextField/TextField.stories.tsx +54 -0
  10. package/src/TextField/TextField.tsx +172 -0
  11. package/src/TextField/TextFieldTheme.ts +70 -0
  12. package/src/TextField/index.tsx +3 -0
  13. package/src/TextField/inputRefManager.ts +24 -0
  14. package/src/TextField/styles.scss +36 -0
  15. package/src/configs/Localization.ts +1 -1
  16. package/src/configs/localization/CommonTexts.ts +1 -0
  17. package/src/configs/localization/ParticipantsTexts.ts +1 -1
  18. package/src/index.ts +1 -0
  19. package/src/new-styles/base/_borders.scss +30 -0
  20. package/src/new-styles/base/_colors.scss +100 -0
  21. package/src/new-styles/base/_displays.scss +207 -0
  22. package/src/new-styles/base/_margins.css +174 -0
  23. package/src/new-styles/base/_spacing.scss +26 -0
  24. package/src/new-styles/base/_tokens.scss +329 -0
  25. package/src/new-styles/base/_typographs.scss +348 -0
  26. package/src/new-styles/main.scss +27 -0
package/src/new-styles/base/_tokens.scss ADDED
@@ -0,0 +1,329 @@
1
+ :root {
2
+ --background-accent: var(--accent-30);
3
+ --background-default: var(--neutral-light-100);
4
+ --background-inverse: var(--neutral-dark-99);
5
+ --border-accent-1: var(--neutral-light-50);
6
+ --border-accent-2: var(--neutral-light-40);
7
+ --border-accent-3: var(--accent-20);
8
+ --border-button: var(--accent-30);
9
+ --border-button-white: var(--accent-100);
10
+ --border-error: var(--semantic-danger-50);
11
+ --border-error-hover: var(--semantic-danger-30);
12
+ --border-hover: var(--accent-50);
13
+ --border-only-high-contrast: #ffffff00;
14
+ --border-subtle-1: var(--neutral-light-90);
15
+ --border-subtle-2: var(--neutral-light-80);
16
+ --border-subtle-3: var(--neutral-light-80);
17
+ --border-subtle-4: var(--neutral-light-100);
18
+ --button-contrast: #00000000;
19
+ --button-danger-active: var(--semantic-danger-70);
20
+ --button-danger-default: var(--semantic-danger-50);
21
+ --button-danger-hover: var(--semantic-danger-60);
22
+ --button-primary-active: var(--accent-50);
23
+ --button-primary-default: var(--accent-30);
24
+ --button-primary-hover: var(--accent-40);
25
+ --button-secondary-active: var(--neutral-dark-40);
26
+ --button-secondary-default: var(--neutral-dark-20);
27
+ --button-secondary-hover: var(--neutral-dark-30);
28
+ --button-tertiary-active: var(--accent-90);
29
+ --button-tertiary-default: var(--accent-100);
30
+ --button-tertiary-hover: var(--accent-95);
31
+ --icon-accent: var(--accent-30);
32
+ --icon-accent-hover: var(--accent-50);
33
+ --icon-dark-fixed: var(--neutral-light-0);
34
+ --icon-disabled: var(--neutral-light-70);
35
+ --icon-error: var(--semantic-danger-40);
36
+ --icon-error-hover: var(--semantic-danger-30);
37
+ --icon-error-on-hover: var(--semantic-danger-30);
38
+ --icon-info: var(--semantic-info-50);
39
+ --icon-light-fixed: var(--neutral-light-100);
40
+ --icon-on-color-accent: var(--accent-30);
41
+ --icon-on-color-dark: var(--neutral-light-0);
42
+ --icon-on-color-light: var(--neutral-light-100);
43
+ --icon-on-disabled: var(--neutral-light-60);
44
+ --icon-placeholder: var(--neutral-light-50);
45
+ --icon-primary: var(--neutral-light-0);
46
+ --icon-secondary: var(--neutral-light-30);
47
+ --icon-success: var(--semantic-success-60);
48
+ --icon-tertiary: var(--neutral-light-40);
49
+ --icon-warning: var(--semantic-warning-50);
50
+ --layer-disabled: var(--neutral-dark-10);
51
+ --layer-field: var(--neutral-dark-20);
52
+ --layer-field-active: var(--accent-99);
53
+ --layer-field-hover: var(--accent-95);
54
+ --layer-hover-1: var(--neutral-light-95);
55
+ --layer-hover-2: var(--neutral-light-90);
56
+ --layer-hover-3: var(--neutral-light-80);
57
+ --layer-layer-1: var(--neutral-light-99);
58
+ --layer-layer-2: var(--neutral-light-95);
59
+ --layer-layer-3: var(--neutral-light-90);
60
+ --layer-semantic-danger: var(--semantic-danger-95);
61
+ --layer-semantic-info: var(--semantic-info-95);
62
+ --layer-semantic-success: var(--semantic-success-95);
63
+ --layer-semantic-warning: var(--semantic-warning-95);
64
+ --layer-tooltip: var(--neutral-dark-99);
65
+ --link-default: var(--semantic-info-40);
66
+ --link-hover: var(--semantic-info-60);
67
+ --link-visited: var(--neutral-dark-60);
68
+ --miscellaneous-brand-gradient-1: #0a5dff00;
69
+ --miscellaneous-brand-gradient-2: #0a5dff14;
70
+ --miscellaneous-scrim: #00000080;
71
+ --miscellaneous-scroll: #00000040;
72
+ --miscellaneous-scroll-hover: var(--neutral-dark-40);
73
+ --miscellaneous-shadow-1: #18274b1f;
74
+ --miscellaneous-shadow-2: #18274b14;
75
+ --miscellaneous-skeleton: var(--neutral-dark-10);
76
+ --miscellaneous-skeleton-light: var(--neutral-dark-30);
77
+ --tag-blue-accent: var(--accent-60);
78
+ --tag-blue-low: var(--accent-90);
79
+ --tag-gray-accent: var(--neutral-light-20);
80
+ --tag-gray-low: var(--neutral-light-90);
81
+ --tag-green-accent: var(--semantic-success-70);
82
+ --tag-green-low: var(--semantic-success-90);
83
+ --tag-red-accent: var(--semantic-danger-50);
84
+ --tag-red-low: var(--semantic-danger-90);
85
+ --tag-violet-accent: var(--semantic-info-50);
86
+ --tag-violet-low: var(--semantic-info-90);
87
+ --tag-yellow-accent: var(--semantic-warning-80);
88
+ --tag-yellow-low: var(--semantic-warning-95);
89
+ --text-accent: var(--accent-30);
90
+ --text-accent-hover: var(--accent-50);
91
+ --text-dark-fixed: var(--neutral-light-0);
92
+ --text-disabled: var(--neutral-light-70);
93
+ --text-error: var(--semantic-danger-40);
94
+ --text-error-hover: var(--semantic-danger-30);
95
+ --text-error-on-hover: var(--semantic-danger-30);
96
+ --text-info: var(--semantic-info-50);
97
+ --text-light-fixed: var(--neutral-light-100);
98
+ --text-on-color-accent: var(--accent-30);
99
+ --text-on-color-dark: var(--neutral-light-0);
100
+ --text-on-color-light: var(--neutral-light-100);
101
+ --text-on-disabled: var(--neutral-light-60);
102
+ --text-placeholder: var(--neutral-light-50);
103
+ --text-placeholder-hover: var(--neutral-light-40);
104
+ --text-primary: var(--neutral-light-0);
105
+ --text-secondary: var(--neutral-light-30);
106
+ --text-success: var(--semantic-success-60);
107
+ --text-tertiary: var(--neutral-light-40);
108
+ --text-warning: var(--semantic-warning-50);
109
+ }
110
+
111
+ body.dark-mode {
112
+ --background-accent: var(--accent-10);
113
+ --background-default: var(--neutral-dark-99);
114
+ --background-inverse: var(--neutral-light-100);
115
+ --border-accent-1: var(--neutral-dark-40);
116
+ --border-accent-2: var(--neutral-dark-30);
117
+ --border-accent-3: var(--accent-95);
118
+ --border-button: var(--accent-60);
119
+ --border-button-white: var(--accent-100);
120
+ --border-error: var(--semantic-danger-70);
121
+ --border-error-hover: var(--semantic-danger-80);
122
+ --border-hover: var(--accent-80);
123
+ --border-only-high-contrast: #ffffff00;
124
+ --border-subtle-1: var(--neutral-dark-80);
125
+ --border-subtle-2: var(--neutral-dark-70);
126
+ --border-subtle-3: var(--neutral-dark-70);
127
+ --border-subtle-4: var(--neutral-dark-100);
128
+ --button-contrast: #00000000;
129
+ --button-danger-active: var(--semantic-danger-80);
130
+ --button-danger-default: var(--semantic-danger-60);
131
+ --button-danger-hover: var(--semantic-danger-70);
132
+ --button-primary-active: var(--accent-80);
133
+ --button-primary-default: var(--accent-60);
134
+ --button-primary-hover: var(--accent-70);
135
+ --button-secondary-active: var(--neutral-light-20);
136
+ --button-secondary-default: var(--neutral-light-0);
137
+ --button-secondary-hover: var(--neutral-light-10);
138
+ --button-tertiary-active: var(--accent-40);
139
+ --button-tertiary-default: var(--accent-10);
140
+ --button-tertiary-hover: var(--accent-20);
141
+ --icon-accent: var(--accent-80);
142
+ --icon-accent-hover: var(--accent-60);
143
+ --icon-dark-fixed: var(--neutral-dark-100);
144
+ --icon-disabled: var(--neutral-dark-70);
145
+ --icon-error: var(--semantic-danger-70);
146
+ --icon-error-hover: var(--semantic-danger-80);
147
+ --icon-error-on-hover: var(--semantic-danger-80);
148
+ --icon-info: var(--semantic-info-80);
149
+ --icon-light-fixed: var(--neutral-dark-0);
150
+ --icon-on-color-accent: var(--accent-95);
151
+ --icon-on-color-dark: var(--neutral-dark-0);
152
+ --icon-on-color-light: var(--neutral-dark-100);
153
+ --icon-on-disabled: var(--neutral-dark-60);
154
+ --icon-placeholder: var(--neutral-dark-50);
155
+ --icon-primary: var(--neutral-dark-0);
156
+ --icon-secondary: var(--neutral-dark-30);
157
+ --icon-success: var(--semantic-success-80);
158
+ --icon-tertiary: var(--neutral-dark-40);
159
+ --icon-warning: var(--semantic-warning-70);
160
+ --layer-disabled: var(--neutral-dark-95);
161
+ --layer-field: var(--neutral-light-30);
162
+ --layer-field-active: var(--neutral-dark-100);
163
+ --layer-field-hover: var(--neutral-dark-80);
164
+ --layer-hover-1: var(--neutral-dark-90);
165
+ --layer-hover-2: var(--neutral-dark-80);
166
+ --layer-hover-3: var(--neutral-dark-70);
167
+ --layer-layer-1: var(--neutral-dark-95);
168
+ --layer-layer-2: var(--neutral-dark-90);
169
+ --layer-layer-3: var(--neutral-light-80);
170
+ --layer-semantic-danger: var(--semantic-danger-20);
171
+ --layer-semantic-info: var(--semantic-info-20);
172
+ --layer-semantic-success: var(--semantic-success-20);
173
+ --layer-semantic-warning: var(--semantic-warning-40);
174
+ --layer-tooltip: var(--neutral-dark-0);
175
+ --link-default: var(--semantic-info-80);
176
+ --link-hover: var(--semantic-info-50);
177
+ --link-visited: var(--neutral-dark-40);
178
+ --miscellaneous-brand-gradient-1: #0a5dff00;
179
+ --miscellaneous-brand-gradient-2: #0a5dff26;
180
+ --miscellaneous-scrim: #000000b2;
181
+ --miscellaneous-scroll: var(--neutral-dark-80);
182
+ --miscellaneous-scroll-hover: var(--neutral-dark-60);
183
+ --miscellaneous-shadow-1: #000000e5;
184
+ --miscellaneous-shadow-2: #000000b2;
185
+ --miscellaneous-skeleton: var(--neutral-dark-99);
186
+ --miscellaneous-skeleton-light: var(--neutral-dark-80);
187
+ --tag-blue-accent: var(--accent-60);
188
+ --tag-blue-low: var(--accent-40);
189
+ --tag-gray-accent: var(--neutral-dark-20);
190
+ --tag-gray-low: var(--neutral-dark-80);
191
+ --tag-green-accent: var(--semantic-success-80);
192
+ --tag-green-low: var(--semantic-success-40);
193
+ --tag-red-accent: var(--semantic-danger-70);
194
+ --tag-red-low: var(--semantic-danger-20);
195
+ --tag-violet-accent: var(--semantic-info-80);
196
+ --tag-violet-low: var(--semantic-info-20);
197
+ --tag-yellow-accent: var(--semantic-warning-80);
198
+ --tag-yellow-low: var(--semantic-warning-20);
199
+ --text-accent: var(--accent-80);
200
+ --text-accent-hover: var(--accent-60);
201
+ --text-dark-fixed: var(--neutral-dark-100);
202
+ --text-disabled: var(--neutral-dark-70);
203
+ --text-error: var(--semantic-danger-70);
204
+ --text-error-hover: var(--semantic-danger-80);
205
+ --text-error-on-hover: var(--semantic-danger-80);
206
+ --text-info: var(--semantic-info-80);
207
+ --text-light-fixed: var(--neutral-dark-0);
208
+ --text-on-color-accent: var(--accent-95);
209
+ --text-on-color-dark: var(--neutral-dark-0);
210
+ --text-on-color-light: var(--neutral-dark-100);
211
+ --text-on-disabled: var(--neutral-dark-60);
212
+ --text-placeholder: var(--neutral-dark-50);
213
+ --text-placeholder-hover: var(--neutral-dark-40);
214
+ --text-primary: var(--neutral-dark-0);
215
+ --text-secondary: var(--neutral-dark-30);
216
+ --text-success: var(--semantic-success-80);
217
+ --text-tertiary: var(--neutral-dark-40);
218
+ --text-warning: var(--semantic-warning-70);
219
+ }
220
+
221
+ body.high-contrast {
222
+ --background-accent: var(--high-contrast-dark);
223
+ --background-default: var(--high-contrast-dark);
224
+ --background-inverse: var(--high-contrast-dark);
225
+ --border-accent-1: var(--high-contrast-light);
226
+ --border-accent-2: var(--high-contrast-light);
227
+ --border-accent-3: var(--high-contrast-light);
228
+ --border-button: var(--high-contrast-light);
229
+ --border-button-white: var(--high-contrast-light);
230
+ --border-error: var(--high-contrast-light);
231
+ --border-error-hover: var(--high-contrast-yellow);
232
+ --border-hover: var(--high-contrast-yellow);
233
+ --border-only-high-contrast: var(--high-contrast-light);
234
+ --border-subtle-1: var(--high-contrast-light);
235
+ --border-subtle-2: var(--high-contrast-light);
236
+ --border-subtle-3: var(--high-contrast-light);
237
+ --border-subtle-4: var(--high-contrast-light);
238
+ --button-contrast: var(--high-contrast-dark);
239
+ --button-danger-active: var(--high-contrast-blue);
240
+ --button-danger-default: var(--high-contrast-light);
241
+ --button-danger-hover: var(--high-contrast-yellow);
242
+ --button-primary-active: var(--high-contrast-blue);
243
+ --button-primary-default: var(--high-contrast-light);
244
+ --button-primary-hover: var(--high-contrast-yellow);
245
+ --button-secondary-active: var(--high-contrast-light);
246
+ --button-secondary-default: var(--high-contrast-light);
247
+ --button-secondary-hover: var(--high-contrast-green);
248
+ --button-tertiary-active: var(--high-contrast-blue);
249
+ --button-tertiary-default: var(--high-contrast-light);
250
+ --button-tertiary-hover: var(--high-contrast-yellow);
251
+ --icon-accent: var(--high-contrast-light);
252
+ --icon-accent-hover: var(--high-contrast-yellow);
253
+ --icon-dark-fixed: var(--high-contrast-dark);
254
+ --icon-disabled: var(--high-contrast-light);
255
+ --icon-error: var(--high-contrast-light);
256
+ --icon-error-hover: var(--high-contrast-yellow);
257
+ --icon-error-on-hover: var(--high-contrast-dark);
258
+ --icon-info: var(--high-contrast-light);
259
+ --icon-light-fixed: var(--high-contrast-light);
260
+ --icon-on-color-accent: var(--high-contrast-dark);
261
+ --icon-on-color-dark: var(--high-contrast-dark);
262
+ --icon-on-color-light: var(--high-contrast-dark);
263
+ --icon-on-disabled: var(--high-contrast-dark);
264
+ --icon-placeholder: var(--high-contrast-dark);
265
+ --icon-primary: var(--high-contrast-light);
266
+ --icon-secondary: var(--high-contrast-yellow);
267
+ --icon-success: var(--high-contrast-light);
268
+ --icon-tertiary: var(--high-contrast-green);
269
+ --icon-warning: var(--high-contrast-light);
270
+ --layer-disabled: var(--high-contrast-light);
271
+ --layer-field: var(--high-contrast-light);
272
+ --layer-field-active: var(--high-contrast-blue);
273
+ --layer-field-hover: var(--high-contrast-yellow);
274
+ --layer-hover-1: var(--high-contrast-yellow);
275
+ --layer-hover-2: var(--high-contrast-yellow);
276
+ --layer-hover-3: var(--high-contrast-yellow);
277
+ --layer-layer-1: var(--high-contrast-dark);
278
+ --layer-layer-2: var(--high-contrast-dark);
279
+ --layer-layer-3: var(--high-contrast-dark);
280
+ --layer-semantic-danger: var(--high-contrast-dark);
281
+ --layer-semantic-info: var(--high-contrast-dark);
282
+ --layer-semantic-success: var(--high-contrast-dark);
283
+ --layer-semantic-warning: var(--high-contrast-dark);
284
+ --layer-tooltip: var(--high-contrast-light);
285
+ --link-default: var(--high-contrast-light);
286
+ --link-hover: var(--high-contrast-yellow);
287
+ --link-visited: var(--high-contrast-blue);
288
+ --miscellaneous-brand-gradient-1: var(--high-contrast-dark);
289
+ --miscellaneous-brand-gradient-2: var(--high-contrast-dark);
290
+ --miscellaneous-scrim: #000000e5;
291
+ --miscellaneous-scroll: var(--high-contrast-light);
292
+ --miscellaneous-scroll-hover: var(--high-contrast-yellow);
293
+ --miscellaneous-shadow-1: #00000000;
294
+ --miscellaneous-shadow-2: #00000000;
295
+ --miscellaneous-skeleton: var(--high-contrast-dark);
296
+ --miscellaneous-skeleton-light: var(--high-contrast-light);
297
+ --tag-blue-accent: var(--high-contrast-green);
298
+ --tag-blue-low: var(--high-contrast-light);
299
+ --tag-gray-accent: var(--high-contrast-green);
300
+ --tag-gray-low: var(--high-contrast-light);
301
+ --tag-green-accent: var(--high-contrast-green);
302
+ --tag-green-low: var(--high-contrast-light);
303
+ --tag-red-accent: var(--high-contrast-green);
304
+ --tag-red-low: var(--high-contrast-light);
305
+ --tag-violet-accent: var(--high-contrast-green);
306
+ --tag-violet-low: var(--high-contrast-light);
307
+ --tag-yellow-accent: var(--high-contrast-green);
308
+ --tag-yellow-low: var(--high-contrast-light);
309
+ --text-accent: var(--high-contrast-light);
310
+ --text-accent-hover: var(--high-contrast-yellow);
311
+ --text-dark-fixed: var(--high-contrast-dark);
312
+ --text-disabled: var(--high-contrast-light);
313
+ --text-error: var(--high-contrast-light);
314
+ --text-error-hover: var(--high-contrast-yellow);
315
+ --text-error-on-hover: var(--high-contrast-dark);
316
+ --text-info: var(--high-contrast-light);
317
+ --text-light-fixed: var(--high-contrast-light);
318
+ --text-on-color-accent: var(--high-contrast-dark);
319
+ --text-on-color-dark: var(--high-contrast-dark);
320
+ --text-on-color-light: var(--high-contrast-dark);
321
+ --text-on-disabled: var(--high-contrast-dark);
322
+ --text-placeholder: var(--high-contrast-yellow);
323
+ --text-placeholder-hover: var(--high-contrast-dark);
324
+ --text-primary: var(--high-contrast-light);
325
+ --text-secondary: var(--high-contrast-yellow);
326
+ --text-success: var(--high-contrast-light);
327
+ --text-tertiary: var(--high-contrast-green);
328
+ --text-warning: var(--high-contrast-light);
329
+ }
package/src/new-styles/base/_typographs.scss ADDED
@@ -0,0 +1,348 @@
1
+ // typographs styles
2
+
3
+ @mixin button-large {
4
+ font-size: 20px;
5
+ font-weight: 600;
6
+ line-height: 100%;
7
+ letter-spacing: 0.32px;
8
+ }
9
+
10
+ @mixin button-medium {
11
+ font-size: 16px;
12
+ font-weight: 600;
13
+ line-height: 100%;
14
+ letter-spacing: 0.32px;
15
+ text-transform: uppercase;
16
+ }
17
+
18
+ @mixin button-small {
19
+ font-size: 14px;
20
+ font-weight: 700;
21
+ line-height: 100%;
22
+ letter-spacing: 0.32px;
23
+ text-transform: uppercase;
24
+ }
25
+
26
+ @mixin label-large-1 {
27
+ font-size: 20px;
28
+ font-weight: 400;
29
+ line-height: 120%;
30
+ letter-spacing: 0px;
31
+ }
32
+
33
+ @mixin label-large-2 {
34
+ font-size: 20px;
35
+ font-weight: 700;
36
+ line-height: 120%;
37
+ letter-spacing: 0px;
38
+ }
39
+
40
+ @mixin label-medium-1 {
41
+ font-size: 16px;
42
+ font-weight: 400;
43
+ line-height: 120%;
44
+ letter-spacing: 0px;
45
+ }
46
+
47
+ @mixin label-medium-2 {
48
+ font-size: 16px;
49
+ font-weight: 700;
50
+ line-height: 120%;
51
+ letter-spacing: 0px;
52
+ }
53
+
54
+ @mixin label-small-1 {
55
+ font-size: 14px;
56
+ font-weight: 400;
57
+ line-height: 100%;
58
+ letter-spacing: 0px;
59
+ }
60
+
61
+ @mixin label-small-2 {
62
+ font-size: 14px;
63
+ font-weight: 700;
64
+ line-height: 100%;
65
+ letter-spacing: 0px;
66
+ }
67
+
68
+ @mixin tag-large-1 {
69
+ font-size: 16px;
70
+ font-weight: 500;
71
+ line-height: 100%;
72
+ letter-spacing: 1px;
73
+ text-transform: uppercase;
74
+ }
75
+
76
+ @mixin tag-large-2 {
77
+ font-family: 'Lora';
78
+ font-size: 20px;
79
+ font-weight: 800;
80
+ line-height: 100%;
81
+ letter-spacing: 1px;
82
+ text-transform: uppercase;
83
+ }
84
+
85
+ @mixin tag-medium-1 {
86
+ font-size: 14px;
87
+ font-weight: 500;
88
+ line-height: 100%;
89
+ letter-spacing: 1px;
90
+ text-transform: uppercase;
91
+ }
92
+
93
+ @mixin tag-medium-2 {
94
+ font-family: 'Lora';
95
+ font-size: 14px;
96
+ font-weight: 800;
97
+ line-height: 100%;
98
+ letter-spacing: 1px;
99
+ text-transform: uppercase;
100
+ }
101
+
102
+ @mixin tag-small-1 {
103
+ font-size: 12px;
104
+ font-weight: 500;
105
+ line-height: 100%;
106
+ letter-spacing: 1px;
107
+ text-transform: uppercase;
108
+ }
109
+
110
+ @mixin tag-small-2 {
111
+ font-family: 'Lora';
112
+ font-size: 12px;
113
+ font-weight: 800;
114
+ line-height: 100%;
115
+ letter-spacing: 1px;
116
+ text-transform: uppercase;
117
+ }
118
+
119
+ @mixin helper-large-1 {
120
+ font-size: 14px;
121
+ font-weight: 400;
122
+ line-height: 100%;
123
+ letter-spacing: 0.16px;
124
+ }
125
+
126
+ @mixin helper-large-2 {
127
+ font-size: 14px;
128
+ font-weight: 700;
129
+ line-height: 120%;
130
+ letter-spacing: 0.16px;
131
+ }
132
+
133
+ @mixin helper-medium-1 {
134
+ font-size: 12px;
135
+ font-weight: 400;
136
+ line-height: 100%;
137
+ letter-spacing: 0.16px;
138
+ }
139
+
140
+ @mixin helper-medium-2 {
141
+ font-size: 12px;
142
+ font-weight: 700;
143
+ line-height: 120%;
144
+ letter-spacing: 0.16px;
145
+ }
146
+
147
+ @mixin helper-small-1 {
148
+ font-size: 10px;
149
+ font-weight: 400;
150
+ line-height: 100%;
151
+ letter-spacing: 0.16px;
152
+ }
153
+
154
+ @mixin helper-small-2 {
155
+ font-size: 10px;
156
+ font-weight: 700;
157
+ line-height: 120%;
158
+ letter-spacing: 0.16px;
159
+ }
160
+
161
+ @mixin body-large-1 {
162
+ font-size: 20px;
163
+ font-weight: 400;
164
+ line-height: 150%;
165
+ letter-spacing: 0px;
166
+ }
167
+
168
+ @mixin body-large-2 {
169
+ font-size: 20px;
170
+ font-weight: 700;
171
+ line-height: 150%;
172
+ letter-spacing: 0px;
173
+ }
174
+
175
+ // sets as important to override MuiTooltip-tooltip
176
+ @mixin body-medium-1 {
177
+ font-size: 16px !important;
178
+ font-weight: 400 !important;
179
+ line-height: 150% !important;
180
+ letter-spacing: 0px !important;
181
+ }
182
+
183
+ @mixin body-medium-2 {
184
+ font-size: 16px;
185
+ font-weight: 400;
186
+ line-height: 150%;
187
+ letter-spacing: 0px;
188
+ }
189
+
190
+ @mixin body-small-1 {
191
+ font-size: 14px;
192
+ font-weight: 400;
193
+ line-height: 150%;
194
+ letter-spacing: 0px;
195
+ }
196
+
197
+ @mixin body-small-2 {
198
+ font-size: 14px;
199
+ font-weight: 400;
200
+ line-height: 150%;
201
+ letter-spacing: 0px;
202
+ }
203
+
204
+ @mixin link-large {
205
+ font-size: 20px;
206
+ font-weight: 400;
207
+ line-height: 120%;
208
+ letter-spacing: 0px;
209
+ decoration: underline;
210
+ }
211
+
212
+ @mixin link-medium {
213
+ font-size: 16px;
214
+ font-weight: 400;
215
+ line-height: 120%;
216
+ letter-spacing: 0px;
217
+ decoration: underline;
218
+ }
219
+
220
+ @mixin link-small {
221
+ font-size: 14px;
222
+ font-weight: 700;
223
+ line-height: 120%;
224
+ letter-spacing: 0px;
225
+ decoration: underline;
226
+ }
227
+
228
+ @mixin heading-x-large {
229
+ font-family: 'Lora';
230
+ font-size: 64px;
231
+ font-weight: 500;
232
+ line-height: 120%;
233
+ letter-spacing: 0px;
234
+ }
235
+
236
+ @mixin heading-large {
237
+ font-family: 'Lora';
238
+ font-size: 56px;
239
+ font-weight: 500;
240
+ line-height: 120%;
241
+ letter-spacing: 0px;
242
+ }
243
+
244
+ @mixin heading-medium {
245
+ font-family: 'Lora';
246
+ font-size: 48px;
247
+ font-weight: 500;
248
+ line-height: 120%;
249
+ letter-spacing: 0px;
250
+ }
251
+
252
+ @mixin heading-small {
253
+ font-family: 'Lora';
254
+ font-size: 40px;
255
+ font-weight: 500;
256
+ line-height: 120%;
257
+ letter-spacing: 0px;
258
+ }
259
+
260
+ @mixin heading-x-small {
261
+ font-family: 'Lora';
262
+ font-size: 32px;
263
+ font-weight: 500;
264
+ line-height: 120%;
265
+ letter-spacing: 0px;
266
+ }
267
+
268
+ @mixin subtitle-large-1 {
269
+ font-size: 32px;
270
+ font-weight: 300;
271
+ line-height: 120%;
272
+ letter-spacing: 0px;
273
+ }
274
+
275
+ @mixin subtitle-large-2 {
276
+ font-size: 32px;
277
+ font-weight: 600;
278
+ line-height: 120%;
279
+ letter-spacing: 0px;
280
+ }
281
+
282
+ @mixin subtitle-medium-1 {
283
+ font-size: 28px;
284
+ font-weight: 300;
285
+ line-height: 120%;
286
+ letter-spacing: 0px;
287
+ }
288
+
289
+ @mixin subtitle-medium-2 {
290
+ font-size: 28px;
291
+ font-weight: 600;
292
+ line-height: 120%;
293
+ letter-spacing: 0px;
294
+ }
295
+
296
+ @mixin subtitle-small-1 {
297
+ font-size: 20px;
298
+ font-weight: 300;
299
+ line-height: 120%;
300
+ letter-spacing: 1px;
301
+ }
302
+
303
+ @mixin subtitle-small-2 {
304
+ font-size: 20px;
305
+ font-weight: 600;
306
+ line-height: 120%;
307
+ letter-spacing: 1px;
308
+ }
309
+
310
+ @mixin display-x-large {
311
+ font-family: 'Lora';
312
+ font-size: 144px;
313
+ font-weight: 300;
314
+ line-height: 100%;
315
+ letter-spacing: 0px;
316
+ }
317
+
318
+ @mixin display-large {
319
+ font-family: 'Lora';
320
+ font-size: 120px;
321
+ font-weight: 300;
322
+ line-height: 100%;
323
+ letter-spacing: 0px;
324
+ }
325
+
326
+ @mixin display-medium {
327
+ font-family: 'Lora';
328
+ font-size: 112px;
329
+ font-weight: 300;
330
+ line-height: 100%;
331
+ letter-spacing: 0px;
332
+ }
333
+
334
+ @mixin display-small {
335
+ font-family: 'Lora';
336
+ font-size: 96px;
337
+ font-weight: 300;
338
+ line-height: 100%;
339
+ letter-spacing: 0px;
340
+ }
341
+
342
+ @mixin display-x-small {
343
+ font-family: 'Lora';
344
+ font-size: 80px;
345
+ font-weight: 300;
346
+ line-height: 100%;
347
+ letter-spacing: 0px;
348
+ }
package/src/new-styles/main.scss ADDED
@@ -0,0 +1,27 @@
1
+ @import 'base/borders';
2
+ @import 'base/colors';
3
+ @import 'base/displays';
4
+ @import 'base/margins';
5
+ @import 'base/spacing';
6
+ @import 'base/tokens';
7
+ @import 'base/typographs';
8
+ @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0..1,0&display=swap');
9
+
10
+ .MuiTooltip-tooltip {
11
+ display: flex;
12
+ align-items: center;
13
+ background-color: var(--layer-tooltip) !important;
14
+ height: 40px;
15
+ max-width: 280px;
16
+ padding: var(--spacing-100) var(--spacing-150);
17
+ border-radius: var(--radius-100);
18
+ @include body-medium-1;
19
+ }
20
+
21
+ .MuiTooltip-arrow {
22
+ color: var(--layer-tooltip) !important;
23
+ }
24
+
25
+ .pointer {
26
+ cursor: pointer;
27
+ }