Merge pull request #571 from xyflow/overview-example-styling-updates

Overview Example Style Updates

apps/example-apps/package.json

@@ -25,7 +25,7 @@
     "svelte-check": "^4.0.5",
     "tslib": "^2.8.0",
     "typescript": "^5.5.4",
-    "vite": "^5.4.10"
+    "vite": "^5.4.11"
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",

apps/example-apps/react/examples/edges/animating-edges-node/App.tsx

@@ -8,6 +8,7 @@ import {
 
 import '@xyflow/react/dist/style.css';
 
+
 import { AnimatedNodeEdge } from './AnimatedNodeEdge';
 
 const initialNodes = [
@@ -42,8 +43,9 @@ const EdgesFlow = () => {
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       fitView
-    >
-      <Background />
+      style={{ backgroundColor: "#F7F9FB" }}
+      >
+        <Background />
     </ReactFlow>
   );
 };

apps/example-apps/react/examples/edges/animating-edges-node/index.css

@@ -1,3 +1,6 @@
+
+@import url('./xy-theme.css');
+
 html,
 body {
   margin: 0;

apps/example-apps/react/examples/edges/animating-edges-node/xy-theme.css

@@ -0,0 +1,103 @@
+/* xyflow theme files. Delete these to start from our base */
+
+.react-flow {
+    /* Custom Variables */
+    --xy-theme-selected: #F57DBD;
+    --xy-theme-hover: #C5C5C5;
+    --xy-theme-edge-hover: black;
+    --xy-theme-color-focus: #E8E8E8;
+
+    /* Built-in Variables see https://reactflow.dev/learn/customization/theming */
+    --xy-node-border-default: 1px solid #EDEDED;
+
+    --xy-node-boxshadow-default: 
+      0px 3.54px 4.55px 0px #00000005, 
+      0px 3.54px 4.55px 0px #0000000D, 
+      0px 0.51px 1.01px 0px #0000001A;
+
+    --xy-node-border-radius-default: 8px;
+
+    --xy-handle-background-color-default: #ffffff;
+    --xy-handle-border-color-default: #AAAAAA;
+
+    --xy-edge-label-color-default: #505050;
+}
+
+.react-flow.dark { 
+    --xy-node-boxshadow-default: 
+    0px 3.54px 4.55px 0px rgba(255, 255, 255, 0.05), /* light shadow */
+    0px 3.54px 4.55px 0px rgba(255, 255, 255, 0.13), /* medium shadow */
+    0px 0.51px 1.01px 0px rgba(255, 255, 255, 0.2);  /* smallest shadow */  
+    --xy-theme-color-focus: #535353;
+}
+
+/* Customizing Default Theming */
+
+.react-flow__node {
+    box-shadow: var(--xy-node-boxshadow-default);
+    border-radius: var(--xy-node-border-radius-default);
+    background-color: var(--xy-node-background-color-default);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 10px;
+    font-size: 12px;
+    flex-direction: column;
+    border: var(--xy-node-border-default);
+    color: var(--xy-node-color, var(--xy-node-color-default));
+}
+
+.react-flow__node.selectable:focus {
+    box-shadow: 0px 0px 0px 4px var(--xy-theme-color-focus);
+    border-color: #d9d9d9;
+}
+
+.react-flow__node.selectable:hover, 
+.react-flow__node.draggable:hover {
+    border-color: var(--xy-theme-hover);
+}
+
+.react-flow__node.selectable.selected {
+    border-color: var(--xy-theme-selected);
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+.react-flow__node-group {
+    background-color: rgba(207, 182, 255, 0.4);
+    border-color: #9E86ED;
+}
+
+.react-flow__edge.selectable:hover .react-flow__edge-path,
+.react-flow__edge.selectable.selected .react-flow__edge-path {
+    stroke: var(--xy-theme-edge-hover);
+}
+
+.react-flow__handle {
+    background-color: var(--xy-handle-background-color-default);
+}
+
+.react-flow__handle.connectionindicator:hover {
+    pointer-events: all;
+    border-color: var(--xy-theme-edge-hover);
+    background-color: white;
+}
+
+.react-flow__handle.connectionindicator:focus , 
+.react-flow__handle.connectingfrom,
+.react-flow__handle.connectingto {
+    border-color: var(--xy-theme-edge-hover);
+}
+
+.react-flow__node-resizer {
+    border-radius: 0;
+    border: none;
+}
+
+.react-flow__resize-control.handle {
+    background-color: #ffffff;
+    border-color: #9E86ED;
+    border-radius: 0;
+    width: 5px;
+    height: 5px;
+}

apps/example-apps/react/examples/edges/animating-edges-svg/App.tsx

@@ -5,8 +5,10 @@ import {
   useEdgesState,
   Background,
 } from '@xyflow/react';
+
 import '@xyflow/react/dist/style.css';
 
+
 import { AnimatedSVGEdge } from './AnimatedSVGEdge';
 
 const initialNodes = [
@@ -34,9 +36,10 @@ const EdgesFlow = () => {
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       fitView
-    >
-      <Background />
-    </ReactFlow>
+      style={{ backgroundColor: "#F7F9FB" }}
+      >
+        <Background />
+      </ReactFlow>
   );
 };
 

apps/example-apps/react/examples/edges/animating-edges-svg/index.css

@@ -1,3 +1,5 @@
+@import url('./xy-theme.css');
+
 html,
 body {
   margin: 0;
@@ -8,4 +10,3 @@ body {
   width: 100vw;
   height: 100vh;
 }
-

apps/example-apps/react/examples/edges/animating-edges-svg/xy-theme.css

@@ -0,0 +1,103 @@
+/* xyflow theme files. Delete these to start from our base */
+
+.react-flow {
+    /* Custom Variables */
+    --xy-theme-selected: #F57DBD;
+    --xy-theme-hover: #C5C5C5;
+    --xy-theme-edge-hover: black;
+    --xy-theme-color-focus: #E8E8E8;
+
+    /* Built-in Variables see https://reactflow.dev/learn/customization/theming */
+    --xy-node-border-default: 1px solid #EDEDED;
+
+    --xy-node-boxshadow-default: 
+      0px 3.54px 4.55px 0px #00000005, 
+      0px 3.54px 4.55px 0px #0000000D, 
+      0px 0.51px 1.01px 0px #0000001A;
+
+    --xy-node-border-radius-default: 8px;
+
+    --xy-handle-background-color-default: #ffffff;
+    --xy-handle-border-color-default: #AAAAAA;
+
+    --xy-edge-label-color-default: #505050;
+}
+
+.react-flow.dark { 
+    --xy-node-boxshadow-default: 
+    0px 3.54px 4.55px 0px rgba(255, 255, 255, 0.05), /* light shadow */
+    0px 3.54px 4.55px 0px rgba(255, 255, 255, 0.13), /* medium shadow */
+    0px 0.51px 1.01px 0px rgba(255, 255, 255, 0.2);  /* smallest shadow */  
+    --xy-theme-color-focus: #535353;
+}
+
+/* Customizing Default Theming */
+
+.react-flow__node {
+    box-shadow: var(--xy-node-boxshadow-default);
+    border-radius: var(--xy-node-border-radius-default);
+    background-color: var(--xy-node-background-color-default);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 10px;
+    font-size: 12px;
+    flex-direction: column;
+    border: var(--xy-node-border-default);
+    color: var(--xy-node-color, var(--xy-node-color-default));
+}
+
+.react-flow__node.selectable:focus {
+    box-shadow: 0px 0px 0px 4px var(--xy-theme-color-focus);
+    border-color: #d9d9d9;
+}
+
+.react-flow__node.selectable:hover, 
+.react-flow__node.draggable:hover {
+    border-color: var(--xy-theme-hover);
+}
+
+.react-flow__node.selectable.selected {
+    border-color: var(--xy-theme-selected);
+    box-shadow: var(--xy-node-boxshadow-default);
+}
+
+.react-flow__node-group {
+    background-color: rgba(207, 182, 255, 0.4);
+    border-color: #9E86ED;
+}
+
+.react-flow__edge.selectable:hover .react-flow__edge-path,
+.react-flow__edge.selectable.selected .react-flow__edge-path {
+    stroke: var(--xy-theme-edge-hover);
+}
+
+.react-flow__handle {
+    background-color: var(--xy-handle-background-color-default);
+}
+
+.react-flow__handle.connectionindicator:hover {
+    pointer-events: all;
+    border-color: var(--xy-theme-edge-hover);
+    background-color: white;
+}
+
+.react-flow__handle.connectionindicator:focus , 
+.react-flow__handle.connectingfrom,
+.react-flow__handle.connectingto {
+    border-color: var(--xy-theme-edge-hover);
+}
+
+.react-flow__node-resizer {
+    border-radius: 0;
+    border: none;
+}
+
+.react-flow__resize-control.handle {
+    background-color: #ffffff;
+    border-color: #9E86ED;
+    border-radius: 0;
+    width: 5px;
+    height: 5px;
+}

apps/example-apps/react/examples/edges/custom-connectionline/App.jsx

@@ -6,8 +6,10 @@ import {
   addEdge,
   Background,
 } from '@xyflow/react';
+
 import '@xyflow/react/dist/style.css';
 
+
 import CustomNode from './CustomNode';
 import ConnectionLine from './ConnectionLine';
 
@@ -45,9 +47,12 @@ const ConnectionLineFlow = () => {
       fitViewOptions={{
         padding: 0.2,
       }}
-    >
-      <Background variant="lines" />
-    </ReactFlow>
+      style={{ backgroundColor: "#F7F9FB" }}
+      >
+        <Background />
+      </ReactFlow>
+
+
   );
 };
 

apps/example-apps/react/examples/edges/custom-connectionline/CustomNode.jsx

@@ -10,12 +10,7 @@ const DEFAULT_HANDLE_STYLE = {
 export default memo(({ data, isConnectable }) => {
   return (
     <>
-      <div
-        style={{
-          background: '#DDD',
-          padding: 25,
-        }}
-      >
+      <div style={{ padding: 25}} >
         <div>Node</div>
         <Handle
           type="source"

apps/example-apps/react/examples/edges/custom-connectionline/index.css

@@ -1,3 +1,5 @@
+@import url('./xy-theme.css');
+
 html,
 body {
   margin: 0;