@megafon/ui-shared 2.2.1 → 3.0.0-beta.10

package/CHANGELOG.md

@@ -3,26 +3,144 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.2.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.2.0...@megafon/ui-shared@2.2.1) (2022-01-31)
+# [3.0.0-beta.10](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.9...@megafon/ui-shared@3.0.0-beta.10) (2022-02-08)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
+# [3.0.0-beta.9](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.8...@megafon/ui-shared@3.0.0-beta.9) (2022-02-08)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
+# [3.0.0-beta.8](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.7...@megafon/ui-shared@3.0.0-beta.8) (2022-02-08)
+
+
+### Features
+
+* **accordionbox:** remove prop hasVerticalPaddings ([82218ad](https://github.com/MegafonWebLab/megafon-ui/commit/82218ad0307c3f566cf9f582a824733e3523be3d))
+
+
+### BREAKING CHANGES
+
+* **accordionbox:** remove prop hasVerticalPaddings
+
+
+
+
+
+# [3.0.0-beta.7](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.6...@megafon/ui-shared@3.0.0-beta.7) (2022-02-04)
 
 
 ### Bug Fixes
 
-* **storebanner:** update qr code image for storebanner examples and fix qr code container styles ([1845222](https://github.com/MegafonWebLab/megafon-ui/commit/1845222e5211e70a8f5aa36ab4a710ecd46e8a14))
+* **components:** change tests for dataAttrs prop ([2a8f306](https://github.com/MegafonWebLab/megafon-ui/commit/2a8f3061a4e89f6877894e5947db7bae2827f86a))
+
+
+
 
 
+# [3.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.5...@megafon/ui-shared@3.0.0-beta.6) (2022-02-02)
 
 
+### Bug Fixes
+
+* color props values changes ([b279f2b](https://github.com/MegafonWebLab/megafon-ui/commit/b279f2b5af0edae92fe9825bbfa90a207cb8009a))
+* remove deprecated props values ([add76f3](https://github.com/MegafonWebLab/megafon-ui/commit/add76f38a9ebad8b5b6504dfe6aae862746f0dfc))
+* **core:** fix build ui-core ([458c824](https://github.com/MegafonWebLab/megafon-ui/commit/458c824aab639e4802db261d0416b3cee58ac274))
+
+
+### BREAKING CHANGES
+
+* ContentArea: prop color change values from 'base' to 'white' and from 'content' to 'default';
+remove depreacted value 'freshAsphalt'
+Paragraph: prop color change values from 'base' to 'white' and from 'contend' to 'default';
+remove deprecared values 'freshAsphalt' and 'clearWhite'
+StoreBanner: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
+* ContentArea, Paragraph, StoreBanner and Breadcrumbs components from no don't have
+freshAsphalt and clearWhite as values for colorize props
 
-# [2.2.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.1.5...@megafon/ui-shared@2.2.0) (2022-01-24)
+
+
+
+
+# [3.0.0-beta.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.4...@megafon/ui-shared@3.0.0-beta.5) (2022-01-28)
 
 
 ### Features
 
-* **accordionbox:** props hasVerticalPaddings marked as deprecated ([7dbb43b](https://github.com/MegafonWebLab/megafon-ui/commit/7dbb43b1178f4055ecd0f4eed5614024da638091))
-* **container:** add rules for TextWithIcon component ([4c692ab](https://github.com/MegafonWebLab/megafon-ui/commit/4c692ab43db115dc7c5aeba39713d6f2ae2daaff))
-* **textwithicon:** add component TextWithIcon ([b772728](https://github.com/MegafonWebLab/megafon-ui/commit/b772728b8739dbbfa550eef1c8eedb56cda620c9))
-* **videoblock:** made button optional ([eef7c17](https://github.com/MegafonWebLab/megafon-ui/commit/eef7c174415b28fe3512d8c28fcd9bb73774dd2e))
+* **header:** made header as a functional component ([81701ad](https://github.com/MegafonWebLab/megafon-ui/commit/81701ad87b6e9df2fe630bf4e183383264c0bb01))
+
+
+
+
+
+# [3.0.0-beta.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.3...@megafon/ui-shared@3.0.0-beta.4) (2022-01-27)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
+# [3.0.0-beta.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.2...@megafon/ui-shared@3.0.0-beta.3) (2022-01-24)
+
+
+### Bug Fixes
+
+* **accordion-box:** change type of onClickAccordion prop ([5d5cef5](https://github.com/MegafonWebLab/megafon-ui/commit/5d5cef5e2dd70efa808a6146e29daf1c882af304))
+
+
+### BREAKING CHANGES
+
+* **accordion-box:** remove parameter 'title' in onClickAccordion prop
+
+
+
+
+
+# [3.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.1...@megafon/ui-shared@3.0.0-beta.2) (2022-01-21)
+
+**Note:** Version bump only for package @megafon/ui-shared
+
+
+
+
+
+# [3.0.0-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.0.0-beta.0...@megafon/ui-shared@3.0.0-beta.1) (2022-01-20)
+
+
+### Bug Fixes
+
+* **colors:** renabe green and purple to brandGreen and brandPurple to avoid postcss-colormin bug ([563d97c](https://github.com/MegafonWebLab/megafon-ui/commit/563d97c42900099415a6872f57b500b87aeed647))
+
+
+### BREAKING CHANGES
+
+* **colors:** green, green20, green80, purple, purple20 and purple80 colors now have 'brand'
+prefix (e.g. brandGreen)
+
+
+
+
+
+# [3.0.0-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.1.5...@megafon/ui-shared@3.0.0-beta.0) (2022-01-19)
+
+
+### Features
+
+* **colors:** css custom properties and color themes support ([b19a9a5](https://github.com/MegafonWebLab/megafon-ui/commit/b19a9a5112ebc7427d60f6514d606dd9d71ca444))
+
+
+### BREAKING CHANGES
+
+* **colors:** read commit description
 
 
 

package/dist/es/components/AccordionBox/AccordionBox.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import './AccordionBox.less';
 export interface IAccordionBox {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
@@ -15,9 +15,6 @@ export interface IAccordionBox {
     isFullWidth?: boolean;
     /** Центрирование по горизонтали для расширения 1280+ */
     hCenterAlignWide?: boolean;
-    /** Вертикальные отступы */
-    /** @deprecated */
-    hasVerticalPaddings?: boolean;
     /** Дополнительный класс для корнеовго элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */
@@ -28,7 +25,7 @@ export interface IAccordionBox {
         titleWrap?: string;
     };
     /** Обработчик клика */
-    onClickAccordion?: (isOpened: boolean, title: string) => void;
+    onClickAccordion?: (isOpened: boolean) => void;
 }
 declare const AccordionBox: React.FC<IAccordionBox>;
 export default AccordionBox;

package/dist/es/components/AccordionBox/AccordionBox.js

@@ -41,7 +41,9 @@ var AccordionBox = function AccordionBox(_a) {
 };
 
 AccordionBox.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
@@ -49,9 +51,6 @@ AccordionBox.propTypes = {
   isFullWidth: PropTypes.bool,
   isOpened: PropTypes.bool,
   hCenterAlignWide: PropTypes.bool,
-  hasVerticalPaddings: function hasVerticalPaddings(props, propName) {
-    return props[propName] && new Error('Failed prop type: Prop "hasVerticalPaddings" is deprecated');
-  },
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,

package/dist/es/components/Breadcrumbs/Breadcrumbs.css

@@ -12,11 +12,14 @@ h5 {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
+.mfui-breadcrumbs_color_default .mfui-breadcrumbs__item:before {
+  color: var(--content);
+}
 .mfui-breadcrumbs_color_black .mfui-breadcrumbs__item:before {
-  color: #333333;
+  color: var(--stcBlack);
 }
 .mfui-breadcrumbs_color_white .mfui-breadcrumbs__item:before {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-breadcrumbs__icon {
   position: relative;

package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import './Breadcrumbs.less';
 declare type ItemType = {
-    title: string;
+    component?: React.ReactElement;
+    title?: string;
     href?: string;
 };
 export declare const TextColor: {
+    readonly DEFAULT: "default";
     readonly BLACK: "black";
     readonly WHITE: "white";
 };

package/dist/es/components/Breadcrumbs/Breadcrumbs.js

@@ -6,6 +6,7 @@ import { cnCreate } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./Breadcrumbs.css";
 export var TextColor = {
+  DEFAULT: 'default',
   BLACK: 'black',
   WHITE: 'white'
 };
@@ -23,15 +24,16 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       color: color
     }, className)
   }, items.map(function (_ref2) {
-    var title = _ref2.title,
+    var component = _ref2.component,
+        title = _ref2.title,
         href = _ref2.href;
     return /*#__PURE__*/React.createElement("div", {
       className: cn('item', classes.item),
       key: title
-    }, /*#__PURE__*/React.createElement(TextLink, {
+    }, component, !component && /*#__PURE__*/React.createElement(TextLink, {
       href: href,
       color: color
-    }, title));
+    }, component || title));
   }));
 };
 

package/dist/es/components/ButtonBanner/ButtonBanner.css

@@ -7,8 +7,8 @@ h5 {
 }
 .mfui-button-banner {
   position: relative;
-  border: 1px solid #D8D8D8;
-  background-color: #FFFFFF;
+  border: 1px solid var(--spbSky2);
+  background-color: var(--base);
   border-radius: 0 8px 8px 0;
 }
 @media screen and (max-width: 767px) {
@@ -23,7 +23,7 @@ h5 {
   bottom: 0;
   left: 0;
   width: 12px;
-  background-color: #00B956;
+  background-color: var(--brandGreen);
   border-radius: 0 12px 12px 0;
 }
 @media screen and (max-width: 767px) {

package/dist/es/components/ButtonBanner/ButtonBanner.d.ts

@@ -16,9 +16,9 @@ export declare const ImageScaling: {
 };
 declare type ImageScalingType = typeof ImageScaling[keyof typeof ImageScaling];
 export interface IButtonBannerProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Дополнительный css класс для корневого элемента */
     className?: string;

package/dist/es/components/ButtonBanner/ButtonBanner.js

@@ -54,7 +54,7 @@ var ButtonBanner = function ButtonBanner(_ref) {
     onClick: onButtonClick,
     download: buttonDownload
   }, buttonText);
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       image: !!imageUrl,
       scaling: imageScaling
@@ -85,7 +85,9 @@ var ButtonBanner = function ButtonBanner(_ref) {
 };
 
 ButtonBanner.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts

@@ -1,9 +1,9 @@
 import React, { Ref } from 'react';
 import './ButtonLinkBox.less';
 export interface IButtonLinkBoxProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js

@@ -26,7 +26,7 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       onButtonClick = _ref.onButtonClick,
       onLinkClick = _ref.onLinkClick;
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'h-align': hAlign
     }, [className, classes.root]),
@@ -53,7 +53,9 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
 };
 
 ButtonLinkBox.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

package/dist/es/components/Card/Card.css

@@ -11,7 +11,7 @@ h5 {
   display: flex;
   border-radius: 8px;
   overflow: hidden;
-  background-color: #FFFFFF;
+  background-color: var(--background);
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
 }
@@ -43,7 +43,7 @@ h5 {
   line-height: 24px;
   font-weight: 400;
   margin-top: 12px;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-card__btns-wrapper {
   display: -webkit-box;
@@ -66,7 +66,7 @@ h5 {
           justify-content: flex-start;
 }
 .mfui-card__fake-link {
-  color: #34AAF2;
+  color: var(--systemBlue);
 }
 .mfui-card__button,
 .mfui-card__link,

package/dist/es/components/Container/Container.css

@@ -9,19 +9,19 @@ h5 {
   padding-bottom: 96px;
 }
 .mfui-container_bg-color_default {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-container_bg-color_light-gray {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-container_bg-color_gray {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-container_bg-color_green {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-container_bg-color_purple {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container {
@@ -2230,9 +2230,6 @@ h5 {
 .mfui-container .mfui-text-box + .mfui-download-links {
   margin-top: 32px;
 }
-.mfui-container .mfui-text-box + extract(.mfui-video-banner, .mfui-title-description-box, .mfui-benefits-icons, .mfui-benefits-pictures, .mfui-cards-box, .mfui-carousel-box, .mfui-video-block, .mfui-tabs-box, .mfui-partners, .mfui-instructions, .mfui-property, .mfui-table, .mfui-accordion-box, .mfui-button-link-box, .mfui-download-links, .mfui-text-box, .mfui-picture-with-description, .mfui-store-banner, .mfui-button-banner, .mfui-steps, .mfui-page-title, .mfui-text-with-icon, 23) {
-  margin-top: 24px;
-}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-text-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2872,163 +2869,6 @@ h5 {
 .mfui-container .mfui-page-title + .mfui-button-link-box {
   margin-top: 0 !important;
 }
-.mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-cards-box {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-carousel-box {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-video-block {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-tabs-box {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-partners {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-instructions {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-property {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-table {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-accordion-box {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-button-link-box {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-download-links {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-text-box {
-  margin-top: 24px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-store-banner {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-button-banner {
-  margin-top: 40px;
-}
-.mfui-container .mfui-text-with-icon + .mfui-steps {
-  margin-top: 40px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-video-block {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-partners {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-instructions {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-property {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-table {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-download-links {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-text-box {
-    margin-top: 24px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-steps {
-    margin-top: 48px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-video-block {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-partners {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-instructions {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-property {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-table {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-download-links {
-    margin-top: 48px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-text-box {
-    margin-top: 24px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
-    margin-top: 56px;
-  }
-  .mfui-container .mfui-text-with-icon + .mfui-steps {
-    margin-top: 56px;
-  }
-}
 .mfui-container_disable-padding-top {
   padding-top: 0 !important;
 }

package/dist/es/components/DownloadLinks/DownloadLink.css

@@ -16,6 +16,7 @@ h5 {
   width: 40px;
   height: 40px;
   margin-right: 22px;
+  fill: var(--content);
 }
 @media screen and (max-width: 1023px) {
   .mfui-download-link__icon {
@@ -31,6 +32,6 @@ h5 {
   margin: 0;
   font-size: 12px;
   line-height: 16px;
-  color: #33333380;
+  color: var(--stcBlack5);
   text-transform: uppercase;
 }

package/dist/es/components/Instructions/Instructions.css

@@ -111,7 +111,7 @@ h5 {
     width: 324px;
     height: 1px;
     margin: 0 auto;
-    background: #D8D8D8;
+    background: var(--spbSky2);
   }
 }
 .mfui-instructions__device-screen {
@@ -355,7 +355,7 @@ h5 {
 }
 .mfui-instructions__articles-item:hover .mfui-instructions__articles-item-dot,
 .mfui-instructions__articles-item_active .mfui-instructions__articles-item-dot {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-instructions__articles-item:hover .mfui-instructions__articles-item-dot:before,
 .mfui-instructions__articles-item_active .mfui-instructions__articles-item-dot:before {
@@ -363,7 +363,7 @@ h5 {
   right: 0;
   bottom: 0;
   left: 0;
-  background: #00B956;
+  background: var(--brandGreen);
 }
 @media screen and (min-width: 1024px) {
   .mfui-instructions__articles-item:last-child {
@@ -381,8 +381,8 @@ h5 {
   font-size: 15px;
   line-height: 40px;
   text-align: center;
-  -webkit-box-shadow: inset 0 0 0 1px #B2B2B2;
-          box-shadow: inset 0 0 0 1px #B2B2B2;
+  -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
+          box-shadow: inset 0 0 0 1px var(--spbSky3);
   cursor: pointer;
 }
 @media screen and (max-width: 479px) {
@@ -449,7 +449,7 @@ h5 {
 }
 .mfui-instructions__articles-dot:hover,
 .mfui-instructions__articles-dot_active {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-instructions__articles-dot:hover:before,
 .mfui-instructions__articles-dot_active:before {
@@ -457,7 +457,7 @@ h5 {
   right: 0;
   bottom: 0;
   left: 0;
-  background: #00B956;
+  background: var(--brandGreen);
 }
 .mfui-instructions__articles-dot:last-child {
   margin-right: 0;

package/dist/es/components/PageTitle/PageTitle.css

@@ -41,9 +41,9 @@ h5 {
   display: inline-block;
   margin-top: 16px;
   padding: 2px 14px;
-  color: #FFFFFF;
+  color: var(--stcWhite);
   font-weight: 500;
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 @media screen and (min-width: 1280px) {
   .mfui-page-title__badge_under-breadcrumbs {