@megafon/ui-core 3.0.0-beta.0 → 3.0.0-beta.4

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 (92) hide show
  1. package/CHANGELOG.md +66 -0
  2. package/dist/es/colors/ColorItem/ColorItem.css +1 -55
  3. package/dist/es/colors/ColorItem/ColorItem.js +1 -1
  4. package/dist/es/colors/Colors.css +0 -55
  5. package/dist/es/colors/Colors.js +64 -4
  6. package/dist/es/colors/colorsData.js +78 -78
  7. package/dist/es/components/Accordion/Accordion.css +0 -54
  8. package/dist/es/components/Accordion/Accordion.d.ts +1 -1
  9. package/dist/es/components/Accordion/Accordion.js +10 -5
  10. package/dist/es/components/Banner/Banner.css +1 -55
  11. package/dist/es/components/Banner/BannerDot.css +0 -54
  12. package/dist/es/components/Button/Button.css +30 -78
  13. package/dist/es/components/Calendar/Calendar.css +0 -54
  14. package/dist/es/components/Calendar/components/Day/Day.css +1 -55
  15. package/dist/es/components/Calendar/components/Month/Month.css +0 -54
  16. package/dist/es/components/Calendar/components/Month/Month.js +21 -5
  17. package/dist/es/components/Carousel/Carousel.css +1 -55
  18. package/dist/es/components/Checkbox/Checkbox.css +3 -57
  19. package/dist/es/components/Checkbox/Checkbox.d.ts +3 -25
  20. package/dist/es/components/Checkbox/Checkbox.js +71 -89
  21. package/dist/es/components/ContentArea/ContentArea.css +4 -4
  22. package/dist/es/components/Grid/GridColumn.css +0 -54
  23. package/dist/es/components/Header/Header.css +2 -56
  24. package/dist/es/components/InputLabel/InputLabel.css +0 -54
  25. package/dist/es/components/List/List.css +2 -56
  26. package/dist/es/components/List/ListItem.css +0 -54
  27. package/dist/es/components/Logo/Logo.css +0 -54
  28. package/dist/es/components/NavArrow/NavArrow.css +1 -55
  29. package/dist/es/components/Notification/Notification.css +3 -3
  30. package/dist/es/components/Pagination/Pagination.css +0 -54
  31. package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.css +2 -2
  32. package/dist/es/components/Paragraph/Paragraph.css +2 -56
  33. package/dist/es/components/Preloader/Preloader.css +3 -57
  34. package/dist/es/components/RadioButton/RadioButton.css +1 -55
  35. package/dist/es/components/Search/Search.css +1 -55
  36. package/dist/es/components/Select/Select.css +2 -56
  37. package/dist/es/components/Select/Select.d.ts +1 -1
  38. package/dist/es/components/Switcher/Switcher.css +1 -55
  39. package/dist/es/components/Tabs/Tabs.css +10 -64
  40. package/dist/es/components/TextField/TextField.css +3 -57
  41. package/dist/es/components/TextLink/TextLink.css +1 -55
  42. package/dist/es/components/Tile/Tile.css +0 -54
  43. package/dist/es/components/Tooltip/Tooltip.css +0 -54
  44. package/dist/es/components/Tooltip/Tooltip.d.ts +3 -2
  45. package/dist/es/components/Tooltip/Tooltip.js +2 -9
  46. package/dist/lib/colors/ColorItem/ColorItem.css +1 -55
  47. package/dist/lib/colors/ColorItem/ColorItem.js +1 -1
  48. package/dist/lib/colors/Colors.css +0 -55
  49. package/dist/lib/colors/Colors.js +63 -4
  50. package/dist/lib/colors/colorsData.js +78 -78
  51. package/dist/lib/components/Accordion/Accordion.css +0 -54
  52. package/dist/lib/components/Accordion/Accordion.d.ts +1 -1
  53. package/dist/lib/components/Accordion/Accordion.js +9 -4
  54. package/dist/lib/components/Banner/Banner.css +1 -55
  55. package/dist/lib/components/Banner/BannerDot.css +0 -54
  56. package/dist/lib/components/Button/Button.css +30 -78
  57. package/dist/lib/components/Calendar/Calendar.css +0 -54
  58. package/dist/lib/components/Calendar/components/Day/Day.css +1 -55
  59. package/dist/lib/components/Calendar/components/Month/Month.css +0 -54
  60. package/dist/lib/components/Calendar/components/Month/Month.js +20 -4
  61. package/dist/lib/components/Carousel/Carousel.css +1 -55
  62. package/dist/lib/components/Checkbox/Checkbox.css +3 -57
  63. package/dist/lib/components/Checkbox/Checkbox.d.ts +3 -25
  64. package/dist/lib/components/Checkbox/Checkbox.js +76 -124
  65. package/dist/lib/components/ContentArea/ContentArea.css +4 -4
  66. package/dist/lib/components/Grid/GridColumn.css +0 -54
  67. package/dist/lib/components/Header/Header.css +2 -56
  68. package/dist/lib/components/InputLabel/InputLabel.css +0 -54
  69. package/dist/lib/components/List/List.css +2 -56
  70. package/dist/lib/components/List/ListItem.css +0 -54
  71. package/dist/lib/components/Logo/Logo.css +0 -54
  72. package/dist/lib/components/NavArrow/NavArrow.css +1 -55
  73. package/dist/lib/components/Notification/Notification.css +3 -3
  74. package/dist/lib/components/Pagination/Pagination.css +0 -54
  75. package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.css +2 -2
  76. package/dist/lib/components/Paragraph/Paragraph.css +2 -56
  77. package/dist/lib/components/Preloader/Preloader.css +3 -57
  78. package/dist/lib/components/RadioButton/RadioButton.css +1 -55
  79. package/dist/lib/components/Search/Search.css +1 -55
  80. package/dist/lib/components/Select/Select.css +2 -56
  81. package/dist/lib/components/Select/Select.d.ts +1 -1
  82. package/dist/lib/components/Switcher/Switcher.css +1 -55
  83. package/dist/lib/components/Tabs/Tabs.css +10 -64
  84. package/dist/lib/components/TextField/TextField.css +3 -57
  85. package/dist/lib/components/TextLink/TextLink.css +1 -55
  86. package/dist/lib/components/Tile/Tile.css +0 -54
  87. package/dist/lib/components/Tooltip/Tooltip.css +0 -54
  88. package/dist/lib/components/Tooltip/Tooltip.d.ts +3 -2
  89. package/dist/lib/components/Tooltip/Tooltip.js +1 -8
  90. package/package.json +4 -4
  91. package/{dist/es/styles → styles}/base.css +0 -0
  92. package/dist/lib/styles/base.css +0 -54
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-radio-button__input {
56
2
  position: absolute;
57
3
  top: 0;
@@ -100,7 +46,7 @@ h5 {
100
46
  background-color: var(--base);
101
47
  }
102
48
  .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
103
- border: 6px solid var(--green);
49
+ border: 6px solid var(--brandGreen);
104
50
  }
105
51
  .mfui-radio-button__label:hover .mfui-radio-button__custom-input:before {
106
52
  border-color: var(--buttonHoverGreen);
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-search {
56
2
  font-family: inherit;
57
3
  font-size: 15px;
@@ -221,5 +167,5 @@ h5 {
221
167
  color: var(--fury);
222
168
  }
223
169
  .mfui-search__notice_success {
224
- color: var(--green);
170
+ color: var(--brandGreen);
225
171
  }
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-select {
56
2
  font-family: inherit;
57
3
  font-size: 15px;
@@ -262,10 +208,10 @@ h5 {
262
208
  border-color: var(--content);
263
209
  }
264
210
  .mfui-select_valid .mfui-select__control {
265
- border-color: var(--green) !important;
211
+ border-color: var(--brandGreen) !important;
266
212
  }
267
213
  .mfui-select_valid .mfui-select__text {
268
- color: var(--green);
214
+ color: var(--brandGreen);
269
215
  }
270
216
  .mfui-select_error .mfui-select__control {
271
217
  border-color: var(--fury) !important;
@@ -132,7 +132,7 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
132
132
  handleClosed: () => void;
133
133
  handleClickOutside: (e: MouseEvent) => void;
134
134
  handleOpenDropdown: () => void;
135
- handleSelectItem: (e: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
135
+ handleSelectItem: (e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
136
136
  handleHoverItem: (index: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
137
137
  handleComboboxFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
138
138
  handleChangeCombobox: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-switcher {
56
2
  top: 22px;
57
3
  right: 28px;
@@ -78,7 +24,7 @@ h5 {
78
24
  transition: all 0.3s;
79
25
  }
80
26
  .mfui-switcher_checked {
81
- background-color: var(--green);
27
+ background-color: var(--brandGreen);
82
28
  }
83
29
  .mfui-switcher_checked .mfui-switcher__pointer {
84
30
  left: 18px;
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-tabs__swiper {
56
2
  font-family: inherit;
57
3
  font-size: 15px;
@@ -134,12 +80,12 @@ h5 {
134
80
  fill: var(--content);
135
81
  }
136
82
  .mfui-tabs__tab-inner:hover {
137
- color: var(--green);
138
- fill: var(--green);
83
+ color: var(--brandGreen);
84
+ fill: var(--brandGreen);
139
85
  }
140
86
  .mfui-tabs__tab-inner_current {
141
- color: var(--green);
142
- fill: var(--green);
87
+ color: var(--brandGreen);
88
+ fill: var(--brandGreen);
143
89
  }
144
90
  .mfui-tabs__tab-icon {
145
91
  width: 32px;
@@ -163,7 +109,7 @@ h5 {
163
109
  bottom: 0;
164
110
  left: 0;
165
111
  height: 2px;
166
- background-color: var(--green);
112
+ background-color: var(--brandGreen);
167
113
  -webkit-transition-duration: 0.3s;
168
114
  transition-duration: 0.3s;
169
115
  }
@@ -289,13 +235,13 @@ h5 {
289
235
  }
290
236
  .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:before {
291
237
  left: 0;
292
- background: -webkit-gradient(linear, left top, right top, from(var(--green)), to(transparent));
293
- background: linear-gradient(to right, var(--green), transparent);
238
+ background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), to(transparent));
239
+ background: linear-gradient(to right, var(--brandGreen), transparent);
294
240
  }
295
241
  .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:after {
296
242
  right: 0;
297
- background: -webkit-gradient(linear, right top, left top, from(var(--green)), to(transparent));
298
- background: linear-gradient(to left, var(--green), transparent);
243
+ background: -webkit-gradient(linear, right top, left top, from(var(--brandGreen)), to(transparent));
244
+ background: linear-gradient(to left, var(--brandGreen), transparent);
299
245
  }
300
246
  .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab {
301
247
  border-color: var(--stcBlack5);
@@ -317,5 +263,5 @@ h5 {
317
263
  }
318
264
  .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow {
319
265
  background-color: var(--stcWhite);
320
- fill: var(--green);
266
+ fill: var(--brandGreen);
321
267
  }
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-text-field {
56
2
  font-family: inherit;
57
3
  font-size: 15px;
@@ -185,10 +131,10 @@ h5 {
185
131
  }
186
132
  .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field-wrapper_no-touch:hover .mfui-text-field__field,
187
133
  .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field {
188
- border-color: var(--green);
134
+ border-color: var(--brandGreen);
189
135
  }
190
136
  .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__icon {
191
- fill: var(--green);
137
+ fill: var(--brandGreen);
192
138
  }
193
139
  .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
194
140
  .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field {
@@ -219,7 +165,7 @@ h5 {
219
165
  color: var(--fury);
220
166
  }
221
167
  .mfui-text-field__text_success {
222
- color: var(--green);
168
+ color: var(--brandGreen);
223
169
  }
224
170
  .mfui-text-field_disabled .mfui-text-field__field-wrapper {
225
171
  background-color: var(--spbSky1) !important;
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-text-link {
56
2
  font-family: inherit;
57
3
  font-size: inherit;
@@ -94,7 +40,7 @@ h5 {
94
40
  color: var(--systemBlue);
95
41
  }
96
42
  .mfui-text-link_color_green {
97
- color: var(--green);
43
+ color: var(--brandGreen);
98
44
  }
99
45
  .mfui-text-link_color_gray {
100
46
  color: var(--spbSky3);
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-tile {
56
2
  color: var(--content);
57
3
  background-color: var(--background);
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-tooltip {
56
2
  z-index: 100;
57
3
  visibility: hidden;
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import type { AccessibilityEventTypeNative } from '@megafon/ui-helpers';
2
3
  import './Tooltip.less';
3
4
  export declare const Placement: {
4
5
  readonly LEFT: "left";
@@ -46,9 +47,9 @@ export interface ITooltipProps {
46
47
  contentShadow?: string;
47
48
  };
48
49
  /** Обработчик на открытие */
49
- onOpen?: (e: MouseEvent) => void;
50
+ onOpen?: (e: AccessibilityEventTypeNative) => void;
50
51
  /** Обработчик на закрытие */
51
- onClose?: (e: MouseEvent | FocusEvent) => void;
52
+ onClose?: (e: AccessibilityEventTypeNative | FocusEvent) => void;
52
53
  }
53
54
  declare const Tooltip: React.FC<ITooltipProps>;
54
55
  export default Tooltip;
@@ -35,8 +35,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
35
35
 
36
36
  var TOOLTIP_PADDING_FOR_FLIP = 14;
37
37
  var MOUSE_KEY = 'mousedown';
38
- var KEYBOARD_ENTER_KEY = 'Enter';
39
- var KEYBOARD_NUMPAD_ENTER_KEY = 'NumpadEnter';
40
38
  var TOUCH_KEY = 'touchstart';
41
39
  var Placement = {
42
40
  LEFT: 'left',
@@ -45,11 +43,6 @@ var Placement = {
45
43
  BOTTOM: 'bottom'
46
44
  };
47
45
  exports.Placement = Placement;
48
-
49
- var checkEventIsClickOrEnterPress = function checkEventIsClickOrEnterPress(e) {
50
- return e.type === TOUCH_KEY || e.type === MOUSE_KEY || e.code === KEYBOARD_ENTER_KEY || e.code === KEYBOARD_NUMPAD_ENTER_KEY;
51
- };
52
-
53
46
  var Paddings = {
54
47
  NONE: 'none',
55
48
  SMALL: 'small',
@@ -169,7 +162,7 @@ var Tooltip = function Tooltip(_ref) {
169
162
  }
170
163
  }, [isOpen, onOpen, setIsOpen]);
171
164
  var handleClick = (0, _react.useCallback)(function (e) {
172
- if (!checkEventIsClickOrEnterPress(e)) {
165
+ if (!(0, _uiHelpers.checkNativeEventIsClickOrEnterPress)(e)) {
173
166
  return;
174
167
  }
175
168