feat(svelte): cleanup styling, use css variables

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -5,7 +5,7 @@
   type $$Props = BaseEdgeProps;
 
   export let id: $$Props['id'] = undefined;
-  export let path: $$Props['path'] = '';
+  export let path: $$Props['path'];
   export let label: $$Props['label'] = undefined;
   export let labelX: $$Props['labelX'] = undefined;
   export let labelY: $$Props['labelY'] = undefined;
@@ -19,19 +19,19 @@
 <path
   d={path}
   {id}
-  fill="none"
   class="svelte-flow__edge-path"
   marker-start={markerStart}
   marker-end={markerEnd}
+  fill="none"
   {style}
 />
 
 {#if interactionWidth}
   <path
     d={path}
-    fill="none"
     stroke-opacity={0}
     stroke-width={interactionWidth}
+    fill="none"
     class="svelte-flow__edge-interaction"
   />
 {/if}
@@ -40,7 +40,7 @@
   <EdgeLabelRenderer>
     <div
       class="svelte-flow__edge-label"
-      style:transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
+      style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
       style={labelStyle}
     >
       {label}
@@ -53,4 +53,24 @@
     position: absolute;
     background: white;
   }
+
+  .svelte-flow__edge-path {
+    stroke: var(--edge-color);
+    stroke-width: 1;
+  }
+
+  :global(.selected) .svelte-flow__edge-path {
+    stroke: var(--edge-color-selected);
+  }
+
+  :global(.animated) .svelte-flow__edge-path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  @keyframes dashdraw {
+    from {
+      stroke-dashoffset: 10;
+    }
+  }
 </style>