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

package/dist/lib/colors/colorsData.js

@@ -10,35 +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',
-        border: '1px solid #EDEDED'
+        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'
       }]
     }]
   },
@@ -48,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'
       }]
     }
   },
@@ -67,22 +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: '#10E272'
+        code: 'buttonHoverGreen'
       }, {
         name: 'Button Hov. P.',
-        code: '#A500BF'
+        code: 'buttonhoverPurple'
       }, {
         name: 'Button Down',
-        code: '#404D46'
+        code: 'buttonDown'
       }]
     }
   },
@@ -92,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%)'
       }]
     }
@@ -111,12 +111,12 @@ var colors = {
       description: 'Цвета не зависящие от темы',
       colors: [{
         name: 'STC White',
-        code: '#FFFFFF',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black',
-        code: '#333333',
-        border: '1px solid #EDEDED'
+        code: 'stcBlack',
+        border: '1px solid var(--spbSky1)'
       }]
     }
   },
@@ -126,36 +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',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite50',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 5%',
-        code: '#3333330D',
-        border: '1px solid #EDEDED'
+        code: 'stcBlack5',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 10%',
-        code: '#3333331A',
-        border: '1px solid #EDEDED'
+        code: 'stcBlack10',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 20%',
-        code: '#33333333',
-        border: '1px solid #EDEDED'
+        code: 'stcBlack20',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 50%',
-        code: '#33333380',
-        border: '1px solid #EDEDED'
+        code: 'stcBlack50',
+        border: '1px solid var(--spbSky1)'
       }]
     }
   },
@@ -164,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,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-accordion {
   border-top: 1px solid var(--spbSky2);
   border-bottom: 1px solid var(--spbSky2);

package/dist/lib/components/Accordion/Accordion.d.ts

@@ -20,7 +20,7 @@ export interface IAccordionProps extends IFilterDataAttrs {
         titleWrap?: string;
     };
     /** Обработчик клика */
-    onClickAccordion?: (isOpened: boolean, title: string | React.ReactNode | React.ReactNode[]) => void;
+    onClickAccordion?: (isOpened: boolean) => void;
 }
 declare const Accordion: React.FC<IAccordionProps>;
 export default Accordion;

package/dist/lib/components/Accordion/Accordion.js

@@ -72,9 +72,11 @@ var Accordion = function Accordion(_ref) {
     setIsOpenedState(isOpened);
   }, [isOpened]);
 
-  var handleClickTitle = function handleClickTitle() {
-    onClickAccordion && onClickAccordion(!isOpenedState, title);
-    setIsOpenedState(!isOpenedState);
+  var handleClickTitle = function handleClickTitle(e) {
+    if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
+      onClickAccordion && onClickAccordion(!isOpenedState);
+      setIsOpenedState(!isOpenedState);
+    }
   };
 
   var openedClassName = isOpenedState ? openedClass : undefined;
@@ -85,10 +87,13 @@ var Accordion = function Accordion(_ref) {
     }, [className, rootPropsClasses, openedClassName])
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('title-wrap', [titleWrapPropsClasses]),
-    onClick: handleClickTitle
+    onClick: handleClickTitle,
+    onKeyDown: handleClickTitle
   }, /*#__PURE__*/React.createElement(_Header["default"], {
     as: "h5"
   }, title), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "button",
     className: cn('icon-box', {
       open: isOpenedState
     })

package/dist/lib/components/Banner/Banner.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-banner {
   position: relative;
   overflow: hidden;
@@ -147,7 +93,7 @@ h5 {
   background-color: transparent;
 }
 .mfui-banner__pagination_theme_green {
-  background-color: var(--green);
+  background-color: var(--brandGreen);
 }
 .mfui-banner__pagination_theme_dark {
   background-color: var(--stcBlack20);

package/dist/lib/components/Banner/BannerDot.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-banner-dot {
   display: -webkit-box;
   display: -ms-flexbox;

package/dist/lib/components/Button/Button.css

@@ -1,67 +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;
-}
-:root {
-  --green7: rgba(0, 185, 86, 0.07);
-  --green14: rgba(0, 185, 86, 0.14);
-  --purple7: rgba(115, 25, 130, 0.07);
-  --purple14: rgba(115, 25, 130, 0.14);
-  --content7: rgba(51, 51, 51, 0.07);
-  --content14: rgba(51, 51, 51, 0.14);
-  --base7: rgba(255, 255, 255, 0.07);
-  --base14: rgba(255, 255, 255, 0.14);
-}
 .mfui-button {
   font-family: inherit;
   font-size: 15px;
@@ -265,7 +201,7 @@ h5 {
 }
 .mfui-button_type_primary.mfui-button_theme_green {
   color: var(--stcWhite);
-  background-color: var(--green);
+  background-color: var(--brandGreen);
 }
 .mfui-button_type_primary.mfui-button_theme_green svg {
   fill: var(--stcWhite);
@@ -282,7 +218,7 @@ h5 {
 }
 .mfui-button_type_primary.mfui-button_theme_purple {
   color: var(--stcWhite);
-  background-color: var(--purple);
+  background-color: var(--brandPurple);
 }
 .mfui-button_type_primary.mfui-button_theme_purple svg {
   fill: var(--stcWhite);
@@ -319,34 +255,42 @@ h5 {
           box-shadow: inset 0 0 0 1px var(--buttonDown);
 }
 .mfui-button_type_outline.mfui-button_theme_green {
-  color: var(--green);
+  color: var(--brandGreen);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px var(--green);
-          box-shadow: inset 0 0 0 1px var(--green);
+  -webkit-box-shadow: inset 0 0 0 1px var(--brandGreen);
+          box-shadow: inset 0 0 0 1px var(--brandGreen);
 }
 .mfui-button_type_outline.mfui-button_theme_green svg {
-  fill: var(--green);
+  fill: var(--brandGreen);
+}
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green {
+  --brandGreen7: rgba(0, 185, 86, 0.07);
+  --brandGreen14: rgba(0, 185, 86, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):hover {
-  background-color: var(--green7);
+  background-color: var(--brandGreen7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):active {
-  background-color: var(--green14);
+  background-color: var(--brandGreen14);
 }
 .mfui-button_type_outline.mfui-button_theme_purple {
-  color: var(--purple);
+  color: var(--brandPurple);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px var(--purple);
-          box-shadow: inset 0 0 0 1px var(--purple);
+  -webkit-box-shadow: inset 0 0 0 1px var(--brandPurple);
+          box-shadow: inset 0 0 0 1px var(--brandPurple);
 }
 .mfui-button_type_outline.mfui-button_theme_purple svg {
-  fill: var(--purple);
+  fill: var(--brandPurple);
+}
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple {
+  --brandPurple7: rgba(115, 25, 130, 0.07);
+  --brandPurple14: rgba(115, 25, 130, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):hover {
-  background-color: var(--purple7);
+  background-color: var(--brandPurple7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):active {
-  background-color: var(--purple14);
+  background-color: var(--brandPurple14);
 }
 .mfui-button_type_outline.mfui-button_theme_white {
   color: var(--stcWhite);
@@ -357,6 +301,10 @@ h5 {
 .mfui-button_type_outline.mfui-button_theme_white svg {
   fill: var(--stcWhite);
 }
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white {
+  --base7: rgba(255, 255, 255, 0.07);
+  --base14: rgba(255, 255, 255, 0.14);
+}
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):hover {
   background-color: var(--base7);
 }
@@ -372,6 +320,10 @@ h5 {
 .mfui-button_type_outline.mfui-button_theme_black svg {
   fill: var(--stcBlack);
 }
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black {
+  --content7: rgba(51, 51, 51, 0.07);
+  --content14: rgba(51, 51, 51, 0.14);
+}
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):hover {
   background-color: var(--content7);
 }