Adjust SvelteFlow and allow for null to use CSS variable

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;
 };
 

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();
 

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

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;
   }