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

package/dist/es/components/TextLink/TextLink.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,
@@ -34,20 +81,23 @@ h5 {
 .mfui-text-link_underline-style_none:hover {
   text-decoration: none;
 }
+.mfui-text-link_color_default {
+  color: var(--content);
+}
+.mfui-text-link_color_black {
+  color: var(--stcBlack);
+}
 .mfui-text-link_color_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-text-link_color_blue {
-  color: #34AAF2;
+  color: var(--systemBlue);
 }
 .mfui-text-link_color_green {
-  color: #00B956;
-}
-.mfui-text-link_color_black {
-  color: #333333;
+  color: var(--green);
 }
 .mfui-text-link_color_gray {
-  color: #999999;
+  color: var(--spbSky3);
 }
 .mfui-text-link_color_inherit {
   color: inherit;

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

@@ -3,7 +3,7 @@ import './TextLink.less';
 import { ILinkProps } from '../Link/Link';
 export interface ITextLinkProps extends ILinkProps {
     /** Цвет */
-    color?: 'white' | 'black' | 'gray' | 'blue' | 'green' | 'inherit';
+    color?: 'default' | 'white' | 'black' | 'gray' | 'green' | 'blue' | 'inherit';
     /** Отображение подчеркивания */
     underlineVisibility?: 'hover' | 'always';
     /** Стиль подчеркивания */

package/dist/es/components/TextLink/TextLink.js

@@ -31,7 +31,7 @@ var TextLink = function TextLink(_ref) {
 };
 
 TextLink.propTypes = {
-  color: PropTypes.oneOf(['white', 'black', 'gray', 'blue', 'green', 'inherit']),
+  color: PropTypes.oneOf(['default', 'white', 'black', 'gray', 'green', 'inherit']),
   underlineVisibility: PropTypes.oneOf(['hover', 'always']),
   underlineStyle: PropTypes.oneOf(['solid', 'dashed', 'border', 'none']),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node])

package/dist/es/components/Tile/Tile.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,
@@ -6,7 +53,8 @@ h5 {
   margin: 0;
 }
 .mfui-tile {
-  background-color: #FFFFFF;
+  color: var(--content);
+  background-color: var(--background);
 }
 .mfui-tile_radius_rounded {
   border-radius: 8px;

package/dist/es/components/Tooltip/Tooltip.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,
@@ -48,7 +95,7 @@ h5 {
   left: 0;
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-tooltip__arrow-shadow {
   width: 12px;

package/dist/es/styles/base.css

@@ -0,0 +1,54 @@
+: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;
+}

package/dist/lib/colors/ColorItem/ColorItem.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,
@@ -46,7 +93,7 @@ h5 {
   line-height: 20px;
 }
 .color-item__code {
-  color: #33333380;
+  color: var(--content);
   font-size: 12px;
   line-height: 18px;
 }

package/dist/lib/colors/Colors.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,7 +55,7 @@ h5 {
 .colors__inner {
   margin: 0 -80px;
   padding: 56px 80px 40px;
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 @media screen and (max-width: 1120px) {
   .colors__inner {
@@ -90,7 +137,7 @@ h5 {
 .colors__description {
   position: relative;
   padding-top: 15px;
-  color: #33333380;
+  color: var(--content);
   font-size: 12px;
   line-height: 18px;
   text-align: center;
@@ -198,7 +245,7 @@ h5 {
   display: block;
   width: 100%;
   height: 1px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
@@ -209,7 +256,7 @@ h5 {
   position: absolute;
   width: 1px;
   height: 4px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .colors__underline:after,
 .colors__underline:before {

package/dist/lib/colors/colorsData.js

@@ -24,7 +24,8 @@ var colors = {
         border: '1px solid #EDEDED'
       }, {
         name: 'Content',
-        code: '#333333'
+        code: '#333333',
+        border: '1px solid #EDEDED'
       }, {
         name: 'Spb Sky 0',
         code: '#F6F6F6',
@@ -110,11 +111,12 @@ var colors = {
       description: 'Цвета не зависящие от темы',
       colors: [{
         name: 'STC White',
-        code: '#FFFFFFF',
+        code: '#FFFFFF',
         border: '1px solid #EDEDED'
       }, {
         name: 'STC Black',
-        code: '#333333'
+        code: '#333333',
+        border: '1px solid #EDEDED'
       }]
     }
   },
@@ -136,19 +138,24 @@ var colors = {
         border: '1px solid #EDEDED'
       }, {
         name: 'STC White 50%',
-        code: '#FFFFFF80'
+        code: '#FFFFFF80',
+        border: '1px solid #EDEDED'
       }, {
         name: 'STC Black 5%',
-        code: '#3333330D'
+        code: '#3333330D',
+        border: '1px solid #EDEDED'
       }, {
         name: 'STC Black 10%',
-        code: '#3333331A'
+        code: '#3333331A',
+        border: '1px solid #EDEDED'
       }, {
         name: 'STC Black 20%',
-        code: '#33333333'
+        code: '#33333333',
+        border: '1px solid #EDEDED'
       }, {
         name: 'STC Black 50%',
-        code: '#33333380'
+        code: '#33333380',
+        border: '1px solid #EDEDED'
       }]
     }
   },

package/dist/lib/components/Accordion/Accordion.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,
@@ -6,17 +53,17 @@ h5 {
   margin: 0;
 }
 .mfui-accordion {
-  border-top: 1px solid #D8D8D8;
-  border-bottom: 1px solid #D8D8D8;
+  border-top: 1px solid var(--spbSky2);
+  border-bottom: 1px solid var(--spbSky2);
 }
 .mfui-accordion + .mfui-accordion {
   border-top: none;
 }
 .mfui-accordion:not(.mfui-accordion_open) .mfui-accordion__title-wrap:hover {
-  background: rgba(237, 237, 237, 0.5);
+  background: var(--spbSky0);
 }
 .mfui-accordion.mfui-accordion_open .mfui-accordion__title-wrap {
-  background: #EDEDED;
+  background: var(--spbSky1);
 }
 .mfui-accordion__title-wrap {
   position: relative;
@@ -42,6 +89,7 @@ h5 {
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   opacity: 1;
+  fill: var(--content);
 }
 .mfui-accordion__content-inner {
   padding: 24px 16px;
@@ -66,5 +114,5 @@ h5 {
   padding-bottom: 24px;
 }
 .mfui-accordion__icon {
-  fill: #000000;
+  fill: var(--content);
 }

package/dist/lib/components/Banner/Banner.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,
@@ -100,10 +147,10 @@ h5 {
   background-color: transparent;
 }
 .mfui-banner__pagination_theme_green {
-  background-color: #00B956;
+  background-color: var(--green);
 }
 .mfui-banner__pagination_theme_dark {
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: var(--stcBlack20);
 }
 .mfui-banner__dot {
   width: 12px;

package/dist/lib/components/Banner/BannerDot.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,
@@ -27,14 +74,14 @@ h5 {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background-color: #FFFFFF80;
+  background-color: var(--stcWhite50);
 }
 .mfui-banner-dot_active {
   padding: 0;
   cursor: default;
 }
 .mfui-banner-dot_active:before {
-  background-color: #FFFFFF;
+  background-color: var(--stcWhite);
 }
 .mfui-banner-dot_active.mfui-banner-dot_timer:before {
   display: none;
@@ -54,8 +101,8 @@ h5 {
           transform-origin: center;
   -webkit-animation: timer linear;
           animation: timer linear;
-  fill: #FFFFFF80;
-  stroke: #FFFFFF;
+  fill: var(--stcWhite50);
+  stroke: var(--base);
   stroke-width: 100;
   stroke-dasharray: 1000;
 }