feat(svelte): cleanup styling, use css variables

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -130,8 +130,8 @@ function MiniMap({
 
   const onSvgClick = onClick
     ? (event: MouseEvent) => {
-        const rfCoord = minimapInstance.current?.pointer(event);
+        const [x, y] = minimapInstance.current?.pointer(event) || [0, 0];
-        onClick(event, { x: rfCoord?.[0] ?? 0, y: rfCoord?.[1] ?? 0 });
+        onClick(event, { x, y });
       }
     : undefined;
 

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;
+    background: var(--handle-background-color);
-    border: 1px solid white;
+    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;
+    border-color: var(--node-border-color);
-    background-color: white;
+    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}
 

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

@@ -167,6 +167,8 @@
     overflow: hidden;
     position: relative;
     z-index: 0;
+
+    background-color: var(--background-color);
   }
 
   .svelte-flow :global(.svelte-flow__node-default),
@@ -182,4 +184,33 @@
     pointer-events: none;
     user-select: none;
   }
+
+  :root {
+    --background-color: #fff;
+    --background-pattern-color: #eee;
+
+    --minimap-background-color: #fff;
+    --minimap-mask-color: rgb(240, 240, 240, 0.6);
+    --minimap-mask-stroke-color: none;
+    --minimap-mask-stroke-width: 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;
+
+    --edge-color: #cfcfcf;
+    --edge-color-selected: #555;
+
+    --node-color: inherit;
+    --node-border-color: #1a192b;
+    --node-background-color: #fff;
+    --node-shadow-color-selected: #1a192b;
+
+    --handle-background-color: #1a192b;
+    --handle-border-color: #fff;
+
+    --connection-line-color: #b1b1b7;
+  }
 </style>

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 bgColor: $$Props['bgColor'] = undefined;
-  export let style: $$Props['style'] = '';
+  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;
 };

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;
+    background: var(
-    border-bottom: 1px solid #eee;
+      --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
+    <ControlButton
-      this={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
+    <ControlButton
-      this={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
+    <ControlButton
-      this={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;
 };

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

@@ -17,24 +17,23 @@
 
   type $$Props = MiniMapProps;
 
-  let position: $$Props['position'] = 'bottom-right';
+  export let position: $$Props['position'] = 'bottom-right';
-  let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
+  export let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
-  let style: $$Props['style'] = '';
+  export let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
-  let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
+  export let nodeColor: $$Props['nodeColor'] = '#e2e2e2';
-  let nodeColor: $$Props['nodeColor'] = '#e2e2e2';
+  export let nodeClassName: $$Props['nodeClassName'] = '';
-  let nodeClassName: $$Props['nodeClassName'] = '';
+  export let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
-  let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
+  export let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
-  let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
+  export let bgColor: $$Props['bgColor'] = undefined;
-  let bgColor: $$Props['bgColor'] = '#fff';
+  export let maskColor: $$Props['maskColor'] = undefined;
-  let maskColor: $$Props['maskColor'] = 'rgb(240, 240, 240, 0.6)';
+  export let maskStrokeColor: $$Props['maskStrokeColor'] = undefined;
-  let maskStrokeColor: $$Props['maskStrokeColor'] = 'none';
+  export let maskStrokeWidth: $$Props['maskStrokeWidth'] = undefined;
-  let maskStrokeWidth: $$Props['maskStrokeWidth'] = 1;
+  export let width: $$Props['width'] = undefined;
-  let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
-  let height: $$Props['height'] = undefined;
+  export let pannable: $$Props['pannable'] = true;
-  let pannable: $$Props['pannable'] = true;
+  export let zoomable: $$Props['zoomable'] = true;
-  let zoomable: $$Props['zoomable'] = true;
+  export let inversePan: $$Props['inversePan'] = undefined;
-  let inversePan: $$Props['inversePan'] = undefined;
+  export let zoomStep: $$Props['zoomStep'] = undefined;
-  let zoomStep: $$Props['zoomStep'] = undefined;
 
   let className: $$Props['class'] = '';
   export { className as class };
@@ -84,16 +83,19 @@
 <Panel
   {position}
   class={cc(['svelte-flow__minimap', className])}
-  style={`background-color: ${bgColor}; ${style}`}
   data-testid="svelte-flow__minimap"
 >
   {#if $panZoom}
     <svg
       width={elementWidth}
       height={elementHeight}
-      viewBox={`${x} ${y} ${viewboxWidth} ${viewboxHeight}`}
+      viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
       role="img"
       aria-labelledby={labelledBy}
+      style:--minimap-background-color-props={bgColor}
+      style:--minimap-mask-color-props={maskColor}
+      style:--minimap-mask-stroke-color-props={maskStrokeColor}
+      style:--minimap-mask-stroke-width-props={maskStrokeWidth}
       use:interactive={{
         panZoom: $panZoom,
         transform,
@@ -123,22 +125,29 @@
             strokeWidth={nodeStrokeWidth}
             {shapeRendering}
             class={nodeClassNameFunc(node)}
-            style={{}}
           />
         {/if}
       {/each}
       <path
         class="svelte-flow__minimap-mask"
-        d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${
+        d="M{x - offset},{y - offset}h{viewboxWidth + offset * 2}v{viewboxHeight +
-          viewboxHeight + offset * 2
+          offset * 2}h{-viewboxWidth - offset * 2}z
-        }h${-viewboxWidth - offset * 2}z
+      M{viewBB.x},{viewBB.y}h{viewBB.width}v{viewBB.height}h{-viewBB.width}z"
-      M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
-        fill={maskColor}
         fill-rule="evenodd"
-        stroke={maskStrokeColor}
-        stroke-width={maskStrokeWidth}
         pointer-events="none"
       />
     </svg>
   {/if}
 </Panel>
+
+<style>
+  svg {
+    background-color: var(--minimap-background-color-props, var(--minimap-background-color));
+  }
+
+  .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));
+  }
+</style>

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

@@ -10,12 +10,8 @@
   export let shapeRendering: string;
   export let strokeColor: string;
   export let strokeWidth: number = 2;
-  export let style: Record<string, string>;
   let className: string = '';
   export { className as class };
-
-  const { background, backgroundColor } = style || {};
-  const fill = (color || background || backgroundColor) as string;
 </script>
 
 <rect
@@ -26,7 +22,7 @@
   ry={borderRadius}
   {width}
   {height}
-  {fill}
+  fill={color}
   stroke={strokeColor}
   stroke-width={strokeWidth}
   shape-rendering={shapeRendering}

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

@@ -16,7 +16,6 @@ export type MiniMapProps = {
   maskStrokeWidth?: number;
   position?: PanelPosition;
   class?: string;
-  style?: string;
   ariaLabel?: string | null;
   width?: number;
   height?: number;

packages/svelte/src/routes/overview/+page.svelte

@@ -90,7 +90,8 @@
       id: '2-4',
       type: 'custom',
       source: '2',
-      target: '4'
+      target: '4',
+      animated: true
     }
   ]);
 
@@ -151,4 +152,15 @@
     background: #ff5050;
     color: white;
   }
+
+  :root {
+    --background-color: #ffffdd;
+    --background-pattern-color: #5050ff;
+
+    --minimap-background-color: #f5f6f7;
+    --minimap-mask-color: rgb(255, 255, 240, 0.6);
+
+    --controls-button-background-color: #ddd;
+    --controls-button-background-color-hover: #ccc;
+  }
 </style>