feat(svelte): cleanup styling, use css variables

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

@@ -1,10 +1,4 @@
 <script labg="ts" context="module">
-  const defaultColor = {
-    [BackgroundVariant.Dots]: '#91919a',
-    [BackgroundVariant.Lines]: '#eee',
-    [BackgroundVariant.Cross]: '#e2e2e2'
-  };
-
   const defaultSize = {
     [BackgroundVariant.Dots]: 1,
     [BackgroundVariant.Lines]: 1,
@@ -26,13 +20,12 @@
   export let gap: $$Props['gap'] = 20;
   export let size: $$Props['size'] = 1;
   export let lineWidth: $$Props['lineWidth'] = 1;
-  export let color: $$Props['color'] = '#ccc';
-  export let style: $$Props['style'] = '';
+  export let bgColor: $$Props['bgColor'] = undefined;
+  export let patternColor: $$Props['patternColor'] = undefined;
   let className: $$Props['class'] = '';
   export { className as class };
 
   const { transform, flowId } = useStore();
-  const patternColor = color || defaultColor[variant!];
   const patternSize = size || defaultSize[variant!];
   const isDots = variant === BackgroundVariant.Dots;
   const isCross = variant === BackgroundVariant.Cross;
@@ -49,8 +42,8 @@
 
 <svg
   class={cc(['svelte-flow__background', className])}
-  {style}
   data-testid="svelte-flow__background"
+  style:--background-color-props={bgColor}
 >
   <pattern
     id={patternId}
@@ -79,5 +72,6 @@
     left: 0;
     pointer-events: none;
     z-index: -1;
+    background-color: var(--background-color-props, 'transparent');
   }
 </style>

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

@@ -1,6 +1,12 @@
 <script lang="ts">
   export let radius = 5;
-  export let color = '#000';
+  export let color: string | undefined = undefined;
 </script>
 
-<circle cx={radius} cy={radius} r={radius} fill={color} />
+<circle cx={radius} cy={radius} r={radius} style:--pattern-color-props={color} />
+
+<style>
+  circle {
+    fill: var(--pattern-color-props, var(--background-pattern-color));
+  }
+</style>

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

@@ -1,11 +1,17 @@
 <script lang="ts">
   export let lineWidth = 1;
-  export let color = '#777';
+  export let color: string | undefined = undefined;
   export let dimensions: [number, number];
 </script>
 
 <path
-  stroke={color}
   stroke-width={lineWidth}
   d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
+  style:--pattern-color-props={color}
 />
+
+<style>
+  path {
+    stroke: var(--pattern-color-props, var(--background-pattern-color));
+  }
+</style>

packages/svelte/src/lib/plugins/Background/types.ts

@@ -5,11 +5,11 @@ export enum BackgroundVariant {
 }
 
 export type BackgroundProps = {
-  color?: string;
+  bgColor?: string;
+  patternColor?: string;
   class?: string;
   gap?: number | [number, number];
   size?: number;
   lineWidth?: number;
   variant?: BackgroundVariant;
-  style?: string;
 };