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>

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -32,7 +32,7 @@
 
   .svelte-flow__edge-path,
   .svelte-flow__connection-path {
-    stroke: #b1b1b7;
+    stroke: var(--connection-line-color);
     stroke-width: 1;
     fill: none;
   }

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -81,25 +81,4 @@
     pointer-events: visibleStroke;
     cursor: pointer;
   }
-
-  .svelte-flow__edge :global(.svelte-flow__edge-path) {
-    stroke: #ccc;
-    stroke-width: 1;
-    fill: none;
-  }
-
-  .selected :global(.svelte-flow__edge-path) {
-    stroke: #555;
-  }
-
-  .animated :global(.svelte-flow__edge-path) {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  @keyframes dashdraw {
-    from {
-      stroke-dashoffset: 10;
-    }
-  }
 </style>

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -79,7 +79,7 @@
   data-handleid={handleId}
   data-nodeid={nodeId}
   data-handlepos={position}
-  data-id={`${nodeId}-${id}-${type}`}
+  data-id="{nodeId}-{id}-{type}"
   class={cc([
     'svelte-flow__handle',
     `svelte-flow__handle-${position}`,
@@ -108,8 +108,8 @@
     min-height: 5px;
     width: 6px;
     height: 6px;
-    background: #1a192b;
-    border: 1px solid white;
+    background: var(--handle-background-color);
+    border: 1px solid var(--handle-border-color);
     border-radius: 100%;
   }
 

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -15,7 +15,7 @@
 {#if selectedNodes && $selectionRectMode === 'nodes'}
   <div
     class="selection-wrapper nopan"
-    style={`width: ${rect.width}px; height: ${rect.height}px; transform: translate(${rect.x}px, ${rect.y}px)`}
+    style="width: {rect.width}px; height: {rect.height}px; transform: translate({rect.x}px, {rect.y}px)"
     use:drag={{ disabled: false, store }}
   />
   <Selection

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -91,7 +91,7 @@
   class:draggable
   class:connectable
   class:parent={isParent}
-  style:transform={`translate(${positionOrigin?.x ?? 0}px, ${positionOrigin?.y ?? 0}px)`}
+  style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
   {style}
   on:click={onSelectNodeHandler}
   on:mouseenter={() => dispatchEvent('node:mouseenter')}
@@ -116,12 +116,12 @@
 <style>
   .svelte-flow__node {
     border-radius: 3px;
-    color: #222;
+    color: var(--node-color);
     text-align: center;
     border-width: 1px;
     border-style: solid;
-    border-color: #1a192b;
-    background-color: white;
+    border-color: var(--node-border-color);
+    background-color: var(--node-background-color);
     position: absolute;
     pointer-events: none;
     user-select: none;
@@ -134,7 +134,7 @@
 
   .selected {
     outline: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
+    box-shadow: 0 0 0 0.5px var(--node-shadow-color-selected);
   }
 
   .dragging {

packages/svelte/src/lib/components/Selection/Selection.svelte

@@ -9,7 +9,7 @@
 {#if isVisible}
   <div
     class="svelte-flow__selection"
-    style={`width: ${width}px; height: ${height}px; transform: translate(${x}px, ${y}px)`}
+    style="width: {width}px; height: {height}px; transform: translate({x}px, {y}px)"
   />
 {/if}