From d060c3fa876c8ba315797700c8baaebdbb51b611 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 11 Aug 2025 13:59:38 +0200
Subject: [PATCH] Adjust SvelteFlow and allow for null to use CSS variable

---
 .../src/routes/examples/edges/+page.svelte    | 40 ++++++++++++++++++-
 .../EdgeRenderer/MarkerDefinitions.tsx        |  2 +-
 .../MarkerDefinition/Marker.svelte            |  2 +-
 .../src/lib/container/SvelteFlow/types.ts     |  3 +-
 packages/system/src/utils/marker.ts           |  2 +-
 5 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index ab22159f..17d46823 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -63,6 +63,18 @@
 			type: 'output',
 			data: { label: 'Output 11' },
 			position: { x: 825, y: 300 }
+		},
+		{
+			id: '12',
+			type: 'output',
+			data: { label: 'Output 12' },
+			position: { x: 900, y: 200 }
+		},
+		{
+			id: '13',
+			type: 'output',
+			data: { label: 'Output 13' },
+			position: { x: 825, y: 100 }
 		}
 	]);
 
@@ -158,13 +170,38 @@
 			id: 'e4-11',
 			source: '4',
 			target: '11',
-			label: 'Marker No Prop Color (should use CSS variable)',
+			label: 'Marker explicitly undefined Color (defaults to none)',
+			className: 'css-variable-edge',
 			markerEnd: {
 				type: MarkerType.ArrowClosed,
 				color: undefined,
 				width: 40,
 				height: 40
 			}
+		},
+		{
+			id: 'e4-12',
+			source: '4',
+			target: '12',
+			label: 'Marker null Color (should use `--xy-edge-stroke` CSS variable)',
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				color: null,
+				width: 40,
+				height: 40
+			}
+		},
+		{
+			id: 'e4-13',
+			source: '4',
+			target: '13',
+			label: 'Marker implicitly undefined Color (defaults to defaultMarkerColor)',
+			className: 'css-variable-edge',
+			markerEnd: {
+				type: MarkerType.ArrowClosed,
+				width: 40,
+				height: 40
+			}
 		}
 	]);
 
@@ -204,6 +241,7 @@
 			id: getEdgeId(connection)
 		};
 	}}
+	defaultMarkerColor={'purple'}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
diff --git a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
index 1c12775d..3cc39267 100644
--- a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
+++ b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
@@ -5,7 +5,7 @@ import { useStore } from '../../hooks/useStore';
 import { useMarkerSymbol } from './MarkerSymbols';
 
 type MarkerDefinitionsProps = {
-  defaultColor: string;
+  defaultColor: string | null;
   rfId?: string;
 };
 
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
index da670557..d032ee35 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
@@ -8,7 +8,7 @@
     height = 12.5,
     markerUnits = 'strokeWidth',
     orient = 'auto-start-reverse',
-    color,
+    color = 'none',
     strokeWidth
   }: MarkerProps = $props();
 
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index ae8cd79f..5cd4b740 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -230,9 +230,10 @@ export type SvelteFlowProps<
      */
     snapGrid?: SnapGrid;
     /** Color of edge markers
+     * You can pass `null` to use the CSS variable `--xy-edge-stroke` for the marker color.
      * @example "#b1b1b7"
      */
-    defaultMarkerColor?: string;
+    defaultMarkerColor?: string | null;
     /**
      * Controls if all nodes should be draggable
      * @default true
diff --git a/packages/system/src/utils/marker.ts b/packages/system/src/utils/marker.ts
index 834f17ef..9c150192 100644
--- a/packages/system/src/utils/marker.ts
+++ b/packages/system/src/utils/marker.ts
@@ -26,7 +26,7 @@ export function createMarkerIds(
     defaultMarkerEnd,
   }: {
     id?: string | null;
-    defaultColor?: string;
+    defaultColor?: string | null;
     defaultMarkerStart?: EdgeMarkerType;
     defaultMarkerEnd?: EdgeMarkerType;
   }