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

package/dist/lib/components/NavArrow/NavArrow.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,
@@ -29,17 +76,17 @@ h5 {
   display: block;
   width: 100%;
   height: 100%;
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-nav-arrow_theme_purple {
-  background-color: #731982;
+  background-color: var(--purple);
 }
 .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(--green20);
 }
 .mfui-notification_type_success .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
-  fill: #00B956;
+  fill: var(--green);
 }
 .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(--green);
 }
-.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,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/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(--green);
   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(--green);
 }
 .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,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,
@@ -31,30 +78,27 @@ h5 {
   margin: 0 0 16px;
 }
 .mfui-paragraph_color_green {
-  color: #00B956;
+  color: var(--green);
 }
 .mfui-paragraph_color_purple {
-  color: #731982;
+  color: var(--purple);
 }
 .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,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,
@@ -106,20 +153,20 @@ h5 {
           animation: scaling 1s linear infinite;
 }
 .mfui-preloader_color_default .mfui-preloader__item_first:before {
-  background-color: #00B956;
+  background-color: var(--green);
 }
 .mfui-preloader_color_default .mfui-preloader__item_second:before {
-  background-color: #00B956;
+  background-color: var(--green);
   -webkit-animation-delay: 0.166s;
           animation-delay: 0.166s;
 }
 .mfui-preloader_color_default .mfui-preloader__item_third:before {
-  background-color: #731982;
+  background-color: var(--purple);
   -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 +180,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;
 }