@epam/assets 5.1.0 → 5.1.2-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 (10) hide show
  1. package/css/theme/theme_loveship.css +168 -163
  2. package/css/theme/theme_loveship.css.map +1 -1
  3. package/css/theme/theme_promo.css +209 -222
  4. package/css/theme/theme_promo.css.map +1 -1
  5. package/css/theme/theme_vanilla_thunder.css +63 -72
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  7. package/package.json +2 -2
  8. package/theme/theme_loveship.scss +185 -171
  9. package/theme/theme_promo.scss +234 -237
  10. package/theme/theme_vanilla_thunder.scss +83 -77
package/css/theme/theme_vanilla_thunder.css CHANGED
@@ -33,6 +33,7 @@
33
33
  --chromatic-300:#8D8D9C;
34
34
  --chromatic-400:#34384A;
35
35
  --chromatic-500:#191F3D;
36
+ --fire-soft:#FEF6F6;
36
37
  --fire-lightest:#FDE1E1;
37
38
  --fire-light:#FCC8C8;
38
39
  --fire:#FA4B4B;
@@ -57,7 +58,6 @@
57
58
  --uui-primary:var(--blue-300);
58
59
  --uui-primary-light:var(--blue-200);
59
60
  --uui-primary-lightest:var(--blue-100);
60
- --uui-primary-halftone:var(--night200);
61
61
  --uui-primary-dark:var(--blue-400);
62
62
  --uui-primary-darkest:var(--blue-500);
63
63
  --uui-secondary:var(--night500);
@@ -65,8 +65,6 @@
65
65
  --uui-secondary-lightest:var(--night200);
66
66
  --uui-secondary-dark:var(--night600);
67
67
  --uui-secondary-darkest:var(--night700);
68
- --uui-secondary-hover:var(--night600);
69
- --uui-secondary-active:var(--night700);
70
68
  --uui-negative:var(--sun-200);
71
69
  --uui-negative-light:var(--sun-100);
72
70
  --uui-negative-lightest:var(--sun-50);
@@ -74,87 +72,88 @@
74
72
  --uui-negative-darkest:var(--sun-300);
75
73
  --uui-link:var(--blue-300);
76
74
  --uui-link-hover:var(--blue-400);
75
+ --uui-link-wite-hover:var(--night400);
76
+ --uui-link-black-hover:var(--night800);
77
77
  --uui-link-visited:#8018A0;
78
78
  --uui-link-disabled:var(--chromatic-200);
79
- --uui-visited:#5214CC;
80
79
  --uui-info:var(--blue-300);
80
+ --uui-info-soft:var(--blue-0);
81
81
  --uui-info-lightest:var(--blue-0);
82
82
  --uui-info-light:var(--blue-100);
83
83
  --uui-info-dark:var(--blue-400);
84
84
  --uui-info-darkest:var(--blue-500);
85
- --uui-info-hover:var(--blue-400);
86
- --uui-info-active:var(--blue-500);
87
85
  --uui-success:var(--grass-300);
86
+ --uui-success-soft:var(--grass-25);
88
87
  --uui-success-lightest:var(--grass-100);
89
88
  --uui-success-light:var(--grass-200);
90
89
  --uui-success-dark:var(--grass-400);
91
90
  --uui-success-darkest:var(--grass-500);
92
- --uui-success-hover:var(--grass-400);
93
- --uui-success-active:var(--grass-500);
94
91
  --uui-warning:var(--sun-200);
92
+ --uui-warning-soft:var(--sun-50);
95
93
  --uui-warning-lightest:var(--sun-50);
96
94
  --uui-warning-light:var(--sun-100);
97
95
  --uui-warning-dark:var(--sun-250);
98
96
  --uui-warning-darkest:var(--sun-300);
99
- --uui-warning-hover:var(--sun-250);
100
- --uui-warning-active:var(--sun-300);
101
97
  --uui-error:var(--fire);
98
+ --uui-error-soft:var(--fire-soft);
102
99
  --uui-error-lightest:var(--fire-lightest);
103
100
  --uui-error-light:var(--fire-light);
104
101
  --uui-error-dark:var(--fire-dark);
105
102
  --uui-error-darkest:var(--fire-darkest);
106
- --uui-error-hover:var(--fire-dark);
107
- --uui-error-active:var(--fire-darkest);
108
103
  --uui-icon:var(--chromatic-300);
109
104
  --uui-icon-hover:var(--chromatic-400);
110
105
  --uui-icon-active:var(--chromatic-500);
111
106
  --uui-icon-disabled:var(--chromatic-200);
107
+ --uui-app-bg:var(--chromatic-100);
108
+ --uui-overlay:rgba(29, 30, 38, 0.8);
112
109
  --uui-surface:var(--chromatic-0);
113
- --uui-surface-hover:var(--night200);
114
- --uui-surface-inverted:var(--night900);
115
- --uui-surface-light:var(--night50);
116
- --uui-surface-light-hover:var(--night100);
110
+ --uui-surface-low:var(--night50);
111
+ --uui-surface-lower:var(--night100);
112
+ --uui-surface-lowest:var(--night200);
117
113
  --uui-surface-contrast:var(--night800);
118
- --uui-surface-contrast-hover:var(--night900);
119
- --uui-surface-contrast-active:var(--night900);
120
- --uui-background:var(--chromatic-100);
114
+ --uui-surface-contrast-low:var(--night800);
115
+ --uui-surface-contrast-lower:var(--night900);
116
+ --uui-surface-active:var(--blue-0);
117
+ --uui-surface-critical:var(--fire-lightest);
118
+ --uui-surface-warning:var(--sun-50);
121
119
  --uui-divider:var(--chromatic-200);
122
120
  --uui-divider-light:var(--chromatic-150);
123
- --uui-contrast:var(--chromatic-0);
124
- --uui-disabled:var(--chromatic-150);
125
- --uui-scroll-bars-bg:var(--chromatic-200);
126
- --uui-scroll-bars-bg-active:var(--chromatic-300);
127
- --uui-button-bg-halftone:var(--chromatic-0);
128
- --uui-button-caption-disabled:var(--chromatic-300);
129
121
  --uui-text-brand:var(--chromatic-500);
130
122
  --uui-text-primary:var(--chromatic-500);
131
123
  --uui-text-secondary:var(--chromatic-300);
124
+ --uui-text-tertiary:var(--chromatic-300);
132
125
  --uui-text-disabled:var(--chromatic-200);
133
126
  --uui-text-contrast:var(--chromatic-0);
127
+ --uui-text-white:var(--chromatic-0);
128
+ --uui-text-dark:var(--chromatic-500);
129
+ --uui-text-info:var(--uui-info);
130
+ --uui-text-warning:var(--uui-warning);
131
+ --uui-text-error:var(--uui-error);
132
+ --uui-text-success:var(--uui-success);
133
+ --uui-disabled:var(--chromatic-150);
134
+ --uui-scroll_bars-bg:var(--chromatic-200);
135
+ --uui-scroll_bars-bg-active:var(--chromatic-300);
136
+ --uui-button-bg-halftone:var(--chromatic-0);
134
137
  --uui-control-bg:var(--chromatic-0);
135
- --uui-control-bg-checked:var(--uui-primary);
136
- --uui-control-bg-checked-hover:var(--uui-primary-dark);
137
- --uui-control-bg-checked-disabled:var(--uui-primary-light);
138
138
  --uui-control-bg-hover:var(--chromatic-300);
139
139
  --uui-control-bg-disabled:var(--chromatic-100);
140
140
  --uui-control-bg-readonly:var(--chromatic-100);
141
+ --uui-control-bg-checked:var(--uui-primary);
142
+ --uui-control-bg-checked-hover:var(--uui-primary-dark);
143
+ --uui-control-bg-checked-disabled:var(--uui-primary-light);
141
144
  --uui-control_switch-bg:var(--chromatic-200);
142
- --uui-control_switch_toggler-bg:var(--chromatic-0);
143
- --uui-control-border-checked-disabled:var(--uui-primary-light);
145
+ --uui-control_switch-toggler-bg:var(--chromatic-0);
144
146
  --uui-control-border:var(--chromatic-200);
147
+ --uui-control-border-hover:var(--uui-primary-dark);
148
+ --uui-control-border-disabled:var(--chromatic-150);
149
+ --uui-control-border-readonly:var(--chromatic-150);
145
150
  --uui-control-border-checked:var(--uui-primary);
146
151
  --uui-control-border-checked-hover:var(--uui-primary-dark);
147
- --uui-control-border-hover:var(--uui-primary-dark);
148
- --uui-control-border-disabled:var(--uui-disabled);
149
- --uui-control-border-readonly:var(--uui-disabled);
152
+ --uui-control-border-checked-disabled:var(--uui-primary-light);
150
153
  --uui-control_switch-border-hover:var(--chromatic-300);
151
154
  --uui-control_textinput-border-hover:var(--chromatic-300);
152
155
  --uui-control-label:var(--uui-text-primary);
153
156
  --uui-control-label-disabled:var(--uui-text-disabled);
154
- --uui-control-label-error:var(--uui-error);
155
- --uui-control-label-fill:var(--uui-icon);
156
- --uui-control-label-optional-text:var(--uui-text-secondary);
157
- --uui-control-label-asterisk:var(--uui-error);
158
157
  --uui-control-placeholder:var(--night600);
159
158
  --uui-control-placeholder-disabled:var(--night500);
160
159
  --uui-control-text:var(--chromatic-500);
@@ -166,7 +165,6 @@
166
165
  --uui-tag-bg-hover:var(--night400);
167
166
  --uui-skeleton:var(--chromatic-200);
168
167
  --uui-skeleton-gradient:linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);
169
- --uui-overlay:rgb(29 30 38 / 80%);
170
168
  --uui-border-radius:3px;
171
169
  --uui-shadow-level-1:0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);
172
170
  --uui-shadow-level-2:0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);
@@ -197,17 +195,12 @@
197
195
  --uui-link-button-text:var(--uui-primary);
198
196
  --uui-link-button-text-hover:var(--uui-primary-dark);
199
197
  --uui-link-button-text-active:var(--uui-primary-darkest);
200
- --uui-link-button-text-disabled:var(--uui-button-caption-disabled);
198
+ --uui-link-button-text-disabled:var(--uui-text-disabled);
201
199
  --uui-link-button-font:var(--font-inter);
202
200
  --uui-link-button-font-weight:400;
203
201
  --uui-dtp-title-bg:var(--uui-control-bg);
204
- --uui-dtp-title-bg-hover:var(--uui-primary-halftone);
205
202
  --uui-dtp-text-selected:var(--uui-control-border-checked);
206
203
  --uui-dtp-text:var(--uui-control-text);
207
- --uui-dtp-next-prev-icon:var(--uui-icon);
208
- --uui-dtp-next-prev-icon-bg-hover:var(--uui-secondary-lightest);
209
- --uui-dtp_header-font:var(--font-inter);
210
- --uui-dtp_header-font-weight:400;
211
204
  --uui-dtp_body-content-font:var(--font-inter);
212
205
  --uui-dtp_body-content-font-weight:400;
213
206
  --uui-rdtp-bg:var(--uui-control-bg);
@@ -218,19 +211,18 @@
218
211
  --uui-calendar-weekends-weekdates:var(--uui-control-placeholder);
219
212
  --uui-calendar-text:var(--uui-control-text);
220
213
  --uui-calendar-text-filtered:var(--uui-control-text-disabled);
221
- --uui-calendar-bg-selected:var(--uui-secondary);
222
214
  --uui-calendar-content-font:var(--font-inter);
223
215
  --uui-calendar-content-font-weight:400;
224
216
  --uui-calendar-weekday-font:var(--font-inter);
225
217
  --uui-calendar-weekday-font-weight:400;
226
218
  --uui-calendar-selected_day-font:var(--font-inter);
227
219
  --uui-calendar-selected_day-font-weight:600;
228
- --uui-tab-button-text:var(--uui-text-primary);
229
- --uui-tab-button-text-hover:var(--uui-primary);
230
- --uui-tab-button-text-active:var(--uui-primary);
231
- --uui-tab-button-text-disabled:var(--uui-text-disabled);
232
- --uui-tab-button-font:var(--font-inter);
233
- --uui-tab-button-font-weight:600;
220
+ --uui-tab_button-text:var(--uui-text-primary);
221
+ --uui-tab_button-text-hover:var(--uui-primary);
222
+ --uui-tab_button-text-active:var(--uui-primary);
223
+ --uui-tab_button-text-disabled:var(--uui-text-disabled);
224
+ --uui-tab_button-font:var(--font-inter);
225
+ --uui-tab_button-font-weight:600;
234
226
  --uui-radio-input-bg:var(--uui-control-bg);
235
227
  --uui-radio-input-bg-disabled:var(--uui-control-bg-disabled);
236
228
  --uui-radio-input-border:var(--uui-control-border);
@@ -365,7 +357,7 @@
365
357
  --uui-switch-border-checked-disabled:var(--uui-control-border-checked-disabled);
366
358
  --uui-switch-label:var(--uui-control-label);
367
359
  --uui-switch-label-disabled:var(--uui-control-label-disabled);
368
- --uui-switch-toggler-bg:var(--uui-control_switch_toggler-bg);
360
+ --uui-switch-toggler-bg:var(--uui-control_switch-toggler-bg);
369
361
  --uui-switch-toggler-bg-disabled:var(--uui-control-bg-disabled);
370
362
  --uui-switch-toggler-border-checked:var(--uui-control-bg-checked);
371
363
  --uui-switch-toggler-border-hover:var(--uui-control-bg-hover);
@@ -380,8 +372,8 @@
380
372
  --uui-dropdown-menu-bg:var(--uui-surface);
381
373
  --uui-dropdown-menu-shadow:var(--uui-shadow-level-2);
382
374
  --uui-dropdown-menu-splitter:var(--uui-divider);
383
- --uui-dropdown-menu-item-hover:var(--uui-surface-hover);
384
- --uui-dropdown-menu-item-active:var(--uui-surface-hover);
375
+ --uui-dropdown-menu-item-hover:var(--uui-surface-lowest);
376
+ --uui-dropdown-menu-item-active:var(--uui-surface-lowest);
385
377
  --uui-dropdown-menu-item-text:var(--uui-text-primary);
386
378
  --uui-dropdown-menu-body-font:var(--font-inter);
387
379
  --uui-dropdown-menu-body-font-weight:400;
@@ -409,8 +401,8 @@
409
401
  --uui-main_menu-search-font:var(--font-inter);
410
402
  --uui-main_menu-search-font-weight:400;
411
403
  --uui-burger_menu-bg:var(--uui-surface);
412
- --uui-burger_menu-bg-hover:var(--uui-surface-light-hover);
413
- --uui-burger_menu-caption:var(--uui-contrast);
404
+ --uui-burger_menu-bg-hover:var(--uui-surface-lower);
405
+ --uui-burger_menu-caption:var(--uui-text-contrast);
414
406
  --uui-burger_menu-caption-hover:var(--uui-primary);
415
407
  --uui-burger_menu-overlay:var(--uui-overlay);
416
408
  --uui-burger_icon:var(--uui-text-primary);
@@ -494,8 +486,7 @@
494
486
  --uui-alert-border-radius:6px;
495
487
  --uui-panel-bg:var(--uui-surface);
496
488
  --uui-spinner:var(--uui-primary);
497
- --uui-blocker-bg:var(--uui-background);
498
- --uui-blocker-bg-with-opacity:#F5F6FA80;
489
+ --uui-blocker-bg:var(--uui-app-bg);
499
490
  --uui-flex-row-border-bottom:1px solid var(--uui-divider);
500
491
  --uui-dt-border:var(--uui-divider-light);
501
492
  --uui-dt-cell-bg:transparent;
@@ -504,11 +495,11 @@
504
495
  --uui-dt-cell-border-hover:var(--uui-control_textinput-border-hover);
505
496
  --uui-dt-cell-border-focus:var(--uui-control-border-checked);
506
497
  --uui-dt-row-bg:var(--uui-surface);
507
- --uui-dt-row-bg-hover:var(--uui-surface-light-hover);
498
+ --uui-dt-row-bg-hover:var(--uui-surface-lower);
508
499
  --uui-dt-row-bg-invalid:#FEF7F6;
509
500
  --uui-dt-row-bg-selected:#EBF7FF;
510
- --uui-dt-header-row-bg:var(--uui-surface-light);
511
- --uui-dt-header-row-bg-hover:var(--uui-surface-hover);
501
+ --uui-dt-header-row-bg:var(--uui-surface-low);
502
+ --uui-dt-header-row-bg-hover:var(--uui-surface-lowest);
512
503
  --uui-dt-top-shadow:linear-gradient(to bottom, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
513
504
  --uui-dt-left-shadow:linear-gradient(to left, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
514
505
  --uui-dt-right-shadow:linear-gradient(to right, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
@@ -525,8 +516,8 @@
525
516
  --uui-pagination-font-weight:400;
526
517
  }
527
518
  .uui-theme-vanilla_thunder .tooltip-contrast{
528
- --uui-tooltip-bg:var(--uui-surface-inverted);
529
- --uui-tooltip-text:var(--uui-contrast);
519
+ --uui-tooltip-bg:var(--uui-surface-contrast);
520
+ --uui-tooltip-text:var(--uui-text-contrast);
530
521
  }
531
522
  .uui-theme-vanilla_thunder .tooltip-default{
532
523
  --uui-tooltip-bg:var(--uui-surface);
@@ -534,7 +525,7 @@
534
525
  }
535
526
  .uui-theme-vanilla_thunder .tooltip-critical{
536
527
  --uui-tooltip-bg:var(--uui-error-dark);
537
- --uui-tooltip-text:var(--uui-contrast);
528
+ --uui-tooltip-text:var(--uui-text-contrast);
538
529
  }
539
530
  .uui-theme-vanilla_thunder .button-primary{
540
531
  --uui-btn-bg:var(--uui-primary);
@@ -548,9 +539,9 @@
548
539
  --uui-btn-border-hover:var(--uui-primary-dark);
549
540
  --uui-btn-border-active:var(--uui-primary-darkest);
550
541
  --uui-btn-border-disabled:var(--uui-disabled);
551
- --uui-btn-caption:var(--uui-contrast);
542
+ --uui-btn-caption:var(--uui-text-white);
552
543
  --uui-btn-caption-halftone:var(--uui-text-primary);
553
- --uui-btn-caption-disabled:var(--uui-button-caption-disabled);
544
+ --uui-btn-caption-disabled:var(--uui-text-disabled);
554
545
  }
555
546
  .uui-theme-vanilla_thunder .button-accent{
556
547
  --uui-btn-bg:var(--uui-accent);
@@ -564,9 +555,9 @@
564
555
  --uui-btn-border-active:var(--uui-accent-darkest);
565
556
  --uui-btn-bg-disabled:var(--uui-disabled);
566
557
  --uui-btn-border-disabled:var(--uui-disabled);
567
- --uui-btn-caption:var(--uui-contrast);
558
+ --uui-btn-caption:var(--uui-text-white);
568
559
  --uui-btn-caption-halftone:var(--uui-text-primary);
569
- --uui-btn-caption-disabled:var(--uui-button-caption-disabled);
560
+ --uui-btn-caption-disabled:var(--uui-text-disabled);
570
561
  }
571
562
  .uui-theme-vanilla_thunder .button-negative{
572
563
  --uui-btn-bg:var(--uui-negative);
@@ -580,9 +571,9 @@
580
571
  --uui-btn-border-active:var(--uui-negative-darkest);
581
572
  --uui-btn-bg-disabled:var(--uui-disabled);
582
573
  --uui-btn-border-disabled:var(--uui-disabled);
583
- --uui-btn-caption:var(--uui-contrast);
574
+ --uui-btn-caption:var(--uui-text-white);
584
575
  --uui-btn-caption-halftone:var(--uui-text-primary);
585
- --uui-btn-caption-disabled:var(--uui-button-caption-disabled);
576
+ --uui-btn-caption-disabled:var(--uui-text-disabled);
586
577
  }
587
578
  .uui-theme-vanilla_thunder .button-secondary{
588
579
  --uui-btn-bg:var(--uui-secondary);
@@ -596,9 +587,9 @@
596
587
  --uui-btn-border-active:var(--uui-secondary-darkest);
597
588
  --uui-btn-bg-disabled:var(--uui-disabled);
598
589
  --uui-btn-border-disabled:var(--uui-disabled);
599
- --uui-btn-caption:var(--uui-contrast);
590
+ --uui-btn-caption:var(--uui-text-white);
600
591
  --uui-btn-caption-halftone:var(--night600);
601
- --uui-btn-caption-disabled:var(--uui-button-caption-disabled);
592
+ --uui-btn-caption-disabled:var(--uui-text-disabled);
602
593
  }
603
594
  .uui-theme-vanilla_thunder .button-white{
604
595
  --uui-btn-bg:var(--white);