@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
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(--content);
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;
@@ -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: '#00B956'
7
+ name: 'Brand Green',
8
+ code: 'brandGreen'
9
9
  }, {
10
- name: 'Purple',
11
- code: '#731982'
10
+ name: 'Brand Purple',
11
+ code: 'brandPurple'
12
12
  }]
13
13
  }, {
14
14
  description: 'Градация оттенков серого',
15
15
  colors: [{
16
16
  name: 'Base',
17
- code: '#FFFFFF',
18
- border: '1px solid #EDEDED'
17
+ code: 'base',
18
+ border: '1px solid var(--spbSky1)'
19
19
  }, {
20
20
  name: 'Content',
21
- code: '#333333',
22
- border: '1px solid #EDEDED'
21
+ code: 'content',
22
+ border: '1px solid var(--spbSky1)'
23
23
  }, {
24
24
  name: 'Spb Sky 0',
25
- code: '#F6F6F6',
26
- border: '2px solid #EDEDED'
25
+ code: 'spbSky0',
26
+ border: '2px solid var(--spbSky1)'
27
27
  }, {
28
28
  name: 'Spb Sky 1',
29
- code: '#EDEDED'
29
+ code: 'spbSky1'
30
30
  }, {
31
31
  name: 'Spb Sky 2',
32
- code: '#D8D8D8'
32
+ code: 'spbSky2'
33
33
  }, {
34
34
  name: 'Spb Sky 3',
35
- code: '#999999'
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: '#EB5A40'
45
+ code: 'warmRedC'
46
46
  }, {
47
47
  name: '137C',
48
- code: '#FFA717'
48
+ code: '137C'
49
49
  }, {
50
50
  name: '311C',
51
- code: '#5BD9E5'
51
+ code: '311C'
52
52
  }, {
53
53
  name: 'Reflex Blue',
54
- code: '#444189'
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: '#F62434'
64
+ code: 'fury'
65
65
  }, {
66
66
  name: 'System Blue',
67
- code: '#34AAF2'
67
+ code: 'systemBlue'
68
68
  }, {
69
69
  name: 'Background',
70
- code: '#FFFFFF'
70
+ code: 'background'
71
71
  }, {
72
72
  name: 'Button Hov. G.',
73
- code: '#10E272'
73
+ code: 'buttonHoverGreen'
74
74
  }, {
75
75
  name: 'Button Hov. P.',
76
- code: '#A500BF'
76
+ code: 'buttonhoverPurple'
77
77
  }, {
78
78
  name: 'Button Down',
79
- code: '#404D46'
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: '#01873F #00B956 #14CD6A',
89
+ code: 'gradientBasic',
90
90
  gradient: 'linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%)'
91
91
  }, {
92
92
  name: 'VIP',
93
- code: '#5B1168 #731982 #821E93',
93
+ code: 'gradientVIP',
94
94
  gradient: 'linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%)'
95
95
  }, {
96
96
  name: 'Exclusive',
97
- code: '#2A2674 #444189 #504D93',
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: '#FFFFFF',
109
- border: '1px solid #EDEDED'
108
+ code: 'stcWhite',
109
+ border: '1px solid var(--spbSky1)'
110
110
  }, {
111
111
  name: 'STC Black',
112
- code: '#333333',
113
- border: '1px solid #EDEDED'
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: '#FFFFFF0D',
124
- border: '1px solid #EDEDED'
123
+ code: 'stcWhite5',
124
+ border: '1px solid var(--spbSky1)'
125
125
  }, {
126
126
  name: 'STC White 10%',
127
- code: '#FFFFFF1A',
128
- border: '1px solid #EDEDED'
127
+ code: 'stcWhite10',
128
+ border: '1px solid var(--spbSky1)'
129
129
  }, {
130
130
  name: 'STC White 20%',
131
- code: '#FFFFFF33',
132
- border: '1px solid #EDEDED'
131
+ code: 'stcWhite20',
132
+ border: '1px solid var(--spbSky1)'
133
133
  }, {
134
134
  name: 'STC White 50%',
135
- code: '#FFFFFF80',
136
- border: '1px solid #EDEDED'
135
+ code: 'stcWhite50',
136
+ border: '1px solid var(--spbSky1)'
137
137
  }, {
138
138
  name: 'STC Black 5%',
139
- code: '#3333330D',
140
- border: '1px solid #EDEDED'
139
+ code: 'stcBlack5',
140
+ border: '1px solid var(--spbSky1)'
141
141
  }, {
142
142
  name: 'STC Black 10%',
143
- code: '#3333331A',
144
- border: '1px solid #EDEDED'
143
+ code: 'stcBlack10',
144
+ border: '1px solid var(--spbSky1)'
145
145
  }, {
146
146
  name: 'STC Black 20%',
147
- code: '#33333333',
148
- border: '1px solid #EDEDED'
147
+ code: 'stcBlack20',
148
+ border: '1px solid var(--spbSky1)'
149
149
  }, {
150
150
  name: 'STC Black 50%',
151
- code: '#33333380',
152
- border: '1px solid #EDEDED'
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: '#0CDC78',
163
- parentColor: '#00B956'
161
+ name: 'Brand Green 80',
162
+ code: 'brandGreen80',
163
+ parentColor: 'green'
164
164
  }, {
165
- name: 'Purple 80',
166
- code: '#AA67C1',
167
- parentColor: '#731982'
165
+ name: 'Brand Purple 80',
166
+ code: 'brandPurple80',
167
+ parentColor: 'purple'
168
168
  }, {
169
169
  name: 'Warm Red C 80',
170
- code: '#FF765D',
171
- parentColor: '#EB5A40'
170
+ code: 'warmRedC80',
171
+ parentColor: 'warmRedC'
172
172
  }, {
173
173
  name: '137C 80',
174
- code: '#FFB945',
175
- parentColor: '#FFB945'
174
+ code: '137C80',
175
+ parentColor: '137C'
176
176
  }, {
177
177
  name: '311C 80',
178
- code: '#62E3FF',
179
- parentColor: '#5BD9E5'
178
+ code: '311C80',
179
+ parentColor: '311C'
180
180
  }, {
181
181
  name: 'Reflex Blue 80',
182
- code: '#554FC9',
183
- parentColor: '#444189'
182
+ code: 'reflexBlue80',
183
+ parentColor: 'reflexBlue'
184
184
  }, {
185
185
  name: 'Fury 80',
186
- code: '#F8505D',
187
- parentColor: '#F62434'
186
+ code: 'fury80',
187
+ parentColor: 'fury'
188
188
  }, {
189
- name: 'Green 20',
190
- code: '#DDFFEC',
191
- parentColor: '#00B956'
189
+ name: 'Brand Green 20',
190
+ code: 'brandGreen20',
191
+ parentColor: 'green'
192
192
  }, {
193
- name: 'Purple 20',
194
- code: '#FFEEFF',
195
- parentColor: '#731982'
193
+ name: 'Brand Purple 20',
194
+ code: 'brandPurple20',
195
+ parentColor: 'purple'
196
196
  }, {
197
197
  name: 'Warm Red C 20',
198
- code: '#FFCFC7',
199
- parentColor: '#EB5A40'
198
+ code: 'warmRedC20',
199
+ parentColor: 'warmRedC'
200
200
  }, {
201
201
  name: '137C 20',
202
- code: '#FFEDD1',
203
- parentColor: '#FFB945'
202
+ code: '137C20',
203
+ parentColor: '137C'
204
204
  }, {
205
205
  name: '311C 20',
206
- code: '#E1FAFF',
207
- parentColor: '#5BD9E5'
206
+ code: '311C20',
207
+ parentColor: '311C'
208
208
  }, {
209
209
  name: 'Reflex Blue 20',
210
- code: '#EBEAFF',
211
- parentColor: '#444189'
210
+ code: 'reflexBlue20',
211
+ parentColor: 'reflexBlue'
212
212
  }, {
213
213
  name: 'Fury 20',
214
- code: '#FFC5C9',
215
- parentColor: '#F62434'
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, title: string | React.ReactNode | React.ReactNode[]) => void;
23
+ onClickAccordion?: (isOpened: boolean) => void;
24
24
  }
25
25
  declare const Accordion: React.FC<IAccordionProps>;
26
26
  export default Accordion;