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

package/dist/lib/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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "2.1.2",
+  "version": "3.0.0-beta.0",
   "files": [
     "dist",
     "styles"
@@ -53,7 +53,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^0.1.1",
+    "@megafon/ui-icons": "^1.0.0-beta.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -85,7 +85,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^1.0.0",
+    "@megafon/ui-helpers": "^2.0.0-beta.0",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "fc16033b1b0f6975f9ffc1f436fcb6114d1e6fa1"
+  "gitHead": "42f072baa654d12403f32bb734d406595cf8d5ac"
 }

package/styles/base.less

@@ -1,77 +1,63 @@
-// Basic Colors
-@green: #00B956;
-@purple: #731982;
-@base: #FFFFFF;
-@spbSky0: #F6F6F6;
-@spbSky1: #EDEDED;
-@spbSky2: #D8D8D8;
-@spbSky3: #999999;
-@content: #333333;
-@fullBlack: #000000;
-
-// Secondary Colors
-@warmRedC: #EB5A40;
-@Pantone137C: #FFA717;
-@Pantone311C: #5BD9E5;
-@reflexBlue: #444189;
-
-// System Colors
-@fury: #F62434;
-@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: #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);
+:root {
+    // Basic Colors
+    --green: #00B956;
+    --purple: #731982;
+    --base: #FFFFFF;
+    --content: #333333;
+    --spbSky0: #F6F6F6;
+    --spbSky1: #EDEDED;
+    --spbSky2: #D8D8D8;
+    --spbSky3: #999999;
+
+    // Secondary Colors
+    --warmRedC: #EB5A40;
+    --137C: #FFA717;
+    --311C: #5BD9E5;
+    --reflexBlue: #444189;
+
+    // System Colors
+    --fury: #F62434;
+    --systemBlue: #34AAF2;
+    --background: #FFFFFF;
+    --buttonHoverGreen: #10E272;
+    --buttonhoverPurple: #534455;
+    --buttonDown: #404D46;
+
+    // Gradients
+    --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%);
+
+    // Static
+    --STCWhite: #FFFFFF;
+    --STCBlack: #333333;
+
+    // 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;
+    --137C80: #FFB945;
+    --137C20: #FFEDD1;
+    --311C80: #62E3FF;
+    --311C20: #E1FAFF;
+    --reflexBlue80: #554FC9;
+    --reflexBlue20: #EBEAFF;
+    --fury80: #F8505D;
+    --fury20: #FFC5C9;
+}
 
 // BREAKPOINTS
 @mobileSmallEnd:      479px;
@@ -229,7 +215,7 @@ h5 {
 }
 
 .link() {
-    color: @systemBlue;
+    color: var(--systemBlue);
     text-decoration: none;
 
     &:hover {