@megafon/ui-core 2.1.4 → 3.0.0-beta.2

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

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-button {
   font-family: inherit;
   font-size: 15px;
@@ -15,7 +8,7 @@ h5 {
   padding: 0 32px;
   border: none;
   border-radius: 30px;
-  color: #FFFFFF;
+  color: var(--stcWhite);
   font-weight: 500;
   text-align: center;
   text-decoration: none;
@@ -207,119 +200,135 @@ h5 {
   display: none;
 }
 .mfui-button_type_primary.mfui-button_theme_green {
-  color: #FFFFFF;
-  background-color: #00B956;
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
 }
 .mfui-button_type_primary.mfui-button_theme_green svg {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):hover {
-  background-color: #10E272;
-  -webkit-box-shadow: inset 0 0 0 1px #10E272;
-          box-shadow: inset 0 0 0 1px #10E272;
+  background-color: var(--buttonHoverGreen);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
+          box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):active {
-  background-color: #404D46;
-  -webkit-box-shadow: inset 0 0 0 1px #404D46;
-          box-shadow: inset 0 0 0 1px #404D46;
+  background-color: var(--buttonDown);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
+          box-shadow: inset 0 0 0 1px var(--buttonDown);
 }
 .mfui-button_type_primary.mfui-button_theme_purple {
-  color: #FFFFFF;
-  background-color: #731982;
+  color: var(--stcWhite);
+  background-color: var(--brandPurple);
 }
 .mfui-button_type_primary.mfui-button_theme_purple svg {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):hover {
-  background-color: #534455;
-  -webkit-box-shadow: inset 0 0 0 1px #534455;
-          box-shadow: inset 0 0 0 1px #534455;
+  background-color: var(--buttonhoverPurple);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonhoverPurple);
+          box-shadow: inset 0 0 0 1px var(--buttonhoverPurple);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):active {
-  background-color: #404D46;
-  -webkit-box-shadow: inset 0 0 0 1px #404D46;
-          box-shadow: inset 0 0 0 1px #404D46;
+  background-color: var(--buttonDown);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
+          box-shadow: inset 0 0 0 1px var(--buttonDown);
 }
 .mfui-button_type_primary.mfui-button_theme_white {
-  color: #333333;
-  background-color: #FFFFFF;
+  color: var(--stcBlack);
+  background-color: var(--stcWhite);
 }
 .mfui-button_type_primary.mfui-button_theme_white svg {
-  fill: #333333;
+  fill: var(--stcBlack);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover {
-  color: #FFFFFF;
-  background-color: #10E272;
-  -webkit-box-shadow: inset 0 0 0 1px #10E272;
-          box-shadow: inset 0 0 0 1px #10E272;
+  color: var(--stcBlack);
+  background-color: var(--buttonHoverGreen);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
+          box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover svg {
-  fill: #FFFFFF;
+  fill: var(--stcBlack);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):active {
-  background-color: #404D46;
-  -webkit-box-shadow: inset 0 0 0 1px #404D46;
-          box-shadow: inset 0 0 0 1px #404D46;
+  background-color: var(--buttonDown);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
+          box-shadow: inset 0 0 0 1px var(--buttonDown);
 }
 .mfui-button_type_outline.mfui-button_theme_green {
-  color: #00B956;
+  color: var(--brandGreen);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #00B956;
-          box-shadow: inset 0 0 0 1px #00B956;
+  -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: #00B956;
+  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: rgba(0, 185, 86, 0.07);
+  background-color: var(--brandGreen7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):active {
-  background-color: rgba(0, 185, 86, 0.14);
+  background-color: var(--brandGreen14);
 }
 .mfui-button_type_outline.mfui-button_theme_purple {
-  color: #731982;
+  color: var(--brandPurple);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #731982;
-          box-shadow: inset 0 0 0 1px #731982;
+  -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: #731982;
+  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: rgba(115, 25, 130, 0.07);
+  background-color: var(--brandPurple7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):active {
-  background-color: rgba(115, 25, 130, 0.14);
+  background-color: var(--brandPurple14);
 }
 .mfui-button_type_outline.mfui-button_theme_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #FFFFFF;
-          box-shadow: inset 0 0 0 1px #FFFFFF;
+  -webkit-box-shadow: inset 0 0 0 1px var(--stcWhite);
+          box-shadow: inset 0 0 0 1px var(--stcWhite);
 }
 .mfui-button_type_outline.mfui-button_theme_white svg {
-  fill: #FFFFFF;
+  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: rgba(255, 255, 255, 0.07);
+  background-color: var(--base7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):active {
-  background-color: rgba(255, 255, 255, 0.14);
+  background-color: var(--base14);
 }
 .mfui-button_type_outline.mfui-button_theme_black {
-  color: #333333;
+  color: var(--stcBlack);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #333333;
-          box-shadow: inset 0 0 0 1px #333333;
+  -webkit-box-shadow: inset 0 0 0 1px var(--stcBlack);
+          box-shadow: inset 0 0 0 1px var(--stcBlack);
 }
 .mfui-button_type_outline.mfui-button_theme_black svg {
-  fill: #333333;
+  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: rgba(51, 51, 51, 0.07);
+  background-color: var(--content7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):active {
-  background-color: rgba(51, 51, 51, 0.14);
+  background-color: var(--content14);
 }
 .mfui-button_full-width {
   display: block;
@@ -332,44 +341,44 @@ h5 {
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active {
-  color: #33333380;
-  background-color: #EDEDED;
-  -webkit-box-shadow: inset 0 0 0 1px #D8D8D8;
-          box-shadow: inset 0 0 0 1px #D8D8D8;
+  color: var(--spbSky3);
+  background-color: var(--spbSky1);
+  -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
+          box-shadow: inset 0 0 0 1px var(--spbSky3);
 }
 .mfui-button.mfui-button_type_primary.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active svg {
-  fill: #33333380;
+  fill: var(--spbSky3);
 }
 .mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active {
-  color: #FFFFFF80;
+  color: var(--stcWhite50);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #FFFFFF80;
-          box-shadow: inset 0 0 0 1px #FFFFFF80;
+  -webkit-box-shadow: inset 0 0 0 1px var(--stcWhite50);
+          box-shadow: inset 0 0 0 1px var(--stcWhite50);
 }
 .mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active svg {
-  fill: #FFFFFF80;
+  fill: var(--stcWhite50);
 }
 .mfui-button.mfui-button_type_outline.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active {
-  color: #33333380;
+  color: var(--spbSky3);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #D8D8D8;
-          box-shadow: inset 0 0 0 1px #D8D8D8;
+  -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
+          box-shadow: inset 0 0 0 1px var(--spbSky3);
 }
 .mfui-button.mfui-button_type_outline.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active svg {
-  fill: #33333380;
+  fill: var(--spbSky3);
 }

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

@@ -1,10 +1,3 @@
-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,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-day {
   position: relative;
   -webkit-box-sizing: content-box;
@@ -13,7 +6,7 @@ h5 {
   height: 32px;
   padding: 0 10px 8px 0;
   border: none;
-  color: #333333;
+  color: var(--content);
   line-height: 24px;
   text-decoration: none;
   background-color: rgba(0, 0, 0, 0);
@@ -44,16 +37,16 @@ h5 {
   width: 32px;
   height: 32px;
   border-radius: 50% !important;
-  color: #333333;
-  background-color: #F6F6F6;
+  color: var(--content);
+  background-color: var(--spbSky0);
 }
 .mfui-day:not(:disabled):not(.mfui-day_active):hover:after {
-  color: #333333;
-  background-color: #F6F6F6;
+  color: var(--content);
+  background-color: var(--spbSky0);
 }
 .mfui-day:not(:disabled):not(.mfui-day_active):focus:after,
 .mfui-day_active:after {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-day_disabled {
   cursor: default;
@@ -62,7 +55,7 @@ h5 {
 }
 .mfui-day_active,
 .mfui-day:not(:disabled):not(.mfui-day_active):focus {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-day_active + .mfui-day_active:before,
 .mfui-day_between:hover + .mfui-day:not(.mfui-day_monday).mfui-day_active:before {
@@ -74,7 +67,7 @@ h5 {
   display: block;
   width: 32px;
   height: 32px;
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-day_between {
   position: relative;
@@ -89,7 +82,7 @@ h5 {
   display: block;
   height: 32px;
   padding: 0 20px;
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-day_between:after {
   content: '';
@@ -100,7 +93,7 @@ h5 {
   display: block;
   width: 40px;
   height: 32px;
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-day_sunday,
 .mfui-day_last {

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

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-month {
   position: relative;
   z-index: 1;
@@ -42,7 +35,7 @@ h5 {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-month__title {
   font-size: 15px;
@@ -56,7 +49,7 @@ h5 {
   grid-template-columns: repeat(7, 1fr);
   width: 272px;
   padding-bottom: 13px;
-  border-bottom: 1px solid #EDEDED;
+  border-bottom: 1px solid var(--spbSky1);
   -webkit-column-gap: 22px;
      -moz-column-gap: 22px;
           column-gap: 22px;
@@ -66,7 +59,7 @@ h5 {
   line-height: 16px;
   width: 20px;
   height: 16px;
-  color: #333333;
+  color: var(--content);
   font-weight: 600;
   line-height: 24px;
   text-align: center;

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

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-carousel {
   position: relative;
   display: -webkit-box;
@@ -158,10 +151,10 @@ h5 {
   margin-right: 8px;
 }
 .mfui-carousel_nav-theme_green .swiper-pagination-bullet:before {
-  background-color: #FFFFFF80;
+  background-color: var(--stcWhite50);
 }
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet:before {
-  background-color: rgba(51, 51, 51, 0.25);
+  background-color: var(--spbSky2);
 }
 .mfui-carousel .swiper-pagination-bullet-active {
   padding: 0;
@@ -172,12 +165,12 @@ h5 {
   cursor: default;
 }
 .mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet-active {
   padding: 0;
   cursor: default;
 }
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }

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

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-checkbox {
   margin: 0 5px 12px 5px;
 }
@@ -89,32 +82,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(--brandGreen);
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
 }
 .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 +115,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(--brandGreen);
+  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,
@@ -7,32 +54,29 @@ h5 {
 }
 .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(--brandGreen);
 }
 .mfui-content-area_color_purple {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 .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;
@@ -84,30 +128,27 @@ h5 {
 }
 .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(--brandGreen);
 }
 .mfui-content-area__inner_color_purple {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 .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

@@ -9,7 +9,6 @@ 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 */

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

@@ -15,7 +15,6 @@ var BACKGROUND_COLORS = {
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2',
   CONTENT: 'content',
-  FULL_BLACK: 'fullBlack',
 
   /** @deprecated */
   WHITE: 'white',