@megafon/ui-core 3.0.0-beta.0 → 3.0.0-beta.4

package/dist/es/components/Accordion/Accordion.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs, checkEventIsClickOrEnterPress } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import Collapse from "../Collapse/Collapse";
 import Header from "../Header/Header";
@@ -52,9 +52,11 @@ var Accordion = function Accordion(_ref) {
     setIsOpenedState(isOpened);
   }, [isOpened]);
 
-  var handleClickTitle = function handleClickTitle() {
-    onClickAccordion && onClickAccordion(!isOpenedState, title);
-    setIsOpenedState(!isOpenedState);
+  var handleClickTitle = function handleClickTitle(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      onClickAccordion && onClickAccordion(!isOpenedState);
+      setIsOpenedState(!isOpenedState);
+    }
   };
 
   var openedClassName = isOpenedState ? openedClass : undefined;
@@ -65,10 +67,13 @@ var Accordion = function Accordion(_ref) {
     }, [className, rootPropsClasses, openedClassName])
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('title-wrap', [titleWrapPropsClasses]),
-    onClick: handleClickTitle
+    onClick: handleClickTitle,
+    onKeyDown: handleClickTitle
   }, /*#__PURE__*/React.createElement(Header, {
     as: "h5"
   }, title), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "button",
     className: cn('icon-box', {
       open: isOpenedState
     })

package/dist/es/components/Banner/Banner.css

@@ -1,57 +1,3 @@
-: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,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-banner {
   position: relative;
   overflow: hidden;
@@ -147,7 +93,7 @@ h5 {
   background-color: transparent;
 }
 .mfui-banner__pagination_theme_green {
-  background-color: var(--green);
+  background-color: var(--brandGreen);
 }
 .mfui-banner__pagination_theme_dark {
   background-color: var(--stcBlack20);

package/dist/es/components/Banner/BannerDot.css

@@ -1,57 +1,3 @@
-: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,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-banner-dot {
   display: -webkit-box;
   display: -ms-flexbox;

package/dist/es/components/Button/Button.css

@@ -1,67 +1,3 @@
-: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,
-h4,
-h5 {
-  margin: 0;
-}
-:root {
-  --green7: rgba(0, 185, 86, 0.07);
-  --green14: rgba(0, 185, 86, 0.14);
-  --purple7: rgba(115, 25, 130, 0.07);
-  --purple14: rgba(115, 25, 130, 0.14);
-  --content7: rgba(51, 51, 51, 0.07);
-  --content14: rgba(51, 51, 51, 0.14);
-  --base7: rgba(255, 255, 255, 0.07);
-  --base14: rgba(255, 255, 255, 0.14);
-}
 .mfui-button {
   font-family: inherit;
   font-size: 15px;
@@ -265,7 +201,7 @@ h5 {
 }
 .mfui-button_type_primary.mfui-button_theme_green {
   color: var(--stcWhite);
-  background-color: var(--green);
+  background-color: var(--brandGreen);
 }
 .mfui-button_type_primary.mfui-button_theme_green svg {
   fill: var(--stcWhite);
@@ -282,7 +218,7 @@ h5 {
 }
 .mfui-button_type_primary.mfui-button_theme_purple {
   color: var(--stcWhite);
-  background-color: var(--purple);
+  background-color: var(--brandPurple);
 }
 .mfui-button_type_primary.mfui-button_theme_purple svg {
   fill: var(--stcWhite);
@@ -319,34 +255,42 @@ h5 {
           box-shadow: inset 0 0 0 1px var(--buttonDown);
 }
 .mfui-button_type_outline.mfui-button_theme_green {
-  color: var(--green);
+  color: var(--brandGreen);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px var(--green);
-          box-shadow: inset 0 0 0 1px var(--green);
+  -webkit-box-shadow: inset 0 0 0 1px var(--brandGreen);
+          box-shadow: inset 0 0 0 1px var(--brandGreen);
 }
 .mfui-button_type_outline.mfui-button_theme_green svg {
-  fill: var(--green);
+  fill: var(--brandGreen);
+}
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green {
+  --brandGreen7: rgba(0, 185, 86, 0.07);
+  --brandGreen14: rgba(0, 185, 86, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):hover {
-  background-color: var(--green7);
+  background-color: var(--brandGreen7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):active {
-  background-color: var(--green14);
+  background-color: var(--brandGreen14);
 }
 .mfui-button_type_outline.mfui-button_theme_purple {
-  color: var(--purple);
+  color: var(--brandPurple);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px var(--purple);
-          box-shadow: inset 0 0 0 1px var(--purple);
+  -webkit-box-shadow: inset 0 0 0 1px var(--brandPurple);
+          box-shadow: inset 0 0 0 1px var(--brandPurple);
 }
 .mfui-button_type_outline.mfui-button_theme_purple svg {
-  fill: var(--purple);
+  fill: var(--brandPurple);
+}
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple {
+  --brandPurple7: rgba(115, 25, 130, 0.07);
+  --brandPurple14: rgba(115, 25, 130, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):hover {
-  background-color: var(--purple7);
+  background-color: var(--brandPurple7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):active {
-  background-color: var(--purple14);
+  background-color: var(--brandPurple14);
 }
 .mfui-button_type_outline.mfui-button_theme_white {
   color: var(--stcWhite);
@@ -357,6 +301,10 @@ h5 {
 .mfui-button_type_outline.mfui-button_theme_white svg {
   fill: var(--stcWhite);
 }
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white {
+  --base7: rgba(255, 255, 255, 0.07);
+  --base14: rgba(255, 255, 255, 0.14);
+}
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):hover {
   background-color: var(--base7);
 }
@@ -372,6 +320,10 @@ h5 {
 .mfui-button_type_outline.mfui-button_theme_black svg {
   fill: var(--stcBlack);
 }
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black {
+  --content7: rgba(51, 51, 51, 0.07);
+  --content14: rgba(51, 51, 51, 0.14);
+}
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):hover {
   background-color: var(--content7);
 }

package/dist/es/components/Calendar/Calendar.css

@@ -1,57 +1,3 @@
-: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,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-calendar {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;

package/dist/es/components/Calendar/components/Day/Day.css

@@ -1,57 +1,3 @@
-: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,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-day {
   position: relative;
   -webkit-box-sizing: content-box;
@@ -100,7 +46,7 @@ h5 {
 }
 .mfui-day:not(:disabled):not(.mfui-day_active):focus:after,
 .mfui-day_active:after {
-  background-color: var(--green);
+  background-color: var(--brandGreen);
 }
 .mfui-day_disabled {
   cursor: default;

package/dist/es/components/Calendar/components/Month/Month.css

@@ -1,57 +1,3 @@
-: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,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-month {
   position: relative;
   z-index: 1;

package/dist/es/components/Calendar/components/Month/Month.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.array.concat";
 import "core-js/modules/es.array.map";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate } from '@megafon/ui-helpers';
 import "./Month.css";
 import PropTypes from 'prop-types';
 
@@ -38,12 +38,22 @@ var Month = function Month(_ref) {
       goToNextMonth = _ref.goToNextMonth,
       children = _ref.children;
 
-  var handleArrowLeftClick = function handleArrowLeftClick() {
-    !isPrevMonthDisabled && goToPreviousMonth();
+  var handleArrowLeftClick = function handleArrowLeftClick(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      !isPrevMonthDisabled && goToPreviousMonth();
+    }
   };
 
-  var handleArrowRightClick = function handleArrowRightClick() {
-    !isNextMonthDisabled && goToNextMonth();
+  var handleArrowRightClick = function handleArrowRightClick(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      !isNextMonthDisabled && goToNextMonth();
+    }
+  };
+
+  var getTabIndex = function getTabIndex(hasFocus) {
+    var tabIndexWithFocus = 0;
+    var tabIndexWithoutFocus = -1;
+    return hasFocus ? tabIndexWithFocus : tabIndexWithoutFocus;
   };
 
   return /*#__PURE__*/React.createElement("div", {
@@ -51,16 +61,22 @@ var Month = function Month(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('header')
   }, /*#__PURE__*/React.createElement(ArrowLeft, {
+    role: "button",
+    tabIndex: getTabIndex(!isPrevMonthDisabled),
     className: cn('arrow', {
       disabled: isPrevMonthDisabled
     }),
+    onKeyDown: handleArrowLeftClick,
     onClick: handleArrowLeftClick
   }), /*#__PURE__*/React.createElement("span", {
     className: cn('title')
   }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/React.createElement(ArrowRight, {
+    role: "button",
+    tabIndex: getTabIndex(!isNextMonthDisabled),
     className: cn('arrow', {
       disabled: isNextMonthDisabled
     }),
+    onKeyDown: handleArrowRightClick,
     onClick: handleArrowRightClick
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('weekday-labels')

package/dist/es/components/Carousel/Carousel.css

@@ -1,57 +1,3 @@
-: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,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-carousel {
   position: relative;
   display: -webkit-box;
@@ -226,5 +172,5 @@ h5 {
   cursor: default;
 }
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before {
-  background-color: var(--purple);
+  background-color: var(--brandPurple);
 }

package/dist/es/components/Checkbox/Checkbox.css

@@ -1,57 +1,3 @@
-: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,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-checkbox {
   margin: 0 5px 12px 5px;
 }
@@ -149,9 +95,9 @@ h5 {
   fill: var(--stcWhite);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
-  border-color: var(--green);
+  border-color: var(--brandGreen);
   color: var(--stcWhite);
-  background-color: var(--green);
+  background-color: var(--brandGreen);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
   background-color: var(--buttonHoverGreen);
@@ -180,6 +126,6 @@ h5 {
 }
 .mfui-checkbox_color_light .mfui-checkbox__custom-input {
   border-color: var(--stcWhite);
-  color: var(--green);
+  color: var(--brandGreen);
   background-color: var(--stcWhite);
 }