feat(svelte): cleanup styling, use css variables

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

@@ -2,6 +2,11 @@
   import cc from 'classcat';
 
   let className: string;
+  let bgColor: string | undefined = undefined;
+  let bgColorHover: string | undefined = undefined;
+  let color: string | undefined = undefined;
+  let colorHover: string | undefined = undefined;
+  let borderColor: string | undefined = undefined;
 
   export { className as class };
 </script>
@@ -10,6 +15,11 @@
   type="button"
   on:click
   class={cc(['svelte-flow__controls-button', className])}
+  style:--controls-button-background-color-props={bgColor}
+  style:--controls-button-background-color-hover-props={bgColorHover}
+  style:--controls-button-color-props={color}
+  style:--controls-button-color-hover-props={colorHover}
+  style:--controls-button-border-color-props={borderColor}
   {...$$restProps}
 >
   <slot class="button-svg" />
@@ -18,8 +28,13 @@
 <style>
   .svelte-flow__controls-button {
     border: none;
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
+    background: var(
+      --controls-button-background-color-props,
+      var(--controls-button-background-color)
+    );
+    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));
     box-sizing: content-box;
     display: flex;
     justify-content: center;
@@ -32,7 +47,11 @@
   }
 
   .svelte-flow__controls-button:hover {
-    background: #f4f4f4;
+    background: var(
+      --controls-button-background-color-hover-props,
+      var(--controls-button-background-color-hover)
+    );
+    color: var(--controls-button-color-hover-props, var(--controls-button-hover-color));
   }
 
   .svelte-flow__controls-button :global(svg) {

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

@@ -16,6 +16,11 @@
   export let showZoom: $$Props['showZoom'] = true;
   export let showFitView: $$Props['showFitView'] = true;
   export let showInteractive: $$Props['showInteractive'] = true;
+  export let buttonBgColor: $$Props['buttonBgColor'] = undefined;
+  export let buttonBgColorHover: $$Props['buttonBgColorHover'] = undefined;
+  export let buttonColor: $$Props['buttonColor'] = undefined;
+  export let buttonColorHover: $$Props['buttonColorHover'] = undefined;
+  export let buttonBorderColor: $$Props['buttonColorHover'] = undefined;
 
   const {
     zoomIn,
@@ -29,6 +34,14 @@
     elementsSelectable
   } = useStore();
 
+  const buttonProps = {
+    bgColor: buttonBgColor,
+    bgColorHover: buttonBgColorHover,
+    color: buttonColor,
+    colorHover: buttonColorHover,
+    borderColor: buttonBorderColor
+  };
+
   $: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable;
   $: minZoomReached = $transform[2] <= $minZoom;
   $: maxZoomReached = $transform[2] >= $maxZoom;
@@ -62,40 +75,41 @@
       title="zoom in"
       aria-label="zoom in"
       disabled={maxZoomReached}
+      {...buttonProps}
     >
       <PlusIcon />
     </ControlButton>
-    <svelte:component
-      this={ControlButton}
+    <ControlButton
       on:click={onZoomOutHandler}
       class="svelte-flow__controls-zoomout"
       title="zoom out"
       aria-label="zoom out"
       disabled={minZoomReached}
+      {...buttonProps}
     >
       <MinusIcon />
-    </svelte:component>
+    </ControlButton>
   {/if}
   {#if showFitView}
-    <svelte:component
-      this={ControlButton}
+    <ControlButton
       class="svelte-flow__controls-fitview"
       on:click={onFitViewHandler}
       title="fit view"
       aria-label="fit view"
+      {...buttonProps}
     >
       <FitViewIcon />
-    </svelte:component>
+    </ControlButton>
   {/if}
   {#if showInteractive}
-    <svelte:component
-      this={ControlButton}
+    <ControlButton
       class="svelte-flow__controls-interactive"
       on:click={onToggleInteractivity}
       title="toggle interactivity"
       aria-label="toggle interactivity"
+      {...buttonProps}
     >
       {#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}
-    </svelte:component>
+    </ControlButton>
   {/if}
 </Panel>

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

@@ -5,4 +5,8 @@ export type ControlsProps = {
   showZoom?: boolean;
   showFitView?: boolean;
   showInteractive?: boolean;
+  buttonBgColor?: string;
+  buttonBgColorHover?: string;
+  buttonColor?: string;
+  buttonColorHover?: string;
 };