@epam/assets 5.7.2 → 5.8.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 (16) hide show
  1. package/css/theme/theme_electric.css +51 -20
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +48 -81
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +131 -104
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +52 -45
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/package.json +3 -3
  10. package/theme/theme_electric.scss +51 -14
  11. package/theme/theme_loveship.scss +57 -94
  12. package/theme/theme_loveship_dark.scss +139 -103
  13. package/theme/theme_promo.scss +65 -48
  14. package/theme/tokens/_theme_electric.scss +6 -6
  15. package/theme/tokens/_theme_loveship_dark.scss +6 -6
  16. /package/theme/tokens/{_theme_loveship.scss → _theme_loveship_light.scss} +0 -0
package/theme/theme_electric.scss CHANGED
@@ -84,13 +84,13 @@
84
84
  }
85
85
 
86
86
  .uui-color-white {
87
- --uui-color-5: var(--white);
88
- --uui-color-10: var(--white);
89
- --uui-color-20: var(--white);
90
- --uui-color-50: var(--white);
91
- --uui-color-60: var(--night100);
92
- --uui-color-70: var(--night200);
93
- --uui-color-contrast: var(--night800);
87
+ --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
88
+ --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
89
+ --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
90
+ --uui-color-50: var(--uui-neutral-0);
91
+ --uui-color-60: var(--uui-neutral-10);
92
+ --uui-color-70: var(--uui-neutral-20);
93
+ --uui-color-contrast: var(--uui-neutral-70);
94
94
  }
95
95
 
96
96
  .uui-color-night100 {
@@ -100,7 +100,7 @@
100
100
  --uui-color-50: var(--night100);
101
101
  --uui-color-60: var(--night200);
102
102
  --uui-color-70: var(--night300);
103
- --uui-color-contrast: var(--uui-neutral-80);
103
+ --uui-color-contrast: var(--uui-neutral-70);
104
104
  }
105
105
 
106
106
  .uui-color-night300 {
@@ -251,12 +251,23 @@
251
251
  /* Badge */
252
252
 
253
253
  .uui-badge.uui-color-white {
254
+ &.uui-fill-solid {
255
+ --uui-badge-bg-hover: var(--uui-neutral-30);
256
+ --uui-badge-border-hover: var(--uui-neutral-30);
257
+ }
258
+
254
259
  &.uui-fill-outline {
255
- --uui-badge-bg-hover: var(--uui-neutral-10);
260
+ --uui-badge-bg: var(--uui-neutral-0);
256
261
  --uui-badge-border: var(--uui-neutral-30);
262
+ --uui-badge-bg-hover: var(--uui-neutral-10);
257
263
  --uui-badge-border-hover: var(--uui-neutral-30);
258
- --uui-badge-caption: var(--uui-neutral-95);
259
- --uui-badge-caption-hover: var(--uui-neutral-80);
264
+ --uui-badge-caption: var(--uui-neutral-70);
265
+ --uui-badge-caption-hover: var(--uui-neutral-70);
266
+
267
+ .uui-count_indicator {
268
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
269
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
270
+ }
260
271
  }
261
272
  }
262
273
 
@@ -269,11 +280,17 @@
269
280
  --uui-badge-border: var(--uui-neutral-30);
270
281
  --uui-badge-border-hover: var(--uui-neutral-40);
271
282
  --uui-color-contrast: var(--uui-neutral-80);
283
+
284
+ .uui-count_indicator {
285
+ --uui-count_indicator-bg: var(--uui-neutral-0);
286
+ --uui-count_indicator-border: var(--uui-neutral-0);
287
+ }
272
288
  }
273
289
 
274
290
  &.uui-fill-outline {
275
291
  --uui-badge-bg: var(--uui-neutral-20);
276
292
  --uui-badge-border: var(--uui-neutral-40);
293
+ --uui-badge-border-hover: var(--uui-neutral-40);
277
294
  --uui-badge-bg-hover: var(--uui-neutral-30);
278
295
  --uui-badge-caption-hover: var(--uui-neutral-80);
279
296
  }
@@ -290,8 +307,13 @@
290
307
  --uui-badge-bg-hover: var(--uui-neutral-20);
291
308
  --uui-badge-border: var(--uui-neutral-30);
292
309
  --uui-badge-border-hover: var(--uui-neutral-30);
293
- --uui-badge-caption: var(--uui-neutral-95);
294
- --uui-badge-caption-hover: var(--uui-neutral-80);
310
+ --uui-badge-caption: var(--uui-neutral-70);
311
+ --uui-badge-caption-hover: var(--uui-neutral-70);
312
+
313
+ .uui-count_indicator {
314
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
315
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
316
+ }
295
317
  }
296
318
  }
297
319
 
@@ -326,6 +348,11 @@
326
348
  --uui-color-contrast: var(--white);
327
349
  }
328
350
 
351
+ .uui-icon_button.uui-color-white {
352
+ --uui-icon_btn-hover: var(--uui-neutral-20);
353
+ --uui-icon_btn-active: var(--uui-neutral-30);
354
+ }
355
+
329
356
  /* LinkButton */
330
357
 
331
358
  .uui-link_button.uui-color-contrast {
@@ -334,6 +361,13 @@
334
361
  --uui-link_btn-text-active: var(--uui-neutral-20);
335
362
  }
336
363
 
364
+ .uui-link_button.uui-color-white {
365
+ --uui-link_btn-text: var(--uui-neutral-5);
366
+ --uui-link_btn-text-hover: var(--uui-neutral-30);
367
+ --uui-link_btn-text-active: var(--uui-neutral-40);
368
+ --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);
369
+ }
370
+
337
371
  /* CountIndicator */
338
372
 
339
373
  .uui-count_indicator.uui-color-neutral {
@@ -393,9 +427,10 @@
393
427
  }
394
428
 
395
429
  &.uui-fill-outline {
430
+ --uui-tag-bg: var(--uui-neutral-0);
396
431
  --uui-tag-border: var(--uui-neutral-30);
397
- --uui-tag-border-hover: var(--uui-neutral-30);
398
432
  --uui-tag-bg-hover: var(--uui-neutral-10);
433
+ --uui-tag-border-hover: var(--uui-neutral-30);
399
434
 
400
435
  .uui-count_indicator {
401
436
  --uui-count_indicator-bg: var(--uui-neutral-30);
@@ -485,6 +520,8 @@
485
520
  }
486
521
 
487
522
  &.uui-fill-outline {
523
+ --uui-tag-bg: var(--uui-neutral-20);
524
+ --uui-tag-bg-hover: var(--uui-neutral-30);
488
525
  --uui-tag-fill: var(--uui-neutral-95);
489
526
 
490
527
  .uui-count_indicator {
package/theme/theme_loveship.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '../scss/loveship/font-faces';
2
- @use './tokens/_theme_loveship.scss' as tokens;
2
+ @use './tokens/_theme_loveship_light.scss' as tokens;
3
3
  /* Name convention */
4
4
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
5
5
 
@@ -9,23 +9,12 @@
9
9
  --uui-font-mono: 'Roboto Mono', monospace;
10
10
 
11
11
  /* Loveship old colors */
12
- --uui-color-night50-800: #DADAE9;
13
- --uui-color-night50-900: #BABAD6;
14
-
15
12
  --uui-color-night100-800: #D3D7E9;
16
13
  --uui-color-night100-900: #B1B9D8;
17
14
 
18
- --uui-color-night200-800: #C9CEE4;
19
- --uui-color-night200-900: #A7B0D3;
20
-
21
- --uui-color-night400-800: #B1B4C5;
22
- --uui-color-night400-900: #9398B0;
23
-
24
15
  --uui-color-night700-800: #30323D;
25
16
  --uui-color-night700-900: #1A1B20;
26
17
 
27
- --uui-color-night800-800: #1A1B23;
28
- --uui-color-night800-900: #040406;
29
18
  /* end Loveship old colors */
30
19
 
31
20
  /* contrast colors */
@@ -95,23 +84,13 @@
95
84
  }
96
85
 
97
86
  .uui-color-white {
98
- --uui-color-5: var(--white);
99
- --uui-color-10: var(--white);
100
- --uui-color-20: var(--white);
101
- --uui-color-50: var(--white);
102
- --uui-color-60: var(--night100);
103
- --uui-color-70: var(--night200);
104
- --uui-color-contrast: var(--uui-neutral-80);
105
- }
106
-
107
- .uui-color-night50 {
108
- --uui-color-5: var(--white);
109
- --uui-color-10: var(--white);
110
- --uui-color-20: var(--white);
111
- --uui-color-50: var(--night50);
112
- --uui-color-60: var(--uui-color-night50-800);
113
- --uui-color-70: var(--uui-color-night50-900);
114
- --uui-color-contrast: var(--uui-neutral-80);
87
+ --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
88
+ --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
89
+ --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
90
+ --uui-color-50: var(--uui-neutral-0);
91
+ --uui-color-60: var(--uui-neutral-10);
92
+ --uui-color-70: var(--uui-neutral-20);
93
+ --uui-color-contrast: var(--uui-neutral-70);
115
94
  }
116
95
 
117
96
  .uui-color-night100 {
@@ -121,17 +100,7 @@
121
100
  --uui-color-50: var(--night100);
122
101
  --uui-color-60: var(--uui-color-night100-800);
123
102
  --uui-color-70: var(--uui-color-night100-900);
124
- --uui-color-contrast: var(--uui-neutral-80);
125
- }
126
-
127
- .uui-color-night200 {
128
- --uui-color-5: var(--white);
129
- --uui-color-10: var(--night50);
130
- --uui-color-20: var(--night100);
131
- --uui-color-50: var(--night200);
132
- --uui-color-60: var(--uui-color-night200-800);
133
- --uui-color-70: var(--uui-color-night200-900);
134
- --uui-color-contrast: var(--uui-neutral-80);
103
+ --uui-color-contrast: var(--uui-neutral-70);
135
104
  }
136
105
 
137
106
  .uui-color-night300 {
@@ -144,16 +113,6 @@
144
113
  --uui-color-contrast: var(--uui-neutral-80);
145
114
  }
146
115
 
147
- .uui-color-night400 {
148
- --uui-color-5: var(--night100);
149
- --uui-color-10: var(--night200);
150
- --uui-color-20: var(--night300);
151
- --uui-color-50: var(--night400);
152
- --uui-color-60: var(--uui-color-night400-800);
153
- --uui-color-70: var(--uui-color-night400-900);
154
- --uui-color-contrast: var(--uui-neutral-80);
155
- }
156
-
157
116
  .uui-color-night500 {
158
117
  --uui-color-5: var(--night200);
159
118
  --uui-color-10: var(--night300);
@@ -187,16 +146,6 @@
187
146
  --uui-color-contrast: var(--white);
188
147
  }
189
148
 
190
- .uui-color-night800 {
191
- --uui-color-5: var(--night500);
192
- --uui-color-10: var(--night600);
193
- --uui-color-20: var(--night700);
194
- --uui-color-50: var(--night800);
195
- --uui-color-60: var(--uui-color-night800-800);
196
- --uui-color-70: var(--uui-color-night800-900);
197
- --uui-color-contrast: var(--white);
198
- }
199
-
200
149
  .uui-color-warning,
201
150
  .uui-color-sun {
202
151
  --uui-color-5: var(--uui-warning-5);
@@ -303,12 +252,17 @@
303
252
  /* Badge */
304
253
 
305
254
  .uui-badge.uui-color-white {
255
+ &.uui-fill-solid {
256
+ --uui-badge-border-hover: var(--uui-neutral-30);
257
+ }
258
+
306
259
  &.uui-fill-outline {
307
- --uui-badge-bg-hover: var(--uui-neutral-10);
260
+ --uui-badge-bg: var(--uui-neutral-0);
261
+ --uui-badge-bg-hover: var(--uui-neutral-30);
308
262
  --uui-badge-border: var(--uui-neutral-30);
309
263
  --uui-badge-border-hover: var(--uui-neutral-30);
310
- --uui-badge-caption: var(--uui-neutral-80);
311
- --uui-badge-caption-hover: var(--uui-neutral-80);
264
+ --uui-badge-caption: var(--uui-neutral-70);
265
+ --uui-badge-caption-hover: var(--uui-neutral-70);
312
266
  }
313
267
  }
314
268
 
@@ -320,6 +274,11 @@
320
274
  --uui-badge-border: var(--uui-neutral-30);
321
275
  --uui-badge-border-hover: var(--uui-neutral-40);
322
276
  --uui-color-contrast: var(--uui-neutral-80);
277
+
278
+ .uui-count_indicator {
279
+ --uui-count_indicator-bg: var(--uui-neutral-0);
280
+ --uui-count_indicator-border: var(--uui-neutral-0);
281
+ }
323
282
  }
324
283
 
325
284
  &.uui-fill-outline {
@@ -342,13 +301,19 @@
342
301
  --uui-badge-bg-hover: var(--uui-neutral-20);
343
302
  --uui-badge-border: var(--uui-neutral-30);
344
303
  --uui-badge-border-hover: var(--uui-neutral-30);
345
- --uui-badge-caption: var(--uui-neutral-80);
346
- --uui-badge-caption-hover: var(--uui-neutral-80);
304
+ --uui-badge-caption: var(--uui-neutral-70);
305
+ --uui-badge-caption-hover: var(--uui-neutral-70);
306
+
307
+ .uui-count_indicator {
308
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
309
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
310
+ }
347
311
  }
348
312
  }
349
313
 
350
314
  .uui-badge.uui-color-night600 {
351
315
  &.uui-fill-outline {
316
+ --uui-badge-bg: var(--uui-neutral-20);
352
317
  --uui-badge-border: var(--uui-neutral-60);
353
318
  --uui-badge-border-hover: var(--uui-neutral-60);
354
319
  --uui-badge-caption: var(--uui-neutral-80);
@@ -366,27 +331,6 @@
366
331
  &:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {
367
332
  --uui-btn-caption: var(--uui-neutral-70);
368
333
  }
369
-
370
- &.uui-color-white {
371
- &.uui-fill-none, &.uui-fill-ghost {
372
- --uui-btn-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 20%, transparent);
373
- --uui-btn-bg-active: color-mix(in srgb, var(--uui-neutral-0) 30%, transparent);
374
- }
375
-
376
- &.uui-fill-ghost {
377
- --uui-btn-border: transparent;
378
- --uui-btn-border-hover: transparent;
379
- --uui-btn-border-active: transparent;
380
- }
381
-
382
- &.uui-fill-outline, &.uui-fill-solid {
383
- --uui-btn-caption: var(--uui-neutral-70);
384
- --uui-btn-bg-hover: var(--uui-neutral-20);
385
- --uui-btn-border-hover: var(--uui-neutral-20);
386
- --uui-btn-bg-active: var(--uui-neutral-30);
387
- --uui-btn-border-active: var(--uui-neutral-30);
388
- }
389
- }
390
334
  }
391
335
 
392
336
  /* IconButton */
@@ -410,6 +354,13 @@
410
354
  --uui-link_btn-text-active: var(--uui-neutral-20);
411
355
  }
412
356
 
357
+ .uui-link_button.uui-color-white {
358
+ --uui-link_btn-text: var(--uui-neutral-5);
359
+ --uui-link_btn-text-hover: var(--uui-neutral-30);
360
+ --uui-link_btn-text-active: var(--uui-neutral-40);
361
+ --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);
362
+ }
363
+
413
364
  /* Tooltip */
414
365
 
415
366
  .uui-tooltip-container.uui-color-white {
@@ -473,6 +424,20 @@
473
424
  --uui-panel-bg: var(--night50);
474
425
  }
475
426
 
427
+ /* Text */
428
+
429
+ .uui-text.uui-color-night50 {
430
+ --uui-text: var(--night50);
431
+ }
432
+
433
+ .uui-text.uui-color-night400 {
434
+ --uui-text: var(--night400);
435
+ }
436
+
437
+ .uui-text.uui-color-night800 {
438
+ --uui-text: var(--night800);
439
+ }
440
+
476
441
  /* Tag */
477
442
 
478
443
  .uui-tag {
@@ -480,18 +445,17 @@
480
445
  &.uui-fill-solid {
481
446
  --uui-tag-bg-hover: var(--uui-neutral-10);
482
447
  --uui-tag-border-hover: var(--uui-neutral-10);
483
- --uui-tag-fill: var(--uui-neutral-60);
484
448
 
485
449
  .uui-count_indicator {
486
450
  --uui-count_indicator-bg: var(--uui-neutral-30);
487
451
  --uui-count_indicator-border: var(--uui-neutral-30);
488
- --uui-count_indicator-caption: var(--uui-neutral-70);
489
452
  }
490
453
  }
491
454
 
492
455
  &.uui-fill-outline {
493
- --uui-tag-bg-hover: var(--uui-neutral-10);
456
+ --uui-tag-bg: var(--uui-neutral-0);
494
457
  --uui-tag-border: var(--uui-neutral-30);
458
+ --uui-tag-bg-hover: var(--uui-neutral-10);
495
459
  --uui-tag-border-hover: var(--uui-neutral-30);
496
460
 
497
461
  .uui-count_indicator {
@@ -503,13 +467,12 @@
503
467
 
504
468
  &.uui-color-night100 {
505
469
  &.uui-fill-solid {
470
+ --uui-tag-bg-hover: var(--uui-neutral-20);
506
471
  --uui-tag-border-hover: var(--uui-neutral-20);
507
- --uui-tag-fill: var(--uui-neutral-60);
508
472
 
509
473
  .uui-count_indicator {
510
474
  --uui-count_indicator-bg: var(--uui-neutral-30);
511
475
  --uui-count_indicator-border: var(--uui-neutral-30);
512
- --uui-count_indicator-caption: var(--uui-neutral-70);
513
476
  }
514
477
  }
515
478
 
@@ -533,12 +496,13 @@
533
496
  --uui-tag-bg-hover: var(--uui-neutral-40);
534
497
  --uui-tag-border: var(--uui-neutral-30);
535
498
  --uui-tag-border-hover: var(--uui-neutral-40);
536
- --uui-tag-caption: var(--uui-text-primary);
537
- --uui-tag-fill: var(--uui-neutral-60);
499
+ --uui-tag-caption: var(--uui-neutral-70);
500
+ --uui-tag-fill: var(--uui-neutral-70);
538
501
 
539
502
  .uui-count_indicator {
540
503
  --uui-count_indicator-bg: var(--uui-neutral-0);
541
504
  --uui-count_indicator-border: var(--uui-neutral-0);
505
+ --uui-count_indicator-caption: var(--uui-neutral-70);
542
506
  }
543
507
  }
544
508
 
@@ -567,7 +531,6 @@
567
531
  .uui-count_indicator {
568
532
  --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
569
533
  --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
570
- --uui-count_indicator-caption: var(--uui-neutral-0);
571
534
  }
572
535
  }
573
536