@semcore/d3-chart 1.9.0 → 2.0.2

package/lib/es6/StackBar.js

@@ -27,15 +27,15 @@ var _ref = (
 /*__reshadow_css_start__*/
 __css__(
 /*__inner_css_start__*/
-".___SBar_73i43_gg_{fill:#50aef4;transition-property:height,width,y;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SBar_73i43_gg_.__color_73i43_gg_{fill:var(--color)}.___SBar_73i43_gg_.__hide_73i43_gg_{display:none}.___SBackground_73i43_gg_{fill:#e4ecf1}"
+".___SBar_1bnbx_gg_{fill:#2bb3ff;transition-property:height,width,y;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SBar_1bnbx_gg_.__color_1bnbx_gg_{fill:var(--color)}.___SBar_1bnbx_gg_.__hide_1bnbx_gg_{display:none}.___SBackground_1bnbx_gg_{fill:#c4c7cf}"
 /*__inner_css_end__*/
-, "glppkm_gg_")
+, "s6fbpe_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SBar": "___SBar_73i43_gg_",
-  "_color": "__color_73i43_gg_",
-  "_hide": "__hide_73i43_gg_",
-  "__SBackground": "___SBackground_73i43_gg_"
+  "__SBar": "___SBar_1bnbx_gg_",
+  "_color": "__color_1bnbx_gg_",
+  "_hide": "__hide_1bnbx_gg_",
+  "__SBackground": "___SBackground_1bnbx_gg_"
 }),
     style = _extends({}, _ref);
 

package/lib/es6/StackedArea.js

@@ -26,16 +26,16 @@ var _ref = (
 /*__reshadow_css_start__*/
 __css__(
 /*__inner_css_start__*/
-".___SArea_1n9og_gg_{fill:#50aef4;fill-opacity:.4}.___SArea_1n9og_gg_.__color_1n9og_gg_{fill:var(--color)}.___SAreaLine_1n9og_gg_{stroke:#50aef4;stroke-width:3;fill:transparent}.___SAreaLine_1n9og_gg_.__color_1n9og_gg_{stroke:var(--color)}.___SArea_1n9og_gg_,.___SAreaLine_1n9og_gg_{transition-property:d;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SNull_1n9og_gg_{fill:transparent;stroke:#bdc4c6;stroke-dasharray:4}.___SNull_1n9og_gg_.__hide_1n9og_gg_{display:none}"
+".___SArea_10qwn_gg_{fill:#2bb3ff;fill-opacity:.2}.___SArea_10qwn_gg_.__color_10qwn_gg_{fill:var(--color)}.___SAreaLine_10qwn_gg_{stroke:#2bb3ff;stroke-width:3;fill:transparent}.___SAreaLine_10qwn_gg_.__color_10qwn_gg_{stroke:var(--color)}.___SArea_10qwn_gg_,.___SAreaLine_10qwn_gg_{transition-property:d;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SNull_10qwn_gg_{fill:transparent;stroke:#8a8e9b;stroke-dasharray:4}.___SNull_10qwn_gg_.__hide_10qwn_gg_{display:none}"
 /*__inner_css_end__*/
-, "94yf40_gg_")
+, "1hldm7u_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SArea": "___SArea_1n9og_gg_",
-  "_color": "__color_1n9og_gg_",
-  "__SAreaLine": "___SAreaLine_1n9og_gg_",
-  "__SNull": "___SNull_1n9og_gg_",
-  "_hide": "__hide_1n9og_gg_"
+  "__SArea": "___SArea_10qwn_gg_",
+  "_color": "__color_10qwn_gg_",
+  "__SAreaLine": "___SAreaLine_10qwn_gg_",
+  "__SNull": "___SNull_10qwn_gg_",
+  "_hide": "__hide_10qwn_gg_"
 }),
     style = _extends({}, _ref);
 

package/lib/es6/Tooltip.js

@@ -34,17 +34,17 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STooltip_qrs3t_gg_{font-size:12px;line-height:1.5;position:relative;background-color:#fff;border-radius:3px;border:1px solid #bdc4c6;box-sizing:border-box;box-shadow:0 2px 5px 0 rgba(0,0,0,.25),0 -2px 5px -2px rgba(0,0,0,.25);padding:12px}.___STitle_qrs3t_gg_{color:#757575;margin-bottom:8px}.___SDotGroup_qrs3t_gg_{display:flex;align-items:center}.___SDot_qrs3t_gg_{width:8px;height:8px;border-radius:50%;margin-right:8px;background:#50aef4}.___SDot_qrs3t_gg_.__color_qrs3t_gg_{background:var(--color_drazch)}"
+".___STooltip_su7qo_gg_{font-size:12px;line-height:1.33;position:relative;background-color:#fff;border-radius:6px;border:1px solid #e0e1e9;box-sizing:border-box;box-shadow:0px 1px 12px 0px rgba(25, 27, 35, 0.15);padding:12px}.___STitle_su7qo_gg_{color:#6c6e79;margin-bottom:8px}.___SDotGroup_su7qo_gg_{display:flex;align-items:center}.___SDot_su7qo_gg_{width:8px;height:8px;border-radius:50%;margin-right:8px;background:#2bb3ff}.___SDot_su7qo_gg_.__color_su7qo_gg_{background:var(--color_1rhpqds)}"
 /*__inner_css_end__*/
-, "drazch_gg_")
+, "1rhpqds_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STooltip": "___STooltip_qrs3t_gg_",
-  "__STitle": "___STitle_qrs3t_gg_",
-  "__SDotGroup": "___SDotGroup_qrs3t_gg_",
-  "__SDot": "___SDot_qrs3t_gg_",
-  "_color": "__color_qrs3t_gg_",
-  "--color": "--color_drazch"
+  "__STooltip": "___STooltip_su7qo_gg_",
+  "__STitle": "___STitle_su7qo_gg_",
+  "__SDotGroup": "___SDotGroup_su7qo_gg_",
+  "__SDot": "___SDot_su7qo_gg_",
+  "_color": "__color_su7qo_gg_",
+  "--color": "--color_1rhpqds"
 });
 
 var TooltipRoot = /*#__PURE__*/function (_Component) {

package/lib/es6/Venn.js

@@ -26,16 +26,16 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SCircle_1c5as_gg_{fill:#3ab011;stroke:#fff;stroke-width:2px;fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_1j56sbj);transition-timing-function:ease-in-out}.___SCircle_1c5as_gg_:hover{fill-opacity:.7}.___SCircle_1c5as_gg_.__color_1c5as_gg_{fill:var(--color_1j56sbj)}.___SIntersection_1c5as_gg_{stroke:#fff;stroke-width:2px;fill-opacity:0}.___SIntersection_1c5as_gg_:hover{fill-opacity:.1}"
+".___SCircle_1evfu_gg_{fill:#59ddaa;stroke:#fff;stroke-width:2px;fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_1y13fr0);transition-timing-function:ease-in-out}.___SCircle_1evfu_gg_:hover{fill-opacity:.7}.___SCircle_1evfu_gg_.__color_1evfu_gg_{fill:var(--color_1y13fr0)}.___SIntersection_1evfu_gg_{stroke:#fff;stroke-width:2px;fill-opacity:0}.___SIntersection_1evfu_gg_:hover{fill-opacity:.1}"
 /*__inner_css_end__*/
-, "1j56sbj_gg_")
+, "1y13fr0_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCircle": "___SCircle_1c5as_gg_",
-  "--duration": "--duration_1j56sbj",
-  "_color": "__color_1c5as_gg_",
-  "--color": "--color_1j56sbj",
-  "__SIntersection": "___SIntersection_1c5as_gg_"
+  "__SCircle": "___SCircle_1evfu_gg_",
+  "--duration": "--duration_1y13fr0",
+  "_color": "__color_1evfu_gg_",
+  "--color": "--color_1y13fr0",
+  "__SIntersection": "___SIntersection_1evfu_gg_"
 });
 
 var VennRoot = /*#__PURE__*/function (_Component) {

package/lib/es6/color.js

@@ -1,35 +1,127 @@
 /*__semcore-vars__:"./style/var.css"*/
 var colors = {
-  "blue-01": "#50aef4",
-  "blue-02": "#91c7ef",
-  "blue-03": "#0e75c2",
-  "blue-04": "#d1e8f8",
-  "blue-05": "#084c80",
-  "green-01": "#3ab011",
-  "green-02": "#91d27b",
-  "green-03": "#278707",
-  "green-04": "#d1edc8",
-  "green-05": "#1a6700",
-  "orange-01": "#ff8e29",
-  "orange-02": "#fec089",
-  "orange-03": "#da6905",
-  "orange-04": "#ffe5cd",
-  "orange-05": "#a14e03",
-  "violet-01": "#890c85",
-  "violet-02": "#c783c5",
-  "violet-03": "#6e026b",
-  "violet-04": "#e7cbe6",
-  "violet-05": "#4d024b",
-  "red-01": "#e91e25",
-  "red-02": "#f69498",
-  "red-03": "#bd0000",
-  "red-04": "#fbd2d3",
-  "red-05": "#830005",
-  "yellow-01": "#ffc83f",
-  "yellow-02": "#ffdb82",
-  "yellow-03": "#e4aa18",
-  "yellow-04": "#ffebb9",
-  "yellow-05": "#b3840c"
+  "blue-01": "#c4e5fe",
+  "blue-02": "#8ecdff",
+  "blue-03": "#2bb3ff",
+  "blue-04": "#008ff8",
+  "blue-05": "#006dca",
+  "green-01": "#9ef2c9",
+  "green-02": "#59ddaa",
+  "green-03": "#00c192",
+  "green-04": "#009f81",
+  "green-05": "#007c65",
+  "orange-01": "#ffdca2",
+  "orange-02": "#ffb26e",
+  "orange-03": "#ff8c43",
+  "orange-04": "#ff622d",
+  "orange-05": "#c33909",
+  "pink-01": "#ffd3ff",
+  "pink-02": "#ffa9fa",
+  "pink-03": "#f67cf2",
+  "pink-04": "#e14adf",
+  "pink-05": "#b229b9",
+  "violet-01": "#edd9ff",
+  "violet-02": "#dcb8ff",
+  "violet-03": "#c695ff",
+  "violet-04": "#ab6cfe",
+  "violet-05": "#8649e1",
+  "red-01": "#ffd7df",
+  "red-02": "#ffaeb5",
+  "red-03": "#ff8786",
+  "red-04": "#ff4953",
+  "red-05": "#d1002f",
+  "yellow-01": "#fce081",
+  "yellow-02": "#fdc23c",
+  "yellow-03": "#ef9800",
+  "yellow-04": "#d87900",
+  "yellow-05": "#a75800",
+  "salad-01": "#c7ee96",
+  "salad-02": "#9bd85d",
+  "salad-03": "#66c030",
+  "salad-04": "#35a21e",
+  "salad-05": "#0a7e22",
+  "gray-01": "#c4c7cf",
+  "gray-50": "#f4f5f9",
+  "gray-100": "#e0e1e9",
+  "gray-200": "#c4c7cf",
+  "gray-300": "#a9abb6",
+  "gray-400": "#8a8e9b",
+  "gray-500": "#6c6e79",
+  "gray-600": "#484a54",
+  "gray-700": "#2b2e38",
+  "gray-800": "#191b23",
+  "blue-50": "#e9f7ff",
+  "blue-100": "#c4e5fe",
+  "blue-200": "#8ecdff",
+  "blue-300": "#2bb3ff",
+  "blue-400": "#008ff8",
+  "blue-500": "#006dca",
+  "blue-600": "#044792",
+  "blue-700": "#002b5f",
+  "blue-800": "#001b3d",
+  "green-100": "#9ef2c9",
+  "green-200": "#59ddaa",
+  "green-300": "#00c192",
+  "green-400": "#009f81",
+  "green-50": "#dbfee8",
+  "green-500": "#007c65",
+  "green-600": "#055345",
+  "green-700": "#00342d",
+  "green-800": "#00201e",
+  "salad-100": "#c7ee96",
+  "salad-200": "#9bd85d",
+  "salad-300": "#66c030",
+  "salad-400": "#35a21e",
+  "salad-50": "#ecfbcd",
+  "salad-500": "#0a7e22",
+  "salad-600": "#005613",
+  "salad-700": "#003509",
+  "salad-800": "#002203",
+  "orange-50": "#fff3d9",
+  "orange-100": "#ffdca2",
+  "orange-200": "#ffb26e",
+  "orange-300": "#ff8c43",
+  "orange-400": "#ff622d",
+  "orange-500": "#c33909",
+  "orange-600": "#8b1500",
+  "orange-700": "#551200",
+  "orange-800": "#351000",
+  "yellow-100": "#fce081",
+  "yellow-200": "#fdc23c",
+  "yellow-300": "#ef9800",
+  "yellow-400": "#d87900",
+  "yellow-50": "#fdf7c8",
+  "yellow-500": "#a75800",
+  "yellow-600": "#743a00",
+  "yellow-700": "#462500",
+  "yellow-800": "#2c1600",
+  "red-100": "#ffd7df",
+  "red-200": "#ffaeb5",
+  "red-300": "#ff8786",
+  "red-400": "#ff4953",
+  "red-50": "#fff0f7",
+  "red-500": "#d1002f",
+  "red-600": "#8e0016",
+  "red-700": "#58000a",
+  "red-800": "#410101",
+  "pink-100": "#ffd3ff",
+  "pink-200": "#ffa9fa",
+  "pink-300": "#f67cf2",
+  "pink-400": "#e14adf",
+  "pink-50": "#fff0ff",
+  "pink-500": "#b229b9",
+  "pink-600": "#7d0480",
+  "pink-700": "#4d0050",
+  "pink-800": "#340439",
+  "violet-100": "#edd9ff",
+  "violet-200": "#dcb8ff",
+  "violet-300": "#c695ff",
+  "violet-400": "#ab6cfe",
+  "violet-50": "#f9f2ff",
+  "violet-500": "#8649e1",
+  "violet-600": "#5925ab",
+  "violet-700": "#421984",
+  "violet-800": "#220358"
 };
 var componentRenderIndex = 0;
 var cache = {};

package/lib/es6/color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/color.js"],"names":["colors","componentRenderIndex","cache","colorValues","Object","keys","sort","a","b","parseInt","match","join","getColor","key","color"],"mappings":"AAAA;AACA,IAAMA,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAZ;AAKA,IAAIC,oBAAoB,GAAG,CAA3B;AACA,IAAMC,KAAK,GAAG,EAAd;AACA,IAAMC,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYL,MAAZ,EAAoBM,IAApB,CAAyB,UAACC,CAAD,EAAIC,CAAJ,EAAU;AACrD,SAAOC,QAAQ,CAACF,CAAC,CAACG,KAAF,CAAQ,QAAR,EAAkBC,IAAlB,CAAuB,EAAvB,CAAD,EAA6B,EAA7B,CAAR,GAA2CF,QAAQ,CAACD,CAAC,CAACE,KAAF,CAAQ,QAAR,EAAkBC,IAAlB,CAAuB,EAAvB,CAAD,EAA6B,EAA7B,CAA1D;AACD,CAFmB,CAApB;AAIA,SAASX,MAAT;AACA,eAAe,SAASY,QAAT,CAAkBC,GAAlB,EAAuB;AACpC,MAAIX,KAAK,CAACW,GAAD,CAAT,EAAgB;AACd,WAAOX,KAAK,CAACW,GAAD,CAAZ;AACD;;AACD,MAAMC,KAAK,GAAGd,MAAM,CAACG,WAAW,CAACF,oBAAoB,EAArB,CAAZ,CAApB;AACAC,EAAAA,KAAK,CAACW,GAAD,CAAL,GAAaC,KAAb;AACA,SAAOA,KAAP;AACD","sourcesContent":["/*__semcore-vars__:\"./style/var.css\"*/\nconst colors = preval`\n  const path = require('path');\n  module.exports = require('@semcore/babel-plugin-react-semcore').getColorVars(path.resolve(__dirname, './style/var.css'));\n`;\n\nlet componentRenderIndex = 0;\nconst cache = {};\nconst colorValues = Object.keys(colors).sort((a, b) => {\n  return parseInt(a.match(/[0-9]/g).join(''), 10) - parseInt(b.match(/[0-9]/g).join(''), 10);\n});\n\nexport { colors };\nexport default function getColor(key) {\n  if (cache[key]) {\n    return cache[key];\n  }\n  const color = colors[colorValues[componentRenderIndex++]];\n  cache[key] = color;\n  return color;\n}\n"],"file":"color.js"}
+{"version":3,"sources":["../../src/color.js"],"names":["colors","componentRenderIndex","cache","colorValues","Object","keys","sort","a","b","parseInt","match","join","getColor","key","color"],"mappings":"AAAA;AACA,IAAMA,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAZ;AAKA,IAAIC,oBAAoB,GAAG,CAA3B;AACA,IAAMC,KAAK,GAAG,EAAd;AACA,IAAMC,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYL,MAAZ,EAAoBM,IAApB,CAAyB,UAACC,CAAD,EAAIC,CAAJ,EAAU;AACrD,SAAOC,QAAQ,CAACF,CAAC,CAACG,KAAF,CAAQ,QAAR,EAAkBC,IAAlB,CAAuB,EAAvB,CAAD,EAA6B,EAA7B,CAAR,GAA2CF,QAAQ,CAACD,CAAC,CAACE,KAAF,CAAQ,QAAR,EAAkBC,IAAlB,CAAuB,EAAvB,CAAD,EAA6B,EAA7B,CAA1D;AACD,CAFmB,CAApB;AAIA,SAASX,MAAT;AACA,eAAe,SAASY,QAAT,CAAkBC,GAAlB,EAAuB;AACpC,MAAIX,KAAK,CAACW,GAAD,CAAT,EAAgB;AACd,WAAOX,KAAK,CAACW,GAAD,CAAZ;AACD;;AACD,MAAMC,KAAK,GAAGd,MAAM,CAACG,WAAW,CAACF,oBAAoB,EAArB,CAAZ,CAApB;AACAC,EAAAA,KAAK,CAACW,GAAD,CAAL,GAAaC,KAAb;AACA,SAAOA,KAAP;AACD","sourcesContent":["/*__semcore-vars__:\"./style/var.css\"*/\nconst colors = preval`\n  const path = require('path');\n  module.exports = require('@semcore/babel-plugin-react-semcore').getColorVars(path.resolve(__dirname, './style/var.css'));\n`;\n\nlet componentRenderIndex = 0;\nconst cache = {};\nconst colorValues = Object.keys(colors).sort((a, b) => {\n  return parseInt(a.match(/[0-9]/g).join(''), 10) - parseInt(b.match(/[0-9]/g).join(''), 10);\n});\n\nexport { colors };\nexport default function getColor(key) {\n  if (cache[key]) {\n    return cache[key];\n  }\n  const color = colors[colorValues[componentRenderIndex++]];\n  cache[key] = color;\n  return color;\n}\n"],"file":"color.js"}

package/lib/es6/style/area.shadow.css

@@ -1,8 +1,8 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SArea {
-  fill: var(--blue-01);
-  fill-opacity: 0.4;
+  fill: var(--blue-03);
+  fill-opacity: 0.2;
 }
 
 SArea[color] {
@@ -10,7 +10,7 @@ SArea[color] {
 }
 
 SAreaLine {
-  stroke: var(--blue-01);
+  stroke: var(--blue-03);
   stroke-width: 3;
   fill: transparent;
 }
@@ -28,7 +28,7 @@ SAreaLine {
 
 SNull {
   fill: transparent;
-  stroke: #bdc4c6;
+  stroke: var(--gray-400);
   stroke-dasharray: 4;
 }
 

package/lib/es6/style/axis.shadow.css

@@ -1,7 +1,7 @@
 @import '@semcore/utils/style/var.css';
 
 SAxis {
-  stroke: var(--stone);
+  stroke: var(--gray-200);
 }
 
 SAxis[hide] {
@@ -10,7 +10,7 @@ SAxis[hide] {
 
 STick {
   font-size: 12px;
-  fill: var(--gray60);
+  fill: var(--gray-500);
 }
 
 STick[hide] {
@@ -19,12 +19,12 @@ STick[hide] {
 
 SGrid {
   fill: transparent;
-  stroke: var(--mercury);
+  stroke: var(--gray-100);
 }
 
 STitle {
   font-size: 12px;
-  fill: var(--gray60);
+  fill: var(--gray-500);
   transform-origin: var(--transform-origin);
 }
 

package/lib/es6/style/bar.shadow.css

@@ -2,7 +2,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SBar {
-  fill: var(--blue-01);
+  fill: var(--blue-03);
   transition-property: height, width, y;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -17,5 +17,5 @@ SBar[hide] {
 }
 
 SBackground {
-  fill: var(--mystic);
+  fill: var(--gray-200);
 }

package/lib/es6/style/bubble.shadow.css

@@ -2,7 +2,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SBubble {
-  fill: #2bb3ff;
+  fill: var(--blue-03);
   stroke: #fff;
   stroke-width: 2px;
   transition-property: cx, cy;
@@ -21,7 +21,7 @@ SBubble[color] {
 SCenter {
   text-anchor: middle;
   font-size: 11px;
-  stroke: #2bb3ff;
+  stroke: var(--blue-03);
 }
 
 SCenter[color] {
@@ -29,7 +29,7 @@ SCenter[color] {
 }
 
 SLabel {
-  fill: #2bb3ff;
+  fill: var(--blue-03);
 }
 
 SLabel[position='right'] {

package/lib/es6/style/donut.shadow.css

@@ -3,7 +3,7 @@
 
 SPie {
   stroke: #ffffff;
-  fill: var(--blue-01);
+  fill: var(--blue-03);
 }
 
 SPie[color] {
@@ -11,7 +11,7 @@ SPie[color] {
 }
 
 SEmptyData {
-  fill: var(--mystic);
+  fill: var(--gray-100);
 }
 
 SEmptyData[color] {

package/lib/es6/style/dot.shadow.css

@@ -5,7 +5,7 @@ SDot {
   stroke-width: 2px;
   stroke: #fff;
   r: 6px;
-  fill: var(--blue-01);
+  fill: var(--blue-03);
   transition-property: cx, cy;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;

package/lib/es6/style/hover.shadow.css

@@ -1,9 +1,9 @@
 @import '@semcore/utils/style/var.css';
 
 SHoverLine {
-  stroke: var(--stone);
+  stroke: var(--gray-300);
 }
 
 SHoverRect {
-  fill: color-mod(var(--mist) a(30%));
+  fill: color-mod(var(--gray-200) a(30%));
 }

package/lib/es6/style/line.shadow.css

@@ -4,7 +4,7 @@
 SLine {
   fill: transparent;
   stroke-width: 3;
-  stroke: var(--blue-01);
+  stroke: var(--blue-03);
   transition-property: d;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -20,7 +20,7 @@ SLine[hide] {
 
 SNull {
   fill: transparent;
-  stroke: var(--mist);
+  stroke: var(--gray-200);
   stroke-dasharray: 4;
 }
 

package/lib/es6/style/radial-tree.shadow.css

@@ -3,10 +3,21 @@
 
 SRadian {
   cursor: pointer;
+  fill: var(--blue-04);
 }
+
+SLine {
+  stroke: var(--blue-04);
+}
+
+SLine[color] {
+  stroke: var(--color);
+}
+
 SCap {
   transition: r 0.1s;
 }
+
 SLabel {
   fill: var(--color);
   cursor: var(--text-cursor);

package/lib/es6/style/scatterplot.shadow.css

@@ -2,7 +2,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SScatterPlot {
-  fill: #2bb3ff;
+  fill: var(--blue-03);
   transition-property: cx, cy;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -19,7 +19,7 @@ SScatterPlot[color] {
 SValue {
   text-anchor: middle;
   font-size: 10px;
-  stroke: #008ff8;
+  stroke: var(--blue-04);
 }
 
 SValue[color] {

package/lib/es6/style/tooltip.shadow.css

@@ -6,15 +6,15 @@ STooltip {
   line-height: var(--lh-100);
   position: relative;
   background-color: #fff;
-  border-radius: 3px;
-  border: 1px solid var(--stone-light);
+  border-radius: 6px;
+  border: 1px solid var(--gray-100);
   box-sizing: border-box;
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25), 0 -2px 5px -2px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow-popper);
   padding: 12px;
 }
 
 STitle {
-  color: var(--gray60);
+  color: var(--gray-500);
   margin-bottom: 8px;
 }
 
@@ -28,7 +28,7 @@ SDot {
   height: 8px;
   border-radius: 50%;
   margin-right: 8px;
-  background: var(--blue-01);
+  background: var(--blue-03);
 }
 
 SDot[color] {

package/lib/es6/style/var.css

@@ -1,32 +1,125 @@
 :root {
-  --blue-01: #50aef4;
-  --blue-02: #91c7ef;
-  --blue-03: #0e75c2;
-  --blue-04: #d1e8f8;
-  --blue-05: #084c80;
-  --green-01: #3ab011;
-  --green-02: #91d27b;
-  --green-03: #278707;
-  --green-04: #d1edc8;
-  --green-05: #1a6700;
-  --orange-01: #ff8e29;
-  --orange-02: #fec089;
-  --orange-03: #da6905;
-  --orange-04: #ffe5cd;
-  --orange-05: #a14e03;
-  --violet-01: #890c85;
-  --violet-02: #c783c5;
-  --violet-03: #6e026b;
-  --violet-04: #e7cbe6;
-  --violet-05: #4d024b;
-  --red-01: #e91e25;
-  --red-02: #f69498;
-  --red-03: #bd0000;
-  --red-04: #fbd2d3;
-  --red-05: #830005;
-  --yellow-01: #ffc83f;
-  --yellow-02: #ffdb82;
-  --yellow-03: #e4aa18;
-  --yellow-04: #ffebb9;
-  --yellow-05: #b3840c;
+  --blue-01: #c4e5fe;
+  --blue-02: #8ecdff;
+  --blue-03: #2bb3ff;
+  --blue-04: #008ff8;
+  --blue-05: #006dca;
+  --green-01: #9ef2c9;
+  --green-02: #59ddaa;
+  --green-03: #00c192;
+  --green-04: #009f81;
+  --green-05: #007c65;
+  --orange-01: #ffdca2;
+  --orange-02: #ffb26e;
+  --orange-03: #ff8c43;
+  --orange-04: #ff622d;
+  --orange-05: #c33909;
+  --pink-01: #ffd3ff;
+  --pink-02: #ffa9fa;
+  --pink-03: #f67cf2;
+  --pink-04: #e14adf;
+  --pink-05: #b229b9;
+  --violet-01: #edd9ff;
+  --violet-02: #dcb8ff;
+  --violet-03: #c695ff;
+  --violet-04: #ab6cfe;
+  --violet-05: #8649e1;
+  --red-01: #ffd7df;
+  --red-02: #ffaeb5;
+  --red-03: #ff8786;
+  --red-04: #ff4953;
+  --red-05: #d1002f;
+  --yellow-01: #fce081;
+  --yellow-02: #fdc23c;
+  --yellow-03: #ef9800;
+  --yellow-04: #d87900;
+  --yellow-05: #a75800;
+  --salad-01: #c7ee96;
+  --salad-02: #9bd85d;
+  --salad-03: #66c030;
+  --salad-04: #35a21e;
+  --salad-05: #0a7e22;
+  --gray-01: #c4c7cf;
+
+  --gray-50: #f4f5f9;
+  --gray-100: #e0e1e9;
+  --gray-200: #c4c7cf;
+  --gray-300: #a9abb6;
+  --gray-400: #8a8e9b;
+  --gray-500: #6c6e79;
+  --gray-600: #484a54;
+  --gray-700: #2b2e38;
+  --gray-800: #191b23;
+  --blue-50: #e9f7ff;
+  --blue-100: #c4e5fe;
+  --blue-200: #8ecdff;
+  --blue-300: #2bb3ff;
+  --blue-400: #008ff8;
+  --blue-500: #006dca;
+  --blue-600: #044792;
+  --blue-700: #002b5f;
+  --blue-800: #001b3d;
+  --green-100: #9ef2c9;
+  --green-200: #59ddaa;
+  --green-300: #00c192;
+  --green-400: #009f81;
+  --green-50: #dbfee8;
+  --green-500: #007c65;
+  --green-600: #055345;
+  --green-700: #00342d;
+  --green-800: #00201e;
+  --salad-100: #c7ee96;
+  --salad-200: #9bd85d;
+  --salad-300: #66c030;
+  --salad-400: #35a21e;
+  --salad-50: #ecfbcd;
+  --salad-500: #0a7e22;
+  --salad-600: #005613;
+  --salad-700: #003509;
+  --salad-800: #002203;
+  --orange-50: #fff3d9;
+  --orange-100: #ffdca2;
+  --orange-200: #ffb26e;
+  --orange-300: #ff8c43;
+  --orange-400: #ff622d;
+  --orange-500: #c33909;
+  --orange-600: #8b1500;
+  --orange-700: #551200;
+  --orange-800: #351000;
+  --yellow-100: #fce081;
+  --yellow-200: #fdc23c;
+  --yellow-300: #ef9800;
+  --yellow-400: #d87900;
+  --yellow-50: #fdf7c8;
+  --yellow-500: #a75800;
+  --yellow-600: #743a00;
+  --yellow-700: #462500;
+  --yellow-800: #2c1600;
+  --red-100: #ffd7df;
+  --red-200: #ffaeb5;
+  --red-300: #ff8786;
+  --red-400: #ff4953;
+  --red-50: #fff0f7;
+  --red-500: #d1002f;
+  --red-600: #8e0016;
+  --red-700: #58000a;
+  --red-800: #410101;
+  --pink-100: #ffd3ff;
+  --pink-200: #ffa9fa;
+  --pink-300: #f67cf2;
+  --pink-400: #e14adf;
+  --pink-50: #fff0ff;
+  --pink-500: #b229b9;
+  --pink-600: #7d0480;
+  --pink-700: #4d0050;
+  --pink-800: #340439;
+  --violet-100: #edd9ff;
+  --violet-200: #dcb8ff;
+  --violet-300: #c695ff;
+  --violet-400: #ab6cfe;
+  --violet-50: #f9f2ff;
+  --violet-500: #8649e1;
+  --violet-600: #5925ab;
+  --violet-700: #421984;
+  --violet-800: #220358;
 }