style(flow): new default styles

example/src/CustomNode/ColorSelectorNode.js

@@ -8,15 +8,15 @@ export default memo(({ data }) => {
       <Handle
         type="target"
         position="left"
-        style={{ background: '#fff' }}
+        style={{ background: '#555' }}
         onConnect={(params) => console.log('handle onConnect', params)}
       />
       <div>
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>
       <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
-      <Handle type="source" position="right" id="a" style={{ top: 10, background: '#fff' }} />
-      <Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#fff' }} />
+      <Handle type="source" position="right" id="a" style={{ top: 10, background: '#555' }} />
+      <Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#555' }} />
     </>
   );
 });

example/src/CustomNode/index.js

@@ -8,7 +8,7 @@ const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInsta
 const onNodeDragStop = (event, node) => console.log('drag stop', node);
 const onElementClick = (event, element) => console.log('click', element);
 
-const initBgColor = '#f0e742';
+const initBgColor = '#1A192B';
 
 const connectionLineStyle = { stroke: '#fff' };
 const snapGrid = [16, 16];
@@ -78,12 +78,17 @@ const CustomNodeFlow = () => {
       connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
       snapGrid={snapGrid}
+      defaultZoom={1.5}
     >
       <MiniMap
-        nodeColor={(n) => {
-          if (n.type === 'input') return 'blue';
+        nodeStrokeColor={(n) => {
+          if (n.type === 'input') return '#0041d0';
           if (n.type === 'selectorNode') return bgColor;
-          if (n.type === 'output') return 'green';
+          if (n.type === 'output') return '#ff0072';
+        }}
+        nodeColor={(n) => {
+          if (n.type === 'selectorNode') return bgColor;
+          return '#fff';
         }}
       />
       <Controls />

example/src/Horizontal/index.js

@@ -26,8 +26,22 @@ const initialElements = [
   { id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 0 } },
   { id: '5', sourcePosition: 'top', targetPosition: 'bottom', data: { label: 'Node 5' }, position: { x: 500, y: 100 } },
   { id: '6', sourcePosition: 'bottom', targetPosition: 'top', data: { label: 'Node 6' }, position: { x: 500, y: 230 } },
-  { id: '7', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 7' }, position: { x: 750, y: 50 } },
-  { id: '8', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 8' }, position: { x: 750, y: 300 } },
+  {
+    id: '7',
+    type: 'output',
+    sourcePosition: 'right',
+    targetPosition: 'left',
+    data: { label: 'Node 7' },
+    position: { x: 750, y: 50 },
+  },
+  {
+    id: '8',
+    type: 'output',
+    sourcePosition: 'right',
+    targetPosition: 'left',
+    data: { label: 'Node 8' },
+    position: { x: 750, y: 300 },
+  },
 
   { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
   { id: 'e1-3', source: '1', type: 'smoothstep', target: '3', animated: true },

example/src/Overview/index.js

@@ -54,7 +54,7 @@ const initialElements = [
       ),
     },
     position: { x: 400, y: 100 },
-    style: { background: '#eee', color: '#222', border: '1px solid #bbb', width: 180 },
+    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
   },
   {
     id: '4',
@@ -139,14 +139,20 @@ const OverviewFlow = () => {
       snapGrid={snapGrid}
     >
       <MiniMap
-        nodeColor={(n) => {
+        nodeStrokeColor={(n) => {
           if (n.style?.background) return n.style.background;
-          if (n.type === 'input') return '#9999ff';
-          if (n.type === 'output') return '#79c9b7';
-          if (n.type === 'default') return '#ff6060';
+          if (n.type === 'input') return '#0041d0';
+          if (n.type === 'output') return '#ff0072';
+          if (n.type === 'default') return '#1a192b';
 
           return '#eee';
         }}
+        nodeColor={(n) => {
+          if (n.style?.background) return n.style.background;
+
+          return '#fff';
+        }}
+        borderRadius={2}
       />
       <Controls />
       <Background color="#aaa" gap={16} />

example/src/index.css

@@ -138,18 +138,22 @@ nav a.active:before {
 }
 
 .react-flow__node.dark-node {
-  background: #333;
+  background: #0041d0;
   color: #f8f8f8;
 }
 
 .react-flow__node-selectorNode {
   font-size: 12px;
-  background: #eee;
-  border: 1px solid #555;
+  background: #f0f2f3;
+  border: 1px solid 555;
   border-radius: 5px;
   text-align: center;
 }
 
+.react-flow__node-selectorNode .react-flow__handle {
+  border-color: #f0f2f3;
+}
+
 @media screen and (min-width: 768px) {
   nav {
     position: relative;
@@ -176,4 +180,4 @@ nav a.active:before {
   .overview-example__add {
     display: block;
   }
-}
+}