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

package/dist/es/components/TextField/TextField.css

@@ -1,57 +1,3 @@
-: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;
-}
 .mfui-text-field {
   font-family: inherit;
   font-size: 15px;
@@ -185,10 +131,10 @@ h5 {
 }
 .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field-wrapper_no-touch:hover .mfui-text-field__field,
 .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field {
-  border-color: var(--green);
+  border-color: var(--brandGreen);
 }
 .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__icon {
-  fill: var(--green);
+  fill: var(--brandGreen);
 }
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field {
@@ -219,7 +165,7 @@ h5 {
   color: var(--fury);
 }
 .mfui-text-field__text_success {
-  color: var(--green);
+  color: var(--brandGreen);
 }
 .mfui-text-field_disabled .mfui-text-field__field-wrapper {
   background-color: var(--spbSky1) !important;

package/dist/es/components/TextLink/TextLink.css

@@ -1,57 +1,3 @@
-: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;
-}
 .mfui-text-link {
   font-family: inherit;
   font-size: inherit;
@@ -94,7 +40,7 @@ h5 {
   color: var(--systemBlue);
 }
 .mfui-text-link_color_green {
-  color: var(--green);
+  color: var(--brandGreen);
 }
 .mfui-text-link_color_gray {
   color: var(--spbSky3);

package/dist/es/components/Tile/Tile.css

@@ -1,57 +1,3 @@
-: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;
-}
 .mfui-tile {
   color: var(--content);
   background-color: var(--background);

package/dist/es/components/Tooltip/Tooltip.css

@@ -1,57 +1,3 @@
-: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;
-}
 .mfui-tooltip {
   z-index: 100;
   visibility: hidden;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { AccessibilityEventTypeNative } from '@megafon/ui-helpers';
 import './Tooltip.less';
 export declare const Placement: {
     readonly LEFT: "left";
@@ -46,9 +47,9 @@ export interface ITooltipProps {
         contentShadow?: string;
     };
     /** Обработчик на открытие */
-    onOpen?: (e: MouseEvent) => void;
+    onOpen?: (e: AccessibilityEventTypeNative) => void;
     /** Обработчик на закрытие */
-    onClose?: (e: MouseEvent | FocusEvent) => void;
+    onClose?: (e: AccessibilityEventTypeNative | FocusEvent) => void;
 }
 declare const Tooltip: React.FC<ITooltipProps>;
 export default Tooltip;

package/dist/es/components/Tooltip/Tooltip.js

@@ -4,15 +4,13 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { cnCreate, detectTouch } from '@megafon/ui-helpers';
+import { cnCreate, detectTouch, checkNativeEventIsClickOrEnterPress } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import { usePopper } from 'react-popper';
 import Tile from "../Tile/Tile";
 import "./Tooltip.css";
 var TOOLTIP_PADDING_FOR_FLIP = 14;
 var MOUSE_KEY = 'mousedown';
-var KEYBOARD_ENTER_KEY = 'Enter';
-var KEYBOARD_NUMPAD_ENTER_KEY = 'NumpadEnter';
 var TOUCH_KEY = 'touchstart';
 export var Placement = {
   LEFT: 'left',
@@ -20,11 +18,6 @@ export var Placement = {
   RIGHT: 'right',
   BOTTOM: 'bottom'
 };
-
-var checkEventIsClickOrEnterPress = function checkEventIsClickOrEnterPress(e) {
-  return e.type === TOUCH_KEY || e.type === MOUSE_KEY || e.code === KEYBOARD_ENTER_KEY || e.code === KEYBOARD_NUMPAD_ENTER_KEY;
-};
-
 export var Paddings = {
   NONE: 'none',
   SMALL: 'small',
@@ -142,7 +135,7 @@ var Tooltip = function Tooltip(_ref) {
     }
   }, [isOpen, onOpen, setIsOpen]);
   var handleClick = useCallback(function (e) {
-    if (!checkEventIsClickOrEnterPress(e)) {
+    if (!checkNativeEventIsClickOrEnterPress(e)) {
       return;
     }
 

package/dist/lib/colors/ColorItem/ColorItem.css

@@ -1,57 +1,3 @@
-: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;
-}
 .color-item {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -93,7 +39,7 @@ h5 {
   line-height: 20px;
 }
 .color-item__code {
-  color: var(--content);
+  color: var(--spbSky3);
   font-size: 12px;
   line-height: 18px;
 }

package/dist/lib/colors/ColorItem/ColorItem.js

@@ -37,7 +37,7 @@ var ColorItem = function ColorItem(_ref) {
   }), !!parentColorCode && /*#__PURE__*/React.createElement("div", {
     className: cn('parent-color'),
     style: {
-      background: parentColorCode
+      background: "var(--".concat(parentColorCode, ")")
     }
   })), /*#__PURE__*/React.createElement("span", {
     className: cn('name')

package/dist/lib/colors/Colors.css

@@ -1,57 +1,3 @@
-: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;
-}
 .colors__inner {
   margin: 0 -80px;
   padding: 56px 80px 40px;
@@ -137,7 +83,6 @@ h5 {
 .colors__description {
   position: relative;
   padding-top: 15px;
-  color: var(--content);
   font-size: 12px;
   line-height: 18px;
   text-align: center;

package/dist/lib/colors/Colors.js

@@ -11,10 +11,14 @@ require("core-js/modules/es.symbol");
 
 require("core-js/modules/es.symbol.description");
 
+require("core-js/modules/es.array.includes");
+
 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"));
@@ -130,10 +134,65 @@ var basic = _colorsData["default"].basic,
     gradientColors = _colorsData["default"].gradientColors,
     staticColors = _colorsData["default"].staticColors,
     staticOpacity = _colorsData["default"].staticOpacity,
-    soft = _colorsData["default"].soft;
+    soft = _colorsData["default"].soft; // TODO: refactor this
+
+var getThemeFromLocalStorage = function getThemeFromLocalStorage() {
+  var theme = 'light';
+
+  if (typeof window !== 'undefined') {
+    var localStorageTheme = String(window.localStorage.getItem('theme'));
+
+    if (['light', 'dark'].includes(localStorageTheme)) {
+      theme = localStorageTheme;
+    }
+  }
+
+  return theme;
+};
+
 var cn = (0, _uiHelpers.cnCreate)('colors');
 
 var Colors = function Colors() {
+  var _React$useState = React.useState(getThemeFromLocalStorage()),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      setCurrentTheme = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      setLoad = _React$useState4[1];
+
+  React.useEffect(function () {
+    function load() {
+      setLoad(true);
+    }
+  }, []);
+
+  var getCurrentColorValue = function getCurrentColorValue(code) {
+    return typeof document !== 'undefined' ? 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 +228,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 +258,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 +290,7 @@ var Colors = function Colors() {
           soft: true
         }),
         colorName: name,
-        colorCode: code,
+        colorCode: getCurrentColorValue(code),
         parentColorCode: parentColor,
         key: name
       });