@megafon/ui-core 2.1.3 → 3.0.0-beta.1

package/dist/lib/colors/Colors.js

@@ -15,6 +15,8 @@ require("core-js/modules/es.array.map");
 
 require("core-js/modules/es.function.name");
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -134,6 +136,36 @@ var basic = _colorsData["default"].basic,
 var cn = (0, _uiHelpers.cnCreate)('colors');
 
 var Colors = function Colors() {
+  var _React$useState = React.useState(window.localStorage.getItem('theme') === 'dark' ? 'dark' : 'light'),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      setCurrentTheme = _React$useState2[1];
+
+  var getCurrentColorValue = function getCurrentColorValue(code) {
+    return document.documentElement.style.getPropertyValue("--".concat(code));
+  };
+
+  React.useEffect(function () {
+    // theme switcher from src/gatsby-theme-docz/components/SideBar/index.tsx
+    var themeSwitcher = document.querySelector('[data-current-theme]');
+
+    if (themeSwitcher) {
+      var themeSwitcherObserver = new MutationObserver(function (mutationsList) {
+        var data = mutationsList[0];
+        setCurrentTheme(data.oldValue === 'light' ? 'dark' : 'light');
+      });
+      var config = {
+        attributeOldValue: true,
+        attributeFilter: ['data-current-theme']
+      };
+      themeSwitcherObserver.observe(themeSwitcher, config);
+      return function () {
+        return themeSwitcherObserver.disconnect();
+      };
+    }
+
+    return undefined;
+  }, []);
+
   var renderUnderline = function renderUnderline() {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('underline')
@@ -169,7 +201,7 @@ var Colors = function Colors() {
         return /*#__PURE__*/React.createElement(_ColorItem["default"], {
           className: cn('item'),
           colorName: name,
-          colorCode: code,
+          colorCode: getCurrentColorValue(code),
           key: name,
           border: border
         });
@@ -199,7 +231,7 @@ var Colors = function Colors() {
       return /*#__PURE__*/React.createElement(_ColorItem["default"], {
         className: cn('item'),
         colorName: name,
-        colorCode: code,
+        colorCode: getCurrentColorValue(code),
         gradient: gradient,
         key: name,
         border: border
@@ -231,7 +263,7 @@ var Colors = function Colors() {
           soft: true
         }),
         colorName: name,
-        colorCode: code,
+        colorCode: getCurrentColorValue(code),
         parentColorCode: parentColor,
         key: name
       });
@@ -256,7 +288,7 @@ var Colors = function Colors() {
     mobile: "12",
     tablet: "12"
   }, renderColorBlock(secondary)), /*#__PURE__*/React.createElement(_GridColumn["default"], {
-    all: "5",
+    all: "10",
     mobile: "12",
     tablet: "12"
   }, renderColorBlock(system))), /*#__PURE__*/React.createElement(_Grid["default"], null, /*#__PURE__*/React.createElement(_GridColumn["default"], {
@@ -265,7 +297,7 @@ var Colors = function Colors() {
     tablet: "12"
   }, renderColorBlock(gradientColors)), /*#__PURE__*/React.createElement(_GridColumn["default"], {
     all: "3",
-    leftOffsetWide: "1",
+    leftOffsetWide: "2",
     leftOffsetTablet: "1",
     leftOffsetDesktop: "1",
     mobile: "12",

package/dist/lib/colors/colorsData.js

@@ -10,34 +10,35 @@ var colors = {
     colorsGroup: [{
       description: 'Основные цвета бренда',
       colors: [{
-        name: 'Green',
-        code: '#00B956'
+        name: 'Brand Green',
+        code: 'brandGreen'
       }, {
-        name: 'Purple',
-        code: '#731982'
+        name: 'Brand Purple',
+        code: 'brandPurple'
       }]
     }, {
       description: 'Градация оттенков серого',
       colors: [{
         name: 'Base',
-        code: '#FFFFFF',
-        border: '1px solid #EDEDED'
+        code: 'base',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'Content',
-        code: '#333333'
+        code: 'content',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'Spb Sky 0',
-        code: '#F6F6F6',
-        border: '2px solid #EDEDED'
+        code: 'spbSky0',
+        border: '2px solid var(--spbSky1)'
       }, {
         name: 'Spb Sky 1',
-        code: '#EDEDED'
+        code: 'spbSky1'
       }, {
         name: 'Spb Sky 2',
-        code: '#D8D8D8'
+        code: 'spbSky2'
       }, {
         name: 'Spb Sky 3',
-        code: '#999999'
+        code: 'spbSky3'
       }]
     }]
   },
@@ -47,16 +48,16 @@ var colors = {
       description: 'Акцентные цвета',
       colors: [{
         name: 'Warm Red C',
-        code: '#EB5A40'
+        code: 'warmRedC'
       }, {
         name: '137C',
-        code: '#FFA717'
+        code: '137C'
       }, {
         name: '311C',
-        code: '#5BD9E5'
+        code: '311C'
       }, {
         name: 'Reflex Blue',
-        code: '#444189'
+        code: 'reflexBlue'
       }]
     }
   },
@@ -66,13 +67,22 @@ var colors = {
       description: 'Системные цвета, используемые для отображения состояний интерфейсов и ссылок',
       colors: [{
         name: 'Fury',
-        code: '#F62434'
+        code: 'fury'
       }, {
         name: 'System Blue',
-        code: '#34AAF2'
+        code: 'systemBlue'
       }, {
         name: 'Background',
-        code: '#FFFFFF'
+        code: 'background'
+      }, {
+        name: 'Button Hov. G.',
+        code: 'buttonHoverGreen'
+      }, {
+        name: 'Button Hov. P.',
+        code: 'buttonhoverPurple'
+      }, {
+        name: 'Button Down',
+        code: 'buttonDown'
       }]
     }
   },
@@ -82,15 +92,15 @@ var colors = {
       description: 'Градиентные заливки ',
       colors: [{
         name: 'Basic',
-        code: '#01873F #00B956 #14CD6A',
+        code: 'gradientBasic',
         gradient: 'linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%)'
       }, {
         name: 'VIP',
-        code: '#5B1168 #731982 #821E93',
+        code: 'gradientVIP',
         gradient: 'linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%)'
       }, {
         name: 'Exclusive',
-        code: '#2A2674 #444189 #504D93',
+        code: 'gradientExclusive',
         gradient: 'linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%)'
       }]
     }
@@ -101,11 +111,12 @@ var colors = {
       description: 'Цвета не зависящие от темы',
       colors: [{
         name: 'STC White',
-        code: '#FFFFFFF',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black',
-        code: '#333333'
+        code: 'stcBlack',
+        border: '1px solid var(--spbSky1)'
       }]
     }
   },
@@ -115,31 +126,36 @@ var colors = {
       description: 'Цвета c прозрачностью не зависящие от темы',
       colors: [{
         name: 'STC White 5%',
-        code: '#FFFFFF0D',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite5',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 10%',
-        code: '#FFFFFF1A',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite10',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 20%',
-        code: '#FFFFFF33',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite20',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 50%',
-        code: '#FFFFFF80'
+        code: 'stcWhite50',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 5%',
-        code: '#3333330D'
+        code: 'stcBlack5',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 10%',
-        code: '#3333331A'
+        code: 'stcBlack10',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 20%',
-        code: '#33333333'
+        code: 'stcBlack20',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 50%',
-        code: '#33333380'
+        code: 'stcBlack50',
+        border: '1px solid var(--spbSky1)'
       }]
     }
   },
@@ -148,61 +164,61 @@ var colors = {
     colorsList: {
       description: 'Дополнительная (вспомогательная) палитра, образованная от Basic, Secondary и System цветов. Каждый цвет из Soft палитры работает в паре с его родительским цветом.',
       colors: [{
-        name: 'Green 80',
-        code: '#0CDC78',
-        parentColor: '#00B956'
+        name: 'Brand Green 80',
+        code: 'brandGreen80',
+        parentColor: 'green'
       }, {
-        name: 'Purple 80',
-        code: '#AA67C1',
-        parentColor: '#731982'
+        name: 'Brand Purple 80',
+        code: 'brandPurple80',
+        parentColor: 'purple'
       }, {
         name: 'Warm Red C 80',
-        code: '#FF765D',
-        parentColor: '#EB5A40'
+        code: 'warmRedC80',
+        parentColor: 'warmRedC'
       }, {
         name: '137C 80',
-        code: '#FFB945',
-        parentColor: '#FFB945'
+        code: '137C80',
+        parentColor: '137C'
       }, {
         name: '311C 80',
-        code: '#62E3FF',
-        parentColor: '#5BD9E5'
+        code: '311C80',
+        parentColor: '311C'
       }, {
         name: 'Reflex Blue 80',
-        code: '#554FC9',
-        parentColor: '#444189'
+        code: 'reflexBlue80',
+        parentColor: 'reflexBlue'
       }, {
         name: 'Fury 80',
-        code: '#F8505D',
-        parentColor: '#F62434'
+        code: 'fury80',
+        parentColor: 'fury'
       }, {
-        name: 'Green 20',
-        code: '#DDFFEC',
-        parentColor: '#00B956'
+        name: 'Brand Green 20',
+        code: 'brandGreen20',
+        parentColor: 'green'
       }, {
-        name: 'Purple 20',
-        code: '#FFEEFF',
-        parentColor: '#731982'
+        name: 'Brand Purple 20',
+        code: 'brandPurple20',
+        parentColor: 'purple'
       }, {
         name: 'Warm Red C 20',
-        code: '#FFCFC7',
-        parentColor: '#EB5A40'
+        code: 'warmRedC20',
+        parentColor: 'warmRedC'
       }, {
         name: '137C 20',
-        code: '#FFEDD1',
-        parentColor: '#FFB945'
+        code: '137C20',
+        parentColor: '137C'
       }, {
         name: '311C 20',
-        code: '#E1FAFF',
-        parentColor: '#5BD9E5'
+        code: '311C20',
+        parentColor: '311C'
       }, {
         name: 'Reflex Blue 20',
-        code: '#EBEAFF',
-        parentColor: '#444189'
+        code: 'reflexBlue20',
+        parentColor: 'reflexBlue'
       }, {
         name: 'Fury 20',
-        code: '#FFC5C9',
-        parentColor: '#F62434'
+        code: 'fury20',
+        parentColor: 'fury'
       }]
     }
   }

package/dist/lib/components/Accordion/Accordion.css

@@ -1,22 +1,15 @@
-h1,
-h2,
-h3,
-h4,
-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 +35,7 @@ h5 {
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   opacity: 1;
+  fill: var(--content);
 }
 .mfui-accordion__content-inner {
   padding: 24px 16px;
@@ -66,5 +60,5 @@ h5 {
   padding-bottom: 24px;
 }
 .mfui-accordion__icon {
-  fill: #000000;
+  fill: var(--content);
 }

package/dist/lib/components/Banner/Banner.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-banner {
   position: relative;
   overflow: hidden;
@@ -100,10 +93,10 @@ h5 {
   background-color: transparent;
 }
 .mfui-banner__pagination_theme_green {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .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,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-banner-dot {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -27,14 +20,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 +47,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;
 }