@epam/assets 5.7.1 → 5.8.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 (63) hide show
  1. package/css/theme/theme_electric.css +51 -20
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +48 -81
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +131 -104
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +52 -45
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  10. package/icons/common/radio-point-10.svg +13 -13
  11. package/icons/legacy/btn_cross.svg +22 -22
  12. package/icons/legacy/btn_tick.svg +22 -22
  13. package/icons/legacy/calendar-30.svg +12 -12
  14. package/icons/legacy/calendar-36.svg +14 -14
  15. package/icons/legacy/excel.svg +12 -12
  16. package/icons/legacy/filter-24.svg +11 -11
  17. package/icons/legacy/filter.svg +12 -12
  18. package/icons/legacy/folding-arrow.svg +14 -14
  19. package/icons/legacy/gear.svg +14 -14
  20. package/icons/legacy/help-24.svg +11 -11
  21. package/icons/legacy/help.svg +21 -21
  22. package/icons/legacy/label_info.svg +14 -14
  23. package/icons/legacy/lens.svg +17 -17
  24. package/icons/legacy/modal-close-cross.svg +22 -22
  25. package/icons/legacy/more.svg +20 -20
  26. package/icons/legacy/pencil.svg +12 -12
  27. package/icons/legacy/plus.svg +12 -12
  28. package/icons/legacy/sliders.svg +12 -12
  29. package/icons/legacy/sort-24.svg +15 -15
  30. package/icons/legacy/sort-desc-24.svg +15 -15
  31. package/icons/legacy/sort.svg +4 -4
  32. package/icons/legacy/trash.svg +12 -12
  33. package/icons/loaders/circle_loader_30.svg +69 -69
  34. package/icons/loaders/dots_loader_30.svg +39 -39
  35. package/icons/templates/generic-24.svg +40 -40
  36. package/icons/templates/generic-30.svg +43 -43
  37. package/icons/templates/generic.svg +40 -40
  38. package/icons/templates/tall.svg +69 -69
  39. package/package.json +3 -3
  40. package/readme.md +6 -6
  41. package/scss/electric/font-faces.scss +138 -138
  42. package/scss/font-faces.scss +3 -3
  43. package/scss/fonts.scss +2 -2
  44. package/scss/index.scss +4 -4
  45. package/scss/loveship/colors.scss +100 -100
  46. package/scss/loveship/font-faces.scss +186 -186
  47. package/scss/loveship/fonts.scss +23 -23
  48. package/scss/loveship/typography.scss +160 -160
  49. package/scss/loveship-colors.scss +2 -2
  50. package/scss/promo/colors.scss +100 -100
  51. package/scss/promo/font-faces.scss +168 -168
  52. package/scss/promo/fonts.scss +17 -17
  53. package/scss/promo/typography.scss +175 -175
  54. package/scss/typography.scss +2 -2
  55. package/theme/theme_electric.scss +576 -539
  56. package/theme/theme_loveship.scss +607 -644
  57. package/theme/theme_loveship_dark.scss +853 -817
  58. package/theme/theme_promo.scss +653 -636
  59. package/theme/theme_vanilla_thunder.scss +480 -480
  60. package/theme/tokens/_theme_electric.scss +265 -265
  61. package/theme/tokens/_theme_loveship_dark.scss +263 -263
  62. package/theme/tokens/{_theme_loveship.scss → _theme_loveship_light.scss} +263 -263
  63. package/theme/tokens/_theme_promo.scss +263 -263
package/theme/theme_promo.scss CHANGED
@@ -1,636 +1,653 @@
1
- @use '../scss/promo/font-faces';
2
- @use './tokens/_theme_promo.scss' as tokens;
3
- /* Name convention */
4
- /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
5
-
6
- @mixin theme-promo {
7
- @include tokens.theme-tokens;
8
- --uui-font: 'Source Sans Pro', sans-serif;
9
- --uui-font-mono: 'Roboto Mono', monospace;
10
-
11
- // theme specific fonts
12
- --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
13
- --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
14
-
15
- /* contrast colors */
16
- --uui-primary-contrast: var(--white);
17
-
18
- --uui-accent-contrast: var(--white);
19
-
20
- --uui-secondary-contrast: var(--white);
21
-
22
- --uui-critical-contrast: var(--white);
23
-
24
- --uui-info-contrast: var(--white);
25
-
26
- --uui-success-contrast: var(--white);
27
-
28
- --uui-warning-contrast: var(--gray80);
29
-
30
- --uui-error-contrast: var(--white);
31
-
32
- /* shadows */
33
- --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
34
- --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);
35
- --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);
36
-
37
- --uui-border-radius: 0;
38
-
39
- /* core variables end */
40
-
41
- /* ------------------------------------ */
42
-
43
- /* begin color classes */
44
-
45
- .uui-color-accent,
46
- .uui-color-green {
47
- --uui-color-5: var(--uui-accent-5);
48
- --uui-color-10: var(--uui-accent-10);
49
- --uui-color-20: var(--uui-accent-20);
50
- --uui-color-50: var(--uui-accent-50);
51
- --uui-color-60: var(--uui-accent-60);
52
- --uui-color-70: var(--uui-accent-70);
53
- --uui-color-contrast: var(--uui-accent-contrast);
54
- }
55
-
56
- .uui-color-primary,
57
- .uui-color-blue {
58
- --uui-color-5: var(--uui-primary-5);
59
- --uui-color-10: var(--uui-primary-10);
60
- --uui-color-20: var(--uui-primary-20);
61
- --uui-color-50: var(--uui-primary-50);
62
- --uui-color-60: var(--uui-primary-60);
63
- --uui-color-70: var(--uui-primary-70);
64
- --uui-color-contrast: var(--uui-primary-contrast);
65
- }
66
-
67
- .uui-color-secondary,
68
- .uui-color-neutral,
69
- .uui-color-gray {
70
- --uui-color-5: var(--uui-secondary-5);
71
- --uui-color-10: var(--uui-secondary-10);
72
- --uui-color-20: var(--uui-secondary-20);
73
- --uui-color-50: var(--uui-secondary-50);
74
- --uui-color-60: var(--uui-secondary-60);
75
- --uui-color-70: var(--uui-secondary-70);
76
- --uui-color-contrast: var(--uui-secondary-contrast);
77
- }
78
-
79
- .uui-color-critical,
80
- .uui-color-red {
81
- --uui-color-5: var(--uui-critical-5);
82
- --uui-color-10: var(--uui-critical-10);
83
- --uui-color-20: var(--uui-critical-20);
84
- --uui-color-50: var(--uui-critical-50);
85
- --uui-color-60: var(--uui-critical-60);
86
- --uui-color-70: var(--uui-critical-70);
87
- --uui-color-contrast: var(--uui-critical-contrast);
88
- }
89
-
90
- .uui-color-info {
91
- --uui-color-5: var(--uui-info-5);
92
- --uui-color-10: var(--uui-info-10);
93
- --uui-color-20: var(--uui-info-20);
94
- --uui-color-50: var(--uui-info-50);
95
- --uui-color-60: var(--uui-info-60);
96
- --uui-color-70: var(--uui-info-70);
97
- --uui-color-contrast: var(--uui-info-contrast);
98
- }
99
-
100
- .uui-color-success {
101
- --uui-color-5: var(--uui-success-5);
102
- --uui-color-10: var(--uui-success-10);
103
- --uui-color-20: var(--uui-success-20);
104
- --uui-color-50: var(--uui-success-50);
105
- --uui-color-60: var(--uui-success-60);
106
- --uui-color-70: var(--uui-success-70);
107
- --uui-color-contrast: var(--uui-success-contrast);
108
- }
109
-
110
- .uui-color-warning,
111
- .uui-color-amber {
112
- --uui-color-5: var(--uui-warning-5);
113
- --uui-color-10: var(--uui-warning-10);
114
- --uui-color-20: var(--uui-warning-20);
115
- --uui-color-50: var(--uui-warning-50);
116
- --uui-color-60: var(--uui-warning-60);
117
- --uui-color-70: var(--uui-warning-70);
118
- --uui-color-contrast: var(--uui-warning-contrast);
119
- }
120
-
121
- .uui-color-error {
122
- --uui-color-5: var(--uui-error-5);
123
- --uui-color-10: var(--uui-error-10);
124
- --uui-color-20: var(--uui-error-20);
125
- --uui-color-50: var(--uui-error-50);
126
- --uui-color-60: var(--uui-error-60);
127
- --uui-color-70: var(--uui-error-70);
128
- --uui-color-contrast: var(--uui-error-contrast);
129
- }
130
-
131
- .uui-color-white {
132
- --uui-color-5: var(--white);
133
- --uui-color-10: var(--white);
134
- --uui-color-20: var(--white);
135
- --uui-color-50: var(--white);
136
- --uui-color-60: var(--gray10);
137
- --uui-color-70: var(--gray20);
138
- --uui-color-contrast: var(--gray80);
139
- }
140
-
141
- .uui-color-gray5 {
142
- --uui-color-5: var(--white);
143
- --uui-color-10: var(--white);
144
- --uui-color-20: var(--white);
145
- --uui-color-50: var(--gray5);
146
- --uui-color-60: var(--gray10);
147
- --uui-color-70: var(--gray20);
148
- --uui-color-contrast: var(--gray80);
149
- }
150
-
151
- .uui-link_button.uui-color-contrast,
152
- .uui-color-gray10 {
153
- --uui-color-5: var(--white);
154
- --uui-color-10: var(--white);
155
- --uui-color-20: var(--gray5);
156
- --uui-color-50: var(--gray10);
157
- --uui-color-60: var(--gray20);
158
- --uui-color-70: var(--gray30);
159
- --uui-color-contrast: var(--gray80);
160
- }
161
-
162
- .uui-color-gray30 {
163
- --uui-color-5: var(--gray20);
164
- --uui-color-10: var(--gray30);
165
- --uui-color-20: var(--gray40);
166
- --uui-color-50: var(--gray30);
167
- --uui-color-60: var(--gray40);
168
- --uui-color-70: var(--gray50);
169
- --uui-color-contrast: var(--gray80);
170
- }
171
-
172
- .uui-color-gray50 {
173
- --uui-color-5: var(--gray5);
174
- --uui-color-10: var(--gray10);
175
- --uui-color-20: var(--gray20);
176
- --uui-color-50: var(--gray50);
177
- --uui-color-60: var(--gray60);
178
- --uui-color-70: var(--gray70);
179
- --uui-color-contrast: var(--gray80);
180
- }
181
-
182
- .uui-button.uui-color-gray50,
183
- .uui-color-gray60 {
184
- --uui-color-5: var(--gray20);
185
- --uui-color-10: var(--gray60);
186
- --uui-color-20: var(--gray40);
187
- --uui-color-50: var(--gray60);
188
- --uui-color-60: var(--gray70);
189
- --uui-color-70: var(--gray80);
190
- --uui-color-contrast: var(--white);
191
- }
192
-
193
- .uui-color-gray80 {
194
- --uui-color-5: var(--white);
195
- --uui-color-10: var(--gray10);
196
- --uui-color-20: var(--gray20);
197
- --uui-color-50: var(--gray80);
198
- --uui-color-60: var(--gray80);
199
- --uui-color-70: var(--gray80);
200
- --uui-color-contrast: var(--white);
201
- }
202
-
203
- .uui-color-gray90 {
204
- --uui-color-5: var(--gray60);
205
- --uui-color-10: var(--gray70);
206
- --uui-color-20: var(--gray80);
207
- --uui-color-50: var(--gray90);
208
- --uui-color-60: var(--gray90);
209
- --uui-color-70: var(--gray90);
210
- --uui-color-contrast: var(--white);
211
- }
212
-
213
- .uui-color-yellow {
214
- --uui-color-5: var(--yellow-5);
215
- --uui-color-10: var(--yellow-10);
216
- --uui-color-20: var(--yellow-20);
217
- --uui-color-50: var(--yellow-50);
218
- --uui-color-60: var(--yellow-60);
219
- --uui-color-70: var(--yellow-70);
220
- --uui-color-contrast: var(--gray80);
221
- }
222
-
223
- .uui-color-orange {
224
- --uui-color-5: var(--orange-5);
225
- --uui-color-10: var(--orange-10);
226
- --uui-color-20: var(--orange-20);
227
- --uui-color-50: var(--orange-50);
228
- --uui-color-60: var(--orange-60);
229
- --uui-color-70: var(--orange-70);
230
- --uui-color-contrast: var(--gray80);
231
- }
232
-
233
- .uui-color-fuchsia {
234
- --uui-color-5: var(--fuchsia-5);
235
- --uui-color-10: var(--fuchsia-10);
236
- --uui-color-20: var(--fuchsia-20);
237
- --uui-color-50: var(--fuchsia-50);
238
- --uui-color-60: var(--fuchsia-60);
239
- --uui-color-70: var(--fuchsia-70);
240
- --uui-color-contrast: var(--white);
241
- }
242
-
243
- .uui-color-purple {
244
- --uui-color-5: var(--purple-5);
245
- --uui-color-10: var(--purple-10);
246
- --uui-color-20: var(--purple-20);
247
- --uui-color-50: var(--purple-50);
248
- --uui-color-60: var(--purple-60);
249
- --uui-color-70: var(--purple-70);
250
- --uui-color-contrast: var(--white);
251
- }
252
-
253
- .uui-color-violet {
254
- --uui-color-5: var(--violet-5);
255
- --uui-color-10: var(--violet-10);
256
- --uui-color-20: var(--violet-20);
257
- --uui-color-50: var(--violet-50);
258
- --uui-color-60: var(--violet-60);
259
- --uui-color-70: var(--violet-70);
260
- --uui-color-contrast: var(--white);
261
- }
262
-
263
- .uui-color-cobalt {
264
- --uui-color-5: var(--cobalt-5);
265
- --uui-color-10: var(--cobalt-10);
266
- --uui-color-20: var(--cobalt-20);
267
- --uui-color-50: var(--cobalt-50);
268
- --uui-color-60: var(--cobalt-60);
269
- --uui-color-70: var(--cobalt-70);
270
- --uui-color-contrast: var(--white);
271
- }
272
-
273
- .uui-color-cyan {
274
- --uui-color-5: var(--cyan-5);
275
- --uui-color-10: var(--cyan-10);
276
- --uui-color-20: var(--cyan-20);
277
- --uui-color-50: var(--cyan-50);
278
- --uui-color-60: var(--cyan-60);
279
- --uui-color-70: var(--cyan-70);
280
- --uui-color-contrast: var(--gray80);
281
- }
282
-
283
- .uui-color-mint {
284
- --uui-color-5: var(--mint-5);
285
- --uui-color-10: var(--mint-10);
286
- --uui-color-20: var(--mint-20);
287
- --uui-color-50: var(--mint-50);
288
- --uui-color-60: var(--mint-60);
289
- --uui-color-70: var(--mint-70);
290
- --uui-color-contrast: var(--gray80);
291
- }
292
-
293
- /* Badge */
294
-
295
- .uui-badge.uui-color-white {
296
- &.uui-fill-outline {
297
- --uui-badge-bg-hover: var(--uui-neutral-10);
298
- --uui-badge-border: var(--uui-neutral-30);
299
- --uui-badge-border-hover: var(--uui-neutral-30);
300
- --uui-badge-caption: var(--uui-neutral-80);
301
- --uui-badge-caption-hover: var(--uui-neutral-80);
302
- }
303
- }
304
-
305
- .uui-badge.uui-color-neutral,
306
- .uui-badge.uui-color-gray30 {
307
- &.uui-fill-solid {
308
- --uui-badge-bg: var(--uui-neutral-30);
309
- --uui-badge-bg-hover: var(--uui-neutral-40);
310
- --uui-badge-border: var(--uui-neutral-30);
311
- --uui-badge-border-hover: var(--uui-neutral-40);
312
- --uui-color-contrast: var(--uui-neutral-80);
313
- }
314
-
315
- &.uui-fill-outline {
316
- --uui-badge-bg: var(--uui-neutral-20);
317
- --uui-badge-border: var(--uui-neutral-40);
318
- --uui-badge-bg-hover: var(--uui-neutral-30);
319
- --uui-badge-caption: var(--uui-neutral-80);
320
- --uui-badge-caption-hover: var(--uui-neutral-80);
321
- }
322
- }
323
-
324
- .uui-badge.uui-color-gray10 {
325
- &.uui-fill-solid {
326
- --uui-badge-bg-hover: var(--uui-neutral-20);
327
- --uui-badge-border-hover: var(--uui-neutral-20);
328
- }
329
-
330
- &.uui-fill-outline {
331
- --uui-badge-bg: var(--uui-neutral-10);
332
- --uui-badge-bg-hover: var(--uui-neutral-20);
333
- --uui-badge-border: var(--uui-neutral-30);
334
- --uui-badge-border-hover: var(--uui-neutral-30);
335
- --uui-badge-caption: var(--uui-neutral-80);
336
- --uui-badge-caption-hover: var(--uui-neutral-80);
337
- }
338
- }
339
-
340
- .uui-badge.uui-color-gray60 {
341
- &.uui-fill-outline {
342
- --uui-badge-bg-hover: var(--uui-neutral-30);
343
- --uui-badge-border: var(--uui-neutral-60);
344
- --uui-badge-border-hover: var(--uui-neutral-60);
345
- --uui-badge-caption: var(--uui-neutral-80);
346
- --uui-badge-caption-hover: var(--uui-neutral-80);
347
- }
348
- }
349
-
350
- .uui-badge.uui-color-yellow.uui-fill-outline {
351
- --uui-badge-border: var(--yellow-20);
352
- }
353
-
354
- /* Button */
355
-
356
- .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {
357
- --uui-btn-caption: var(--uui-neutral-70);
358
- }
359
-
360
- .uui-button {
361
- &.uui-size-42, &.uui-size-48 {
362
- .uui-caption {
363
- font-family: var(--font-museo-sans);
364
- }
365
- }
366
- }
367
-
368
- /* IconButton */
369
-
370
- .uui-icon_button.uui-color-neutral,
371
- .uui-icon_button.uui-color-gray60 {
372
- --uui-icon_btn: var(--uui-neutral-60);
373
- --uui-icon_btn-hover: var(--uui-neutral-70);
374
- --uui-icon_btn-active: var(--uui-neutral-80);
375
- }
376
-
377
- .uui-icon_button.uui-color-secondary {
378
- --uui-icon_btn: var(--uui-neutral-50);
379
- --uui-icon_btn-hover: var(--uui-neutral-60);
380
- --uui-icon_btn-active: var(--uui-neutral-70);
381
- }
382
-
383
- /* Tooltip */
384
-
385
- .uui-tooltip-container.uui-color-white {
386
- --uui-tooltip-bg: var(--uui-neutral-0);
387
- --uui-tooltip-text: var(--uui-neutral-80);
388
- }
389
-
390
- .uui-tooltip-container.uui-color-red {
391
- --uui-tooltip-bg: var(--uui-critical-60);
392
- }
393
-
394
- .uui-tooltip-container.uui-color-gray {
395
- --uui-tooltip-bg: var(--uui-neutral-80);
396
- --uui-tooltip-text: var(--uui-neutral-5);
397
- }
398
-
399
- /* CountIndicator */
400
-
401
- .uui-count_indicator.uui-color-gray,
402
- .uui-count_indicator.uui-color-neutral {
403
- --uui-count_indicator-bg: var(--uui-neutral-30);
404
- --uui-count_indicator-border: var(--uui-neutral-30);
405
- }
406
-
407
- .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {
408
- --uui-count_indicator-caption: var(--uui-neutral-70);
409
- }
410
-
411
- /* Status Indicator */
412
-
413
- .uui-status_indicator.uui-color-white.uui-fill-outline {
414
- .uui-status_indicator_dot {
415
- background-color: color-mix(in srgb, var(--white) 20%, transparent);
416
- border: 1px solid var(--uui-neutral-40);
417
- }
418
- }
419
-
420
- /* FlexRow */
421
-
422
- .uui-flex-row.uui-color-none {
423
- --uui-flex-row-bg: transparent;
424
- }
425
-
426
- .uui-flex-row.uui-color-white {
427
- --uui-flex-row-bg: var(--white);
428
- }
429
-
430
- .uui-flex-row.uui-color-gray5 {
431
- --uui-flex-row-bg: var(--gray5);
432
- }
433
-
434
- .uui-panel.uui-color-white {
435
- --uui-panel-bg: var(--white);
436
- }
437
-
438
- .uui-panel.uui-color-gray90 {
439
- --uui-panel-bg: var(--gray90);
440
- }
441
-
442
- /* Tag */
443
-
444
- .uui-tag {
445
- --uui-border-radius: 3px;
446
-
447
- &.uui-color-white {
448
- &.uui-fill-solid {
449
- --uui-tag-bg-hover: var(--uui-neutral-10);
450
- --uui-tag-border-hover: var(--uui-neutral-10);
451
- --uui-tag-fill: var(--uui-neutral-60);
452
-
453
- .uui-count_indicator {
454
- --uui-count_indicator-bg: var(--uui-neutral-30);
455
- --uui-count_indicator-border: var(--uui-neutral-30);
456
- --uui-count_indicator-caption: var(--uui-neutral-70);
457
- }
458
- }
459
-
460
- &.uui-fill-outline {
461
- --uui-tag-bg-hover: var(--uui-neutral-10);
462
- --uui-tag-border: var(--uui-neutral-30);
463
- --uui-tag-border-hover: var(--uui-neutral-30);
464
-
465
- .uui-count_indicator {
466
- --uui-count_indicator-bg: var(--uui-neutral-30);
467
- --uui-count_indicator-border: var(--uui-neutral-30);
468
- }
469
- }
470
- }
471
-
472
- &.uui-color-gray10 {
473
- &.uui-fill-solid {
474
- --uui-tag-border-hover: var(--uui-neutral-20);
475
- --uui-tag-fill: var(--uui-neutral-60);
476
-
477
- .uui-count_indicator {
478
- --uui-count_indicator-bg: var(--uui-neutral-30);
479
- --uui-count_indicator-border: var(--uui-neutral-30);
480
- --uui-count_indicator-caption: var(--uui-neutral-70);
481
- }
482
- }
483
-
484
- &.uui-fill-outline {
485
- --uui-tag-bg: var(--uui-neutral-5);
486
- --uui-tag-bg-hover: var(--uui-neutral-10);
487
- --uui-tag-border: var(--uui-neutral-30);
488
- --uui-tag-border-hover: var(--uui-neutral-30);
489
-
490
- .uui-count_indicator {
491
- --uui-count_indicator-bg: var(--uui-neutral-30);
492
- --uui-count_indicator-border: var(--uui-neutral-30);
493
- }
494
- }
495
- }
496
-
497
- &.uui-color-neutral,
498
- &.uui-color-gray30 {
499
- &.uui-fill-solid {
500
- --uui-tag-bg: var(--uui-neutral-30);
501
- --uui-tag-bg-hover: var(--uui-neutral-40);
502
- --uui-tag-border: var(--uui-neutral-30);
503
- --uui-tag-border-hover: var(--uui-neutral-40);
504
- --uui-tag-caption: var(--uui-text-primary);
505
- --uui-tag-fill: var(--uui-neutral-60);
506
-
507
- .uui-count_indicator {
508
- --uui-count_indicator-bg: var(--uui-neutral-0);
509
- --uui-count_indicator-border: var(--uui-neutral-0);
510
- --uui-count_indicator-caption: var(--uui-neutral-70);
511
- }
512
- }
513
-
514
- &.uui-fill-outline {
515
- --uui-tag-bg: var(--uui-neutral-20);
516
- --uui-tag-bg-hover: var(--uui-neutral-30);
517
- --uui-tag-border: var(--uui-neutral-40);
518
- --uui-tag-border-hover: var(--uui-neutral-40);
519
-
520
- .uui-count_indicator {
521
- --uui-count_indicator-bg: var(--uui-neutral-30);
522
- --uui-count_indicator-border: var(--uui-neutral-30);
523
- }
524
- }
525
- }
526
-
527
- &.uui-color-gray70 {
528
- &.uui-fill-solid {
529
- --uui-tag-caption: var(--uui-neutral-0);
530
- --uui-tag-fill: var(--uui-neutral-0);
531
- --uui-tag-bg: var(--uui-neutral-70);
532
- --uui-tag-border: var(--uui-neutral-70);
533
- --uui-tag-bg-hover: var(--uui-neutral-80);
534
- --uui-tag-border-hover: var(--uui-neutral-80);
535
-
536
- .uui-count_indicator {
537
- --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
538
- --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
539
- --uui-count_indicator-caption: var(--uui-neutral-0);
540
- }
541
- }
542
-
543
- &.uui-fill-outline {
544
- --uui-tag-bg: var(--uui-neutral-20);
545
- --uui-tag-bg-hover: var(--uui-neutral-30);
546
- --uui-tag-border: var(--uui-neutral-50);
547
- --uui-tag-border-hover: var(--uui-neutral-50);
548
-
549
- }
550
- }
551
-
552
- &.uui-color-warning,
553
- &.uui-color-amber {
554
- &.uui-fill-solid {
555
- --uui-tag-caption: var(--uui-text-primary);
556
- --uui-tag-fill: var(--uui-neutral-90);
557
-
558
- .uui-count_indicator {
559
- --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);
560
- --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);
561
- }
562
- }
563
-
564
- &.uui-fill-outline .uui-count_indicator {
565
- --uui-count_indicator-bg: var(--uui-neutral-0);
566
- --uui-count_indicator-border: var(--uui-neutral-40);
567
- }
568
- }
569
- }
570
-
571
- .uui-dropdown-body {
572
- --uui-dropdown_container-border-radius: 0;
573
- }
574
-
575
- .uui-link_button {
576
- &.uui-size-42, &.uui-size-48 {
577
- :global(.uui-caption) {
578
- font-family: var(--font-museo-sans);
579
- text-transform: uppercase;
580
- }
581
- }
582
- }
583
-
584
- /* fonts */
585
-
586
- .uui-font-sans {
587
- --uui-text-font: var(--uui-font);
588
- --uui-text-font-weight: 400;
589
- }
590
-
591
- .uui-font-sans-semibold {
592
- --uui-text-font: var(--uui-font);
593
- --uui-text-font-weight: 600;
594
- }
595
-
596
- .uui-font-sans-italic {
597
- --uui-text-font: var(--uui-font);
598
- --uui-text-font-weight: 400;
599
- --uui-text-font-style: italic;
600
- }
601
-
602
- .uui-font-museo-sans {
603
- --uui-text-font: var(--font-museo-sans);
604
- --uui-text-font-weight: normal;
605
- }
606
-
607
- .uui-font-museo-slab {
608
- --uui-text-font: var(--font-museo-slab);
609
- --uui-text-font-weight: normal;
610
- }
611
-
612
- /* Typography */
613
-
614
- .uui-typography {
615
- h1, h2, h3 {
616
- font-family: var(--font-museo-sans);
617
- }
618
-
619
- h1 {
620
- font-size: 36px;
621
- }
622
-
623
- .hero-header {
624
- font-family: var(--font-museo-slab);
625
- }
626
-
627
- .promo-header:is(h1, h2, h3) {
628
- font-family: var(--font-museo-sans);
629
- }
630
- }
631
- }
632
-
633
- .uui-theme-promo {
634
- @include theme-promo();
635
- }
636
-
1
+ @use '../scss/promo/font-faces';
2
+ @use './tokens/_theme_promo.scss' as tokens;
3
+ /* Name convention */
4
+ /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
5
+
6
+ @mixin theme-promo {
7
+ @include tokens.theme-tokens;
8
+ --uui-font: 'Source Sans Pro', sans-serif;
9
+ --uui-font-mono: 'Roboto Mono', monospace;
10
+
11
+ // theme specific fonts
12
+ --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
13
+ --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
14
+
15
+ /* contrast colors */
16
+ --uui-primary-contrast: var(--white);
17
+
18
+ --uui-accent-contrast: var(--white);
19
+
20
+ --uui-secondary-contrast: var(--white);
21
+
22
+ --uui-critical-contrast: var(--white);
23
+
24
+ --uui-info-contrast: var(--white);
25
+
26
+ --uui-success-contrast: var(--white);
27
+
28
+ --uui-warning-contrast: var(--gray80);
29
+
30
+ --uui-error-contrast: var(--white);
31
+
32
+ /* shadows */
33
+ --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
34
+ --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);
35
+ --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);
36
+
37
+ --uui-border-radius: 0;
38
+
39
+ /* core variables end */
40
+
41
+ /* ------------------------------------ */
42
+
43
+ /* begin color classes */
44
+
45
+ .uui-color-accent,
46
+ .uui-color-green {
47
+ --uui-color-5: var(--uui-accent-5);
48
+ --uui-color-10: var(--uui-accent-10);
49
+ --uui-color-20: var(--uui-accent-20);
50
+ --uui-color-50: var(--uui-accent-50);
51
+ --uui-color-60: var(--uui-accent-60);
52
+ --uui-color-70: var(--uui-accent-70);
53
+ --uui-color-contrast: var(--uui-accent-contrast);
54
+ }
55
+
56
+ .uui-color-primary,
57
+ .uui-color-blue {
58
+ --uui-color-5: var(--uui-primary-5);
59
+ --uui-color-10: var(--uui-primary-10);
60
+ --uui-color-20: var(--uui-primary-20);
61
+ --uui-color-50: var(--uui-primary-50);
62
+ --uui-color-60: var(--uui-primary-60);
63
+ --uui-color-70: var(--uui-primary-70);
64
+ --uui-color-contrast: var(--uui-primary-contrast);
65
+ }
66
+
67
+ .uui-color-secondary,
68
+ .uui-color-neutral,
69
+ .uui-color-gray {
70
+ --uui-color-5: var(--uui-secondary-5);
71
+ --uui-color-10: var(--uui-secondary-10);
72
+ --uui-color-20: var(--uui-secondary-20);
73
+ --uui-color-50: var(--uui-secondary-50);
74
+ --uui-color-60: var(--uui-secondary-60);
75
+ --uui-color-70: var(--uui-secondary-70);
76
+ --uui-color-contrast: var(--uui-secondary-contrast);
77
+ }
78
+
79
+ .uui-color-critical,
80
+ .uui-color-red {
81
+ --uui-color-5: var(--uui-critical-5);
82
+ --uui-color-10: var(--uui-critical-10);
83
+ --uui-color-20: var(--uui-critical-20);
84
+ --uui-color-50: var(--uui-critical-50);
85
+ --uui-color-60: var(--uui-critical-60);
86
+ --uui-color-70: var(--uui-critical-70);
87
+ --uui-color-contrast: var(--uui-critical-contrast);
88
+ }
89
+
90
+ .uui-color-info {
91
+ --uui-color-5: var(--uui-info-5);
92
+ --uui-color-10: var(--uui-info-10);
93
+ --uui-color-20: var(--uui-info-20);
94
+ --uui-color-50: var(--uui-info-50);
95
+ --uui-color-60: var(--uui-info-60);
96
+ --uui-color-70: var(--uui-info-70);
97
+ --uui-color-contrast: var(--uui-info-contrast);
98
+ }
99
+
100
+ .uui-color-success {
101
+ --uui-color-5: var(--uui-success-5);
102
+ --uui-color-10: var(--uui-success-10);
103
+ --uui-color-20: var(--uui-success-20);
104
+ --uui-color-50: var(--uui-success-50);
105
+ --uui-color-60: var(--uui-success-60);
106
+ --uui-color-70: var(--uui-success-70);
107
+ --uui-color-contrast: var(--uui-success-contrast);
108
+ }
109
+
110
+ .uui-color-warning,
111
+ .uui-color-amber {
112
+ --uui-color-5: var(--uui-warning-5);
113
+ --uui-color-10: var(--uui-warning-10);
114
+ --uui-color-20: var(--uui-warning-20);
115
+ --uui-color-50: var(--uui-warning-50);
116
+ --uui-color-60: var(--uui-warning-60);
117
+ --uui-color-70: var(--uui-warning-70);
118
+ --uui-color-contrast: var(--uui-warning-contrast);
119
+ }
120
+
121
+ .uui-color-error {
122
+ --uui-color-5: var(--uui-error-5);
123
+ --uui-color-10: var(--uui-error-10);
124
+ --uui-color-20: var(--uui-error-20);
125
+ --uui-color-50: var(--uui-error-50);
126
+ --uui-color-60: var(--uui-error-60);
127
+ --uui-color-70: var(--uui-error-70);
128
+ --uui-color-contrast: var(--uui-error-contrast);
129
+ }
130
+
131
+ .uui-color-white {
132
+ --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
133
+ --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
134
+ --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
135
+ --uui-color-50: var(--uui-neutral-0);
136
+ --uui-color-60: var(--uui-neutral-10);
137
+ --uui-color-70: var(--uui-neutral-20);
138
+ --uui-color-contrast: var(--uui-neutral-70);
139
+ }
140
+
141
+ .uui-link_button.uui-color-contrast,
142
+ .uui-color-gray10 {
143
+ --uui-color-5: var(--white);
144
+ --uui-color-10: var(--white);
145
+ --uui-color-20: var(--gray5);
146
+ --uui-color-50: var(--gray10);
147
+ --uui-color-60: var(--gray20);
148
+ --uui-color-70: var(--gray30);
149
+ --uui-color-contrast: var(--gray70);
150
+ }
151
+
152
+ .uui-color-gray30 {
153
+ --uui-color-5: var(--gray20);
154
+ --uui-color-10: var(--gray30);
155
+ --uui-color-20: var(--gray40);
156
+ --uui-color-50: var(--gray30);
157
+ --uui-color-60: var(--gray40);
158
+ --uui-color-70: var(--gray50);
159
+ --uui-color-contrast: var(--gray80);
160
+ }
161
+
162
+ .uui-color-gray50 {
163
+ --uui-color-5: var(--gray5);
164
+ --uui-color-10: var(--gray10);
165
+ --uui-color-20: var(--gray20);
166
+ --uui-color-50: var(--gray50);
167
+ --uui-color-60: var(--gray60);
168
+ --uui-color-70: var(--gray70);
169
+ --uui-color-contrast: var(--gray80);
170
+ }
171
+
172
+ .uui-color-gray60 {
173
+ --uui-color-5: var(--gray20);
174
+ --uui-color-10: var(--gray60);
175
+ --uui-color-20: var(--gray40);
176
+ --uui-color-50: var(--gray60);
177
+ --uui-color-60: var(--gray70);
178
+ --uui-color-70: var(--gray80);
179
+ --uui-color-contrast: var(--white);
180
+ }
181
+
182
+ .uui-color-yellow {
183
+ --uui-color-5: var(--yellow-5);
184
+ --uui-color-10: var(--yellow-10);
185
+ --uui-color-20: var(--yellow-20);
186
+ --uui-color-50: var(--yellow-50);
187
+ --uui-color-60: var(--yellow-60);
188
+ --uui-color-70: var(--yellow-70);
189
+ --uui-color-contrast: var(--gray80);
190
+ }
191
+
192
+ .uui-color-orange {
193
+ --uui-color-5: var(--orange-5);
194
+ --uui-color-10: var(--orange-10);
195
+ --uui-color-20: var(--orange-20);
196
+ --uui-color-50: var(--orange-50);
197
+ --uui-color-60: var(--orange-60);
198
+ --uui-color-70: var(--orange-70);
199
+ --uui-color-contrast: var(--gray80);
200
+ }
201
+
202
+ .uui-color-fuchsia {
203
+ --uui-color-5: var(--fuchsia-5);
204
+ --uui-color-10: var(--fuchsia-10);
205
+ --uui-color-20: var(--fuchsia-20);
206
+ --uui-color-50: var(--fuchsia-50);
207
+ --uui-color-60: var(--fuchsia-60);
208
+ --uui-color-70: var(--fuchsia-70);
209
+ --uui-color-contrast: var(--white);
210
+ }
211
+
212
+ .uui-color-purple {
213
+ --uui-color-5: var(--purple-5);
214
+ --uui-color-10: var(--purple-10);
215
+ --uui-color-20: var(--purple-20);
216
+ --uui-color-50: var(--purple-50);
217
+ --uui-color-60: var(--purple-60);
218
+ --uui-color-70: var(--purple-70);
219
+ --uui-color-contrast: var(--white);
220
+ }
221
+
222
+ .uui-color-violet {
223
+ --uui-color-5: var(--violet-5);
224
+ --uui-color-10: var(--violet-10);
225
+ --uui-color-20: var(--violet-20);
226
+ --uui-color-50: var(--violet-50);
227
+ --uui-color-60: var(--violet-60);
228
+ --uui-color-70: var(--violet-70);
229
+ --uui-color-contrast: var(--white);
230
+ }
231
+
232
+ .uui-color-cobalt {
233
+ --uui-color-5: var(--cobalt-5);
234
+ --uui-color-10: var(--cobalt-10);
235
+ --uui-color-20: var(--cobalt-20);
236
+ --uui-color-50: var(--cobalt-50);
237
+ --uui-color-60: var(--cobalt-60);
238
+ --uui-color-70: var(--cobalt-70);
239
+ --uui-color-contrast: var(--white);
240
+ }
241
+
242
+ .uui-color-cyan {
243
+ --uui-color-5: var(--cyan-5);
244
+ --uui-color-10: var(--cyan-10);
245
+ --uui-color-20: var(--cyan-20);
246
+ --uui-color-50: var(--cyan-50);
247
+ --uui-color-60: var(--cyan-60);
248
+ --uui-color-70: var(--cyan-70);
249
+ --uui-color-contrast: var(--gray80);
250
+ }
251
+
252
+ .uui-color-mint {
253
+ --uui-color-5: var(--mint-5);
254
+ --uui-color-10: var(--mint-10);
255
+ --uui-color-20: var(--mint-20);
256
+ --uui-color-50: var(--mint-50);
257
+ --uui-color-60: var(--mint-60);
258
+ --uui-color-70: var(--mint-70);
259
+ --uui-color-contrast: var(--gray80);
260
+ }
261
+
262
+ /* Badge */
263
+
264
+ .uui-badge.uui-color-white {
265
+ &.uui-fill-solid {
266
+ --uui-badge-bg-hover: var(--uui-neutral-30);
267
+ --uui-badge-border-hover: var(--uui-neutral-30);
268
+ }
269
+
270
+ &.uui-fill-outline {
271
+ --uui-badge-bg: var(--uui-neutral-0);
272
+ --uui-badge-bg-hover: var(--uui-neutral-10);
273
+ --uui-badge-border: var(--uui-neutral-30);
274
+ --uui-badge-border-hover: var(--uui-neutral-30);
275
+ --uui-badge-caption: var(--uui-neutral-80);
276
+ --uui-badge-caption-hover: var(--uui-neutral-80);
277
+
278
+ .uui-count_indicator {
279
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
280
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
281
+ }
282
+ }
283
+ }
284
+
285
+ .uui-badge.uui-color-neutral,
286
+ .uui-badge.uui-color-gray30 {
287
+ &.uui-fill-solid {
288
+ --uui-badge-bg: var(--uui-neutral-30);
289
+ --uui-badge-bg-hover: var(--uui-neutral-40);
290
+ --uui-badge-border: var(--uui-neutral-30);
291
+ --uui-badge-border-hover: var(--uui-neutral-40);
292
+ --uui-color-contrast: var(--uui-neutral-80);
293
+
294
+ .uui-count_indicator {
295
+ --uui-count_indicator-bg: var(--uui-neutral-0);
296
+ --uui-count_indicator-border: var(--uui-neutral-0);
297
+ }
298
+ }
299
+
300
+ &.uui-fill-outline {
301
+ --uui-badge-bg: var(--uui-neutral-20);
302
+ --uui-badge-border: var(--uui-neutral-40);
303
+ --uui-badge-border-hover: var(--uui-neutral-40);
304
+ --uui-badge-bg-hover: var(--uui-neutral-30);
305
+ --uui-badge-caption: var(--uui-neutral-80);
306
+ --uui-badge-caption-hover: var(--uui-neutral-80);
307
+ }
308
+ }
309
+
310
+ .uui-badge.uui-color-gray10 {
311
+ &.uui-fill-solid {
312
+ --uui-badge-bg-hover: var(--uui-neutral-20);
313
+ --uui-badge-border-hover: var(--uui-neutral-20);
314
+ }
315
+
316
+ &.uui-fill-outline {
317
+ --uui-badge-bg: var(--uui-neutral-10);
318
+ --uui-badge-bg-hover: var(--uui-neutral-20);
319
+ --uui-badge-border: var(--uui-neutral-30);
320
+ --uui-badge-border-hover: var(--uui-neutral-30);
321
+ --uui-badge-caption: var(--uui-neutral-70);
322
+ --uui-badge-caption-hover: var(--uui-neutral-70);
323
+
324
+ .uui-count_indicator {
325
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
326
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
327
+ }
328
+ }
329
+ }
330
+
331
+ .uui-badge.uui-color-gray60 {
332
+ &.uui-fill-outline {
333
+ --uui-badge-bg-hover: var(--uui-neutral-30);
334
+ --uui-badge-border: var(--uui-neutral-60);
335
+ --uui-badge-border-hover: var(--uui-neutral-60);
336
+ --uui-badge-caption: var(--uui-neutral-80);
337
+ --uui-badge-caption-hover: var(--uui-neutral-80);
338
+ }
339
+ }
340
+
341
+ .uui-badge.uui-color-yellow.uui-fill-outline {
342
+ --uui-badge-border: var(--yellow-20);
343
+ }
344
+
345
+ /* Button */
346
+
347
+ .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {
348
+ --uui-btn-caption: var(--uui-neutral-70);
349
+ }
350
+
351
+ .uui-button {
352
+ &.uui-size-42, &.uui-size-48 {
353
+ .uui-caption {
354
+ font-family: var(--font-museo-sans);
355
+ }
356
+ }
357
+ }
358
+
359
+ /* IconButton */
360
+
361
+ .uui-icon_button.uui-color-neutral,
362
+ .uui-icon_button.uui-color-gray60 {
363
+ --uui-icon_btn: var(--uui-neutral-60);
364
+ --uui-icon_btn-hover: var(--uui-neutral-70);
365
+ --uui-icon_btn-active: var(--uui-neutral-80);
366
+ }
367
+
368
+ .uui-icon_button.uui-color-secondary {
369
+ --uui-icon_btn: var(--uui-neutral-50);
370
+ --uui-icon_btn-hover: var(--uui-neutral-60);
371
+ --uui-icon_btn-active: var(--uui-neutral-70);
372
+ }
373
+
374
+ .uui-icon_button.uui-color-white {
375
+ --uui-icon_btn-hover: var(--uui-neutral-20);
376
+ --uui-icon_btn-active: var(--uui-neutral-30);
377
+ }
378
+
379
+ /* LinkButton */
380
+
381
+ .uui-link_button.uui-color-white {
382
+ --uui-link_btn-text-hover: var(--uui-neutral-30);
383
+ --uui-link_btn-text-active: var(--uui-neutral-40);
384
+ --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);
385
+ }
386
+
387
+ /* Tooltip */
388
+
389
+ .uui-tooltip-container.uui-color-white {
390
+ --uui-tooltip-bg: var(--uui-neutral-0);
391
+ --uui-tooltip-text: var(--uui-neutral-80);
392
+ }
393
+
394
+ .uui-tooltip-container.uui-color-red {
395
+ --uui-tooltip-bg: var(--uui-critical-60);
396
+ }
397
+
398
+ .uui-tooltip-container.uui-color-gray {
399
+ --uui-tooltip-bg: var(--uui-neutral-80);
400
+ --uui-tooltip-text: var(--uui-neutral-5);
401
+ }
402
+
403
+ /* CountIndicator */
404
+
405
+ .uui-count_indicator.uui-color-gray,
406
+ .uui-count_indicator.uui-color-neutral {
407
+ --uui-count_indicator-bg: var(--uui-neutral-30);
408
+ --uui-count_indicator-border: var(--uui-neutral-30);
409
+ }
410
+
411
+ .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {
412
+ --uui-count_indicator-caption: var(--uui-neutral-70);
413
+ }
414
+
415
+ /* Status Indicator */
416
+
417
+ .uui-status_indicator.uui-color-white.uui-fill-outline {
418
+ .uui-status_indicator_dot {
419
+ background-color: color-mix(in srgb, var(--white) 20%, transparent);
420
+ border: 1px solid var(--uui-neutral-40);
421
+ }
422
+ }
423
+
424
+ /* FlexRow */
425
+
426
+ .uui-flex-row.uui-color-none {
427
+ --uui-flex-row-bg: transparent;
428
+ }
429
+
430
+ .uui-flex-row.uui-color-white {
431
+ --uui-flex-row-bg: var(--white);
432
+ }
433
+
434
+ .uui-flex-row.uui-color-gray5 {
435
+ --uui-flex-row-bg: var(--gray5);
436
+ }
437
+
438
+ .uui-panel.uui-color-white {
439
+ --uui-panel-bg: var(--white);
440
+ }
441
+
442
+ .uui-panel.uui-color-gray90 {
443
+ --uui-panel-bg: var(--gray90);
444
+ }
445
+
446
+ /* Text */
447
+
448
+ .uui-text.uui-color-gray5 {
449
+ --uui-text: var(--gray5);
450
+ }
451
+
452
+ .uui-text.uui-color-gray80 {
453
+ --uui-text: var(--gray80);
454
+ }
455
+
456
+ .uui-text.uui-color-gray90 {
457
+ --uui-text: var(--gray90);
458
+ }
459
+
460
+
461
+ /* Tag */
462
+
463
+ .uui-tag {
464
+ --uui-border-radius: 3px;
465
+
466
+ &.uui-color-white {
467
+ &.uui-fill-solid {
468
+ --uui-tag-bg-hover: var(--uui-neutral-10);
469
+ --uui-tag-border-hover: var(--uui-neutral-10);
470
+
471
+ .uui-count_indicator {
472
+ --uui-count_indicator-bg: var(--uui-neutral-30);
473
+ --uui-count_indicator-border: var(--uui-neutral-30);
474
+ }
475
+ }
476
+
477
+ &.uui-fill-outline {
478
+ --uui-tag-bg: var(--uui-neutral-0);
479
+ --uui-tag-border: var(--uui-neutral-30);
480
+ --uui-tag-bg-hover: var(--uui-neutral-10);
481
+ --uui-tag-border-hover: var(--uui-neutral-30);
482
+
483
+ .uui-count_indicator {
484
+ --uui-count_indicator-bg: var(--uui-neutral-30);
485
+ --uui-count_indicator-border: var(--uui-neutral-30);
486
+ }
487
+ }
488
+ }
489
+
490
+ &.uui-color-gray10 {
491
+ &.uui-fill-solid {
492
+ --uui-tag-bg-hover: var(--uui-neutral-20);
493
+ --uui-tag-border-hover: var(--uui-neutral-20);
494
+
495
+ .uui-count_indicator {
496
+ --uui-count_indicator-bg: var(--uui-neutral-30);
497
+ --uui-count_indicator-border: var(--uui-neutral-30);
498
+ }
499
+ }
500
+
501
+ &.uui-fill-outline {
502
+ --uui-tag-bg: var(--uui-neutral-5);
503
+ --uui-tag-bg-hover: var(--uui-neutral-10);
504
+ --uui-tag-border: var(--uui-neutral-30);
505
+ --uui-tag-border-hover: var(--uui-neutral-30);
506
+
507
+ .uui-count_indicator {
508
+ --uui-count_indicator-bg: var(--uui-neutral-30);
509
+ --uui-count_indicator-border: var(--uui-neutral-30);
510
+ }
511
+ }
512
+ }
513
+
514
+ &.uui-color-neutral,
515
+ &.uui-color-gray30 {
516
+ &.uui-fill-solid {
517
+ --uui-tag-bg: var(--uui-neutral-30);
518
+ --uui-tag-bg-hover: var(--uui-neutral-40);
519
+ --uui-tag-border: var(--uui-neutral-30);
520
+ --uui-tag-border-hover: var(--uui-neutral-40);
521
+ --uui-tag-caption: var(--uui-neutral-70);
522
+ --uui-tag-fill: var(--uui-neutral-70);
523
+
524
+ .uui-count_indicator {
525
+ --uui-count_indicator-bg: var(--uui-neutral-0);
526
+ --uui-count_indicator-border: var(--uui-neutral-0);
527
+ --uui-count_indicator-caption: var(--uui-neutral-70);
528
+ }
529
+ }
530
+
531
+ &.uui-fill-outline {
532
+ --uui-tag-bg: var(--uui-neutral-20);
533
+ --uui-tag-bg-hover: var(--uui-neutral-30);
534
+ --uui-tag-border: var(--uui-neutral-40);
535
+ --uui-tag-border-hover: var(--uui-neutral-40);
536
+
537
+ .uui-count_indicator {
538
+ --uui-count_indicator-bg: var(--uui-neutral-30);
539
+ --uui-count_indicator-border: var(--uui-neutral-30);
540
+ }
541
+ }
542
+ }
543
+
544
+ &.uui-color-gray70 {
545
+ &.uui-fill-solid {
546
+ --uui-tag-caption: var(--uui-neutral-0);
547
+ --uui-tag-fill: var(--uui-neutral-0);
548
+ --uui-tag-bg: var(--uui-neutral-70);
549
+ --uui-tag-border: var(--uui-neutral-70);
550
+ --uui-tag-bg-hover: var(--uui-neutral-80);
551
+ --uui-tag-border-hover: var(--uui-neutral-80);
552
+
553
+ .uui-count_indicator {
554
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
555
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
556
+ --uui-count_indicator-caption: var(--uui-neutral-0);
557
+ }
558
+ }
559
+
560
+ &.uui-fill-outline {
561
+ --uui-tag-bg: var(--uui-neutral-20);
562
+ --uui-tag-bg-hover: var(--uui-neutral-30);
563
+ --uui-tag-border: var(--uui-neutral-50);
564
+ --uui-tag-border-hover: var(--uui-neutral-50);
565
+
566
+ }
567
+ }
568
+
569
+ &.uui-color-warning,
570
+ &.uui-color-amber {
571
+ &.uui-fill-solid {
572
+ --uui-tag-caption: var(--uui-text-primary);
573
+ --uui-tag-fill: var(--uui-neutral-90);
574
+
575
+ .uui-count_indicator {
576
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);
577
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);
578
+ }
579
+ }
580
+
581
+ &.uui-fill-outline .uui-count_indicator {
582
+ --uui-count_indicator-bg: var(--uui-neutral-0);
583
+ --uui-count_indicator-border: var(--uui-neutral-40);
584
+ }
585
+ }
586
+ }
587
+
588
+ .uui-dropdown-body {
589
+ --uui-dropdown_container-border-radius: 0;
590
+ }
591
+
592
+ .uui-link_button {
593
+ &.uui-size-42, &.uui-size-48 {
594
+ :global(.uui-caption) {
595
+ font-family: var(--font-museo-sans);
596
+ text-transform: uppercase;
597
+ }
598
+ }
599
+ }
600
+
601
+ /* fonts */
602
+
603
+ .uui-font-sans {
604
+ --uui-text-font: var(--uui-font);
605
+ --uui-text-font-weight: 400;
606
+ }
607
+
608
+ .uui-font-sans-semibold {
609
+ --uui-text-font: var(--uui-font);
610
+ --uui-text-font-weight: 600;
611
+ }
612
+
613
+ .uui-font-sans-italic {
614
+ --uui-text-font: var(--uui-font);
615
+ --uui-text-font-weight: 400;
616
+ --uui-text-font-style: italic;
617
+ }
618
+
619
+ .uui-font-museo-sans {
620
+ --uui-text-font: var(--font-museo-sans);
621
+ --uui-text-font-weight: normal;
622
+ }
623
+
624
+ .uui-font-museo-slab {
625
+ --uui-text-font: var(--font-museo-slab);
626
+ --uui-text-font-weight: normal;
627
+ }
628
+
629
+ /* Typography */
630
+
631
+ .uui-typography {
632
+ h1, h2, h3 {
633
+ font-family: var(--font-museo-sans);
634
+ }
635
+
636
+ h1 {
637
+ font-size: 36px;
638
+ }
639
+
640
+ .hero-header {
641
+ font-family: var(--font-museo-slab);
642
+ }
643
+
644
+ .promo-header:is(h1, h2, h3) {
645
+ font-family: var(--font-museo-sans);
646
+ }
647
+ }
648
+ }
649
+
650
+ .uui-theme-promo {
651
+ @include theme-promo();
652
+ }
653
+