@epam/assets 6.1.3-beta.0 → 6.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) 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.map +1 -1
  4. package/css/theme/no-fonts/theme_promo.css.map +1 -1
  5. package/css/theme/theme_eduverse_dark.css.map +1 -1
  6. package/css/theme/theme_eduverse_light.css.map +1 -1
  7. package/css/theme/theme_electric.css.map +1 -1
  8. package/css/theme/theme_fresh_4px.css.map +1 -1
  9. package/css/theme/theme_loveship.css.map +1 -1
  10. package/css/theme/theme_loveship_dark.css.map +1 -1
  11. package/css/theme/theme_promo.css.map +1 -1
  12. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  13. package/css/theme/variables/fresh_4px.css.map +1 -1
  14. package/icons/common/radio-point-10.svg +13 -13
  15. package/icons/legacy/btn_cross.svg +22 -22
  16. package/icons/legacy/btn_tick.svg +22 -22
  17. package/icons/legacy/calendar-30.svg +12 -12
  18. package/icons/legacy/calendar-36.svg +14 -14
  19. package/icons/legacy/excel.svg +12 -12
  20. package/icons/legacy/filter-24.svg +11 -11
  21. package/icons/legacy/filter.svg +12 -12
  22. package/icons/legacy/folding-arrow.svg +14 -14
  23. package/icons/legacy/gear.svg +14 -14
  24. package/icons/legacy/help-24.svg +11 -11
  25. package/icons/legacy/help.svg +21 -21
  26. package/icons/legacy/label_info.svg +14 -14
  27. package/icons/legacy/lens.svg +17 -17
  28. package/icons/legacy/modal-close-cross.svg +22 -22
  29. package/icons/legacy/more.svg +20 -20
  30. package/icons/legacy/pencil.svg +12 -12
  31. package/icons/legacy/plus.svg +12 -12
  32. package/icons/legacy/sliders.svg +12 -12
  33. package/icons/legacy/sort-24.svg +15 -15
  34. package/icons/legacy/sort-desc-24.svg +15 -15
  35. package/icons/legacy/sort.svg +4 -4
  36. package/icons/legacy/trash.svg +12 -12
  37. package/icons/loaders/circle_loader_30.svg +69 -69
  38. package/icons/loaders/dots_loader_30.svg +39 -39
  39. package/icons/templates/generic-24.svg +40 -40
  40. package/icons/templates/generic-30.svg +43 -43
  41. package/icons/templates/generic.svg +40 -40
  42. package/icons/templates/tall.svg +69 -69
  43. package/package.json +2 -2
  44. package/readme.md +6 -6
  45. package/scss/electric/font-faces.scss +138 -138
  46. package/scss/font-faces.scss +3 -3
  47. package/scss/fonts.scss +2 -2
  48. package/scss/index.scss +4 -4
  49. package/scss/loveship/colors.scss +100 -100
  50. package/scss/loveship/font-faces.scss +186 -186
  51. package/scss/loveship/fonts.scss +23 -23
  52. package/scss/loveship/typography.scss +160 -160
  53. package/scss/loveship-colors.scss +2 -2
  54. package/scss/promo/colors.scss +100 -100
  55. package/scss/promo/font-faces.scss +168 -168
  56. package/scss/promo/fonts.scss +17 -17
  57. package/scss/promo/typography.scss +175 -175
  58. package/scss/typography.scss +2 -2
  59. package/theme/customThemeTemplate.css +697 -697
  60. package/theme/no-fonts/theme_electric.scss +7 -7
  61. package/theme/no-fonts/theme_loveship.scss +8 -8
  62. package/theme/no-fonts/theme_loveship_dark.scss +8 -8
  63. package/theme/no-fonts/theme_promo.scss +8 -8
  64. package/theme/theme_eduverse_dark.scss +876 -876
  65. package/theme/theme_eduverse_light.scss +552 -552
  66. package/theme/theme_electric.scss +8 -8
  67. package/theme/theme_fresh_4px.scss +7 -7
  68. package/theme/theme_loveship.scss +8 -8
  69. package/theme/theme_loveship_dark.scss +8 -8
  70. package/theme/theme_promo.scss +9 -9
  71. package/theme/theme_vanilla_thunder.scss +488 -488
  72. package/theme/variables/4px_grid.scss +265 -265
  73. package/theme/variables/6px_grid.scss +335 -335
  74. package/theme/variables/6px_grid_eduverse.scss +69 -69
  75. package/theme/variables/electric.scss +545 -545
  76. package/theme/variables/fresh_4px.scss +611 -611
  77. package/theme/variables/loveship.scss +627 -627
  78. package/theme/variables/loveship_dark.scss +846 -846
  79. package/theme/variables/promo.scss +601 -601
  80. package/theme/variables/tokens/_color_classes.scss +103 -103
  81. package/theme/variables/tokens/_theme_eduverse_dark.scss +282 -282
  82. package/theme/variables/tokens/_theme_eduverse_dark_mobile.scss +282 -282
  83. package/theme/variables/tokens/_theme_eduverse_light.scss +282 -282
  84. package/theme/variables/tokens/_theme_eduverse_light_mobile.scss +282 -282
  85. package/theme/variables/tokens/_theme_electric.scss +274 -274
  86. package/theme/variables/tokens/_theme_fresh_light_4px.scss +272 -272
  87. package/theme/variables/tokens/_theme_loveship_dark.scss +272 -272
  88. package/theme/variables/tokens/_theme_loveship_light.scss +272 -272
  89. package/theme/variables/tokens/_theme_promo.scss +272 -272
package/theme/customThemeTemplate.css CHANGED
@@ -1,698 +1,698 @@
1
- .uui-theme-myTheme {
2
- /* REQUIRED TO FILL PART */
3
- /* Theme semantic colors variables. Required to set according to your brand colors */
4
- --uui-accent-5:#F3FBF7;
5
- --uui-accent-10:#CDEEDD;
6
- --uui-accent-20:#97D9B7;
7
- --uui-accent-50:#07A956;
8
- --uui-accent-60:#06984D;
9
- --uui-accent-70:#068745;
10
- --uui-accent-contrast:#FFFFFF;
11
- --uui-critical-5:#FEF6F6;
12
- --uui-critical-10:#FDE1E1;
13
- --uui-critical-20:#FBB6B6;
14
- --uui-critical-50:#FF4242;
15
- --uui-critical-60:#E22A2A;
16
- --uui-critical-70:#AD0000;
17
- --uui-critical-contrast:#FFFFFF;
18
- --uui-error-5:#FEF6F6;
19
- --uui-error-10:#FDE1E1;
20
- --uui-error-20:#FBB6B6;
21
- --uui-error-50:#FF4242;
22
- --uui-error-60:#E22A2A;
23
- --uui-error-70:#AD0000;
24
- --uui-error-contrast:#FFFFFF;
25
- --uui-info-5:#F3F8FE;
26
- --uui-info-10:#CEE1FC;
27
- --uui-info-20:#85B4F8;
28
- --uui-info-50:#0A68F1;
29
- --uui-info-60:#095ED9;
30
- --uui-info-70:#0853C1;
31
- --uui-info-contrast:#FFFFFF;
32
- --uui-primary-5:#F3F8FE;
33
- --uui-primary-10:#CEE1FC;
34
- --uui-primary-20:#85B4F8;
35
- --uui-primary-50:#0A68F1;
36
- --uui-primary-60:#095ED9;
37
- --uui-primary-70:#0853C1;
38
- --uui-primary-contrast:#FFFFFF;
39
- --uui-secondary-5:#F5F6FA;
40
- --uui-secondary-10:#EBEDF5;
41
- --uui-secondary-20:#E1E3EB;
42
- --uui-secondary-50:#6C6F80;
43
- --uui-secondary-60:#474A59;
44
- --uui-secondary-70:#303240;
45
- --uui-secondary-contrast:#FFFFFF;
46
- --uui-success-5:#F3FBF7;
47
- --uui-success-10:#CDEEDD;
48
- --uui-success-20:#97D9B7;
49
- --uui-success-50:#07A956;
50
- --uui-success-60:#06984D;
51
- --uui-success-70:#068745;
52
- --uui-success-contrast:#FFFFFF;
53
- --uui-warning-5:#FFFCF5;
54
- --uui-warning-10:#FFEDC9;
55
- --uui-warning-20:#FFD785;
56
- --uui-warning-50:#FCAA00;
57
- --uui-warning-60:#FF9000;
58
- --uui-warning-70:#BD5800;
59
- --uui-warning-contrast:var(--uui-neutral-80);
60
- --uui-neutral-0:#FFFFFF;
61
- --uui-neutral-5:#FAFAFC;
62
- --uui-neutral-10:#F5F6FA;
63
- --uui-neutral-20:#EBEDF5;
64
- --uui-neutral-30:#E1E3EB;
65
- --uui-neutral-40:#CED0DB;
66
- --uui-neutral-50:#ACAFBF;
67
- --uui-neutral-60:#6C6F80;
68
- --uui-neutral-70:#474A59;
69
- --uui-neutral-80:#303240;
70
- --uui-neutral-90:#1D1E26;
71
- --uui-neutral-95:#111111;
72
- --uui-neutral-100:#000000;
73
- /* End Theme semantic variables */
74
-
75
- --uui-font:"Source Sans Pro", sans-serif; /* Your brand font */
76
- /* REQUIRED TO FILL PART END */
77
-
78
-
79
- /* Core variables. It's already filled based on semantic color values. It's not necessary to change it upfront, but you could tweak it if needed*/
80
- --uui-app-bg:var(--uui-neutral-10);
81
- --uui-divider:var(--uui-neutral-40);
82
- --uui-divider-light:var(--uui-neutral-30);
83
- --uui-overlay:#1D1E26CC;
84
- --uui-surface-higher:var(--uui-neutral-10);
85
- --uui-surface-highest:var(--uui-neutral-20);
86
- --uui-surface-main:var(--uui-neutral-0);
87
- --uui-surface-sunken:var(--uui-neutral-20);
88
- --uui-control-bg:var(--uui-surface-main);
89
- --uui-control-bg-disabled:var(--uui-neutral-5);
90
- --uui-control-bg-hover:var(--uui-neutral-60);
91
- --uui-control-border:var(--uui-neutral-40);
92
- --uui-control-border-disabled:var(--uui-neutral-30);
93
- --uui-control-border-focus:var(--uui-primary-50);
94
- --uui-control-border-hover:var(--uui-neutral-60);
95
- --uui-control-icon:var(--uui-neutral-50);
96
- --uui-control-icon-disabled:var(--uui-neutral-50);
97
- --uui-control-placeholder:var(--uui-neutral-50);
98
- --uui-control-placeholder-disabled:var(--uui-text-disabled);
99
- --uui-control-text:var(--uui-neutral-95);
100
- --uui-control-text-disabled:var(--uui-text-tertiary);
101
- --uui-icon:var(--uui-neutral-95);
102
- --uui-icon-active:var(--uui-neutral-100);
103
- --uui-icon-disabled:var(--uui-neutral-50);
104
- --uui-icon-hover:var(--uui-neutral-100);
105
- --uui-link:var(--uui-primary-50);
106
- --uui-link-hover:var(--uui-primary-60);
107
- --uui-link-visited:var(--purple-60);
108
- --uui-link-visited-hover:var(--purple-70);
109
- --uui-outline-focus:#0A68F17F;
110
- --uui-skeleton:var(--uui-neutral-40);
111
- --uui-text-bg-highlight:var(--uui-warning-10);
112
- --uui-text-critical:var(--uui-critical-70);
113
- --uui-text-disabled:var(--uui-neutral-50);
114
- --uui-text-info:var(--uui-info-70);
115
- --uui-text-primary:var(--uui-neutral-95);
116
- --uui-text-secondary:var(--uui-neutral-70);
117
- --uui-text-success:var(--uui-success-70);
118
- --uui-text-tertiary:var(--uui-neutral-60);
119
- --uui-text-warning:var(--uui-warning-70);
120
-
121
- --uui-font-mono:"Roboto Mono", monospace;
122
- --gradient-1:linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
123
- --gradient-2:linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%);
124
- --gradient-3:linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%);
125
- --gradient-4:linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
126
- --gradient-5:linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
127
- --uui-shadow-level-1:0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1);
128
- --uui-shadow-level-2:0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
129
- --uui-shadow-level-3:0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05);
130
- }
131
-
132
- /* Color classes. Component variables overrides. Advanced and fine tuning customization part. */
133
- .uui-theme-myTheme .uui-color-primary{
134
- --uui-color-5:var(--uui-primary-5);
135
- --uui-color-10:var(--uui-primary-10);
136
- --uui-color-20:var(--uui-primary-20);
137
- --uui-color-50:var(--uui-primary-50);
138
- --uui-color-60:var(--uui-primary-60);
139
- --uui-color-70:var(--uui-primary-70);
140
- --uui-color-contrast:var(--uui-primary-contrast);
141
- }
142
- .uui-theme-myTheme .uui-color-secondary{
143
- --uui-color-5:var(--uui-secondary-5);
144
- --uui-color-10:var(--uui-secondary-10);
145
- --uui-color-20:var(--uui-secondary-20);
146
- --uui-color-50:var(--uui-secondary-50);
147
- --uui-color-60:var(--uui-secondary-60);
148
- --uui-color-70:var(--uui-secondary-70);
149
- --uui-color-contrast:var(--uui-secondary-contrast);
150
- }
151
- .uui-theme-myTheme .uui-color-accent{
152
- --uui-color-5:var(--uui-accent-5);
153
- --uui-color-10:var(--uui-accent-10);
154
- --uui-color-20:var(--uui-accent-20);
155
- --uui-color-50:var(--uui-accent-50);
156
- --uui-color-60:var(--uui-accent-60);
157
- --uui-color-70:var(--uui-accent-70);
158
- --uui-color-contrast:var(--uui-accent-contrast);
159
- }
160
- .uui-theme-myTheme .uui-color-info{
161
- --uui-color-5:var(--uui-info-5);
162
- --uui-color-10:var(--uui-info-10);
163
- --uui-color-20:var(--uui-info-20);
164
- --uui-color-50:var(--uui-info-50);
165
- --uui-color-60:var(--uui-info-60);
166
- --uui-color-70:var(--uui-info-70);
167
- --uui-color-contrast:var(--uui-info-contrast);
168
- }
169
- .uui-theme-myTheme .uui-color-success{
170
- --uui-color-5:var(--uui-success-5);
171
- --uui-color-10:var(--uui-success-10);
172
- --uui-color-20:var(--uui-success-20);
173
- --uui-color-50:var(--uui-success-50);
174
- --uui-color-60:var(--uui-success-60);
175
- --uui-color-70:var(--uui-success-70);
176
- --uui-color-contrast:var(--uui-success-contrast);
177
- }
178
- .uui-theme-myTheme .uui-color-warning{
179
- --uui-color-5:var(--uui-warning-5);
180
- --uui-color-10:var(--uui-warning-10);
181
- --uui-color-20:var(--uui-warning-20);
182
- --uui-color-50:var(--uui-warning-50);
183
- --uui-color-60:var(--uui-warning-60);
184
- --uui-color-70:var(--uui-warning-70);
185
- --uui-color-contrast:var(--uui-warning-contrast);
186
- }
187
- .uui-theme-myTheme .uui-color-error{
188
- --uui-color-5:var(--uui-error-5);
189
- --uui-color-10:var(--uui-error-10);
190
- --uui-color-20:var(--uui-error-20);
191
- --uui-color-50:var(--uui-error-50);
192
- --uui-color-60:var(--uui-error-60);
193
- --uui-color-70:var(--uui-error-70);
194
- --uui-color-contrast:var(--uui-error-contrast);
195
- }
196
- .uui-theme-myTheme .uui-color-critical{
197
- --uui-color-5:var(--uui-critical-5);
198
- --uui-color-10:var(--uui-critical-10);
199
- --uui-color-20:var(--uui-critical-20);
200
- --uui-color-50:var(--uui-critical-50);
201
- --uui-color-60:var(--uui-critical-60);
202
- --uui-color-70:var(--uui-critical-70);
203
- --uui-color-contrast:var(--uui-critical-contrast);
204
- }
205
- .uui-theme-myTheme .uui-color-white{
206
- --uui-color-5:color-mix(in srgb, #FFFFFF 15%, transparent);
207
- --uui-color-10:color-mix(in srgb, #FFFFFF 22%, transparent);
208
- --uui-color-20:color-mix(in srgb, #FFFFFF 29%, transparent);
209
- --uui-color-50:var(--uui-neutral-0);
210
- --uui-color-60:var(--uui-neutral-10);
211
- --uui-color-70:var(--uui-neutral-20);
212
- --uui-color-contrast:var(--uui-neutral-70);
213
- }
214
- .uui-theme-myTheme .uui-color-neutral{
215
- --uui-color-5:var(--uui-secondary-5);
216
- --uui-color-10:var(--uui-secondary-10);
217
- --uui-color-20:var(--uui-secondary-20);
218
- --uui-color-50:var(--uui-secondary-50);
219
- --uui-color-60:var(--uui-secondary-60);
220
- --uui-color-70:var(--uui-secondary-70);
221
- --uui-color-contrast:var(--uui-secondary-contrast);
222
- }
223
- .uui-theme-myTheme{
224
- --uui-border-radius:3px;
225
- }
226
-
227
- .uui-theme-myTheme .uui-accordion-container{
228
- --uui-accordion-border-radius:6px;
229
- }
230
- .uui-theme-myTheme .uui-file_card{
231
- --uui-file_card-border-radius:6px;
232
- }
233
- .uui-theme-myTheme .uui-badge.uui-color-white.uui-fill-solid{
234
- --uui-badge-bg-hover:var(--uui-neutral-30);
235
- --uui-badge-border-hover:var(--uui-neutral-30);
236
- }
237
- .uui-theme-myTheme .uui-badge.uui-color-white.uui-fill-outline{
238
- --uui-badge-bg:var(--uui-neutral-0);
239
- --uui-badge-border:var(--uui-neutral-30);
240
- --uui-badge-bg-hover:var(--uui-neutral-10);
241
- --uui-badge-border-hover:var(--uui-neutral-30);
242
- --uui-badge-caption:var(--uui-neutral-70);
243
- --uui-badge-caption-hover:var(--uui-neutral-70);
244
- }
245
- .uui-theme-myTheme .uui-badge.uui-color-white.uui-fill-outline .uui-count_indicator{
246
- --uui-count_indicator-bg:color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
247
- --uui-count_indicator-border:color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
248
- }
249
- .uui-theme-myTheme .uui-badge.uui-color-neutral{
250
- --uui-badge-caption:var(--uui-neutral-95);
251
- }
252
- .uui-theme-myTheme .uui-badge.uui-color-neutral.uui-fill-solid{
253
- --uui-badge-bg:var(--uui-neutral-30);
254
- --uui-badge-bg-hover:var(--uui-neutral-40);
255
- --uui-badge-border:var(--uui-neutral-30);
256
- --uui-badge-border-hover:var(--uui-neutral-40);
257
- --uui-color-contrast:var(--uui-neutral-80);
258
- }
259
- .uui-theme-myTheme .uui-badge.uui-color-neutral.uui-fill-solid .uui-count_indicator{
260
- --uui-count_indicator-bg:var(--uui-neutral-0);
261
- --uui-count_indicator-border:var(--uui-neutral-0);
262
- }
263
- .uui-theme-myTheme .uui-badge.uui-color-neutral.uui-fill-outline{
264
- --uui-badge-bg:var(--uui-neutral-20);
265
- --uui-badge-border:var(--uui-neutral-40);
266
- --uui-badge-border-hover:var(--uui-neutral-40);
267
- --uui-badge-bg-hover:var(--uui-neutral-30);
268
- --uui-badge-caption-hover:var(--uui-neutral-80);
269
- }
270
- .uui-theme-myTheme .uui-badge.uui-color-night100.uui-fill-solid{
271
- --uui-badge-bg-hover:var(--uui-neutral-20);
272
- --uui-badge-border-hover:var(--uui-neutral-20);
273
- }
274
- .uui-theme-myTheme .uui-badge.uui-color-night100.uui-fill-outline{
275
- --uui-badge-bg:var(--uui-neutral-10);
276
- --uui-badge-bg-hover:var(--uui-neutral-20);
277
- --uui-badge-border:var(--uui-neutral-30);
278
- --uui-badge-border-hover:var(--uui-neutral-30);
279
- --uui-badge-caption:var(--uui-neutral-70);
280
- --uui-badge-caption-hover:var(--uui-neutral-70);
281
- }
282
- .uui-theme-myTheme .uui-badge.uui-color-night100.uui-fill-outline .uui-count_indicator{
283
- --uui-count_indicator-bg:color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
284
- --uui-count_indicator-border:color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
285
- }
286
- .uui-theme-myTheme .uui-badge.uui-color-night600.uui-fill-outline{
287
- --uui-badge-border:var(--uui-neutral-60);
288
- --uui-badge-border-hover:var(--uui-neutral-60);
289
- --uui-badge-caption:var(--uui-neutral-95);
290
- --uui-badge-caption-hover:var(--uui-neutral-80);
291
- }
292
- .uui-theme-myTheme .uui-badge.uui-color-yellow.uui-fill-outline{
293
- --uui-badge-border:var(--yellow-20);
294
- }
295
- .uui-theme-myTheme .uui-button:is(.uui-color-secondary, .uui-color-neutral):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost){
296
- --uui-btn-caption:var(--uui-neutral-70);
297
- }
298
- .uui-theme-myTheme .uui-icon_button.uui-color-white{
299
- --uui-icon_btn-hover:var(--uui-neutral-20);
300
- --uui-icon_btn-active:var(--uui-neutral-30);
301
- }
302
- .uui-theme-myTheme .uui-link_button.uui-color-contrast{
303
- --uui-link_btn-text:var(--uui-neutral-5);
304
- --uui-link_btn-text-hover:var(--uui-neutral-10);
305
- --uui-link_btn-text-active:var(--uui-neutral-20);
306
- }
307
- .uui-theme-myTheme .uui-link_button.uui-color-white{
308
- --uui-link_btn-text:var(--uui-neutral-5);
309
- --uui-link_btn-text-hover:var(--uui-neutral-30);
310
- --uui-link_btn-text-active:var(--uui-neutral-40);
311
- --uui-link_btn-text-disabled:color-mix(in srgb, var(--white) 40%, transparent);
312
- }
313
- .uui-theme-myTheme .uui-count_indicator.uui-color-neutral{
314
- --uui-count_indicator-bg:var(--uui-neutral-30);
315
- --uui-count_indicator-border:var(--uui-neutral-30);
316
- }
317
- .uui-theme-myTheme .uui-count_indicator:is(.uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning){
318
- --uui-count_indicator-caption:var(--uui-neutral-70);
319
- }
320
- .uui-theme-myTheme .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator-dot{
321
- background-color:color-mix(in srgb, var(--white) 20%, transparent);
322
- border:1px solid var(--uui-neutral-40);
323
- }
324
- .uui-theme-myTheme .uui-main_menu{
325
- --uui-main_menu-bg:var(--uui-neutral-95);
326
- --uui-main_menu-hover:var(--uui-neutral-90);
327
- --uui-main_menu-border-active-gradient:var(--gradient-1);
328
- }
329
- .uui-theme-myTheme .uui-main_menu-dropdown{
330
- --uui-main_menu-dropdown-bg-hover:var(--uui-neutral-95);
331
- }
332
- .uui-theme-myTheme .uui-burger{
333
- --uui-burger_menu-bg:var(--uui-neutral-95);
334
- --uui-burger_menu-bg-hover:var(--uui-neutral-95);
335
- --uui-burger_menu-item:var(--uui-neutral-95);
336
- }
337
- .uui-theme-myTheme .uui-tag.uui-fill-outline{
338
- --uui-tag-fill:var(--uui-neutral-95);
339
- --uui-tag-caption:var(--uui-text-primary);
340
- }
341
- .uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-solid{
342
- --uui-tag-fill:var(--uui-neutral-95);
343
- }
344
- .uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-solid .uui-count_indicator{
345
- --uui-count_indicator-bg:var(--uui-neutral-30);
346
- --uui-count_indicator-border:var(--uui-neutral-30);
347
- }
348
- .uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-outline{
349
- --uui-tag-bg:var(--uui-neutral-0);
350
- --uui-tag-border:var(--uui-neutral-30);
351
- --uui-tag-bg-hover:var(--uui-neutral-10);
352
- --uui-tag-border-hover:var(--uui-neutral-30);
353
- }
354
- .uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-outline .uui-count_indicator{
355
- --uui-count_indicator-bg:var(--uui-neutral-30);
356
- --uui-count_indicator-border:var(--uui-neutral-30);
357
- }
358
- .uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-solid{
359
- --uui-tag-fill:var(--uui-neutral-95);
360
- }
361
- .uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-solid .uui-count_indicator{
362
- --uui-count_indicator-bg:var(--uui-neutral-30);
363
- --uui-count_indicator-border:var(--uui-neutral-30);
364
- --uui-count_indicator-caption:var(--uui-neutral-70);
365
- }
366
- .uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-outline{
367
- --uui-tag-bg:var(--uui-neutral-5);
368
- --uui-tag-bg-hover:var(--uui-neutral-10);
369
- --uui-tag-border:var(--uui-neutral-30);
370
- --uui-tag-border-hover:var(--uui-neutral-30);
371
- }
372
- .uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-outline .uui-count_indicator{
373
- --uui-count_indicator-bg:var(--uui-neutral-30);
374
- --uui-count_indicator-border:var(--uui-neutral-30);
375
- }
376
- .uui-theme-myTheme .uui-tag.uui-color-night700.uui-fill-solid .uui-count_indicator{
377
- --uui-count_indicator-border:color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
378
- --uui-count_indicator-bg:color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
379
- }
380
- .uui-theme-myTheme .uui-tag.uui-color-night700.uui-fill-outline{
381
- --uui-tag-bg:var(--uui-neutral-20);
382
- --uui-tag-bg-hover:var(--uui-neutral-30);
383
- --uui-tag-border:var(--uui-neutral-50);
384
- --uui-tag-border-hover:var(--uui-neutral-50);
385
- }
386
- .uui-theme-myTheme .uui-tag.uui-color-warning, .uui-theme-myTheme .uui-tag.uui-color-sun{
387
- --uui-tag-fill:var(--uui-neutral-100);
388
- }
389
- .uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-solid, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-solid{
390
- --uui-tag-caption:var(--uui-neutral-80);
391
- }
392
- .uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-solid .uui-count_indicator, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-solid .uui-count_indicator{
393
- --uui-count_indicator-bg:color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);
394
- --uui-count_indicator-border:color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);
395
- --uui-count_indicator-caption:var(--uui-neutral-80);
396
- }
397
- .uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-outline, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-outline{
398
- --uui-tag-caption:var(--uui-neutral-95);
399
- }
400
- .uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-outline .uui-count_indicator, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-outline .uui-count_indicator{
401
- --uui-count_indicator-bg:var(--uui-neutral-0);
402
- --uui-count_indicator-border:var(--uui-neutral-40);
403
- }
404
- .uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-solid{
405
- --uui-tag-bg:var(--uui-neutral-30);
406
- --uui-tag-bg-hover:var(--uui-neutral-40);
407
- --uui-tag-border:var(--uui-neutral-30);
408
- --uui-tag-border-hover:var(--uui-neutral-40);
409
- --uui-tag-caption:var(--uui-text-primary);
410
- --uui-tag-fill:var(--uui-neutral-95);
411
- }
412
- .uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-solid .uui-count_indicator{
413
- --uui-count_indicator-bg:var(--uui-neutral-0);
414
- --uui-count_indicator-border:var(--uui-neutral-0);
415
- --uui-count_indicator-caption:var(--uui-neutral-70);
416
- }
417
- .uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-outline{
418
- --uui-tag-bg:var(--uui-neutral-20);
419
- --uui-tag-bg-hover:var(--uui-neutral-30);
420
- --uui-tag-fill:var(--uui-neutral-95);
421
- }
422
- .uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-outline .uui-count_indicator{
423
- --uui-count_indicator-bg:var(--uui-neutral-30);
424
- --uui-count_indicator-border:var(--uui-neutral-30);
425
- }
426
- .uui-theme-myTheme .uui-typography h1{
427
- font-weight:400;
428
- }
429
- .uui-theme-myTheme .uui-typography h2, .uui-theme-myTheme .uui-typography h3, .uui-theme-myTheme .uui-typography h4, .uui-theme-myTheme .uui-typography h5{
430
- font-weight:600;
431
- }
432
-
433
- .uui-theme-myTheme .uui-typography h1.promo-header{
434
- font-size:72px;
435
- font-weight:400;
436
- }
437
- .uui-theme-myTheme .uui-typography h2.promo-header{
438
- font-size:44px;
439
- font-weight:600;
440
- }
441
- .uui-theme-myTheme .uui-typography h3.promo-header{
442
- font-size:36px;
443
- }
444
- .uui-theme-myTheme .uui-typography h4.promo-header{
445
- font-size:30px;
446
- }
447
- .uui-theme-myTheme .uui-typography h5.promo-header{
448
- font-size:24px;
449
- }
450
- .uui-theme-myTheme .uui-typography h6.promo-header{
451
- font-size:18px;
452
- }
453
- .uui-theme-myTheme{
454
- --uui-grid-unit:6px;
455
- --uui-focus-outline-width:2px;
456
- --uui-focus-outline-offset:2px;
457
- --uui-focus-radius:2px;
458
- --uui-tab-line-width:3px;
459
- --uui-notify-size:6px;
460
- }
461
- .uui-theme-myTheme .uui-size-12{
462
- --uui-size:12px;
463
- --uui-border-width:1px;
464
- --uui-horizontal-gap:6px;
465
- --uui-vertical-gap:3px;
466
- --uui-horizontal-padding:6px;
467
- --uui-vertical-padding:3px;
468
- --uui-icon-size:12px;
469
- --uui-line-height:12px;
470
- --uui-font-size:12px;
471
- --uui-dot-size:6px;
472
- }
473
- .uui-theme-myTheme .uui-size-18{
474
- --uui-size:18px;
475
- --uui-border-width:1px;
476
- --uui-horizontal-gap:3px;
477
- --uui-vertical-gap:3px;
478
- --uui-horizontal-padding:3px;
479
- --uui-vertical-padding:3px;
480
- --uui-icon-size:12px;
481
- --uui-line-height:12px;
482
- --uui-font-size:10px;
483
- --uui-dot-size:6px;
484
- }
485
- .uui-theme-myTheme .uui-size-24{
486
- --uui-size:24px;
487
- --uui-border-width:1px;
488
- --uui-horizontal-gap:6px;
489
- --uui-vertical-gap:3px;
490
- --uui-horizontal-padding:6px;
491
- --uui-vertical-padding:3px;
492
- --uui-icon-size:12px;
493
- --uui-line-height:18px;
494
- --uui-font-size:12px;
495
- --uui-dot-size:8px;
496
- }
497
- .uui-theme-myTheme .uui-size-30{
498
- --uui-size:30px;
499
- --uui-border-width:1px;
500
- --uui-horizontal-gap:6px;
501
- --uui-vertical-gap:3px;
502
- --uui-horizontal-padding:6px;
503
- --uui-vertical-padding:6px;
504
- --uui-icon-size:18px;
505
- --uui-line-height:18px;
506
- --uui-font-size:14px;
507
- --uui-dot-size:8px;
508
- }
509
- .uui-theme-myTheme .uui-size-36{
510
- --uui-size:36px;
511
- --uui-border-width:1px;
512
- --uui-horizontal-gap:6px;
513
- --uui-vertical-gap:3px;
514
- --uui-horizontal-padding:6px;
515
- --uui-vertical-padding:9px;
516
- --uui-icon-size:18px;
517
- --uui-line-height:18px;
518
- --uui-font-size:14px;
519
- --uui-dot-size:8px;
520
- }
521
- .uui-theme-myTheme .uui-size-42{
522
- --uui-size:42px;
523
- --uui-border-width:1px;
524
- --uui-horizontal-gap:6px;
525
- --uui-vertical-gap:3px;
526
- --uui-horizontal-padding:12px;
527
- --uui-vertical-padding:9px;
528
- --uui-icon-size:18px;
529
- --uui-line-height:24px;
530
- --uui-font-size:16px;
531
- --uui-dot-size:10px;
532
- }
533
- .uui-theme-myTheme .uui-size-48{
534
- --uui-size:48px;
535
- --uui-border-width:1px;
536
- --uui-horizontal-gap:6px;
537
- --uui-vertical-gap:3px;
538
- --uui-horizontal-padding:12px;
539
- --uui-vertical-padding:12px;
540
- --uui-icon-size:24px;
541
- --uui-line-height:24px;
542
- --uui-font-size:16px;
543
- --uui-dot-size:12px;
544
- }
545
- .uui-theme-myTheme .uui-size-60{
546
- --uui-size:60px;
547
- --uui-border-width:1px;
548
- --uui-horizontal-gap:6px;
549
- --uui-vertical-gap:3px;
550
- --uui-horizontal-padding:12px;
551
- --uui-vertical-padding:18px;
552
- --uui-icon-size:24px;
553
- --uui-line-height:24px;
554
- --uui-font-size:20px;
555
- --uui-dot-size:12px;
556
- }
557
- .uui-theme-myTheme .uui-input-box.uui-size-42{
558
- --uui-horizontal-padding:6px;
559
- }
560
- .uui-theme-myTheme .uui-input-box.uui-size-48{
561
- --uui-horizontal-padding:6px;
562
- }
563
- .uui-theme-myTheme .uui-input-box.uui-textarea{
564
- --uui-horizontal-padding:12px;
565
- }
566
- .uui-theme-myTheme .uui-input-box.uui-textarea.uui-size-24{
567
- --uui-line-height:12px;
568
- }
569
- .uui-theme-myTheme .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
570
- --uui-horizontal-padding:6px;
571
- --uui-horizontal-gap:3px;
572
- --uui-icon-size:18px;
573
- --uui-line-height:18px;
574
- --uui-font-size:14px;
575
- }
576
- .uui-theme-myTheme .uui-tab-button.uui-vertical-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
577
- --uui-horizontal-padding:12px;
578
- --uui-horizontal-gap:6px;
579
- }
580
- .uui-theme-myTheme .uui-tag.uui-size-18{
581
- --uui-font-size:12px;
582
- }
583
- .uui-theme-myTheme .uui-tag.uui-size-18 .uui-caption{
584
- --uui-tag-horizontal-gap:0;
585
- }
586
- .uui-theme-myTheme .uui-tag.uui-size-24{
587
- --uui-icon-size:18px;
588
- }
589
- .uui-theme-myTheme .uui-tag.uui-size-42{
590
- --uui-icon-size:24px;
591
- }
592
- .uui-theme-myTheme .uui-tag.uui-size-24, .uui-theme-myTheme .uui-tag.uui-size-30, .uui-theme-myTheme .uui-tag.uui-size-36, .uui-theme-myTheme .uui-tag.uui-size-42{
593
- --uui-horizontal-gap:3px;
594
- }
595
- .uui-theme-myTheme .uui-tag.uui-size-24, .uui-theme-myTheme .uui-tag.uui-size-30{
596
- --uui-horizontal-padding:3px;
597
- }
598
- .uui-theme-myTheme .uui-tag.uui-size-42, .uui-theme-myTheme .uui-tag.uui-size-48{
599
- --uui-horizontal-padding:9px;
600
- }
601
- .uui-theme-myTheme .uui-checkbox-container.uui-size-18, .uui-theme-myTheme .uui-radio-input-container.uui-size-18{
602
- --uui-horizontal-gap:12px;
603
- --uui-line-height:18px;
604
- --uui-font-size:14px;
605
- }
606
- .uui-theme-myTheme .uui-switch.uui-size-18{
607
- --uui-horizontal-gap:12px;
608
- --uui-line-height:18px;
609
- --uui-font-size:14px;
610
- }
611
- .uui-theme-myTheme .uui-switch.uui-size-24{
612
- --uui-horizontal-gap:12px;
613
- --uui-line-height:24px;
614
- --uui-font-size:16px;
615
- }
616
- .uui-theme-myTheme .uui-labeled-input.uui-size-30{
617
- --uui-icon-size:12px;
618
- --uui-font-size:12px;
619
- }
620
- .uui-theme-myTheme .uui-labeled-input.uui-size-42{
621
- --uui-line-height:18px;
622
- --uui-font-size:14px;
623
- }
624
- .uui-theme-myTheme .uui-labeled-input.uui-size-48{
625
- --uui-icon-size:18px;
626
- --uui-line-height:18px;
627
- --uui-font-size:14px;
628
- }
629
- .uui-theme-myTheme .uui-badge.uui-size-18{
630
- --uui-font-size:12px;
631
- --uui-horizontal-padding:6px;
632
- --uui-badge-caption-horizontal-padding:0;
633
- --uui-badge-indicator-padding:3px;
634
- }
635
- .uui-theme-myTheme .uui-badge.uui-size-24{
636
- --uui-icon-size:18px;
637
- --uui-line-height:12px;
638
- }
639
- .uui-theme-myTheme .uui-badge.uui-size-36{
640
- --uui-horizontal-padding:9px;
641
- }
642
- .uui-theme-myTheme .uui-badge.uui-size-42{
643
- --uui-icon-size:24px;
644
- --uui-horizontal-padding:15px;
645
- }
646
- .uui-theme-myTheme .uui-badge.uui-size-48{
647
- --uui-horizontal-padding:15px;
648
- }
649
- .uui-theme-myTheme .uui-badge.uui-size-24, .uui-theme-myTheme .uui-badge.uui-size-30, .uui-theme-myTheme .uui-badge.uui-size-36, .uui-theme-myTheme .uui-badge.uui-size-42, .uui-theme-myTheme .uui-badge.uui-size-48{
650
- --uui-horizontal-gap:3px;
651
- }
652
- .uui-theme-myTheme .uui-status_indicator.uui-size-12{
653
- --uui-horizontal-gap:4px;
654
- }
655
- .uui-theme-myTheme .uui-status_indicator.uui-size-18{
656
- --uui-horizontal-gap:6px;
657
- --uui-line-height:18px;
658
- --uui-font-size:14px;
659
- --uui-dot-size:8px;
660
- }
661
- .uui-theme-myTheme .uui-status_indicator.uui-size-24{
662
- --uui-font-size:14px;
663
- --uui-dot-size:10px;
664
- }
665
- .uui-theme-myTheme .uui-count_indicator.uui-size-12{
666
- --uui-horizontal-padding:3px;
667
- --uui-line-height:10px;
668
- --uui-font-size:8px;
669
- }
670
- .uui-theme-myTheme .uui-count_indicator.uui-size-18{
671
- --uui-horizontal-padding:6px;
672
- --uui-line-height:16px;
673
- --uui-font-size:12px;
674
- }
675
- .uui-theme-myTheme .uui-count_indicator.uui-size-24{
676
- --uui-line-height:22px;
677
- --uui-font-size:14px;
678
- }
679
- .uui-theme-myTheme .uui-table-header-cell.uui-size-36{
680
- --uui-horizontal-gap:12px;
681
- }
682
- .uui-theme-myTheme .uui-table-header-cell.uui-size-48{
683
- --uui-horizontal-gap:12px;
684
- }
685
- .uui-theme-myTheme .uui-table-header-cell.uui-size-60{
686
- --uui-horizontal-gap:12px;
687
- }
688
- .uui-theme-myTheme .uui-picker_toggler.uui-size-30, .uui-theme-myTheme .uui-picker_toggler.uui-size-36, .uui-theme-myTheme .uui-picker_toggler.uui-size-42, .uui-theme-myTheme .uui-picker_toggler.uui-size-48{
689
- --uui-vertical-padding:3px;
690
- }
691
- .uui-theme-myTheme .uui-alert.uui-size-36{
692
- --uui-alert-indicator-border-width:3px;
693
- --uui-alert-gap-h:12px;
694
- --uui-alert-gap-v:3px;
695
- --uui-alert-padding-h:9px;
696
- --uui-alert-padding-v:3px;
697
- --uui-alert-caption-gap-h:9px;
1
+ .uui-theme-myTheme {
2
+ /* REQUIRED TO FILL PART */
3
+ /* Theme semantic colors variables. Required to set according to your brand colors */
4
+ --uui-accent-5:#F3FBF7;
5
+ --uui-accent-10:#CDEEDD;
6
+ --uui-accent-20:#97D9B7;
7
+ --uui-accent-50:#07A956;
8
+ --uui-accent-60:#06984D;
9
+ --uui-accent-70:#068745;
10
+ --uui-accent-contrast:#FFFFFF;
11
+ --uui-critical-5:#FEF6F6;
12
+ --uui-critical-10:#FDE1E1;
13
+ --uui-critical-20:#FBB6B6;
14
+ --uui-critical-50:#FF4242;
15
+ --uui-critical-60:#E22A2A;
16
+ --uui-critical-70:#AD0000;
17
+ --uui-critical-contrast:#FFFFFF;
18
+ --uui-error-5:#FEF6F6;
19
+ --uui-error-10:#FDE1E1;
20
+ --uui-error-20:#FBB6B6;
21
+ --uui-error-50:#FF4242;
22
+ --uui-error-60:#E22A2A;
23
+ --uui-error-70:#AD0000;
24
+ --uui-error-contrast:#FFFFFF;
25
+ --uui-info-5:#F3F8FE;
26
+ --uui-info-10:#CEE1FC;
27
+ --uui-info-20:#85B4F8;
28
+ --uui-info-50:#0A68F1;
29
+ --uui-info-60:#095ED9;
30
+ --uui-info-70:#0853C1;
31
+ --uui-info-contrast:#FFFFFF;
32
+ --uui-primary-5:#F3F8FE;
33
+ --uui-primary-10:#CEE1FC;
34
+ --uui-primary-20:#85B4F8;
35
+ --uui-primary-50:#0A68F1;
36
+ --uui-primary-60:#095ED9;
37
+ --uui-primary-70:#0853C1;
38
+ --uui-primary-contrast:#FFFFFF;
39
+ --uui-secondary-5:#F5F6FA;
40
+ --uui-secondary-10:#EBEDF5;
41
+ --uui-secondary-20:#E1E3EB;
42
+ --uui-secondary-50:#6C6F80;
43
+ --uui-secondary-60:#474A59;
44
+ --uui-secondary-70:#303240;
45
+ --uui-secondary-contrast:#FFFFFF;
46
+ --uui-success-5:#F3FBF7;
47
+ --uui-success-10:#CDEEDD;
48
+ --uui-success-20:#97D9B7;
49
+ --uui-success-50:#07A956;
50
+ --uui-success-60:#06984D;
51
+ --uui-success-70:#068745;
52
+ --uui-success-contrast:#FFFFFF;
53
+ --uui-warning-5:#FFFCF5;
54
+ --uui-warning-10:#FFEDC9;
55
+ --uui-warning-20:#FFD785;
56
+ --uui-warning-50:#FCAA00;
57
+ --uui-warning-60:#FF9000;
58
+ --uui-warning-70:#BD5800;
59
+ --uui-warning-contrast:var(--uui-neutral-80);
60
+ --uui-neutral-0:#FFFFFF;
61
+ --uui-neutral-5:#FAFAFC;
62
+ --uui-neutral-10:#F5F6FA;
63
+ --uui-neutral-20:#EBEDF5;
64
+ --uui-neutral-30:#E1E3EB;
65
+ --uui-neutral-40:#CED0DB;
66
+ --uui-neutral-50:#ACAFBF;
67
+ --uui-neutral-60:#6C6F80;
68
+ --uui-neutral-70:#474A59;
69
+ --uui-neutral-80:#303240;
70
+ --uui-neutral-90:#1D1E26;
71
+ --uui-neutral-95:#111111;
72
+ --uui-neutral-100:#000000;
73
+ /* End Theme semantic variables */
74
+
75
+ --uui-font:"Source Sans Pro", sans-serif; /* Your brand font */
76
+ /* REQUIRED TO FILL PART END */
77
+
78
+
79
+ /* Core variables. It's already filled based on semantic color values. It's not necessary to change it upfront, but you could tweak it if needed*/
80
+ --uui-app-bg:var(--uui-neutral-10);
81
+ --uui-divider:var(--uui-neutral-40);
82
+ --uui-divider-light:var(--uui-neutral-30);
83
+ --uui-overlay:#1D1E26CC;
84
+ --uui-surface-higher:var(--uui-neutral-10);
85
+ --uui-surface-highest:var(--uui-neutral-20);
86
+ --uui-surface-main:var(--uui-neutral-0);
87
+ --uui-surface-sunken:var(--uui-neutral-20);
88
+ --uui-control-bg:var(--uui-surface-main);
89
+ --uui-control-bg-disabled:var(--uui-neutral-5);
90
+ --uui-control-bg-hover:var(--uui-neutral-60);
91
+ --uui-control-border:var(--uui-neutral-40);
92
+ --uui-control-border-disabled:var(--uui-neutral-30);
93
+ --uui-control-border-focus:var(--uui-primary-50);
94
+ --uui-control-border-hover:var(--uui-neutral-60);
95
+ --uui-control-icon:var(--uui-neutral-50);
96
+ --uui-control-icon-disabled:var(--uui-neutral-50);
97
+ --uui-control-placeholder:var(--uui-neutral-50);
98
+ --uui-control-placeholder-disabled:var(--uui-text-disabled);
99
+ --uui-control-text:var(--uui-neutral-95);
100
+ --uui-control-text-disabled:var(--uui-text-tertiary);
101
+ --uui-icon:var(--uui-neutral-95);
102
+ --uui-icon-active:var(--uui-neutral-100);
103
+ --uui-icon-disabled:var(--uui-neutral-50);
104
+ --uui-icon-hover:var(--uui-neutral-100);
105
+ --uui-link:var(--uui-primary-50);
106
+ --uui-link-hover:var(--uui-primary-60);
107
+ --uui-link-visited:var(--purple-60);
108
+ --uui-link-visited-hover:var(--purple-70);
109
+ --uui-outline-focus:#0A68F17F;
110
+ --uui-skeleton:var(--uui-neutral-40);
111
+ --uui-text-bg-highlight:var(--uui-warning-10);
112
+ --uui-text-critical:var(--uui-critical-70);
113
+ --uui-text-disabled:var(--uui-neutral-50);
114
+ --uui-text-info:var(--uui-info-70);
115
+ --uui-text-primary:var(--uui-neutral-95);
116
+ --uui-text-secondary:var(--uui-neutral-70);
117
+ --uui-text-success:var(--uui-success-70);
118
+ --uui-text-tertiary:var(--uui-neutral-60);
119
+ --uui-text-warning:var(--uui-warning-70);
120
+
121
+ --uui-font-mono:"Roboto Mono", monospace;
122
+ --gradient-1:linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
123
+ --gradient-2:linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%);
124
+ --gradient-3:linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%);
125
+ --gradient-4:linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
126
+ --gradient-5:linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
127
+ --uui-shadow-level-1:0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1);
128
+ --uui-shadow-level-2:0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
129
+ --uui-shadow-level-3:0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05);
130
+ }
131
+
132
+ /* Color classes. Component variables overrides. Advanced and fine tuning customization part. */
133
+ .uui-theme-myTheme .uui-color-primary{
134
+ --uui-color-5:var(--uui-primary-5);
135
+ --uui-color-10:var(--uui-primary-10);
136
+ --uui-color-20:var(--uui-primary-20);
137
+ --uui-color-50:var(--uui-primary-50);
138
+ --uui-color-60:var(--uui-primary-60);
139
+ --uui-color-70:var(--uui-primary-70);
140
+ --uui-color-contrast:var(--uui-primary-contrast);
141
+ }
142
+ .uui-theme-myTheme .uui-color-secondary{
143
+ --uui-color-5:var(--uui-secondary-5);
144
+ --uui-color-10:var(--uui-secondary-10);
145
+ --uui-color-20:var(--uui-secondary-20);
146
+ --uui-color-50:var(--uui-secondary-50);
147
+ --uui-color-60:var(--uui-secondary-60);
148
+ --uui-color-70:var(--uui-secondary-70);
149
+ --uui-color-contrast:var(--uui-secondary-contrast);
150
+ }
151
+ .uui-theme-myTheme .uui-color-accent{
152
+ --uui-color-5:var(--uui-accent-5);
153
+ --uui-color-10:var(--uui-accent-10);
154
+ --uui-color-20:var(--uui-accent-20);
155
+ --uui-color-50:var(--uui-accent-50);
156
+ --uui-color-60:var(--uui-accent-60);
157
+ --uui-color-70:var(--uui-accent-70);
158
+ --uui-color-contrast:var(--uui-accent-contrast);
159
+ }
160
+ .uui-theme-myTheme .uui-color-info{
161
+ --uui-color-5:var(--uui-info-5);
162
+ --uui-color-10:var(--uui-info-10);
163
+ --uui-color-20:var(--uui-info-20);
164
+ --uui-color-50:var(--uui-info-50);
165
+ --uui-color-60:var(--uui-info-60);
166
+ --uui-color-70:var(--uui-info-70);
167
+ --uui-color-contrast:var(--uui-info-contrast);
168
+ }
169
+ .uui-theme-myTheme .uui-color-success{
170
+ --uui-color-5:var(--uui-success-5);
171
+ --uui-color-10:var(--uui-success-10);
172
+ --uui-color-20:var(--uui-success-20);
173
+ --uui-color-50:var(--uui-success-50);
174
+ --uui-color-60:var(--uui-success-60);
175
+ --uui-color-70:var(--uui-success-70);
176
+ --uui-color-contrast:var(--uui-success-contrast);
177
+ }
178
+ .uui-theme-myTheme .uui-color-warning{
179
+ --uui-color-5:var(--uui-warning-5);
180
+ --uui-color-10:var(--uui-warning-10);
181
+ --uui-color-20:var(--uui-warning-20);
182
+ --uui-color-50:var(--uui-warning-50);
183
+ --uui-color-60:var(--uui-warning-60);
184
+ --uui-color-70:var(--uui-warning-70);
185
+ --uui-color-contrast:var(--uui-warning-contrast);
186
+ }
187
+ .uui-theme-myTheme .uui-color-error{
188
+ --uui-color-5:var(--uui-error-5);
189
+ --uui-color-10:var(--uui-error-10);
190
+ --uui-color-20:var(--uui-error-20);
191
+ --uui-color-50:var(--uui-error-50);
192
+ --uui-color-60:var(--uui-error-60);
193
+ --uui-color-70:var(--uui-error-70);
194
+ --uui-color-contrast:var(--uui-error-contrast);
195
+ }
196
+ .uui-theme-myTheme .uui-color-critical{
197
+ --uui-color-5:var(--uui-critical-5);
198
+ --uui-color-10:var(--uui-critical-10);
199
+ --uui-color-20:var(--uui-critical-20);
200
+ --uui-color-50:var(--uui-critical-50);
201
+ --uui-color-60:var(--uui-critical-60);
202
+ --uui-color-70:var(--uui-critical-70);
203
+ --uui-color-contrast:var(--uui-critical-contrast);
204
+ }
205
+ .uui-theme-myTheme .uui-color-white{
206
+ --uui-color-5:color-mix(in srgb, #FFFFFF 15%, transparent);
207
+ --uui-color-10:color-mix(in srgb, #FFFFFF 22%, transparent);
208
+ --uui-color-20:color-mix(in srgb, #FFFFFF 29%, transparent);
209
+ --uui-color-50:var(--uui-neutral-0);
210
+ --uui-color-60:var(--uui-neutral-10);
211
+ --uui-color-70:var(--uui-neutral-20);
212
+ --uui-color-contrast:var(--uui-neutral-70);
213
+ }
214
+ .uui-theme-myTheme .uui-color-neutral{
215
+ --uui-color-5:var(--uui-secondary-5);
216
+ --uui-color-10:var(--uui-secondary-10);
217
+ --uui-color-20:var(--uui-secondary-20);
218
+ --uui-color-50:var(--uui-secondary-50);
219
+ --uui-color-60:var(--uui-secondary-60);
220
+ --uui-color-70:var(--uui-secondary-70);
221
+ --uui-color-contrast:var(--uui-secondary-contrast);
222
+ }
223
+ .uui-theme-myTheme{
224
+ --uui-border-radius:3px;
225
+ }
226
+
227
+ .uui-theme-myTheme .uui-accordion-container{
228
+ --uui-accordion-border-radius:6px;
229
+ }
230
+ .uui-theme-myTheme .uui-file_card{
231
+ --uui-file_card-border-radius:6px;
232
+ }
233
+ .uui-theme-myTheme .uui-badge.uui-color-white.uui-fill-solid{
234
+ --uui-badge-bg-hover:var(--uui-neutral-30);
235
+ --uui-badge-border-hover:var(--uui-neutral-30);
236
+ }
237
+ .uui-theme-myTheme .uui-badge.uui-color-white.uui-fill-outline{
238
+ --uui-badge-bg:var(--uui-neutral-0);
239
+ --uui-badge-border:var(--uui-neutral-30);
240
+ --uui-badge-bg-hover:var(--uui-neutral-10);
241
+ --uui-badge-border-hover:var(--uui-neutral-30);
242
+ --uui-badge-caption:var(--uui-neutral-70);
243
+ --uui-badge-caption-hover:var(--uui-neutral-70);
244
+ }
245
+ .uui-theme-myTheme .uui-badge.uui-color-white.uui-fill-outline .uui-count_indicator{
246
+ --uui-count_indicator-bg:color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
247
+ --uui-count_indicator-border:color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
248
+ }
249
+ .uui-theme-myTheme .uui-badge.uui-color-neutral{
250
+ --uui-badge-caption:var(--uui-neutral-95);
251
+ }
252
+ .uui-theme-myTheme .uui-badge.uui-color-neutral.uui-fill-solid{
253
+ --uui-badge-bg:var(--uui-neutral-30);
254
+ --uui-badge-bg-hover:var(--uui-neutral-40);
255
+ --uui-badge-border:var(--uui-neutral-30);
256
+ --uui-badge-border-hover:var(--uui-neutral-40);
257
+ --uui-color-contrast:var(--uui-neutral-80);
258
+ }
259
+ .uui-theme-myTheme .uui-badge.uui-color-neutral.uui-fill-solid .uui-count_indicator{
260
+ --uui-count_indicator-bg:var(--uui-neutral-0);
261
+ --uui-count_indicator-border:var(--uui-neutral-0);
262
+ }
263
+ .uui-theme-myTheme .uui-badge.uui-color-neutral.uui-fill-outline{
264
+ --uui-badge-bg:var(--uui-neutral-20);
265
+ --uui-badge-border:var(--uui-neutral-40);
266
+ --uui-badge-border-hover:var(--uui-neutral-40);
267
+ --uui-badge-bg-hover:var(--uui-neutral-30);
268
+ --uui-badge-caption-hover:var(--uui-neutral-80);
269
+ }
270
+ .uui-theme-myTheme .uui-badge.uui-color-night100.uui-fill-solid{
271
+ --uui-badge-bg-hover:var(--uui-neutral-20);
272
+ --uui-badge-border-hover:var(--uui-neutral-20);
273
+ }
274
+ .uui-theme-myTheme .uui-badge.uui-color-night100.uui-fill-outline{
275
+ --uui-badge-bg:var(--uui-neutral-10);
276
+ --uui-badge-bg-hover:var(--uui-neutral-20);
277
+ --uui-badge-border:var(--uui-neutral-30);
278
+ --uui-badge-border-hover:var(--uui-neutral-30);
279
+ --uui-badge-caption:var(--uui-neutral-70);
280
+ --uui-badge-caption-hover:var(--uui-neutral-70);
281
+ }
282
+ .uui-theme-myTheme .uui-badge.uui-color-night100.uui-fill-outline .uui-count_indicator{
283
+ --uui-count_indicator-bg:color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
284
+ --uui-count_indicator-border:color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
285
+ }
286
+ .uui-theme-myTheme .uui-badge.uui-color-night600.uui-fill-outline{
287
+ --uui-badge-border:var(--uui-neutral-60);
288
+ --uui-badge-border-hover:var(--uui-neutral-60);
289
+ --uui-badge-caption:var(--uui-neutral-95);
290
+ --uui-badge-caption-hover:var(--uui-neutral-80);
291
+ }
292
+ .uui-theme-myTheme .uui-badge.uui-color-yellow.uui-fill-outline{
293
+ --uui-badge-border:var(--yellow-20);
294
+ }
295
+ .uui-theme-myTheme .uui-button:is(.uui-color-secondary, .uui-color-neutral):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost){
296
+ --uui-btn-caption:var(--uui-neutral-70);
297
+ }
298
+ .uui-theme-myTheme .uui-icon_button.uui-color-white{
299
+ --uui-icon_btn-hover:var(--uui-neutral-20);
300
+ --uui-icon_btn-active:var(--uui-neutral-30);
301
+ }
302
+ .uui-theme-myTheme .uui-link_button.uui-color-contrast{
303
+ --uui-link_btn-text:var(--uui-neutral-5);
304
+ --uui-link_btn-text-hover:var(--uui-neutral-10);
305
+ --uui-link_btn-text-active:var(--uui-neutral-20);
306
+ }
307
+ .uui-theme-myTheme .uui-link_button.uui-color-white{
308
+ --uui-link_btn-text:var(--uui-neutral-5);
309
+ --uui-link_btn-text-hover:var(--uui-neutral-30);
310
+ --uui-link_btn-text-active:var(--uui-neutral-40);
311
+ --uui-link_btn-text-disabled:color-mix(in srgb, var(--white) 40%, transparent);
312
+ }
313
+ .uui-theme-myTheme .uui-count_indicator.uui-color-neutral{
314
+ --uui-count_indicator-bg:var(--uui-neutral-30);
315
+ --uui-count_indicator-border:var(--uui-neutral-30);
316
+ }
317
+ .uui-theme-myTheme .uui-count_indicator:is(.uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning){
318
+ --uui-count_indicator-caption:var(--uui-neutral-70);
319
+ }
320
+ .uui-theme-myTheme .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator-dot{
321
+ background-color:color-mix(in srgb, var(--white) 20%, transparent);
322
+ border:1px solid var(--uui-neutral-40);
323
+ }
324
+ .uui-theme-myTheme .uui-main_menu{
325
+ --uui-main_menu-bg:var(--uui-neutral-95);
326
+ --uui-main_menu-hover:var(--uui-neutral-90);
327
+ --uui-main_menu-border-active-gradient:var(--gradient-1);
328
+ }
329
+ .uui-theme-myTheme .uui-main_menu-dropdown{
330
+ --uui-main_menu-dropdown-bg-hover:var(--uui-neutral-95);
331
+ }
332
+ .uui-theme-myTheme .uui-burger{
333
+ --uui-burger_menu-bg:var(--uui-neutral-95);
334
+ --uui-burger_menu-bg-hover:var(--uui-neutral-95);
335
+ --uui-burger_menu-item:var(--uui-neutral-95);
336
+ }
337
+ .uui-theme-myTheme .uui-tag.uui-fill-outline{
338
+ --uui-tag-fill:var(--uui-neutral-95);
339
+ --uui-tag-caption:var(--uui-text-primary);
340
+ }
341
+ .uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-solid{
342
+ --uui-tag-fill:var(--uui-neutral-95);
343
+ }
344
+ .uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-solid .uui-count_indicator{
345
+ --uui-count_indicator-bg:var(--uui-neutral-30);
346
+ --uui-count_indicator-border:var(--uui-neutral-30);
347
+ }
348
+ .uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-outline{
349
+ --uui-tag-bg:var(--uui-neutral-0);
350
+ --uui-tag-border:var(--uui-neutral-30);
351
+ --uui-tag-bg-hover:var(--uui-neutral-10);
352
+ --uui-tag-border-hover:var(--uui-neutral-30);
353
+ }
354
+ .uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-outline .uui-count_indicator{
355
+ --uui-count_indicator-bg:var(--uui-neutral-30);
356
+ --uui-count_indicator-border:var(--uui-neutral-30);
357
+ }
358
+ .uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-solid{
359
+ --uui-tag-fill:var(--uui-neutral-95);
360
+ }
361
+ .uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-solid .uui-count_indicator{
362
+ --uui-count_indicator-bg:var(--uui-neutral-30);
363
+ --uui-count_indicator-border:var(--uui-neutral-30);
364
+ --uui-count_indicator-caption:var(--uui-neutral-70);
365
+ }
366
+ .uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-outline{
367
+ --uui-tag-bg:var(--uui-neutral-5);
368
+ --uui-tag-bg-hover:var(--uui-neutral-10);
369
+ --uui-tag-border:var(--uui-neutral-30);
370
+ --uui-tag-border-hover:var(--uui-neutral-30);
371
+ }
372
+ .uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-outline .uui-count_indicator{
373
+ --uui-count_indicator-bg:var(--uui-neutral-30);
374
+ --uui-count_indicator-border:var(--uui-neutral-30);
375
+ }
376
+ .uui-theme-myTheme .uui-tag.uui-color-night700.uui-fill-solid .uui-count_indicator{
377
+ --uui-count_indicator-border:color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
378
+ --uui-count_indicator-bg:color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
379
+ }
380
+ .uui-theme-myTheme .uui-tag.uui-color-night700.uui-fill-outline{
381
+ --uui-tag-bg:var(--uui-neutral-20);
382
+ --uui-tag-bg-hover:var(--uui-neutral-30);
383
+ --uui-tag-border:var(--uui-neutral-50);
384
+ --uui-tag-border-hover:var(--uui-neutral-50);
385
+ }
386
+ .uui-theme-myTheme .uui-tag.uui-color-warning, .uui-theme-myTheme .uui-tag.uui-color-sun{
387
+ --uui-tag-fill:var(--uui-neutral-100);
388
+ }
389
+ .uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-solid, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-solid{
390
+ --uui-tag-caption:var(--uui-neutral-80);
391
+ }
392
+ .uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-solid .uui-count_indicator, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-solid .uui-count_indicator{
393
+ --uui-count_indicator-bg:color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);
394
+ --uui-count_indicator-border:color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);
395
+ --uui-count_indicator-caption:var(--uui-neutral-80);
396
+ }
397
+ .uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-outline, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-outline{
398
+ --uui-tag-caption:var(--uui-neutral-95);
399
+ }
400
+ .uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-outline .uui-count_indicator, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-outline .uui-count_indicator{
401
+ --uui-count_indicator-bg:var(--uui-neutral-0);
402
+ --uui-count_indicator-border:var(--uui-neutral-40);
403
+ }
404
+ .uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-solid{
405
+ --uui-tag-bg:var(--uui-neutral-30);
406
+ --uui-tag-bg-hover:var(--uui-neutral-40);
407
+ --uui-tag-border:var(--uui-neutral-30);
408
+ --uui-tag-border-hover:var(--uui-neutral-40);
409
+ --uui-tag-caption:var(--uui-text-primary);
410
+ --uui-tag-fill:var(--uui-neutral-95);
411
+ }
412
+ .uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-solid .uui-count_indicator{
413
+ --uui-count_indicator-bg:var(--uui-neutral-0);
414
+ --uui-count_indicator-border:var(--uui-neutral-0);
415
+ --uui-count_indicator-caption:var(--uui-neutral-70);
416
+ }
417
+ .uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-outline{
418
+ --uui-tag-bg:var(--uui-neutral-20);
419
+ --uui-tag-bg-hover:var(--uui-neutral-30);
420
+ --uui-tag-fill:var(--uui-neutral-95);
421
+ }
422
+ .uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-outline .uui-count_indicator{
423
+ --uui-count_indicator-bg:var(--uui-neutral-30);
424
+ --uui-count_indicator-border:var(--uui-neutral-30);
425
+ }
426
+ .uui-theme-myTheme .uui-typography h1{
427
+ font-weight:400;
428
+ }
429
+ .uui-theme-myTheme .uui-typography h2, .uui-theme-myTheme .uui-typography h3, .uui-theme-myTheme .uui-typography h4, .uui-theme-myTheme .uui-typography h5{
430
+ font-weight:600;
431
+ }
432
+
433
+ .uui-theme-myTheme .uui-typography h1.promo-header{
434
+ font-size:72px;
435
+ font-weight:400;
436
+ }
437
+ .uui-theme-myTheme .uui-typography h2.promo-header{
438
+ font-size:44px;
439
+ font-weight:600;
440
+ }
441
+ .uui-theme-myTheme .uui-typography h3.promo-header{
442
+ font-size:36px;
443
+ }
444
+ .uui-theme-myTheme .uui-typography h4.promo-header{
445
+ font-size:30px;
446
+ }
447
+ .uui-theme-myTheme .uui-typography h5.promo-header{
448
+ font-size:24px;
449
+ }
450
+ .uui-theme-myTheme .uui-typography h6.promo-header{
451
+ font-size:18px;
452
+ }
453
+ .uui-theme-myTheme{
454
+ --uui-grid-unit:6px;
455
+ --uui-focus-outline-width:2px;
456
+ --uui-focus-outline-offset:2px;
457
+ --uui-focus-radius:2px;
458
+ --uui-tab-line-width:3px;
459
+ --uui-notify-size:6px;
460
+ }
461
+ .uui-theme-myTheme .uui-size-12{
462
+ --uui-size:12px;
463
+ --uui-border-width:1px;
464
+ --uui-horizontal-gap:6px;
465
+ --uui-vertical-gap:3px;
466
+ --uui-horizontal-padding:6px;
467
+ --uui-vertical-padding:3px;
468
+ --uui-icon-size:12px;
469
+ --uui-line-height:12px;
470
+ --uui-font-size:12px;
471
+ --uui-dot-size:6px;
472
+ }
473
+ .uui-theme-myTheme .uui-size-18{
474
+ --uui-size:18px;
475
+ --uui-border-width:1px;
476
+ --uui-horizontal-gap:3px;
477
+ --uui-vertical-gap:3px;
478
+ --uui-horizontal-padding:3px;
479
+ --uui-vertical-padding:3px;
480
+ --uui-icon-size:12px;
481
+ --uui-line-height:12px;
482
+ --uui-font-size:10px;
483
+ --uui-dot-size:6px;
484
+ }
485
+ .uui-theme-myTheme .uui-size-24{
486
+ --uui-size:24px;
487
+ --uui-border-width:1px;
488
+ --uui-horizontal-gap:6px;
489
+ --uui-vertical-gap:3px;
490
+ --uui-horizontal-padding:6px;
491
+ --uui-vertical-padding:3px;
492
+ --uui-icon-size:12px;
493
+ --uui-line-height:18px;
494
+ --uui-font-size:12px;
495
+ --uui-dot-size:8px;
496
+ }
497
+ .uui-theme-myTheme .uui-size-30{
498
+ --uui-size:30px;
499
+ --uui-border-width:1px;
500
+ --uui-horizontal-gap:6px;
501
+ --uui-vertical-gap:3px;
502
+ --uui-horizontal-padding:6px;
503
+ --uui-vertical-padding:6px;
504
+ --uui-icon-size:18px;
505
+ --uui-line-height:18px;
506
+ --uui-font-size:14px;
507
+ --uui-dot-size:8px;
508
+ }
509
+ .uui-theme-myTheme .uui-size-36{
510
+ --uui-size:36px;
511
+ --uui-border-width:1px;
512
+ --uui-horizontal-gap:6px;
513
+ --uui-vertical-gap:3px;
514
+ --uui-horizontal-padding:6px;
515
+ --uui-vertical-padding:9px;
516
+ --uui-icon-size:18px;
517
+ --uui-line-height:18px;
518
+ --uui-font-size:14px;
519
+ --uui-dot-size:8px;
520
+ }
521
+ .uui-theme-myTheme .uui-size-42{
522
+ --uui-size:42px;
523
+ --uui-border-width:1px;
524
+ --uui-horizontal-gap:6px;
525
+ --uui-vertical-gap:3px;
526
+ --uui-horizontal-padding:12px;
527
+ --uui-vertical-padding:9px;
528
+ --uui-icon-size:18px;
529
+ --uui-line-height:24px;
530
+ --uui-font-size:16px;
531
+ --uui-dot-size:10px;
532
+ }
533
+ .uui-theme-myTheme .uui-size-48{
534
+ --uui-size:48px;
535
+ --uui-border-width:1px;
536
+ --uui-horizontal-gap:6px;
537
+ --uui-vertical-gap:3px;
538
+ --uui-horizontal-padding:12px;
539
+ --uui-vertical-padding:12px;
540
+ --uui-icon-size:24px;
541
+ --uui-line-height:24px;
542
+ --uui-font-size:16px;
543
+ --uui-dot-size:12px;
544
+ }
545
+ .uui-theme-myTheme .uui-size-60{
546
+ --uui-size:60px;
547
+ --uui-border-width:1px;
548
+ --uui-horizontal-gap:6px;
549
+ --uui-vertical-gap:3px;
550
+ --uui-horizontal-padding:12px;
551
+ --uui-vertical-padding:18px;
552
+ --uui-icon-size:24px;
553
+ --uui-line-height:24px;
554
+ --uui-font-size:20px;
555
+ --uui-dot-size:12px;
556
+ }
557
+ .uui-theme-myTheme .uui-input-box.uui-size-42{
558
+ --uui-horizontal-padding:6px;
559
+ }
560
+ .uui-theme-myTheme .uui-input-box.uui-size-48{
561
+ --uui-horizontal-padding:6px;
562
+ }
563
+ .uui-theme-myTheme .uui-input-box.uui-textarea{
564
+ --uui-horizontal-padding:12px;
565
+ }
566
+ .uui-theme-myTheme .uui-input-box.uui-textarea.uui-size-24{
567
+ --uui-line-height:12px;
568
+ }
569
+ .uui-theme-myTheme .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
570
+ --uui-horizontal-padding:6px;
571
+ --uui-horizontal-gap:3px;
572
+ --uui-icon-size:18px;
573
+ --uui-line-height:18px;
574
+ --uui-font-size:14px;
575
+ }
576
+ .uui-theme-myTheme .uui-tab-button.uui-vertical-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
577
+ --uui-horizontal-padding:12px;
578
+ --uui-horizontal-gap:6px;
579
+ }
580
+ .uui-theme-myTheme .uui-tag.uui-size-18{
581
+ --uui-font-size:12px;
582
+ }
583
+ .uui-theme-myTheme .uui-tag.uui-size-18 .uui-caption{
584
+ --uui-tag-horizontal-gap:0;
585
+ }
586
+ .uui-theme-myTheme .uui-tag.uui-size-24{
587
+ --uui-icon-size:18px;
588
+ }
589
+ .uui-theme-myTheme .uui-tag.uui-size-42{
590
+ --uui-icon-size:24px;
591
+ }
592
+ .uui-theme-myTheme .uui-tag.uui-size-24, .uui-theme-myTheme .uui-tag.uui-size-30, .uui-theme-myTheme .uui-tag.uui-size-36, .uui-theme-myTheme .uui-tag.uui-size-42{
593
+ --uui-horizontal-gap:3px;
594
+ }
595
+ .uui-theme-myTheme .uui-tag.uui-size-24, .uui-theme-myTheme .uui-tag.uui-size-30{
596
+ --uui-horizontal-padding:3px;
597
+ }
598
+ .uui-theme-myTheme .uui-tag.uui-size-42, .uui-theme-myTheme .uui-tag.uui-size-48{
599
+ --uui-horizontal-padding:9px;
600
+ }
601
+ .uui-theme-myTheme .uui-checkbox-container.uui-size-18, .uui-theme-myTheme .uui-radio-input-container.uui-size-18{
602
+ --uui-horizontal-gap:12px;
603
+ --uui-line-height:18px;
604
+ --uui-font-size:14px;
605
+ }
606
+ .uui-theme-myTheme .uui-switch.uui-size-18{
607
+ --uui-horizontal-gap:12px;
608
+ --uui-line-height:18px;
609
+ --uui-font-size:14px;
610
+ }
611
+ .uui-theme-myTheme .uui-switch.uui-size-24{
612
+ --uui-horizontal-gap:12px;
613
+ --uui-line-height:24px;
614
+ --uui-font-size:16px;
615
+ }
616
+ .uui-theme-myTheme .uui-labeled-input.uui-size-30{
617
+ --uui-icon-size:12px;
618
+ --uui-font-size:12px;
619
+ }
620
+ .uui-theme-myTheme .uui-labeled-input.uui-size-42{
621
+ --uui-line-height:18px;
622
+ --uui-font-size:14px;
623
+ }
624
+ .uui-theme-myTheme .uui-labeled-input.uui-size-48{
625
+ --uui-icon-size:18px;
626
+ --uui-line-height:18px;
627
+ --uui-font-size:14px;
628
+ }
629
+ .uui-theme-myTheme .uui-badge.uui-size-18{
630
+ --uui-font-size:12px;
631
+ --uui-horizontal-padding:6px;
632
+ --uui-badge-caption-horizontal-padding:0;
633
+ --uui-badge-indicator-padding:3px;
634
+ }
635
+ .uui-theme-myTheme .uui-badge.uui-size-24{
636
+ --uui-icon-size:18px;
637
+ --uui-line-height:12px;
638
+ }
639
+ .uui-theme-myTheme .uui-badge.uui-size-36{
640
+ --uui-horizontal-padding:9px;
641
+ }
642
+ .uui-theme-myTheme .uui-badge.uui-size-42{
643
+ --uui-icon-size:24px;
644
+ --uui-horizontal-padding:15px;
645
+ }
646
+ .uui-theme-myTheme .uui-badge.uui-size-48{
647
+ --uui-horizontal-padding:15px;
648
+ }
649
+ .uui-theme-myTheme .uui-badge.uui-size-24, .uui-theme-myTheme .uui-badge.uui-size-30, .uui-theme-myTheme .uui-badge.uui-size-36, .uui-theme-myTheme .uui-badge.uui-size-42, .uui-theme-myTheme .uui-badge.uui-size-48{
650
+ --uui-horizontal-gap:3px;
651
+ }
652
+ .uui-theme-myTheme .uui-status_indicator.uui-size-12{
653
+ --uui-horizontal-gap:4px;
654
+ }
655
+ .uui-theme-myTheme .uui-status_indicator.uui-size-18{
656
+ --uui-horizontal-gap:6px;
657
+ --uui-line-height:18px;
658
+ --uui-font-size:14px;
659
+ --uui-dot-size:8px;
660
+ }
661
+ .uui-theme-myTheme .uui-status_indicator.uui-size-24{
662
+ --uui-font-size:14px;
663
+ --uui-dot-size:10px;
664
+ }
665
+ .uui-theme-myTheme .uui-count_indicator.uui-size-12{
666
+ --uui-horizontal-padding:3px;
667
+ --uui-line-height:10px;
668
+ --uui-font-size:8px;
669
+ }
670
+ .uui-theme-myTheme .uui-count_indicator.uui-size-18{
671
+ --uui-horizontal-padding:6px;
672
+ --uui-line-height:16px;
673
+ --uui-font-size:12px;
674
+ }
675
+ .uui-theme-myTheme .uui-count_indicator.uui-size-24{
676
+ --uui-line-height:22px;
677
+ --uui-font-size:14px;
678
+ }
679
+ .uui-theme-myTheme .uui-table-header-cell.uui-size-36{
680
+ --uui-horizontal-gap:12px;
681
+ }
682
+ .uui-theme-myTheme .uui-table-header-cell.uui-size-48{
683
+ --uui-horizontal-gap:12px;
684
+ }
685
+ .uui-theme-myTheme .uui-table-header-cell.uui-size-60{
686
+ --uui-horizontal-gap:12px;
687
+ }
688
+ .uui-theme-myTheme .uui-picker_toggler.uui-size-30, .uui-theme-myTheme .uui-picker_toggler.uui-size-36, .uui-theme-myTheme .uui-picker_toggler.uui-size-42, .uui-theme-myTheme .uui-picker_toggler.uui-size-48{
689
+ --uui-vertical-padding:3px;
690
+ }
691
+ .uui-theme-myTheme .uui-alert.uui-size-36{
692
+ --uui-alert-indicator-border-width:3px;
693
+ --uui-alert-gap-h:12px;
694
+ --uui-alert-gap-v:3px;
695
+ --uui-alert-padding-h:9px;
696
+ --uui-alert-padding-v:3px;
697
+ --uui-alert-caption-gap-h:9px;
698
698
  }