@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.
- package/CHANGELOG.md +66 -0
- package/dist/es/colors/ColorItem/ColorItem.css +1 -55
- package/dist/es/colors/ColorItem/ColorItem.js +1 -1
- package/dist/es/colors/Colors.css +0 -55
- package/dist/es/colors/Colors.js +64 -4
- package/dist/es/colors/colorsData.js +78 -78
- package/dist/es/components/Accordion/Accordion.css +0 -54
- package/dist/es/components/Accordion/Accordion.d.ts +1 -1
- package/dist/es/components/Accordion/Accordion.js +10 -5
- package/dist/es/components/Banner/Banner.css +1 -55
- package/dist/es/components/Banner/BannerDot.css +0 -54
- package/dist/es/components/Button/Button.css +30 -78
- package/dist/es/components/Calendar/Calendar.css +0 -54
- package/dist/es/components/Calendar/components/Day/Day.css +1 -55
- package/dist/es/components/Calendar/components/Month/Month.css +0 -54
- package/dist/es/components/Calendar/components/Month/Month.js +21 -5
- package/dist/es/components/Carousel/Carousel.css +1 -55
- package/dist/es/components/Checkbox/Checkbox.css +3 -57
- package/dist/es/components/Checkbox/Checkbox.d.ts +3 -25
- package/dist/es/components/Checkbox/Checkbox.js +71 -89
- package/dist/es/components/ContentArea/ContentArea.css +4 -4
- package/dist/es/components/Grid/GridColumn.css +0 -54
- package/dist/es/components/Header/Header.css +2 -56
- package/dist/es/components/InputLabel/InputLabel.css +0 -54
- package/dist/es/components/List/List.css +2 -56
- package/dist/es/components/List/ListItem.css +0 -54
- package/dist/es/components/Logo/Logo.css +0 -54
- package/dist/es/components/NavArrow/NavArrow.css +1 -55
- package/dist/es/components/Notification/Notification.css +3 -3
- package/dist/es/components/Pagination/Pagination.css +0 -54
- package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.css +2 -2
- package/dist/es/components/Paragraph/Paragraph.css +2 -56
- package/dist/es/components/Preloader/Preloader.css +3 -57
- package/dist/es/components/RadioButton/RadioButton.css +1 -55
- package/dist/es/components/Search/Search.css +1 -55
- package/dist/es/components/Select/Select.css +2 -56
- package/dist/es/components/Select/Select.d.ts +1 -1
- package/dist/es/components/Switcher/Switcher.css +1 -55
- package/dist/es/components/Tabs/Tabs.css +10 -64
- package/dist/es/components/TextField/TextField.css +3 -57
- package/dist/es/components/TextLink/TextLink.css +1 -55
- package/dist/es/components/Tile/Tile.css +0 -54
- package/dist/es/components/Tooltip/Tooltip.css +0 -54
- package/dist/es/components/Tooltip/Tooltip.d.ts +3 -2
- package/dist/es/components/Tooltip/Tooltip.js +2 -9
- package/dist/lib/colors/ColorItem/ColorItem.css +1 -55
- package/dist/lib/colors/ColorItem/ColorItem.js +1 -1
- package/dist/lib/colors/Colors.css +0 -55
- package/dist/lib/colors/Colors.js +63 -4
- package/dist/lib/colors/colorsData.js +78 -78
- package/dist/lib/components/Accordion/Accordion.css +0 -54
- package/dist/lib/components/Accordion/Accordion.d.ts +1 -1
- package/dist/lib/components/Accordion/Accordion.js +9 -4
- package/dist/lib/components/Banner/Banner.css +1 -55
- package/dist/lib/components/Banner/BannerDot.css +0 -54
- package/dist/lib/components/Button/Button.css +30 -78
- package/dist/lib/components/Calendar/Calendar.css +0 -54
- package/dist/lib/components/Calendar/components/Day/Day.css +1 -55
- package/dist/lib/components/Calendar/components/Month/Month.css +0 -54
- package/dist/lib/components/Calendar/components/Month/Month.js +20 -4
- package/dist/lib/components/Carousel/Carousel.css +1 -55
- package/dist/lib/components/Checkbox/Checkbox.css +3 -57
- package/dist/lib/components/Checkbox/Checkbox.d.ts +3 -25
- package/dist/lib/components/Checkbox/Checkbox.js +76 -124
- package/dist/lib/components/ContentArea/ContentArea.css +4 -4
- package/dist/lib/components/Grid/GridColumn.css +0 -54
- package/dist/lib/components/Header/Header.css +2 -56
- package/dist/lib/components/InputLabel/InputLabel.css +0 -54
- package/dist/lib/components/List/List.css +2 -56
- package/dist/lib/components/List/ListItem.css +0 -54
- package/dist/lib/components/Logo/Logo.css +0 -54
- package/dist/lib/components/NavArrow/NavArrow.css +1 -55
- package/dist/lib/components/Notification/Notification.css +3 -3
- package/dist/lib/components/Pagination/Pagination.css +0 -54
- package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.css +2 -2
- package/dist/lib/components/Paragraph/Paragraph.css +2 -56
- package/dist/lib/components/Preloader/Preloader.css +3 -57
- package/dist/lib/components/RadioButton/RadioButton.css +1 -55
- package/dist/lib/components/Search/Search.css +1 -55
- package/dist/lib/components/Select/Select.css +2 -56
- package/dist/lib/components/Select/Select.d.ts +1 -1
- package/dist/lib/components/Switcher/Switcher.css +1 -55
- package/dist/lib/components/Tabs/Tabs.css +10 -64
- package/dist/lib/components/TextField/TextField.css +3 -57
- package/dist/lib/components/TextLink/TextLink.css +1 -55
- package/dist/lib/components/Tile/Tile.css +0 -54
- package/dist/lib/components/Tooltip/Tooltip.css +0 -54
- package/dist/lib/components/Tooltip/Tooltip.d.ts +3 -2
- package/dist/lib/components/Tooltip/Tooltip.js +1 -8
- package/package.json +4 -4
- package/{dist/es/styles → styles}/base.css +0 -0
- package/dist/lib/styles/base.css +0 -54
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,72 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [3.0.0-beta.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.3...@megafon/ui-core@3.0.0-beta.4) (2022-01-27)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @megafon/ui-core
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [3.0.0-beta.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.2...@megafon/ui-core@3.0.0-beta.3) (2022-01-24)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **accordion:** add focus on arrow after tab press, add open/close accordion after enter press ([9bfa0ac](https://github.com/MegafonWebLab/megafon-ui/commit/9bfa0ac5348ac25c0e37a4df51e26e2dabde02ba))
|
|
20
|
+
* **accordion:** change type of onClickAccordion prop ([9a150c5](https://github.com/MegafonWebLab/megafon-ui/commit/9a150c5de309547763a714b0eb630dfb386a8107))
|
|
21
|
+
* **calendar/month:** add focus on month arrows, add enter press handlers ([63f1e47](https://github.com/MegafonWebLab/megafon-ui/commit/63f1e4761e57ed6d56464b632dce9fd5e77655e1))
|
|
22
|
+
* **checkbox:** add focus on custom checkbox, add enter press handler ([83d111d](https://github.com/MegafonWebLab/megafon-ui/commit/83d111d0e4b41d3915bdd079bed4a7f9715ce7a5))
|
|
23
|
+
* **checkbox:** add isChecked state, change type of onChange prop ([f535caf](https://github.com/MegafonWebLab/megafon-ui/commit/f535caf39a02ab6793d3c63b654a1f1f3e9b2b93))
|
|
24
|
+
* **tooltip:** add check event function from ui-helpers ([a784ab4](https://github.com/MegafonWebLab/megafon-ui/commit/a784ab4f288124eb941fe8f52e46b2efc9aa2f82))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### BREAKING CHANGES
|
|
28
|
+
|
|
29
|
+
* **checkbox:** change type of onChange prop on (checked: boolean) => void
|
|
30
|
+
* **accordion:** remove parameter 'title' in onClickAccordion prop
|
|
31
|
+
* **tooltip:** change onOpen, onClose types; AccessibilityEventTypeNative from @megafon/ui-helpers
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
# [3.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.1...@megafon/ui-core@3.0.0-beta.2) (2022-01-21)
|
|
38
|
+
|
|
39
|
+
**Note:** Version bump only for package @megafon/ui-core
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
# [3.0.0-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.0...@megafon/ui-core@3.0.0-beta.1) (2022-01-20)
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
### Bug Fixes
|
|
49
|
+
|
|
50
|
+
* **colors:** fix colors component ([3061f7c](https://github.com/MegafonWebLab/megafon-ui/commit/3061f7c7b56d5baa32f109d7ce941bcc7e70c5b9))
|
|
51
|
+
* **colors:** remove unused classname modifiers ([d919cdc](https://github.com/MegafonWebLab/megafon-ui/commit/d919cdcf1fa79d60230fc85811518ded1c0537ad))
|
|
52
|
+
* **colors:** remove unused method ([2970295](https://github.com/MegafonWebLab/megafon-ui/commit/2970295df9053a4f54ed19d3d46deb07994844e0))
|
|
53
|
+
* **colors:** renabe green and purple to brandGreen and brandPurple to avoid postcss-colormin bug ([563d97c](https://github.com/MegafonWebLab/megafon-ui/commit/563d97c42900099415a6872f57b500b87aeed647))
|
|
54
|
+
* **colors:** update color values on colors page when user switches theme ([8552ff6](https://github.com/MegafonWebLab/megafon-ui/commit/8552ff69a66153ef890437ffc4dd2e50c31d6f2e))
|
|
55
|
+
* **less:** import base.less file through reference ([5a13aae](https://github.com/MegafonWebLab/megafon-ui/commit/5a13aaedec3a7fd09f77dcddfe437fda604f60a5))
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
### Features
|
|
59
|
+
|
|
60
|
+
* **styles:** export css version for base.less ([14aff17](https://github.com/MegafonWebLab/megafon-ui/commit/14aff17f8d3f77ec7beb2e3cb5c8a489ecd77e74))
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
### BREAKING CHANGES
|
|
64
|
+
|
|
65
|
+
* **colors:** green, green20, green80, purple, purple20 and purple80 colors now have 'brand'
|
|
66
|
+
prefix (e.g. brandGreen)
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
6
72
|
# [3.0.0-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.2.0...@megafon/ui-core@3.0.0-beta.0) (2022-01-19)
|
|
7
73
|
|
|
8
74
|
|
|
@@ -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
|
.color-item {
|
|
56
2
|
display: -webkit-box;
|
|
57
3
|
display: -ms-flexbox;
|
|
@@ -93,7 +39,7 @@ h5 {
|
|
|
93
39
|
line-height: 20px;
|
|
94
40
|
}
|
|
95
41
|
.color-item__code {
|
|
96
|
-
color: var(--
|
|
42
|
+
color: var(--spbSky3);
|
|
97
43
|
font-size: 12px;
|
|
98
44
|
line-height: 18px;
|
|
99
45
|
}
|
|
@@ -23,7 +23,7 @@ var ColorItem = function ColorItem(_ref) {
|
|
|
23
23
|
}), !!parentColorCode && /*#__PURE__*/React.createElement("div", {
|
|
24
24
|
className: cn('parent-color'),
|
|
25
25
|
style: {
|
|
26
|
-
background: parentColorCode
|
|
26
|
+
background: "var(--".concat(parentColorCode, ")")
|
|
27
27
|
}
|
|
28
28
|
})), /*#__PURE__*/React.createElement("span", {
|
|
29
29
|
className: cn('name')
|
|
@@ -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
|
.colors__inner {
|
|
56
2
|
margin: 0 -80px;
|
|
57
3
|
padding: 56px 80px 40px;
|
|
@@ -137,7 +83,6 @@ h5 {
|
|
|
137
83
|
.colors__description {
|
|
138
84
|
position: relative;
|
|
139
85
|
padding-top: 15px;
|
|
140
|
-
color: var(--content);
|
|
141
86
|
font-size: 12px;
|
|
142
87
|
line-height: 18px;
|
|
143
88
|
text-align: center;
|
package/dist/es/colors/Colors.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import "core-js/modules/es.symbol";
|
|
2
2
|
import "core-js/modules/es.symbol.description";
|
|
3
|
+
import "core-js/modules/es.array.includes";
|
|
3
4
|
import "core-js/modules/es.array.map";
|
|
4
5
|
import "core-js/modules/es.function.name";
|
|
6
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
7
|
import _extends from "@babel/runtime/helpers/extends";
|
|
6
8
|
import * as React from 'react';
|
|
7
9
|
import { cnCreate } from '@megafon/ui-helpers';
|
|
@@ -103,10 +105,68 @@ var basic = colorsData.basic,
|
|
|
103
105
|
gradientColors = colorsData.gradientColors,
|
|
104
106
|
staticColors = colorsData.staticColors,
|
|
105
107
|
staticOpacity = colorsData.staticOpacity,
|
|
106
|
-
soft = colorsData.soft;
|
|
108
|
+
soft = colorsData.soft; // TODO: refactor this
|
|
109
|
+
|
|
110
|
+
var getThemeFromLocalStorage = function getThemeFromLocalStorage() {
|
|
111
|
+
var theme = 'light';
|
|
112
|
+
|
|
113
|
+
if (typeof window !== 'undefined') {
|
|
114
|
+
var localStorageTheme = String(window.localStorage.getItem('theme'));
|
|
115
|
+
|
|
116
|
+
if (['light', 'dark'].includes(localStorageTheme)) {
|
|
117
|
+
theme = localStorageTheme;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
return theme;
|
|
122
|
+
};
|
|
123
|
+
|
|
107
124
|
var cn = cnCreate('colors');
|
|
108
125
|
|
|
109
126
|
var Colors = function Colors() {
|
|
127
|
+
var _React$useState = React.useState(getThemeFromLocalStorage()),
|
|
128
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
129
|
+
setCurrentTheme = _React$useState2[1];
|
|
130
|
+
|
|
131
|
+
var _React$useState3 = React.useState(false),
|
|
132
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
133
|
+
setLoad = _React$useState4[1];
|
|
134
|
+
|
|
135
|
+
React.useEffect(function () {
|
|
136
|
+
function load() {
|
|
137
|
+
setLoad(true);
|
|
138
|
+
document.removeEventListener('css-var-load', load);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
document.addEventListener('css-var-load', load);
|
|
142
|
+
}, []);
|
|
143
|
+
|
|
144
|
+
var getCurrentColorValue = function getCurrentColorValue(code) {
|
|
145
|
+
return typeof document !== 'undefined' ? document.documentElement.style.getPropertyValue("--".concat(code)) : '';
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
React.useEffect(function () {
|
|
149
|
+
// theme switcher from src/gatsby-theme-docz/components/SideBar/index.tsx
|
|
150
|
+
var themeSwitcher = document.querySelector('[data-current-theme]');
|
|
151
|
+
|
|
152
|
+
if (themeSwitcher) {
|
|
153
|
+
var themeSwitcherObserver = new MutationObserver(function (mutationsList) {
|
|
154
|
+
var data = mutationsList[0];
|
|
155
|
+
setCurrentTheme(data.oldValue === 'light' ? 'dark' : 'light');
|
|
156
|
+
});
|
|
157
|
+
var config = {
|
|
158
|
+
attributeOldValue: true,
|
|
159
|
+
attributeFilter: ['data-current-theme']
|
|
160
|
+
};
|
|
161
|
+
themeSwitcherObserver.observe(themeSwitcher, config);
|
|
162
|
+
return function () {
|
|
163
|
+
return themeSwitcherObserver.disconnect();
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
return undefined;
|
|
168
|
+
}, []);
|
|
169
|
+
|
|
110
170
|
var renderUnderline = function renderUnderline() {
|
|
111
171
|
return /*#__PURE__*/React.createElement("div", {
|
|
112
172
|
className: cn('underline')
|
|
@@ -142,7 +202,7 @@ var Colors = function Colors() {
|
|
|
142
202
|
return /*#__PURE__*/React.createElement(ColorItem, {
|
|
143
203
|
className: cn('item'),
|
|
144
204
|
colorName: name,
|
|
145
|
-
colorCode: code,
|
|
205
|
+
colorCode: getCurrentColorValue(code),
|
|
146
206
|
key: name,
|
|
147
207
|
border: border
|
|
148
208
|
});
|
|
@@ -172,7 +232,7 @@ var Colors = function Colors() {
|
|
|
172
232
|
return /*#__PURE__*/React.createElement(ColorItem, {
|
|
173
233
|
className: cn('item'),
|
|
174
234
|
colorName: name,
|
|
175
|
-
colorCode: code,
|
|
235
|
+
colorCode: getCurrentColorValue(code),
|
|
176
236
|
gradient: gradient,
|
|
177
237
|
key: name,
|
|
178
238
|
border: border
|
|
@@ -204,7 +264,7 @@ var Colors = function Colors() {
|
|
|
204
264
|
soft: true
|
|
205
265
|
}),
|
|
206
266
|
colorName: name,
|
|
207
|
-
colorCode: code,
|
|
267
|
+
colorCode: getCurrentColorValue(code),
|
|
208
268
|
parentColorCode: parentColor,
|
|
209
269
|
key: name
|
|
210
270
|
});
|
|
@@ -4,35 +4,35 @@ var colors = {
|
|
|
4
4
|
colorsGroup: [{
|
|
5
5
|
description: 'Основные цвета бренда',
|
|
6
6
|
colors: [{
|
|
7
|
-
name: 'Green',
|
|
8
|
-
code: '
|
|
7
|
+
name: 'Brand Green',
|
|
8
|
+
code: 'brandGreen'
|
|
9
9
|
}, {
|
|
10
|
-
name: 'Purple',
|
|
11
|
-
code: '
|
|
10
|
+
name: 'Brand Purple',
|
|
11
|
+
code: 'brandPurple'
|
|
12
12
|
}]
|
|
13
13
|
}, {
|
|
14
14
|
description: 'Градация оттенков серого',
|
|
15
15
|
colors: [{
|
|
16
16
|
name: 'Base',
|
|
17
|
-
code: '
|
|
18
|
-
border: '1px solid
|
|
17
|
+
code: 'base',
|
|
18
|
+
border: '1px solid var(--spbSky1)'
|
|
19
19
|
}, {
|
|
20
20
|
name: 'Content',
|
|
21
|
-
code: '
|
|
22
|
-
border: '1px solid
|
|
21
|
+
code: 'content',
|
|
22
|
+
border: '1px solid var(--spbSky1)'
|
|
23
23
|
}, {
|
|
24
24
|
name: 'Spb Sky 0',
|
|
25
|
-
code: '
|
|
26
|
-
border: '2px solid
|
|
25
|
+
code: 'spbSky0',
|
|
26
|
+
border: '2px solid var(--spbSky1)'
|
|
27
27
|
}, {
|
|
28
28
|
name: 'Spb Sky 1',
|
|
29
|
-
code: '
|
|
29
|
+
code: 'spbSky1'
|
|
30
30
|
}, {
|
|
31
31
|
name: 'Spb Sky 2',
|
|
32
|
-
code: '
|
|
32
|
+
code: 'spbSky2'
|
|
33
33
|
}, {
|
|
34
34
|
name: 'Spb Sky 3',
|
|
35
|
-
code: '
|
|
35
|
+
code: 'spbSky3'
|
|
36
36
|
}]
|
|
37
37
|
}]
|
|
38
38
|
},
|
|
@@ -42,16 +42,16 @@ var colors = {
|
|
|
42
42
|
description: 'Акцентные цвета',
|
|
43
43
|
colors: [{
|
|
44
44
|
name: 'Warm Red C',
|
|
45
|
-
code: '
|
|
45
|
+
code: 'warmRedC'
|
|
46
46
|
}, {
|
|
47
47
|
name: '137C',
|
|
48
|
-
code: '
|
|
48
|
+
code: '137C'
|
|
49
49
|
}, {
|
|
50
50
|
name: '311C',
|
|
51
|
-
code: '
|
|
51
|
+
code: '311C'
|
|
52
52
|
}, {
|
|
53
53
|
name: 'Reflex Blue',
|
|
54
|
-
code: '
|
|
54
|
+
code: 'reflexBlue'
|
|
55
55
|
}]
|
|
56
56
|
}
|
|
57
57
|
},
|
|
@@ -61,22 +61,22 @@ var colors = {
|
|
|
61
61
|
description: 'Системные цвета, используемые для отображения состояний интерфейсов и ссылок',
|
|
62
62
|
colors: [{
|
|
63
63
|
name: 'Fury',
|
|
64
|
-
code: '
|
|
64
|
+
code: 'fury'
|
|
65
65
|
}, {
|
|
66
66
|
name: 'System Blue',
|
|
67
|
-
code: '
|
|
67
|
+
code: 'systemBlue'
|
|
68
68
|
}, {
|
|
69
69
|
name: 'Background',
|
|
70
|
-
code: '
|
|
70
|
+
code: 'background'
|
|
71
71
|
}, {
|
|
72
72
|
name: 'Button Hov. G.',
|
|
73
|
-
code: '
|
|
73
|
+
code: 'buttonHoverGreen'
|
|
74
74
|
}, {
|
|
75
75
|
name: 'Button Hov. P.',
|
|
76
|
-
code: '
|
|
76
|
+
code: 'buttonhoverPurple'
|
|
77
77
|
}, {
|
|
78
78
|
name: 'Button Down',
|
|
79
|
-
code: '
|
|
79
|
+
code: 'buttonDown'
|
|
80
80
|
}]
|
|
81
81
|
}
|
|
82
82
|
},
|
|
@@ -86,15 +86,15 @@ var colors = {
|
|
|
86
86
|
description: 'Градиентные заливки ',
|
|
87
87
|
colors: [{
|
|
88
88
|
name: 'Basic',
|
|
89
|
-
code: '
|
|
89
|
+
code: 'gradientBasic',
|
|
90
90
|
gradient: 'linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%)'
|
|
91
91
|
}, {
|
|
92
92
|
name: 'VIP',
|
|
93
|
-
code: '
|
|
93
|
+
code: 'gradientVIP',
|
|
94
94
|
gradient: 'linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%)'
|
|
95
95
|
}, {
|
|
96
96
|
name: 'Exclusive',
|
|
97
|
-
code: '
|
|
97
|
+
code: 'gradientExclusive',
|
|
98
98
|
gradient: 'linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%)'
|
|
99
99
|
}]
|
|
100
100
|
}
|
|
@@ -105,12 +105,12 @@ var colors = {
|
|
|
105
105
|
description: 'Цвета не зависящие от темы',
|
|
106
106
|
colors: [{
|
|
107
107
|
name: 'STC White',
|
|
108
|
-
code: '
|
|
109
|
-
border: '1px solid
|
|
108
|
+
code: 'stcWhite',
|
|
109
|
+
border: '1px solid var(--spbSky1)'
|
|
110
110
|
}, {
|
|
111
111
|
name: 'STC Black',
|
|
112
|
-
code: '
|
|
113
|
-
border: '1px solid
|
|
112
|
+
code: 'stcBlack',
|
|
113
|
+
border: '1px solid var(--spbSky1)'
|
|
114
114
|
}]
|
|
115
115
|
}
|
|
116
116
|
},
|
|
@@ -120,36 +120,36 @@ var colors = {
|
|
|
120
120
|
description: 'Цвета c прозрачностью не зависящие от темы',
|
|
121
121
|
colors: [{
|
|
122
122
|
name: 'STC White 5%',
|
|
123
|
-
code: '
|
|
124
|
-
border: '1px solid
|
|
123
|
+
code: 'stcWhite5',
|
|
124
|
+
border: '1px solid var(--spbSky1)'
|
|
125
125
|
}, {
|
|
126
126
|
name: 'STC White 10%',
|
|
127
|
-
code: '
|
|
128
|
-
border: '1px solid
|
|
127
|
+
code: 'stcWhite10',
|
|
128
|
+
border: '1px solid var(--spbSky1)'
|
|
129
129
|
}, {
|
|
130
130
|
name: 'STC White 20%',
|
|
131
|
-
code: '
|
|
132
|
-
border: '1px solid
|
|
131
|
+
code: 'stcWhite20',
|
|
132
|
+
border: '1px solid var(--spbSky1)'
|
|
133
133
|
}, {
|
|
134
134
|
name: 'STC White 50%',
|
|
135
|
-
code: '
|
|
136
|
-
border: '1px solid
|
|
135
|
+
code: 'stcWhite50',
|
|
136
|
+
border: '1px solid var(--spbSky1)'
|
|
137
137
|
}, {
|
|
138
138
|
name: 'STC Black 5%',
|
|
139
|
-
code: '
|
|
140
|
-
border: '1px solid
|
|
139
|
+
code: 'stcBlack5',
|
|
140
|
+
border: '1px solid var(--spbSky1)'
|
|
141
141
|
}, {
|
|
142
142
|
name: 'STC Black 10%',
|
|
143
|
-
code: '
|
|
144
|
-
border: '1px solid
|
|
143
|
+
code: 'stcBlack10',
|
|
144
|
+
border: '1px solid var(--spbSky1)'
|
|
145
145
|
}, {
|
|
146
146
|
name: 'STC Black 20%',
|
|
147
|
-
code: '
|
|
148
|
-
border: '1px solid
|
|
147
|
+
code: 'stcBlack20',
|
|
148
|
+
border: '1px solid var(--spbSky1)'
|
|
149
149
|
}, {
|
|
150
150
|
name: 'STC Black 50%',
|
|
151
|
-
code: '
|
|
152
|
-
border: '1px solid
|
|
151
|
+
code: 'stcBlack50',
|
|
152
|
+
border: '1px solid var(--spbSky1)'
|
|
153
153
|
}]
|
|
154
154
|
}
|
|
155
155
|
},
|
|
@@ -158,61 +158,61 @@ var colors = {
|
|
|
158
158
|
colorsList: {
|
|
159
159
|
description: 'Дополнительная (вспомогательная) палитра, образованная от Basic, Secondary и System цветов. Каждый цвет из Soft палитры работает в паре с его родительским цветом.',
|
|
160
160
|
colors: [{
|
|
161
|
-
name: 'Green 80',
|
|
162
|
-
code: '
|
|
163
|
-
parentColor: '
|
|
161
|
+
name: 'Brand Green 80',
|
|
162
|
+
code: 'brandGreen80',
|
|
163
|
+
parentColor: 'green'
|
|
164
164
|
}, {
|
|
165
|
-
name: 'Purple 80',
|
|
166
|
-
code: '
|
|
167
|
-
parentColor: '
|
|
165
|
+
name: 'Brand Purple 80',
|
|
166
|
+
code: 'brandPurple80',
|
|
167
|
+
parentColor: 'purple'
|
|
168
168
|
}, {
|
|
169
169
|
name: 'Warm Red C 80',
|
|
170
|
-
code: '
|
|
171
|
-
parentColor: '
|
|
170
|
+
code: 'warmRedC80',
|
|
171
|
+
parentColor: 'warmRedC'
|
|
172
172
|
}, {
|
|
173
173
|
name: '137C 80',
|
|
174
|
-
code: '
|
|
175
|
-
parentColor: '
|
|
174
|
+
code: '137C80',
|
|
175
|
+
parentColor: '137C'
|
|
176
176
|
}, {
|
|
177
177
|
name: '311C 80',
|
|
178
|
-
code: '
|
|
179
|
-
parentColor: '
|
|
178
|
+
code: '311C80',
|
|
179
|
+
parentColor: '311C'
|
|
180
180
|
}, {
|
|
181
181
|
name: 'Reflex Blue 80',
|
|
182
|
-
code: '
|
|
183
|
-
parentColor: '
|
|
182
|
+
code: 'reflexBlue80',
|
|
183
|
+
parentColor: 'reflexBlue'
|
|
184
184
|
}, {
|
|
185
185
|
name: 'Fury 80',
|
|
186
|
-
code: '
|
|
187
|
-
parentColor: '
|
|
186
|
+
code: 'fury80',
|
|
187
|
+
parentColor: 'fury'
|
|
188
188
|
}, {
|
|
189
|
-
name: 'Green 20',
|
|
190
|
-
code: '
|
|
191
|
-
parentColor: '
|
|
189
|
+
name: 'Brand Green 20',
|
|
190
|
+
code: 'brandGreen20',
|
|
191
|
+
parentColor: 'green'
|
|
192
192
|
}, {
|
|
193
|
-
name: 'Purple 20',
|
|
194
|
-
code: '
|
|
195
|
-
parentColor: '
|
|
193
|
+
name: 'Brand Purple 20',
|
|
194
|
+
code: 'brandPurple20',
|
|
195
|
+
parentColor: 'purple'
|
|
196
196
|
}, {
|
|
197
197
|
name: 'Warm Red C 20',
|
|
198
|
-
code: '
|
|
199
|
-
parentColor: '
|
|
198
|
+
code: 'warmRedC20',
|
|
199
|
+
parentColor: 'warmRedC'
|
|
200
200
|
}, {
|
|
201
201
|
name: '137C 20',
|
|
202
|
-
code: '
|
|
203
|
-
parentColor: '
|
|
202
|
+
code: '137C20',
|
|
203
|
+
parentColor: '137C'
|
|
204
204
|
}, {
|
|
205
205
|
name: '311C 20',
|
|
206
|
-
code: '
|
|
207
|
-
parentColor: '
|
|
206
|
+
code: '311C20',
|
|
207
|
+
parentColor: '311C'
|
|
208
208
|
}, {
|
|
209
209
|
name: 'Reflex Blue 20',
|
|
210
|
-
code: '
|
|
211
|
-
parentColor: '
|
|
210
|
+
code: 'reflexBlue20',
|
|
211
|
+
parentColor: 'reflexBlue'
|
|
212
212
|
}, {
|
|
213
213
|
name: 'Fury 20',
|
|
214
|
-
code: '
|
|
215
|
-
parentColor: '
|
|
214
|
+
code: 'fury20',
|
|
215
|
+
parentColor: 'fury'
|
|
216
216
|
}]
|
|
217
217
|
}
|
|
218
218
|
}
|
|
@@ -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-accordion {
|
|
56
2
|
border-top: 1px solid var(--spbSky2);
|
|
57
3
|
border-bottom: 1px solid var(--spbSky2);
|
|
@@ -20,7 +20,7 @@ export interface IAccordionProps extends IFilterDataAttrs {
|
|
|
20
20
|
titleWrap?: string;
|
|
21
21
|
};
|
|
22
22
|
/** Обработчик клика */
|
|
23
|
-
onClickAccordion?: (isOpened: boolean
|
|
23
|
+
onClickAccordion?: (isOpened: boolean) => void;
|
|
24
24
|
}
|
|
25
25
|
declare const Accordion: React.FC<IAccordionProps>;
|
|
26
26
|
export default Accordion;
|