style(flow): adjust default styles

example/src/Overview/index.js

@@ -95,8 +95,10 @@ const initialElements = [
     source: '5',
     target: '7',
     type: 'step',
+    style: { stroke: '#f6ab6c' },
     label: 'a step edge',
-    labelStyle: { fill: 'red', fontWeight: 700 },
+    animated: true,
+    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
   },
 ];
 
@@ -132,11 +134,12 @@ const OverviewFlow = () => {
     >
       <MiniMap
         nodeColor={(n) => {
-          if (n.type === 'input') return 'blue';
+          if (n.style?.background) return n.style.background;
-          if (n.type === 'output') return 'green';
+          if (n.type === 'input') return '#9999ff';
-          if (n.type === 'default') return 'red';
+          if (n.type === 'output') return '#79c9b7';
+          if (n.type === 'default') return '#ff6060';
 
-          return '#FFCC00';
+          return '#eee';
         }}
       />
       <Controls />

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -15,7 +15,7 @@ const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
     height,
   } = node.__rf;
   const { background, backgroundColor } = node.style || {};
-  const fill = (background || backgroundColor || color) as string;
+  const fill = (color || background || backgroundColor) as string;
 
   return (
     <rect

src/style.css

@@ -63,7 +63,7 @@
 .react-flow__edge-path {
   fill: none;
   stroke: #bbb;
-  stroke-width: 2;
+  stroke-width: 1.5;
 }
 
 .react-flow__edge-text {
@@ -83,7 +83,7 @@
 .react-flow__connection-path {
   fill: none;
   stroke: #ddd;
-  stroke-width: 2;
+  stroke-width: 1.5;
 }
 
 .react-flow__nodes {
@@ -107,7 +107,7 @@
 .react-flow__node-input,
 .react-flow__node-output {
   padding: 10px;
-  border-radius: 5px;
+  border-radius: 3px;
   width: 150px;
   font-size: 12px;
   color: #222;
@@ -127,16 +127,16 @@
   }
 }
 
-.react-flow__node-default {
-  background: #ff6060;
-}
-
 .react-flow__node-input {
   background: #9999ff;
 }
 
+.react-flow__node-default {
+  background: #ff6060;
+}
+
 .react-flow__node-output {
-  background: #55dd99;
+  background: #79c9b7;
 }
 
 .react-flow__nodesselection {