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/react/src/additional-components/Background/Background.tsx

@@ -1,4 +1,4 @@
-import { memo, useRef } from 'react';
+import { CSSProperties, memo, useRef } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 
@@ -6,12 +6,7 @@ import { useStore } from '../../hooks/useStore';
 import { type ReactFlowState } from '../../types';
 import { BackgroundProps, BackgroundVariant } from './types';
 import { DotPattern, LinePattern } from './Patterns';
-
-const defaultColor = {
-  [BackgroundVariant.Dots]: '#91919a',
-  [BackgroundVariant.Lines]: '#eee',
-  [BackgroundVariant.Cross]: '#e2e2e2',
-};
+import { containerStyle } from '../../styles/utils';
 
 const defaultSize = {
   [BackgroundVariant.Dots]: 1,
@@ -31,12 +26,13 @@ function Background({
   lineWidth = 1,
   offset = 2,
   color,
+  bgColor,
   style,
   className,
+  patternClassName,
 }: BackgroundProps) {
   const ref = useRef<SVGSVGElement>(null);
   const { transform, patternId } = useStore(selector, shallow);
-  const patternColor = color || defaultColor[variant];
   const patternSize = size || defaultSize[variant];
   const isDots = variant === BackgroundVariant.Dots;
   const isCross = variant === BackgroundVariant.Cross;
@@ -53,14 +49,14 @@ function Background({
   return (
     <svg
       className={cc(['react-flow__background', className])}
-      style={{
-        ...style,
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        top: 0,
-        left: 0,
-      }}
+      style={
+        {
+          ...style,
+          ...containerStyle,
+          '--background-color-props': bgColor,
+          '--background-pattern-color-props': color,
+        } as CSSProperties
+      }
       ref={ref}
       data-testid="rf__background"
     >
@@ -74,9 +70,14 @@ function Background({
         patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
       >
         {isDots ? (
-          <DotPattern color={patternColor} radius={scaledSize / offset} />
+          <DotPattern radius={scaledSize / offset} className={patternClassName} />
         ) : (
-          <LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
+          <LinePattern
+            dimensions={patternDimensions}
+            lineWidth={lineWidth}
+            variant={variant}
+            className={patternClassName}
+          />
         )}
       </pattern>
       <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId + id})`} />

packages/react/src/additional-components/Background/Patterns.tsx

@@ -1,30 +1,31 @@
+import cc from 'classcat';
+
+import { BackgroundVariant } from './types';
+
 type LinePatternProps = {
   dimensions: [number, number];
+  variant: BackgroundVariant;
   lineWidth?: number;
-  color: string;
+  className?: string;
 };
 
-export function LinePattern({
-  color,
-  dimensions,
-  lineWidth,
-}: LinePatternProps) {
+export function LinePattern({ dimensions, lineWidth, variant, className }: LinePatternProps) {
   return (
     <path
-      stroke={color}
       strokeWidth={lineWidth}
-      d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${
-        dimensions[0]
-      }`}
+      d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
+      className={cc(['react-flow__background-pattern', variant, className])}
     />
   );
 }
 
 type DotPatternProps = {
   radius: number;
-  color: string;
+  className?: string;
 };
 
-export function DotPattern({ color, radius }: DotPatternProps) {
-  return <circle cx={radius} cy={radius} r={radius} fill={color} />;
+export function DotPattern({ radius, className }: DotPatternProps) {
+  return (
+    <circle cx={radius} cy={radius} r={radius} className={cc(['react-flow__background-pattern', 'dot', className])} />
+  );
 }

packages/react/src/additional-components/Background/types.ts

@@ -7,9 +7,11 @@ export enum BackgroundVariant {
 }
 
 export type BackgroundProps = {
-  id?: string
+  id?: string;
   color?: string;
+  bgColor?: string;
   className?: string;
+  patternClassName?: string;
   gap?: number | [number, number];
   size?: number;
   offset?: number;