@megafon/ui-core 3.4.0 → 3.5.2
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 +39 -0
- package/dist/es/colors/Colors.css +5 -1
- package/dist/es/colors/Colors.js +103 -4
- package/dist/es/colors/colorsData.js +21 -19
- package/dist/es/components/Badges/components/PromoBadge/PromoBadge.css +1 -1
- package/dist/es/components/Logo/Logo.css +5 -0
- package/dist/es/components/Notification/Notification.css +3 -3
- package/dist/es/components/Search/Search.js +12 -0
- package/dist/es/components/Select/Select.js +5 -22
- package/dist/es/components/Switcher/Switcher.css +101 -28
- package/dist/es/components/Switcher/Switcher.d.ts +8 -1
- package/dist/es/components/Switcher/Switcher.js +39 -10
- package/dist/es/components/Tile/Tile.css +1 -1
- package/dist/lib/colors/Colors.css +5 -1
- package/dist/lib/colors/Colors.js +103 -4
- package/dist/lib/colors/colorsData.js +21 -19
- package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css +1 -1
- package/dist/lib/components/Logo/Logo.css +5 -0
- package/dist/lib/components/Notification/Notification.css +3 -3
- package/dist/lib/components/Search/Search.js +14 -0
- package/dist/lib/components/Select/Select.js +5 -22
- package/dist/lib/components/Switcher/Switcher.css +101 -28
- package/dist/lib/components/Switcher/Switcher.d.ts +8 -1
- package/dist/lib/components/Switcher/Switcher.js +38 -9
- package/dist/lib/components/Tile/Tile.css +1 -1
- package/package.json +4 -4
- package/styles/colorsDark.css +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,45 @@
|
|
|
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.5.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.1...@megafon/ui-core@3.5.2) (2022-04-13)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @megafon/ui-core
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [3.5.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.5.0...@megafon/ui-core@3.5.1) (2022-04-11)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **colors:** fix colors page; correct values for soft colors in dark theme ([81d1801](https://github.com/MegafonWebLab/megafon-ui/commit/81d18012234fa52ce0fdbff0de8de7dd2d6de8f5))
|
|
20
|
+
* **colors:** fix colors usage in components: Notification, Preloader, Tile and Card ([96d0eef](https://github.com/MegafonWebLab/megafon-ui/commit/96d0eef51458b35c5b69c1677ec6f4a22f7f130d))
|
|
21
|
+
* **search:** scroll highlighted item into users view ([5105863](https://github.com/MegafonWebLab/megafon-ui/commit/51058637a78598773e945b1f21eecbc319d7df78))
|
|
22
|
+
* **select:** scroll highlighted item into users view ([50860e8](https://github.com/MegafonWebLab/megafon-ui/commit/50860e82a557cd6dd2e89448740a13b6e25c8261))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
# [3.5.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.4.0...@megafon/ui-core@3.5.0) (2022-04-05)
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Bug Fixes
|
|
32
|
+
|
|
33
|
+
* **logo:** fix img align ([51c81d9](https://github.com/MegafonWebLab/megafon-ui/commit/51c81d9e2edb9cf6b5d245ebb60d8a74f1e8bc1d))
|
|
34
|
+
* **promobadge:** fixed font color for dark theme ([88781d8](https://github.com/MegafonWebLab/megafon-ui/commit/88781d843e25028a5836b030861939cdf019760d))
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
### Features
|
|
38
|
+
|
|
39
|
+
* **switcher:** new props and colors ([adb5f34](https://github.com/MegafonWebLab/megafon-ui/commit/adb5f34e3e0949109445c75dc188d37171637af9))
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
6
45
|
# [3.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.3.1...@megafon/ui-core@3.4.0) (2022-03-21)
|
|
7
46
|
|
|
8
47
|
|
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
.colors__title {
|
|
19
19
|
margin-bottom: 8px;
|
|
20
20
|
}
|
|
21
|
+
.colors__title-note {
|
|
22
|
+
margin-bottom: 60px;
|
|
23
|
+
}
|
|
21
24
|
.colors__group-title {
|
|
22
25
|
margin-bottom: 24px;
|
|
23
26
|
}
|
|
@@ -82,7 +85,8 @@
|
|
|
82
85
|
}
|
|
83
86
|
.colors__description {
|
|
84
87
|
position: relative;
|
|
85
|
-
padding-top:
|
|
88
|
+
padding-top: 11px;
|
|
89
|
+
color: var(--spbSky3);
|
|
86
90
|
font-size: 12px;
|
|
87
91
|
line-height: 18px;
|
|
88
92
|
text-align: center;
|
package/dist/es/colors/Colors.js
CHANGED
|
@@ -16,7 +16,103 @@ import ColorItem from "./ColorItem/ColorItem";
|
|
|
16
16
|
import colorsData from "./colorsData";
|
|
17
17
|
import "./Colors.css";
|
|
18
18
|
|
|
19
|
-
var
|
|
19
|
+
var DiagramDark = function DiagramDark(props) {
|
|
20
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
21
|
+
viewBox: "0 0 260 261",
|
|
22
|
+
fill: "none"
|
|
23
|
+
}, props), /*#__PURE__*/React.createElement("mask", {
|
|
24
|
+
id: "DiagramDark__a",
|
|
25
|
+
style: {
|
|
26
|
+
maskType: 'alpha'
|
|
27
|
+
},
|
|
28
|
+
maskUnits: "userSpaceOnUse",
|
|
29
|
+
x: 0,
|
|
30
|
+
y: 0,
|
|
31
|
+
width: 260,
|
|
32
|
+
height: 261
|
|
33
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
34
|
+
fillRule: "evenodd",
|
|
35
|
+
clipRule: "evenodd",
|
|
36
|
+
d: "M130.491 260.678c71.526 0 129.509-58.19 129.509-129.972C260 58.925 202.017.734 130.491.734 58.965.734.981 58.924.981 130.706c0 71.782 57.984 129.972 129.51 129.972zm.216-22.279c59.477 0 107.693-48.215 107.693-107.693 0-59.477-48.216-107.693-107.693-107.693-59.478 0-107.694 48.216-107.694 107.693 0 59.478 48.216 107.693 107.694 107.693z",
|
|
37
|
+
fill: "#333"
|
|
38
|
+
})), /*#__PURE__*/React.createElement("g", {
|
|
39
|
+
mask: "url(#DiagramDark__a)"
|
|
40
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
41
|
+
d: "M75.979 13.036a129.498 129.498 0 01113.346 2.095L130.5 130.499 75.979 13.036z",
|
|
42
|
+
fill: "#314138"
|
|
43
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
44
|
+
d: "M189.067 15a129.507 129.507 0 0167.808 87.224L130.5 130.499l58.567-115.5z",
|
|
45
|
+
fill: "#35484A"
|
|
46
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
47
|
+
d: "M256.835 102.042a129.508 129.508 0 01-25.217 109.361L130.5 130.499l126.335-28.457z",
|
|
48
|
+
fill: "#2F2F3C"
|
|
49
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
50
|
+
d: "M231.817 211.153a129.497 129.497 0 01-101.043 48.846l-.274-129.5 101.317 80.654z",
|
|
51
|
+
fill: "#38273C"
|
|
52
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
53
|
+
d: "M130.5 259.999a129.505 129.505 0 01-101.147-48.632L130.5 130.499v129.5z",
|
|
54
|
+
fill: "#442B2D"
|
|
55
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
56
|
+
d: "M29.086 211.032A129.5 129.5 0 014.271 101.579l126.229 28.92-101.414 80.533z",
|
|
57
|
+
fill: "#422A26"
|
|
58
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
59
|
+
d: "M4.377 101.12a129.5 129.5 0 0171.422-88L130.5 130.498 4.377 101.12z",
|
|
60
|
+
fill: "#4A3D27"
|
|
61
|
+
})), /*#__PURE__*/React.createElement("path", {
|
|
62
|
+
d: "M85.367 33.023a107.695 107.695 0 0194.259 1.742l-48.919 95.941-45.34-97.683z",
|
|
63
|
+
fill: "#24804E"
|
|
64
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
65
|
+
d: "M179.411 34.656a107.695 107.695 0 0156.391 72.536l-105.095 23.514 48.704-96.05z",
|
|
66
|
+
fill: "#5B9DA3"
|
|
67
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
68
|
+
d: "M235.768 107.041a107.686 107.686 0 01-20.971 90.946l-84.09-67.281 105.061-23.665z",
|
|
69
|
+
fill: "#4B497C"
|
|
70
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
71
|
+
d: "M214.963 197.779a107.694 107.694 0 01-84.028 40.62l-.228-107.693 84.256 67.073z",
|
|
72
|
+
fill: "#5C2C64"
|
|
73
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
74
|
+
d: "M130.707 238.4a107.694 107.694 0 01-84.115-40.443l84.115-67.251V238.4z",
|
|
75
|
+
fill: "#CA3A43"
|
|
76
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
77
|
+
d: "M46.357 197.664a107.692 107.692 0 01-20.637-91.022l104.973 24.051-84.336 66.971z",
|
|
78
|
+
fill: "#B85B4A"
|
|
79
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
80
|
+
d: "M25.821 106.274a107.694 107.694 0 0159.396-73.182l45.49 97.614-104.886-24.432z",
|
|
81
|
+
fill: "#BC862E"
|
|
82
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
83
|
+
d: "M94.146 52.187a86.329 86.329 0 0175.559 1.397l-39.214 76.906-36.345-78.303z",
|
|
84
|
+
fill: "#00B956"
|
|
85
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
86
|
+
d: "M169.533 53.496a86.332 86.332 0 0145.202 58.146l-84.244 18.848 39.042-76.994z",
|
|
87
|
+
fill: "#5BD9E5"
|
|
88
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
89
|
+
d: "M214.708 111.52a86.325 86.325 0 01-16.81 72.903l-67.407-53.933 84.217-18.97z",
|
|
90
|
+
fill: "#444189"
|
|
91
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
92
|
+
d: "M198.031 184.256a86.331 86.331 0 01-67.358 32.561l-.182-86.327 67.54 53.766z",
|
|
93
|
+
fill: "#731982"
|
|
94
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
95
|
+
d: "M130.491 216.818a86.327 86.327 0 01-67.427-32.419l67.427-53.909v86.328z",
|
|
96
|
+
fill: "#F62434"
|
|
97
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
98
|
+
d: "M62.886 184.175a86.324 86.324 0 01-16.542-72.964l84.147 19.279-67.605 53.685z",
|
|
99
|
+
fill: "#EB5A40"
|
|
100
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
101
|
+
d: "M46.414 110.906a86.328 86.328 0 0147.612-58.664l36.465 78.248-84.077-19.584z",
|
|
102
|
+
fill: "#FFA717"
|
|
103
|
+
}), /*#__PURE__*/React.createElement("ellipse", {
|
|
104
|
+
cx: 130.491,
|
|
105
|
+
cy: 130.706,
|
|
106
|
+
rx: 60.429,
|
|
107
|
+
ry: 60.645,
|
|
108
|
+
fill: "#333"
|
|
109
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
110
|
+
d: "M125.234 15h3.832v-.569h-2.76l1.576-1.536c.704-.688 1.152-1.376 1.152-2.08 0-.984-.672-1.608-1.728-1.608-1.088 0-1.768.712-1.856 1.832h.648c.112-.896.544-1.272 1.208-1.272.648 0 1.024.384 1.024 1.024 0 .584-.304 1.104-.824 1.656l-2.272 2.392V15zm6.991.071c1.408 0 2.216-1.12 2.216-2.784v-.32c0-1.632-.824-2.76-2.232-2.76-1.4 0-2.256 1.088-2.256 2.776v.32c0 1.664.904 2.768 2.272 2.768zm0-.576c-.952 0-1.56-.752-1.56-2.2v-.32c0-1.408.576-2.208 1.544-2.208.968 0 1.528.864 1.528 2.192v.32c0 1.448-.512 2.216-1.512 2.216zM243.602 154.771l-.992 3.701.548.147.715-2.666 1.076 1.92c.482.858 1.031 1.469 1.711 1.651.95.255 1.727-.233 2-1.253.282-1.051-.23-1.892-1.289-2.267l-.168.626c.837.34 1.088.855.916 1.496-.168.626-.636.89-1.254.724-.564-.151-.988-.579-1.386-1.224l-1.723-2.814-.154-.041zm-1.879 6.734c-.365 1.36.508 2.43 2.115 2.861l.309.082c1.577.423 2.88-.081 3.244-1.441.362-1.352-.467-2.461-2.097-2.898l-.31-.083c-1.607-.43-2.907.157-3.261 1.479zm.556.149c.247-.92 1.13-1.313 2.529-.938l.309.083c1.36.364 1.984 1.128 1.733 2.063-.25.935-1.23 1.252-2.513.908l-.309-.082c-1.398-.375-2.008-1.068-1.749-2.034zM188.685 229.41l-3.369 1.826.271.5 2.426-1.316-.653 2.101c-.291.941-.357 1.759-.021 2.378.469.865 1.357 1.093 2.285.59.957-.519 1.215-1.469.759-2.495l-.57.309c.329.841.128 1.377-.456 1.694-.569.309-1.083.15-1.388-.412-.278-.514-.259-1.116-.065-1.849l.857-3.186-.076-.14zm-6.18 3.268c-1.238.672-1.414 2.041-.621 3.504l.153.281c.778 1.435 2.04 2.034 3.277 1.363 1.231-.667 1.465-2.032.66-3.516l-.152-.281c-.793-1.463-2.114-2.003-3.317-1.351zm.275.507c.837-.454 1.73-.083 2.42 1.19l.152.282c.671 1.237.546 2.215-.305 2.677-.851.461-1.755-.032-2.388-1.199l-.152-.281c-.69-1.273-.606-2.193.273-2.669zM83.243 236.09l-3.422-1.724-.256.507 2.465 1.242-2.099.662c-.938.298-1.647.711-1.964 1.34-.443.878-.123 1.738.82 2.213.971.49 1.899.16 2.481-.801l-.578-.292c-.503.75-1.058.892-1.651.593-.58-.291-.742-.804-.454-1.375.263-.522.768-.849 1.48-1.108l3.106-1.115.072-.142zm-6.21-3.21c-1.258-.633-2.484.004-3.233 1.49l-.144.285c-.734 1.458-.505 2.836.752 3.47 1.25.629 2.504.043 3.264-1.465l.144-.286c.748-1.486.438-2.878-.784-3.494zm-.26.515c.85.428 1.055 1.373.403 2.666l-.144.286c-.633 1.258-1.507 1.713-2.372 1.277-.864-.435-.976-1.459-.378-2.645l.144-.285c.651-1.294 1.454-1.749 2.347-1.299zM19.766 162.136l-.845-3.737-.555.125.61 2.692-1.846-1.198c-.827-.535-1.597-.82-2.283-.665-.96.217-1.42 1.01-1.188 2.04.24 1.061 1.085 1.568 2.197 1.406l-.143-.632c-.899.089-1.36-.25-1.507-.897-.143-.632.148-1.084.773-1.225.57-.129 1.143.053 1.797.438l2.834 1.689.156-.036zm-1.472-6.834c-.31-1.373-1.581-1.914-3.204-1.547l-.313.071c-1.591.36-2.51 1.412-2.2 2.785.31 1.366 1.56 1.961 3.206 1.588l.312-.07c1.623-.367 2.5-1.493 2.199-2.827zm-.562.127c.21.929-.39 1.688-1.802 2.007l-.312.071c-1.373.31-2.28-.075-2.494-1.019-.213-.944.506-1.681 1.801-1.974l.312-.071c1.412-.319 2.275.011 2.495.986zM36.376 64.413l2.323-3.048-.452-.344-1.673 2.195-.267-2.184c-.12-.977-.396-1.75-.956-2.177-.783-.596-1.686-.44-2.326.4-.66.865-.505 1.838.332 2.587l.393-.516c-.645-.632-.682-1.203-.28-1.732.393-.515.926-.581 1.435-.194.465.354.694.911.818 1.66l.526 3.256.127.097zm4.294-5.516c.853-1.12.452-2.442-.871-3.45l-.255-.194c-1.298-.99-2.695-1.018-3.548.102-.849 1.114-.502 2.454.84 3.477l.255.194c1.324 1.009 2.75.959 3.58-.13zm-.458-.35c-.577.758-1.544.786-2.696-.092l-.254-.194c-1.12-.853-1.407-1.796-.82-2.566.586-.77 1.613-.692 2.67.113l.254.194c1.151.877 1.452 1.75.846 2.545zM215.977 53.57l2.473 2.926.434-.366-1.781-2.108 2.19.212c.98.094 1.795-.008 2.332-.463.752-.635.795-1.55.113-2.357-.702-.831-1.685-.891-2.597-.235l.418.494c.757-.492 1.323-.405 1.751.102.419.495.368 1.03-.121 1.443-.446.377-1.039.48-1.796.44l-3.294-.192-.122.104zm4.457 5.386c.909 1.075 2.286.97 3.557-.105l.244-.206c1.247-1.054 1.577-2.411.668-3.487-.904-1.07-2.287-1.02-3.577.069l-.244.207c-1.271 1.074-1.531 2.477-.648 3.522zm.44-.372c-.614-.727-.432-1.677.674-2.612l.244-.206c1.075-.91 2.058-.986 2.683-.246s.326 1.724-.688 2.582l-.244.206c-1.106.935-2.023 1.04-2.669.276zM127.819 37.071c.968 0 1.968-.568 1.968-1.712 0-.736-.432-1.232-1.096-1.472.528-.232.88-.632.88-1.208 0-.896-.864-1.472-1.752-1.472-.88 0-1.76.56-1.76 1.488 0 .56.32.992.864 1.2-.608.216-1.08.712-1.08 1.48 0 1.136 1.04 1.696 1.976 1.696zm.024-3.424c-.584 0-1.08-.344-1.08-.944 0-.592.464-.952 1.056-.952.592 0 1.048.384 1.048.936 0 .608-.416.96-1.024.96zm-.024 2.856c-.664 0-1.264-.4-1.264-1.152 0-.76.6-1.152 1.28-1.152s1.24.384 1.24 1.136c0 .76-.552 1.168-1.256 1.168zm5.101.568c1.408 0 2.216-1.12 2.216-2.784v-.32c0-1.632-.824-2.76-2.232-2.76-1.4 0-2.256 1.088-2.256 2.776v.32c0 1.664.904 2.768 2.272 2.768zm0-.576c-.952 0-1.56-.752-1.56-2.2v-.32c0-1.408.576-2.208 1.544-2.208.968 0 1.528.864 1.528 2.192v.32c0 1.448-.512 2.216-1.512 2.216zM221.613 151.555c-.251.935.039 2.047 1.144 2.344.711.19 1.302-.099 1.705-.678.088.57.383 1.013.939 1.163.866.231 1.646-.454 1.876-1.312.228-.85-.086-1.845-.982-2.085-.541-.145-1.041.052-1.383.524-.051-.643-.408-1.227-1.15-1.426-1.097-.294-1.907.565-2.149 1.47zm3.301.909c.151-.564.612-.954 1.191-.799.572.153.8.695.646 1.266-.153.572-.642.913-1.175.77-.587-.157-.82-.65-.662-1.237zm-2.753-.762c.172-.642.714-1.118 1.44-.923.734.196.958.877.782 1.534-.176.657-.692 1.099-1.419.904-.734-.197-.985-.835-.803-1.515zm-1.869 4.78c-.364 1.36.509 2.43 2.116 2.861l.309.083c1.576.422 2.879-.082 3.244-1.442.362-1.352-.467-2.46-2.098-2.897l-.309-.083c-1.607-.431-2.908.157-3.262 1.478zm.557.149c.246-.92 1.13-1.312 2.528-.937l.31.082c1.36.365 1.983 1.128 1.733 2.063-.251.935-1.23 1.253-2.513.909l-.309-.083c-1.399-.375-2.008-1.068-1.749-2.034zM175.892 211.238c-.851.462-1.459 1.438-.914 2.443.351.647.967.877 1.665.772-.353.455-.472.975-.197 1.481.427.788 1.461.882 2.241.459.774-.419 1.281-1.331.838-2.147-.266-.492-.754-.719-1.331-.643.431-.48.61-1.141.244-1.816-.542-.998-1.723-.995-2.546-.549zm1.611 3.022c.514-.279 1.114-.213 1.4.315.282.52.046 1.058-.475 1.34-.52.282-1.104.162-1.367-.323-.29-.535-.092-1.043.442-1.332zm-1.34-2.523c.584-.316 1.302-.25 1.66.411.363.668.022 1.298-.576 1.623-.598.324-1.273.253-1.631-.408-.363-.668-.072-1.29.547-1.626zm-4.755 1.933c-1.238.671-1.414 2.04-.621 3.503l.152.282c.778 1.434 2.04 2.033 3.278 1.362 1.231-.667 1.465-2.032.66-3.516l-.152-.281c-.794-1.463-2.114-2.002-3.317-1.35zm.274.506c.837-.454 1.73-.082 2.42 1.19l.153.282c.671 1.238.546 2.215-.305 2.677-.851.461-1.755-.032-2.388-1.199l-.152-.281c-.691-1.273-.607-2.192.272-2.669zM90.864 215.214c-.864-.435-2.013-.378-2.528.644-.33.657-.168 1.295.317 1.808-.576-.031-1.07.168-1.33.683-.402.8.11 1.703.903 2.103.786.395 1.824.291 2.241-.538.252-.5.16-1.029-.231-1.46.64.081 1.284-.15 1.63-.836.511-1.014-.166-1.982-1.002-2.404zm-1.562 3.048c.522.262.81.793.54 1.329-.266.528-.842.641-1.371.375-.529-.267-.763-.815-.515-1.308.274-.543.803-.67 1.346-.396zm1.307-2.54c.593.298.949.926.61 1.597-.342.679-1.054.759-1.661.453s-.935-.901-.596-1.572c.341-.679 1.018-.795 1.647-.478zm-4.3-2.802c-1.258-.634-2.483.003-3.232 1.489l-.144.286c-.734 1.457-.506 2.835.752 3.469 1.25.63 2.504.043 3.263-1.464l.144-.286c.749-1.486.438-2.879-.784-3.494zm-.26.514c.85.428 1.055 1.373.404 2.667l-.144.285c-.634 1.258-1.508 1.713-2.373 1.278-.864-.436-.975-1.459-.378-2.645l.144-.286c.651-1.293 1.454-1.749 2.347-1.299zM40.724 154.746c-.214-.944-.988-1.794-2.104-1.542-.718.163-1.107.693-1.194 1.394-.343-.464-.81-.719-1.373-.592-.873.198-1.245 1.168-1.049 2.034.194.858.935 1.593 1.84 1.388.546-.123.897-.531.98-1.107.345.545.932.896 1.681.726 1.108-.25 1.425-1.388 1.219-2.301zm-3.345.732c.129.57-.097 1.129-.683 1.262-.577.13-1.03-.243-1.161-.82-.13-.578.143-1.107.682-1.229.593-.134 1.028.194 1.162.787zm2.79-.607c.147.648-.11 1.321-.844 1.487-.741.168-1.256-.331-1.406-.994-.15-.663.101-1.294.835-1.46.74-.168 1.26.281 1.416.967zm-.57-5.101c-.311-1.373-1.582-1.914-3.205-1.547l-.312.071c-1.592.36-2.51 1.412-2.2 2.786.31 1.365 1.56 1.96 3.206 1.588l.312-.071c1.623-.367 2.5-1.492 2.198-2.827zm-.562.128c.21.928-.39 1.687-1.802 2.006l-.312.071c-1.373.311-2.28-.075-2.494-1.019-.214-.944.505-1.681 1.8-1.974l.313-.07c1.412-.32 2.274.01 2.495.986zM55.5 75.734c.586-.77.74-1.91-.17-2.603-.585-.446-1.242-.403-1.835-.02.136-.56.03-1.083-.427-1.432-.713-.543-1.695-.205-2.233.501-.533.7-.621 1.74.117 2.302.445.34.983.347 1.478.04-.197.614-.088 1.29.523 1.756.903.688 1.979.2 2.546-.544zm-2.71-2.094c-.354.464-.928.65-1.405.287-.471-.359-.476-.946-.117-1.417.358-.471.94-.601 1.38-.266.483.368.51.912.142 1.396zm2.258 1.75c-.403.528-1.085.763-1.683.307-.604-.46-.553-1.175-.14-1.716.412-.541 1.056-.754 1.655-.298.604.46.594 1.147.167 1.707zm3.543-3.714c.853-1.12.452-2.441-.872-3.45l-.254-.193c-1.298-.99-2.695-1.018-3.548.102-.849 1.114-.502 2.454.84 3.477l.255.194c1.324 1.008 2.75.959 3.579-.13zm-.458-.349c-.577.758-1.544.785-2.696-.092l-.254-.194c-1.12-.853-1.407-1.796-.82-2.566.586-.77 1.612-.692 2.669.113l.254.194c1.152.877 1.453 1.75.847 2.545zM200.787 69.79c.625.74 1.704 1.137 2.578.399.562-.475.662-1.125.417-1.787.518.253 1.051.264 1.49-.108.685-.578.567-1.61-.006-2.288-.568-.672-1.564-.983-2.273-.384-.427.361-.551.885-.358 1.434-.558-.325-1.241-.365-1.828.13-.868.734-.624 1.89-.02 2.605zm2.631-2.191c-.377-.446-.435-1.047.024-1.434.452-.383 1.026-.26 1.408.192.383.452.384 1.048-.038 1.404-.464.393-1.002.302-1.394-.162zm-2.197 1.825c-.429-.507-.51-1.224.064-1.709.58-.49 1.267-.285 1.706.234.439.52.507 1.195-.067 1.68-.581.491-1.249.333-1.703-.205zm2.859 4.263c.909 1.075 2.286.97 3.556-.105l.245-.206c1.246-1.053 1.576-2.411.667-3.486-.903-1.07-2.287-1.021-3.576.068l-.245.207c-1.271 1.074-1.53 2.477-.647 3.522zm.44-.372c-.615-.727-.433-1.677.673-2.611l.245-.207c1.075-.909 2.058-.985 2.683-.246.624.74.326 1.725-.688 2.582l-.245.207c-1.106.934-2.023 1.039-2.668.275zM122.259 61.071c1.464 0 2.48-.88 2.48-2.536v-.424h-2.352v.576h1.672c-.024 1.016-.56 1.824-1.8 1.824-1.344 0-2.048-.928-2.048-2.344v-.064c0-1.4.752-2.36 2.064-2.36.832 0 1.456.352 1.616 1.264h.696c-.176-1.288-1.192-1.816-2.328-1.816-1.64 0-2.768 1.248-2.768 2.92v.064c0 1.672 1.008 2.896 2.768 2.896zm3.597-.072h.664v-2.296c0-1.032.536-1.296 1.376-1.336v-.624c-.752.024-1.112.352-1.376.824v-.752h-.664V61zm4.602.072c.944 0 1.64-.44 1.784-1.28h-.664c-.088.488-.464.728-1.112.728-.856 0-1.312-.528-1.344-1.48h3.152v-.216c0-1.496-.912-2.08-1.88-2.08-1.152 0-1.96.88-1.96 2.144v.064c0 1.288.84 2.12 2.024 2.12zm-1.312-2.568c.112-.744.568-1.208 1.248-1.208.688 0 1.136.344 1.2 1.208h-2.448zm5.859 2.568c.944 0 1.64-.44 1.784-1.28h-.664c-.088.488-.464.728-1.112.728-.856 0-1.312-.528-1.344-1.48h3.152v-.216c0-1.496-.912-2.08-1.88-2.08-1.152 0-1.96.88-1.96 2.144v.064c0 1.288.84 2.12 2.024 2.12zm-1.312-2.568c.112-.744.568-1.208 1.248-1.208.688 0 1.136.344 1.2 1.208h-2.448zM137.84 61h.664v-2.536c0-.752.552-1.144 1.168-1.144.672 0 .984.328.984 1.064V61h.664v-2.568c0-1.216-.608-1.688-1.472-1.688-.688 0-1.152.344-1.344.736v-.664h-.664V61zM205.843 129.705l2.047.548-.277 1.036c-.201.749-.573 1.147-1.322.946l-.031-.008c-.68-.183-.906-.699-.695-1.487l.278-1.035zm-2.757-1.46l-.18.673 2.403.644-.227.85-2.845 1.002-.201.749 2.904-1.036c-.057.797.228 1.528 1.14 1.772l.031.008c1.105.296 1.772-.461 2.055-1.52l.445-1.661-5.525-1.481zm-1.77 6.328c-.244.912.001 1.698.775 2.055l.172-.642c-.449-.211-.583-.636-.416-1.262.222-.827.85-1.131 1.778-.915l-.816 3.044.209.056c1.445.387 2.245-.342 2.495-1.277.298-1.113-.342-2.121-1.563-2.449l-.062-.016c-1.244-.333-2.265.263-2.572 1.406zm2.82-.602c.69.3 1.02.861.844 1.518-.178.664-.626 1.008-1.477.846l.633-2.364zm-3.521 3.498l-.172.642 3.5.938-.265.989.541.145.265-.99.727.195c.409.11.652.349.542.758a1.124 1.124 0 01-.181.399l.541.145c.079-.111.123-.215.179-.424.214-.796-.16-1.318-.979-1.538l-.657-.176.155-.579-.54-.145-.156.579-3.5-.938zm-.653 2.435l-.174.649 5.974 1.6.174-.649-5.974-1.6zm-1.038 3.596c-.244.912.001 1.698.775 2.055l.172-.641c-.449-.212-.583-.637-.416-1.263.222-.827.85-1.131 1.778-.915l-.816 3.045.209.055c1.445.388 2.245-.342 2.495-1.277.298-1.113-.342-2.121-1.563-2.448l-.062-.017c-1.244-.333-2.265.263-2.572 1.406zm2.82-.602c.69.301 1.02.861.844 1.518-.178.665-.626 1.008-1.477.846l.633-2.364zm-3.338 2.813l-.184.688 1.332 1.55-1.922.652-.203.758 2.52-.907 1.559 1.851.186-.696-1.205-1.375 1.733-.595.201-.75-2.325.826-1.692-2.002zm-1.77 6.607l-.507 1.893c-.296 1.105.015 1.951 1.059 2.23l.031.009c.718.192 1.208.001 1.617-.751.047.691.441 1.012.943 1.147l.031.008c1.09.292 1.631-.366 1.906-1.394l.445-1.661-5.525-1.481zm2.938 1.491l1.886.506-.265.989c-.207.772-.56 1.067-1.186.9l-.031-.009c-.68-.182-.89-.57-.673-1.381l.269-1.005zm-2.589-.693l2.064.553-.303 1.128c-.238.888-.664 1.18-1.344.998l-.031-.008c-.672-.18-.928-.647-.713-1.45l.327-1.221zm-1.629 3.978l-.174.649 5.974 1.601.174-.649-5.974-1.601zm-.961 3.311c-.174.649.038 1.186.367 1.473l-.642-.172-.171.642 4.041 1.083.172-.642-2.45-.656c-.726-.195-.96-.837-.807-1.409.17-.634.568-.85 1.279-.66l2.527.678.171-.642-2.557-.685c-1.113-.298-1.715.186-1.93.99zm-1.306 4.874c-.245.912 0 1.698.774 2.055l.172-.642c-.449-.211-.583-.636-.415-1.262.221-.827.849-1.131 1.777-.915l-.816 3.044.209.056c1.445.387 2.245-.343 2.496-1.278.298-1.112-.343-2.121-1.564-2.448l-.062-.016c-1.244-.334-2.265.262-2.571 1.406zm2.82-.603c.689.301 1.019.862.843 1.519-.178.664-.626 1.008-1.477.846l.634-2.365zM172.053 186.101l-.611.332 1.109 2.046-.816.442c-.956.519-1.533 1.369-.953 2.438l.015.028c.568 1.048 1.592 1.039 2.555.516l1.428-.774-2.727-5.028zm.761 2.863l1.087 2.005-.858.465c-.682.37-1.249.331-1.634-.379l-.015-.028c-.351-.647-.155-1.209.562-1.597l.858-.466zm-6.084-.059c-.591.32-.835.844-.817 1.28l-.316-.584-.584.317 1.994 3.678.584-.316-1.209-2.23c-.358-.661-.053-1.272.468-1.555.577-.312 1.007-.173 1.358.474l1.247 2.3.584-.316-1.263-2.328c-.549-1.013-1.315-1.116-2.046-.72zm-2.897 1.653l-.583.316 1.094 2.018c.492.908.147 1.395-.573 1.831l.298.548c.649-.379.809-.839.817-1.38l.358.661.584-.316-1.995-3.678zm-4.187 2.816c.717-.389 1.45-.213 1.961.73l.03.056c.511.942.235 1.675-.447 2.044-.619.336-1.384.15-1.888-.778l-.03-.056c-.485-.894-.358-1.599.374-1.996zm.849-2.663l-.583.317 1.021 1.885c-.409-.252-1.002-.322-1.607.006-1.012.549-1.254 1.681-.644 2.807l.031.056c.621 1.146 1.713 1.464 2.676.942.535-.29.859-.884.875-1.357l.336.619.584-.317-2.689-4.958zm-3.729 3.678l-.591.321 2.948 5.436.591-.32-2.948-5.437zm-3.325 1.721c-.83.45-1.232 1.169-.958 1.976l.584-.317c-.155-.471.061-.861.63-1.17.753-.408 1.405-.161 1.887.661l-2.771 1.502.103.19c.713 1.315 1.793 1.394 2.644.932 1.013-.549 1.304-1.707.702-2.819l-.031-.056c-.614-1.132-1.749-1.463-2.79-.899zm2.378 1.632c.256.708.076 1.333-.522 1.657-.604.328-1.162.239-1.63-.49l2.152-1.167zM105.844 195.968l-.621-.313-1.152 2.286-1.843-.928-.256.507 1.843.929-.91 1.807-2.365-1.191-.256.507 2.987 1.505 2.573-5.109zm-4.95-2.574c-.6-.302-1.17-.204-1.517.06l.299-.593-.593-.299-1.883 3.737.593.299 1.141-2.265c.339-.672 1.015-.77 1.544-.504.586.295.717.729.386 1.386l-1.177 2.336.593.299 1.191-2.365c.518-1.029.166-1.717-.577-2.091zm-3.01-1.436l-.593-.298-1.033 2.05c-.464.922-1.061.916-1.83.574l-.28.558c.682.316 1.151.185 1.6-.117l-.34.671.594.299 1.882-3.737zm-2.402-2.84l-.6-.302-4.602 3.997.607.306 2.386-2.158-.206 3.255.635.321.224-4.089 1.556-1.33zM68.194 167.733l-.14-.617-4.703-.306 4.122-2.261-.14-.624-5.908-.19.143.632 4.777.125-4.221 2.333.11.484 4.798.293-4.246 2.149.157.695 5.25-2.713zm-2.035-6.926c.13.57-.09.832-.511.928-.601.136-.94-.419-1.125-1.239l-.127-.561.507-.115c.632-.143 1.101.3 1.256.987zm.53-.054c-.136-.601-.422-.922-.873-1.14l.515-.116-.147-.648-2.692.609c-1.139.258-1.298 1.04-1.122 1.82.178.789.69 1.452 1.637 1.328l-.146-.648c-.514.051-.818-.208-.945-.77-.141-.624.075-.936.723-1.082l.296-.067.133.585c.236 1.045.782 1.972 1.726 1.758.835-.188 1.066-.872.895-1.629zm-.792-3.176l-.147-.648-2.24.507c-1.006.228-1.382-.237-1.606-1.047l-.609.137c.19.728.589 1.007 1.108 1.161l-.734.165.147.648 4.08-.923zm-.664-2.934l-.147-.647-2.496.564c-.734.166-1.216-.299-1.336-.829-.127-.562.1-.933.818-1.096l2.575-.582-.146-.648-2.497.565c-.734.166-1.216-.299-1.336-.83-.127-.562.1-.933.818-1.095l2.575-.583-.146-.647-2.529.571c-1.186.269-1.478 1.007-1.312 1.741.115.507.487 1.063 1.08 1.224-.498.334-.612.844-.494 1.366.132.586.545.96.97 1.061l-.624.141.146.647 4.081-.923zm-5.203-9.222l-2.067.468-.237-1.045c-.171-.757-.027-1.282.73-1.453l.03-.007c.688-.156 1.128.196 1.308.992l.236 1.045zm3.119.009l-.154-.679-2.426.549-.194-.859 2.05-2.211-.17-.756-2.088 2.268c-.321-.731-.913-1.245-1.834-1.037l-.03.007c-1.117.252-1.354 1.233-1.112 2.302l.379 1.678 5.579-1.262zm-1.38-6.425c-.207-.92-.79-1.502-1.641-1.457l.146.647c.496-.021.813.292.956.924.189.835-.226 1.397-1.147 1.638l-.696-3.075-.21.048c-1.46.33-1.828 1.348-1.614 2.293.254 1.123 1.29 1.717 2.523 1.438l.063-.014c1.256-.284 1.882-1.287 1.62-2.442zm-2.215 1.847c-.75.054-1.303-.288-1.453-.951-.152-.671.085-1.184.913-1.437l.54 2.388zm.688-6.097c.156.686-.21 1.352-1.24 1.585l-.063.014c-.99.224-1.67-.131-1.853-.943-.18-.796.198-1.406 1.244-1.643l.062-.014c1.046-.236 1.68.244 1.85 1.001zm.555-.052c-.134-.593-.638-1.078-1.089-1.222l.703-.159-.147-.647-6.032 1.364.147.648 2.606-.59c-.345.324-.577.82-.424 1.499.254 1.123 1.313 1.704 2.561 1.422l.063-.014c1.271-.288 1.853-1.232 1.612-2.301zm-1.764-7.8c-.283-1.248-1.116-1.995-2.448-1.899l.143.633c.937-.065 1.54.463 1.747 1.376.272 1.202-.424 2.114-1.844 2.435l-.063.014c-1.404.318-2.476-.252-2.737-1.407-.216-.952.11-1.542.929-1.875l-.152-.671c-1.183.391-1.577 1.513-1.314 2.676.342 1.514 1.787 2.352 3.441 1.978l.062-.015c1.717-.388 2.6-1.629 2.236-3.245zM71.376 94.379l.422-.554-4.55-3.467-.393.516-.041 1.638.515.393.044-1.576 4.003 3.05zm2.464-3.116c.718-.942.735-1.994-.092-2.625-.63-.48-1.267-.422-1.815.006.144-.545.07-1.083-.445-1.476-.63-.48-1.585-.413-2.245.452-.659.866-.518 1.908.177 2.488l.368-.484c-.472-.45-.524-1.093-.093-1.66.422-.553.961-.575 1.394-.245.496.378.578.853.127 1.444l-.243.319.465.353.262-.343c.49-.643 1.03-.733 1.616-.287.535.407.631.993.088 1.706-.548.72-1.209.729-1.788.367l-.388.51c.82.574 1.875.443 2.612-.525zm2.047-2.806l.432-.566-3.174-5.114-.076-.058-2.284 2.997.445.34 1.76-2.31 2.897 4.711zm3.783-4.846c.776-1.018.813-2.136-.115-3.095l-.393.515c.65.677.633 1.479.066 2.223-.747.98-1.893 1.032-3.05.15l-.052-.039c-1.145-.873-1.397-2.06-.68-3.002.592-.776 1.254-.906 2.035-.492l.417-.547c-1.06-.656-2.173-.237-2.895.71-.94 1.235-.656 2.88.693 3.909l.051.038c1.4 1.067 2.92.947 3.923-.37zM179.867 82.219c.765.904 1.789 1.149 2.583.478.605-.512.687-1.146.387-1.773.501.258 1.042.303 1.537-.115.605-.511.747-1.459.045-2.29-.703-.83-1.751-.919-2.467-.366l.392.465c.541-.364 1.181-.276 1.641.268.449.531.353 1.063-.062 1.414-.477.403-.957.38-1.438-.189l-.258-.306-.446.377.279.33c.522.617.493 1.166-.07 1.64-.513.435-1.106.402-1.684-.283-.584-.69-.45-1.337.028-1.825l-.413-.489c-.738.676-.838 1.735-.054 2.664zm2.646 3.018l.449.532 4.369-3.692-.418-.495-1.591-.395-.495.419 1.529.383-3.843 3.248zm2.062 2.44l.449.532 4.369-3.692-.418-.495-1.59-.394-.495.418 1.529.384-3.844 3.248zm3.02 3.685c.826.978 1.91 1.257 3.047.557l-.418-.495c-.802.49-1.581.299-2.185-.416-.795-.94-.598-2.071.514-3.01l.049-.042c1.1-.93 2.314-.919 3.078-.014.63.745.613 1.42.04 2.092l.444.526c.87-.892.702-2.07-.068-2.98-1.002-1.186-2.67-1.264-3.965-.169l-.049.041c-1.344 1.136-1.556 2.646-.487 3.91z",
|
|
111
|
+
fill: "#fff"
|
|
112
|
+
}));
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
var DiagramLight = function DiagramLight(props) {
|
|
20
116
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
21
117
|
viewBox: "0 0 259 259",
|
|
22
118
|
fill: "none"
|
|
@@ -126,6 +222,7 @@ var cn = cnCreate('colors');
|
|
|
126
222
|
var Colors = function Colors() {
|
|
127
223
|
var _React$useState = React.useState(getThemeFromLocalStorage()),
|
|
128
224
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
225
|
+
currentTheme = _React$useState2[0],
|
|
129
226
|
setCurrentTheme = _React$useState2[1];
|
|
130
227
|
|
|
131
228
|
var _React$useState3 = React.useState(false),
|
|
@@ -278,7 +375,9 @@ var Colors = function Colors() {
|
|
|
278
375
|
}, /*#__PURE__*/React.createElement(Header, {
|
|
279
376
|
as: "h1",
|
|
280
377
|
className: cn('title')
|
|
281
|
-
}, "
|
|
378
|
+
}, "Colors"), /*#__PURE__*/React.createElement(Paragraph, {
|
|
379
|
+
className: cn('title-note')
|
|
380
|
+
}, "\u041F\u0430\u043B\u0438\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u043E\u0432, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u0430\u044F \u0432 \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0430\u0445 \u041C\u0435\u0433\u0430\u0424\u043E\u043D"), /*#__PURE__*/React.createElement("div", {
|
|
282
381
|
className: cn('inner')
|
|
283
382
|
}, /*#__PURE__*/React.createElement("div", {
|
|
284
383
|
className: cn('container')
|
|
@@ -311,9 +410,9 @@ var Colors = function Colors() {
|
|
|
311
410
|
className: cn('group-title')
|
|
312
411
|
}, "Soft"), /*#__PURE__*/React.createElement("div", {
|
|
313
412
|
className: cn('group')
|
|
314
|
-
}, /*#__PURE__*/React.createElement(
|
|
413
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
315
414
|
className: cn('diagram')
|
|
316
|
-
}), renderSoftColors()))));
|
|
415
|
+
}, currentTheme === 'light' && /*#__PURE__*/React.createElement(DiagramLight, null), currentTheme === 'dark' && /*#__PURE__*/React.createElement(DiagramDark, null)), renderSoftColors()))));
|
|
317
416
|
};
|
|
318
417
|
|
|
319
418
|
export default Colors;
|
|
@@ -15,18 +15,19 @@ var colors = {
|
|
|
15
15
|
colors: [{
|
|
16
16
|
name: 'Base',
|
|
17
17
|
code: 'base',
|
|
18
|
-
border: '1px solid var(--
|
|
18
|
+
border: '1px solid var(--spbSky2)'
|
|
19
19
|
}, {
|
|
20
20
|
name: 'Content',
|
|
21
21
|
code: 'content',
|
|
22
|
-
border: '1px solid var(--
|
|
22
|
+
border: '1px solid var(--spbSky2)'
|
|
23
23
|
}, {
|
|
24
24
|
name: 'Spb Sky 0',
|
|
25
25
|
code: 'spbSky0',
|
|
26
|
-
border: '
|
|
26
|
+
border: '1px solid var(--spbSky2)'
|
|
27
27
|
}, {
|
|
28
28
|
name: 'Spb Sky 1',
|
|
29
|
-
code: 'spbSky1'
|
|
29
|
+
code: 'spbSky1',
|
|
30
|
+
border: '1px solid var(--spbSky2)'
|
|
30
31
|
}, {
|
|
31
32
|
name: 'Spb Sky 2',
|
|
32
33
|
code: 'spbSky2'
|
|
@@ -67,7 +68,8 @@ var colors = {
|
|
|
67
68
|
code: 'systemBlue'
|
|
68
69
|
}, {
|
|
69
70
|
name: 'Background',
|
|
70
|
-
code: 'background'
|
|
71
|
+
code: 'background',
|
|
72
|
+
border: '1px solid var(--spbSky2)'
|
|
71
73
|
}, {
|
|
72
74
|
name: 'Button Hov. G.',
|
|
73
75
|
code: 'buttonHoverGreen'
|
|
@@ -106,11 +108,11 @@ var colors = {
|
|
|
106
108
|
colors: [{
|
|
107
109
|
name: 'STC White',
|
|
108
110
|
code: 'stcWhite',
|
|
109
|
-
border: '1px solid var(--
|
|
111
|
+
border: '1px solid var(--spbSky2)'
|
|
110
112
|
}, {
|
|
111
113
|
name: 'STC Black',
|
|
112
114
|
code: 'stcBlack',
|
|
113
|
-
border: '1px solid var(--
|
|
115
|
+
border: '1px solid var(--spbSky2)'
|
|
114
116
|
}]
|
|
115
117
|
}
|
|
116
118
|
},
|
|
@@ -121,35 +123,35 @@ var colors = {
|
|
|
121
123
|
colors: [{
|
|
122
124
|
name: 'STC White 5%',
|
|
123
125
|
code: 'stcWhite5',
|
|
124
|
-
border: '1px solid var(--
|
|
126
|
+
border: '1px solid var(--spbSky2)'
|
|
125
127
|
}, {
|
|
126
128
|
name: 'STC White 10%',
|
|
127
129
|
code: 'stcWhite10',
|
|
128
|
-
border: '1px solid var(--
|
|
130
|
+
border: '1px solid var(--spbSky2)'
|
|
129
131
|
}, {
|
|
130
132
|
name: 'STC White 20%',
|
|
131
133
|
code: 'stcWhite20',
|
|
132
|
-
border: '1px solid var(--
|
|
134
|
+
border: '1px solid var(--spbSky2)'
|
|
133
135
|
}, {
|
|
134
136
|
name: 'STC White 50%',
|
|
135
137
|
code: 'stcWhite50',
|
|
136
|
-
border: '1px solid var(--
|
|
138
|
+
border: '1px solid var(--spbSky2)'
|
|
137
139
|
}, {
|
|
138
140
|
name: 'STC Black 5%',
|
|
139
141
|
code: 'stcBlack5',
|
|
140
|
-
border: '1px solid var(--
|
|
142
|
+
border: '1px solid var(--spbSky2)'
|
|
141
143
|
}, {
|
|
142
144
|
name: 'STC Black 10%',
|
|
143
145
|
code: 'stcBlack10',
|
|
144
|
-
border: '1px solid var(--
|
|
146
|
+
border: '1px solid var(--spbSky2)'
|
|
145
147
|
}, {
|
|
146
148
|
name: 'STC Black 20%',
|
|
147
149
|
code: 'stcBlack20',
|
|
148
|
-
border: '1px solid var(--
|
|
150
|
+
border: '1px solid var(--spbSky2)'
|
|
149
151
|
}, {
|
|
150
152
|
name: 'STC Black 50%',
|
|
151
153
|
code: 'stcBlack50',
|
|
152
|
-
border: '1px solid var(--
|
|
154
|
+
border: '1px solid var(--spbSky2)'
|
|
153
155
|
}]
|
|
154
156
|
}
|
|
155
157
|
},
|
|
@@ -160,11 +162,11 @@ var colors = {
|
|
|
160
162
|
colors: [{
|
|
161
163
|
name: 'Brand Green 80',
|
|
162
164
|
code: 'brandGreen80',
|
|
163
|
-
parentColor: '
|
|
165
|
+
parentColor: 'brandGreen'
|
|
164
166
|
}, {
|
|
165
167
|
name: 'Brand Purple 80',
|
|
166
168
|
code: 'brandPurple80',
|
|
167
|
-
parentColor: '
|
|
169
|
+
parentColor: 'brandPurple'
|
|
168
170
|
}, {
|
|
169
171
|
name: 'Warm Red C 80',
|
|
170
172
|
code: 'warmRedC80',
|
|
@@ -188,11 +190,11 @@ var colors = {
|
|
|
188
190
|
}, {
|
|
189
191
|
name: 'Brand Green 20',
|
|
190
192
|
code: 'brandGreen20',
|
|
191
|
-
parentColor: '
|
|
193
|
+
parentColor: 'brandGreen'
|
|
192
194
|
}, {
|
|
193
195
|
name: 'Brand Purple 20',
|
|
194
196
|
code: 'brandPurple20',
|
|
195
|
-
parentColor: '
|
|
197
|
+
parentColor: 'brandPurple'
|
|
196
198
|
}, {
|
|
197
199
|
name: 'Warm Red C 20',
|
|
198
200
|
code: 'warmRedC20',
|
|
@@ -8,7 +8,7 @@ h5 {
|
|
|
8
8
|
.mfui-notification {
|
|
9
9
|
position: relative;
|
|
10
10
|
padding: 16px 12px;
|
|
11
|
-
background-color: var(--
|
|
11
|
+
background-color: var(--base);
|
|
12
12
|
}
|
|
13
13
|
@media screen and (min-width: 768px) {
|
|
14
14
|
.mfui-notification {
|
|
@@ -187,7 +187,7 @@ h5 {
|
|
|
187
187
|
fill: var(--311C);
|
|
188
188
|
}
|
|
189
189
|
.mfui-notification_colored .mfui-notification__icon-container {
|
|
190
|
-
background-color: var(--
|
|
190
|
+
background-color: var(--base);
|
|
191
191
|
}
|
|
192
192
|
.mfui-notification_colored.mfui-notification_type_info {
|
|
193
193
|
background-color: var(--311C20);
|
|
@@ -204,7 +204,7 @@ h5 {
|
|
|
204
204
|
.mfui-notification_colored.mfui-notification_type_info .mfui-notification__text,
|
|
205
205
|
.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__text,
|
|
206
206
|
.mfui-notification_colored.mfui-notification_type_success .mfui-notification__text {
|
|
207
|
-
color: var(--
|
|
207
|
+
color: var(--content);
|
|
208
208
|
}
|
|
209
209
|
.mfui-notification_colored.mfui-notification_type_info .mfui-notification__link,
|
|
210
210
|
.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__link,
|
|
@@ -67,6 +67,7 @@ var Search = function Search(_ref) {
|
|
|
67
67
|
var debouncedOnChange = React.useRef(debounce(function (inputValue) {
|
|
68
68
|
return onChange && onChange(inputValue);
|
|
69
69
|
}, changeDelay));
|
|
70
|
+
var highlightedItem = React.useRef(null);
|
|
70
71
|
var handleChange = React.useCallback(function (e) {
|
|
71
72
|
var _e$target$value = e.target.value,
|
|
72
73
|
inputValue = _e$target$value === void 0 ? '' : _e$target$value;
|
|
@@ -148,6 +149,16 @@ var Search = function Search(_ref) {
|
|
|
148
149
|
setFocus(false);
|
|
149
150
|
}
|
|
150
151
|
}, [disabled, isFocused]);
|
|
152
|
+
React.useEffect(function () {
|
|
153
|
+
var _a, _b;
|
|
154
|
+
|
|
155
|
+
if (activeIndex !== -1) {
|
|
156
|
+
(_b = (_a = highlightedItem.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
|
|
157
|
+
behavior: 'smooth',
|
|
158
|
+
block: 'nearest'
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
}, [activeIndex, items]);
|
|
151
162
|
|
|
152
163
|
var highlightString = function highlightString(title) {
|
|
153
164
|
var query = searchQuery.replace(/[^A-Z-a-zА-ЯЁа-яё0-9]/g, function (w) {
|
|
@@ -199,6 +210,7 @@ var Search = function Search(_ref) {
|
|
|
199
210
|
var itemValue = _ref2.value,
|
|
200
211
|
searchView = _ref2.searchView;
|
|
201
212
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
|
|
213
|
+
ref: activeIndex === i ? highlightedItem : null,
|
|
202
214
|
className: cn('list-item', {
|
|
203
215
|
active: activeIndex === i
|
|
204
216
|
}),
|
|
@@ -105,29 +105,12 @@ var Select = function Select(_ref) {
|
|
|
105
105
|
}, [onClosed, isOpened]);
|
|
106
106
|
|
|
107
107
|
var scrollList = function scrollList(itemIndex) {
|
|
108
|
-
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
var wrapper = itemWrapperNode.current;
|
|
113
|
-
var item = itemsNodeList.current[itemIndex];
|
|
114
|
-
|
|
115
|
-
if (!item || !wrapper) {
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
108
|
+
var _a, _b;
|
|
118
109
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
if (itemOffset + itemHeight > wrapperScroll + wrapperHeight) {
|
|
125
|
-
wrapper.scrollTop = itemOffset + itemHeight - wrapperHeight;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
if (itemOffset < wrapperScroll) {
|
|
129
|
-
wrapper.scrollTop = itemOffset;
|
|
130
|
-
}
|
|
110
|
+
(_b = (_a = itemsNodeList.current[itemIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
|
|
111
|
+
behavior: 'smooth',
|
|
112
|
+
block: 'nearest'
|
|
113
|
+
});
|
|
131
114
|
};
|
|
132
115
|
|
|
133
116
|
useEffect(function () {
|
|
@@ -1,48 +1,121 @@
|
|
|
1
1
|
.mfui-switcher {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
-
|
|
11
|
-
|
|
2
|
+
display: -webkit-box;
|
|
3
|
+
display: -ms-flexbox;
|
|
4
|
+
display: flex;
|
|
5
|
+
}
|
|
6
|
+
.mfui-switcher__content {
|
|
7
|
+
font-size: 15px;
|
|
8
|
+
line-height: 24px;
|
|
9
|
+
font-weight: 400;
|
|
10
|
+
-ms-flex-item-align: center;
|
|
11
|
+
align-self: center;
|
|
12
|
+
margin-left: 12px;
|
|
13
|
+
}
|
|
14
|
+
.mfui-switcher__content_size_small {
|
|
15
|
+
font-size: 12px;
|
|
16
|
+
line-height: 16px;
|
|
17
|
+
}
|
|
18
|
+
.mfui-switcher__content_left {
|
|
19
|
+
margin-right: 12px;
|
|
20
|
+
margin-left: 0;
|
|
21
|
+
}
|
|
22
|
+
.mfui-switcher__content_left + .mfui-switcher__input {
|
|
23
|
+
margin-left: auto;
|
|
12
24
|
}
|
|
13
25
|
.mfui-switcher__pointer {
|
|
14
26
|
position: relative;
|
|
15
|
-
top:
|
|
16
|
-
left:
|
|
27
|
+
top: 2px;
|
|
28
|
+
left: 2px;
|
|
17
29
|
width: 24px;
|
|
18
30
|
height: 24px;
|
|
19
|
-
border: 1px solid var(--stcBlack20);
|
|
20
31
|
border-radius: 50%;
|
|
21
|
-
background-color: var(--
|
|
22
|
-
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
|
|
23
|
-
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
|
|
32
|
+
background-color: var(--stcWhite);
|
|
24
33
|
-webkit-transition: all 0.3s;
|
|
25
34
|
transition: all 0.3s;
|
|
26
35
|
}
|
|
27
|
-
.mfui-
|
|
36
|
+
.mfui-switcher__loader {
|
|
37
|
+
position: absolute;
|
|
38
|
+
top: 0;
|
|
39
|
+
right: 0;
|
|
40
|
+
bottom: 0;
|
|
41
|
+
left: 0;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
}
|
|
44
|
+
.mfui-switcher__loader:before {
|
|
45
|
+
content: '';
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 0;
|
|
48
|
+
bottom: 0;
|
|
49
|
+
left: 0;
|
|
50
|
+
width: 300%;
|
|
51
|
+
height: 100%;
|
|
52
|
+
background: -webkit-gradient(linear, left top, right top, from(var(--spbSky1)), color-stop(16%, var(--spbSky2)), color-stop(33%, var(--spbSky1)), color-stop(50%, var(--spbSky2)), color-stop(66%, var(--spbSky1)), color-stop(82%, var(--spbSky2)), to(var(--spbSky1)));
|
|
53
|
+
background: linear-gradient(90deg, var(--spbSky1) 0%, var(--spbSky2) 16%, var(--spbSky1) 33%, var(--spbSky2) 50%, var(--spbSky1) 66%, var(--spbSky2) 82%, var(--spbSky1) 100%);
|
|
54
|
+
-webkit-animation: shining 0.8s linear infinite;
|
|
55
|
+
animation: shining 0.8s linear infinite;
|
|
56
|
+
}
|
|
57
|
+
@-webkit-keyframes shining {
|
|
58
|
+
0% {
|
|
59
|
+
-webkit-transform: translateX(-33%);
|
|
60
|
+
transform: translateX(-33%);
|
|
61
|
+
}
|
|
62
|
+
100% {
|
|
63
|
+
-webkit-transform: translateX(0);
|
|
64
|
+
transform: translateX(0);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
@keyframes shining {
|
|
68
|
+
0% {
|
|
69
|
+
-webkit-transform: translateX(-33%);
|
|
70
|
+
transform: translateX(-33%);
|
|
71
|
+
}
|
|
72
|
+
100% {
|
|
73
|
+
-webkit-transform: translateX(0);
|
|
74
|
+
transform: translateX(0);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
.mfui-switcher__input {
|
|
78
|
+
position: relative;
|
|
79
|
+
-ms-flex-item-align: start;
|
|
80
|
+
align-self: flex-start;
|
|
81
|
+
width: 48px;
|
|
82
|
+
min-width: 48px;
|
|
83
|
+
height: 28px;
|
|
84
|
+
border-radius: 15.5px;
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
background-color: var(--spbSky1);
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
-webkit-transition: background-color 0.3s;
|
|
89
|
+
transition: background-color 0.3s;
|
|
90
|
+
}
|
|
91
|
+
.mfui-switcher__input_disabled {
|
|
28
92
|
background-color: var(--spbSky1);
|
|
29
93
|
}
|
|
30
|
-
.mfui-
|
|
94
|
+
.mfui-switcher__input_disabled,
|
|
95
|
+
.mfui-switcher__input_loaded {
|
|
96
|
+
cursor: default;
|
|
97
|
+
}
|
|
98
|
+
.mfui-switcher__input:hover:not(.mfui-switcher__input_disabled) {
|
|
99
|
+
background-color: var(--spbSky2);
|
|
100
|
+
}
|
|
101
|
+
.mfui-switcher__input_checked:not(.mfui-switcher__input_disabled) {
|
|
31
102
|
border-color: var(--brandGreen);
|
|
32
103
|
background-color: var(--brandGreen);
|
|
33
104
|
}
|
|
34
|
-
.mfui-
|
|
35
|
-
left: 21px;
|
|
36
|
-
}
|
|
37
|
-
.mfui-switcher_checked.mfui-switcher_no-touch:hover {
|
|
105
|
+
.mfui-switcher__input_checked:hover:not(.mfui-switcher__input_disabled) {
|
|
38
106
|
border-color: var(--buttonHoverGreen);
|
|
39
107
|
background-color: var(--buttonHoverGreen);
|
|
40
108
|
}
|
|
41
|
-
.mfui-
|
|
42
|
-
background-color: var(--spbSky1);
|
|
43
|
-
cursor: default;
|
|
44
|
-
}
|
|
45
|
-
.mfui-switcher_disabled.mfui-switcher_checked.mfui-switcher_no-touch {
|
|
46
|
-
border-color: var(--spbSky2);
|
|
109
|
+
.mfui-switcher__input_disabled .mfui-switcher__pointer {
|
|
47
110
|
background-color: var(--spbSky2);
|
|
48
111
|
}
|
|
112
|
+
.mfui-switcher__input_checked .mfui-switcher__pointer {
|
|
113
|
+
left: 22px;
|
|
114
|
+
}
|
|
115
|
+
.mfui-switcher__input_checked .mfui-switcher__loader:before {
|
|
116
|
+
background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), color-stop(16%, var(--buttonHoverGreen)), color-stop(33%, var(--brandGreen)), color-stop(50%, var(--buttonHoverGreen)), color-stop(66%, var(--brandGreen)), color-stop(82%, var(--buttonHoverGreen)), to(var(--brandGreen)));
|
|
117
|
+
background: linear-gradient(90deg, var(--brandGreen) 0%, var(--buttonHoverGreen) 16%, var(--brandGreen) 33%, var(--buttonHoverGreen) 50%, var(--brandGreen) 66%, var(--buttonHoverGreen) 82%, var(--brandGreen) 100%);
|
|
118
|
+
}
|
|
119
|
+
.mfui-switcher_disabled .mfui-switcher__content {
|
|
120
|
+
color: var(--spbSky3);
|
|
121
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { AccessibilityEventType } from '@megafon/ui-helpers';
|
|
2
3
|
import './Switcher.less';
|
|
3
4
|
export interface ISwitcherProps {
|
|
4
5
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
@@ -11,8 +12,14 @@ export interface ISwitcherProps {
|
|
|
11
12
|
checked?: boolean;
|
|
12
13
|
/** Отключение переключателя */
|
|
13
14
|
disabled?: boolean;
|
|
15
|
+
/** Cостояние загрузки */
|
|
16
|
+
showLoader?: boolean;
|
|
17
|
+
/** Размер текста лейбла */
|
|
18
|
+
textSize?: 'small' | 'medium';
|
|
19
|
+
/** Позиция лейбла относительно свитчера */
|
|
20
|
+
textPosition?: 'left' | 'right';
|
|
14
21
|
/** Обработчик изменения элемента */
|
|
15
|
-
onChange?: (e:
|
|
22
|
+
onChange?: (e: AccessibilityEventType) => void;
|
|
16
23
|
}
|
|
17
24
|
declare const Switcher: React.FC<ISwitcherProps>;
|
|
18
25
|
export default Switcher;
|