fix react flow background visibility

Author: haschek

src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -459,8 +459,12 @@ const ReactFlowExampleV9: FC<ReactFlowExtendedProps> = (args) => {
         [reactflowInstance]
     );
 
+    const { style, ...otherProps } = args;
+    const { height, width, ...otherStyles } = style ?? {};
+
     const reactFlowExtendedProps = {
-        ...args,
+        ...otherProps,
+        style: otherStyles,
         defaultZoom: 1,
         elements,
         onLoad,
@@ -470,10 +474,12 @@ const ReactFlowExampleV9: FC<ReactFlowExtendedProps> = (args) => {
 
     return (
         <ApplicationContainer monitorDropzonesFor={args.dropzoneFor} style={{ background: "white" }}>
-            <ReactFlowExtended {...reactFlowExtendedProps}>
-                <MiniMap flowInstance={reactflowInstance} enableNavigation={true} />
-                <BackgroundV9 variant={BackgroundVariantV9.Lines} gap={16} />
-            </ReactFlowExtended>
+            <div style={{ height, width }}>
+                <ReactFlowExtended {...reactFlowExtendedProps}>
+                    <MiniMap flowInstance={reactflowInstance} enableNavigation={true} />
+                    <BackgroundV9 variant={BackgroundVariantV9.Dots} gap={16} />
+                </ReactFlowExtended>
+            </div>
             {edgeTools}
         </ApplicationContainer>
     );
@@ -499,7 +505,7 @@ const ReactFlowExampleV12: FC<ReactFlowExtendedProps> = (args) => {
             <div style={{ height, width }}>
                 <ReactFlowExtended {...reactFlowExtendedProps}>
                     <MiniMapV12 enableNavigation />
-                    <BackgroundV12 variant={BackgroundVariantV12.Lines} gap={16} />
+                    <BackgroundV12 variant={BackgroundVariantV12.Dots} gap={16} />
                 </ReactFlowExtended>
             </div>
         </ApplicationContainer>

src/extensions/react-flow/_react-flow_v12.scss

@@ -7,6 +7,7 @@
 
 .react-flow {
     direction: ltr;
+    z-index: 0;
 }
 
 .react-flow__pane {
@@ -178,22 +179,31 @@ svg.react-flow__connectionline {
     pointer-events: none;
     background-color: $reactflow-background-color;
     border: solid 1px $eccgui-color-separation-divider;
+
+    pattern path {
+        opacity: $eccgui-opacity-ghostly;
+        stroke: #{eccgui-color-var("identity", "text", "300")};
+    }
 }
 
-.react-flow__background-pattern {
+.react-flow__background-pattern,
+.react-flow__background pattern path:first-child {
     opacity: $eccgui-opacity-ghostly;
+    stroke: #{eccgui-color-var("identity", "text", "500")};
 }
 
-.react-flow__background-pattern.dots {
-    fill: $eccgui-color-separation-divider;
+.react-flow__background-pattern.dots,
+.react-flow__background pattern circle:first-child {
+    opacity: $eccgui-opacity-muted;
+    fill: #{eccgui-color-var("identity", "text", "700")};
 }
 
-.react-flow__background-pattern.lines {
-    stroke: $eccgui-color-separation-divider;
+.react-flow__background-pattern.cross {
+    stroke: #{eccgui-color-var("identity", "text", "300")};
 }
 
-.react-flow__background-pattern.cross {
-    stroke: $eccgui-color-separation-divider;
+.react-flow__background-pattern.lines {
+    stroke: #{eccgui-color-var("identity", "text", "300")};
 }
 
 .react-flow__attribution {