@epam/assets 5.3.0-rc.0 → 5.3.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 (21) hide show
  1. package/css/theme/theme_electric.css +43 -21
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +34 -28
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +72 -51
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +40 -31
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder.css +71 -31
  10. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  11. package/package.json +2 -2
  12. package/scss/electric/font-faces.scss +7 -0
  13. package/scss/loveship/font-faces.scss +2 -2
  14. package/theme/theme_electric.scss +52 -26
  15. package/theme/theme_loveship.scss +45 -33
  16. package/theme/theme_loveship_dark.scss +99 -74
  17. package/theme/theme_promo.scss +61 -38
  18. package/theme/theme_vanilla_thunder.scss +89 -36
  19. package/css/theme/theme_vanilla_thunder(old).css +0 -805
  20. package/css/theme/theme_vanilla_thunder(old).css.map +0 -1
  21. package/theme/theme_vanilla_thunder(old).scss +0 -1031
package/theme/theme_loveship_dark.scss CHANGED
@@ -3,9 +3,7 @@
3
3
 
4
4
  @mixin theme-loveship_dark {
5
5
  --uui-font: 'Source Sans Pro', sans-serif;
6
- --font-primary: 'Sans Semibold', Arial, sans-serif;
7
- --font-promo: 'Sans Semibold', Arial, sans-serif;
8
- --font-mono: monospace;
6
+ --uui-font-mono: 'Roboto Mono', monospace;
9
7
 
10
8
  --night50: #FAFAFC;
11
9
  --night100: #E1E3EB;
@@ -205,7 +203,6 @@
205
203
  --uui-text-secondary: var(--uui-neutral-10);
206
204
  --uui-text-tertiary: var(--uui-neutral-20);
207
205
  --uui-text-disabled: var(--uui-neutral-30);
208
- --uui-text-contrast: var(--uui-neutral-70);
209
206
 
210
207
  --uui-text-info: var(--uui-info-70);
211
208
  --uui-text-warning: var(--uui-warning-70);
@@ -225,48 +222,36 @@
225
222
  --uui-icon: var(--uui-neutral-10);
226
223
  --uui-icon-hover: var(--uui-neutral-5);
227
224
  --uui-icon-active: var(--uui-neutral-5);
228
- --uui-icon-disabled: var(--uui-neutral-50);
229
-
230
- --uui-scroll_bars-bg: var(--uui-neutral-40);
231
- --uui-scroll_bars-bg-active: var(--uui-neutral-30);
225
+ --uui-icon-disabled: var(--uui-neutral-30);
232
226
 
233
227
  --uui-control-bg: var(--uui-surface-main);
234
228
  --uui-control-bg-hover: var(--uui-neutral-60);
235
229
  --uui-control-bg-disabled: var(--uui-neutral-60);
236
- --uui-control-bg-readonly: var(--uui-neutral-60);
237
230
 
238
231
  --uui-control-border: var(--uui-neutral-40);
239
232
  --uui-control-border-hover: var(--uui-neutral-20);
233
+ --uui-control-border-focus: var(--uui-primary-60);
240
234
  --uui-control-border-disabled: var(--uui-neutral-40);
241
- --uui-control-border-readonly: var(--uui-neutral-40);
242
- --uui-control-border-checked: var(--uui-primary-60);
243
-
244
- --uui-control-label: var(--uui-text-primary);
245
- --uui-control-label-disabled: var(--uui-text-disabled);
246
235
 
247
- --uui-control-placeholder: var(--uui-text-tertiary);
248
- --uui-control-placeholder-disabled: var(--uui-neutral-30); // one place of usage
236
+ --uui-control-placeholder: var(--uui-neutral-20);
237
+ --uui-control-placeholder-disabled: var(--uui-neutral-30);
249
238
 
250
239
  --uui-control-text: var(--uui-text-primary);
251
- --uui-control-text-disabled: var(--uui-text-disabled);
240
+ --uui-control-text-disabled: var(--uui-text-tertiary);
252
241
 
253
242
  --uui-control-icon: var(--uui-neutral-30);
254
243
  --uui-control-icon-disabled: var(--uui-neutral-30);
255
244
 
256
- --uui-control-checkbox-icon: var(--white);
257
-
258
245
  --uui-outline-focus: #008ACE80;
259
246
 
260
- --uui-search_result-bg-highlight: var(--uui-warning-20);
261
-
262
- --uui-skeleton: var(--uui-neutral-40);
263
- --uui-skeleton-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-40) 50%, var(--uui-neutral-40) 100%);
247
+ --uui-skeleton: var(--uui-neutral-30);
264
248
 
265
- --uui-border-radius: 3px;
266
249
  --uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
267
250
  --uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26);
268
251
  --uui-shadow-level-3: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 25px 3px rgba(0, 0, 0, 0.56);
269
252
 
253
+ --uui-border-radius: 3px;
254
+
270
255
  /* core variables end */
271
256
 
272
257
  /* ------------------------------------ */
@@ -364,7 +349,7 @@
364
349
  --uui-color-20: var(--uui-error-20);
365
350
  --uui-color-50: var(--uui-error-50);
366
351
  --uui-color-60: var(--uui-error-60);
367
- --uui-color-70: var(--uui-error-40);
352
+ --uui-color-70: var(--uui-error-70);
368
353
  --uui-color-contrast: var(--white);
369
354
  }
370
355
 
@@ -536,12 +521,6 @@
536
521
  }
537
522
  }
538
523
 
539
- .uui-switch {
540
- --uui-switch-bg: var(--uui-neutral-40);
541
- --uui-switch-bg-hover: var(--uui-neutral-50);
542
- --uui-switch-border-hover: var(--uui-neutral-50);
543
- }
544
-
545
524
  .uui-blocker-container {
546
525
  --uui-blocker-bg: var(--uui-surface-main);
547
526
  --uui-blocker-bg-with-opacity: #303240CC;
@@ -628,29 +607,37 @@
628
607
 
629
608
  /* IconButton */
630
609
 
610
+ .uui-icon_button:is(.uui-color-info, .uui-color-success, .uui-color-warning, .uui-color-error) {
611
+ --uui-icon_btn: var(--uui-color-60);
612
+ --uui-icon_btn-hover: var(--uui-color-70);
613
+ --uui-icon_btn-active: var(--uui-color-70);
614
+ }
615
+
631
616
  .uui-icon_button.uui-color-secondary {
632
- --uui-icon-btn: var(--uui-neutral-40);
633
- --uui-icon-btn-hover: var(--uui-neutral-30);
634
- --uui-icon-btn-active: var(--uui-neutral-30);
617
+ --uui-icon_btn: var(--uui-neutral-40);
618
+ --uui-icon_btn-hover: var(--uui-neutral-30);
619
+ --uui-icon_btn-active: var(--uui-neutral-30);
635
620
  }
636
621
 
622
+ /* LinkButton */
623
+
637
624
  .uui-link_button.uui-color-contrast {
638
- --uui-link_button-text: var(--uui-neutral-0);
639
- --uui-link_button-text-hover: var(--uui-neutral-5);
640
- --uui-link_button-text-active: var(--uui-neutral-10);
625
+ --uui-link_btn-text: var(--uui-neutral-0);
626
+ --uui-link_btn-text-hover: var(--uui-neutral-5);
627
+ --uui-link_btn-text-active: var(--uui-neutral-10);
641
628
  }
642
629
 
643
630
  .uui-link_button.uui-color-primary {
644
- --uui-link_button-text: var(--uui-color-60);
645
- --uui-link_button-text-hover: var(--uui-color-70);
646
- --uui-link_button-text-disabled: var(--uui-text-disabled);
631
+ --uui-link_btn-text: var(--uui-color-60);
632
+ --uui-link_btn-text-hover: var(--uui-color-70);
633
+ --uui-link_btn-text-disabled: var(--uui-text-disabled);
647
634
  }
648
635
 
649
636
  /* TubButton */
650
637
 
651
638
  .uui-tab-button {
652
- --uui-tab_button-text-hover: var(--uui-primary-60);
653
- --uui-tab_button-text-active: var(--uui-primary-60);
639
+ --uui-tab_btn-text-hover: var(--uui-primary-60);
640
+ --uui-tab_btn-text-active: var(--uui-primary-60);
654
641
  }
655
642
 
656
643
  /* MainMenu */
@@ -660,12 +647,12 @@
660
647
  --uui-main_menu-text-active: var(--uui-text-brand);
661
648
  --uui-main_menu-bg: var(--uui-neutral-70);
662
649
 
663
- //--uui-main_menu-search-bg: var(--uui-neutral-5);
664
- //--uui-main_menu-search-border: var(--uui-neutral-40);
665
- //--uui-main_menu-search-placeholder: var(--uui-text-tertiary);
666
- //--uui-main_menu-search-text: var(--uui-text-primary);
667
- //--uui-main_menu-search-icon: var(--uui-neutral-70);
668
- //
650
+ --uui-main_menu-search-bg: var(--uui-neutral-5);
651
+ --uui-main_menu-search-border: var(--uui-neutral-40);
652
+ --uui-main_menu-search-placeholder: var(--uui-text-tertiary);
653
+ --uui-main_menu-search-text: var(--uui-text-primary);
654
+ --uui-main_menu-search-icon: var(--uui-neutral-70);
655
+
669
656
  --uui-main_menu-icon: var(--uui-neutral-5);
670
657
  --uui-main_menu-icon-hover: var(--uui-neutral-5);
671
658
  --uui-main_menu-icon-active: var(--uui-neutral-5);
@@ -683,8 +670,8 @@
683
670
  --uui-burger_menu-bg: var(--uui-app-bg);
684
671
  --uui-burger_menu-bg-hover: var(--uui-app-bg);
685
672
  --uui-burger_menu-caption: var(--uui-neutral-90);
686
- --uui-burger_icon: var(--uui-neutral-5);
687
- --uui-burger_item: var(--uui-app-bg);
673
+ --uui-burger_menu-icon: var(--uui-neutral-5);
674
+ --uui-burger_menu-item: var(--uui-app-bg);
688
675
  }
689
676
 
690
677
  /* BurgerButton */
@@ -694,23 +681,27 @@
694
681
  --uui-burger_btn_caption-active: var(--uui-primary-50);
695
682
  --uui-burger_btn-border: var(--uui-neutral-40);
696
683
  }
697
- //
698
- ///* BurgerSearch */
699
- //.uui-main_menu-burger-search {
700
- // --uui-burger_search: var(--uui-text-brand);
701
- // --uui-burger_search-fill: var(--uui-neutral-70);
702
- // --uui-burger_search-bg: var(--uui-neutral-40);
703
- // --uui-burger_search-placeholder: var(--uui-text-tertiary);
704
- //}
684
+
685
+ /* BurgerSearch */
686
+
687
+ .uui-main_menu-burger-search {
688
+ --uui-burger_search: var(--uui-text-brand);
689
+ --uui-burger_search-fill: var(--uui-neutral-70);
690
+ --uui-burger_search-bg: var(--uui-neutral-40);
691
+ --uui-burger_search-placeholder: var(--uui-text-tertiary);
692
+ }
693
+
694
+ /* Tooltip */
705
695
 
706
696
  .uui-tooltip-container.uui-color-neutral {
707
697
  --uui-tooltip-bg: var(--uui-surface-main);
698
+ --uui-tooltip-border: var(--uui-neutral-50);
708
699
  --uui-color-contrast: var(--uui-text-primary);
709
700
  }
710
701
 
711
- .uui-tooltip-container.uui-color-contrast {
702
+ .uui-tooltip-container.uui-color-inverted {
712
703
  --uui-tooltip-bg: var(--uui-neutral-10);
713
- --uui-color-contrast: var(--uui-text-contrast);
704
+ --uui-tooltip-text: var(--uui-neutral-70);
714
705
  }
715
706
 
716
707
  /* CountIndicator */
@@ -769,6 +760,31 @@
769
760
  --uui-alert-border: var(--uui-color-60);
770
761
  }
771
762
 
763
+ /* Tag */
764
+
765
+ .uui-tag.uui-color-neutral {
766
+ --uui-tag-bg: var(--uui-neutral-40);
767
+ }
768
+
769
+ .uui-presets-panel-input .uui-icon-cancel {
770
+ &:hover {
771
+ background-color: var(--uui-neutral-60);
772
+ }
773
+
774
+ &:active {
775
+ background-color: var(--uui-neutral-50);
776
+ }
777
+ }
778
+
779
+ .uui-scroll-bars {
780
+ --uui-scroll_bars-bg: var(--uui-neutral-40);
781
+ --uui-scroll_bars-bg-active: var(--uui-neutral-30);
782
+ }
783
+
784
+ .uui-text-placeholder {
785
+ --uui-text_placeholder-gradient: linear-gradient(90deg, var(--uui-neutral-30) 0%, var(--uui-neutral-50) 50%, var(--uui-neutral-30) 100%);
786
+ }
787
+
772
788
  /* fonts */
773
789
 
774
790
  .uui-font-sans {
@@ -782,26 +798,35 @@
782
798
 
783
799
  }
784
800
 
785
- .uui-font-sans-italic {
786
- --uui-text-font: var(--uui-font);
787
- --uui-text-font-weight: 400;
788
- --uui-text-font-style: italic;
789
- }
790
-
791
- .uui-font-museo-sans {
792
- --uui-text-font: var(--font-primary);
793
- --uui-text-font-weight: normal;
794
- }
795
-
796
801
  .uui-font-sans-light {
797
802
  --uui-text-font: var(--uui-font);
798
803
  --uui-text-font-weight: 300;
799
804
  }
800
805
 
801
- /* Tag */
806
+ /* Typography */
802
807
 
803
- .uui-tag.uui-color-neutral {
804
- --uui-tag-bg: var(--uui-neutral-40);
808
+ .uui-typography {
809
+ .uui-highlight {
810
+ background-color: var(--uui-warning-20);
811
+ }
812
+
813
+ h1 {
814
+ font-weight: 600;
815
+ }
816
+
817
+ h2 {
818
+ font-weight: 700;
819
+ }
820
+
821
+ h3 {
822
+ font-weight: 600;
823
+ }
824
+
825
+ .hero-header {
826
+ font-size: 72px;
827
+ line-height: 72px;
828
+ font-weight: 700;
829
+ }
805
830
  }
806
831
  }
807
832
 
package/theme/theme_promo.scss CHANGED
@@ -3,9 +3,11 @@
3
3
 
4
4
  @mixin theme-promo {
5
5
  --uui-font: 'Source Sans Pro', sans-serif;
6
- --font-primary: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
7
- --font-promo: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
8
- --font-mono: 'Roboto Mono', monospace;
6
+ --uui-font-mono: 'Roboto Mono', monospace;
7
+
8
+ // theme specific fonts
9
+ --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
10
+ --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
9
11
 
10
12
  --gray5: #FAFAFC;
11
13
  --gray10: #F5F6FA;
@@ -124,9 +126,9 @@
124
126
  --uui-primary-70: var(--blue-70);
125
127
  --uui-primary-contrast: var(--white);
126
128
 
127
- --uui-secondary-5: var(--gray20);
128
- --uui-secondary-10: var(--gray30);
129
- --uui-secondary-20: var(--gray40);
129
+ --uui-secondary-5: var(--gray10);
130
+ --uui-secondary-10: var(--gray20);
131
+ --uui-secondary-20: var(--gray30);
130
132
  --uui-secondary-50: var(--gray60);
131
133
  --uui-secondary-60: var(--gray70);
132
134
  --uui-secondary-70: var(--gray80);
@@ -205,9 +207,8 @@
205
207
  --uui-text-secondary: var(--uui-neutral-70);
206
208
  --uui-text-tertiary: var(--uui-neutral-60);
207
209
  --uui-text-disabled: var(--uui-neutral-50);
208
- --uui-text-contrast: var(--uui-neutral-5);
209
210
 
210
- --uui-text-info: var(--uui-info-70); // TODO: update colors
211
+ --uui-text-info: var(--uui-info-70);
211
212
  --uui-text-warning: var(--uui-warning-70);
212
213
  --uui-text-critical: var(--uui-critical-70);
213
214
  --uui-text-success: var(--uui-success-70);
@@ -228,46 +229,34 @@
228
229
  --uui-icon-active: var(--uui-neutral-80);
229
230
  --uui-icon-disabled: var(--uui-neutral-50);
230
231
 
231
- --uui-scroll_bars-bg: var(--uui-neutral-40);
232
- --uui-scroll_bars-bg-active: var(--uui-neutral-60);
233
-
234
232
  --uui-control-bg: var(--uui-neutral-0);
235
233
  --uui-control-bg-hover: var(--uui-neutral-60);
236
234
  --uui-control-bg-disabled: var(--uui-neutral-5);
237
- --uui-control-bg-readonly: var(--uui-neutral-5);
238
235
 
239
236
  --uui-control-border: var(--uui-neutral-40);
240
237
  --uui-control-border-hover: var(--uui-neutral-60);
238
+ --uui-control-border-focus: var(--uui-primary-50);
241
239
  --uui-control-border-disabled: var(--uui-neutral-30);
242
- --uui-control-border-readonly: var(--uui-neutral-30);
243
- --uui-control-border-checked: var(--uui-primary-50);
244
-
245
- --uui-control-label: var(--uui-text-primary);
246
- --uui-control-label-disabled: var(--uui-text-disabled);
247
240
 
248
- --uui-control-placeholder: var(--uui-neutral-60);
241
+ --uui-control-placeholder: var(--uui-neutral-50);
249
242
  --uui-control-placeholder-disabled: var(--uui-neutral-50);
250
243
 
251
244
  --uui-control-text: var(--uui-text-primary);
252
- --uui-control-text-disabled: var(--uui-text-disabled);
245
+ --uui-control-text-disabled: var(--uui-text-tertiary);
253
246
 
254
247
  --uui-control-icon: var(--uui-neutral-50);
255
248
  --uui-control-icon-disabled: var(--uui-neutral-50);
256
249
 
257
- --uui-control-checkbox-icon: var(--uui-neutral-0);
258
-
259
250
  --uui-outline-focus: #008ACE80;
260
251
 
261
- --uui-search_result-bg-highlight: var(--uui-warning-10);
262
-
263
252
  --uui-skeleton: var(--uui-neutral-40);
264
- --uui-skeleton-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-10) 50%, var(--uui-neutral-40) 100%);
265
253
 
266
- --uui-border-radius: 0;
267
254
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
268
255
  --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
269
256
  --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
270
257
 
258
+ --uui-border-radius: 0;
259
+
271
260
  /* core variables end */
272
261
 
273
262
  /* ------------------------------------ */
@@ -581,19 +570,27 @@
581
570
  --uui-btn-caption: var(--uui-neutral-70);
582
571
  }
583
572
 
573
+ .uui-button {
574
+ &.uui-size-42, &.uui-size-48 {
575
+ .uui-caption {
576
+ font-family: var(--font-museo-sans);
577
+ }
578
+ }
579
+ }
580
+
584
581
  /* IconButton */
585
582
 
586
583
  .uui-icon_button.uui-color-neutral,
587
584
  .uui-icon_button.uui-color-gray60 {
588
- --uui-icon-btn: var(--uui-neutral-60);
589
- --uui-icon-btn-hover: var(--uui-neutral-70);
590
- --uui-icon-btn-active: var(--uui-neutral-80);
585
+ --uui-icon_btn: var(--uui-neutral-60);
586
+ --uui-icon_btn-hover: var(--uui-neutral-70);
587
+ --uui-icon_btn-active: var(--uui-neutral-80);
591
588
  }
592
589
 
593
590
  .uui-icon_button.uui-color-secondary {
594
- --uui-icon-btn: var(--uui-neutral-50);
595
- --uui-icon-btn-hover: var(--uui-neutral-60);
596
- --uui-icon-btn-active: var(--uui-neutral-70);
591
+ --uui-icon_btn: var(--uui-neutral-50);
592
+ --uui-icon_btn-hover: var(--uui-neutral-60);
593
+ --uui-icon_btn-active: var(--uui-neutral-70);
597
594
  }
598
595
 
599
596
  /* TooltipContainer */
@@ -610,7 +607,7 @@
610
607
  }
611
608
 
612
609
  .uui-tooltip-container.uui-color-gray,
613
- .uui-tooltip-container.uui-color-contrast {
610
+ .uui-tooltip-container.uui-color-inverted {
614
611
  --uui-tooltip-bg: var(--uui-neutral-80);
615
612
  --uui-tooltip-text: var(--white);
616
613
  }
@@ -666,6 +663,19 @@
666
663
  --uui-tag-border-radius: 0;
667
664
  }
668
665
 
666
+ .uui-dropdown-body {
667
+ --uui-dropdown_container-border-radius: 0;
668
+ }
669
+
670
+ .uui-link_button {
671
+ &.uui-size-42, &.uui-size-48 {
672
+ :global(.uui-caption) {
673
+ font-family: var(--font-museo-sans);
674
+ text-transform: uppercase;
675
+ }
676
+ }
677
+ }
678
+
669
679
  /* fonts */
670
680
 
671
681
  .uui-font-sans {
@@ -685,19 +695,32 @@
685
695
  }
686
696
 
687
697
  .uui-font-museo-sans {
688
- --uui-text-font: var(--font-primary);
698
+ --uui-text-font: var(--font-museo-sans);
689
699
  --uui-text-font-weight: normal;
690
700
  }
691
701
 
692
702
  .uui-font-museo-slab {
693
- --uui-text-font: var(--font-promo);
703
+ --uui-text-font: var(--font-museo-slab);
694
704
  --uui-text-font-weight: normal;
695
-
696
705
  }
697
706
 
698
- .typography-uui {
699
- :global(.promo-header), h1, h2, h3 {
700
- font-family: var(--font-primary);
707
+ /* Typography */
708
+
709
+ .uui-typography {
710
+ h1, h2, h3 {
711
+ font-family: var(--font-museo-sans);
712
+ }
713
+
714
+ h1 {
715
+ font-size: 36px;
716
+ }
717
+
718
+ .hero-header {
719
+ font-family: var(--font-museo-slab);
720
+ }
721
+
722
+ .promo-header:is(h1, h2, h3) {
723
+ font-family: var(--font-museo-sans);
701
724
  }
702
725
  }
703
726
  }
package/theme/theme_vanilla_thunder.scss CHANGED
@@ -1,14 +1,7 @@
1
1
  /* Name convention */
2
2
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
3
  .uui-theme-vanilla_thunder {
4
- --font-regular: 'Sans Regular', 'Arial', sans-serif;
5
- --font-semibold: 'Sans Semibold', 'Arial', sans-serif;
6
- --font-italic: 'Sans Italic', 'Arial', sans-serif;
7
- --font-primary: 'Museo Sans', 'Sans Semibold', 'Arial', sans-serif;
8
- --font-promo: 'Museo Slab', 'Roboto Slab', 'Arial', sans-serif;
9
- --font-mono: 'Roboto Mono', 'Arial', sans-serif;
10
- --font-redacted: 'Redacted';
11
- --font-light: 'Sans Light', 'Arial', sans-serif;
4
+ --uui-font: var(--font-inter);
12
5
 
13
6
  --blue-0: #F0F7FC;
14
7
  --blue-50: #E1F4FA;
@@ -90,12 +83,12 @@
90
83
  --uui-secondary-70: var(--night700);
91
84
  --uui-secondary-contrast: var(--white);
92
85
 
93
- --uui-critical-5: var(--sun-50);
94
- --uui-critical-10: var(--sun-50);
95
- --uui-critical-20: var(--sun-100);
96
- --uui-critical-50: var(--sun-200);
97
- --uui-critical-60: var(--sun-250);
98
- --uui-critical-70: var(--sun-300);
86
+ --uui-critical-5: var(--fire-5);
87
+ --uui-critical-10: var(--fire-10);
88
+ --uui-critical-20: var(--fire-20);
89
+ --uui-critical-50: var(--fire-50);
90
+ --uui-critical-60: var(--fire-60);
91
+ --uui-critical-70: var(--fire-70);
99
92
  --uui-critical-contrast: var(--white);
100
93
 
101
94
 
@@ -153,9 +146,6 @@
153
146
  --uui-surface-main: var(--chromatic-0);
154
147
  --uui-surface-higher: var(--night100);
155
148
  --uui-surface-highest: var(--night200);
156
- --uui-surface-contrast: var(--night800);
157
- --uui-surface-contrast-low: var(--night800);
158
- --uui-surface-contrast-lower: var(--night900);
159
149
 
160
150
  --uui-divider: var(--chromatic-200);
161
151
  --uui-divider-light: var(--chromatic-150);
@@ -165,7 +155,6 @@
165
155
  --uui-text-secondary: var(--chromatic-300);
166
156
  --uui-text-tertiary: var(--chromatic-300);
167
157
  --uui-text-disabled: var(--chromatic-200);
168
- --uui-text-contrast: var(--chromatic-0);
169
158
 
170
159
  --uui-text-info: var(--uui-info-50);
171
160
  --uui-text-warning: var(--uui-warning-50);
@@ -187,46 +176,34 @@
187
176
  --uui-icon-active: var(--chromatic-500);
188
177
  --uui-icon-disabled: var(--chromatic-200);
189
178
 
190
- --uui-scroll_bars-bg: var(--chromatic-200);
191
- --uui-scroll_bars-bg-active: var(--chromatic-300);
192
-
193
179
  --uui-control-bg: var(--chromatic-0);
194
180
  --uui-control-bg-hover: var(--chromatic-300);
195
181
  --uui-control-bg-disabled: var(--chromatic-100);
196
- --uui-control-bg-readonly: var(--chromatic-100);
197
182
 
198
183
  --uui-control-border: var(--chromatic-200);
199
184
  --uui-control-border-hover: var(--chromatic-300);
185
+ --uui-control-border-focus: var(--uui-primary-50);
200
186
  --uui-control-border-disabled: var(--chromatic-150);
201
- --uui-control-border-readonly: var(--chromatic-150);
202
- --uui-control-border-checked: var(--uui-primary-50);
203
-
204
- --uui-control-label: var(--uui-text-primary);
205
- --uui-control-label-disabled: var(--uui-text-disabled);
206
187
 
207
188
  --uui-control-placeholder: var(--night600);
208
- --uui-control-placeholder-disabled: var(--night500);
189
+ --uui-control-placeholder-disabled: var(--night600);
209
190
 
210
191
  --uui-control-text: var(--chromatic-500);
211
- --uui-control-text-disabled: var(--chromatic-200);
192
+ --uui-control-text-disabled: var(--chromatic-300);
212
193
 
213
194
  --uui-control-icon: var(--chromatic-200);
214
195
  --uui-control-icon-disabled: var(--chromatic-200);
215
196
 
216
- --uui-control-checkbox-icon: var(--chromatic-0);
217
-
218
197
  --uui-outline-focus: #008ACE80;
219
198
 
220
- --uui-search_result-bg-highlight: #FFEDC9;
221
-
222
199
  --uui-skeleton: var(--chromatic-200);
223
- --uui-skeleton-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);
224
200
 
225
- --uui-border-radius: 3px;
226
201
  --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);
227
202
  --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%);
228
203
  --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%);
229
204
 
205
+ --uui-border-radius: 3px;
206
+
230
207
  /* core variables end */
231
208
 
232
209
  /* ------------------------------------ */
@@ -288,4 +265,80 @@
288
265
  --uui-color-70: var(--uui-warning-70);
289
266
  --uui-color-contrast: var(--uui-warning-contrast);
290
267
  }
291
- }
268
+
269
+ .uui-color-secondary {
270
+ --uui-color-5: var(--uui-secondary-5);
271
+ --uui-color-10: var(--uui-secondary-10);
272
+ --uui-color-20: var(--uui-secondary-20);
273
+ --uui-color-50: var(--uui-secondary-50);
274
+ --uui-color-60: var(--uui-secondary-60);
275
+ --uui-color-70: var(--uui-secondary-70);
276
+ --uui-color-contrast: var(--uui-secondary-contrast);
277
+ }
278
+
279
+
280
+
281
+ .uui-button {
282
+ --uui-border-radius: 8px;
283
+ --uui-btn-font: var(--font-museo-sans);
284
+ --uui-btn-font-weight: 700;
285
+
286
+ &.uui-color-gray {
287
+ --uui-color-5: var(--white);
288
+ --uui-color-10: var(--blue-50);
289
+ --uui-color-20: var(--uui-primary-5);
290
+ --uui-color-50: var(--chromatic-100);
291
+ --uui-color-60: var(--blue-50);
292
+ --uui-color-70: var(--blue-100);
293
+ --uui-color-contrast: var(--uui-text-primary);
294
+ }
295
+
296
+ &.uui-color-white {
297
+ --uui-color-5: var(--chromatic-0);
298
+ --uui-color-10: var(--blue-50);
299
+ --uui-color-20: var(--uui-primary-10);
300
+ --uui-color-50: var(--white);
301
+ --uui-color-60: var(--blue-50);
302
+ --uui-color-70: var(--blue-100);
303
+ --uui-color-contrast: var(--uui-text-primary);
304
+ }
305
+ }
306
+
307
+ .uui-filters-panel-item-toggler.uui-input-box {
308
+ --uui-filters_toggler-border: var(--uui-surface-main);
309
+ --uui-filters_toggler-border-hover: var(--blue-0);
310
+ --uui-filters_toggler-border-radius: 8px;
311
+ --uui-filters_toggler-bg: var(--uui-surface-main);
312
+ --uui-filters_toggler-bg-hover: var(--blue-0);
313
+ --uui-filters_toggler-text: var(--uui-text-secondary);
314
+ --uui-filters_toggler-label: var(--uui-text-brand);
315
+ --uui-filters_toggler-icon: var(--uui-icon);
316
+ --uui-filters_toggler-shadow: var(--uui-shadow-level-1);
317
+
318
+ --uui-filters_toggler-font: var(--uui-font);
319
+ --uui-filters_toggler-font-weight: 400;
320
+ }
321
+
322
+ .uui-main_menu-dropdown {
323
+ --uui-main_menu-dropdown-bg: var(--chromatic-0);
324
+ --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);
325
+ --uui-main_menu-dropdown-border-radius: 8px;
326
+ }
327
+
328
+ .uui-scroll-bars {
329
+ --uui-scroll_bars-bg: var(--chromatic-200);
330
+ --uui-scroll_bars-bg-active: var(--chromatic-300);
331
+ }
332
+
333
+ .uui-text-placeholder {
334
+ --uui-text_placeholder-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);
335
+ }
336
+
337
+ .uui-button {
338
+ &.uui-size-42, &.uui-size-48 {
339
+ :global(.uui-caption) {
340
+ font-family: var(--font-museo-sans);
341
+ }
342
+ }
343
+ }
344
+ }