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