@megafon/ui-core 2.0.0-beta.99 → 2.1.2

package/styles/base.less

@@ -1,28 +1,78 @@
-@class-prefix: 'mfui-beta';
-
 // Basic Colors
 @green: #00B956;
 @purple: #731982;
-@clearWhite: #FFFFFF;
+@base: #FFFFFF;
 @spbSky0: #F6F6F6;
 @spbSky1: #EDEDED;
 @spbSky2: #D8D8D8;
-@freshAsphalt: #333333;
+@spbSky3: #999999;
+@content: #333333;
 @fullBlack: #000000;
 
 // Secondary Colors
 @warmRedC: #EB5A40;
-@mandarin: #FFA717;
-@311C: #5BD9E5;
+@Pantone137C: #FFA717;
+@Pantone311C: #5BD9E5;
 @reflexBlue: #444189;
 
 // System Colors
 @fury: #F62434;
-@link: #34AAF2;
+@systemBlue: #34AAF2;
+@background: #FFFFFF;
+
+// Gradients
+@basic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+@vip: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+@exclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+
+// Static
+@STCBlack: #333333;
+@STCWhite: #FFFFFF;
+
+// Static Opacity
+
+@STCWhite5: #FFFFFF0D;
+@STCWhite10: #FFFFFF1A;
+@STCWhite20: #FFFFFF33;
+@STCWhite50: #FFFFFF80;
+@STCBlack5: #3333330D;
+@STCBlack10: #3333331A;
+@STCBlack20: #33333333;
+@STCBlack50: #33333380;
+
+// Soft (new)
+@green80: #0CDC78;
+@green20: #DDFFEC;
+@purple80: #AA67C1;
+@purple20: #FFEEFF;
+@warmRedC80: #FF765D;
+@warmRedC20: #FFCFC7;
+@Pantone137C80: #FFB945;
+@Pantone137C20: #FFEDD1;
+@Pantone311C80: #62E3FF;
+@Pantone311C20: #E1FAFF;
+@reflexBlue80: #554FC9;
+@reflexBlue20: #EBEAFF;
+@fury80: #F8505D;
+@fury20: #FFC5C9;
+
+// old colors
 @buttonHoverGreen: #10E272;
-@buttonhoverPurple: #A500BF;
+@buttonhoverPurple: #534455;
 @buttonDown: #404D46;
 
+// Notification Colors
+// TODO: будут отрефакторены после обновления дизайном Notification по новой палитре
+@error: #FFC4C9;
+@spbSky160: fade(@spbSky1, 60);
+@base30: fade(@base, 30);
+
+// Additional Colors Variants
+@content25: fade(@content, 25);
+@fullBlack25: fade(@fullBlack, 25);
+@fullBlack50: fade(@fullBlack, 50);
+@contentLighten50: lighten(@content, 50);
+
 // BREAKPOINTS
 @mobileSmallEnd:      479px;
 @mobileMiddleStart:   480px;
@@ -48,7 +98,7 @@
 @desktopS:        ~'screen and (min-width: @{desktopSmallStart}) and (max-width: @{desktopSmallEnd})';   // 1024 - 1279
 @desktopM:        ~'screen and (min-width: @{desktopMiddleStart}) and (max-width: @{desktopMiddleEnd})'; // 1280 - 1439
 @desktopB:        ~'screen and (min-width: @{desktopBigStart}) and (max-width: @{desktopBigEnd})';       // 1440 - 1599
-@desktopBU:       ~'screen and (min-width: @{desktopBigStart})';                                        // 1440 - ∞
+@desktopBU:       ~'screen and (min-width: @{desktopBigStart})';                                         // 1440 - ∞
 @desktopSM:       ~'screen and (min-width: @{desktopSmallStart}) and (max-width: @{desktopMiddleEnd})';  // 1024 - 1439
 @desktopMU:       ~'screen and (min-width: @{desktopMiddleStart})';                                      // 1280 - ∞
 
@@ -78,32 +128,69 @@
 @contentVerticalIndentDesktop: 96px;
 @contentVerticalIndentMobileB: 72px;
 @contentVerticalIndentMobileSM: 48px;
+@maxContentWidth: 1440px;
 
 // MIXINS
 .Graphik() {
     font-family: Graphik, Arial, sans-serif;
 }
 
-h1, h2, h3, h4, h5 {
+.fontFamily() {
+    font-family: inherit;
+}
+
+.commonFont() {
+    font-size: 15px;
+    line-height: 24px;
+}
+
+.smallFont() {
+    font-size: 12px;
+    line-height: 16px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
     margin: 0;
 }
 
+.h1() {
+    font-weight: 600;
+    font-size: 36px;
+    line-height: 30px;
+    letter-spacing: 0.5px;
+
+    @media @mobileB {
+        font-size: 36px;
+        line-height: 40px;
+    }
+    @media @desktop {
+        font-size: 44px;
+        line-height: 48px;
+    }
+    @media @desktopMU {
+        font-size: 52px;
+        line-height: 56px;
+    }
+}
+
 .h2() {
+    font-weight: 600;
     font-size: 22px;
     line-height: 28px;
-    font-weight: 600;
     letter-spacing: 0.5px;
 
     @media @mobileB {
         font-size: 26px;
         line-height: 32px;
     }
-
     @media @desktop {
         font-size: 28px;
         line-height: 36px;
     }
-
     @media @desktopMU {
         font-size: 32px;
         line-height: 40px;
@@ -111,9 +198,9 @@ h1, h2, h3, h4, h5 {
 }
 
 .h3() {
+    font-weight: 500;
     font-size: 18px;
     line-height: 24px;
-    font-weight: 500;
     letter-spacing: 0.5px;
 
     @media @desktopMU {
@@ -132,12 +219,7 @@ h1, h2, h3, h4, h5 {
     font-weight: 400;
 }
 
-.small() {
-    font-size: 12px;
-    line-height: 16px;
-}
-
-.p-indents() {
+.pIndents() {
     margin-top: 0;
     margin-bottom: 16px;
 
@@ -146,20 +228,11 @@ h1, h2, h3, h4, h5 {
     }
 }
 
-.default-link() {
-    color: @link;
+.link() {
+    color: @systemBlue;
     text-decoration: none;
 
     &:hover {
         text-decoration: underline;
     }
 }
-
-.fontFamily() {
-    font-family: inherit;
-}
-
-.commonFont() {
-    font-size: 15px;
-    line-height: 24px;
-}

package/dist/es/components/IconButton/IconButton.css

@@ -1,127 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-beta-icon-button {
-  border-radius: 50%;
-  padding: 0;
-}
-.mfui-beta-icon-button__content {
-  display: block;
-}
-.mfui-beta-icon-button_size-all_small .mfui-beta-icon-button__inner {
-  width: 32px;
-}
-.mfui-beta-icon-button_size-all_small .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-  width: 24px;
-  height: 24px;
-}
-.mfui-beta-icon-button_size-all_medium .mfui-beta-icon-button__inner {
-  width: 48px;
-}
-.mfui-beta-icon-button_size-all_medium .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-  width: 32px;
-  height: 32px;
-}
-.mfui-beta-icon-button_size-all_large .mfui-beta-icon-button__inner {
-  width: 60px;
-}
-.mfui-beta-icon-button_size-all_large .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-  width: 40px;
-  height: 40px;
-}
-@media screen and (min-width: 1280px) {
-  .mfui-beta-icon-button_size-wide_small .mfui-beta-icon-button__inner {
-    width: 32px;
-  }
-  .mfui-beta-icon-button_size-wide_small .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 24px;
-    height: 24px;
-  }
-  .mfui-beta-icon-button_size-wide_medium .mfui-beta-icon-button__inner {
-    width: 48px;
-  }
-  .mfui-beta-icon-button_size-wide_medium .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 32px;
-    height: 32px;
-  }
-  .mfui-beta-icon-button_size-wide_large .mfui-beta-icon-button__inner {
-    width: 60px;
-  }
-  .mfui-beta-icon-button_size-wide_large .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 40px;
-    height: 40px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-beta-icon-button_size-desktop_small .mfui-beta-icon-button__inner {
-    width: 32px;
-  }
-  .mfui-beta-icon-button_size-desktop_small .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 24px;
-    height: 24px;
-  }
-  .mfui-beta-icon-button_size-desktop_medium .mfui-beta-icon-button__inner {
-    width: 48px;
-  }
-  .mfui-beta-icon-button_size-desktop_medium .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 32px;
-    height: 32px;
-  }
-  .mfui-beta-icon-button_size-desktop_large .mfui-beta-icon-button__inner {
-    width: 60px;
-  }
-  .mfui-beta-icon-button_size-desktop_large .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 40px;
-    height: 40px;
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-icon-button_size-tablet_small .mfui-beta-icon-button__inner {
-    width: 32px;
-  }
-  .mfui-beta-icon-button_size-tablet_small .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 24px;
-    height: 24px;
-  }
-  .mfui-beta-icon-button_size-tablet_medium .mfui-beta-icon-button__inner {
-    width: 48px;
-  }
-  .mfui-beta-icon-button_size-tablet_medium .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 32px;
-    height: 32px;
-  }
-  .mfui-beta-icon-button_size-tablet_large .mfui-beta-icon-button__inner {
-    width: 60px;
-  }
-  .mfui-beta-icon-button_size-tablet_large .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 40px;
-    height: 40px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .mfui-beta-icon-button_size-mobile_small .mfui-beta-icon-button__inner {
-    width: 32px;
-  }
-  .mfui-beta-icon-button_size-mobile_small .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 24px;
-    height: 24px;
-  }
-  .mfui-beta-icon-button_size-mobile_medium .mfui-beta-icon-button__inner {
-    width: 48px;
-  }
-  .mfui-beta-icon-button_size-mobile_medium .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 32px;
-    height: 32px;
-  }
-  .mfui-beta-icon-button_size-mobile_large .mfui-beta-icon-button__inner {
-    width: 60px;
-  }
-  .mfui-beta-icon-button_size-mobile_large .mfui-beta-icon-button__inner .mfui-beta-icon-button__content {
-    width: 40px;
-    height: 40px;
-  }
-}

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

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import './IconButton.less';
-export interface IIconButtonProps {
-    /** Цветовая тема */
-    theme?: 'green' | 'purple' | 'white' | 'black';
-    /** Тип отображения */
-    type?: 'primary' | 'outline';
-    /** Ссылка */
-    href?: string;
-    /** Target - аргумент тега <a> */
-    target?: '_self' | '_blank' | '_parent' | '_top';
-    /** Размер на всех разрешениях экрана */
-    sizeAll?: 'small' | 'medium' | 'large';
-    /** Размер на разрешении экрана 1280+ */
-    sizeWide?: 'small' | 'medium' | 'large';
-    /** Размер на разрешении экрана 1024+ */
-    sizeDesktop?: 'small' | 'medium' | 'large';
-    /** Размер на разрешении экрана 768-1023 */
-    sizeTablet?: 'small' | 'medium' | 'large';
-    /** Размер на разрешении экрана 0-767 */
-    sizeMobile?: 'small' | 'medium' | 'large';
-    /** Иконка */
-    icon: JSX.Element;
-    /** Управление возможностью взаимодействия с компонентом */
-    disabled?: boolean;
-    /** Обработчик клика по кнопке */
-    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
-}
-declare const IconButton: React.FC<IIconButtonProps>;
-export default IconButton;

package/dist/es/components/IconButton/IconButton.js

@@ -1,69 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import cnCreate from "../../utils/cnCreate";
-import "./IconButton.css";
-import Button from "../Button/Button";
-var cn = cnCreate('mfui-beta-icon-button');
-
-var IconButton = function IconButton(props) {
-  var _props$theme = props.theme,
-      theme = _props$theme === void 0 ? 'green' : _props$theme,
-      _props$type = props.type,
-      type = _props$type === void 0 ? 'primary' : _props$type,
-      href = props.href,
-      target = props.target,
-      _props$sizeAll = props.sizeAll,
-      sizeAll = _props$sizeAll === void 0 ? 'medium' : _props$sizeAll,
-      sizeWide = props.sizeWide,
-      sizeDesktop = props.sizeDesktop,
-      sizeTablet = props.sizeTablet,
-      sizeMobile = props.sizeMobile,
-      icon = props.icon,
-      disabled = props.disabled,
-      onClick = props.onClick;
-  var currentTheme = React.useMemo(function () {
-    return type === 'primary' && theme === 'black' ? 'green' : theme;
-  }, [theme]);
-  return /*#__PURE__*/React.createElement(Button, {
-    classes: {
-      root: cn(''),
-      content: cn('content'),
-      inner: cn('inner')
-    },
-    className: cn({
-      disabled: disabled,
-      'size-all': sizeAll,
-      'size-wide': sizeWide,
-      'size-desktop': sizeDesktop,
-      'size-tablet': sizeTablet,
-      'size-mobile': sizeMobile
-    }),
-    disabled: disabled,
-    theme: currentTheme,
-    target: target,
-    href: href,
-    type: type,
-    sizeAll: sizeAll,
-    sizeWide: sizeWide,
-    sizeDesktop: sizeDesktop,
-    sizeTablet: sizeTablet,
-    sizeMobile: sizeMobile,
-    onClick: onClick
-  }, icon);
-};
-
-IconButton.propTypes = {
-  theme: PropTypes.oneOf(['green', 'purple', 'white', 'black']),
-  type: PropTypes.oneOf(['primary', 'outline']),
-  href: PropTypes.string,
-  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  sizeAll: PropTypes.oneOf(['small', 'medium', 'large']),
-  sizeWide: PropTypes.oneOf(['small', 'medium', 'large']),
-  sizeDesktop: PropTypes.oneOf(['small', 'medium', 'large']),
-  sizeTablet: PropTypes.oneOf(['small', 'medium', 'large']),
-  sizeMobile: PropTypes.oneOf(['small', 'medium', 'large']),
-  icon: PropTypes.element.isRequired,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func
-};
-export default IconButton;

package/dist/es/constants/breakpoints.d.ts

@@ -1,14 +0,0 @@
-declare const _default: {
-    mobileSmallStart: number;
-    mobileSmallEnd: number;
-    mobileMiddleStart: number;
-    mobileMiddleEnd: number;
-    mobileBigStart: number;
-    mobileBigEnd: number;
-    desktopSmallStart: number;
-    desktopSmallEnd: number;
-    desktopMiddleStart: number;
-    desktopMiddleEnd: number;
-    desktopBigStart: number;
-};
-export default _default;

package/dist/es/constants/breakpoints.js

@@ -1,13 +0,0 @@
-export default {
-  mobileSmallStart: 0,
-  mobileSmallEnd: 479,
-  mobileMiddleStart: 480,
-  mobileMiddleEnd: 767,
-  mobileBigStart: 768,
-  mobileBigEnd: 1023,
-  desktopSmallStart: 1024,
-  desktopSmallEnd: 1279,
-  desktopMiddleStart: 1280,
-  desktopMiddleEnd: 1439,
-  desktopBigStart: 1440
-};

package/dist/es/icons/Icons.css

@@ -1,229 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.icons {
-  margin-bottom: 140px;
-}
-.icons__icon-title {
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-.icons__icons {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}
-.icons__icon-container {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 160px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  text-align: center;
-  cursor: pointer;
-  word-wrap: break-word;
-  font-size: 12px;
-  white-space: nowrap;
-  border: none;
-  background: none;
-  outline: none;
-}
-.icons__icon-container:hover:before,
-.icons__icon-container_active:before {
-  content: '';
-  position: absolute;
-  top: -2px;
-  right: -4px;
-  bottom: -2px;
-  left: -8px;
-  z-index: -1;
-  background: #F6F6F6;
-  border-radius: 8px;
-}
-.icons__icon {
-  position: relative;
-  z-index: 5;
-  min-width: 32px;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-  margin-right: 8px;
-}
-.icons__icon svg {
-  display: block;
-  margin: auto;
-}
-.icons__info {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  padding: 16px;
-  border: 1px solid #EDEDED;
-  background: #FFFFFF;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}
-@media screen and (max-width: 759px) {
-  .icons__info {
-    padding-bottom: 0;
-  }
-}
-@media screen and (min-width: 1120px) {
-  .icons__info {
-    left: 240px;
-  }
-}
-.icons__info-close {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-}
-.icons__info-icons {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-.icons__info-import {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-.icons__info-import:not(:last-child) {
-  margin-bottom: 5px;
-}
-.icons__info-import > a {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-.icons__info-icon-wrapper {
-  width: 80%;
-}
-@media screen and (max-width: 759px) {
-  .icons__info-icon-wrapper {
-    width: 100%;
-  }
-}
-.icons__info-code-style {
-  font-size: 12px;
-  background: #EDEDED;
-  padding: 4px 4px 4px 10px;
-  border-radius: 4px;
-  margin-left: 10px;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  text-align: left;
-}
-.icons__info-copy {
-  background: #EDEDED;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  border-radius: 4px;
-  margin-left: 6px;
-}
-.icons__info-copy:active {
-  opacity: 0.7;
-}
-.icons__info-switcher {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: end;
-      -ms-flex-align: end;
-          align-items: flex-end;
-}
-.icons__info-icon-wrap {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  height: 65px;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  min-width: 100px;
-}
-@media screen and (max-width: 759px) {
-  .icons__info-icon-wrap {
-    margin-top: 10px;
-  }
-}
-.icons__info-icon {
-  width: 32px;
-  height: 32px;
-}
-.icons__info-sizes-wrap {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  margin-bottom: 10px;
-  width: 100%;
-}
-.icons__info-sizes {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-left: 10px;
-}
-.icons__info-size {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  width: 32px;
-  height: 32px;
-  font-size: 20px;
-  margin-right: 10px;
-  text-align: center;
-  cursor: pointer;
-}
-.icons__info-size_active {
-  border-radius: 50%;
-  background: #00B956;
-  color: #FFFFFF;
-}