@epam/assets 6.4.0 → 6.4.1-alpha.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 (96) hide show
  1. package/css/theme/no-fonts/theme_electric.css.map +1 -1
  2. package/css/theme/no-fonts/theme_loveship.css.map +1 -1
  3. package/css/theme/no-fonts/theme_loveship_dark.css +4 -0
  4. package/css/theme/no-fonts/theme_loveship_dark.css.map +1 -1
  5. package/css/theme/no-fonts/theme_promo.css.map +1 -1
  6. package/css/theme/theme_eduverse_dark.css.map +1 -1
  7. package/css/theme/theme_eduverse_light.css.map +1 -1
  8. package/css/theme/theme_electric.css.map +1 -1
  9. package/css/theme/theme_electric_dark.css +4 -0
  10. package/css/theme/theme_electric_dark.css.map +1 -1
  11. package/css/theme/theme_fresh_4px.css.map +1 -1
  12. package/css/theme/theme_loveship.css.map +1 -1
  13. package/css/theme/theme_loveship_dark.css +4 -0
  14. package/css/theme/theme_loveship_dark.css.map +1 -1
  15. package/css/theme/theme_promo.css.map +1 -1
  16. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  17. package/css/theme/variables/fresh_4px.css.map +1 -1
  18. package/icons/common/radio-point-10.svg +13 -13
  19. package/icons/legacy/btn_cross.svg +22 -22
  20. package/icons/legacy/btn_tick.svg +22 -22
  21. package/icons/legacy/calendar-30.svg +12 -12
  22. package/icons/legacy/calendar-36.svg +14 -14
  23. package/icons/legacy/excel.svg +12 -12
  24. package/icons/legacy/filter-24.svg +11 -11
  25. package/icons/legacy/filter.svg +12 -12
  26. package/icons/legacy/folding-arrow.svg +14 -14
  27. package/icons/legacy/gear.svg +14 -14
  28. package/icons/legacy/help-24.svg +11 -11
  29. package/icons/legacy/help.svg +21 -21
  30. package/icons/legacy/label_info.svg +14 -14
  31. package/icons/legacy/lens.svg +17 -17
  32. package/icons/legacy/modal-close-cross.svg +22 -22
  33. package/icons/legacy/more.svg +20 -20
  34. package/icons/legacy/pencil.svg +12 -12
  35. package/icons/legacy/plus.svg +12 -12
  36. package/icons/legacy/sliders.svg +12 -12
  37. package/icons/legacy/sort-24.svg +15 -15
  38. package/icons/legacy/sort-desc-24.svg +15 -15
  39. package/icons/legacy/sort.svg +4 -4
  40. package/icons/legacy/trash.svg +12 -12
  41. package/icons/loaders/circle_loader_30.svg +69 -69
  42. package/icons/loaders/dots_loader_30.svg +39 -39
  43. package/icons/templates/generic-24.svg +40 -40
  44. package/icons/templates/generic-30.svg +43 -43
  45. package/icons/templates/generic.svg +40 -40
  46. package/icons/templates/tall.svg +69 -69
  47. package/package.json +2 -2
  48. package/readme.md +7 -7
  49. package/scss/electric/font-faces.scss +138 -138
  50. package/scss/font-faces.scss +3 -3
  51. package/scss/fonts.scss +2 -2
  52. package/scss/index.scss +4 -4
  53. package/scss/loveship/colors.scss +100 -100
  54. package/scss/loveship/font-faces.scss +186 -186
  55. package/scss/loveship/fonts.scss +23 -23
  56. package/scss/loveship/typography.scss +160 -160
  57. package/scss/loveship-colors.scss +2 -2
  58. package/scss/promo/colors.scss +100 -100
  59. package/scss/promo/font-faces.scss +168 -168
  60. package/scss/promo/fonts.scss +17 -17
  61. package/scss/promo/typography.scss +175 -175
  62. package/scss/typography.scss +2 -2
  63. package/theme/customThemeTemplate.css +646 -646
  64. package/theme/no-fonts/theme_electric.scss +7 -7
  65. package/theme/no-fonts/theme_loveship.scss +8 -8
  66. package/theme/no-fonts/theme_loveship_dark.scss +8 -8
  67. package/theme/no-fonts/theme_promo.scss +8 -8
  68. package/theme/theme_eduverse_dark.scss +876 -876
  69. package/theme/theme_eduverse_light.scss +552 -552
  70. package/theme/theme_electric.scss +8 -8
  71. package/theme/theme_electric_dark.scss +8 -8
  72. package/theme/theme_fresh_4px.scss +7 -7
  73. package/theme/theme_loveship.scss +8 -8
  74. package/theme/theme_loveship_dark.scss +8 -8
  75. package/theme/theme_promo.scss +9 -9
  76. package/theme/theme_vanilla_thunder.scss +488 -488
  77. package/theme/variables/4px_grid.scss +265 -265
  78. package/theme/variables/6px_grid.scss +347 -347
  79. package/theme/variables/6px_grid_eduverse.scss +69 -69
  80. package/theme/variables/electric.scss +545 -545
  81. package/theme/variables/electric_dark.scss +868 -861
  82. package/theme/variables/fresh_4px.scss +612 -612
  83. package/theme/variables/loveship.scss +627 -627
  84. package/theme/variables/loveship_dark.scss +861 -852
  85. package/theme/variables/promo.scss +601 -601
  86. package/theme/variables/tokens/_color_classes.scss +103 -103
  87. package/theme/variables/tokens/_theme_eduverse_dark.scss +282 -282
  88. package/theme/variables/tokens/_theme_eduverse_dark_mobile.scss +282 -282
  89. package/theme/variables/tokens/_theme_eduverse_light.scss +282 -282
  90. package/theme/variables/tokens/_theme_eduverse_light_mobile.scss +282 -282
  91. package/theme/variables/tokens/_theme_electric_dark.scss +289 -289
  92. package/theme/variables/tokens/_theme_electric_light.scss +273 -273
  93. package/theme/variables/tokens/_theme_fresh_light_4px.scss +271 -271
  94. package/theme/variables/tokens/_theme_loveship_dark.scss +271 -271
  95. package/theme/variables/tokens/_theme_loveship_light.scss +271 -271
  96. package/theme/variables/tokens/_theme_promo.scss +271 -271
package/theme/variables/electric_dark.scss CHANGED
@@ -1,861 +1,868 @@
1
- @use 'tokens/_theme_electric_dark.scss' as tokens;
2
- /* Name convention */
3
- /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
4
-
5
- @mixin electric_dark_variables {
6
- --uui-font: 'Source Sans Pro', sans-serif;
7
- --uui-font-mono: 'Roboto Mono', monospace;
8
-
9
- /* shadows */
10
- --uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
11
- --uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26);
12
- --uui-shadow-level-3: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 25px 3px rgba(0, 0, 0, 0.56);
13
-
14
- @include tokens.theme-tokens;
15
-
16
- & {
17
- --uui-border-radius: 3px;
18
- scrollbar-color: var(--uui-neutral-40) transparent;
19
- }
20
-
21
- /* begin color classes */
22
- .uui-color-fire {
23
- --uui-color-5: var(--uui-critical-5);
24
- --uui-color-10: var(--uui-critical-10);
25
- --uui-color-20: var(--uui-critical-20);
26
- --uui-color-50: var(--uui-critical-50);
27
- --uui-color-60: var(--uui-critical-60);
28
- --uui-color-70: var(--uui-critical-70);
29
- --uui-color-contrast: var(--white);
30
- }
31
-
32
- .uui-color-night100 {
33
- --uui-color-5: var(--white);
34
- --uui-color-10: var(--white);
35
- --uui-color-20: var(--night50);
36
- --uui-color-50: var(--night100);
37
- --uui-color-60: var(--night200);
38
- --uui-color-70: var(--night300);
39
- --uui-color-contrast: var(--uui-neutral-70);
40
- }
41
-
42
- .uui-color-night300 {
43
- --uui-color-5: var(--night50);
44
- --uui-color-10: var(--night100);
45
- --uui-color-20: var(--night200);
46
- --uui-color-50: var(--night300);
47
- --uui-color-60: var(--night400);
48
- --uui-color-70: var(--night500);
49
- --uui-color-contrast: var(--uui-neutral-80);
50
- }
51
-
52
- .uui-color-night600 {
53
- --uui-color-5: var(--uui-secondary-5);
54
- --uui-color-10: var(--uui-secondary-10);
55
- --uui-color-20: var(--uui-secondary-20);
56
- --uui-color-50: var(--uui-secondary-50);
57
- --uui-color-60: var(--uui-secondary-60);
58
- --uui-color-70: var(--uui-secondary-70);
59
- --uui-color-contrast: var(--white);
60
- }
61
-
62
- .uui-color-night700 {
63
- --uui-color-5: var(--night400);
64
- --uui-color-10: var(--night500);
65
- --uui-color-20: var(--night600);
66
- --uui-color-50: var(--night700);
67
- --uui-color-60: var(--night800);
68
- --uui-color-70: var(--night900);
69
- --uui-color-contrast: var(--white);
70
- }
71
-
72
- .uui-color-sun {
73
- --uui-color-5: var(--sun-5);
74
- --uui-color-10: var(--sun-10);
75
- --uui-color-20: var(--sun-20);
76
- --uui-color-50: var(--sun-50);
77
- --uui-color-60: var(--sun-60);
78
- --uui-color-70: var(--sun-70);
79
- --uui-color-contrast: var(--uui-neutral-80);
80
- }
81
-
82
- .uui-color-yellow {
83
- --uui-color-5: var(--yellow-5);
84
- --uui-color-10: var(--yellow-10);
85
- --uui-color-20: var(--yellow-20);
86
- --uui-color-50: var(--yellow-50);
87
- --uui-color-60: var(--yellow-60);
88
- --uui-color-70: var(--yellow-70);
89
- --uui-color-contrast: var(--uui-neutral-80);
90
- }
91
-
92
- .uui-color-orange {
93
- --uui-color-5: var(--orange-5);
94
- --uui-color-10: var(--orange-10);
95
- --uui-color-20: var(--orange-20);
96
- --uui-color-50: var(--orange-50);
97
- --uui-color-60: var(--orange-60);
98
- --uui-color-70: var(--orange-70);
99
- --uui-color-contrast: var(--uui-neutral-80);
100
- }
101
-
102
- .uui-color-fuchsia {
103
- --uui-color-5: var(--fuchsia-5);
104
- --uui-color-10: var(--fuchsia-10);
105
- --uui-color-20: var(--fuchsia-20);
106
- --uui-color-50: var(--fuchsia-50);
107
- --uui-color-60: var(--fuchsia-60);
108
- --uui-color-70: var(--fuchsia-70);
109
- --uui-color-contrast: var(--white);
110
- }
111
-
112
- .uui-color-purple {
113
- --uui-color-5: var(--purple-5);
114
- --uui-color-10: var(--purple-10);
115
- --uui-color-20: var(--purple-20);
116
- --uui-color-50: var(--purple-50);
117
- --uui-color-60: var(--purple-60);
118
- --uui-color-70: var(--purple-70);
119
- --uui-color-contrast: var(--white);
120
- }
121
-
122
- .uui-color-violet {
123
- --uui-color-5: var(--violet-5);
124
- --uui-color-10: var(--violet-10);
125
- --uui-color-20: var(--violet-20);
126
- --uui-color-50: var(--violet-50);
127
- --uui-color-60: var(--violet-60);
128
- --uui-color-70: var(--violet-70);
129
- --uui-color-contrast: var(--white);
130
- }
131
-
132
- .uui-color-cobalt {
133
- --uui-color-5: var(--cobalt-5);
134
- --uui-color-10: var(--cobalt-10);
135
- --uui-color-20: var(--cobalt-20);
136
- --uui-color-50: var(--cobalt-50);
137
- --uui-color-60: var(--cobalt-60);
138
- --uui-color-70: var(--cobalt-70);
139
- --uui-color-contrast: var(--white);
140
- }
141
-
142
- .uui-color-cyan {
143
- --uui-color-5: var(--cyan-5);
144
- --uui-color-10: var(--cyan-10);
145
- --uui-color-20: var(--cyan-20);
146
- --uui-color-50: var(--cyan-50);
147
- --uui-color-60: var(--cyan-60);
148
- --uui-color-70: var(--cyan-70);
149
- --uui-color-contrast: var(--uui-neutral-80);
150
- }
151
-
152
- .uui-color-mint {
153
- --uui-color-5: var(--mint-5);
154
- --uui-color-10: var(--mint-10);
155
- --uui-color-20: var(--mint-20);
156
- --uui-color-50: var(--mint-50);
157
- --uui-color-60: var(--mint-60);
158
- --uui-color-70: var(--mint-70);
159
- --uui-color-contrast: var(--uui-neutral-80);
160
- }
161
-
162
- /* override variables */
163
-
164
- /* isInvalid color */
165
-
166
- .uui-invalid:is(.uui-input-box, .uui-radio-input-container, .uui-checkbox-container) {
167
- --uui-error-50: var(--uui-error-60);
168
- }
169
-
170
- /* Accordion */
171
-
172
- .uui-accordion-container {
173
- --uui-accordion-border-radius: 6px;
174
- }
175
-
176
- /* FileCard */
177
-
178
- .uui-file_card {
179
- --uui-file_card-border-radius: 6px;
180
- }
181
-
182
- /* Button */
183
-
184
- .uui-button {
185
- --uui-btn-bg-disabled: var(--uui-neutral-50);
186
- --uui-btn-border-disabled: var(--uui-neutral-50);
187
-
188
- &.uui-fill-solid.uui-color-white {
189
- --uui-btn-bg-active: var(--uui-neutral-20);
190
-
191
- &:active {
192
- background-color: var(--uui-neutral-20);
193
- border-color: var(--uui-neutral-20);
194
- }
195
- }
196
-
197
- &.uui-fill-outline {
198
- --uui-btn-border: var(--uui-color-60);
199
- --uui-btn-border-hover: var(--uui-color-60);
200
- --uui-btn-border-active: var(--uui-color-60);
201
- --uui-btn-caption: var(--uui-color-60);
202
-
203
- &.uui-color-neutral,
204
- &.uui-color-secondary {
205
- --uui-btn-bg-hover: var(--uui-neutral-60);
206
- --uui-btn-bg-active: var(--uui-neutral-50);
207
- --uui-btn-border: var(--uui-neutral-30);
208
- --uui-btn-border-hover: var(--uui-neutral-30);
209
- --uui-btn-border-active: var(--uui-neutral-30);
210
- --uui-btn-caption: var(--uui-neutral-10);
211
- }
212
-
213
- &.uui-color-white {
214
- --uui-btn-caption: var(--uui-neutral-0);
215
- --uui-btn-border: var(--uui-neutral-0);
216
- --uui-btn-border-hover: var(--uui-neutral-0);
217
- --uui-btn-border-active: var(--uui-neutral-0);
218
- }
219
- }
220
-
221
- &.uui-fill-none {
222
- --uui-btn-border: var(--uui-color-60);
223
- --uui-btn-border-hover: var(--uui-color-60);
224
- --uui-btn-border-active: var(--uui-color-60);
225
- --uui-btn-caption: var(--uui-color-60);
226
-
227
- &.uui-color-neutral,
228
- &.uui-color-secondary {
229
- --uui-btn-bg-hover: var(--uui-neutral-60);
230
- --uui-btn-bg-active: var(--uui-neutral-50);
231
- --uui-btn-border: var(--uui-neutral-30);
232
- --uui-btn-border-hover: var(--uui-neutral-30);
233
- --uui-btn-border-active: var(--uui-neutral-30);
234
- --uui-btn-caption: var(--uui-neutral-10);
235
- }
236
-
237
- &.uui-color-white {
238
- --uui-btn-caption: var(--uui-neutral-0);
239
- --uui-btn-border: var(--uui-neutral-0);
240
- --uui-btn-border-hover: var(--uui-neutral-0);
241
- --uui-btn-border-active: var(--uui-neutral-0);
242
- }
243
- }
244
-
245
- &.uui-fill-ghost {
246
- --uui-btn-caption: var(--uui-color-60);
247
-
248
- &.uui-color-neutral,
249
- &.uui-color-secondary {
250
- --uui-btn-bg-hover: var(--uui-neutral-60);
251
- --uui-btn-bg-active: var(--uui-neutral-50);
252
- --uui-btn-border-hover: var(--uui-neutral-60);
253
- --uui-btn-border-active: var(--uui-neutral-50);
254
- --uui-btn-caption: var(--uui-neutral-10);
255
- }
256
-
257
- &.uui-color-white {
258
- --uui-btn-caption: var(--uui-neutral-0);
259
- }
260
- }
261
- }
262
-
263
- /* Badge */
264
-
265
- .uui-badge {
266
- &.uui-fill-outline {
267
- .uui-count_indicator {
268
- --uui-count_indicator-bg: var(--uui-neutral-80);
269
- --uui-count_indicator-border: var(--uui-neutral-40);
270
- --uui-count_indicator-caption: var(--uui-neutral-10);
271
- }
272
- }
273
- }
274
-
275
- .uui-badge.uui-color-neutral,
276
- .uui-badge.uui-color-night300 {
277
- &.uui-fill-solid {
278
- --uui-badge-bg: var(--uui-neutral-30);
279
- --uui-badge-border: var(--uui-neutral-30);
280
- --uui-badge-bg-hover: var(--uui-neutral-40);
281
- --uui-badge-border-hover: var(--uui-neutral-40);
282
- --uui-badge-caption: var(--uui-neutral-5);
283
-
284
- .uui-count_indicator {
285
- --uui-count_indicator-bg: var(--uui-neutral-0);
286
- --uui-count_indicator-border: var(--uui-neutral-0);
287
- --uui-count_indicator-caption: var(--uui-neutral-80);
288
- }
289
- }
290
-
291
- &.uui-fill-outline {
292
- --uui-badge-bg: var(--uui-neutral-60);
293
- --uui-badge-border: var(--uui-neutral-30);
294
- --uui-badge-bg-hover: var(--uui-neutral-50);
295
- --uui-badge-border-hover: var(--uui-neutral-30);
296
- --uui-badge-caption: var(--uui-neutral-0);
297
- --uui-badge-caption-hover: var(--uui-neutral-5);
298
- }
299
- }
300
-
301
- .uui-badge.uui-color-white {
302
- &.uui-fill-outline {
303
- --uui-badge-bg: var(--uui-neutral-0);
304
- --uui-badge-border: var(--uui-neutral-30);
305
- --uui-badge-bg-hover: var(--uui-neutral-10);
306
- --uui-badge-border-hover: var(--uui-neutral-30);
307
- --uui-badge-caption: var(--uui-neutral-70);
308
- --uui-badge-caption-hover: var(--uui-neutral-70);
309
-
310
- .uui-count_indicator {
311
- --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-100) 8%, transparent);
312
- --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-100) 40%, transparent);
313
- --uui-count_indicator-caption: var(--uui-neutral-70);
314
- }
315
- }
316
- }
317
-
318
- .uui-badge.uui-color-night100 {
319
- &.uui-fill-solid {
320
- --uui-badge-bg: var(--uui-neutral-10);
321
- --uui-badge-border: var(--uui-neutral-10);
322
- --uui-badge-bg-hover: var(--uui-neutral-20);
323
- --uui-badge-border-hover: var(--uui-neutral-20);
324
- --uui-badge-caption: var(--uui-neutral-70);
325
- --uui-badge-caption-hover: var(--uui-neutral-70);
326
- }
327
-
328
- &.uui-fill-outline {
329
- --uui-badge-bg: var(--uui-neutral-10);
330
- --uui-badge-border: var(--uui-neutral-30);
331
- --uui-badge-bg-hover: var(--uui-neutral-20);
332
- --uui-badge-border-hover: var(--uui-neutral-30);
333
- --uui-badge-caption: var(--uui-neutral-70);
334
- --uui-badge-caption-hover: var(--uui-neutral-70);
335
-
336
- .uui-count_indicator {
337
- --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-100) 8%, transparent);
338
- --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-100) 40%, transparent);
339
- --uui-count_indicator-caption: var(--uui-neutral-70);
340
- }
341
- }
342
- }
343
-
344
- .uui-badge.uui-color-night600 {
345
- &.uui-fill-solid {
346
- --uui-badge-bg: var(--uui-neutral-60);
347
- --uui-badge-border: var(--uui-neutral-60);
348
- --uui-badge-bg-hover: var(--uui-neutral-50);
349
- --uui-badge-border-hover: var(--uui-neutral-50);
350
- --uui-badge-caption: var(--white);
351
- --uui-badge-caption-hover: var(--white);
352
- }
353
-
354
- &.uui-fill-outline {
355
- --uui-badge-bg: var(--uui-neutral-80);
356
- --uui-badge-border: var(--uui-neutral-60);
357
- --uui-badge-bg-hover: var(--uui-neutral-70);
358
- --uui-badge-border-hover: var(--uui-neutral-60);
359
- --uui-badge-caption: var(--uui-neutral-5);
360
- --uui-badge-caption-hover: var(--uui-neutral-5);
361
- }
362
- }
363
-
364
- /* IconButton */
365
-
366
- .uui-icon_button:is(.uui-color-info, .uui-color-primary, .uui-color-sky, .uui-color-success, .uui-color-accent, .uui-color-grass .uui-color-error, .uui-color-critical, .uui-color-sun, .uui-color-fire) {
367
- --uui-icon_btn: var(--uui-color-60);
368
- --uui-icon_btn-hover: var(--uui-color-70);
369
- --uui-icon_btn-active: var(--uui-color-70);
370
- }
371
-
372
- .uui-icon_button.uui-color-white {
373
- --uui-icon_btn-hover: var(--uui-neutral-20);
374
- --uui-icon_btn-active: var(--uui-neutral-30);
375
- }
376
-
377
- .uui-icon_button.uui-color-secondary {
378
- --uui-icon_btn: var(--uui-neutral-40);
379
- --uui-icon_btn-hover: var(--uui-neutral-30);
380
- --uui-icon_btn-active: var(--uui-neutral-30);
381
- }
382
-
383
- /* LinkButton */
384
-
385
- .uui-link_button.uui-color-contrast {
386
- --uui-link_btn-text: var(--uui-neutral-0);
387
- --uui-link_btn-text-hover: var(--uui-neutral-5);
388
- --uui-link_btn-text-active: var(--uui-neutral-10);
389
- }
390
-
391
- .uui-link_button:is(.uui-color-primary, .uui-color-sky, .uui-color-secondary, .uui-color-accent, .uui-color-grass, .uui-color-critical, .uui-color-fire) {
392
- --uui-link_btn-text-disabled: var(--uui-neutral-40);
393
- }
394
-
395
- .uui-link_button.uui-color-primary,
396
- .uui-link_button.uui-color-sky {
397
- --uui-link_btn-text: var(--uui-color-60);
398
- --uui-link_btn-text-hover: var(--uui-color-70);
399
- }
400
-
401
- .uui-link_button.uui-color-secondary {
402
- --uui-link_btn-text: var(--uui-neutral-30);
403
- --uui-link_btn-text-hover: var(--uui-neutral-20);
404
- --uui-link_btn-text-active: var(--uui-neutral-10);
405
- }
406
-
407
- .uui-link_button.uui-color-white {
408
- --uui-link_btn-text: var(--uui-neutral-5);
409
- --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);
410
- }
411
-
412
- /* TubButton */
413
-
414
- .uui-tab-button {
415
- --uui-tab_btn-text-hover: var(--uui-primary-60);
416
- --uui-tab_btn-text-active: var(--uui-primary-60);
417
- }
418
-
419
- /* VerticalTabButton */
420
-
421
- .uui-vertical-tab-button {
422
- --uui-vertical_tab_btn-text-hover: var(--uui-primary-60);
423
- --uui-vertical_tab_btn-text-active: var(--uui-primary-60);
424
- --uui-vertical_tab_btn-icon-hover: var(--uui-primary-60);
425
- --uui-vertical_tab_btn-icon-active: var(--uui-primary-60);
426
- --uui-vertical_tab_btn-bg-hover: var(--uui-surface-higher);
427
- --uui-vertical_tab_btn-border-active: var(--uui-primary-60);
428
- }
429
-
430
- /* MainMenu */
431
-
432
- .uui-main_menu {
433
- --uui-main_menu-text: var(--uui-neutral-0);
434
- --uui-main_menu-text-active: var(--uui-neutral-0);
435
- --uui-main_menu-bg: var(--uui-neutral-70);
436
-
437
- --uui-main_menu-search-bg: var(--uui-neutral-5);
438
- --uui-main_menu-search-border: var(--uui-neutral-40);
439
- --uui-main_menu-search-placeholder: var(--uui-text-tertiary);
440
- --uui-main_menu-search-text: var(--uui-text-primary);
441
- --uui-main_menu-search-icon: var(--uui-neutral-70);
442
-
443
- --uui-main_menu-icon: var(--uui-neutral-5);
444
- --uui-main_menu-icon-hover: var(--uui-neutral-5);
445
- --uui-main_menu-icon-active: var(--uui-neutral-5);
446
- }
447
-
448
- .uui-main_menu-dropdown {
449
- --uui-main_menu-text: var(--uui-neutral-0);
450
- --uui-main_menu-text-active: var(--uui-neutral-0);
451
- --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);
452
- }
453
-
454
- /* BurgerMenu */
455
-
456
- .uui-burger {
457
- --uui-burger_menu-bg: var(--uui-app-bg);
458
- --uui-burger_menu-bg-hover: var(--uui-app-bg);
459
- --uui-burger_menu-caption: var(--uui-neutral-90);
460
- --uui-burger_menu-icon: var(--uui-neutral-5);
461
- --uui-burger_menu-item: var(--uui-app-bg);
462
- }
463
-
464
- /* BurgerButton */
465
- .uui-main_menu-burger-button {
466
- --uui-burger_btn_caption: var(--uui-neutral-0);
467
- --uui-burger_btn_caption-hover: var(--uui-primary-50);
468
- --uui-burger_btn_caption-active: var(--uui-primary-50);
469
- --uui-burger_btn-border: var(--uui-neutral-40);
470
- }
471
-
472
- /* BurgerSearch */
473
-
474
- .uui-main_menu-burger-search {
475
- --uui-burger_search: var(--uui-neutral-0);
476
- --uui-burger_search-fill: var(--uui-neutral-70);
477
- --uui-burger_search-bg: var(--uui-neutral-40);
478
- --uui-burger_search-placeholder: var(--uui-text-tertiary);
479
- }
480
-
481
- /* Tooltip */
482
-
483
- .uui-tooltip-container.uui-color-neutral {
484
- --uui-tooltip-border: var(--uui-neutral-50);
485
- }
486
-
487
- .uui-tooltip-container.uui-color-white {
488
- --uui-tooltip-bg: var(--uui-neutral-10);
489
- }
490
-
491
- .uui-tooltip-container.uui-color-critical {
492
- --uui-tooltip-bg: var(--uui-critical-50);
493
- }
494
-
495
- .uui-tooltip-container.uui-color-inverted {
496
- --uui-tooltip-bg: var(--uui-neutral-10);
497
- --uui-tooltip-text: var(--uui-neutral-70);
498
- }
499
-
500
- /* CountIndicator */
501
-
502
- .uui-count_indicator:is(.uui-color-neutral, .uui-color-gray, .uui-color-info, .uui-color-sky, .uui-color-grass, .uui-color-success, .uui-color-critical, .uui-color-fire, .uui-color-warning, .uui-color-sun) {
503
- --uui-count_indicator-bg: var(--uui-color-60);
504
- --uui-count_indicator-border: var(--uui-color-60);
505
-
506
- &.uui-color-neutral, &.uui-color-gray {
507
- --uui-count_indicator-caption: var(--uui-neutral-10);
508
- }
509
- }
510
-
511
- /* Status Indicator */
512
-
513
- .uui-status_indicator.uui-color-white.uui-fill-outline {
514
- .uui-status_indicator-dot {
515
- background-color: color-mix(in srgb, var(--white) 20%, transparent);
516
- border: 1px solid var(--white);
517
- }
518
- }
519
-
520
- .uui-status_indicator.uui-color-night600,
521
- .uui-status_indicator.uui-color-neutral {
522
- .uui-status_indicator-dot {
523
- background-color: var(--uui-neutral-30);
524
- }
525
-
526
- &.uui-fill-outline {
527
- .uui-status_indicator-dot {
528
- background-color: color-mix(in srgb, var(--uui-neutral-30) 20%, transparent);
529
- border: 1px solid var(--uui-neutral-30);
530
- }
531
- }
532
- }
533
-
534
- /* Alert */
535
-
536
- .uui-alert.uui-color-info {
537
- --uui-alert-icon: var(--uui-color-60);
538
- --uui-alert-border: var(--uui-color-60);
539
- }
540
-
541
- .uui-alert.uui-color-success {
542
- --uui-alert-icon: var(--uui-color-60);
543
- --uui-alert-border: var(--uui-color-60);
544
- }
545
-
546
- .uui-alert.uui-color-warning {
547
- --uui-alert-icon: var(--uui-color-60);
548
- --uui-alert-border: var(--uui-color-60);
549
- }
550
-
551
- .uui-alert.uui-color-error {
552
- --uui-alert-icon: var(--uui-color-60);
553
- --uui-alert-border: var(--uui-color-60);
554
- }
555
-
556
- /* Tag */
557
-
558
- .uui-tag {
559
- .uui-count_indicator {
560
- --uui-count_indicator-bg: color-mix(in srgb, var(--white) 10%, transparent);
561
- --uui-count_indicator-border: color-mix(in srgb, var(--white) 50%, transparent);
562
- }
563
-
564
- &.uui-fill-outline {
565
- --uui-tag-caption: var(--uui-neutral-0);
566
- --uui-tag-fill: var(--uui-neutral-0);
567
-
568
- .uui-count_indicator {
569
- --uui-count_indicator-bg: var(--uui-neutral-70);
570
- --uui-count_indicator-border: var(--uui-neutral-40);
571
- --uui-count_indicator-caption: var(--uui-neutral-10);
572
- }
573
- }
574
-
575
- &.uui-color-neutral,
576
- &.uui-color-night300 {
577
- &.uui-fill-solid {
578
- --uui-tag-caption: var(--uui-neutral-0);
579
- --uui-tag-fill: var(--uui-neutral-0);
580
- --uui-tag-bg: var(--uui-neutral-50);
581
- --uui-tag-border: var(--uui-neutral-50);
582
- --uui-tag-bg-hover: var(--uui-neutral-60);
583
- --uui-tag-border-hover: var(--uui-neutral-60);
584
-
585
- .uui-count_indicator {
586
- --uui-count_indicator-bg: var(--uui-neutral-0);
587
- --uui-count_indicator-border: var(--uui-neutral-0);
588
- }
589
- }
590
-
591
- &.uui-fill-outline {
592
- --uui-tag-bg: var(--uui-neutral-30);
593
- --uui-tag-border: var(--uui-neutral-20);
594
- --uui-tag-bg-hover: var(--uui-neutral-40);
595
- --uui-tag-border-hover: var(--uui-neutral-20);
596
-
597
- .uui-count_indicator {
598
- --uui-count_indicator-bg: var(--uui-neutral-40);
599
- --uui-count_indicator-border: var(--uui-neutral-40);
600
- --uui-count_indicator-caption: var(--uui-neutral-10);
601
- }
602
- }
603
- }
604
-
605
- &.uui-color-white {
606
- &.uui-fill-solid {
607
- --uui-tag-bg-hover: var(--uui-neutral-5);
608
- --uui-tag-border-hover: var(--uui-neutral-5);
609
-
610
- .uui-count_indicator {
611
- --uui-count_indicator-bg: var(--uui-neutral-40);
612
- --uui-count_indicator-border: var(--uui-neutral-40);
613
- --uui-count_indicator-caption: var(--uui-neutral-10);
614
- }
615
- }
616
-
617
- &.uui-fill-outline {
618
- --uui-tag-bg: color-mix(in srgb, var(--white) 5%, transparent);
619
- --uui-tag-border: var(--uui-neutral-0);
620
- --uui-tag-bg-hover: color-mix(in srgb, var(--white) 10%, transparent);
621
- --uui-tag-border-hover: var(--uui-neutral-0);
622
-
623
- .uui-count_indicator {
624
- --uui-count_indicator-bg: var(--uui-neutral-40);
625
- --uui-count_indicator-border: var(--uui-neutral-40);
626
- }
627
- }
628
- }
629
-
630
- &.uui-color-night100 {
631
- &.uui-fill-solid {
632
- --uui-tag-caption: var(--uui-neutral-80);
633
- --uui-tag-fill: var(--uui-neutral-80);
634
- --uui-tag-bg: var(--uui-neutral-10);
635
- --uui-tag-border: var(--uui-neutral-40);
636
- --uui-tag-bg-hover: var(--uui-neutral-5);
637
- --uui-tag-border-hover: var(--uui-neutral-30);
638
-
639
- .uui-count_indicator {
640
- --uui-count_indicator-bg: var(--uui-neutral-40);
641
- --uui-count_indicator-border: var(--uui-neutral-40);
642
- --uui-count_indicator-caption: var(--uui-neutral-10);
643
- }
644
- }
645
-
646
- &.uui-fill-outline {
647
- --uui-tag-bg: color-mix(in srgb, var(--uui-neutral-0) 12%, transparent);
648
- --uui-tag-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 15%, transparent);
649
- --uui-tag-border: var(--uui-neutral-20);
650
- --uui-tag-border-hover: var(--uui-neutral-20);
651
-
652
- .uui-count_indicator {
653
- --uui-count_indicator-bg: var(--uui-neutral-40);
654
- --uui-count_indicator-border: var(--uui-neutral-40);
655
- --uui-count_indicator-caption: var(--uui-neutral-10);
656
- }
657
- }
658
- }
659
-
660
- &.uui-color-night700 {
661
- &.uui-fill-solid {
662
- --uui-tag-caption: var(--uui-neutral-0);
663
- --uui-tag-fill: var(--uui-neutral-0);
664
- --uui-tag-bg: var(--uui-neutral-70);
665
- --uui-tag-border: var(--uui-neutral-70);
666
- --uui-tag-bg-hover: var(--uui-neutral-60);
667
- --uui-tag-border-hover: var(--uui-neutral-60);
668
-
669
- .uui-count_indicator {
670
- --uui-count_indicator-caption: var(--uui-neutral-0);
671
- }
672
- }
673
-
674
- &.uui-fill-outline {
675
- --uui-tag-bg: var(--uui-neutral-80);
676
- --uui-tag-border: var(--uui-neutral-40);
677
- --uui-tag-bg-hover: var(--uui-neutral-70);
678
- --uui-tag-border-hover: var(--uui-neutral-40);
679
-
680
- .uui-count_indicator {
681
- --uui-count_indicator-caption: var(--uui-neutral-0);
682
- --uui-count_indicator-bg: var(--uui-neutral-70);
683
- --uui-count_indicator-border: var(--uui-neutral-40);
684
- }
685
- }
686
- }
687
-
688
- &.uui-color-warning,
689
- &.uui-color-sun {
690
- &.uui-fill-solid {
691
- .uui-count_indicator {
692
- --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-5) 5%, transparent);
693
- --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-70) 30%, transparent);
694
- }
695
- }
696
- }
697
- }
698
-
699
- .uui-presets-panel-input .uui-icon-cancel {
700
- &:hover {
701
- background-color: var(--uui-neutral-60);
702
- }
703
-
704
- &:active {
705
- background-color: var(--uui-neutral-50);
706
- }
707
- }
708
-
709
- .uui-scroll-bars {
710
- --uui-scroll_bars-bg: var(--uui-neutral-40);
711
- --uui-scroll_bars-bg-active: var(--uui-neutral-30);
712
- }
713
-
714
- .uui-text-placeholder {
715
- --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--uui-neutral-30) 0, var(--uui-neutral-50) 150px, var(--uui-neutral-30) 300px);
716
- }
717
-
718
- .uui-dt-vars {
719
- --uui-dt-header-row-bg: var(--uui-surface-highest);
720
- }
721
-
722
- .uui-filters-panel-item-toggler {
723
- --uui-filters_toggler-bg-hover: var(--uui-neutral-30);
724
- }
725
-
726
- /* DropdownMenu */
727
-
728
- .uui-dropdownMenu-body {
729
- --uui-dropdown-selected_mark: var(--uui-info-60);
730
- }
731
-
732
- /* PickerInput */
733
-
734
- .uui-picker_input-body {
735
- --uui-picker_input-selected_mark: var(--uui-info-60);
736
- }
737
-
738
- /* fonts */
739
-
740
- .uui-font-sans {
741
- --uui-text-font: var(--uui-font);
742
- --uui-text-font-weight: 400;
743
- }
744
-
745
- .uui-font-sans-semibold {
746
- --uui-text-font: var(--uui-font);
747
- --uui-text-font-weight: 600;
748
-
749
- }
750
-
751
- .uui-font-sans-light {
752
- --uui-text-font: var(--uui-font);
753
- --uui-text-font-weight: 300;
754
- }
755
-
756
- /* FlexRow */
757
-
758
- // TODO: need approve
759
-
760
- //.uui-flex-row.uui-flex-row-bg-none {
761
- // --uui-flex-row-bg: transparent;
762
- //}
763
- //
764
- //.uui-flex-row.uui-flex-row-bg-white {
765
- // --uui-flex-row-bg: var(--white);
766
- //}
767
- //
768
- //.uui-flex-row.uui-flex-row-bg-night50 {
769
- // --uui-flex-row-bg: var(--night50);
770
- //}
771
- //
772
- //.uui-flex-row.uui-flex-row-bg-night100 {
773
- // --uui-flex-row-bg: var(--night100);
774
- //}
775
-
776
- /* Panel */
777
-
778
- //.uui-panel.uui-color-white {
779
- // --uui-panel-bg: var(--white);
780
- //}
781
- //
782
- //.uui-panel.uui-color-night50 {
783
- // --uui-panel-bg: var(--night50);
784
- //}
785
-
786
- /* Text */
787
-
788
- .uui-text.uui-color-sky {
789
- --uui-text: var(--sky-70);
790
- }
791
-
792
- .uui-text.uui-color-grass {
793
- --uui-text: var(--grass-70);
794
- }
795
-
796
- .uui-text.uui-color-sun {
797
- --uui-text: var(--sun-70);
798
- }
799
-
800
- .uui-text.uui-color-fire {
801
- --uui-text: var(--fire-70);
802
- }
803
-
804
- .uui-text.uui-color-night50 {
805
- --uui-text: var(--night50);
806
- }
807
-
808
- .uui-text.uui-color-night300 {
809
- --uui-text: var(--night300);
810
- }
811
-
812
- .uui-text.uui-color-night400 {
813
- --uui-text: var(--night400);
814
- }
815
-
816
- .uui-text.uui-color-night500 {
817
- --uui-text: var(--night500);
818
- }
819
-
820
- .uui-text.uui-color-night600 {
821
- --uui-text: var(--night600);
822
- }
823
-
824
- .uui-text.uui-color-night700 {
825
- --uui-text: var(--night700);
826
- }
827
-
828
- .uui-text.uui-color-night800 {
829
- --uui-text: var(--night800);
830
- }
831
-
832
- .uui-text.uui-color-night900 {
833
- --uui-text: var(--night900);
834
- }
835
-
836
- /* Typography */
837
-
838
- .uui-typography {
839
- .uui-highlight {
840
- background-color: var(--uui-warning-20);
841
- }
842
-
843
- h1 {
844
- font-weight: 600;
845
- }
846
-
847
- h2 {
848
- font-weight: 700;
849
- }
850
-
851
- h3 {
852
- font-weight: 600;
853
- }
854
-
855
- .hero-header {
856
- font-size: 72px;
857
- line-height: 72px;
858
- font-weight: 700;
859
- }
860
- }
861
- }
1
+ @use 'tokens/_theme_electric_dark.scss' as tokens;
2
+ /* Name convention */
3
+ /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
4
+
5
+ @mixin electric_dark_variables {
6
+ --uui-font: 'Source Sans Pro', sans-serif;
7
+ --uui-font-mono: 'Roboto Mono', monospace;
8
+
9
+ /* shadows */
10
+ --uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
11
+ --uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26);
12
+ --uui-shadow-level-3: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 25px 3px rgba(0, 0, 0, 0.56);
13
+
14
+ @include tokens.theme-tokens;
15
+
16
+ & {
17
+ --uui-border-radius: 3px;
18
+ scrollbar-color: var(--uui-neutral-40) transparent;
19
+ }
20
+
21
+ /* begin color classes */
22
+ .uui-color-fire {
23
+ --uui-color-5: var(--uui-critical-5);
24
+ --uui-color-10: var(--uui-critical-10);
25
+ --uui-color-20: var(--uui-critical-20);
26
+ --uui-color-50: var(--uui-critical-50);
27
+ --uui-color-60: var(--uui-critical-60);
28
+ --uui-color-70: var(--uui-critical-70);
29
+ --uui-color-contrast: var(--white);
30
+ }
31
+
32
+ .uui-color-night100 {
33
+ --uui-color-5: var(--white);
34
+ --uui-color-10: var(--white);
35
+ --uui-color-20: var(--night50);
36
+ --uui-color-50: var(--night100);
37
+ --uui-color-60: var(--night200);
38
+ --uui-color-70: var(--night300);
39
+ --uui-color-contrast: var(--uui-neutral-70);
40
+ }
41
+
42
+ .uui-color-night300 {
43
+ --uui-color-5: var(--night50);
44
+ --uui-color-10: var(--night100);
45
+ --uui-color-20: var(--night200);
46
+ --uui-color-50: var(--night300);
47
+ --uui-color-60: var(--night400);
48
+ --uui-color-70: var(--night500);
49
+ --uui-color-contrast: var(--uui-neutral-80);
50
+ }
51
+
52
+ .uui-color-night600 {
53
+ --uui-color-5: var(--uui-secondary-5);
54
+ --uui-color-10: var(--uui-secondary-10);
55
+ --uui-color-20: var(--uui-secondary-20);
56
+ --uui-color-50: var(--uui-secondary-50);
57
+ --uui-color-60: var(--uui-secondary-60);
58
+ --uui-color-70: var(--uui-secondary-70);
59
+ --uui-color-contrast: var(--white);
60
+ }
61
+
62
+ .uui-color-night700 {
63
+ --uui-color-5: var(--night400);
64
+ --uui-color-10: var(--night500);
65
+ --uui-color-20: var(--night600);
66
+ --uui-color-50: var(--night700);
67
+ --uui-color-60: var(--night800);
68
+ --uui-color-70: var(--night900);
69
+ --uui-color-contrast: var(--white);
70
+ }
71
+
72
+ .uui-color-sun {
73
+ --uui-color-5: var(--sun-5);
74
+ --uui-color-10: var(--sun-10);
75
+ --uui-color-20: var(--sun-20);
76
+ --uui-color-50: var(--sun-50);
77
+ --uui-color-60: var(--sun-60);
78
+ --uui-color-70: var(--sun-70);
79
+ --uui-color-contrast: var(--uui-neutral-80);
80
+ }
81
+
82
+ .uui-color-yellow {
83
+ --uui-color-5: var(--yellow-5);
84
+ --uui-color-10: var(--yellow-10);
85
+ --uui-color-20: var(--yellow-20);
86
+ --uui-color-50: var(--yellow-50);
87
+ --uui-color-60: var(--yellow-60);
88
+ --uui-color-70: var(--yellow-70);
89
+ --uui-color-contrast: var(--uui-neutral-80);
90
+ }
91
+
92
+ .uui-color-orange {
93
+ --uui-color-5: var(--orange-5);
94
+ --uui-color-10: var(--orange-10);
95
+ --uui-color-20: var(--orange-20);
96
+ --uui-color-50: var(--orange-50);
97
+ --uui-color-60: var(--orange-60);
98
+ --uui-color-70: var(--orange-70);
99
+ --uui-color-contrast: var(--uui-neutral-80);
100
+ }
101
+
102
+ .uui-color-fuchsia {
103
+ --uui-color-5: var(--fuchsia-5);
104
+ --uui-color-10: var(--fuchsia-10);
105
+ --uui-color-20: var(--fuchsia-20);
106
+ --uui-color-50: var(--fuchsia-50);
107
+ --uui-color-60: var(--fuchsia-60);
108
+ --uui-color-70: var(--fuchsia-70);
109
+ --uui-color-contrast: var(--white);
110
+ }
111
+
112
+ .uui-color-purple {
113
+ --uui-color-5: var(--purple-5);
114
+ --uui-color-10: var(--purple-10);
115
+ --uui-color-20: var(--purple-20);
116
+ --uui-color-50: var(--purple-50);
117
+ --uui-color-60: var(--purple-60);
118
+ --uui-color-70: var(--purple-70);
119
+ --uui-color-contrast: var(--white);
120
+ }
121
+
122
+ .uui-color-violet {
123
+ --uui-color-5: var(--violet-5);
124
+ --uui-color-10: var(--violet-10);
125
+ --uui-color-20: var(--violet-20);
126
+ --uui-color-50: var(--violet-50);
127
+ --uui-color-60: var(--violet-60);
128
+ --uui-color-70: var(--violet-70);
129
+ --uui-color-contrast: var(--white);
130
+ }
131
+
132
+ .uui-color-cobalt {
133
+ --uui-color-5: var(--cobalt-5);
134
+ --uui-color-10: var(--cobalt-10);
135
+ --uui-color-20: var(--cobalt-20);
136
+ --uui-color-50: var(--cobalt-50);
137
+ --uui-color-60: var(--cobalt-60);
138
+ --uui-color-70: var(--cobalt-70);
139
+ --uui-color-contrast: var(--white);
140
+ }
141
+
142
+ .uui-color-cyan {
143
+ --uui-color-5: var(--cyan-5);
144
+ --uui-color-10: var(--cyan-10);
145
+ --uui-color-20: var(--cyan-20);
146
+ --uui-color-50: var(--cyan-50);
147
+ --uui-color-60: var(--cyan-60);
148
+ --uui-color-70: var(--cyan-70);
149
+ --uui-color-contrast: var(--uui-neutral-80);
150
+ }
151
+
152
+ .uui-color-mint {
153
+ --uui-color-5: var(--mint-5);
154
+ --uui-color-10: var(--mint-10);
155
+ --uui-color-20: var(--mint-20);
156
+ --uui-color-50: var(--mint-50);
157
+ --uui-color-60: var(--mint-60);
158
+ --uui-color-70: var(--mint-70);
159
+ --uui-color-contrast: var(--uui-neutral-80);
160
+ }
161
+
162
+ /* override variables */
163
+
164
+ /* isInvalid color */
165
+
166
+ .uui-invalid:is(.uui-input-box, .uui-radio-input-container, .uui-checkbox-container) {
167
+ --uui-error-50: var(--uui-error-60);
168
+ }
169
+
170
+ /* Accordion */
171
+
172
+ .uui-accordion-container {
173
+ --uui-accordion-border-radius: 6px;
174
+ }
175
+
176
+ /* FileCard */
177
+
178
+ .uui-file_card {
179
+ --uui-file_card-border-radius: 6px;
180
+ }
181
+
182
+ /* Button */
183
+
184
+ .uui-button {
185
+ --uui-btn-bg-disabled: var(--uui-neutral-50);
186
+ --uui-btn-border-disabled: var(--uui-neutral-50);
187
+
188
+ &.uui-fill-solid.uui-color-white {
189
+ --uui-btn-bg-active: var(--uui-neutral-20);
190
+
191
+ &:active {
192
+ background-color: var(--uui-neutral-20);
193
+ border-color: var(--uui-neutral-20);
194
+ }
195
+ }
196
+
197
+ &.uui-fill-outline {
198
+ --uui-btn-border: var(--uui-color-60);
199
+ --uui-btn-border-hover: var(--uui-color-60);
200
+ --uui-btn-border-active: var(--uui-color-60);
201
+ --uui-btn-caption: var(--uui-color-60);
202
+
203
+ &.uui-color-neutral,
204
+ &.uui-color-secondary {
205
+ --uui-btn-bg-hover: var(--uui-neutral-60);
206
+ --uui-btn-bg-active: var(--uui-neutral-50);
207
+ --uui-btn-border: var(--uui-neutral-30);
208
+ --uui-btn-border-hover: var(--uui-neutral-30);
209
+ --uui-btn-border-active: var(--uui-neutral-30);
210
+ --uui-btn-caption: var(--uui-neutral-10);
211
+ }
212
+
213
+ &.uui-color-white {
214
+ --uui-btn-caption: var(--uui-neutral-0);
215
+ --uui-btn-border: var(--uui-neutral-0);
216
+ --uui-btn-border-hover: var(--uui-neutral-0);
217
+ --uui-btn-border-active: var(--uui-neutral-0);
218
+ }
219
+ }
220
+
221
+ &.uui-fill-none {
222
+ --uui-btn-border: var(--uui-color-60);
223
+ --uui-btn-border-hover: var(--uui-color-60);
224
+ --uui-btn-border-active: var(--uui-color-60);
225
+ --uui-btn-caption: var(--uui-color-60);
226
+
227
+ &.uui-color-neutral,
228
+ &.uui-color-secondary {
229
+ --uui-btn-bg-hover: var(--uui-neutral-60);
230
+ --uui-btn-bg-active: var(--uui-neutral-50);
231
+ --uui-btn-border: var(--uui-neutral-30);
232
+ --uui-btn-border-hover: var(--uui-neutral-30);
233
+ --uui-btn-border-active: var(--uui-neutral-30);
234
+ --uui-btn-caption: var(--uui-neutral-10);
235
+ }
236
+
237
+ &.uui-color-white {
238
+ --uui-btn-caption: var(--uui-neutral-0);
239
+ --uui-btn-border: var(--uui-neutral-0);
240
+ --uui-btn-border-hover: var(--uui-neutral-0);
241
+ --uui-btn-border-active: var(--uui-neutral-0);
242
+ }
243
+ }
244
+
245
+ &.uui-fill-ghost {
246
+ --uui-btn-caption: var(--uui-color-60);
247
+
248
+ &.uui-color-neutral,
249
+ &.uui-color-secondary {
250
+ --uui-btn-bg-hover: var(--uui-neutral-60);
251
+ --uui-btn-bg-active: var(--uui-neutral-50);
252
+ --uui-btn-border-hover: var(--uui-neutral-60);
253
+ --uui-btn-border-active: var(--uui-neutral-50);
254
+ --uui-btn-caption: var(--uui-neutral-10);
255
+ }
256
+
257
+ &.uui-color-white {
258
+ --uui-btn-caption: var(--uui-neutral-0);
259
+ }
260
+ }
261
+ }
262
+
263
+ /* Badge */
264
+
265
+ .uui-badge {
266
+ &.uui-fill-outline {
267
+ .uui-count_indicator {
268
+ --uui-count_indicator-bg: var(--uui-neutral-80);
269
+ --uui-count_indicator-border: var(--uui-neutral-40);
270
+ --uui-count_indicator-caption: var(--uui-neutral-10);
271
+ }
272
+ }
273
+ }
274
+
275
+ .uui-badge.uui-color-neutral,
276
+ .uui-badge.uui-color-night300 {
277
+ &.uui-fill-solid {
278
+ --uui-badge-bg: var(--uui-neutral-30);
279
+ --uui-badge-border: var(--uui-neutral-30);
280
+ --uui-badge-bg-hover: var(--uui-neutral-40);
281
+ --uui-badge-border-hover: var(--uui-neutral-40);
282
+ --uui-badge-caption: var(--uui-neutral-5);
283
+
284
+ .uui-count_indicator {
285
+ --uui-count_indicator-bg: var(--uui-neutral-0);
286
+ --uui-count_indicator-border: var(--uui-neutral-0);
287
+ --uui-count_indicator-caption: var(--uui-neutral-80);
288
+ }
289
+ }
290
+
291
+ &.uui-fill-outline {
292
+ --uui-badge-bg: var(--uui-neutral-60);
293
+ --uui-badge-border: var(--uui-neutral-30);
294
+ --uui-badge-bg-hover: var(--uui-neutral-50);
295
+ --uui-badge-border-hover: var(--uui-neutral-30);
296
+ --uui-badge-caption: var(--uui-neutral-0);
297
+ --uui-badge-caption-hover: var(--uui-neutral-5);
298
+ }
299
+ }
300
+
301
+ .uui-badge.uui-color-white {
302
+ &.uui-fill-outline {
303
+ --uui-badge-bg: var(--uui-neutral-0);
304
+ --uui-badge-border: var(--uui-neutral-30);
305
+ --uui-badge-bg-hover: var(--uui-neutral-10);
306
+ --uui-badge-border-hover: var(--uui-neutral-30);
307
+ --uui-badge-caption: var(--uui-neutral-70);
308
+ --uui-badge-caption-hover: var(--uui-neutral-70);
309
+
310
+ .uui-count_indicator {
311
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-100) 8%, transparent);
312
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-100) 40%, transparent);
313
+ --uui-count_indicator-caption: var(--uui-neutral-70);
314
+ }
315
+ }
316
+ }
317
+
318
+ .uui-badge.uui-color-night100 {
319
+ &.uui-fill-solid {
320
+ --uui-badge-bg: var(--uui-neutral-10);
321
+ --uui-badge-border: var(--uui-neutral-10);
322
+ --uui-badge-bg-hover: var(--uui-neutral-20);
323
+ --uui-badge-border-hover: var(--uui-neutral-20);
324
+ --uui-badge-caption: var(--uui-neutral-70);
325
+ --uui-badge-caption-hover: var(--uui-neutral-70);
326
+ }
327
+
328
+ &.uui-fill-outline {
329
+ --uui-badge-bg: var(--uui-neutral-10);
330
+ --uui-badge-border: var(--uui-neutral-30);
331
+ --uui-badge-bg-hover: var(--uui-neutral-20);
332
+ --uui-badge-border-hover: var(--uui-neutral-30);
333
+ --uui-badge-caption: var(--uui-neutral-70);
334
+ --uui-badge-caption-hover: var(--uui-neutral-70);
335
+
336
+ .uui-count_indicator {
337
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-100) 8%, transparent);
338
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-100) 40%, transparent);
339
+ --uui-count_indicator-caption: var(--uui-neutral-70);
340
+ }
341
+ }
342
+ }
343
+
344
+ .uui-badge.uui-color-night600 {
345
+ &.uui-fill-solid {
346
+ --uui-badge-bg: var(--uui-neutral-60);
347
+ --uui-badge-border: var(--uui-neutral-60);
348
+ --uui-badge-bg-hover: var(--uui-neutral-50);
349
+ --uui-badge-border-hover: var(--uui-neutral-50);
350
+ --uui-badge-caption: var(--white);
351
+ --uui-badge-caption-hover: var(--white);
352
+ }
353
+
354
+ &.uui-fill-outline {
355
+ --uui-badge-bg: var(--uui-neutral-80);
356
+ --uui-badge-border: var(--uui-neutral-60);
357
+ --uui-badge-bg-hover: var(--uui-neutral-70);
358
+ --uui-badge-border-hover: var(--uui-neutral-60);
359
+ --uui-badge-caption: var(--uui-neutral-5);
360
+ --uui-badge-caption-hover: var(--uui-neutral-5);
361
+ }
362
+ }
363
+
364
+ /* IconButton */
365
+
366
+ .uui-icon_button:is(.uui-color-info, .uui-color-primary, .uui-color-sky, .uui-color-success, .uui-color-accent, .uui-color-grass .uui-color-error, .uui-color-critical, .uui-color-sun, .uui-color-fire) {
367
+ --uui-icon_btn: var(--uui-color-60);
368
+ --uui-icon_btn-hover: var(--uui-color-70);
369
+ --uui-icon_btn-active: var(--uui-color-70);
370
+ }
371
+
372
+ .uui-icon_button.uui-color-white {
373
+ --uui-icon_btn-hover: var(--uui-neutral-20);
374
+ --uui-icon_btn-active: var(--uui-neutral-30);
375
+ }
376
+
377
+ .uui-icon_button.uui-color-secondary {
378
+ --uui-icon_btn: var(--uui-neutral-40);
379
+ --uui-icon_btn-hover: var(--uui-neutral-30);
380
+ --uui-icon_btn-active: var(--uui-neutral-30);
381
+ }
382
+
383
+ /* LinkButton */
384
+
385
+ .uui-link_button.uui-color-contrast {
386
+ --uui-link_btn-text: var(--uui-neutral-0);
387
+ --uui-link_btn-text-hover: var(--uui-neutral-5);
388
+ --uui-link_btn-text-active: var(--uui-neutral-10);
389
+ }
390
+
391
+ .uui-link_button:is(.uui-color-primary, .uui-color-sky, .uui-color-secondary, .uui-color-accent, .uui-color-grass, .uui-color-critical, .uui-color-fire) {
392
+ --uui-link_btn-text-disabled: var(--uui-neutral-40);
393
+ }
394
+
395
+ .uui-link_button.uui-color-primary,
396
+ .uui-link_button.uui-color-sky {
397
+ --uui-link_btn-text: var(--uui-color-60);
398
+ --uui-link_btn-text-hover: var(--uui-color-70);
399
+ }
400
+
401
+ .uui-link_button.uui-color-secondary {
402
+ --uui-link_btn-text: var(--uui-neutral-30);
403
+ --uui-link_btn-text-hover: var(--uui-neutral-20);
404
+ --uui-link_btn-text-active: var(--uui-neutral-10);
405
+ }
406
+
407
+ .uui-link_button.uui-color-white {
408
+ --uui-link_btn-text: var(--uui-neutral-5);
409
+ --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);
410
+ }
411
+
412
+ /* TubButton */
413
+
414
+ .uui-tab-button {
415
+ --uui-tab_btn-text-hover: var(--uui-primary-60);
416
+ --uui-tab_btn-text-active: var(--uui-primary-60);
417
+ }
418
+
419
+ /* VerticalTabButton */
420
+
421
+ .uui-vertical-tab-button {
422
+ --uui-vertical_tab_btn-text-hover: var(--uui-primary-60);
423
+ --uui-vertical_tab_btn-text-active: var(--uui-primary-60);
424
+ --uui-vertical_tab_btn-icon-hover: var(--uui-primary-60);
425
+ --uui-vertical_tab_btn-icon-active: var(--uui-primary-60);
426
+ --uui-vertical_tab_btn-bg-hover: var(--uui-surface-higher);
427
+ --uui-vertical_tab_btn-border-active: var(--uui-primary-60);
428
+ }
429
+
430
+ /* MainMenu */
431
+
432
+ .uui-main_menu {
433
+ --uui-main_menu-text: var(--uui-neutral-0);
434
+ --uui-main_menu-text-active: var(--uui-neutral-0);
435
+ --uui-main_menu-bg: var(--uui-neutral-70);
436
+
437
+ --uui-main_menu-search-bg: var(--uui-neutral-5);
438
+ --uui-main_menu-search-border: var(--uui-neutral-40);
439
+ --uui-main_menu-search-placeholder: var(--uui-text-tertiary);
440
+ --uui-main_menu-search-text: var(--uui-text-primary);
441
+ --uui-main_menu-search-icon: var(--uui-neutral-70);
442
+
443
+ --uui-main_menu-icon: var(--uui-neutral-5);
444
+ --uui-main_menu-icon-hover: var(--uui-neutral-5);
445
+ --uui-main_menu-icon-active: var(--uui-neutral-5);
446
+ }
447
+
448
+ .uui-main_menu-dropdown {
449
+ --uui-main_menu-text: var(--uui-neutral-0);
450
+ --uui-main_menu-text-active: var(--uui-neutral-0);
451
+ --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);
452
+ }
453
+
454
+ /* BurgerMenu */
455
+
456
+ .uui-burger {
457
+ --uui-burger_menu-bg: var(--uui-app-bg);
458
+ --uui-burger_menu-bg-hover: var(--uui-app-bg);
459
+ --uui-burger_menu-caption: var(--uui-neutral-90);
460
+ --uui-burger_menu-icon: var(--uui-neutral-5);
461
+ --uui-burger_menu-item: var(--uui-app-bg);
462
+ }
463
+
464
+ /* BurgerButton */
465
+ .uui-main_menu-burger-button {
466
+ --uui-burger_btn_caption: var(--uui-neutral-0);
467
+ --uui-burger_btn_caption-hover: var(--uui-primary-50);
468
+ --uui-burger_btn_caption-active: var(--uui-primary-50);
469
+ --uui-burger_btn-border: var(--uui-neutral-40);
470
+ }
471
+
472
+ /* BurgerSearch */
473
+
474
+ .uui-main_menu-burger-search {
475
+ --uui-burger_search: var(--uui-neutral-0);
476
+ --uui-burger_search-fill: var(--uui-neutral-70);
477
+ --uui-burger_search-bg: var(--uui-neutral-40);
478
+ --uui-burger_search-placeholder: var(--uui-text-tertiary);
479
+ }
480
+
481
+ /* Tooltip */
482
+
483
+ .uui-tooltip-container.uui-color-neutral {
484
+ --uui-tooltip-border: var(--uui-neutral-50);
485
+ }
486
+
487
+ .uui-tooltip-container.uui-color-white {
488
+ --uui-tooltip-bg: var(--uui-neutral-10);
489
+ }
490
+
491
+ .uui-tooltip-container.uui-color-critical {
492
+ --uui-tooltip-bg: var(--uui-critical-50);
493
+ }
494
+
495
+ .uui-tooltip-container.uui-color-inverted {
496
+ --uui-tooltip-bg: var(--uui-neutral-10);
497
+ --uui-tooltip-text: var(--uui-neutral-70);
498
+ }
499
+
500
+ /* Slider */
501
+
502
+ .uui-slider-tooltip-body {
503
+ --uui-slider-tooltip-bg: var(--uui-neutral-10);
504
+ --uui-slider-tooltip-text: var(--uui-neutral-70);
505
+ }
506
+
507
+ /* CountIndicator */
508
+
509
+ .uui-count_indicator:is(.uui-color-neutral, .uui-color-gray, .uui-color-info, .uui-color-sky, .uui-color-grass, .uui-color-success, .uui-color-critical, .uui-color-fire, .uui-color-warning, .uui-color-sun) {
510
+ --uui-count_indicator-bg: var(--uui-color-60);
511
+ --uui-count_indicator-border: var(--uui-color-60);
512
+
513
+ &.uui-color-neutral, &.uui-color-gray {
514
+ --uui-count_indicator-caption: var(--uui-neutral-10);
515
+ }
516
+ }
517
+
518
+ /* Status Indicator */
519
+
520
+ .uui-status_indicator.uui-color-white.uui-fill-outline {
521
+ .uui-status_indicator-dot {
522
+ background-color: color-mix(in srgb, var(--white) 20%, transparent);
523
+ border: 1px solid var(--white);
524
+ }
525
+ }
526
+
527
+ .uui-status_indicator.uui-color-night600,
528
+ .uui-status_indicator.uui-color-neutral {
529
+ .uui-status_indicator-dot {
530
+ background-color: var(--uui-neutral-30);
531
+ }
532
+
533
+ &.uui-fill-outline {
534
+ .uui-status_indicator-dot {
535
+ background-color: color-mix(in srgb, var(--uui-neutral-30) 20%, transparent);
536
+ border: 1px solid var(--uui-neutral-30);
537
+ }
538
+ }
539
+ }
540
+
541
+ /* Alert */
542
+
543
+ .uui-alert.uui-color-info {
544
+ --uui-alert-icon: var(--uui-color-60);
545
+ --uui-alert-border: var(--uui-color-60);
546
+ }
547
+
548
+ .uui-alert.uui-color-success {
549
+ --uui-alert-icon: var(--uui-color-60);
550
+ --uui-alert-border: var(--uui-color-60);
551
+ }
552
+
553
+ .uui-alert.uui-color-warning {
554
+ --uui-alert-icon: var(--uui-color-60);
555
+ --uui-alert-border: var(--uui-color-60);
556
+ }
557
+
558
+ .uui-alert.uui-color-error {
559
+ --uui-alert-icon: var(--uui-color-60);
560
+ --uui-alert-border: var(--uui-color-60);
561
+ }
562
+
563
+ /* Tag */
564
+
565
+ .uui-tag {
566
+ .uui-count_indicator {
567
+ --uui-count_indicator-bg: color-mix(in srgb, var(--white) 10%, transparent);
568
+ --uui-count_indicator-border: color-mix(in srgb, var(--white) 50%, transparent);
569
+ }
570
+
571
+ &.uui-fill-outline {
572
+ --uui-tag-caption: var(--uui-neutral-0);
573
+ --uui-tag-fill: var(--uui-neutral-0);
574
+
575
+ .uui-count_indicator {
576
+ --uui-count_indicator-bg: var(--uui-neutral-70);
577
+ --uui-count_indicator-border: var(--uui-neutral-40);
578
+ --uui-count_indicator-caption: var(--uui-neutral-10);
579
+ }
580
+ }
581
+
582
+ &.uui-color-neutral,
583
+ &.uui-color-night300 {
584
+ &.uui-fill-solid {
585
+ --uui-tag-caption: var(--uui-neutral-0);
586
+ --uui-tag-fill: var(--uui-neutral-0);
587
+ --uui-tag-bg: var(--uui-neutral-50);
588
+ --uui-tag-border: var(--uui-neutral-50);
589
+ --uui-tag-bg-hover: var(--uui-neutral-60);
590
+ --uui-tag-border-hover: var(--uui-neutral-60);
591
+
592
+ .uui-count_indicator {
593
+ --uui-count_indicator-bg: var(--uui-neutral-0);
594
+ --uui-count_indicator-border: var(--uui-neutral-0);
595
+ }
596
+ }
597
+
598
+ &.uui-fill-outline {
599
+ --uui-tag-bg: var(--uui-neutral-30);
600
+ --uui-tag-border: var(--uui-neutral-20);
601
+ --uui-tag-bg-hover: var(--uui-neutral-40);
602
+ --uui-tag-border-hover: var(--uui-neutral-20);
603
+
604
+ .uui-count_indicator {
605
+ --uui-count_indicator-bg: var(--uui-neutral-40);
606
+ --uui-count_indicator-border: var(--uui-neutral-40);
607
+ --uui-count_indicator-caption: var(--uui-neutral-10);
608
+ }
609
+ }
610
+ }
611
+
612
+ &.uui-color-white {
613
+ &.uui-fill-solid {
614
+ --uui-tag-bg-hover: var(--uui-neutral-5);
615
+ --uui-tag-border-hover: var(--uui-neutral-5);
616
+
617
+ .uui-count_indicator {
618
+ --uui-count_indicator-bg: var(--uui-neutral-40);
619
+ --uui-count_indicator-border: var(--uui-neutral-40);
620
+ --uui-count_indicator-caption: var(--uui-neutral-10);
621
+ }
622
+ }
623
+
624
+ &.uui-fill-outline {
625
+ --uui-tag-bg: color-mix(in srgb, var(--white) 5%, transparent);
626
+ --uui-tag-border: var(--uui-neutral-0);
627
+ --uui-tag-bg-hover: color-mix(in srgb, var(--white) 10%, transparent);
628
+ --uui-tag-border-hover: var(--uui-neutral-0);
629
+
630
+ .uui-count_indicator {
631
+ --uui-count_indicator-bg: var(--uui-neutral-40);
632
+ --uui-count_indicator-border: var(--uui-neutral-40);
633
+ }
634
+ }
635
+ }
636
+
637
+ &.uui-color-night100 {
638
+ &.uui-fill-solid {
639
+ --uui-tag-caption: var(--uui-neutral-80);
640
+ --uui-tag-fill: var(--uui-neutral-80);
641
+ --uui-tag-bg: var(--uui-neutral-10);
642
+ --uui-tag-border: var(--uui-neutral-40);
643
+ --uui-tag-bg-hover: var(--uui-neutral-5);
644
+ --uui-tag-border-hover: var(--uui-neutral-30);
645
+
646
+ .uui-count_indicator {
647
+ --uui-count_indicator-bg: var(--uui-neutral-40);
648
+ --uui-count_indicator-border: var(--uui-neutral-40);
649
+ --uui-count_indicator-caption: var(--uui-neutral-10);
650
+ }
651
+ }
652
+
653
+ &.uui-fill-outline {
654
+ --uui-tag-bg: color-mix(in srgb, var(--uui-neutral-0) 12%, transparent);
655
+ --uui-tag-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 15%, transparent);
656
+ --uui-tag-border: var(--uui-neutral-20);
657
+ --uui-tag-border-hover: var(--uui-neutral-20);
658
+
659
+ .uui-count_indicator {
660
+ --uui-count_indicator-bg: var(--uui-neutral-40);
661
+ --uui-count_indicator-border: var(--uui-neutral-40);
662
+ --uui-count_indicator-caption: var(--uui-neutral-10);
663
+ }
664
+ }
665
+ }
666
+
667
+ &.uui-color-night700 {
668
+ &.uui-fill-solid {
669
+ --uui-tag-caption: var(--uui-neutral-0);
670
+ --uui-tag-fill: var(--uui-neutral-0);
671
+ --uui-tag-bg: var(--uui-neutral-70);
672
+ --uui-tag-border: var(--uui-neutral-70);
673
+ --uui-tag-bg-hover: var(--uui-neutral-60);
674
+ --uui-tag-border-hover: var(--uui-neutral-60);
675
+
676
+ .uui-count_indicator {
677
+ --uui-count_indicator-caption: var(--uui-neutral-0);
678
+ }
679
+ }
680
+
681
+ &.uui-fill-outline {
682
+ --uui-tag-bg: var(--uui-neutral-80);
683
+ --uui-tag-border: var(--uui-neutral-40);
684
+ --uui-tag-bg-hover: var(--uui-neutral-70);
685
+ --uui-tag-border-hover: var(--uui-neutral-40);
686
+
687
+ .uui-count_indicator {
688
+ --uui-count_indicator-caption: var(--uui-neutral-0);
689
+ --uui-count_indicator-bg: var(--uui-neutral-70);
690
+ --uui-count_indicator-border: var(--uui-neutral-40);
691
+ }
692
+ }
693
+ }
694
+
695
+ &.uui-color-warning,
696
+ &.uui-color-sun {
697
+ &.uui-fill-solid {
698
+ .uui-count_indicator {
699
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-5) 5%, transparent);
700
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-70) 30%, transparent);
701
+ }
702
+ }
703
+ }
704
+ }
705
+
706
+ .uui-presets-panel-input .uui-icon-cancel {
707
+ &:hover {
708
+ background-color: var(--uui-neutral-60);
709
+ }
710
+
711
+ &:active {
712
+ background-color: var(--uui-neutral-50);
713
+ }
714
+ }
715
+
716
+ .uui-scroll-bars {
717
+ --uui-scroll_bars-bg: var(--uui-neutral-40);
718
+ --uui-scroll_bars-bg-active: var(--uui-neutral-30);
719
+ }
720
+
721
+ .uui-text-placeholder {
722
+ --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--uui-neutral-30) 0, var(--uui-neutral-50) 150px, var(--uui-neutral-30) 300px);
723
+ }
724
+
725
+ .uui-dt-vars {
726
+ --uui-dt-header-row-bg: var(--uui-surface-highest);
727
+ }
728
+
729
+ .uui-filters-panel-item-toggler {
730
+ --uui-filters_toggler-bg-hover: var(--uui-neutral-30);
731
+ }
732
+
733
+ /* DropdownMenu */
734
+
735
+ .uui-dropdownMenu-body {
736
+ --uui-dropdown-selected_mark: var(--uui-info-60);
737
+ }
738
+
739
+ /* PickerInput */
740
+
741
+ .uui-picker_input-body {
742
+ --uui-picker_input-selected_mark: var(--uui-info-60);
743
+ }
744
+
745
+ /* fonts */
746
+
747
+ .uui-font-sans {
748
+ --uui-text-font: var(--uui-font);
749
+ --uui-text-font-weight: 400;
750
+ }
751
+
752
+ .uui-font-sans-semibold {
753
+ --uui-text-font: var(--uui-font);
754
+ --uui-text-font-weight: 600;
755
+
756
+ }
757
+
758
+ .uui-font-sans-light {
759
+ --uui-text-font: var(--uui-font);
760
+ --uui-text-font-weight: 300;
761
+ }
762
+
763
+ /* FlexRow */
764
+
765
+ // TODO: need approve
766
+
767
+ //.uui-flex-row.uui-flex-row-bg-none {
768
+ // --uui-flex-row-bg: transparent;
769
+ //}
770
+ //
771
+ //.uui-flex-row.uui-flex-row-bg-white {
772
+ // --uui-flex-row-bg: var(--white);
773
+ //}
774
+ //
775
+ //.uui-flex-row.uui-flex-row-bg-night50 {
776
+ // --uui-flex-row-bg: var(--night50);
777
+ //}
778
+ //
779
+ //.uui-flex-row.uui-flex-row-bg-night100 {
780
+ // --uui-flex-row-bg: var(--night100);
781
+ //}
782
+
783
+ /* Panel */
784
+
785
+ //.uui-panel.uui-color-white {
786
+ // --uui-panel-bg: var(--white);
787
+ //}
788
+ //
789
+ //.uui-panel.uui-color-night50 {
790
+ // --uui-panel-bg: var(--night50);
791
+ //}
792
+
793
+ /* Text */
794
+
795
+ .uui-text.uui-color-sky {
796
+ --uui-text: var(--sky-70);
797
+ }
798
+
799
+ .uui-text.uui-color-grass {
800
+ --uui-text: var(--grass-70);
801
+ }
802
+
803
+ .uui-text.uui-color-sun {
804
+ --uui-text: var(--sun-70);
805
+ }
806
+
807
+ .uui-text.uui-color-fire {
808
+ --uui-text: var(--fire-70);
809
+ }
810
+
811
+ .uui-text.uui-color-night50 {
812
+ --uui-text: var(--night50);
813
+ }
814
+
815
+ .uui-text.uui-color-night300 {
816
+ --uui-text: var(--night300);
817
+ }
818
+
819
+ .uui-text.uui-color-night400 {
820
+ --uui-text: var(--night400);
821
+ }
822
+
823
+ .uui-text.uui-color-night500 {
824
+ --uui-text: var(--night500);
825
+ }
826
+
827
+ .uui-text.uui-color-night600 {
828
+ --uui-text: var(--night600);
829
+ }
830
+
831
+ .uui-text.uui-color-night700 {
832
+ --uui-text: var(--night700);
833
+ }
834
+
835
+ .uui-text.uui-color-night800 {
836
+ --uui-text: var(--night800);
837
+ }
838
+
839
+ .uui-text.uui-color-night900 {
840
+ --uui-text: var(--night900);
841
+ }
842
+
843
+ /* Typography */
844
+
845
+ .uui-typography {
846
+ .uui-highlight {
847
+ background-color: var(--uui-warning-20);
848
+ }
849
+
850
+ h1 {
851
+ font-weight: 600;
852
+ }
853
+
854
+ h2 {
855
+ font-weight: 700;
856
+ }
857
+
858
+ h3 {
859
+ font-weight: 600;
860
+ }
861
+
862
+ .hero-header {
863
+ font-size: 72px;
864
+ line-height: 72px;
865
+ font-weight: 700;
866
+ }
867
+ }
868
+ }