feat: new color palatte(light version) for nodes

2024-11-30 10:48:24 +08:00 · 2020-11-11 10:48:38 +08:00 · 2020-11-11 10:48:38 +08:00 · 7f2a28dd19
commit 7f2a28dd19
parent d8ef8d2b91
45 changed files with 736 additions and 487 deletions
--- a/examples/item/defaultNodes/demo/circle.js
+++ b/examples/item/defaultNodes/demo/circle.js
@ -19,56 +19,66 @@ const graph = new G6.Graph({
  height,
  // translate the graph to align the canvas's center, support by v3.5.1
  fitCenter: true,
+  modes: {
+    default: ['drag-canvas', 'drag-node'],
+  },
  defaultNode: {
+    /* node type */
    type: 'circle',
-    size: [160],
-    color: '#5B8FF9',
-    style: {
-      fill: '#9EC9FF',
-      lineWidth: 3,
-    },
+    /* node size */
+    size: [60],
+    /* style for the keyShape */
+    // style: {
+    //   fill: '#9EC9FF',
+    //   stroke: '#5B8FF9',
+    //   lineWidth: 3,
+    // },
    labelCfg: {
-      style: {
-        fill: '#1890ff',
-        fontSize: 24,
-      },
+      /* label's position, options: center, top, bottom, left, right */
      position: 'bottom',
+      /* label's offset to the keyShape, 4 by default */
+      //   offset: 12,
+      /* label's style */
+      //   style: {
+      //     fontSize: 20,
+      //     fill: '#ccc',
+      //     fontWeight: 500
+      //   }
    },
-    // configurations for four linkpoints
+    /* configurations for four linkpoints */
    linkPoints: {
      top: true,
      right: true,
      bottom: true,
      left: true,
-      // the diameter of the linkPoint
-      size: 10,
-      lineWidth: 1,
-      fill: '#fff',
-      stroke: '#1890FF',
+      /* linkPoints' size, 8 by default */
+      //   size: 5,
+      /* linkPoints' style */
+      //   fill: '#ccc',
+      //   stroke: '#333',
+      //   lineWidth: 2,
    },
-    // icon configuration
+    /* icon configuration */
    icon: {
-      // whether show the icon
+      /* whether show the icon, false by default */
      show: true,
-      // icon's img address, string type
-      img:
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-      width: 60,
-      height: 60,
-    },
-  },
-  modes: {
-    default: ['drag-canvas', 'drag-node'],
-  },
-  nodeStateStyles: {
-    // node style of hover state
-    hover: {
-      fillOpacity: 0.8,
-    },
-    // node style of selected state
-    selected: {
-      lineWidth: 5,
+      /* icon's img address, string type */
+      // img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+      /* icon's size, 20 * 20 by default: */
+      //   width: 40,
+      //   height: 40
    },
+    /* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable */
+    // nodeStateStyles: {
+    //   // node style of active state
+    //   active: {
+    //     fillOpacity: 0.8,
+    //   },
+    //   // node style of selected state
+    //   selected: {
+    //     lineWidth: 5,
+    //   },
+    // },
  },
 });

@ -77,15 +87,20 @@ graph.render();

 graph.on('node:mouseenter', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', true);
+  graph.setItemState(item, 'active', true);
 });

 graph.on('node:mouseleave', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', false);
+  graph.setItemState(item, 'active', false);
 });

 graph.on('node:click', (evt) => {
  const { item } = evt;
  graph.setItemState(item, 'selected', true);
 });
+graph.on('canvas:click', (evt) => {
+  graph.getNodes().forEach(node => {
+    graph.clearItemStates(node);
+  });
+});
--- a/examples/item/defaultNodes/demo/diamond.js
+++ b/examples/item/defaultNodes/demo/diamond.js
@ -19,57 +19,66 @@ const graph = new G6.Graph({
  height,
  // translate the graph to align the canvas's center, support by v3.5.1
  fitCenter: true,
-  defaultNode: {
-    type: 'diamond',
-    size: [150, 100],
-    style: {
-      fill: '#9EC9FF',
-      stroke: '#5B8FF9',
-      lineWidth: 3,
-    },
-    labelCfg: {
-      style: {
-        fill: '#1890ff',
-        fontSize: 18,
-      },
-      position: 'bottom',
-    },
-    // configurations for four linkpoints
-    linkPoints: {
-      top: false,
-      bottom: false,
-      left: true,
-      right: true,
-      // the diameter of the linkPoint
-      size: 10,
-      fill: '#fff',
-      lineWidth: 1,
-      stroke: '#1890FF',
-    },
-    // icon configuration
-    icon: {
-      // whether show the icon
-      show: true,
-      // icon's img address, string type
-      img:
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-      width: 60,
-      height: 60,
-    },
-  },
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
-  nodeStateStyles: {
-    // node style of hover state
-    hover: {
-      fillOpacity: 0.8,
+  defaultNode: {
+    type: 'diamond',
+    /* node size */
+    size: [80, 60],
+    /* style for the keyShape */
+    // style: {
+    //   fill: '#9EC9FF',
+    //   stroke: '#5B8FF9',
+    //   lineWidth: 3,
+    // },
+    labelCfg: {
+      /* label's position, options: center, top, bottom, left, right */
+      position: 'bottom',
+      /* label's offset to the keyShape, 4 by default */
+      //   offset: 12,
+      /* label's style */
+      //   style: {
+      //     fontSize: 20,
+      //     fill: '#ccc',
+      //     fontWeight: 500
+      //   }
    },
-    // node style of selected state
-    selected: {
-      lineWidth: 5,
+    /* configurations for four linkpoints */
+    linkPoints: {
+      top: true,
+      right: true,
+      bottom: true,
+      left: true,
+      /* linkPoints' size, 8 by default */
+      //   size: 5,
+      /* linkPoints' style */
+      //   fill: '#ccc',
+      //   stroke: '#333',
+      //   lineWidth: 2,
+    },
+    /* icon configuration */
+    icon: {
+      /* whether show the icon, false by default */
+      show: true,
+      /* icon's img address, string type */
+      // img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+      /* icon's size, 20 * 20 by default: */
+      //   width: 40,
+      //   height: 40
    },
  },
+  /* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable */
+  // nodeStateStyles: {
+  //   // node style of active state
+  //   active: {
+  //     fillOpacity: 0.8,
+  //   },
+  //   // node style of selected state
+  //   selected: {
+  //     lineWidth: 5,
+  //   },
+  // },
 });

 graph.data(data);
@ -77,15 +86,21 @@ graph.render();

 graph.on('node:mouseenter', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', true);
+  graph.setItemState(item, 'active', true);
 });

 graph.on('node:mouseleave', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', false);
+  graph.setItemState(item, 'active', false);
 });

 graph.on('node:click', (evt) => {
  const { item } = evt;
  graph.setItemState(item, 'selected', true);
 });
+
+graph.on('canvas:click', (evt) => {
+  graph.getNodes().forEach(node => {
+    graph.clearItemStates(node);
+  });
+});
--- a/examples/item/defaultNodes/demo/ellipse.js
+++ b/examples/item/defaultNodes/demo/ellipse.js
@ -19,57 +19,65 @@ const graph = new G6.Graph({
  height,
  // translate the graph to align the canvas's center, support by v3.5.1
  fitCenter: true,
-  defaultNode: {
-    type: 'ellipse',
-    size: [180, 100],
-    style: {
-      fill: '#9EC9FF',
-      stroke: '#5B8FF9',
-      lineWidth: 3,
-    },
-    labelCfg: {
-      style: {
-        fill: '#1890ff',
-        fontSize: 18,
-      },
-      position: 'bottom',
-    },
-    // configurations for four linkpoints
-    linkPoints: {
-      top: true,
-      right: false,
-      bottom: true,
-      left: false,
-      // the diameter of the linkPoint
-      size: 10,
-      lineWidth: 1,
-      fill: '#fff',
-      stroke: '#1890FF',
-    },
-    // icon configuration
-    icon: {
-      // whether show the icon
-      show: true,
-      // icon's img address, string type
-      img:
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-      width: 60,
-      height: 60,
-    },
-  },
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
-  nodeStateStyles: {
-    // node style of hover state
-    hover: {
-      fillOpacity: 0.8,
+  defaultNode: {
+    type: 'ellipse',
+    size: [80, 50],
+    /* style for the keyShape */
+    // style: {
+    //   fill: '#9EC9FF',
+    //   stroke: '#5B8FF9',
+    //   lineWidth: 3,
+    // },
+    labelCfg: {
+      /* label's position, options: center, top, bottom, left, right */
+      position: 'bottom',
+      /* label's offset to the keyShape, 4 by default */
+      //   offset: 12,
+      /* label's style */
+      //   style: {
+      //     fontSize: 20,
+      //     fill: '#ccc',
+      //     fontWeight: 500
+      //   }
    },
-    // node style of selected state
-    selected: {
-      lineWidth: 5,
+    /* configurations for four linkpoints */
+    linkPoints: {
+      top: true,
+      right: true,
+      bottom: true,
+      left: true,
+      /* linkPoints' size, 8 by default */
+      //   size: 5,
+      /* linkPoints' style */
+      //   fill: '#ccc',
+      //   stroke: '#333',
+      //   lineWidth: 2,
+    },
+    /* icon configuration */
+    icon: {
+      /* whether show the icon, false by default */
+      show: true,
+      /* icon's img address, string type */
+      // img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+      /* icon's size, 20 * 20 by default: */
+      //   width: 40,
+      //   height: 40
    },
  },
+  /* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable */
+  // nodeStateStyles: {
+  //   // node style of active state
+  //   active: {
+  //     fillOpacity: 0.8,
+  //   },
+  //   // node style of selected state
+  //   selected: {
+  //     lineWidth: 5,
+  //   },
+  // },
 });

 graph.data(data);
@ -77,15 +85,21 @@ graph.render();

 graph.on('node:mouseenter', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', true);
+  graph.setItemState(item, 'active', true);
 });

 graph.on('node:mouseleave', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', false);
+  graph.setItemState(item, 'active', false);
 });

 graph.on('node:click', (evt) => {
  const { item } = evt;
  graph.setItemState(item, 'selected', true);
 });
+
+graph.on('canvas:click', (evt) => {
+  graph.getNodes().forEach(node => {
+    graph.clearItemStates(node);
+  });
+});
--- a/examples/item/defaultNodes/demo/rect.js
+++ b/examples/item/defaultNodes/demo/rect.js
@ -11,50 +11,76 @@ const data = {
  ],
 };

+const width = document.getElementById('container').scrollWidth;
+const height = document.getElementById('container').scrollHeight || 500;
 const graph = new G6.Graph({
  container: 'container',
-  width: 500,
-  height: 500,
+  width,
+  height,
  // translate the graph to align the canvas's center, support by v3.5.1
  fitCenter: true,
-  defaultNode: {
-    type: 'rect',
-    size: [160, 80],
-    style: {
-      fill: '#9EC9FF',
-      stroke: '#5B8FF9',
-      lineWidth: 3,
-    },
-    labelCfg: {
-      style: {
-        fill: '#fff',
-        fontSize: 18,
-      },
-    },
-    linkPoints: {
-      top: true,
-      bottom: true,
-      left: true,
-      right: true,
-      size: 10,
-      fill: '#fff',
-      lineWidth: 1,
-      stroke: '#1890FF',
-    },
-  },
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
-  nodeStateStyles: {
-    // the style configurations for the hover state
-    hover: {
-      fillOpacity: 0.8,
+  defaultNode: {
+    /* node type */
+    type: 'rect',
+    /* node size */
+    size: [80, 40],
+    /* style for the keyShape */
+    // style: {
+    //   fill: '#9EC9FF',
+    //   stroke: '#5B8FF9',
+    //   lineWidth: 3,
+    //   radius: 10
+    // },
+    labelCfg: {
+      /* label's position, options: center, top, bottom, left, right */
+      position: 'center',
+      /* label's offset to the keyShape, 4 by default */
+      //   offset: 12,
+      /* label's style */
+      //   style: {
+      //     fontSize: 20,
+      //     fill: '#ccc',
+      //     fontWeight: 500
+      //   }
    },
-    // the style configurations for the selected state
-    selected: {
-      lineWidth: 5,
+    /* configurations for four linkpoints */
+    linkPoints: {
+      top: true,
+      right: true,
+      bottom: true,
+      left: true,
+      /* linkPoints' size, 8 by default */
+      //   size: 5,
+      /* linkPoints' style */
+      //   fill: '#ccc',
+      //   stroke: '#333',
+      //   lineWidth: 2,
+    },
+    /* icon configuration */
+    icon: {
+      /* whether show the icon, false by default */
+      show: true,
+      /* icon's img address, string type */
+      // img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+      /* icon's size, 20 * 20 by default: */
+      //   width: 40,
+      //   height: 40
    },
  },
+  /* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable */
+  // nodeStateStyles: {
+  //   // node style of active state
+  //   active: {
+  //     fillOpacity: 0.8,
+  //   },
+  //   // node style of selected state
+  //   selected: {
+  //     lineWidth: 5,
+  //   },
+  // },
 });

 graph.data(data);
@ -62,15 +88,21 @@ graph.render();

 graph.on('node:mouseenter', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', true);
+  graph.setItemState(item, 'active', true);
 });

 graph.on('node:mouseleave', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', false);
+  graph.setItemState(item, 'active', false);
 });

 graph.on('node:click', (evt) => {
  const { item } = evt;
  graph.setItemState(item, 'selected', true);
 });
+
+graph.on('canvas:click', (evt) => {
+  graph.getNodes().forEach(node => {
+    graph.clearItemStates(node);
+  });
+});
--- a/examples/item/defaultNodes/demo/star.js
+++ b/examples/item/defaultNodes/demo/star.js
@ -11,65 +11,75 @@ const data = {
  ],
 };

+const width = document.getElementById('container').scrollWidth;
+const height = document.getElementById('container').scrollHeight || 500;
 const graph = new G6.Graph({
  container: 'container',
-  width: 500,
-  height: 500,
+  width,
+  height,
  // translate the graph to align the canvas's center, support by v3.5.1
  fitCenter: true,
-  defaultNode: {
-    type: 'star',
-    size: [120, 60],
-    style: {
-      fill: '#9EC9FF',
-      stroke: '#5B8FF9',
-      lineWidth: 3,
-    },
-    labelCfg: {
-      style: {
-        fill: '#1890ff',
-        fontSize: 18,
-      },
-      position: 'bottom',
-      offset: 50,
-    },
-    // configurations for the five linkpoints
-    linkPoints: {
-      top: true,
-      right: true,
-      left: true,
-      leftBottom: true,
-      rightBottom: true,
-      // the size of the linkpoints' circle
-      size: 10,
-      lineWidth: 1,
-      fill: '#fff',
-      stroke: '#1890FF',
-    },
-    // configurations for the icon
-    icon: {
-      // whether to show the icon
-      show: true,
-      // the image url for the icon, string type
-      img:
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-      width: 60,
-      height: 60,
-    },
-  },
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
-  nodeStateStyles: {
-    // the style configurations for the hover state
-    hover: {
-      fillOpacity: 0.8,
+  defaultNode: {
+    /* node type */
+    type: 'star',
+    /* node size */
+    size: [60, 30],
+    /* style for the keyShape */
+    // style: {
+    //   fill: '#9EC9FF',
+    //   stroke: '#5B8FF9',
+    //   lineWidth: 3,
+    // },
+    labelCfg: {
+      /* label's position, options: center, top, bottom, left, right */
+      position: 'bottom',
+      /* label's offset to the keyShape, 4 by default */
+      offset: 20,
+      /* label's style */
+      //   style: {
+      //     fontSize: 20,
+      //     fill: '#ccc',
+      //     fontWeight: 500
+      //   }
    },
-    // the style configurations for the selected state
-    selected: {
-      lineWidth: 5,
+    /* configurations for four linkpoints */
+    linkPoints: {
+      top: true,
+      right: true,
+      bottom: true,
+      left: true,
+      /* linkPoints' size, 8 by default */
+      //   size: 5,
+      /* linkPoints' style */
+      //   fill: '#ccc',
+      //   stroke: '#333',
+      //   lineWidth: 2,
    },
-  },
+    /* icon configuration */
+    icon: {
+      /* whether show the icon, false by default */
+      show: true,
+      /* icon's img address, string type */
+      // img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+      /* icon's size, 20 * 20 by default: */
+      //   width: 40,
+      //   height: 40
+    },
+    /* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable */
+    // nodeStateStyles: {
+    //   // node style of active state
+    //   active: {
+    //     fillOpacity: 0.8,
+    //   },
+    //   // node style of selected state
+    //   selected: {
+    //     lineWidth: 5,
+    //   },
+    // },
+  }
 });

 graph.data(data);
@ -77,15 +87,20 @@ graph.render();

 graph.on('node:mouseenter', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', true);
+  graph.setItemState(item, 'active', true);
 });

 graph.on('node:mouseleave', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', false);
+  graph.setItemState(item, 'active', false);
 });

 graph.on('node:click', (evt) => {
  const { item } = evt;
  graph.setItemState(item, 'selected', true);
 });
+graph.on('canvas:click', (evt) => {
+  graph.getNodes().forEach(node => {
+    graph.clearItemStates(node);
+  });
+});
--- a/examples/item/defaultNodes/demo/triangle.js
+++ b/examples/item/defaultNodes/demo/triangle.js
@ -11,65 +11,74 @@ const data = {
  ],
 };

+const width = document.getElementById('container').scrollWidth;
+const height = document.getElementById('container').scrollHeight || 500;
 const graph = new G6.Graph({
  container: 'container',
-  width: 500,
-  height: 500,
+  width,
+  height,
  // translate the graph to align the canvas's center, support by v3.5.1
  fitCenter: true,
+  modes: {
+    default: ['drag-canvas', 'drag-node'],
+  },
  defaultNode: {
    type: 'triangle',
-    size: [60],
+    size: [40],
    // options: down, up
    direction: 'up',
-    style: {
-      fill: '#9EC9FF',
-      stroke: '#5B8FF9',
-      lineWidth: 3,
-    },
+    /* style for the keyShape */
+    // style: {
+    //   fill: '#9EC9FF',
+    //   stroke: '#5B8FF9',
+    //   lineWidth: 3,
+    // },
    labelCfg: {
-      style: {
-        fill: '#1890ff',
-        fontSize: 18,
-      },
+      /* label's position, options: center, top, bottom, left, right */
      position: 'bottom',
-      offset: 30,
+      /* label's offset to the keyShape, 4 by default */
+      offset: 20,
+      /* label's style */
+      //   style: {
+      //     fontSize: 20,
+      //     fill: '#ccc',
+      //     fontWeight: 500
+      //   }
    },
-    // configurations for the four linkpoints
+    /* configurations for four linkpoints */
    linkPoints: {
      top: true,
      right: true,
      bottom: true,
      left: true,
-      // the size of the linkpoints' circle
-      size: 10,
-      lineWidth: 1,
-      fill: '#fff',
-      stroke: '#1890FF',
+      /* linkPoints' size, 8 by default */
+      //   size: 5,
+      /* linkPoints' style */
+      //   fill: '#ccc',
+      //   stroke: '#333',
+      //   lineWidth: 2,
    },
-    // configurations for the icon
+    /* icon configuration */
    icon: {
-      // whether to show the icon
+      /* whether show the icon, false by default */
      show: true,
-      // the image url for the icon, string type
-      img:
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-      width: 40,
-      height: 40,
-    },
-  },
-  modes: {
-    default: ['drag-canvas', 'drag-node'],
-  },
-  nodeStateStyles: {
-    // style configurations for the hover state
-    hover: {
-      fillOpacity: 0.8,
-    },
-    // style configurations for the selected state
-    selected: {
-      lineWidth: 5,
+      /* icon's img address, string type */
+      // img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+      /* icon's size, 20 * 20 by default: */
+      //   width: 40,
+      //   height: 40
    },
+    /* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable */
+    // nodeStateStyles: {
+    //   // node style of active state
+    //   active: {
+    //     fillOpacity: 0.8,
+    //   },
+    //   // node style of selected state
+    //   selected: {
+    //     lineWidth: 5,
+    //   },
+    // },
  },
 });

@ -78,15 +87,20 @@ graph.render();

 graph.on('node:mouseenter', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', true);
+  graph.setItemState(item, 'active', true);
 });

 graph.on('node:mouseleave', (evt) => {
  const { item } = evt;
-  graph.setItemState(item, 'hover', false);
+  graph.setItemState(item, 'active', false);
 });

 graph.on('node:click', (evt) => {
  const { item } = evt;
  graph.setItemState(item, 'selected', true);
 });
+graph.on('canvas:click', (evt) => {
+  graph.getNodes().forEach(node => {
+    graph.clearItemStates(node);
+  });
+});
--- a/package.json
+++ b/package.json
@ -82,6 +82,7 @@
    "@antv/path-util": "^2.0.3",
    "@antv/scale": "^0.3.1",
    "@antv/util": "~2.0.5",
+    "color": "^3.1.3",
    "d3-force": "^2.0.1",
    "dagre": "^0.8.5",
    "insert-css": "^2.0.0",
@ -130,4 +131,4 @@
    "webpack-cli": "^3.3.10",
    "worker-loader": "^3.0.0"
  }
-}
+}
--- a/src/global.ts
+++ b/src/global.ts
@ -1,3 +1,12 @@
+import { getColorsWithSubjectColor } from './util/color';
+
+const subjectColor = 'rgb(95, 149, 255)';
+const backColor = 'rgb(255, 255, 255)';
+const disableColor = 'rgb(150, 150, 150)';
+const textColor = 'rgb(0, 0, 0)';
+
+const colorSet = getColorsWithSubjectColor(subjectColor, backColor);
+
 export default {
  version: '3.8.3',
  rootContainerClassName: 'root-container',
@ -6,30 +15,76 @@ export default {
  comboContainerClassName: 'combo-container',
  customGroupContainerClassName: 'custom-group-container',
  delegateContainerClassName: 'delegate-container',
-  defaultShapeFillColor: '#C6E5FF',
-  defaultShapeStrokeColor: '#5B8FF9',
  defaultLoopPosition: 'top',
  nodeLabel: {
    style: {
-      fill: '#595959',
+      fill: '#000',
+      fontSize: 12,
      textAlign: 'center',
      textBaseline: 'middle',
    },
-    offset: 5, // 节点的默认文本不居中时的偏移量
+    offset: 4, // 节点的默认文本不居中时的偏移量
  },
  defaultNode: {
    type: 'circle',
    style: {
-      fill: '#C6E5FF',
      lineWidth: 1,
-      stroke: '#5B8FF9',
+      stroke: colorSet.mainStroke,
+      fill: colorSet.mainFill
    },
    size: 20,
-    color: '#5B8FF9',
+    color: colorSet.mainStroke,
+    linkPoints: {
+      size: 8,
+      lineWidth: 1,
+      fill: colorSet.activeFill,
+      stroke: colorSet.activeStroke,
+    }
+  },
+  // 节点应用状态后的样式，默认仅提供 active、selected、highlight、inactive、disable，用户可以自己扩展
+  nodeStateStyles: {
+    active: {
+      fill: colorSet.activeFill,
+      stroke: colorSet.activeStroke,
+      lineWidth: 2,
+      shadowColor: colorSet.mainStroke,
+      shadowBlur: 10,
+    },
+    selected: {
+      fill: colorSet.selectedFill,
+      stroke: colorSet.selectedStroke,
+      lineWidth: 4,
+      shadowColor: colorSet.selectedStroke,
+      shadowBlur: 10,
+      'text-shape': {
+        fontWeight: 500
+      },
+    },
+    highlight: {
+      fill: colorSet.highlightFill,
+      stroke: colorSet.highlightStroke,
+      lineWidth: 2,
+      'text-shape': {
+        fontWeight: 500
+      }
+    },
+    inactive: {
+      fill: colorSet.inactiveFill,
+      stroke: colorSet.inactiveStroke,
+      lineWidth: 1,
+      'text-shape': {
+        fontWeight: 500
+      }
+    },
+    disable: {
+      fill: colorSet.disableFill,
+      stroke: colorSet.disableStroke,
+      lineWidth: 1,
+    },
  },
  edgeLabel: {
    style: {
-      fill: '#595959',
+      fill: textColor,
      textAlign: 'center',
      textBaseline: 'middle',
    },
@ -37,14 +92,14 @@ export default {
  defaultEdge: {
    type: 'line',
    style: {
-      stroke: '#e2e2e2',
+      stroke: disableColor,
    },
    size: 1,
-    color: '#e2e2e2',
+    color: disableColor,
  },
  comboLabel: {
    style: {
-      fill: '#595959',
+      fill: textColor,
      // textAlign: 'center',
      textBaseline: 'middle',
    },
@ -66,8 +121,6 @@ export default {
    color: '#A3B1BF',
    padding: [25, 20, 15, 20],
  },
-  // 节点应用状态后的样式，默认仅提供 active 和 selected 用户可以自己扩展
-  nodeStateStyle: {},
  delegateStyle: {
    fill: '#F3F9FF',
    fillOpacity: 0.5,
--- a/src/item/item.ts
+++ b/src/item/item.ts
@ -98,7 +98,8 @@ export default class ItemBase implements IItemBase {
    };
    this._cfg = Object.assign(defaultCfg, this.getDefaultCfg(), cfg);

-    let { id } = this.get('model');
+    const model = this.get('model');
+    let { id } = model;

    if (!id) {
      id = uniqueId(this.get('type'));
@ -115,6 +116,18 @@ export default class ItemBase implements IItemBase {

    this.init();
    this.draw();
+
+    const shapeType = (model.shape as string) || (model.type as string) || 'circle';
+    const shapeFactory = this.get('shapeFactory');
+    if (shapeFactory && shapeFactory[shapeType]) {
+      const { options } = shapeFactory[shapeType];
+      // merge the stateStyles from item and shape
+      if (options && options.stateStyles) {
+        let styles = this.get('styles') || model.stateStyles;
+        styles = deepMix({}, options.stateStyles, styles);
+        this.set('styles', styles);
+      }
+    }
  }

  /**
@ -371,6 +384,7 @@ export default class ItemBase implements IItemBase {
  public setState(state: string, value: string | boolean) {
    const states: string[] = this.get('states');
    const shapeFactory = this.get('shapeFactory');
+    // debugger
    let stateName = state;
    let filterStateName = state;
    if (isString(value)) {
--- a/src/shape/edges/polyline.ts
+++ b/src/shape/edges/polyline.ts
@ -24,7 +24,7 @@ Shape.registerEdge(
      // 文本样式配置
      labelCfg: {
        style: {
-          fill: '#595959',
+          fill: Global.edgeLabel.style.fill,
        },
      },
      routeCfg: {
--- a/src/shape/edges/router.ts
+++ b/src/shape/edges/router.ts
@ -254,7 +254,6 @@ export const pathFinder = (
  const cfg: RouterCfg = deepMix(defaultCfg, routerCfg);
  cfg.obstacles = cfg.obstacles || [];
  const map = getObstacleMap(cfg.obstacles.concat([startNode, endNode]), cfg.gridSize, cfg.offset);
-  // console.log(map);

  const scaleStartPoint = {
    x: pos2GridIx(startPoint.x, cfg.gridSize),
@ -269,7 +268,6 @@ export const pathFinder = (
  endPoint.id = `${scaleEndPoint.x}-${scaleEndPoint.y}`;
  const startPoints = getBoxPoints(scaleStartPoint, startNode, cfg);
  const endPoints = getBoxPoints(scaleEndPoint, endNode, cfg);
-  // console.log(startPoints, startNode.getBBox(), endNode.getBBox(), endPoints);
  startPoints.forEach((point) => {
    delete map[point.id];
  });
@ -383,8 +381,6 @@ export const pathFinder = (
    }
    if (!current) break;

-    // console.log('cur: ', current.id, curCost, gScore[current.id]);
-
    // 如果 fScore 最小的点就是终点
    if (endPoints.findIndex((point) => point.x === current.x && point.y === current.y) > -1) {
      const controlPoints = getControlPoints(current.id);
@ -404,7 +400,6 @@ export const pathFinder = (
        id: `${current.x + direction.stepX}-${current.y + direction.stepY}`,
      };

-      // console.log(neighbor.id, current.x, direction.stepX);
      if (closedSet[neighbor.id]) continue;
      const directionChange = getDirectionChange(current, neighbor);
      if (directionChange > cfg.maxAllowedDirectionChange) continue;
@ -418,7 +413,6 @@ export const pathFinder = (
        cfg.distFunc(current, neighbor) +
        (isNaN(cfg.penalties[directionChange]) ? cfg.gridSize : cfg.penalties[directionChange]);
      const costFromStart = gScore[current.id] + neighborCost;
-      // console.log(current.id, neighbor.id, directionChange);
      if (gScore[neighbor.id] && costFromStart >= gScore[neighbor.id]) {
        continue;
      }
--- a/src/shape/nodes/circle.ts
+++ b/src/shape/nodes/circle.ts
@ -16,13 +16,14 @@ Shape.registerNode(
      style: {
        x: 0,
        y: 0,
-        stroke: Global.defaultShapeStrokeColor,
-        fill: Global.defaultShapeFillColor,
-        lineWidth: Global.defaultNode.style.lineWidth,
+        stroke: Global.defaultNode.style.stroke,
+        fill: Global.defaultNode.style.fill,
+        lineWidth: Global.defaultNode.style.lineWidth
      },
      labelCfg: {
        style: {
-          fill: '#595959',
+          fill: Global.nodeLabel.style.fill,
+          fontSize: Global.nodeLabel.style.fontSize,
        },
      },
      // 节点上左右上下四个方向上的链接circle配置
@ -32,10 +33,10 @@ Shape.registerNode(
        bottom: false,
        left: false,
        // circle的大小
-        size: 10,
-        lineWidth: 1,
-        fill: '#72CC4A',
-        stroke: '#72CC4A',
+        size: Global.defaultNode.linkPoints.size,
+        lineWidth: Global.defaultNode.linkPoints.lineWidth,
+        fill: Global.defaultNode.linkPoints.fill,
+        stroke: Global.defaultNode.linkPoints.stroke,
      },
      // 节点中icon配置
      icon: {
@ -43,10 +44,13 @@ Shape.registerNode(
        show: false,
        // icon的地址，字符串类型
        img:
-          'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        width: 16,
-        height: 16,
+          'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
+        width: 20,
+        height: 20,
      },
+      stateStyles: {
+        ...Global.nodeStateStyles
+      }
    },
    shapeType: 'circle',
    // 文本位置
--- a/src/shape/nodes/diamond.ts
+++ b/src/shape/nodes/diamond.ts
@ -11,16 +11,17 @@ Shape.registerNode(
  {
    // 自定义节点时的配置
    options: {
-      size: [100, 100],
+      size: [80, 80],
      style: {
-        stroke: Global.defaultShapeStrokeColor,
-        fill: Global.defaultShapeFillColor,
-        lineWidth: Global.defaultNode.style.lineWidth,
+        stroke: Global.defaultNode.style.stroke,
+        fill: Global.defaultNode.style.fill,
+        lineWidth: Global.defaultNode.style.lineWidth
      },
      // 文本样式配置
      labelCfg: {
        style: {
-          fill: '#595959',
+          fill: Global.nodeLabel.style.fill,
+          fontSize: Global.nodeLabel.style.fontSize,
        },
      },
      // 节点上左右上下四个方向上的链接circle配置
@ -30,10 +31,10 @@ Shape.registerNode(
        bottom: false,
        left: false,
        // circle的大小
-        size: 10,
-        lineWidth: 1,
-        fill: '#72CC4A',
-        stroke: '#72CC4A',
+        size: Global.defaultNode.linkPoints.size,
+        lineWidth: Global.defaultNode.linkPoints.lineWidth,
+        fill: Global.defaultNode.linkPoints.fill,
+        stroke: Global.defaultNode.linkPoints.stroke,
      },
      // 节点中icon配置
      icon: {
@ -41,12 +42,15 @@ Shape.registerNode(
        show: false,
        // icon的地址，字符串类型
        img:
-          'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        width: 16,
-        height: 16,
+          'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
+        width: 20,
+        height: 20,
      },
+      stateStyles: {
+        ...Global.nodeStateStyles
+      }
    },
-    shapeType: 'circle',
+    shapeType: 'diamond',
    // 文本位置
    labelPosition: 'center',
    drawShape(cfg: NodeConfig, group: GGroup): IShape {
--- a/src/shape/nodes/ellipse.ts
+++ b/src/shape/nodes/ellipse.ts
@ -13,18 +13,19 @@ Shape.registerNode(
  {
    // 自定义节点时的配置
    options: {
-      size: [120, 60],
+      size: [80, 40],
      style: {
        x: 0,
        y: 0,
-        stroke: Global.defaultShapeStrokeColor,
-        fill: Global.defaultShapeFillColor,
-        lineWidth: 1,
+        stroke: Global.defaultNode.style.stroke,
+        fill: Global.defaultNode.style.fill,
+        lineWidth: Global.defaultNode.style.lineWidth
      },
      // 文本样式配置
      labelCfg: {
        style: {
-          fill: '#595959',
+          fill: Global.nodeLabel.style.fill,
+          fontSize: Global.nodeLabel.style.fontSize,
        },
      },
      // 节点上左右上下四个方向上的链接circle配置
@ -34,10 +35,10 @@ Shape.registerNode(
        bottom: false,
        left: false,
        // circle的大小
-        size: 10,
-        lineWidth: 1,
-        fill: '#72CC4A',
-        stroke: '#72CC4A',
+        size: Global.defaultNode.linkPoints.size,
+        lineWidth: Global.defaultNode.linkPoints.lineWidth,
+        fill: Global.defaultNode.linkPoints.fill,
+        stroke: Global.defaultNode.linkPoints.stroke,
      },
      // 节点中icon配置
      icon: {
@ -45,10 +46,13 @@ Shape.registerNode(
        show: false,
        // icon的地址，字符串类型
        img:
-          'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        width: 36,
-        height: 36,
+          'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
+        width: 20,
+        height: 20,
      },
+      stateStyles: {
+        ...Global.nodeStateStyles
+      }
    },
    shapeType: 'ellipse',
    // 文本位置
--- a/src/shape/nodes/rect.ts
+++ b/src/shape/nodes/rect.ts
@ -14,16 +14,15 @@ Shape.registerNode(
      size: [100, 30],
      style: {
        radius: 0,
-        stroke: Global.defaultShapeStrokeColor,
-        fill: Global.defaultShapeFillColor,
-        lineWidth: Global.defaultNode.style.lineWidth,
-        fillOpacity: 1,
+        stroke: Global.defaultNode.style.stroke,
+        fill: Global.defaultNode.style.fill,
+        lineWidth: Global.defaultNode.style.lineWidth
      },
      // 文本样式配置
      labelCfg: {
        style: {
-          fill: '#595959',
-          fontSize: 12,
+          fill: Global.nodeLabel.style.fill,
+          fontSize: Global.nodeLabel.style.fontSize,
        },
      },
      // 节点上左右上下四个方向上的链接circle配置
@ -33,10 +32,20 @@ Shape.registerNode(
        bottom: false,
        left: false,
        // circle的大小
-        size: 10,
-        lineWidth: 1,
-        fill: '#72CC4A',
-        stroke: '#72CC4A',
+        size: Global.defaultNode.linkPoints.size,
+        lineWidth: Global.defaultNode.linkPoints.lineWidth,
+        fill: Global.defaultNode.linkPoints.fill,
+        stroke: Global.defaultNode.linkPoints.stroke,
+      },
+      // 节点中icon配置
+      icon: {
+        // 是否显示icon，值为 false 则不渲染icon
+        show: false,
+        // icon的地址，字符串类型
+        img:
+          'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
+        width: 20,
+        height: 20,
      },
      // 连接点，默认为左右
      // anchorPoints: [{ x: 0, y: 0.5 }, { x: 1, y: 0.5 }]
@ -44,6 +53,9 @@ Shape.registerNode(
        [0, 0.5],
        [1, 0.5],
      ],
+      stateStyles: {
+        ...Global.nodeStateStyles
+      }
    },
    shapeType: 'rect',
    labelPosition: 'center',
--- a/src/shape/nodes/star.ts
+++ b/src/shape/nodes/star.ts
@ -14,28 +14,27 @@ Shape.registerNode(
    options: {
      size: 60,
      style: {
-        stroke: Global.defaultShapeStrokeColor,
-        fill: Global.defaultShapeFillColor,
-        lineWidth: Global.defaultNode.style.lineWidth,
+        stroke: Global.defaultNode.style.stroke,
+        fill: Global.defaultNode.style.fill,
+        lineWidth: Global.defaultNode.style.lineWidth
      },
-      // 文本样式配置
      labelCfg: {
        style: {
-          fill: '#595959',
+          fill: Global.nodeLabel.style.fill,
+          fontSize: Global.nodeLabel.style.fontSize,
        },
      },
      // 节点上左右上下四个方向上的链接circle配置
      linkPoints: {
        top: false,
        right: false,
+        bottom: false,
        left: false,
-        leftBottom: false,
-        rightBottom: false,
        // circle的大小
-        size: 10,
-        lineWidth: 1,
-        fill: '#fff',
-        stroke: '#72CC4A',
+        size: Global.defaultNode.linkPoints.size,
+        lineWidth: Global.defaultNode.linkPoints.lineWidth,
+        fill: Global.defaultNode.linkPoints.fill,
+        stroke: Global.defaultNode.linkPoints.stroke,
      },
      // 节点中icon配置
      icon: {
@ -43,10 +42,13 @@ Shape.registerNode(
        show: false,
        // icon的地址，字符串类型
        img:
-          'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        width: 16,
-        height: 16,
+          'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
+        width: 20,
+        height: 20,
      },
+      stateStyles: {
+        ...Global.nodeStateStyles
+      }
    },
    shapeType: 'star',
    // 文本位置
@ -281,12 +283,12 @@ Shape.registerNode(
      const { left, right, top, leftBottom, rightBottom } = cfg.linkPoints
        ? cfg.linkPoints
        : {
-            left: undefined,
-            right: undefined,
-            top: undefined,
-            leftBottom: undefined,
-            rightBottom: undefined,
-          };
+          left: undefined,
+          right: undefined,
+          top: undefined,
+          leftBottom: undefined,
+          rightBottom: undefined,
+        };

      const size = (this as ShapeOptions).getSize!(cfg);
      const outerR = size[0];
--- a/src/shape/nodes/triangle.ts
+++ b/src/shape/nodes/triangle.ts
@ -15,16 +15,16 @@ Shape.registerNode(
      size: 40,
      direction: 'up',
      style: {
-        stroke: Global.defaultShapeStrokeColor,
-        fill: Global.defaultShapeFillColor,
-        lineWidth: Global.defaultNode.style.lineWidth,
+        stroke: Global.defaultNode.style.stroke,
+        fill: Global.defaultNode.style.fill,
+        lineWidth: Global.defaultNode.style.lineWidth
      },
-      // 文本样式配置
      labelCfg: {
        style: {
-          fill: '#595959',
+          fill: Global.nodeLabel.style.fill,
+          fontSize: Global.nodeLabel.style.fontSize,
        },
-        offset: 15,
+        offset: 15
      },
      // 节点上左右上下四个方向上的链接circle配置
      linkPoints: {
@ -33,10 +33,10 @@ Shape.registerNode(
        bottom: false,
        left: false,
        // circle的大小
-        size: 10,
-        lineWidth: 1,
-        fill: '#fff',
-        stroke: '#72CC4A',
+        size: Global.defaultNode.linkPoints.size,
+        lineWidth: Global.defaultNode.linkPoints.lineWidth,
+        fill: Global.defaultNode.linkPoints.fill,
+        stroke: Global.defaultNode.linkPoints.stroke,
      },
      // 节点中icon配置
      icon: {
@ -44,11 +44,14 @@ Shape.registerNode(
        show: false,
        // icon的地址，字符串类型
        img:
-          'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        width: 16,
-        height: 16,
-        offset: 6,
+          'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
+        width: 20,
+        height: 20,
+        offset: 6
      },
+      stateStyles: {
+        ...Global.nodeStateStyles
+      }
    },
    shapeType: 'triangle',
    // 文本位置
--- a/src/util/color.ts
+++ b/src/util/color.ts
@ -0,0 +1,46 @@
+import color from 'color';
+
+/**
+ * get the mix color of backColor and frontColor with alpah
+ * @param backColor background color
+ * @param frontColor foreground color
+ * @param frontAlpha the opacity of foreground color
+ */
+export const mixColor = (backColor, frontColor, frontAlpha) => {
+  const bc = color(backColor);
+  const fc = color(frontColor);
+  return color([
+    (1 - frontAlpha) * bc.color[0] + frontAlpha * fc.color[0],
+    (1 - frontAlpha) * bc.color[1] + frontAlpha * fc.color[1],
+    (1 - frontAlpha) * bc.color[2] + frontAlpha * fc.color[2],
+  ]).rgb();
+}
+
+/**
+ * get the set of colors according to the subject color and background color
+ * @param subjectColor the subject color
+ * @param backColor background color
+ * @param disableColor the color for disable state
+ */
+export const getColorsWithSubjectColor = (subjectColor, backColor = '#fff', disableColor = 'rgb(150, 150, 150)') => {
+  const lightSubject = mixColor(backColor, subjectColor, 0.05).rgb().toString();
+  return {
+    mainStroke: subjectColor,
+    mainFill: mixColor(backColor, subjectColor, 0.1).rgb().toString(),
+
+    activeStroke: subjectColor,
+    activeFill: lightSubject,
+
+    inactiveStroke: mixColor(backColor, subjectColor, 0.4).rgb().toString(),
+    inactiveFill: lightSubject,
+
+    selectedStroke: subjectColor,
+    selectedFill: backColor,
+
+    highlightStroke: 'rgb(53, 119, 222)', // TODO: how to generate it ???
+    highlightFill: mixColor(backColor, subjectColor, 0.2).rgb().toString(),
+
+    disableStroke: mixColor(backColor, disableColor, 0.3).rgb().toString(),
+    disableFill: mixColor(backColor, disableColor, 0.05).rgb().toString()
+  }
+}
--- a/src/util/index.ts
+++ b/src/util/index.ts
@ -2,6 +2,7 @@ import * as MathUtil from './math';
 import * as GraphicUtil from './graphic';
 import * as PathUtil from './path';
 import * as BaseUtil from './base';
+import * as ColorUtil from './color';
 import { mat3, transform } from '@antv/matrix-util/lib';
 import mix from '@antv/util/lib/mix';
 import deepMix from '@antv/util/lib/deep-mix';
@ -13,5 +14,5 @@ const Base = {
  transform,
 };

-const Util = { ...Base, ...BaseUtil, ...GraphicUtil, ...PathUtil, ...MathUtil };
+const Util = { ...Base, ...BaseUtil, ...GraphicUtil, ...PathUtil, ...MathUtil, ...ColorUtil };
 export default Util;
--- a/tests/unit/behavior/zoom-spec.ts
+++ b/tests/unit/behavior/zoom-spec.ts
@ -378,15 +378,15 @@ describe('zoom-canvas', () => {
    let pe = createWheelEvent(graph.get('canvas').get('el'), 100, 100, 100);
    graph.emit('wheel', pe);
    expect(textShape.attr('fontSize')).toEqual(12);
-    expect(keyShape.attr('lineWidth')).toBe(1);
+    expect(keyShape.attr('lineWidth')).toBe(4);
    let ne = createWheelEvent(graph.get('canvas').get('el'), -100, 100, 100);
    graph.emit('wheel', ne);
    graph.emit('wheel', ne);
    expect(numberEqual(textShape.attr('fontSize'), 13.33, 0.004)).toEqual(true);
-    expect(numberEqual(keyShape.attr('lineWidth'), 1.11, 0.002)).toBe(true);
+    expect(numberEqual(keyShape.attr('lineWidth'), 4.444, 0.002)).toBe(true);
    graph.emit('wheel', pe);
    expect(textShape.attr('fontSize')).toEqual(12);
-    expect(keyShape.attr('lineWidth')).toBe(1);
+    expect(keyShape.attr('lineWidth')).toBe(4);

    graph.destroy();
  });
--- a/tests/unit/graph/graph-spec.ts
+++ b/tests/unit/graph/graph-spec.ts
@ -940,7 +940,7 @@ describe('all node link center', () => {

    expect(keyShape.get('type')).toEqual('rect');
    // addItem 时候 model 中的 style 会覆盖 defaultNode 中定义的
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('stroke')).toEqual('#666');

    defaultGraph.setItemState(node, 'selected', true);
@ -953,7 +953,7 @@ describe('all node link center', () => {
    defaultGraph.setItemState(node, 'selected', false);

    // fill 使用默认的，addItem 时如果有 style 会覆盖 defaultNode 中定义的
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('fillStyle')).toBe(undefined);
    expect(keyShape.attr('stroke')).toEqual('#666');
    expect(keyShape.attr('strokeStyle')).toBe(undefined);
@ -1203,17 +1203,17 @@ describe('mapper fn', () => {
    const edge = graph.addItem('edge', { id: 'edge2', source: 'node', target: 'node2Mapped' });

    keyShape = edge.getKeyShape();
-    expect(keyShape.attr('stroke')).toEqual('#e2e2e2');
+    expect(keyShape.attr('stroke')).toEqual('rgb(150, 150, 150)');
    expect(keyShape.attr('lineWidth')).toEqual(1);
    expect(keyShape.attr('fillOpacity')).toEqual(1);

    graph.setItemState(edge, 'selected', true);
-    expect(keyShape.attr('stroke')).toEqual('#e2e2e2');
+    expect(keyShape.attr('stroke')).toEqual('rgb(150, 150, 150)');
    expect(keyShape.attr('lineWidth')).toEqual(2);
    expect(keyShape.attr('fillOpacity')).toEqual(1);

    graph.setItemState(edge, 'custom', true);
-    expect(keyShape.attr('stroke')).toEqual('#e2e2e2');
+    expect(keyShape.attr('stroke')).toEqual('rgb(150, 150, 150)');
    expect(keyShape.attr('lineWidth')).toEqual(2);
    expect(keyShape.attr('opacity')).toEqual(0.5);
  });
--- a/tests/unit/graph/svg-spec.ts
+++ b/tests/unit/graph/svg-spec.ts
@ -169,7 +169,7 @@ describe('graph', () => {

    // close to avoid alert
    // inst.downloadImage('graph-image');
-    // inst.destroy();
+    inst.destroy();
  });

  it('groupByTypes false', () => {
@ -335,6 +335,7 @@ describe('graph', () => {
    graph.zoom(5.5);
    matrix = graph.get('group').getMatrix();
    expect(matrix).toBe(null);
+    graph.destroy();
  });

  it('zoomTo', () => {
@ -749,6 +750,8 @@ describe('all node link center', () => {

    graph.clearItemStates(node, 'b');
    expect(graph.findAllByState('node', 'b').length).toBe(0);
+
+    graph.destroy();
  });

  // TODO:  svg edge shadow 相关没有恢复。
@ -1061,6 +1064,7 @@ describe('plugins & layout', () => {
    timerOut(() => {
      gnode = graph.findById('node');
      expect(gnode.get('visible')).toBe(true);
+      graph.destroy();
    }, 500);
  });
 });
@ -1282,18 +1286,18 @@ describe('behaviors', () => {
    const unrelativeNode = graph.getNodes()[2];
    const unrelativeNodeKeyShape = unrelativeNode.get('group').get('children')[0];
    expect(unrelativeNodeKeyShape.attr('lineWidth')).toBe(1);
-    expect(unrelativeNodeKeyShape.attr('stroke')).toBe('#5B8FF9');
+    expect(unrelativeNodeKeyShape.attr('stroke')).toBe('rgb(191, 213, 255)');
    expect(unrelativeNodeKeyShape.attr('opacity')).toBe(0.1);
    const unrelativeEdge = graph.getEdges()[1];
    const unrelativeEdgeKeyShape = unrelativeEdge.get('group').get('children')[0];
-    expect(unrelativeEdgeKeyShape.attr('stroke')).toBe('#e2e2e2');
+    expect(unrelativeEdgeKeyShape.attr('stroke')).toBe('rgb(150, 150, 150)');
    expect(unrelativeEdgeKeyShape.attr('opacity')).toBe(0.1);

    graph.emit('node:mouseleave', { item });
-    expect(itemKeyShape.attr('stroke')).toBe('#5B8FF9');
+    expect(itemKeyShape.attr('stroke')).toBe('rgb(95, 149, 255)');
    expect(itemKeyShape.attr('lineWidth')).toBe(1);
    expect(unrelativeNodeKeyShape.attr('lineWidth')).toBe(1);
-    expect(unrelativeNodeKeyShape.attr('stroke')).toBe('#5B8FF9');
+    expect(unrelativeNodeKeyShape.attr('stroke')).toBe('rgb(95, 149, 255)');
    expect(unrelativeNodeKeyShape.attr('opacity')).toBe(1);
  });
  it('click-select', () => {
@ -1304,14 +1308,14 @@ describe('behaviors', () => {

    const item2 = graph.getNodes()[1];
    const item2KeyShape = item2.get('group').get('children')[0];
-    expect(item2KeyShape.attr('fill')).toBe('#C6E5FF');
+    expect(item2KeyShape.attr('fill')).toBe('rgb(239, 244, 255)');

    graph.emit('node:click', { item: item2 });
    expect(item2KeyShape.attr('fill')).toBe('#f00');
-    expect(itemKeyShape.attr('fill')).toBe('#C6E5FF');
+    expect(itemKeyShape.attr('fill')).toBe('rgb(239, 244, 255)');

    graph.emit('node:click', { item: item2 });
-    expect(item2KeyShape.attr('fill')).toBe('#C6E5FF');
+    expect(item2KeyShape.attr('fill')).toBe('rgb(239, 244, 255)');

    // multiple select
    graph.addBehaviors(['click-select'], 'multiSelect');
@ -1323,8 +1327,8 @@ describe('behaviors', () => {
    expect(item2KeyShape.attr('fill')).toBe('#f00');

    graph.emit('canvas:click');
-    expect(itemKeyShape.attr('fill')).toBe('#C6E5FF');
-    expect(item2KeyShape.attr('fill')).toBe('#C6E5FF');
+    expect(itemKeyShape.attr('fill')).toBe('rgb(239, 244, 255)');
+    expect(item2KeyShape.attr('fill')).toBe('rgb(239, 244, 255)');
  });
  it('brush-select', () => {
    graph.setMode('default');
@ -1341,7 +1345,7 @@ describe('behaviors', () => {
    graph.emit('dragend', { canvasX: 300, canvasY: 300, x: 300, y: 300 });
    graph.emit('keyup', { key: 'shift' });
    const itemKeyShape = item.get('group').get('children')[0];
-    expect(itemKeyShape.attr('fill')).toBe('#C6E5FF');
+    expect(itemKeyShape.attr('fill')).toBe('rgb(239, 244, 255)');

    graph.emit('keydown', { key: 'shift' });
    graph.emit('dragstart', { canvasX: 0, canvasY: 0, x: 0, y: 0 });
@ -1359,8 +1363,8 @@ describe('behaviors', () => {
    });

    graph.emit('canvas:click', {});
-    expect(itemKeyShape.attr('fill')).toBe('#C6E5FF');
-    expect(item2KeyShape.attr('fill')).toBe('#C6E5FF');
+    expect(itemKeyShape.attr('fill')).toBe('rgb(239, 244, 255)');
+    expect(item2KeyShape.attr('fill')).toBe('rgb(239, 244, 255)');
  });

  it('drag-node', () => {
@ -1884,6 +1888,7 @@ describe('built-in items', () => {
    expect(polylineShape.attr('path')[1][2]).toBe(300);
    expect(polylineShape.attr('path')[2][1]).toBe(243);
    expect(polylineShape.attr('path')[2][2]).toBe(300);
+    graph.destroy();
  });
 });

@ -1948,6 +1953,7 @@ describe('tree graph', () => {
    setTimeout(() => {
      graph.emit('node:click', { item });
      expect(item.getModel().collapsed).toBe(false);
+      graph.destroy();
    }, 500);
  });
 });
@ -2745,5 +2751,6 @@ describe('custom group', () => {
    expect(delegateGroup.get('children').length).toBe(0);
    expect(node3.getModel().x).not.toBe(node3OriX);
    expect(node3.getModel().y).not.toBe(node3OriY);
+    graph.destroy();
  });
 });
--- a/tests/unit/issues-spec.ts
+++ b/tests/unit/issues-spec.ts
@ -275,7 +275,7 @@ describe('cubic with layout', () => {
    defaultEdge: {
      size: 2,
      type: 'line-dash', //'line',//'line-dash',//
-      color: '#e2e2e2',
+      color: 'rgb(150, 150, 150)',
    },
    layout: {
      type: 'dagre',
@ -709,17 +709,17 @@ describe('changdata states', () => {
        size: 20,
        style: {
          lineWidth: 2,
-          fill: '#C6E5FF',
-          stroke: '#5B8FF9',
+          fill: 'rgb(239, 244, 255)',
+          stroke: 'rgb(95, 149, 255)',
        },
      },
      defaultEdge: {
        size: 1,
-        color: '#e2e2e2',
+        color: 'rgb(150, 150, 150)',
        style: {
          endArrow: {
            path: 'M 0,0 L 8,4 L 8,-4 Z',
-            fill: '#e2e2e2',
+            fill: 'rgb(150, 150, 150)',
          },
        },
      },
@ -761,13 +761,13 @@ describe('defaultStyle states', () => {
      width: 500,
      height: 500,
      defaultEdge: {
-        color: '#e2e2e2',
+        color: 'rgb(150, 150, 150)',
        lineAppendWidth: 3,
      },
      defaultNode: {
        style: {
          fill: '#DEE9FF',
-          stroke: '#5B8FF9',
+          stroke: 'rgb(95, 149, 255)',
        },
      },
      nodeStateStyles: {
--- a/tests/unit/layout/radial-spec.ts
+++ b/tests/unit/layout/radial-spec.ts
@ -1132,8 +1132,8 @@ describe('radial layout', () => {
        default: ['drag-node'],
      },
    });
-    const colors = ['#e5e5e5', 'green', '#5AD8A6', '#5B8FF9'];
-    const colorsObj = { a: '#e5e5e5', b: 'green', c: '#5AD8A6', d: '#5B8FF9' };
+    const colors = ['#e5e5e5', 'green', '#5AD8A6', 'rgb(95, 149, 255)'];
+    const colorsObj = { a: '#e5e5e5', b: 'green', c: '#5AD8A6', d: 'rgb(95, 149, 255)' };
    data2.nodes.forEach((node) => {
      node.size = 15;
      node.label = ' ';
--- a/tests/unit/plugins/image-minimap-spec.ts
+++ b/tests/unit/plugins/image-minimap-spec.ts
@ -29,8 +29,8 @@ describe('image minimap', () => {
            [1, 0.5],
          ],
          style: {
-            fill: '#C6E5FF',
-            stroke: '#5B8FF9',
+            fill: 'rgb(239, 244, 255)',
+            stroke: 'rgb(95, 149, 255)',
          },
        },
        defaultEdge: {
--- a/tests/unit/shape/edges/polyline-spec.ts
+++ b/tests/unit/shape/edges/polyline-spec.ts
@ -56,7 +56,7 @@ describe('polyline e test', () => {
      const edge = edges[0];
      const keyShape = edge.getKeyShape();
      expect(keyShape.attr('lineWidth')).toEqual(1);
-      expect(keyShape.attr('stroke')).toEqual('#e2e2e2');
+      expect(keyShape.attr('stroke')).toEqual('rgb(150, 150, 150)');
    });

    it('polyline radius and default offset', () => {
@ -92,7 +92,7 @@ describe('polyline e test', () => {
      const edge = edges[0];
      const keyShape = edge.getKeyShape();
      expect(keyShape.attr('lineWidth')).toEqual(1);
-      expect(keyShape.attr('stroke')).toEqual('#e2e2e2');
+      expect(keyShape.attr('stroke')).toEqual('rgb(150, 150, 150)');
    });

    it('polyline radius and no offset', () => {
@ -129,7 +129,7 @@ describe('polyline e test', () => {
      const edge = edges[0];
      const keyShape = edge.getKeyShape();
      expect(keyShape.attr('lineWidth')).toEqual(1);
-      expect(keyShape.attr('stroke')).toEqual('#e2e2e2');
+      expect(keyShape.attr('stroke')).toEqual('rgb(150, 150, 150)');
    });
    it('polyline with label', () => {
      const data = {
@ -167,7 +167,7 @@ describe('polyline e test', () => {
        return g.get('className') === 'edge-label';
      });
      expect(label).not.toBe(undefined);
-      expect(label.attr('fill')).toEqual('#595959');
+      expect(label.attr('fill')).toEqual('rgb(0, 0, 0)');
      const type = label.get('type');
      expect(type).toEqual('text');
    });
@ -261,7 +261,7 @@ describe('polyline e test', () => {
      const edge = edges[0];
      const keyShape = edge.getKeyShape();
      expect(keyShape.attr('lineWidth')).toEqual(1);
-      expect(keyShape.attr('stroke')).toEqual('#e2e2e2');
+      expect(keyShape.attr('stroke')).toEqual('rgb(150, 150, 150)');
    });
  });

--- a/tests/unit/shape/extend/extend-circle-spec.ts
+++ b/tests/unit/shape/extend/extend-circle-spec.ts
@ -92,8 +92,8 @@ describe('register node with getCustomConfig function, extend circle', () => {
    const group = node.get('group');
    const keyShape = node.getKeyShape();
    expect(keyShape.attr('r')).toEqual(10);
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const icon = group.find((g) => {
@ -135,8 +135,8 @@ describe('register node with getCustomConfig function, extend circle', () => {
    const group = node.get('group');
    const keyShape = node.getKeyShape();
    expect(keyShape.attr('r')).toEqual(10);
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const label = group.find((g) => {
@ -184,8 +184,8 @@ describe('register node with getCustomConfig function, extend circle', () => {
    expect(group.getCount()).toEqual(5);

    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
    expect(keyShape.attr('r')).toEqual(10);
    expect(keyShape.attr('lineWidth')).toEqual(1);

@ -304,7 +304,7 @@ describe('register node with getCustomConfig function, extend circle', () => {
      expect(icon.attr('x')).toEqual(-10);
      expect(icon.attr('y')).toEqual(-10);
      expect(icon.attr('img')).toEqual(
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
      );

      const newImg =
--- a/tests/unit/shape/extend/extend-diamond-spec.ts
+++ b/tests/unit/shape/extend/extend-diamond-spec.ts
@ -90,8 +90,8 @@ describe('register node with getCustomConfig function, extend diamond', () => {
    const node = graph.getNodes()[0];
    const group = node.get('group');
    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const icon = group.find((g) => {
@ -132,8 +132,8 @@ describe('register node with getCustomConfig function, extend diamond', () => {
    const node = graph.getNodes()[0];
    const group = node.get('group');
    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const label = group.find((g) => {
@ -181,8 +181,8 @@ describe('register node with getCustomConfig function, extend diamond', () => {
    expect(group.getCount()).toEqual(5);

    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const markTop = group.find((g) => {
@ -299,7 +299,7 @@ describe('register node with getCustomConfig function, extend diamond', () => {
      expect(icon.attr('x')).toEqual(-10);
      expect(icon.attr('y')).toEqual(-10);
      expect(icon.attr('img')).toEqual(
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
      );

      const newImg =
--- a/tests/unit/shape/extend/extend-ellipse-spec.ts
+++ b/tests/unit/shape/extend/extend-ellipse-spec.ts
@ -90,8 +90,8 @@ describe('register node with getCustomConfig function, extend ellipse', () => {
    const node = graph.getNodes()[0];
    const group = node.get('group');
    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const icon = group.find((g) => {
@ -132,8 +132,8 @@ describe('register node with getCustomConfig function, extend ellipse', () => {
    const node = graph.getNodes()[0];
    const group = node.get('group');
    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const label = group.find((g) => {
@ -181,8 +181,8 @@ describe('register node with getCustomConfig function, extend ellipse', () => {
    expect(group.getCount()).toEqual(5);

    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const markTop = group.find((g) => {
@ -299,7 +299,7 @@ describe('register node with getCustomConfig function, extend ellipse', () => {
      expect(icon.attr('x')).toEqual(-10);
      expect(icon.attr('y')).toEqual(-10);
      expect(icon.attr('img')).toEqual(
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
      );

      const newImg =
--- a/tests/unit/shape/extend/extend-rect-spec.ts
+++ b/tests/unit/shape/extend/extend-rect-spec.ts
@ -89,8 +89,8 @@ describe('register node with getCustomConfig function, extend rect', () => {
    const node = graph.getNodes()[0];
    const group = node.get('group');
    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const label = group.find((g) => {
@ -138,8 +138,8 @@ describe('register node with getCustomConfig function, extend rect', () => {
    expect(group.getCount()).toEqual(5);

    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const markTop = group.find((g) => {
--- a/tests/unit/shape/extend/extend-star-spec.ts
+++ b/tests/unit/shape/extend/extend-star-spec.ts
@ -83,7 +83,7 @@ describe('register node with getCustomConfig function, extend star', () => {
    // star + label
    expect(group.getCount()).toEqual(5);
    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');

    const leftbottom = group.find((g) => {
      return g.get('className') === 'link-point-left-bottom';
--- a/tests/unit/shape/extend/extend-triangle-spec.ts
+++ b/tests/unit/shape/extend/extend-triangle-spec.ts
@ -55,7 +55,7 @@ describe('register node with getCustomConfig function, extend triangle', () => {
      return g.get('className') === 'node-label';
    });
    expect(label).not.toBe(null);
-    expect(label.attr('fill')).toEqual('#595959');
+    expect(label.attr('fill')).toEqual('#000');
    expect(label.attr('fontSize')).toEqual(12);

    graph.destroy();
@ -100,8 +100,8 @@ describe('register node with getCustomConfig function, extend triangle', () => {
    const node = graph.getNodes()[0];
    const group = node.get('group');
    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const label = group.find((g) => {
@ -153,8 +153,8 @@ describe('register node with getCustomConfig function, extend triangle', () => {
    const node = graph.getNodes()[0];
    const group = node.get('group');
    const keyShape = node.getKeyShape();
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-    expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+    expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    expect(keyShape.attr('lineWidth')).toEqual(1);

    const icon = group.find((g) => {
--- a/tests/unit/shape/node-spec.ts
+++ b/tests/unit/shape/node-spec.ts
@ -275,7 +275,7 @@ describe('shape node test', () => {
        label: 'ellipse position',
        labelCfg: {
          position: 'top',
-          offset: 5,
+          offset: 4,
        },
      };
      factory.draw('ellipse', model, group);
@ -285,7 +285,6 @@ describe('shape node test', () => {
        model,
        group,
      });
-
      let label = group.get('children')[1];
      expect(label.attr('x')).toBe(0);
      expect(label.attr('y')).toBe(-10 - Global.nodeLabel.offset);
--- a/tests/unit/shape/nodes/circle-spec.ts
+++ b/tests/unit/shape/nodes/circle-spec.ts
@ -35,8 +35,8 @@ describe('circle test', () => {
      const node = nodes[0];
      const keyShape = node.getKeyShape();
      expect(keyShape.attr('r')).toEqual(10);
-      expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-      expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+      expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+      expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    });

    it('circle with label', () => {
@ -63,7 +63,7 @@ describe('circle test', () => {
        return g.get('className') === 'node-label';
      });
      expect(label).not.toBe(undefined);
-      expect(label.attr('fill')).toEqual('#595959');
+      expect(label.attr('fill')).toEqual('#000');
      const type = label.get('type');
      expect(type).toEqual('text');
      graph.destroy();
@ -117,10 +117,10 @@ describe('circle test', () => {
      });
      expect(icon).not.toBe(undefined);
      expect(icon.attr('img')).toEqual(
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
      );
-      expect(icon.attr('width')).toEqual(16);
-      expect(icon.attr('height')).toEqual(16);
+      expect(icon.attr('width')).toEqual(20);
+      expect(icon.attr('height')).toEqual(20);

      graph.destroy();
      expect(graph.destroyed).toBe(true);
@ -168,7 +168,7 @@ describe('circle test', () => {

      const keyShape = node.getKeyShape();
      expect(keyShape.attr('fill')).toEqual('blue');
-      expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
+      expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
      expect(keyShape.attr('r')).toEqual(17.5);
      expect(keyShape.attr('lineWidth')).toEqual(1);

--- a/tests/unit/shape/nodes/diamond-spec.ts
+++ b/tests/unit/shape/nodes/diamond-spec.ts
@ -35,8 +35,8 @@ describe('diamond test', () => {
      expect(nodes.length).toEqual(1);
      const node = nodes[0];
      const keyShape = node.getKeyShape();
-      expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-      expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+      expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+      expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    });

    it('diamond with label', () => {
@ -62,7 +62,7 @@ describe('diamond test', () => {

      const label = group.find((g) => g.get('className') === 'node-label');
      expect(label).not.toBe(undefined);
-      expect(label.attr('fill')).toEqual('#595959');
+      expect(label.attr('fill')).toEqual('#000');
      const type = label.get('type');
      expect(type).toEqual('text');
      graph.destroy();
@ -113,10 +113,10 @@ describe('diamond test', () => {
      const icon = group.find((g) => g.get('className') === 'diamond-icon');
      expect(icon).not.toBe(undefined);
      expect(icon.attr('img')).toEqual(
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
      );
-      expect(icon.attr('width')).toEqual(16);
-      expect(icon.attr('height')).toEqual(16);
+      expect(icon.attr('width')).toEqual(20);
+      expect(icon.attr('height')).toEqual(20);

      graph.destroy();
      expect(graph.destroyed).toBe(true);
@ -165,7 +165,7 @@ describe('diamond test', () => {

      const keyShape = node.getKeyShape();
      expect(keyShape.attr('fill')).toEqual('blue');
-      expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
+      expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
      expect(keyShape.attr('lineWidth')).toEqual(1);

      const markTop = group.find((g) => g.get('className') === 'link-point-top');
--- a/tests/unit/shape/nodes/ellipse-spec.ts
+++ b/tests/unit/shape/nodes/ellipse-spec.ts
@ -34,10 +34,10 @@ describe('ellipse test', () => {
      expect(nodes.length).toEqual(1);
      const node = nodes[0];
      const keyShape = node.getKeyShape();
-      expect(keyShape.attr('rx')).toEqual(60);
-      expect(keyShape.attr('ry')).toEqual(30);
-      expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-      expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+      expect(keyShape.attr('rx')).toEqual(40);
+      expect(keyShape.attr('ry')).toEqual(20);
+      expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+      expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    });

    it('ellipse with label', () => {
@ -64,7 +64,7 @@ describe('ellipse test', () => {
        return g.get('className') === 'node-label';
      });
      expect(label).not.toBe(undefined);
-      expect(label.attr('fill')).toEqual('#595959');
+      expect(label.attr('fill')).toEqual('#000');
      const type = label.get('type');
      expect(type).toEqual('text');
      graph.destroy();
@ -119,10 +119,10 @@ describe('ellipse test', () => {
      });
      expect(icon).not.toBe(undefined);
      expect(icon.attr('img')).toEqual(
-        'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
      );
-      expect(icon.attr('width')).toEqual(36);
-      expect(icon.attr('height')).toEqual(36);
+      expect(icon.attr('width')).toEqual(20);
+      expect(icon.attr('height')).toEqual(20);

      graph.destroy();
      expect(graph.destroyed).toBe(true);
@ -171,7 +171,7 @@ describe('ellipse test', () => {

      const keyShape = node.getKeyShape();
      expect(keyShape.attr('fill')).toEqual('blue');
-      expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
+      expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
      expect(keyShape.attr('rx')).toEqual(17.5);
      expect(keyShape.attr('ry')).toEqual(5);
      expect(keyShape.attr('lineWidth')).toEqual(1);
--- a/tests/unit/shape/nodes/image-spec.ts
+++ b/tests/unit/shape/nodes/image-spec.ts
@ -65,7 +65,7 @@ describe('image test', () => {
        return g.get('className') === 'node-label';
      });
      expect(label).not.toBe(undefined);
-      expect(label.attr('fill')).toEqual('#595959');
+      expect(label.attr('fill')).toEqual('#000');
      const type = label.get('type');
      expect(type).toEqual('text');
      graph.destroy();
--- a/tests/unit/shape/nodes/modelRect-spec.ts
+++ b/tests/unit/shape/nodes/modelRect-spec.ts
@ -411,7 +411,7 @@ describe('model rect test', () => {
      label: '审批节点',
      labelCfg: {
        style: {
-          fill: '#595959',
+          fill: '#000',
          fontSize: 14
        },
        offset: 30
--- a/tests/unit/shape/nodes/rect-spec.ts
+++ b/tests/unit/shape/nodes/rect-spec.ts
@ -35,8 +35,8 @@ describe('rect test', () => {
      const node = nodes[0];
      const keyShape = node.getKeyShape();
      expect(keyShape.attr('width')).toEqual(100);
-      expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
-      expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+      expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
+      expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');
    });

    it('rect with label', () => {
@ -63,7 +63,7 @@ describe('rect test', () => {
        return g.get('className') === 'node-label';
      });
      expect(label).not.toBe(undefined);
-      expect(label.attr('fill')).toEqual('#595959');
+      expect(label.attr('fill')).toEqual('#000');
      const type = label.get('type');
      expect(type).toEqual('text');
      graph.destroy();
@ -115,7 +115,7 @@ describe('rect test', () => {

      const keyShape = node.getKeyShape();
      expect(keyShape.attr('fill')).toEqual('blue');
-      expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
+      expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
      expect(keyShape.attr('width')).toEqual(35);
      expect(keyShape.attr('lineWidth')).toEqual(1);

--- a/tests/unit/shape/nodes/star-spec.ts
+++ b/tests/unit/shape/nodes/star-spec.ts
@ -36,13 +36,13 @@ describe('star test', () => {
      // star + label
      expect(group.getCount()).toEqual(2);
      const keyShape = node.getKeyShape();
-      expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+      expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');

      const label = group.find((g) => {
        return g.get('className') === 'node-label';
      });
      expect(label).not.toBe(null);
-      expect(label.attr('fill')).toEqual('#595959');
+      expect(label.attr('fill')).toEqual('#000');
      expect(label.attr('fontSize')).toEqual(12);

      graph.destroy();
@ -82,7 +82,7 @@ describe('star test', () => {
      // star + label
      expect(group.getCount()).toEqual(5);
      const keyShape = node.getKeyShape();
-      expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+      expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');

      const leftbottom = group.find((g) => {
        return g.get('className') === 'link-point-left-bottom';
--- a/tests/unit/shape/nodes/triangle-spec.ts
+++ b/tests/unit/shape/nodes/triangle-spec.ts
@ -36,13 +36,13 @@ describe('triangle test', () => {
      // modelRect + label + description + logoIcon + stateIcon + preRect
      expect(group.getCount()).toEqual(2);
      const keyShape = node.getKeyShape();
-      expect(keyShape.attr('fill')).toEqual('#C6E5FF');
+      expect(keyShape.attr('fill')).toEqual('rgb(239, 244, 255)');

      const label = group.find((g) => {
        return g.get('className') === 'node-label';
      });
      expect(label).not.toBe(null);
-      expect(label.attr('fill')).toEqual('#595959');
+      expect(label.attr('fill')).toEqual('#000');
      expect(label.attr('fontSize')).toEqual(12);

      graph.destroy();
--- a/tests/unit/state/edge-state-spec.ts
+++ b/tests/unit/state/edge-state-spec.ts
@ -375,7 +375,7 @@ describe('graph edge states', () => {
      expect(item.hasState('state1')).toEqual(true);
      const keyShape = edge.getKeyShape();
      expect(keyShape.attr('lineWidth')).toEqual(3);
-      expect(keyShape.attr('stroke')).toEqual('#e2e2e2');
+      expect(keyShape.attr('stroke')).toEqual('rgb(150, 150, 150)');
    });
    graph.on('edge:mouseleave', (e) => {
      const item = e.item;
@ -400,7 +400,7 @@ describe('graph edge states', () => {
        expect(edge.hasState('state2')).toEqual(false);
        const keyShape = edge.getKeyShape();
        expect(keyShape.attr('lineWidth')).toEqual(1);
-        expect(keyShape.attr('stroke')).toEqual('#e2e2e2');
+        expect(keyShape.attr('stroke')).toEqual('rgb(150, 150, 150)');
      });
    });
    graph.emit('edge:mouseenter', { item: edge });
@ -563,7 +563,7 @@ describe('graph edge states', () => {
          break;
        case 'edge2':
          expect(keyShape.attr('lineWidth')).toEqual(7);
-          expect(keyShape.attr('stroke')).toEqual('#e2e2e2');
+          expect(keyShape.attr('stroke')).toEqual('rgb(150, 150, 150)');
          break;
      }
    });
@ -601,7 +601,7 @@ describe('graph edge states', () => {
        },
      ],
    };
-    
+
    const graph = new G6.Graph({
      container: div, // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
      width: 800, // Number，必须，图的宽度
@ -674,7 +674,7 @@ describe('graph edge states', () => {
    expect(states.length).toBe(1)

    let stateStyle = currentEdge.getStateStyle('click')
-    expect(stateStyle).toEqual({"lineWidth": 2, "stroke": "red"})
+    expect(stateStyle).toEqual({ "lineWidth": 2, "stroke": "red" })

    keyShape = currentEdge.getKeyShape()
    expect(keyShape.attr('stroke')).toEqual('red')
@ -700,7 +700,7 @@ describe('graph edge states', () => {

    // updateItem 以后，edge click states 的值以及变化了
    stateStyle = currentEdge.getStateStyle('click')
-    expect(stateStyle).toEqual({"lineWidth": 2, "stroke": "#333"})
+    expect(stateStyle).toEqual({ "lineWidth": 2, "stroke": "#333" })

    graph.destroy()
    expect(graph.destroyed).toBe(true)
--- a/tests/unit/state/node-state-spec.ts
+++ b/tests/unit/state/node-state-spec.ts
@ -212,27 +212,27 @@ describe('graph node states', () => {
        case 'circle':
          expect(attrs.lineWidth).toEqual(3);
          expect(attrs.stroke).toEqual('#f00');
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
        case 'rect':
          expect(attrs.lineWidth).toEqual(3);
          expect(attrs.stroke).toEqual('#0f0');
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
        case 'triangle':
          expect(attrs.lineWidth).toEqual(1);
          expect(attrs.stroke).toEqual('#f00');
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
        case 'ellipse':
          expect(attrs.lineWidth).toEqual(3);
          expect(attrs.fillOpacity).toEqual(0.5);
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
        case 'diamond':
          expect(attrs.lineWidth).toEqual(1);
          expect(attrs.strokeOpacity).toEqual(0.3);
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
        case 'star':
          expect(attrs.lineWidth).toEqual(3);
@ -240,7 +240,7 @@ describe('graph node states', () => {
          expect(attrs.shadowBlur).toEqual(10);
          expect(attrs.shadowOffsetX).toEqual(10);
          expect(attrs.shadowOffsetY).toEqual(-10);
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
      }
    });
--- a/tests/unit/state/refactor-state-spec.ts
+++ b/tests/unit/state/refactor-state-spec.ts
@ -820,27 +820,27 @@ describe('graph refactor states', () => {
        case 'circle':
          expect(attrs.lineWidth).toEqual(3);
          expect(attrs.stroke).toEqual('#f00');
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
        case 'rect':
          expect(attrs.lineWidth).toEqual(3);
          expect(attrs.stroke).toEqual('#0f0');
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
        case 'triangle':
          expect(attrs.lineWidth).toEqual(1);
          expect(attrs.stroke).toEqual('#f00');
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
        case 'ellipse':
          expect(attrs.lineWidth).toEqual(3);
          expect(attrs.fillOpacity).toEqual(0.5);
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
        case 'diamond':
          expect(attrs.lineWidth).toEqual(1);
          expect(attrs.strokeOpacity).toEqual(0.3);
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
        case 'star':
          expect(attrs.lineWidth).toEqual(3);
@ -848,7 +848,7 @@ describe('graph refactor states', () => {
          expect(attrs.shadowBlur).toEqual(10);
          expect(attrs.shadowOffsetX).toEqual(10);
          expect(attrs.shadowOffsetY).toEqual(-10);
-          expect(attrs.fill).toEqual('#C6E5FF');
+          expect(attrs.fill).toEqual('rgb(239, 244, 255)');
          break;
      }
    });
--- a/tests/unit/state/update-element-states-spec.ts
+++ b/tests/unit/state/update-element-states-spec.ts
@ -235,7 +235,7 @@ describe('update', () => {
    expect(item.getStates().length).toBe(0);

    // 内置 circle 默认的 stroke
-    expect(keyShape.attr('stroke')).toEqual('#5B8FF9');
+    expect(keyShape.attr('stroke')).toEqual('rgb(95, 149, 255)');
    expect(keyShape.attr('fill')).toEqual('steelblue');

    graph.updateItem(item, {