@epam/assets 5.10.2 → 5.11.0-rc.0

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 (41) hide show
  1. package/css/theme/theme_eduverse_dark.css +1164 -0
  2. package/css/theme/theme_eduverse_dark.css.map +1 -0
  3. package/css/theme/theme_eduverse_light.css +939 -0
  4. package/css/theme/theme_eduverse_light.css.map +1 -0
  5. package/css/theme/theme_electric.css +11 -12
  6. package/css/theme/theme_electric.css.map +1 -1
  7. package/css/theme/theme_loveship.css +11 -12
  8. package/css/theme/theme_loveship.css.map +1 -1
  9. package/css/theme/theme_loveship_dark.css +11 -12
  10. package/css/theme/theme_loveship_dark.css.map +1 -1
  11. package/css/theme/theme_promo.css +11 -12
  12. package/css/theme/theme_promo.css.map +1 -1
  13. package/css/theme/theme_vanilla_thunder.css +11 -12
  14. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  15. package/package.json +2 -2
  16. package/theme/no-fonts/theme_electric.scss +7 -0
  17. package/theme/no-fonts/theme_loveship.scss +8 -0
  18. package/theme/no-fonts/theme_loveship_dark.scss +8 -0
  19. package/theme/no-fonts/theme_promo.scss +8 -0
  20. package/theme/theme_eduverse_dark.scss +836 -0
  21. package/theme/theme_eduverse_light.scss +523 -0
  22. package/theme/theme_electric.scss +4 -511
  23. package/theme/theme_loveship.scss +3 -588
  24. package/theme/theme_loveship_dark.scss +3 -817
  25. package/theme/theme_promo.scss +3 -600
  26. package/theme/theme_vanilla_thunder.scss +1 -1
  27. package/theme/{theme_6px.scss → variables/6px_grid.scss} +17 -15
  28. package/theme/variables/6px_grid_eduverse.scss +69 -0
  29. package/theme/variables/electric.scss +508 -0
  30. package/theme/variables/loveship.scss +586 -0
  31. package/theme/variables/loveship_dark.scss +815 -0
  32. package/theme/variables/promo.scss +600 -0
  33. package/theme/variables/tokens/_theme_eduverse_dark.scss +282 -0
  34. package/theme/variables/tokens/_theme_eduverse_dark_mobile.scss +282 -0
  35. package/theme/variables/tokens/_theme_eduverse_light.scss +282 -0
  36. package/theme/variables/tokens/_theme_eduverse_light_mobile.scss +282 -0
  37. /package/theme/{tokens → variables/tokens}/_color_classes.scss +0 -0
  38. /package/theme/{tokens → variables/tokens}/_theme_electric.scss +0 -0
  39. /package/theme/{tokens → variables/tokens}/_theme_loveship_dark.scss +0 -0
  40. /package/theme/{tokens → variables/tokens}/_theme_loveship_light.scss +0 -0
  41. /package/theme/{tokens → variables/tokens}/_theme_promo.scss +0 -0
package/theme/theme_eduverse_light.scss ADDED
@@ -0,0 +1,523 @@
1
+ @use './variables/tokens/_theme_eduverse_light' as tokens;
2
+ @use './variables/6px_grid' as *;
3
+ @use './variables/6px_grid_eduverse' as *;
4
+ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
5
+
6
+
7
+ /* Name convention */
8
+ /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
9
+
10
+ @mixin theme-eduverse_light {
11
+ --uui-font: 'Inter', sans-serif;
12
+ --uui-font-mono: 'Roboto Mono', monospace;
13
+
14
+ --gradient-1: linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
15
+ --gradient-2: linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%);
16
+ --gradient-3: linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%);
17
+ --gradient-4: linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
18
+ --gradient-5: linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
19
+
20
+ /* shadows */
21
+ --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
22
+ --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
23
+ --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
24
+
25
+ @include tokens.theme-tokens;
26
+
27
+ & {
28
+ --uui-border-radius: 3px;
29
+ }
30
+
31
+ /* begin color classes */
32
+ .uui-color-fire {
33
+ --uui-color-5: var(--uui-critical-5);
34
+ --uui-color-10: var(--uui-critical-10);
35
+ --uui-color-20: var(--uui-critical-20);
36
+ --uui-color-50: var(--uui-critical-50);
37
+ --uui-color-60: var(--uui-critical-60);
38
+ --uui-color-70: var(--uui-critical-70);
39
+ --uui-color-contrast: var(--white);
40
+ }
41
+
42
+ .uui-color-night100 {
43
+ --uui-color-5: var(--white);
44
+ --uui-color-10: var(--white);
45
+ --uui-color-20: var(--night50);
46
+ --uui-color-50: var(--night100);
47
+ --uui-color-60: var(--night200);
48
+ --uui-color-70: var(--night300);
49
+ --uui-color-contrast: var(--uui-neutral-70);
50
+ }
51
+
52
+ .uui-color-night300 {
53
+ --uui-color-5: var(--night50);
54
+ --uui-color-10: var(--night100);
55
+ --uui-color-20: var(--night200);
56
+ --uui-color-50: var(--night300);
57
+ --uui-color-60: var(--night400);
58
+ --uui-color-70: var(--night500);
59
+ --uui-color-contrast: var(--uui-neutral-80);
60
+ }
61
+
62
+ .uui-color-night600 {
63
+ --uui-color-5: var(--uui-secondary-5);
64
+ --uui-color-10: var(--uui-secondary-10);
65
+ --uui-color-20: var(--uui-secondary-20);
66
+ --uui-color-50: var(--uui-secondary-50);
67
+ --uui-color-60: var(--uui-secondary-60);
68
+ --uui-color-70: var(--uui-secondary-70);
69
+ --uui-color-contrast: var(--white);
70
+ }
71
+
72
+ .uui-color-night700 {
73
+ --uui-color-5: var(--night400);
74
+ --uui-color-10: var(--night500);
75
+ --uui-color-20: var(--night600);
76
+ --uui-color-50: var(--night700);
77
+ --uui-color-60: var(--night800);
78
+ --uui-color-70: var(--night900);
79
+ --uui-color-contrast: var(--white);
80
+ }
81
+
82
+ .uui-color-sun {
83
+ --uui-color-5: var(--sun-5);
84
+ --uui-color-10: var(--sun-10);
85
+ --uui-color-20: var(--sun-20);
86
+ --uui-color-50: var(--sun-50);
87
+ --uui-color-60: var(--sun-60);
88
+ --uui-color-70: var(--sun-70);
89
+ --uui-color-contrast: var(--uui-neutral-80);
90
+ }
91
+
92
+ .uui-color-yellow {
93
+ --uui-color-5: var(--yellow-5);
94
+ --uui-color-10: var(--yellow-10);
95
+ --uui-color-20: var(--yellow-20);
96
+ --uui-color-50: var(--yellow-50);
97
+ --uui-color-60: var(--yellow-60);
98
+ --uui-color-70: var(--yellow-70);
99
+ --uui-color-contrast: var(--uui-neutral-80);
100
+ }
101
+
102
+ .uui-color-orange {
103
+ --uui-color-5: var(--orange-5);
104
+ --uui-color-10: var(--orange-10);
105
+ --uui-color-20: var(--orange-20);
106
+ --uui-color-50: var(--orange-50);
107
+ --uui-color-60: var(--orange-60);
108
+ --uui-color-70: var(--orange-70);
109
+ --uui-color-contrast: var(--uui-neutral-80);
110
+ }
111
+
112
+ .uui-color-fuchsia {
113
+ --uui-color-5: var(--fuchsia-5);
114
+ --uui-color-10: var(--fuchsia-10);
115
+ --uui-color-20: var(--fuchsia-20);
116
+ --uui-color-50: var(--fuchsia-50);
117
+ --uui-color-60: var(--fuchsia-60);
118
+ --uui-color-70: var(--fuchsia-70);
119
+ --uui-color-contrast: var(--white);
120
+ }
121
+
122
+ .uui-color-purple {
123
+ --uui-color-5: var(--purple-5);
124
+ --uui-color-10: var(--purple-10);
125
+ --uui-color-20: var(--purple-20);
126
+ --uui-color-50: var(--purple-50);
127
+ --uui-color-60: var(--purple-60);
128
+ --uui-color-70: var(--purple-70);
129
+ --uui-color-contrast: var(--white);
130
+ }
131
+
132
+ .uui-color-violet {
133
+ --uui-color-5: var(--violet-5);
134
+ --uui-color-10: var(--violet-10);
135
+ --uui-color-20: var(--violet-20);
136
+ --uui-color-50: var(--violet-50);
137
+ --uui-color-60: var(--violet-60);
138
+ --uui-color-70: var(--violet-70);
139
+ --uui-color-contrast: var(--white);
140
+ }
141
+
142
+ .uui-color-cobalt {
143
+ --uui-color-5: var(--cobalt-5);
144
+ --uui-color-10: var(--cobalt-10);
145
+ --uui-color-20: var(--cobalt-20);
146
+ --uui-color-50: var(--cobalt-50);
147
+ --uui-color-60: var(--cobalt-60);
148
+ --uui-color-70: var(--cobalt-70);
149
+ --uui-color-contrast: var(--white);
150
+ }
151
+
152
+ .uui-color-cyan {
153
+ --uui-color-5: var(--cyan-5);
154
+ --uui-color-10: var(--cyan-10);
155
+ --uui-color-20: var(--cyan-20);
156
+ --uui-color-50: var(--cyan-50);
157
+ --uui-color-60: var(--cyan-60);
158
+ --uui-color-70: var(--cyan-70);
159
+ --uui-color-contrast: var(--uui-neutral-80);
160
+ }
161
+
162
+ .uui-color-mint {
163
+ --uui-color-5: var(--mint-5);
164
+ --uui-color-10: var(--mint-10);
165
+ --uui-color-20: var(--mint-20);
166
+ --uui-color-50: var(--mint-50);
167
+ --uui-color-60: var(--mint-60);
168
+ --uui-color-70: var(--mint-70);
169
+ --uui-color-contrast: var(--uui-neutral-80);
170
+ }
171
+
172
+ /* Accordion */
173
+
174
+ .uui-accordion-container {
175
+ --uui-accordion-border-radius: 6px;
176
+ }
177
+
178
+ /* FileCard */
179
+
180
+ .uui-file_card {
181
+ --uui-file_card-border-radius: 6px;
182
+ }
183
+
184
+ /* Badge */
185
+
186
+ .uui-badge.uui-color-white {
187
+ &.uui-fill-solid {
188
+ --uui-badge-bg-hover: var(--uui-neutral-30);
189
+ --uui-badge-border-hover: var(--uui-neutral-30);
190
+ }
191
+
192
+ &.uui-fill-outline {
193
+ --uui-badge-bg: var(--uui-neutral-0);
194
+ --uui-badge-border: var(--uui-neutral-30);
195
+ --uui-badge-bg-hover: var(--uui-neutral-10);
196
+ --uui-badge-border-hover: var(--uui-neutral-30);
197
+ --uui-badge-caption: var(--uui-neutral-70);
198
+ --uui-badge-caption-hover: var(--uui-neutral-70);
199
+
200
+ .uui-count_indicator {
201
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
202
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
203
+ }
204
+ }
205
+ }
206
+
207
+ .uui-badge.uui-color-neutral {
208
+ --uui-badge-caption: var(--uui-neutral-95);
209
+
210
+ &.uui-fill-solid {
211
+ --uui-badge-bg: var(--uui-neutral-30);
212
+ --uui-badge-bg-hover: var(--uui-neutral-40);
213
+ --uui-badge-border: var(--uui-neutral-30);
214
+ --uui-badge-border-hover: var(--uui-neutral-40);
215
+ --uui-color-contrast: var(--uui-neutral-80);
216
+
217
+ .uui-count_indicator {
218
+ --uui-count_indicator-bg: var(--uui-neutral-0);
219
+ --uui-count_indicator-border: var(--uui-neutral-0);
220
+ }
221
+ }
222
+
223
+ &.uui-fill-outline {
224
+ --uui-badge-bg: var(--uui-neutral-20);
225
+ --uui-badge-border: var(--uui-neutral-40);
226
+ --uui-badge-border-hover: var(--uui-neutral-40);
227
+ --uui-badge-bg-hover: var(--uui-neutral-30);
228
+ --uui-badge-caption-hover: var(--uui-neutral-80);
229
+ }
230
+ }
231
+
232
+ .uui-badge.uui-color-night100 {
233
+ &.uui-fill-solid {
234
+ --uui-badge-bg-hover: var(--uui-neutral-20);
235
+ --uui-badge-border-hover: var(--uui-neutral-20);
236
+ }
237
+
238
+ &.uui-fill-outline {
239
+ --uui-badge-bg: var(--uui-neutral-10);
240
+ --uui-badge-bg-hover: var(--uui-neutral-20);
241
+ --uui-badge-border: var(--uui-neutral-30);
242
+ --uui-badge-border-hover: var(--uui-neutral-30);
243
+ --uui-badge-caption: var(--uui-neutral-70);
244
+ --uui-badge-caption-hover: var(--uui-neutral-70);
245
+
246
+ .uui-count_indicator {
247
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
248
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
249
+ }
250
+ }
251
+ }
252
+
253
+ .uui-badge.uui-color-night600 {
254
+ &.uui-fill-outline {
255
+ --uui-badge-border: var(--uui-neutral-60);
256
+ --uui-badge-border-hover: var(--uui-neutral-60);
257
+ --uui-badge-caption: var(--uui-neutral-95);
258
+ --uui-badge-caption-hover: var(--uui-neutral-80);
259
+ }
260
+ }
261
+
262
+ .uui-badge.uui-color-yellow.uui-fill-outline {
263
+ --uui-badge-border: var(--yellow-20);
264
+ }
265
+
266
+ /* Button */
267
+
268
+ .uui-button:is(.uui-color-secondary, .uui-color-neutral):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {
269
+ --uui-btn-caption: var(--uui-neutral-70);
270
+ }
271
+
272
+ .uui-button.uui-fill-none {
273
+ --uui-btn-bg: var(--uui-color-5);
274
+ --uui-btn-border: transparent;
275
+ --uui-btn-border-hover: transparent;
276
+ --uui-btn-border-active: transparent;
277
+ --uui-btn-border-disabled: transparent;
278
+ }
279
+
280
+ /* IconButton */
281
+
282
+ .uui-icon_button.uui-color-neutral {
283
+ --uui-color-5: var(--uui-secondary-5);
284
+ --uui-color-10: var(--uui-secondary-10);
285
+ --uui-color-20: var(--uui-secondary-20);
286
+ --uui-color-50: var(--uui-secondary-50);
287
+ --uui-color-60: var(--uui-secondary-60);
288
+ --uui-color-70: var(--uui-secondary-70);
289
+ --uui-color-contrast: var(--white);
290
+ }
291
+
292
+ .uui-icon_button.uui-color-white {
293
+ --uui-icon_btn-hover: var(--uui-neutral-20);
294
+ --uui-icon_btn-active: var(--uui-neutral-30);
295
+ }
296
+
297
+ /* LinkButton */
298
+
299
+ .uui-link_button.uui-color-contrast {
300
+ --uui-link_btn-text: var(--uui-neutral-5);
301
+ --uui-link_btn-text-hover: var(--uui-neutral-10);
302
+ --uui-link_btn-text-active: var(--uui-neutral-20);
303
+ }
304
+
305
+ .uui-link_button.uui-color-white {
306
+ --uui-link_btn-text: var(--uui-neutral-5);
307
+ --uui-link_btn-text-hover: var(--uui-neutral-30);
308
+ --uui-link_btn-text-active: var(--uui-neutral-40);
309
+ --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);
310
+ }
311
+
312
+ /* CountIndicator */
313
+
314
+ .uui-count_indicator.uui-color-neutral {
315
+ --uui-count_indicator-bg: var(--uui-neutral-30);
316
+ --uui-count_indicator-border: var(--uui-neutral-30);
317
+ }
318
+
319
+ .uui-count_indicator:is(.uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) {
320
+ --uui-count_indicator-caption: var(--uui-neutral-70);
321
+ }
322
+
323
+ /* Status Indicator */
324
+
325
+ .uui-status_indicator.uui-color-white.uui-fill-outline {
326
+ .uui-status_indicator-dot {
327
+ background-color: color-mix(in srgb, var(--white) 20%, transparent);
328
+ border: 1px solid var(--uui-neutral-40);
329
+ }
330
+ }
331
+
332
+ /* MainMenu */
333
+
334
+ .uui-main_menu {
335
+ --uui-main_menu-bg: var(--uui-neutral-95);
336
+ --uui-main_menu-hover: var(--uui-neutral-90);
337
+ --uui-main_menu-border-active-gradient: var(--gradient-1);
338
+ }
339
+
340
+ .uui-main_menu-dropdown {
341
+ --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-95);
342
+ }
343
+
344
+ /* BurgerMenu */
345
+
346
+ .uui-burger {
347
+ --uui-burger_menu-bg: var(--uui-neutral-95);
348
+ --uui-burger_menu-bg-hover: var(--uui-neutral-95);
349
+ --uui-burger_menu-item: var(--uui-neutral-95);
350
+ }
351
+
352
+ /* Tag */
353
+
354
+ .uui-tag {
355
+ &.uui-fill-outline {
356
+ --uui-tag-fill: var(--uui-neutral-95);
357
+ --uui-tag-caption: var(--uui-text-primary);
358
+ }
359
+
360
+ &.uui-color-white {
361
+ &.uui-fill-solid {
362
+ --uui-tag-fill: var(--uui-neutral-95);
363
+
364
+ .uui-count_indicator {
365
+ --uui-count_indicator-bg: var(--uui-neutral-30);
366
+ --uui-count_indicator-border: var(--uui-neutral-30);
367
+ }
368
+ }
369
+
370
+ &.uui-fill-outline {
371
+ --uui-tag-bg: var(--uui-neutral-0);
372
+ --uui-tag-border: var(--uui-neutral-30);
373
+ --uui-tag-bg-hover: var(--uui-neutral-10);
374
+ --uui-tag-border-hover: var(--uui-neutral-30);
375
+
376
+ .uui-count_indicator {
377
+ --uui-count_indicator-bg: var(--uui-neutral-30);
378
+ --uui-count_indicator-border: var(--uui-neutral-30);
379
+ }
380
+ }
381
+ }
382
+
383
+ &.uui-color-night100 {
384
+ &.uui-fill-solid {
385
+ --uui-tag-fill: var(--uui-neutral-95);
386
+
387
+ .uui-count_indicator {
388
+ --uui-count_indicator-bg: var(--uui-neutral-30);
389
+ --uui-count_indicator-border: var(--uui-neutral-30);
390
+ --uui-count_indicator-caption: var(--uui-neutral-70);
391
+ }
392
+ }
393
+
394
+ &.uui-fill-outline {
395
+ --uui-tag-bg: var(--uui-neutral-5);
396
+ --uui-tag-bg-hover: var(--uui-neutral-10);
397
+ --uui-tag-border: var(--uui-neutral-30);
398
+ --uui-tag-border-hover: var(--uui-neutral-30);
399
+
400
+ .uui-count_indicator {
401
+ --uui-count_indicator-bg: var(--uui-neutral-30);
402
+ --uui-count_indicator-border: var(--uui-neutral-30);
403
+ }
404
+ }
405
+ }
406
+
407
+ &.uui-color-night700 {
408
+ &.uui-fill-solid {
409
+ .uui-count_indicator {
410
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
411
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
412
+ }
413
+ }
414
+
415
+ &.uui-fill-outline {
416
+ --uui-tag-bg: var(--uui-neutral-20);
417
+ --uui-tag-bg-hover: var(--uui-neutral-30);
418
+ --uui-tag-border: var(--uui-neutral-50);
419
+ --uui-tag-border-hover: var(--uui-neutral-50);
420
+ }
421
+ }
422
+
423
+ &.uui-color-warning,
424
+ &.uui-color-sun {
425
+ --uui-tag-fill: var(--uui-neutral-100);
426
+
427
+ &.uui-fill-solid {
428
+ --uui-tag-caption: var(--uui-neutral-80);
429
+
430
+ .uui-count_indicator {
431
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);
432
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);
433
+ --uui-count_indicator-caption: var(--uui-neutral-80);
434
+ }
435
+ }
436
+
437
+ &.uui-fill-outline {
438
+ --uui-tag-caption: var(--uui-neutral-95);
439
+
440
+ .uui-count_indicator {
441
+ --uui-count_indicator-bg: var(--uui-neutral-0);
442
+ --uui-count_indicator-border: var(--uui-neutral-40);
443
+ }
444
+ }
445
+ }
446
+
447
+ &.uui-color-neutral {
448
+ &.uui-fill-solid {
449
+ --uui-tag-bg: var(--uui-neutral-30);
450
+ --uui-tag-bg-hover: var(--uui-neutral-40);
451
+ --uui-tag-border: var(--uui-neutral-30);
452
+ --uui-tag-border-hover: var(--uui-neutral-40);
453
+ --uui-tag-caption: var(--uui-text-primary);
454
+ --uui-tag-fill: var(--uui-neutral-95);
455
+
456
+ .uui-count_indicator {
457
+ --uui-count_indicator-bg: var(--uui-neutral-0);
458
+ --uui-count_indicator-border: var(--uui-neutral-0);
459
+ --uui-count_indicator-caption: var(--uui-neutral-70);
460
+ }
461
+ }
462
+
463
+ &.uui-fill-outline {
464
+ --uui-tag-bg: var(--uui-neutral-20);
465
+ --uui-tag-bg-hover: var(--uui-neutral-30);
466
+ --uui-tag-fill: var(--uui-neutral-95);
467
+
468
+ .uui-count_indicator {
469
+ --uui-count_indicator-bg: var(--uui-neutral-30);
470
+ --uui-count_indicator-border: var(--uui-neutral-30);
471
+ }
472
+ }
473
+ }
474
+ }
475
+
476
+ /* Typography */
477
+
478
+ .uui-typography {
479
+ h1 {
480
+ font-weight: 400;
481
+ }
482
+
483
+ h2, h3, h4, h5 {
484
+ font-weight: 600;
485
+ }
486
+
487
+ .promo-header:is(h1, h2, h3, h4, h5, h6) {
488
+ font-family: var(--uui-font);
489
+ }
490
+
491
+ h1.promo-header {
492
+ font-size: 72px;
493
+ font-weight: 400;
494
+ }
495
+
496
+ h2.promo-header {
497
+ font-size: 44px;
498
+ font-weight: 600;
499
+ }
500
+
501
+ h3.promo-header {
502
+ font-size: 36px;
503
+ }
504
+
505
+ h4.promo-header {
506
+ font-size: 30px;
507
+ }
508
+
509
+ h5.promo-header {
510
+ font-size: 24px;
511
+ }
512
+
513
+ h6.promo-header {
514
+ font-size: 18px;
515
+ }
516
+ }
517
+ }
518
+
519
+ .uui-theme-eduverse_light {
520
+ @include theme-eduverse_light();
521
+ @include uui-6px-grid();
522
+ @include uui-6px-grid-eduverse();
523
+ }