@megafon/ui-core 2.2.0 → 3.0.0-beta.3

package/dist/lib/components/List/List.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-list {
   font-family: inherit;
   font-size: 15px;
@@ -25,23 +18,26 @@ h5 {
 .mfui-list_h-align_right {
   text-align: right;
 }
+.mfui-list_color_default {
+  color: var(--content);
+}
 .mfui-list_color_black {
-  color: #333333;
+  color: var(--stcBlack);
 }
 .mfui-list_color_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-list_color_gray {
-  color: #D8D8D8;
+  color: var(--spbSky2);
 }
 .mfui-list_color_green {
-  color: #00B956;
+  color: var(--brandGreen);
 }
 .mfui-list_color_purple {
-  color: #731982;
+  color: var(--brandPurple);
 }
 .mfui-list_color_red {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-list_color_inherit {
   color: inherit;

package/dist/lib/components/List/List.d.ts

@@ -8,7 +8,7 @@ export interface IListProps {
     /** Жирность шрифта */
     weight?: 'light' | 'regular' | 'bold';
     /** Цвет */
-    color?: 'black' | 'white' | 'gray' | 'green' | 'purple' | 'red' | 'inherit';
+    color?: 'default' | 'black' | 'white' | 'gray' | 'green' | 'purple' | 'red' | 'inherit';
     /** Дополнительный класс корневого элемента */
     className?: string;
 }

package/dist/lib/components/List/List.js

@@ -23,7 +23,7 @@ var List = function List(_ref) {
   var _ref$as = _ref.as,
       as = _ref$as === void 0 ? 'ul' : _ref$as,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'black' : _ref$color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
       hAlign = _ref.hAlign,
@@ -44,7 +44,7 @@ List.propTypes = {
   as: PropTypes.oneOf(['ul', 'ol']),
   hAlign: PropTypes.oneOf(['center', 'right']),
   weight: PropTypes.oneOf(['light', 'regular', 'bold']),
-  color: PropTypes.oneOf(['black', 'white', 'gray', 'green', 'purple', 'red', 'inherit']),
+  color: PropTypes.oneOf(['default', 'black', 'white', 'gray', 'green', 'purple', 'red', 'inherit']),
   className: PropTypes.string
 };
 var _default = List;

package/dist/lib/components/List/ListItem.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-list-item {
   margin-bottom: 12px;
 }

package/dist/lib/components/Logo/Logo.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-logo {
   display: inline-block;
   vertical-align: top;

package/dist/lib/components/Logo/Logo.js

@@ -33,10 +33,8 @@ var greenHorizontalImg = function greenHorizontalImg(props) {
   }, /*#__PURE__*/React.createElement("path", {
     d: "M30.3.7v27.8c0 1.3-1 2.2-2.2 2.2h-3.3c-.2 0-.3.2-.3.3v23.3c.8 0 1.6.2 2.5.2 14.9 0 27-12.1 27-27C54 13.8 43.7 2.3 30.3.7zm-.6 41.6c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3.2 1.8-1.4 3.3-3.3 3.3zm7.9 0c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.3 3.3-3.3 3.3zm8 0c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.4 3.3-3.3 3.3z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M27 .6C12.1.6 0 12.7 0 27.6c0 13.1 9.1 23.8 21.3 26.3V29.6c0-1.1 1-2 2-2.2H26.6c.2 0 .3-.2.3-.3L27 .6zm-5.2 22.2c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.5 3.3-3.3 3.3z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-    d: "M297.3 15.3v10.2h-13.6V15.3h-6.9v27h6.9V31.4h13.6v10.9h6.7v-27zM184.9 18.4c-1.1-2.4-3.3-3.7-5.5-3.7s-4.5 1.3-5.5 3.7l-10.9 24h7.2l2.4-5.7h14l2.4 5.7h7.2l-11.3-24zm-10.4 12.9l4.1-9.9c.2-.3.3-.3.5-.3s.5 0 .5.3l4.1 9.9h-9.2zM104.5 10.5c-3.2 0-5.2 1.7-6.7 5.1l-8.7 20.3-8.8-20.4c-1.4-3.3-3.5-5.1-6.7-5.1-3 0-6 2-6 6.7v25.1h6.7V18l8.9 20.1c1.1 2.9 3.2 4.6 5.9 4.6 2.9 0 4.8-1.7 5.9-4.6l8.9-20.1v24.5h6.7V17.4c-.1-4.7-3.1-6.9-6.1-6.9zM122.4 36.6c-.3 0-.7-.3-.7-.7v-4.8h16.8v-5.5h-16.8v-4.1c0-.3.3-.7.7-.7h16.7v-5.7h-20c-2.4 0-4 1.9-4 4V38c0 2 1.7 4 4 4h20v-5.7h-16.7v.3zM150.4 42.3V21.7c0-.3.3-.7.7-.7h16.7v-5.7h-20c-2.4 0-4 1.9-4 4v22.9l6.6.1zM272.4 28.9c0-9.4-4.1-13.8-14.3-13.8h-2.4c-10.2 0-14.3 4.5-14.3 13.8 0 9.2 4.1 13.8 14.3 13.8h2.2c10.4-.2 14.5-4.6 14.5-13.8zM257.9 37h-2.2c-5.5 0-7.8-2.5-7.8-8.1 0-5.4 1.9-8.1 7.8-8.1h2.2c5.7 0 7.8 2.7 7.8 8.1 0 5.5-2.1 8.1-7.8 8.1zM222.7 11.1h-13.4c-10 0-14 5.1-14 13.8 0 1.4.2 2.7.3 3.8 1.1 6.2 4.8 10 14.1 10h3v3.5h6.7v-3.5h2.9c9.4 0 13.1-3.8 14.1-10 .2-1.1.3-2.4.3-3.8-.1-8.7-4.2-13.8-14-13.8zm-10.2 22h-3c-4.6 0-6.2-1.7-7.2-4.5-.3-1-.3-2.4-.3-3.8 0-5.7 2.7-8.1 6.5-8.1h4.1v16.4h-.1zm17.2-4.2c-1 2.7-2.7 4.5-7.2 4.5h-3V16.9h4.1c3.8 0 6.5 2.4 6.5 8.1-.1 1.5-.1 2.7-.4 3.9z"
-  }))));
+    d: "M27 .6C12.1.6 0 12.7 0 27.6c0 13.1 9.1 23.8 21.3 26.3V29.6c0-1.1 1-2 2-2.2h3.3c.2 0 .3-.2.3-.3L27 .6zm-5.2 22.2c-1.9 0-3.3-1.6-3.3-3.3 0-1.9 1.6-3.3 3.3-3.3 1.9 0 3.3 1.6 3.3 3.3s-1.5 3.3-3.3 3.3zm275.5-7.5v10.2h-13.6V15.3h-6.9v27h6.9V31.4h13.6v10.9h6.7v-27zm-112.4 3.1c-1.1-2.4-3.3-3.7-5.5-3.7s-4.5 1.3-5.5 3.7l-10.9 24h7.2l2.4-5.7h14l2.4 5.7h7.2l-11.3-24zm-10.4 12.9l4.1-9.9c.2-.3.3-.3.5-.3s.5 0 .5.3l4.1 9.9h-9.2zm-70-20.8c-3.2 0-5.2 1.7-6.7 5.1l-8.7 20.3-8.8-20.4c-1.4-3.3-3.5-5.1-6.7-5.1-3 0-6 2-6 6.7v25.1h6.7V18l8.9 20.1c1.1 2.9 3.2 4.6 5.9 4.6 2.9 0 4.8-1.7 5.9-4.6l8.9-20.1v24.5h6.7V17.4c-.1-4.7-3.1-6.9-6.1-6.9zm17.9 26.1c-.3 0-.7-.3-.7-.7v-4.8h16.8v-5.5h-16.8v-4.1c0-.3.3-.7.7-.7h16.7v-5.7h-20c-2.4 0-4 1.9-4 4V38c0 2 1.7 4 4 4h20v-5.7h-16.7v.3zm28 5.7V21.7c0-.3.3-.7.7-.7h16.7v-5.7h-20c-2.4 0-4 1.9-4 4v22.9l6.6.1zm122-13.4c0-9.4-4.1-13.8-14.3-13.8h-2.4c-10.2 0-14.3 4.5-14.3 13.8 0 9.2 4.1 13.8 14.3 13.8h2.2c10.4-.2 14.5-4.6 14.5-13.8zM257.9 37h-2.2c-5.5 0-7.8-2.5-7.8-8.1 0-5.4 1.9-8.1 7.8-8.1h2.2c5.7 0 7.8 2.7 7.8 8.1 0 5.5-2.1 8.1-7.8 8.1zm-35.2-25.9h-13.4c-10 0-14 5.1-14 13.8 0 1.4.2 2.7.3 3.8 1.1 6.2 4.8 10 14.1 10h3v3.5h6.7v-3.5h2.9c9.4 0 13.1-3.8 14.1-10 .2-1.1.3-2.4.3-3.8-.1-8.7-4.2-13.8-14-13.8zm-10.2 22h-3c-4.6 0-6.2-1.7-7.2-4.5-.3-1-.3-2.4-.3-3.8 0-5.7 2.7-8.1 6.5-8.1h4.1v16.4h-.1zm17.2-4.2c-1 2.7-2.7 4.5-7.2 4.5h-3V16.9h4.1c3.8 0 6.5 2.4 6.5 8.1-.1 1.5-.1 2.7-.4 3.9z"
+  })));
 };
 
 var greenVerticalImg = function greenVerticalImg(props) {
@@ -50,10 +48,8 @@ var greenVerticalImg = function greenVerticalImg(props) {
   }, /*#__PURE__*/React.createElement("path", {
     d: "M-124.9 372.3v32.4c0 1.4-1.2 2.5-2.6 2.5h-3.9c-.2 0-.3.2-.3.3v27.2c1 .1 1.9.1 2.9.1 17.4 0 31.5-14.1 31.5-31.5 0-15.8-12-29.1-27.6-31zm-.6 48.4c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9 2.2 0 3.9 1.8 3.9 3.9 0 2.2-1.8 3.9-3.9 3.9zm9.2 0c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9 2.2 0 3.9 1.8 3.9 3.9 0 2.2-1.7 3.9-3.9 3.9zm9.2 0c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9s3.9 1.8 3.9 3.9c0 2.2-1.7 3.9-3.9 3.9z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M-128.8 372.1c-17.4 0-31.5 14.1-31.5 31.5 0 15.1 10.6 27.7 24.8 30.8v-28.2c0-1.4 1.1-2.5 2.5-2.5h4c.2 0 .3-.1.3-.3v-31.1l-.1-.2zm-6 25.9c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9s3.9 1.8 3.9 3.9c0 2.2-1.7 3.9-3.9 3.9z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-    d: "M-63.6 453.5v6h-8v-6h-3.9v15.7h3.9v-6.3h8v6.3h3.9v-15.7zM-129.1 455.3c-.7-1.4-2-2.1-3.2-2.1-1.3 0-2.6.7-3.2 2.1l-6.4 13.9h4.2l1.4-3.3h8.1l1.4 3.3h4.2l-6.5-13.9zm-5.9 7.5l2.4-5.7c.1-.2.2-.2.3-.2.1 0 .2 0 .3.2l2.4 5.7h-5.4zM-175.8 450.7c-1.8 0-3 1-3.9 3l-5.1 11.8-5.1-11.8c-.9-2-2-3-3.9-3-1.7 0-3.5 1.2-3.5 3.9v14.6h3.9V455l5.2 11.7c.7 1.6 1.8 2.7 3.4 2.7 1.6 0 2.7-1 3.4-2.7l5.2-11.7v14.2h3.9v-14.6c0-2.7-1.8-3.9-3.5-3.9zM-165.4 465.9c-.2 0-.3-.2-.3-.3v-2.8h9.8v-3.2h-9.8v-2.4c0-.2.1-.3.3-.3h9.7v-3.3h-11.6c-1.4 0-2.3 1.1-2.3 2.3v11c0 1.2 1 2.3 2.3 2.3h11.6v-3.3h-9.7zM-149.1 469.2v-12c0-.2.1-.3.3-.3h9.7v-3.3h-11.6c-1.4 0-2.3 1.1-2.3 2.3v13.3h3.9zM-78.1 461.4c0-5.5-2.4-8-8.3-8h-1.4c-5.9 0-8.3 2.6-8.3 8s2.4 8 8.3 8h1.3c5.9 0 8.4-2.6 8.4-8zm-8.4 4.7h-1.3c-3.3 0-4.5-1.5-4.5-4.8 0-3.2 1.1-4.7 4.5-4.7h1.3c3.3 0 4.5 1.6 4.5 4.7 0 3.3-1.3 4.8-4.5 4.8zM-107.1 451.1h-7.8c-5.8 0-8.1 2.9-8.1 8.1 0 .8 0 1.5.2 2.2.6 3.6 2.7 5.9 8.2 5.9h1.7v2h3.9v-2h1.7c5.4 0 7.6-2.2 8.2-5.9.1-.7.2-1.4.2-2.2-.1-5.2-2.4-8.1-8.2-8.1zm-5.8 12.8h-1.8c-2.7 0-3.6-1-4.2-2.5-.2-.6-.2-1.4-.2-2.2 0-3.3 1.5-4.8 3.8-4.8h2.4v9.5zm9.9-2.5c-.6 1.6-1.5 2.5-4.2 2.5h-1.8v-9.5h2.4c2.3 0 3.8 1.4 3.8 4.8 0 .8 0 1.6-.2 2.2z"
-  }))));
+    d: "M-128.8 372.1c-17.4 0-31.5 14.1-31.5 31.5 0 15.1 10.6 27.7 24.8 30.8v-28.2c0-1.4 1.1-2.5 2.5-2.5h4c.2 0 .3-.1.3-.3v-31.1l-.1-.2zm-6 25.9c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9s3.9 1.8 3.9 3.9c0 2.2-1.7 3.9-3.9 3.9zm71.2 55.5v6h-8v-6h-3.9v15.7h3.9v-6.3h8v6.3h3.9v-15.7zm-65.5 1.8c-.7-1.4-2-2.1-3.2-2.1-1.3 0-2.6.7-3.2 2.1l-6.4 13.9h4.2l1.4-3.3h8.1l1.4 3.3h4.2l-6.5-13.9zm-5.9 7.5l2.4-5.7c.1-.2.2-.2.3-.2.1 0 .2 0 .3.2l2.4 5.7h-5.4zm-40.8-12.1c-1.8 0-3 1-3.9 3l-5.1 11.8-5.1-11.8c-.9-2-2-3-3.9-3-1.7 0-3.5 1.2-3.5 3.9v14.6h3.9V455l5.2 11.7c.7 1.6 1.8 2.7 3.4 2.7 1.6 0 2.7-1 3.4-2.7l5.2-11.7v14.2h3.9v-14.6c0-2.7-1.8-3.9-3.5-3.9zm10.4 15.2c-.2 0-.3-.2-.3-.3v-2.8h9.8v-3.2h-9.8v-2.4c0-.2.1-.3.3-.3h9.7v-3.3h-11.6c-1.4 0-2.3 1.1-2.3 2.3v11c0 1.2 1 2.3 2.3 2.3h11.6v-3.3h-9.7zm16.3 3.3v-12c0-.2.1-.3.3-.3h9.7v-3.3h-11.6c-1.4 0-2.3 1.1-2.3 2.3v13.3h3.9zm71-7.8c0-5.5-2.4-8-8.3-8h-1.4c-5.9 0-8.3 2.6-8.3 8s2.4 8 8.3 8h1.3c5.9 0 8.4-2.6 8.4-8zm-8.4 4.7h-1.3c-3.3 0-4.5-1.5-4.5-4.8 0-3.2 1.1-4.7 4.5-4.7h1.3c3.3 0 4.5 1.6 4.5 4.7 0 3.3-1.3 4.8-4.5 4.8zm-20.6-15h-7.8c-5.8 0-8.1 2.9-8.1 8.1 0 .8 0 1.5.2 2.2.6 3.6 2.7 5.9 8.2 5.9h1.7v2h3.9v-2h1.7c5.4 0 7.6-2.2 8.2-5.9.1-.7.2-1.4.2-2.2-.1-5.2-2.4-8.1-8.2-8.1zm-5.8 12.8h-1.8c-2.7 0-3.6-1-4.2-2.5-.2-.6-.2-1.4-.2-2.2 0-3.3 1.5-4.8 3.8-4.8h2.4v9.5zm9.9-2.5c-.6 1.6-1.5 2.5-4.2 2.5h-1.8v-9.5h2.4c2.3 0 3.8 1.4 3.8 4.8 0 .8 0 1.6-.2 2.2z"
+  })));
 };
 
 var cn = (0, _uiHelpers.cnCreate)('mfui-logo');

package/dist/lib/components/NavArrow/NavArrow.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-nav-arrow {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -29,17 +22,17 @@ h5 {
   display: block;
   width: 100%;
   height: 100%;
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-nav-arrow_theme_purple {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 .mfui-nav-arrow_theme_purple:hover:not(:disabled) {
-  background-color: #534455;
+  background-color: var(--buttonhoverPurple);
 }
 .mfui-nav-arrow_theme_dark {
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: var(--stcBlack20);
 }
 .mfui-nav-arrow_theme_dark:hover:not(:disabled) {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--stcBlack50);
 }

package/dist/lib/components/Notification/Notification.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -8,6 +55,7 @@ h5 {
 .mfui-notification {
   position: relative;
   padding: 16px 12px;
+  background-color: var(--background);
 }
 @media screen and (min-width: 768px) {
   .mfui-notification {
@@ -26,6 +74,7 @@ h5 {
 }
 .mfui-notification__title {
   margin-bottom: 8px;
+  color: var(--content);
 }
 @media screen and (min-width: 1280px) {
   .mfui-notification__title {
@@ -40,6 +89,7 @@ h5 {
   line-height: 24px;
   max-width: 100%;
   margin: 0;
+  color: var(--content);
 }
 .mfui-notification__text_close-padding {
   padding-right: 20px;
@@ -119,7 +169,7 @@ h5 {
   min-width: 20px;
   height: 20px;
   margin-top: 4px;
-  fill: #34AAF2;
+  fill: var(--systemBlue);
 }
 .mfui-notification__close {
   position: absolute;
@@ -135,12 +185,12 @@ h5 {
   cursor: pointer;
 }
 .mfui-notification__close:hover {
-  background-color: rgba(237, 237, 237, 0.6);
+  background-color: var(--stcBlack5);
 }
 .mfui-notification__close-icon {
   width: 20px;
   height: 20px;
-  fill: #333333;
+  fill: var(--content);
 }
 @media screen and (min-width: 768px) {
   .mfui-notification__close-icon {
@@ -149,63 +199,77 @@ h5 {
   }
 }
 .mfui-notification_type_error .mfui-notification__icon-container {
-  background-color: #FFC4C9;
+  background-color: var(--fury20);
 }
 .mfui-notification_type_error .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
-  fill: #F62434;
+  fill: var(--fury);
 }
 .mfui-notification_type_success .mfui-notification__icon-container {
-  background-color: #DDFFEC;
+  background-color: var(--brandGreen20);
 }
 .mfui-notification_type_success .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
-  fill: #00B956;
+  fill: var(--brandGreen);
 }
 .mfui-notification_type_warning .mfui-notification__icon-container {
-  background-color: #FFEDD1;
+  background-color: var(--137C20);
 }
 .mfui-notification_type_warning .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
-  fill: #FFA717;
+  fill: var(--137C);
 }
 .mfui-notification_type_info .mfui-notification__icon-container {
-  background-color: #E1FAFF;
+  background-color: var(--311C20);
 }
 .mfui-notification_type_info .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
-  fill: #5BD9E5;
+  fill: var(--311C);
 }
 .mfui-notification_colored .mfui-notification__icon-container {
-  background-color: #FFFFFF;
+  background-color: var(--stcWhite);
 }
 .mfui-notification_colored .mfui-notification__close:hover {
-  background-color: rgba(255, 255, 255, 0.3);
-}
-.mfui-notification_colored.mfui-notification_type_error {
-  background-color: #F8505D;
+  background-color: var(--stcWhite);
 }
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__title,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__title,
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__text,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__text,
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__link,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__link {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__right-arrow,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__right-arrow {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__icon-container,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container {
-  background-color: #FFFFFF33;
+  background-color: var(--stcWhite20);
 }
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__icon-container svg,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-notification_colored.mfui-notification_type_success {
-  background-color: #DDFFEC;
+  background-color: var(--brandGreen);
 }
-.mfui-notification_colored.mfui-notification_type_warning {
-  background-color: #FFEDD1;
+.mfui-notification_colored.mfui-notification_type_error {
+  background-color: var(--fury80);
+}
+.mfui-notification_colored.mfui-notification_type_info .mfui-notification__title,
+.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__title,
+.mfui-notification_colored.mfui-notification_type_info .mfui-notification__text,
+.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__text,
+.mfui-notification_colored.mfui-notification_type_info .mfui-notification__link,
+.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__link {
+  color: var(--stcBlack);
 }
 .mfui-notification_colored.mfui-notification_type_info {
-  background-color: #E1FAFF;
+  background-color: var(--311C20);
+}
+.mfui-notification_colored.mfui-notification_type_warning {
+  background-color: var(--137C20);
 }

package/dist/lib/components/Pagination/Pagination.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-pagination {
   display: -webkit-box;
   display: -ms-flexbox;

package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -33,30 +80,30 @@ h5 {
   pointer-events: none;
 }
 .mfui-pagination-button_active {
-  border-color: #00B956;
+  border-color: var(--brandGreen);
   pointer-events: none;
 }
 .mfui-pagination-button_theme_default {
-  color: #333333;
+  color: var(--content);
 }
 .mfui-pagination-button_theme_default svg {
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-pagination-button_theme_default:hover {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-pagination-button_theme_default.mfui-pagination-button_active {
-  border-color: #00B956;
+  border-color: var(--brandGreen);
 }
 .mfui-pagination-button_theme_light {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-pagination-button_theme_light svg {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-pagination-button_theme_light:hover {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: var(--stcWhite20);
 }
 .mfui-pagination-button_theme_light.mfui-pagination-button_active {
-  border-color: #FFFFFF;
+  border-color: var(--stcWhite);
 }

package/dist/lib/components/Pagination/components/PaginationNavigation/PaginationNavigation.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,

package/dist/lib/components/Paragraph/Paragraph.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-paragraph {
   font-family: inherit;
   margin: 0;
@@ -31,30 +24,27 @@ h5 {
   margin: 0 0 16px;
 }
 .mfui-paragraph_color_green {
-  color: #00B956;
+  color: var(--brandGreen);
 }
 .mfui-paragraph_color_purple {
-  color: #731982;
+  color: var(--brandPurple);
 }
 .mfui-paragraph_color_base,
 .mfui-paragraph_color_clearWhite {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-paragraph_color_spbSky0 {
-  color: #F6F6F6;
+  color: var(--spbSky0);
 }
 .mfui-paragraph_color_spbSky1 {
-  color: #EDEDED;
+  color: var(--spbSky1);
 }
 .mfui-paragraph_color_spbSky2 {
-  color: #D8D8D8;
+  color: var(--spbSky2);
 }
 .mfui-paragraph_color_content,
 .mfui-paragraph_color_freshAsphalt {
-  color: #333333;
-}
-.mfui-paragraph_color_fullBlack {
-  color: #000000;
+  color: var(--content);
 }
 .mfui-paragraph_color_inherit {
   color: inherit;

package/dist/lib/components/Paragraph/Paragraph.d.ts

@@ -8,7 +8,6 @@ declare const COLORS: {
     SPB_SKY_1: string;
     SPB_SKY_2: string;
     CONTENT: string;
-    FULL_BLACK: string;
     INHERIT: string;
     /** @deprecated */
     CLEAR_WHITE: string;

package/dist/lib/components/Paragraph/Paragraph.js

@@ -33,7 +33,6 @@ var COLORS = {
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2',
   CONTENT: 'content',
-  FULL_BLACK: 'fullBlack',
   INHERIT: 'inherit',
 
   /** @deprecated */
@@ -74,7 +73,7 @@ Paragraph.propTypes = {
     var propValue = props[propName];
 
     if (propValue && !Object.values(COLORS).includes(propValue)) {
-      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "', \n            expected one of [").concat(Object.values(COLORS), "]"));
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            expected one of [").concat(Object.values(COLORS), "]"));
     }
 
     if (propValue && props[propName] === deprecatedBlackValue) {

package/dist/lib/components/Preloader/Preloader.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-preloader {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -106,20 +99,20 @@ h5 {
           animation: scaling 1s linear infinite;
 }
 .mfui-preloader_color_default .mfui-preloader__item_first:before {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-preloader_color_default .mfui-preloader__item_second:before {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
   -webkit-animation-delay: 0.166s;
           animation-delay: 0.166s;
 }
 .mfui-preloader_color_default .mfui-preloader__item_third:before {
-  background-color: #731982;
+  background-color: var(--brandPurple);
   -webkit-animation-delay: 0.33s;
           animation-delay: 0.33s;
 }
 .mfui-preloader_color_black .mfui-preloader__item:before {
-  background-color: #000000;
+  background-color: var(--stcBlack);
   opacity: 0.35;
   -webkit-animation: opacityScaling 1s linear infinite;
           animation: opacityScaling 1s linear infinite;
@@ -133,7 +126,7 @@ h5 {
           animation-delay: 0.33s;
 }
 .mfui-preloader_color_white .mfui-preloader__item:before {
-  background-color: #FFFFFF;
+  background-color: var(--stcWhite);
   -webkit-animation: scaling 1s linear infinite;
           animation: scaling 1s linear infinite;
 }

package/dist/lib/components/RadioButton/RadioButton.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-radio-button__input {
   position: absolute;
   top: 0;
@@ -48,22 +41,22 @@ h5 {
           box-sizing: border-box;
   width: 20px;
   height: 20px;
-  border: 2px solid #D8D8D8;
+  border: 2px solid var(--spbSky2);
   border-radius: 50%;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
-  border: 6px solid #00B956;
+  border: 6px solid var(--brandGreen);
 }
 .mfui-radio-button__label:hover .mfui-radio-button__custom-input:before {
-  border-color: #10E272;
+  border-color: var(--buttonHoverGreen);
 }
 .mfui-radio-button__label:active .mfui-radio-button__custom-input:before {
-  border-color: #404D46;
+  border-color: var(--buttonDown);
 }
 .mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before {
-  border-color: #D8D8D8 !important;
-  background-color: #EDEDED !important;
+  border-color: var(--spbSky2) !important;
+  background-color: var(--spbSky1) !important;
 }
 .mfui-radio-button__text_size_small {
   font-size: 12px;