@epam/assets 5.1.0 → 5.1.1

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/theme/theme_vanilla_thunder.scss CHANGED
@@ -42,6 +42,7 @@
42
42
 
43
43
  /* start Loveship colors for controllers */
44
44
 
45
+ --fire-soft: #FEF6F6;
45
46
  --fire-lightest: #FDE1E1;
46
47
  --fire-light: #FCC8C8;
47
48
  --fire: #FA4B4B;
@@ -63,6 +64,8 @@
63
64
 
64
65
  /* end Loveship colors for controllers */
65
66
 
67
+ /* core variables start */
68
+
66
69
  --uui-accent: var(--grass-300);
67
70
  --uui-accent-light: var(--grass-200);
68
71
  --uui-accent-lightest: var(--grass-100);
@@ -72,7 +75,6 @@
72
75
  --uui-primary: var(--blue-300);
73
76
  --uui-primary-light: var(--blue-200);
74
77
  --uui-primary-lightest: var(--blue-100);
75
- --uui-primary-halftone: var(--night200); // TODO: why we have that?
76
78
  --uui-primary-dark: var(--blue-400);
77
79
  --uui-primary-darkest: var(--blue-500);
78
80
 
@@ -81,8 +83,6 @@
81
83
  --uui-secondary-lightest: var(--night200);
82
84
  --uui-secondary-dark: var(--night600);
83
85
  --uui-secondary-darkest: var(--night700);
84
- --uui-secondary-hover: var(--night600);
85
- --uui-secondary-active: var(--night700);
86
86
 
87
87
  --uui-negative: var(--sun-200);
88
88
  --uui-negative-light: var(--sun-100);
@@ -90,106 +90,114 @@
90
90
  --uui-negative-dark: var(--sun-250);
91
91
  --uui-negative-darkest: var(--sun-300);
92
92
 
93
-
94
93
  --uui-link: var(--blue-300);
95
94
  --uui-link-hover: var(--blue-400);
95
+ --uui-link-wite-hover: var(--night400);
96
+ --uui-link-black-hover: var(--night800);
96
97
  --uui-link-visited: #8018A0;
97
98
  --uui-link-disabled: var(--chromatic-200);
98
- --uui-visited: #5214CC;
99
99
 
100
100
  --uui-info: var(--blue-300);
101
+ --uui-info-soft: var(--blue-0);
101
102
  --uui-info-lightest: var(--blue-0);
102
103
  --uui-info-light: var(--blue-100);
103
104
  --uui-info-dark: var(--blue-400);
104
105
  --uui-info-darkest: var(--blue-500);
105
- --uui-info-hover: var(--blue-400);
106
- --uui-info-active: var(--blue-500);
107
106
 
108
107
  --uui-success: var(--grass-300);
108
+ --uui-success-soft: var(--grass-25);
109
109
  --uui-success-lightest: var(--grass-100);
110
110
  --uui-success-light: var(--grass-200);
111
111
  --uui-success-dark: var(--grass-400);
112
112
  --uui-success-darkest: var(--grass-500);
113
- --uui-success-hover: var(--grass-400);
114
- --uui-success-active: var(--grass-500);
115
113
 
116
114
  --uui-warning: var(--sun-200);
115
+ --uui-warning-soft: var(--sun-50);
117
116
  --uui-warning-lightest: var(--sun-50);
118
117
  --uui-warning-light: var(--sun-100);
119
118
  --uui-warning-dark: var(--sun-250);
120
119
  --uui-warning-darkest: var(--sun-300);
121
- --uui-warning-hover: var(--sun-250);
122
- --uui-warning-active: var(--sun-300);
123
120
 
124
121
  --uui-error: var(--fire);
122
+ --uui-error-soft: var(--fire-soft);
125
123
  --uui-error-lightest: var(--fire-lightest);
126
124
  --uui-error-light: var(--fire-light);
127
125
  --uui-error-dark: var(--fire-dark);
128
126
  --uui-error-darkest: var(--fire-darkest);
129
- --uui-error-hover: var(--fire-dark);
130
- --uui-error-active: var(--fire-darkest);
131
127
 
132
128
  --uui-icon: var(--chromatic-300);
133
129
  --uui-icon-hover: var(--chromatic-400);
134
130
  --uui-icon-active: var(--chromatic-500);
135
131
  --uui-icon-disabled: var(--chromatic-200);
136
132
 
133
+ /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
134
+
135
+ --uui-app-bg: var(--chromatic-100);
136
+ --uui-overlay: rgba(29, 30, 38, 0.8);
137
+
137
138
  --uui-surface: var(--chromatic-0);
138
- --uui-surface-hover: var(--night200);
139
- --uui-surface-inverted: var(--night900);
140
- /* new start */
141
- --uui-surface-light: var(--night50);
142
- --uui-surface-light-hover: var(--night100);
139
+ --uui-surface-low: var(--night50);
140
+ --uui-surface-lower: var(--night100);
141
+ --uui-surface-lowest: var(--night200);
143
142
  --uui-surface-contrast: var(--night800);
144
- --uui-surface-contrast-hover: var(--night900);
145
- --uui-surface-contrast-active: var(--night900);
146
- /* new end */
143
+ --uui-surface-contrast-low: var(--night800);
144
+ --uui-surface-contrast-lower: var(--night900);
145
+
146
+ --uui-surface-active: var(--blue-0);
147
+ --uui-surface-critical: var(--fire-lightest);
148
+ --uui-surface-warning: var(--sun-50);
147
149
 
148
- --uui-background: var(--chromatic-100);
149
150
  --uui-divider: var(--chromatic-200);
150
151
  --uui-divider-light: var(--chromatic-150);
151
- --uui-contrast: var(--chromatic-0);
152
- --uui-disabled: var(--chromatic-150);
153
-
154
- --uui-scroll-bars-bg: var(--chromatic-200);
155
- --uui-scroll-bars-bg-active: var(--chromatic-300);
156
-
157
- --uui-button-bg-halftone: var(--chromatic-0);
158
- --uui-button-caption-disabled: var(--chromatic-300);
159
152
 
160
153
  --uui-text-brand: var(--chromatic-500);
161
154
  --uui-text-primary: var(--chromatic-500);
162
155
  --uui-text-secondary: var(--chromatic-300);
156
+ --uui-text-tertiary: var(--chromatic-300);
163
157
  --uui-text-disabled: var(--chromatic-200);
164
158
  --uui-text-contrast: var(--chromatic-0);
159
+ --uui-text-white: var(--chromatic-0);
160
+ --uui-text-dark: var(--chromatic-500);
161
+
162
+ --uui-text-info: var(--uui-info);
163
+ --uui-text-warning: var(--uui-warning);
164
+ --uui-text-error: var(--uui-error);
165
+ --uui-text-success: var(--uui-success);
166
+
167
+ /* not accepted part */
168
+
169
+ --uui-disabled: var(--chromatic-150); // TODO: name does not clearly reflect the meaning
170
+
171
+ /* control specific */
172
+
173
+ --uui-scroll_bars-bg: var(--chromatic-200);
174
+ --uui-scroll_bars-bg-active: var(--chromatic-300);
175
+
176
+ --uui-button-bg-halftone: var(--chromatic-0);
165
177
 
166
178
  --uui-control-bg: var(--chromatic-0);
167
- --uui-control-bg-checked: var(--uui-primary);
168
- --uui-control-bg-checked-hover: var(--uui-primary-dark);
169
- --uui-control-bg-checked-disabled: var(--uui-primary-light);
170
179
  --uui-control-bg-hover: var(--chromatic-300);
171
180
  --uui-control-bg-disabled: var(--chromatic-100);
172
181
  --uui-control-bg-readonly: var(--chromatic-100);
182
+ --uui-control-bg-checked: var(--uui-primary);
183
+ --uui-control-bg-checked-hover: var(--uui-primary-dark);
184
+ --uui-control-bg-checked-disabled: var(--uui-primary-light);
173
185
  --uui-control_switch-bg: var(--chromatic-200);
174
- --uui-control_switch_toggler-bg: var(--chromatic-0);
186
+ --uui-control_switch-toggler-bg: var(--chromatic-0);
175
187
 
176
- --uui-control-border-checked-disabled: var(--uui-primary-light);
177
188
  --uui-control-border: var(--chromatic-200);
189
+ --uui-control-border-hover: var(--uui-primary-dark);
190
+ --uui-control-border-disabled: var(--chromatic-150);
191
+ --uui-control-border-readonly: var(--chromatic-150);
178
192
  --uui-control-border-checked: var(--uui-primary);
179
193
  --uui-control-border-checked-hover: var(--uui-primary-dark);
180
- --uui-control-border-hover: var(--uui-primary-dark);
181
- --uui-control-border-disabled: var(--uui-disabled);
182
- --uui-control-border-readonly: var(--uui-disabled);
194
+ --uui-control-border-checked-disabled: var(--uui-primary-light);
183
195
 
184
196
  --uui-control_switch-border-hover: var(--chromatic-300);
185
197
  --uui-control_textinput-border-hover: var(--chromatic-300);
186
198
 
187
199
  --uui-control-label: var(--uui-text-primary);
188
200
  --uui-control-label-disabled: var(--uui-text-disabled);
189
- --uui-control-label-error: var(--uui-error);
190
- --uui-control-label-fill: var(--uui-icon);
191
- --uui-control-label-optional-text: var(--uui-text-secondary);
192
- --uui-control-label-asterisk: var(--uui-error);
193
201
 
194
202
  --uui-control-placeholder: var(--night600);
195
203
  --uui-control-placeholder-disabled: var(--night500);
@@ -208,12 +216,15 @@
208
216
  --uui-skeleton: var(--chromatic-200);
209
217
  --uui-skeleton-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);
210
218
 
211
- --uui-overlay: rgb(29 30 38 / 80%);
212
219
  --uui-border-radius: 3px;
213
220
  --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);
214
221
  --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%);
215
222
  --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);
216
223
 
224
+ /* core variables end */
225
+
226
+ /* find below the not core variables that are used and highlight them in the code */
227
+
217
228
  /* TextInput vars */
218
229
  --uui-text-input-bg: var(--uui-control-bg);
219
230
  --uui-text-input-bg-disabled: var(--uui-control-bg-disabled);
@@ -248,21 +259,16 @@
248
259
  --uui-link-button-text: var(--uui-primary);
249
260
  --uui-link-button-text-hover: var(--uui-primary-dark);
250
261
  --uui-link-button-text-active: var(--uui-primary-darkest);
251
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
262
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
252
263
 
253
264
  --uui-link-button-font: var(--font-inter);
254
265
  --uui-link-button-font-weight: 400;
255
266
 
256
267
  /* DatePicker vars */
257
268
  --uui-dtp-title-bg: var(--uui-control-bg);
258
- --uui-dtp-title-bg-hover: var(--uui-primary-halftone);
259
269
  --uui-dtp-text-selected: var(--uui-control-border-checked);
260
270
  --uui-dtp-text: var(--uui-control-text);
261
- --uui-dtp-next-prev-icon: var(--uui-icon);
262
- --uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);
263
271
 
264
- --uui-dtp_header-font: var(--font-inter);
265
- --uui-dtp_header-font-weight: 400;
266
272
  --uui-dtp_body-content-font: var(--font-inter);
267
273
  --uui-dtp_body-content-font-weight: 400;
268
274
 
@@ -277,7 +283,6 @@
277
283
  --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);
278
284
  --uui-calendar-text: var(--uui-control-text);
279
285
  --uui-calendar-text-filtered: var(--uui-control-text-disabled);
280
- --uui-calendar-bg-selected: var(--uui-secondary);
281
286
 
282
287
  --uui-calendar-content-font: var(--font-inter);
283
288
  --uui-calendar-content-font-weight: 400;
@@ -287,13 +292,13 @@
287
292
  --uui-calendar-selected_day-font-weight: 600;
288
293
 
289
294
  /* tab-button-vars */
290
- --uui-tab-button-text: var(--uui-text-primary);
291
- --uui-tab-button-text-hover: var(--uui-primary);
292
- --uui-tab-button-text-active: var(--uui-primary);
293
- --uui-tab-button-text-disabled: var(--uui-text-disabled);
295
+ --uui-tab_button-text: var(--uui-text-primary);
296
+ --uui-tab_button-text-hover: var(--uui-primary);
297
+ --uui-tab_button-text-active: var(--uui-primary);
298
+ --uui-tab_button-text-disabled: var(--uui-text-disabled);
294
299
 
295
- --uui-tab-button-font: var(--font-inter);
296
- --uui-tab-button-font-weight: 600;
300
+ --uui-tab_button-font: var(--font-inter);
301
+ --uui-tab_button-font-weight: 600;
297
302
 
298
303
  /* radio-input-vars */
299
304
  --uui-radio-input-bg: var(--uui-control-bg);
@@ -464,7 +469,7 @@
464
469
  --uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);
465
470
  --uui-switch-label: var(--uui-control-label);
466
471
  --uui-switch-label-disabled: var(--uui-control-label-disabled);
467
- --uui-switch-toggler-bg: var(--uui-control_switch_toggler-bg);
472
+ --uui-switch-toggler-bg: var(--uui-control_switch-toggler-bg);
468
473
  --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
469
474
  --uui-switch-toggler-border-checked: var(--uui-control-bg-checked);
470
475
  --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
@@ -485,8 +490,8 @@
485
490
  --uui-dropdown-menu-bg: var(--uui-surface);
486
491
  --uui-dropdown-menu-shadow: var(--uui-shadow-level-2);
487
492
  --uui-dropdown-menu-splitter: var(--uui-divider);
488
- --uui-dropdown-menu-item-hover: var(--uui-surface-hover);
489
- --uui-dropdown-menu-item-active: var(--uui-surface-hover);
493
+ --uui-dropdown-menu-item-hover: var(--uui-surface-lowest);
494
+ --uui-dropdown-menu-item-active: var(--uui-surface-lowest);
490
495
  --uui-dropdown-menu-item-text: var(--uui-text-primary);
491
496
 
492
497
  --uui-dropdown-menu-body-font: var(--font-inter);
@@ -496,12 +501,14 @@
496
501
 
497
502
  /* MainMenu */
498
503
  --uui-main_menu-text: var(--uui-text-primary);
504
+ //--uui-main_menu-text-active: var(--uui-text-contrast);
499
505
  --uui-main_menu-bg: #F0F7FCD9;
500
506
  --uui-main_menu-hover: #FFF;
501
507
  --uui-main_menu-active: #FFF;
502
508
  --uui-main_menu-border-active: #FFF;
503
509
 
504
510
  --uui-main_menu-dropdown-bg: var(--uui-surface);
511
+ //--uui-main_menu-dropdown-bg-hover: var(--uui-surface-contrast-low);
505
512
  --uui-main_menu-dropdown-hover: var(--uui-primary);
506
513
  --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);
507
514
  --uui-main_menu-dropdown-border-radius: 8px;
@@ -523,8 +530,8 @@
523
530
 
524
531
  /* BurgerMenu */
525
532
  --uui-burger_menu-bg: var(--uui-surface);
526
- --uui-burger_menu-bg-hover: var(--uui-surface-light-hover);
527
- --uui-burger_menu-caption: var(--uui-contrast);
533
+ --uui-burger_menu-bg-hover: var(--uui-surface-lower);
534
+ --uui-burger_menu-caption: var(--uui-text-contrast);
528
535
  --uui-burger_menu-caption-hover: var(--uui-primary);
529
536
  --uui-burger_menu-overlay: var(--uui-overlay);
530
537
  --uui-burger_icon: var(--uui-text-primary);
@@ -641,8 +648,7 @@
641
648
  --uui-spinner: var(--uui-primary);
642
649
 
643
650
  /* Blocker */
644
- --uui-blocker-bg: var(--uui-background);
645
- --uui-blocker-bg-with-opacity: #F5F6FA80;
651
+ --uui-blocker-bg: var(--uui-app-bg);
646
652
 
647
653
  /* FlexRow */
648
654
  --uui-flex-row-border-bottom: 1px solid var(--uui-divider);
@@ -657,12 +663,12 @@
657
663
  --uui-dt-cell-border-focus: var(--uui-control-border-checked);
658
664
 
659
665
  --uui-dt-row-bg: var(--uui-surface);
660
- --uui-dt-row-bg-hover: var(--uui-surface-light-hover);
666
+ --uui-dt-row-bg-hover: var(--uui-surface-lower);
661
667
  --uui-dt-row-bg-invalid: #FEF7F6;
662
668
  --uui-dt-row-bg-selected: #EBF7FF;
663
669
 
664
- --uui-dt-header-row-bg: var(--uui-surface-light);
665
- --uui-dt-header-row-bg-hover: var(--uui-surface-hover);
670
+ --uui-dt-header-row-bg: var(--uui-surface-low);
671
+ --uui-dt-header-row-bg-hover: var(--uui-surface-lowest);
666
672
 
667
673
  --uui-dt-top-shadow: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
668
674
  --uui-dt-left-shadow: linear-gradient(to left, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
@@ -693,8 +699,8 @@
693
699
  /* ------------------------------------ */
694
700
 
695
701
  .tooltip-contrast {
696
- --uui-tooltip-bg: var(--uui-surface-inverted);
697
- --uui-tooltip-text: var(--uui-contrast);
702
+ --uui-tooltip-bg: var(--uui-surface-contrast);
703
+ --uui-tooltip-text: var(--uui-text-contrast);
698
704
  }
699
705
 
700
706
  .tooltip-default {
@@ -704,7 +710,7 @@
704
710
 
705
711
  .tooltip-critical {
706
712
  --uui-tooltip-bg: var(--uui-error-dark);
707
- --uui-tooltip-text: var(--uui-contrast);
713
+ --uui-tooltip-text: var(--uui-text-contrast);
708
714
  }
709
715
 
710
716
  .button-primary {
@@ -719,9 +725,9 @@
719
725
  --uui-btn-border-hover: var(--uui-primary-dark);
720
726
  --uui-btn-border-active: var(--uui-primary-darkest);
721
727
  --uui-btn-border-disabled: var(--uui-disabled);
722
- --uui-btn-caption: var(--uui-contrast);
728
+ --uui-btn-caption: var(--uui-text-white);
723
729
  --uui-btn-caption-halftone: var(--uui-text-primary);
724
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
730
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
725
731
  }
726
732
 
727
733
  .button-accent {
@@ -736,9 +742,9 @@
736
742
  --uui-btn-border-active: var(--uui-accent-darkest);
737
743
  --uui-btn-bg-disabled: var(--uui-disabled);
738
744
  --uui-btn-border-disabled: var(--uui-disabled);
739
- --uui-btn-caption: var(--uui-contrast);
745
+ --uui-btn-caption: var(--uui-text-white);
740
746
  --uui-btn-caption-halftone: var(--uui-text-primary);
741
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
747
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
742
748
  }
743
749
 
744
750
  .button-negative {
@@ -753,9 +759,9 @@
753
759
  --uui-btn-border-active: var(--uui-negative-darkest);
754
760
  --uui-btn-bg-disabled: var(--uui-disabled);
755
761
  --uui-btn-border-disabled: var(--uui-disabled);
756
- --uui-btn-caption: var(--uui-contrast);
762
+ --uui-btn-caption: var(--uui-text-white);
757
763
  --uui-btn-caption-halftone: var(--uui-text-primary);
758
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
764
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
759
765
  }
760
766
 
761
767
  .button-secondary {
@@ -770,9 +776,9 @@
770
776
  --uui-btn-border-active: var(--uui-secondary-darkest);
771
777
  --uui-btn-bg-disabled: var(--uui-disabled);
772
778
  --uui-btn-border-disabled: var(--uui-disabled);
773
- --uui-btn-caption: var(--uui-contrast);
779
+ --uui-btn-caption: var(--uui-text-white);
774
780
  --uui-btn-caption-halftone: var(--night600);
775
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
781
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
776
782
  }
777
783
 
778
784
  .button-white {