feat(styles): one stylesheet source for react and svelte (#3350)

* feat(styles): create stylesheets for react and svelte based on one source

* refactor(styling): cleanup

* refactor(postcss): share a config

* refactor(postcss): replace env hack with env file

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

@@ -22,6 +22,7 @@
   export let lineWidth: $$Props['lineWidth'] = 1;
   export let bgColor: $$Props['bgColor'] = undefined;
   export let patternColor: $$Props['patternColor'] = undefined;
+  export let patternClassName: $$Props['patternClassName'] = undefined;
   let className: $$Props['class'] = '';
   export { className as class };
 
@@ -44,6 +45,7 @@
   class={cc(['svelte-flow__background', className])}
   data-testid="svelte-flow__background"
   style:--background-color-props={bgColor}
+  style:--pattern-color-props={patternColor}
 >
   <pattern
     id={patternId}
@@ -55,9 +57,9 @@
     patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
   >
     {#if isDots}
-      <DotPattern color={patternColor} radius={scaledSize / 2} />
+      <DotPattern radius={scaledSize / 2} class={patternClassName} />
     {:else}
-      <LinePattern dimensions={patternDimensions} color={patternColor} {lineWidth} />
+      <LinePattern dimensions={patternDimensions} {variant} {lineWidth} class={patternClassName} />
     {/if}
   </pattern>
   <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
@@ -70,8 +72,5 @@
     height: 100%;
     top: 0;
     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,15 +1,14 @@
 <script lang="ts">
+  import cc from 'classcat';
+
   export let radius = 5;
-  export let color: string | undefined = undefined;
+  let className: string = '';
+  export { className as class };
 </script>
 
-<circle cx={radius} cy={radius} r={radius} style:--pattern-color-props={color} />
-
-<style>
-  circle {
-    fill: var(
-      --pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-color-default))
-    );
-  }
-</style>
+<circle
+  cx={radius}
+  cy={radius}
+  r={radius}
+  class={cc(['svelte-flow__background-pattern', 'dot', className])}
+/>

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

@@ -1,20 +1,16 @@
 <script lang="ts">
+  import cc from 'classcat';
+  import type { BackgroundVariant } from './types';
+
   export let lineWidth = 1;
-  export let color: string | undefined = undefined;
   export let dimensions: [number, number];
+  export let variant: BackgroundVariant | undefined = undefined;
+  let className: string = '';
+  export { className as class };
 </script>
 
 <path
   stroke-width={lineWidth}
   d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
-  style:--pattern-color-props={color}
+  class={cc(['svelte-flow__background-pattern', variant, className])}
 />
-
-<style>
-  path {
-    stroke: var(
-      --pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-color-default))
-    );
-  }
-</style>

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

@@ -7,6 +7,7 @@ export enum BackgroundVariant {
 export type BackgroundProps = {
   bgColor?: string;
   patternColor?: string;
+  patternClassName?: string;
   class?: string;
   gap?: number | [number, number];
   size?: number;

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

@@ -24,59 +24,3 @@
 >
   <slot class="button-svg" />
 </button>
-
-<style>
-  .svelte-flow__controls-button {
-    border: none;
-    background: var(
-      --controls-button-background-color-props,
-      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, 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;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    user-select: none;
-    padding: 5px;
-  }
-
-  .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-default)
-      )
-    );
-    color: var(
-      --controls-button-color-hover-props,
-      var(--controls-button-hover-color, var(--controls-button-hover-color-default))
-    );
-  }
-
-  .svelte-flow__controls-button :global(svg) {
-    width: 100%;
-    max-width: 12px;
-    max-height: 12px;
-  }
-
-  .svelte-flow__controls-button:disabled {
-    pointer-events: none;
-  }
-
-  .svelte-flow__controls-button:disabled :global(svg) {
-    fill-opacity: 0.4;
-  }
-</style>