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

package/dist/es/components/Checkbox/Checkbox.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,
@@ -89,32 +136,32 @@ h5 {
   top: 0;
 }
 .mfui-checkbox_color_dark .mfui-checkbox__custom-input {
-  border-color: #D8D8D8;
+  border-color: var(--spbSky2);
 }
 .mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
-  border-color: #10E272;
+  border-color: var(--buttonHoverGreen);
 }
 .mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: #404D46 !important;
-  background-color: #404D46;
+  border-color: var(--buttonDown) !important;
+  background-color: var(--buttonDown);
 }
 .mfui-checkbox_color_dark .mfui-checkbox__icon {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
-  border-color: #00B956;
-  color: #FFFFFF;
-  background-color: #00B956;
+  border-color: var(--green);
+  color: var(--stcWhite);
+  background-color: var(--green);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
-  background-color: #10E272;
+  background-color: var(--buttonHoverGreen);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: #404D46 !important;
+  background-color: var(--buttonDown) !important;
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input,
 .mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label {
   cursor: default;
@@ -122,17 +169,17 @@ h5 {
 }
 .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__custom-input,
 .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: #D8D8D8 !important;
-  background-color: #EDEDED;
+  border-color: var(--spbSky2) !important;
+  background-color: var(--spbSky1);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_error .mfui-checkbox__custom-input {
-  border-color: #F62434;
+  border-color: var(--fury);
 }
 .mfui-checkbox_color_light {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-checkbox_color_light .mfui-checkbox__custom-input {
-  border-color: #FFFFFF;
-  color: #00B956;
-  background-color: #FFFFFF;
+  border-color: var(--stcWhite);
+  color: var(--green);
+  background-color: var(--stcWhite);
 }

package/dist/es/components/ContentArea/ContentArea.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,
@@ -5,33 +52,31 @@ h4,
 h5 {
   margin: 0;
 }
+.mfui-content-area_color_base,
 .mfui-content-area_color_white {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-content-area_color_transparent {
   background-color: transparent;
 }
 .mfui-content-area_color_green {
-  background-color: #00B956;
+  background-color: var(--green);
 }
 .mfui-content-area_color_purple {
-  background-color: #731982;
+  background-color: var(--purple);
 }
 .mfui-content-area_color_spbSky0 {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-content-area_color_spbSky1 {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-content-area_color_spbSky2 {
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .mfui-content-area_color_content,
 .mfui-content-area_color_freshAsphalt {
-  background-color: #333333;
-}
-.mfui-content-area_color_fullBlack {
-  background-color: #000000;
+  background-color: var(--content);
 }
 .mfui-content-area__inner {
   -webkit-box-sizing: content-box;
@@ -81,31 +126,29 @@ h5 {
   padding-right: 0;
   padding-left: 0;
 }
+.mfui-content-area__inner_color_base,
 .mfui-content-area__inner_color_white {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-content-area__inner_color_transparent {
   background-color: transparent;
 }
 .mfui-content-area__inner_color_green {
-  background-color: #00B956;
+  background-color: var(--green);
 }
 .mfui-content-area__inner_color_purple {
-  background-color: #731982;
+  background-color: var(--purple);
 }
 .mfui-content-area__inner_color_spbSky0 {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-content-area__inner_color_spbSky1 {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-content-area__inner_color_spbSky2 {
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .mfui-content-area__inner_color_content,
 .mfui-content-area__inner_color_freshAsphalt {
-  background-color: #333333;
-}
-.mfui-content-area__inner_color_fullBlack {
-  background-color: #000000;
+  background-color: var(--content);
 }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import './ContentArea.less';
 declare const BACKGROUND_COLORS: {
-    readonly WHITE: "white";
+    readonly BASE: "base";
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
@@ -9,7 +9,8 @@ declare const BACKGROUND_COLORS: {
     readonly SPB_SKY_1: "spbSky1";
     readonly SPB_SKY_2: "spbSky2";
     readonly CONTENT: "content";
-    readonly FULL_BLACK: "fullBlack";
+    /** @deprecated */
+    readonly WHITE: "white";
     /** @deprecated */
     readonly FRESH_ASPHALT: "freshAsphalt";
 };

package/dist/es/components/ContentArea/ContentArea.js

@@ -7,7 +7,7 @@ import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./ContentArea.css";
 var BACKGROUND_COLORS = {
-  WHITE: 'white',
+  BASE: 'base',
   TRANSPARENT: 'transparent',
   GREEN: 'green',
   PURPLE: 'purple',
@@ -15,7 +15,9 @@ var BACKGROUND_COLORS = {
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2',
   CONTENT: 'content',
-  FULL_BLACK: 'fullBlack',
+
+  /** @deprecated */
+  WHITE: 'white',
 
   /** @deprecated */
   FRESH_ASPHALT: 'freshAsphalt'
@@ -48,15 +50,20 @@ var ContentArea = function ContentArea(_ref) {
 };
 
 var colorsCustomPropTypes = function colorsCustomPropTypes(props, propName, componentName) {
-  var deprecatedValue = BACKGROUND_COLORS.FRESH_ASPHALT;
+  var deprecatedBlackValue = BACKGROUND_COLORS.FRESH_ASPHALT;
+  var deprecatedWhiteValue = BACKGROUND_COLORS.WHITE;
   var propValue = props[propName];
 
   if (propValue && !Object.values(BACKGROUND_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(BACKGROUND_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(BACKGROUND_COLORS), "]"));
+  }
+
+  if (propValue && propValue === deprecatedBlackValue) {
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.CONTENT, "'"));
   }
 
-  if (propValue && propValue === BACKGROUND_COLORS.FRESH_ASPHALT) {
-    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.CONTENT, "'"));
+  if (propValue && propValue === deprecatedWhiteValue) {
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.BASE, "'"));
   }
 
   return null;

package/dist/es/components/Counter/Counter.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,
@@ -16,7 +63,7 @@ h5 {
           box-sizing: border-box;
   width: 120px;
   height: 32px;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-counter__btn {
   display: -webkit-box;
@@ -40,7 +87,7 @@ h5 {
   height: 100%;
   margin: 0;
   padding: 0;
-  border: 1px solid #D8D8D8;
+  border: 1px solid var(--spbSky2);
   font-size: 20px;
   text-decoration: none;
   background-color: transparent;
@@ -49,17 +96,18 @@ h5 {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  fill: var(--content);
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .mfui-counter__btn:hover {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-counter__btn:disabled {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
   cursor: default;
 }
 .mfui-counter__btn:disabled .mfui-counter__icon {
-  fill: #33333380;
+  fill: var(--spbSky2);
 }
 .mfui-counter__btn_left {
   border-top-left-radius: 50px;
@@ -84,8 +132,8 @@ h5 {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   height: 100%;
-  border-top: 1px solid #D8D8D8;
-  border-bottom: 1px solid #D8D8D8;
+  border-top: 1px solid var(--spbSky2);
+  border-bottom: 1px solid var(--spbSky2);
   overflow: hidden;
 }
 .mfui-counter__input {
@@ -97,7 +145,9 @@ h5 {
   padding: 0;
   border: none;
   overflow: auto;
+  color: var(--content);
   text-align: center;
+  background: var(--base);
   outline: none;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -107,14 +157,14 @@ h5 {
           appearance: none;
 }
 .mfui-counter_disabled .mfui-counter__btn {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
   cursor: default;
 }
 .mfui-counter_disabled .mfui-counter__input {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
   cursor: default;
-  color: #33333380;
+  color: var(--spbSky3);
 }
 .mfui-counter_disabled .mfui-counter__icon {
-  fill: #33333380;
+  fill: var(--spbSky2);
 }

package/dist/es/components/Grid/Grid.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/es/components/Grid/GridColumn.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/es/components/Header/Header.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,
@@ -94,20 +141,23 @@ h5 {
 .mfui-header_margin.mfui-header_level_h5 {
   margin: 24px 0 16px 0;
 }
+.mfui-header_color_default {
+  color: var(--content);
+}
 .mfui-header_color_black {
-  color: #333333;
+  color: var(--stcBlack);
 }
 .mfui-header_color_green {
-  color: #00B956;
+  color: var(--green);
 }
 .mfui-header_color_purple {
-  color: #731982;
+  color: var(--purple);
 }
 .mfui-header_color_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-header_color_blue {
-  color: #34AAF2;
+  color: var(--systemBlue);
 }
 .mfui-header_color_inherit {
   color: inherit;

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

@@ -6,7 +6,7 @@ interface IHeaderProps extends IFilterDataAttrs {
     /** Тег */
     as?: 'h1' | 'h2' | 'h3' | 'h5';
     /** Цвет */
-    color?: 'black' | 'white' | 'green' | 'purple' | 'blue' | 'inherit';
+    color?: 'default' | 'black' | 'white' | 'green' | 'purple' | 'blue' | 'inherit';
     /** Включить отступ */
     margin?: boolean;
     /** Дополнительный элемент */

package/dist/es/components/Header/Header.js

@@ -66,7 +66,7 @@ var Header = /*#__PURE__*/function (_React$Component) {
 
 Header.propTypes = {
   as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
-  color: PropTypes.oneOf(['black', 'white', 'green', 'purple', 'blue', 'inherit']),
+  color: PropTypes.oneOf(['default', 'black', 'white', 'green', 'purple', 'blue', 'inherit']),
   margin: PropTypes.bool,
   addition: PropTypes.element,
   hAlign: PropTypes.oneOf(['inherit', 'left', 'center', 'right']),
@@ -76,7 +76,7 @@ Header.propTypes = {
 };
 Header.defaultProps = {
   as: 'h1',
-  color: 'black',
+  color: 'default',
   hAlign: 'inherit'
 };
 export default Header;