@epam/assets 5.1.2-alpha.0 → 5.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 (10) hide show
  1. package/css/theme/theme_loveship.css +25 -8
  2. package/css/theme/theme_loveship.css.map +1 -1
  3. package/css/theme/theme_promo.css +22 -5
  4. package/css/theme/theme_promo.css.map +1 -1
  5. package/css/theme/theme_vanilla_thunder.css +7 -6
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  7. package/package.json +2 -2
  8. package/theme/theme_loveship.scss +39 -9
  9. package/theme/theme_promo.scss +36 -6
  10. package/theme/theme_vanilla_thunder.scss +11 -8
package/theme/theme_loveship.scss CHANGED
@@ -214,6 +214,8 @@
214
214
  --uui-icon-active: var(--night800);
215
215
  --uui-icon-disabled: var(--night500);
216
216
 
217
+ --uui-control-focus: #008ACE80;
218
+
217
219
  /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
218
220
 
219
221
  --uui-app-bg: var(--night100);
@@ -257,8 +259,6 @@
257
259
  --uui-scroll_bars-bg: var(--night400);
258
260
  --uui-scroll_bars-bg-active: var(--night600);
259
261
 
260
- --uui-button-bg-halftone: var(--white);
261
-
262
262
  --uui-control-bg: var(--white);
263
263
  --uui-control-bg-hover: var(--night600);
264
264
  --uui-control-bg-disabled: var(--night50);
@@ -305,6 +305,9 @@
305
305
  --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);
306
306
  --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);
307
307
 
308
+ /* Search results text highlighting */
309
+ --uui-search-result-highlight: #FFEDC9;
310
+
308
311
  /* core variables end */
309
312
 
310
313
  /* find below the not core variables that are used and highlight them in the code */
@@ -683,7 +686,7 @@
683
686
  --uui-notification-card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future
684
687
 
685
688
  /* Alert */
686
- --uui-alert-border-radius: 6px;
689
+ --uui-alert-border-radius: 3px;
687
690
 
688
691
  /* Panel */
689
692
 
@@ -735,6 +738,33 @@
735
738
 
736
739
  --uui-pagination-font: var(--font-regular);
737
740
 
741
+ /* DropSpot */
742
+
743
+ --uui-dropspot-border: var(--night400);
744
+ --uui-dropspot-border-dropstart: var(--uui-primary);
745
+ --uui-dropspot-background-dropstart: var(--uui-primary-lightest);
746
+ --uui-dropspot-link-color: var(--uui-primary);
747
+ --uui-dropspot-link-hover: var(--uui-primary-dark);
748
+ --uui-dropspot-icon: var(--uui-primary);
749
+
750
+ /* FileCard */
751
+
752
+ --uui-filecard-background: var(--night400);
753
+ --uui-filecard-icon-error: var(--uui-negative);
754
+ --uui-filecard-border-error: var(--uui-negative);
755
+ --uui-filecard-text-error: var(--uui-negative-darkest);
756
+ --uui-filecard-default: var(--uui-secondary);
757
+
758
+ /* IndeterminateBar */
759
+
760
+ --uui-indeterminate-bar-wrapper: var(--uui-secondary-light);
761
+ --uui-indeterminate-bar-background: var(--uui-primary);
762
+
763
+ /* ProgressBar */
764
+
765
+ --uui-progress-bar-wrapper: var(--uui-secondary-light);
766
+ --uui-progress-bar-background: var(--uui-primary);
767
+ --uui-progress-bar-label: var(--uui-surface-contrast-lower);
738
768
 
739
769
  /* ------------------------------------ */
740
770
 
@@ -760,7 +790,7 @@
760
790
  --uui-btn-bg: var(--uui-primary);
761
791
  --uui-btn-bg-hover: var(--uui-primary-dark);
762
792
  --uui-btn-bg-active: var(--uui-primary-darkest);
763
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
793
+ --uui-btn-bg-halftone: var(--white);
764
794
  --uui-btn-bg-halftone-hover: var(--uui-primary-lightest);
765
795
  --uui-btn-bg-halftone-active: var(--uui-primary-light);
766
796
  --uui-btn-border: var(--uui-primary);
@@ -777,7 +807,7 @@
777
807
  --uui-btn-bg: var(--uui-accent);
778
808
  --uui-btn-bg-hover: var(--uui-accent-dark);
779
809
  --uui-btn-bg-active: var(--uui-accent-darkest);
780
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
810
+ --uui-btn-bg-halftone: var(--white);
781
811
  --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
782
812
  --uui-btn-bg-halftone-active: var(--uui-accent-light);
783
813
  --uui-btn-border: var(--uui-accent);
@@ -794,7 +824,7 @@
794
824
  --uui-btn-bg: var(--sun);
795
825
  --uui-btn-bg-hover: var(--sun-dark);
796
826
  --uui-btn-bg-active: var(--sun-darkest);
797
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
827
+ --uui-btn-bg-halftone: var(--white);
798
828
  --uui-btn-bg-halftone-hover: var(--sun-lightest);
799
829
  --uui-btn-bg-halftone-active: var(--sun-light);
800
830
  --uui-btn-border: var(--sun);
@@ -811,7 +841,7 @@
811
841
  --uui-btn-bg: var(--uui-negative);
812
842
  --uui-btn-bg-hover: var(--uui-negative-dark);
813
843
  --uui-btn-bg-active: var(--uui-negative-darkest);
814
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
844
+ --uui-btn-bg-halftone: var(--white);
815
845
  --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
816
846
  --uui-btn-bg-halftone-active: var(--uui-negative-light);
817
847
  --uui-btn-border: var(--uui-negative);
@@ -831,7 +861,7 @@
831
861
  --uui-btn-bg: var(--uui-secondary);
832
862
  --uui-btn-bg-hover: var(--uui-secondary-dark);
833
863
  --uui-btn-bg-active: var(--uui-secondary-darkest);
834
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
864
+ --uui-btn-bg-halftone: var(--white);
835
865
  --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
836
866
  --uui-btn-bg-halftone-active: var(--uui-secondary-light);
837
867
  --uui-btn-border: var(--uui-secondary);
@@ -848,7 +878,7 @@
848
878
  --uui-btn-bg: var(--white);
849
879
  --uui-btn-bg-hover: var(--uui-color-white-800);
850
880
  --uui-btn-bg-active: var(--uui-color-white-900);
851
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
881
+ --uui-btn-bg-halftone: var(--white);
852
882
  --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
853
883
  --uui-btn-bg-halftone-active: var(--uui-secondary-light);
854
884
  --uui-btn-border: var(--white);
package/theme/theme_promo.scss CHANGED
@@ -173,6 +173,8 @@
173
173
  --uui-icon-active: var(--gray80);
174
174
  --uui-icon-disabled: var(--gray50);
175
175
 
176
+ --uui-control-focus: #008ACE80;
177
+
176
178
  /* Surfaces Figma - https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/Promo-aka-UUI4-(Components)?type=design&node-id=39112-321568&mode=dev */
177
179
 
178
180
  --uui-app-bg: var(--gray10);
@@ -216,8 +218,6 @@
216
218
  --uui-scroll_bars-bg: var(--gray40);
217
219
  --uui-scroll_bars-bg-active: var(--gray60);
218
220
 
219
- --uui-button-bg-halftone: var(--white);
220
-
221
221
  --uui-control-bg: var(--white);
222
222
  --uui-control-bg-hover: var(--gray60);
223
223
  --uui-control-bg-disabled: var(--gray5);
@@ -264,6 +264,9 @@
264
264
  --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);
265
265
  --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);
266
266
 
267
+ /* Search results text highlighting */
268
+ --uui-search-result-highlight: #FFEDC9;
269
+
267
270
  /* core variables end */
268
271
 
269
272
  /* find below the not core variables that are used and highlight them in the code */
@@ -694,6 +697,33 @@
694
697
 
695
698
  --uui-pagination-font: var(--font-regular);
696
699
 
700
+ /* DropSpot */
701
+
702
+ --uui-dropspot-border: var(--gray40);
703
+ --uui-dropspot-border-dropstart: var(--uui-primary);
704
+ --uui-dropspot-background-dropstart: var(--uui-primary-lightest);
705
+ --uui-dropspot-link-color: var(--uui-primary);
706
+ --uui-dropspot-link-hover: var(--uui-primary-dark);
707
+ --uui-dropspot-icon: var(--uui-primary);
708
+
709
+ /* FileCard */
710
+
711
+ --uui-filecard-background: var(--gray40);
712
+ --uui-filecard-icon-error: var(--uui-negative);
713
+ --uui-filecard-border-error: var(--uui-negative);
714
+ --uui-filecard-text-error: var(--uui-negative-darkest);
715
+ --uui-filecard-default: var(--uui-secondary);
716
+
717
+ /* IndeterminateBar */
718
+
719
+ --uui-indeterminate-bar-wrapper: var(--uui-secondary-light);
720
+ --uui-indeterminate-bar-background: var(--uui-primary);
721
+
722
+ /* ProgressBar */
723
+
724
+ --uui-progress-bar-wrapper: var(--uui-secondary-light);
725
+ --uui-progress-bar-background: var(--uui-primary);
726
+ --uui-progress-bar-label: var(--uui-surface-contrast-lower);
697
727
 
698
728
  /* ------------------------------------ */
699
729
 
@@ -719,7 +749,7 @@
719
749
  --uui-btn-bg: var(--uui-primary);
720
750
  --uui-btn-bg-hover: var(--uui-primary-dark);
721
751
  --uui-btn-bg-active: var(--uui-primary-darkest);
722
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
752
+ --uui-btn-bg-halftone: var(--white);
723
753
  --uui-btn-bg-halftone-hover: var(--uui-primary-lightest);
724
754
  --uui-btn-bg-halftone-active: var(--uui-primary-light);
725
755
  --uui-btn-border: var(--uui-primary);
@@ -736,7 +766,7 @@
736
766
  --uui-btn-bg: var(--uui-accent);
737
767
  --uui-btn-bg-hover: var(--uui-accent-dark);
738
768
  --uui-btn-bg-active: var(--uui-accent-darkest);
739
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
769
+ --uui-btn-bg-halftone: var(--white);
740
770
  --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
741
771
  --uui-btn-bg-halftone-active: var(--uui-accent-light);
742
772
  --uui-btn-border: var(--uui-accent);
@@ -753,7 +783,7 @@
753
783
  --uui-btn-bg: var(--uui-negative);
754
784
  --uui-btn-bg-hover: var(--uui-negative-dark);
755
785
  --uui-btn-bg-active: var(--uui-negative-darkest);
756
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
786
+ --uui-btn-bg-halftone: var(--white);
757
787
  --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
758
788
  --uui-btn-bg-halftone-active: var(--uui-negative-light);
759
789
  --uui-btn-border: var(--uui-negative);
@@ -772,7 +802,7 @@
772
802
  --uui-btn-bg: var(--uui-secondary);
773
803
  --uui-btn-bg-hover: var(--uui-secondary-dark);
774
804
  --uui-btn-bg-active: var(--uui-secondary-darkest);
775
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
805
+ --uui-btn-bg-halftone: var(--white);
776
806
  --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
777
807
  --uui-btn-bg-halftone-active: var(--uui-secondary-light);
778
808
  --uui-btn-border: var(--uui-secondary);
package/theme/theme_vanilla_thunder.scss CHANGED
@@ -130,6 +130,8 @@
130
130
  --uui-icon-active: var(--chromatic-500);
131
131
  --uui-icon-disabled: var(--chromatic-200);
132
132
 
133
+ --uui-control-focus: #008ACE80;
134
+
133
135
  /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
134
136
 
135
137
  --uui-app-bg: var(--chromatic-100);
@@ -173,8 +175,6 @@
173
175
  --uui-scroll_bars-bg: var(--chromatic-200);
174
176
  --uui-scroll_bars-bg-active: var(--chromatic-300);
175
177
 
176
- --uui-button-bg-halftone: var(--chromatic-0);
177
-
178
178
  --uui-control-bg: var(--chromatic-0);
179
179
  --uui-control-bg-hover: var(--chromatic-300);
180
180
  --uui-control-bg-disabled: var(--chromatic-100);
@@ -221,6 +221,10 @@
221
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%);
222
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%);
223
223
 
224
+
225
+ /* Search results text highlighting */
226
+ --uui-search-result-highlight: #FFEDC9;
227
+
224
228
  /* core variables end */
225
229
 
226
230
  /* find below the not core variables that are used and highlight them in the code */
@@ -695,7 +699,6 @@
695
699
  --uui-pagination-font: var(--font-inter);
696
700
  --uui-pagination-font-weight: 400;
697
701
 
698
-
699
702
  /* ------------------------------------ */
700
703
 
701
704
  .tooltip-contrast {
@@ -717,7 +720,7 @@
717
720
  --uui-btn-bg: var(--uui-primary);
718
721
  --uui-btn-bg-hover: var(--uui-primary-dark);
719
722
  --uui-btn-bg-active: var(--uui-primary-darkest);
720
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
723
+ --uui-btn-bg-halftone: var(--chromatic-0);
721
724
  --uui-btn-bg-halftone-hover: var(--blue-0);
722
725
  --uui-btn-bg-halftone-active: var(--uui-primary-lightest);
723
726
  --uui-btn-bg-disabled: var(--uui-disabled);
@@ -734,7 +737,7 @@
734
737
  --uui-btn-bg: var(--uui-accent);
735
738
  --uui-btn-bg-hover: var(--uui-accent-dark);
736
739
  --uui-btn-bg-active: var(--uui-accent-darkest);
737
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
740
+ --uui-btn-bg-halftone: var(--chromatic-0);
738
741
  --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
739
742
  --uui-btn-bg-halftone-active: var(--uui-accent-light);
740
743
  --uui-btn-border: var(--uui-accent);
@@ -751,7 +754,7 @@
751
754
  --uui-btn-bg: var(--uui-negative);
752
755
  --uui-btn-bg-hover: var(--uui-negative-dark);
753
756
  --uui-btn-bg-active: var(--uui-negative-darkest);
754
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
757
+ --uui-btn-bg-halftone: var(--chromatic-0);
755
758
  --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
756
759
  --uui-btn-bg-halftone-active: var(--uui-negative-light);
757
760
  --uui-btn-border: var(--uui-negative);
@@ -768,7 +771,7 @@
768
771
  --uui-btn-bg: var(--uui-secondary);
769
772
  --uui-btn-bg-hover: var(--uui-secondary-dark);
770
773
  --uui-btn-bg-active: var(--uui-secondary-darkest);
771
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
774
+ --uui-btn-bg-halftone: var(--chromatic-0);
772
775
  --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
773
776
  --uui-btn-bg-halftone-active: var(--uui-secondary-light);
774
777
  --uui-btn-border: var(--uui-secondary);
@@ -785,7 +788,7 @@
785
788
  --uui-btn-bg: var(--white);
786
789
  --uui-btn-bg-hover: var(--blue-50);
787
790
  --uui-btn-bg-active: var(--blue-100);
788
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
791
+ --uui-btn-bg-halftone: var(--chromatic-0);
789
792
  --uui-btn-bg-halftone-hover: var(--blue-50);
790
793
  --uui-btn-bg-halftone-active: var(--uui-primary-lightest);
791
794
  --uui-btn-bg-disabled: var(--chromatic-0);