chore(svelte): use correct css var names for defaults

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",

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

@@ -55,12 +55,12 @@
   }
 
   .svelte-flow__edge-path {
-    stroke: var(--edge-color);
+    stroke: var(--edge-color, var(--edge-color-default));
     stroke-width: 1;
   }
 
   :global(.selected) .svelte-flow__edge-path {
-    stroke: var(--edge-color-selected);
+    stroke: var(--edge-color-selected, var(--edge-color-selected-default));
   }
 
   :global(.animated) .svelte-flow__edge-path {

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

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

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

@@ -108,8 +108,8 @@
     min-height: 5px;
     width: 6px;
     height: 6px;
-    background: var(--handle-background-color);
-    border: 1px solid var(--handle-border-color);
+    background: var(--handle-background-color, var(--handle-background-color-default));
+    border: 1px solid var(--handle-border-color, var(--handle-border-color-default));
     border-radius: 100%;
   }
 

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

@@ -86,7 +86,6 @@
   bind:this={nodeRef}
   data-id={id}
   class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])}
-  class:initializing={!width && !height}
   class:dragging
   class:selected
   class:draggable
@@ -122,12 +121,12 @@
 <style>
   .svelte-flow__node {
     border-radius: 3px;
-    color: var(--node-color);
+    color: var(--node-color, var(--node-color-default));
     text-align: center;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--node-border-color);
-    background-color: var(--node-background-color);
+    border-color: var(--node-border-color, var(--node-border-color-default));
+    background-color: var(--node-background-color, var(--node-background-color-default));
     position: absolute;
     pointer-events: none;
     user-select: none;
@@ -140,14 +139,11 @@
 
   .selected {
     outline: none;
-    box-shadow: 0 0 0 0.5px var(--node-shadow-color-selected);
+    box-shadow: 0 0 0 0.5px
+      var(--node-shadow-color-selected, var(--node-shadow-color-selected-default));
   }
 
   .dragging {
     cursor: grabbing;
   }
-
-  .initializing {
-    visibility: hidden;
-  }
 </style>

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -170,7 +170,7 @@
     position: relative;
     z-index: 0;
 
-    background-color: var(--background-color);
+    background-color: var(--background-color, var(--background-color-default));
   }
 
   .svelte-flow :global(.svelte-flow__node-default),
@@ -188,31 +188,31 @@
   }
 
   :root {
-    --background-color: #fff;
-    --background-pattern-color: #eee;
+    --background-color-default: #fff;
+    --background-pattern-color-default: #eee;
 
-    --minimap-background-color: #fff;
-    --minimap-mask-color: rgb(240, 240, 240, 0.6);
-    --minimap-mask-stroke-color: none;
-    --minimap-mask-stroke-width: 1;
+    --minimap-background-color-default: #fff;
+    --minimap-mask-color-default: rgb(240, 240, 240, 0.6);
+    --minimap-mask-stroke-color-default: none;
+    --minimap-mask-stroke-width-default: 1;
 
-    --controls-button-background-color: #fefefe;
-    --controls-button-background-color-hover: #f4f4f4;
-    --controls-button-color: inherit;
-    --controls-button-color-hover: inherit;
-    --controls-button-border-color: #eee;
+    --controls-button-background-color-default: #fefefe;
+    --controls-button-background-color-hover-default: #f4f4f4;
+    --controls-button-color-default: inherit;
+    --controls-button-color-hover-default: inherit;
+    --controls-button-border-color-default: #eee;
 
-    --edge-color: #cfcfcf;
-    --edge-color-selected: #555;
+    --edge-color-default: #cfcfcf;
+    --edge-color-selected-default: #555;
 
-    --node-color: inherit;
-    --node-border-color: #1a192b;
-    --node-background-color: #fff;
-    --node-shadow-color-selected: #1a192b;
+    --node-color-default: inherit;
+    --node-border-color-default: #1a192b;
+    --node-background-color-default: #fff;
+    --node-shadow-color-selected-default: #1a192b;
 
-    --handle-background-color: #1a192b;
-    --handle-border-color: #fff;
+    --handle-background-color-default: #1a192b;
+    --handle-border-color-default: #fff;
 
-    --connection-line-color: #b1b1b7;
+    --connection-line-color-default: #b1b1b7;
   }
 </style>

packages/svelte/src/lib/plugins/Background/DotPattern.svelte

@@ -7,6 +7,10 @@
 
 <style>
   circle {
-    fill: var(--pattern-color-props, var(--background-pattern-color));
+    fill: var(
+      --pattern-color-props,
+      var(--background-pattern-color),
+      var(--background-pattern-color-default)
+    );
   }
 </style>

packages/svelte/src/lib/plugins/Background/LinePattern.svelte

@@ -12,6 +12,10 @@
 
 <style>
   path {
-    stroke: var(--pattern-color-props, var(--background-pattern-color));
+    stroke: var(
+      --pattern-color-props,
+      var(--background-pattern-color),
+      var(--background-pattern-color-default)
+    );
   }
 </style>

packages/svelte/src/lib/plugins/Controls/ControlButton.svelte

@@ -30,11 +30,20 @@
     border: none;
     background: var(
       --controls-button-background-color-props,
-      var(--controls-button-background-color)
+      var(--controls-button-background-color),
+      var(--controls-button-background-color-default)
     );
     border-bottom: 1px solid
-      var(--controls-button-border-color-props, var(--controls-button-border-color));
-    color: var(--controls-button-color-props, var(--controls-button-color));
+      var(
+        --controls-button-border-color-props,
+        var(--controls-button-border-color),
+        var(--controls-button-border-color-default)
+      );
+    color: var(
+      --controls-button-color-props,
+      var(--controls-button-color),
+      var(--controls-button-color-default)
+    );
     box-sizing: content-box;
     display: flex;
     justify-content: center;
@@ -49,9 +58,14 @@
   .svelte-flow__controls-button:hover {
     background: var(
       --controls-button-background-color-hover-props,
-      var(--controls-button-background-color-hover)
+      var(--controls-button-background-color-hover),
+      var(--controls-button-background-color-hover-default)
+    );
+    color: var(
+      --controls-button-color-hover-props,
+      var(--controls-button-hover-color),
+      var(--controls-button-hover-color-default)
     );
-    color: var(--controls-button-color-hover-props, var(--controls-button-hover-color));
   }
 
   .svelte-flow__controls-button :global(svg) {

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -142,12 +142,28 @@
 
 <style>
   svg {
-    background-color: var(--minimap-background-color-props, var(--minimap-background-color));
+    background-color: var(
+      --minimap-background-color-props,
+      var(--minimap-background-color),
+      var(--minimap-background-color-default)
+    );
   }
 
   .svelte-flow__minimap-mask {
-    fill: var(--minimap-mask-color-props, var(--minimap-mask-color));
-    stroke: var(--minimap-mask-stroke-color-props, var(--minimap-mask-stroke-color));
-    stroke-width: var(--minimap-mask-stroke-width-props, var(--minimap-mask-stroke-width));
+    fill: var(
+      --minimap-mask-color-props,
+      var(--minimap-mask-color),
+      var(--minimap-mask-color-default)
+    );
+    stroke: var(
+      --minimap-mask-stroke-color-props,
+      var(--minimap-mask-stroke-color),
+      var(--minimap-mask-stroke-color-default)
+    );
+    stroke-width: var(
+      --minimap-mask-stroke-width-props,
+      var(--minimap-mask-stroke-width),
+      var(--minimap-mask-stroke-width-default)
+    );
   }
 </style>