@megafon/ui-core 7.8.0 → 8.0.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 (39) hide show
  1. package/dist/es/components/Badges/CounterBadge/CounterBadge.css +1 -1
  2. package/dist/es/components/Badges/NotificationBadge/NotificationBadge.css +1 -1
  3. package/dist/es/components/Badges/PromoBadge/PromoBadge.css +1 -1
  4. package/dist/es/components/Badges/PromoBadge/PromoBadge.d.ts +4 -4
  5. package/dist/es/components/Badges/PromoBadge/PromoBadge.js +4 -4
  6. package/dist/es/components/Button/Button.css +1 -1
  7. package/dist/es/components/Chips/Chip.css +1 -1
  8. package/dist/es/components/Modal/Modal.d.ts +4 -1
  9. package/dist/es/components/Modal/Modal.js +29 -3
  10. package/dist/es/components/Modal/_ModalContent/ModalContent.css +1 -1
  11. package/dist/es/components/Modal/_ModalContent/ModalContent.js +1 -1
  12. package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.js +9 -4
  13. package/dist/es/components/Modal/mocks.js +4 -0
  14. package/dist/es/components/Modal/types.d.ts +1 -0
  15. package/dist/es/components/Notification/Notification.css +1 -1
  16. package/dist/es/components/ScrollBar/ScrollBar.d.ts +2 -0
  17. package/dist/es/components/ScrollBar/ScrollBar.js +12 -3
  18. package/dist/es/components/Tooltip/Tooltip.css +1 -1
  19. package/dist/lib/components/Badges/CounterBadge/CounterBadge.css +1 -1
  20. package/dist/lib/components/Badges/NotificationBadge/NotificationBadge.css +1 -1
  21. package/dist/lib/components/Badges/PromoBadge/PromoBadge.css +1 -1
  22. package/dist/lib/components/Badges/PromoBadge/PromoBadge.d.ts +4 -4
  23. package/dist/lib/components/Badges/PromoBadge/PromoBadge.js +4 -4
  24. package/dist/lib/components/Button/Button.css +1 -1
  25. package/dist/lib/components/Chips/Chip.css +1 -1
  26. package/dist/lib/components/Modal/Modal.d.ts +4 -1
  27. package/dist/lib/components/Modal/Modal.js +29 -3
  28. package/dist/lib/components/Modal/_ModalContent/ModalContent.css +1 -1
  29. package/dist/lib/components/Modal/_ModalContent/ModalContent.js +1 -1
  30. package/dist/lib/components/Modal/_ModalMobileBottom/ModalMobileBottom.js +9 -4
  31. package/dist/lib/components/Modal/mocks.js +4 -0
  32. package/dist/lib/components/Modal/types.d.ts +1 -0
  33. package/dist/lib/components/Notification/Notification.css +1 -1
  34. package/dist/lib/components/ScrollBar/ScrollBar.d.ts +2 -0
  35. package/dist/lib/components/ScrollBar/ScrollBar.js +12 -3
  36. package/dist/lib/components/Tooltip/Tooltip.css +1 -1
  37. package/package.json +4 -4
  38. package/styles/colors.css +92 -58
  39. package/styles/colorsDark.css +39 -20
package/styles/colors.css CHANGED
@@ -10,28 +10,43 @@
10
10
  --spbSky3: #999999;
11
11
 
12
12
  /* Secondary Colors */
13
- --warmRedC: #EB5A40;
14
- --137C: #FFA717;
15
- --311C: #5BD9E5;
16
- --reflexBlue: #444189;
13
+ --lime: #AAFF00;
14
+ --sky: #3CB9FF;
15
+ --night: #1E64AA;
16
+ --berry: #AA5AFF;
17
+ --flamingo: #E64DE6;
17
18
 
18
19
  /* System Colors */
19
20
  --fury: #F62434;
21
+ --137C: #FFA717;
20
22
  --systemBlue: #34AAF2;
21
23
  --background: #FFFFFF;
22
24
  --buttonHoverGreen: #10E272;
23
- --buttonHoverGreenSoft: #B6FFDA;
24
25
  --buttonHoverPurple: #A500BF;
25
- --buttonHoverPurpleSoft: #FFD9FF;
26
26
  --buttonHoverGrey: #D6D6D6;
27
+ --buttonHoverGreenSoft: #B6FFDA;
28
+ --buttonHoverPurpleSoft: #FFD9FF;
27
29
  --buttonDown: #404D46;
28
30
  --overlay: #000000CC;
29
31
 
30
- /* Gradients */
31
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
32
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
33
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
34
- --gradientScrim: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 22.73%);
32
+ /* Gradients Basic*/
33
+ --gradientGreen1: linear-gradient(270deg, #AAFF00 0%, #00B956 50%);
34
+ --gradientGreen2: linear-gradient(90deg, #00B956 50%, #1EFA64 100%);
35
+ --gradientGreen3: linear-gradient(90deg, #00B956 50%, #00D1FF 100%);
36
+ --gradientPurple1: linear-gradient(95.39deg, #731982 55%, #AA5AFF 90%);
37
+ --gradientPurple2: linear-gradient(90deg, #731982 50%, #E64DE6 100%);
38
+ --gradientPurple3: linear-gradient(90deg, #731982 50:, #00D2FF 100%);
39
+ --gradientPurple4: linear-gradient(90deg, #731982 50%, #1B61AC 100%);
40
+
41
+ /* Gradients Secondary*/
42
+ --gradientLime: linear-gradient(90deg, #AAFF00 50%, #00D1FF 100%);
43
+ --gradientGrass: linear-gradient(90deg, #1EFA64 50%, #00D1FF 100%);
44
+ --gradientBerry1: linear-gradient(90deg, #AA5AFF 50%, #00D1FF 100%);
45
+ --gradientBerry2: linear-gradient(90deg, #AA5AFF 50%, #E64DE6 100%);
46
+
47
+
48
+ /* Gradients System*/
49
+ --gradientScrim: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 20%);
35
50
 
36
51
  /* Static */
37
52
  --stcWhite: #FFFFFF;
@@ -47,72 +62,91 @@
47
62
  --stcBlack20: #33333333;
48
63
  --stcBlack50: #33333380;
49
64
 
50
- /* Soft (new) */
65
+ /* Soft */
51
66
  --brandGreen80: #0CDC78;
52
67
  --brandGreen20: #DDFFEC;
53
68
  --brandPurple80: #AA67C1;
54
69
  --brandPurple20: #FFEEFF;
55
- --warmRedC80: #FF765D;
56
- --warmRedC20: #FFCFC7;
70
+ --night80: #4B83BB;
71
+ --night20: #D2E0EE;
72
+ --sky80: #63C7FF;
73
+ --sky20: #D8F1FF;
74
+ --flamingo80: #EB70EB;
75
+ --flamingo20: #FADBFA;
76
+ --lime80: #CAFF60;
77
+ --lime20: #E7FFB7;
78
+ --berry80: #BB7BFF;
79
+ --berry20: #CAFF60;
57
80
  --137C80: #FFB945;
58
81
  --137C20: #FFEDD1;
59
- --311C80: #62E3FF;
60
- --311C20: #E1FAFF;
61
- --reflexBlue80: #554FC9;
62
- --reflexBlue20: #EBEAFF;
63
82
  --fury80: #F8505D;
64
83
  --fury20: #FFC5C9;
65
84
  }
66
85
 
67
86
  [data-theme='dark'] {
68
- --brandGreen: #00b956;
87
+ --brandGreen: #00B956;
69
88
  --brandPurple: #731982;
70
89
  --base: #333333;
71
- --content: #ffffff;
72
- --spbSky0: #3d3d3d;
90
+ --content: #FFFFFF;
91
+ --spbSky0: #3D3D3D;
73
92
  --spbSky1: #454545;
74
93
  --spbSky2: #595959;
75
94
  --spbSky3: #999999;
76
- --warmRedC: #eb5a40;
77
- --137C: #ffa717;
78
- --311C: #5bd9e5;
79
- --reflexBlue: #444189;
80
- --fury: #f62434;
81
- --systemBlue: #34aaf2;
82
- --background: #1f1f1f;
83
- --buttonHoverGreen: #10e272;
84
- --buttonHoverGreenSoft: #355a46;
85
- --buttonHoverPurple: #a500bf;
86
- --buttonHoverPurpleSoft: #492b50;
87
- --buttonHoverGrey: #d6d6d6;
88
- --buttonDown: #404d46;
89
- --overlay: #000000cc;
90
- --gradientBasic: linear-gradient(90deg, #01873f 0%, #00b956 74%, #14cd6a 100%);
91
- --gradientVIP: linear-gradient(90deg, #5b1168 0%, #731982 74%, #821e93 100%);
92
- --gradientExclusive: linear-gradient(90deg, #2a2674 0%, #444189 74%, #504d93 100%);
93
- --stcWhite: #ffffff;
95
+ --lime: #AAFF00;
96
+ --sky: #3CB9FF;
97
+ --night: #1E64AA;
98
+ --berry: #AA5AFF;
99
+ --flamingo: #E64DE6;
100
+ --fury: #F62434;
101
+ --137C: #FFA717;
102
+ --systemBlue: #34AAF2;
103
+ --background: #1F1F1F;
104
+ --buttonHoverGreen: #10E272;
105
+ --buttonHoverPurple: #A500BF;
106
+ --buttonHoverGrey: #D6D6D6;
107
+ --buttonHoverGreenSoft: #B6FFDA;
108
+ --buttonHoverPurpleSoft: #FFD9FF;
109
+ --buttonDown: #404D46;
110
+ --overlay: #000000CC;
111
+ --gradientGreen1: linear-gradient(270deg, #AAFF00 0%, #00B956 50%);
112
+ --gradientGreen2: linear-gradient(90deg, #00B956 50%, #1EFA64 100%);
113
+ --gradientGreen3: linear-gradient(90deg, #00B956 50%, #00D1FF 100%);
114
+ --gradientPurple1: linear-gradient(95.39deg, #731982 55%, #AA5AFF 90%);
115
+ --gradientPurple2: linear-gradient(90deg, #731982 50%, #E64DE6 100%);
116
+ --gradientPurple3: linear-gradient(90deg, #731982 50:, #00D2FF 100%);
117
+ --gradientPurple4: linear-gradient(90deg, #731982 50%, #1B61AC 100%);
118
+ --gradientLime: linear-gradient(90deg, #AAFF00 50%, #00D1FF 100%);
119
+ --gradientGrass: linear-gradient(90deg, #1EFA64 50%, #00D1FF 100%);
120
+ --gradientBerry1: linear-gradient(90deg, #AA5AFF 50%, #00D1FF 100%);
121
+ --gradientBerry2: linear-gradient(90deg, #AA5AFF 50%, #E64DE6 100%);
122
+ --gradientScrim: linear-gradient(180deg, rgba(31, 31, 31, 0) 0%, #1F1F1F 22%);
123
+ --stcWhite: #FFFFFF;
94
124
  --stcBlack: #333333;
95
- --stcWhite5: #ffffff0d;
96
- --stcWhite10: #ffffff1a;
97
- --stcWhite20: #ffffff33;
98
- --stcWhite50: #ffffff80;
99
- --stcBlack5: #3333330d;
100
- --stcBlack10: #3333331a;
125
+ --stcWhite5: #FFFFFF0D;
126
+ --stcWhite10: #FFFFFF1A;
127
+ --stcWhite20: #FFFFFF33;
128
+ --stcWhite50: #FFFFFF80;
129
+ --stcBlack5: #3333330D;
130
+ --stcBlack10: #3333331A;
101
131
  --stcBlack20: #33333333;
102
132
  --stcBlack50: #33333380;
103
- --brandGreen80: #24804e;
133
+ --brandGreen80: #24804E;
104
134
  --brandGreen20: #314138;
105
- --brandPurple80: #5c2c64;
106
- --brandPurple20: #38273c;
107
- --warmRedC80: #b85b4a;
108
- --warmRedC20: #422a26;
109
- --137C80: #bc862e;
110
- --137C20: #4a3d27;
111
- --311C80: #5b9da3;
112
- --311C20: #35484a;
113
- --reflexBlue80: #4b497c;
114
- --reflexBlue20: #2f2f3c;
115
- --fury80: #ca3a43;
116
- --fury20: #442b2d;
135
+ --brandPurple80: #562C64;
136
+ --brandPurple20: #33273C;
137
+ --night80: #1E568E;
138
+ --night20: #1F2D3B;
139
+ --sky80: #369AD2;
140
+ --sky20: #253E4C;
141
+ --flamingo80: #BE43BE;
142
+ --flamingo20: #472847;
143
+ --lime80: #8ED206;
144
+ --lime20: #3B4C19;
145
+ --berry80: #8E4ED2;
146
+ --berry20: #3B2B4C;
147
+ --137C80: #BC862E;
148
+ --137C20: #4A3D27;
149
+ --fury80: #CA3A43;
150
+ --fury20: #442B2D;
117
151
  }
118
152
 
package/styles/colorsDark.css CHANGED
@@ -11,28 +11,43 @@
11
11
  --spbSky3: #999999;
12
12
 
13
13
  /* Secondary Colors */
14
- --warmRedC: #EB5A40;
15
- --137C: #FFA717;
16
- --311C: #5BD9E5;
17
- --reflexBlue: #444189;
14
+ --lime: #AAFF00;
15
+ --sky: #3CB9FF;
16
+ --night: #1E64AA;
17
+ --berry: #AA5AFF;
18
+ --flamingo: #E64DE6;
18
19
 
19
20
  /* System Colors */
20
21
  --fury: #F62434;
22
+ --137C: #FFA717;
21
23
  --systemBlue: #34AAF2;
22
24
  --background: #1F1F1F;
23
25
  --buttonHoverGreen: #10E272;
24
- --buttonHoverGreenSoft: #355A46;
25
26
  --buttonHoverPurple: #A500BF;
26
- --buttonHoverPurpleSoft: #492B50;
27
27
  --buttonHoverGrey: #D6D6D6;
28
+ --buttonHoverGreenSoft: #B6FFDA;
29
+ --buttonHoverPurpleSoft: #FFD9FF;
28
30
  --buttonDown: #404D46;
29
31
  --overlay: #000000CC;
30
32
 
31
- /* Gradients */
32
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
33
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
34
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
35
- --gradientScrim: linear-gradient(180deg, rgba(31, 31, 31, 0) 0%, #1F1F1F 22.73%);
33
+ /* Gradients Basic*/
34
+ --gradientGreen1: linear-gradient(270deg, #AAFF00 0%, #00B956 50%);
35
+ --gradientGreen2: linear-gradient(90deg, #00B956 50%, #1EFA64 100%);
36
+ --gradientGreen3: linear-gradient(90deg, #00B956 50%, #00D1FF 100%);
37
+ --gradientPurple1: linear-gradient(95.39deg, #731982 55%, #AA5AFF 90%);
38
+ --gradientPurple2: linear-gradient(90deg, #731982 50%, #E64DE6 100%);
39
+ --gradientPurple3: linear-gradient(90deg, #731982 50:, #00D2FF 100%);
40
+ --gradientPurple4: linear-gradient(90deg, #731982 50%, #1B61AC 100%);
41
+
42
+ /* Gradients Secondary*/
43
+ --gradientLime: linear-gradient(90deg, #AAFF00 50%, #00D1FF 100%);
44
+ --gradientGrass: linear-gradient(90deg, #1EFA64 50%, #00D1FF 100%);
45
+ --gradientBerry1: linear-gradient(90deg, #AA5AFF 50%, #00D1FF 100%);
46
+ --gradientBerry2: linear-gradient(90deg, #AA5AFF 50%, #E64DE6 100%);
47
+
48
+
49
+ /* Gradients System*/
50
+ --gradientScrim: linear-gradient(180deg, rgba(31, 31, 31, 0) 0%, #1F1F1F 22%);
36
51
 
37
52
  /* Static */
38
53
  --stcWhite: #FFFFFF;
@@ -48,19 +63,23 @@
48
63
  --stcBlack20: #33333333;
49
64
  --stcBlack50: #33333380;
50
65
 
51
- /* Soft (new) */
66
+ /* Soft */
52
67
  --brandGreen80: #24804E;
53
68
  --brandGreen20: #314138;
54
- --brandPurple80: #5C2C64;
55
- --brandPurple20: #38273C;
56
- --warmRedC80: #B85B4A;
57
- --warmRedC20: #422A26;
69
+ --brandPurple80: #562C64;
70
+ --brandPurple20: #33273C;
71
+ --night80: #1E568E;
72
+ --night20: #1F2D3B;
73
+ --sky80: #369AD2;
74
+ --sky20: #253E4C;
75
+ --flamingo80: #BE43BE;
76
+ --flamingo20: #472847;
77
+ --lime80: #8ED206;
78
+ --lime20: #3B4C19;
79
+ --berry80: #8E4ED2;
80
+ --berry20: #3B2B4C;
58
81
  --137C80: #BC862E;
59
82
  --137C20: #4A3D27;
60
- --311C80: #5B9DA3;
61
- --311C20: #35484A;
62
- --reflexBlue80: #4B497C;
63
- --reflexBlue20: #2F2F3C;
64
83
  --fury80: #CA3A43;
65
84
  --fury20: #442B2D;
66
85
  }