@eccenca/gui-elements 24.4.1 → 25.0.0-rc.1

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

@@ -1,17 +1,21 @@
-import React from "react";
-import { default as ReactFlowOriginal, ReactFlowProps as ReactFlowOriginalProps } from "react-flow-renderer";
+import React, { ReactElement, Ref } from "react";
+import { KeyCode as KeyCodeV9 } from "react-flow-renderer";
+import { KeyCode as KeyCodeV12 } from "@xyflow/react";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
+import { ReactFlowVersions } from "../../../extensions/react-flow/versionsupport";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
-import { useReactFlowScrollOnDrag } from "../extensions/scrollOnDragHook";
+import { useReactFlowScrollOnDragV9 } from "../extensions/scrollOnDragHook";
 
 import * as graphConfig from "./../configuration/graph";
 import * as linkingConfig from "./../configuration/linking";
 import * as unspecifiedConfig from "./../configuration/unspecified";
 import * as workflowConfig from "./../configuration/workflow";
+import { ReactFlowV9Container, ReactFlowV9ContainerProps } from "./ReactFlowV9";
+import { ReactFlowV12Container, ReactFlowV12ContainerProps } from "./ReactFlowV12";
 
-export interface ReactFlowProps extends ReactFlowOriginalProps {
+export interface ReactFlowExtendedExtraProps {
     /**
      * Load `ReactFlow` component with pre-configured values for `nodeTypes` and `edgeTypes`
      */
@@ -21,7 +25,9 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
      * Types data transfers that can be dragged in and dropped on the canvas.
      */
     dropzoneFor?: string[];
+}
 
+export interface ReactFlowExtendedScrollProps {
     /** If defined the canvas scrolls on all drag operations (node, selection, edge connect)
      * when the mouse pointer comes near the canvas borders or goes beyond them.
      * The `id` property of the ReactFlow component must be set in order for this to work.
@@ -38,76 +44,174 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
     };
 }
 
+interface ReactFlowExtendedVersion9SupportProps {
+    /**
+     * Set version of `ReactFlow` that is used internally.
+     * If not set then v9 is used.
+     */
+    flowVersion?: ReactFlowVersions.V9;
+}
+
+interface ReactFlowExtendedVersion12SupportProps {
+    /**
+     * Set version of `ReactFlow` that is used internally.
+     */
+    flowVersion: ReactFlowVersions.V12;
+    /**
+     * Extra scroll on drag (pan on drag) support from our side should not be necessary anymore with v12.
+     */
+    scrollOnDrag?: never;
+}
+
+export type ReactFlowExtendedPropsV9 = ReactFlowExtendedVersion9SupportProps &
+    ReactFlowV9ContainerProps &
+    ReactFlowExtendedExtraProps &
+    ReactFlowExtendedScrollProps;
+export type ReactFlowExtendedPropsV12 = ReactFlowExtendedVersion12SupportProps &
+    ReactFlowV12ContainerProps &
+    ReactFlowExtendedExtraProps;
+
+export type ReactFlowExtendedProps = ReactFlowExtendedPropsV9 | ReactFlowExtendedPropsV12;
+
 /**
  * `ReactFlow` container extension that includes pre-configured nodes and edges for
  * Corporate Memory tools.
+ *
+ * @param T The concrete type of the corresponding version, i.e. either one of ReactFlowExtendedPropsV9 or ReactFlowExtendedPropsV12
  */
-export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>(
-    ({ configuration = "unspecified", scrollOnDrag, dropzoneFor, children, className, ...originalProps }, outerRef) => {
-        const innerRef = React.useRef<HTMLDivElement>(null);
-        React.useImperativeHandle(outerRef, () => innerRef.current!, []);
-
-        React.useEffect(() => {
-            const reactflowContainer = innerRef?.current;
-
-            if (reactflowContainer && dropzoneFor) {
-                const addDragover = (event: DragEvent) => {
-                    reactflowContainer.classList.add(`${eccgui}-graphviz__canvas--draghover`);
-                    event.preventDefault();
-                };
-
-                const removeDragover = (event: DragEvent) => {
-                    if (reactflowContainer === event.target) {
-                        reactflowContainer.classList.remove(`${eccgui}-graphviz__canvas--draghover`);
-                    }
-                };
-
-                reactflowContainer.addEventListener("dragover", addDragover);
-                reactflowContainer.addEventListener("dragleave", removeDragover);
-                reactflowContainer.addEventListener("drop", removeDragover);
-                return () => {
-                    reactflowContainer.removeEventListener("dragover", addDragover);
-                    reactflowContainer.removeEventListener("dragleave", removeDragover);
-                    reactflowContainer.removeEventListener("drop", removeDragover);
-                };
-            }
-            return;
-        }, [innerRef, dropzoneFor]);
-
-        /** If the hot keys should be disabled. By default, they are always disabled. */
-        const { hotKeysDisabled } = React.useContext(ReactFlowHotkeyContext);
-
-        const scrollOnDragFunctions = useReactFlowScrollOnDrag({
-            reactFlowProps: originalProps,
-            scrollOnDrag,
-        });
-
-        const { selectionKeyCode, multiSelectionKeyCode, deleteKeyCode, zoomActivationKeyCode } = originalProps;
-
-        const configReactFlow = {
-            unspecified: unspecifiedConfig,
-            graph: graphConfig,
-            workflow: workflowConfig,
-            linking: linkingConfig,
-        };
-
-        return (
-            <ReactFlowOriginal
-                ref={innerRef}
-                className={`${eccgui}-graphviz__canvas` + className ? ` ${className}` : ""}
-                nodeTypes={configReactFlow[configuration].nodeTypes}
-                edgeTypes={configReactFlow[configuration].edgeTypes}
-                {...originalProps}
-                {...scrollOnDragFunctions}
-                data-dropzone-for={dropzoneFor ? dropzoneFor.join(" ") : undefined}
-                selectionKeyCode={hotKeysDisabled ? null : (selectionKeyCode as any)}
-                deleteKeyCode={hotKeysDisabled ? null : (deleteKeyCode as any)}
-                multiSelectionKeyCode={hotKeysDisabled ? null : (multiSelectionKeyCode as any)}
-                zoomActivationKeyCode={hotKeysDisabled ? null : (zoomActivationKeyCode as any)}
-            >
-                {children}
-                <ReactFlowMarkers />
-            </ReactFlowOriginal>
-        );
+const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>(
+    {
+        configuration = "unspecified",
+        flowVersion = ReactFlowVersions.V9,
+        dropzoneFor,
+        scrollOnDrag,
+        children,
+        className,
+        selectionKeyCode,
+        multiSelectionKeyCode,
+        deleteKeyCode,
+        zoomActivationKeyCode,
+        ...originalProps
+    }: T,
+    outerRef: Ref<HTMLDivElement>
+) => {
+    const innerRef = React.useRef<HTMLDivElement>(null);
+    React.useImperativeHandle(outerRef, () => innerRef.current!, []);
+
+    React.useEffect(() => {
+        const reactflowContainer = innerRef?.current;
+
+        if (reactflowContainer && dropzoneFor) {
+            const addDragover = (event: DragEvent) => {
+                reactflowContainer.classList.add(`${eccgui}-graphviz__canvas--draghover`);
+                event.preventDefault();
+            };
+
+            const removeDragover = (event: DragEvent) => {
+                if (reactflowContainer === event.target) {
+                    reactflowContainer.classList.remove(`${eccgui}-graphviz__canvas--draghover`);
+                }
+            };
+
+            reactflowContainer.addEventListener("dragover", addDragover);
+            reactflowContainer.addEventListener("dragleave", removeDragover);
+            reactflowContainer.addEventListener("drop", removeDragover);
+            return () => {
+                reactflowContainer.removeEventListener("dragover", addDragover);
+                reactflowContainer.removeEventListener("dragleave", removeDragover);
+                reactflowContainer.removeEventListener("drop", removeDragover);
+            };
+        }
+        return;
+    }, [innerRef, dropzoneFor]);
+
+    /** If the hot keys should be disabled. By default, they are always disabled. */
+    const { hotKeysDisabled } = React.useContext(ReactFlowHotkeyContext);
+
+    const configReactFlow = {
+        unspecified: unspecifiedConfig,
+        graph: graphConfig,
+        workflow: workflowConfig,
+        linking: linkingConfig,
+    };
+
+    const sharedProperties = {
+        className:
+            `${eccgui}-graphviz__canvas` +
+            ` ${eccgui}-configuration--colors__react-flow-${configuration}` +
+            (className ? ` ${className}` : ""),
+        nodeTypes: configReactFlow[configuration].nodeTypes,
+        edgeTypes: configReactFlow[configuration].edgeTypes,
+        "data-dropzone-for": dropzoneFor ? dropzoneFor.join(" ") : undefined,
+    };
+
+    let keyCodeConfig = {};
+    switch (flowVersion) {
+        case "v9":
+            keyCodeConfig = {
+                selectionKeyCode: hotKeysDisabled ? undefined : (selectionKeyCode as KeyCodeV9),
+                deleteKeyCode: hotKeysDisabled ? undefined : (deleteKeyCode as KeyCodeV9),
+                multiSelectionKeyCode: hotKeysDisabled ? undefined : (multiSelectionKeyCode as KeyCodeV9),
+                zoomActivationKeyCode: hotKeysDisabled ? undefined : (zoomActivationKeyCode as KeyCodeV9),
+            };
+            break;
+        case "v12":
+            keyCodeConfig = {
+                selectionKeyCode: hotKeysDisabled ? null : (selectionKeyCode as KeyCodeV12),
+                deleteKeyCode: hotKeysDisabled ? null : (deleteKeyCode as KeyCodeV12),
+                multiSelectionKeyCode: hotKeysDisabled ? null : (multiSelectionKeyCode as KeyCodeV12),
+                zoomActivationKeyCode: hotKeysDisabled ? null : (zoomActivationKeyCode as KeyCodeV12),
+            };
+            break;
+    }
+
+    let scrollOnDragFunctions = {};
+    switch (flowVersion) {
+        case "v9":
+            scrollOnDragFunctions = useReactFlowScrollOnDragV9({
+                reactFlowProps: originalProps as unknown as ReactFlowV9ContainerProps,
+                scrollOnDrag,
+            });
+            break;
+        // should not be necessary for v12
     }
-);
+
+    const containerConfig = {
+        ...sharedProperties,
+        ...keyCodeConfig,
+        ...originalProps,
+        ...scrollOnDragFunctions,
+    };
+
+    switch (flowVersion) {
+        case "v9":
+            return (
+                <ReactFlowV9Container ref={innerRef} {...(containerConfig as unknown as ReactFlowV9ContainerProps)}>
+                    {children}
+                    <ReactFlowMarkers />
+                </ReactFlowV9Container>
+            );
+        case "v12":
+            return (
+                <ReactFlowV12Container ref={innerRef} {...(containerConfig as ReactFlowV12ContainerProps)}>
+                    {children}
+                    <ReactFlowMarkers />
+                </ReactFlowV12Container>
+            );
+        default:
+            return <div></div>;
+    }
+};
+
+/** Hack to make the Type Parameter work with the forward ref. */
+export const ReactFlowExtended = React.forwardRef(ReactFlowExtendedPlain) as <T extends ReactFlowExtendedProps>(
+    p: T & { ref?: Ref<HTMLDivElement> }
+) => ReactElement;
+
+/**
+ * @deprecated (v26) use `ReactFlowExtended`
+ */
+export const ReactFlow = ReactFlowExtended;
+
+/** Classes that when set for an element, prevent that they trigger react-flow dragging, wheel and panning actions. */
+export const preventReactFlowActionsClasses = "nodrag nopan nowheel";

package/src/cmem/react-flow/ReactFlow/ReactFlowV12.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+    Edge,
+    Node,
+    ReactFlow as ReactFlowV12,
+    ReactFlowProps as ReactFlowV12Props,
+    useEdgesState,
+    useNodesState,
+} from "@xyflow/react";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { EdgeNew } from "./../../../extensions/react-flow/edges/EdgeNew";
+
+export type ReactFlowV12ContainerProps = ReactFlowV12Props;
+
+/**
+ * Our own `ReactFlow` v12 container.
+ */
+export const ReactFlowV12Container = React.forwardRef<HTMLDivElement, ReactFlowV12ContainerProps>(
+    ({ children, className, ...originalProps }, outerRef) => {
+        const innerRef = React.useRef<HTMLDivElement>(null);
+        React.useImperativeHandle(outerRef, () => innerRef.current!, []);
+
+        const [nodesFallback, , onNodesChangeFallback] = useNodesState(originalProps.nodes || ([] as Node[]));
+        const [edgesFallback, , onEdgesChangeFallback] = useEdgesState(originalProps.edges || ([] as Edge[]));
+
+        const missingNodesChangeCallback =
+            !!originalProps.nodes && !originalProps.onNodesChange
+                ? {
+                      nodes: nodesFallback,
+                      onNodesChange: onNodesChangeFallback,
+                  }
+                : {};
+
+        const missingEdgesChangeCallback =
+            !!originalProps.edges && !originalProps.onEdgesChange
+                ? {
+                      edges: edgesFallback,
+                      onEdgesChange: onEdgesChangeFallback,
+                  }
+                : {};
+
+        return (
+            <ReactFlowV12
+                ref={innerRef}
+                className={`${eccgui}-graphviz__canvas--reactflow12` + (className ? ` ${className}` : "")}
+                connectionLineComponent={EdgeNew}
+                {...originalProps}
+                {...missingNodesChangeCallback}
+                {...missingEdgesChangeCallback}
+            >
+                {children}
+            </ReactFlowV12>
+        );
+    }
+);

package/src/cmem/react-flow/ReactFlow/ReactFlowV9.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import {
+    default as ReactFlowV9,
+    ReactFlowProps as ReactFlowV9Props
+} from "react-flow-renderer";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
+export type ReactFlowV9ContainerProps = ReactFlowV9Props;
+
+/**
+ * Our own `ReactFlow` v9 container.
+ */
+export const ReactFlowV9Container = React.forwardRef<HTMLDivElement, ReactFlowV9ContainerProps>(
+    ({ children, className, ...originalProps }, outerRef) => {
+        const innerRef = React.useRef<HTMLDivElement>(null);
+        React.useImperativeHandle(outerRef, () => innerRef.current!, []);
+
+        return (
+            <ReactFlowV9
+                ref={innerRef}
+                className={`${eccgui}-graphviz__canvas--reactflow9` + (className ? ` ${className}` : "")}
+                {...originalProps}
+            >
+                {children}
+            </ReactFlowV9>
+        );
+    }
+);

package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -40,7 +40,7 @@ export interface StickyNoteModalProps {
     /**
      * Forward other properties to the `SimpleModal` element that is used for this dialog.
      */
-    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
+    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions" | "children">;
     /**
      * Code editor props
      */
@@ -118,7 +118,6 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                     </Button>,
                 ]}
                 {...simpleDialogProps}
-                data-test-id={(simpleDialogProps ?? {})["data-test-id"] ?? "sticky-note-modal"} // @deprecated (v25) we remove this automatically set testid
             >
                 <FieldItem
                     key="note"

package/src/cmem/react-flow/_canvas.scss

@@ -1,7 +1,7 @@
 .eccgui-graphviz__canvas--draghover {
     body[data-monitor-dropzone~="application/reactflow"] &[data-dropzone-for~="application/reactflow"],
     body[data-monitor-dropzone~="Files"] &[data-dropzone-for~="Files"] {
-        background-color: rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
+        background-color: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
         box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
 
         & > * {

package/src/cmem/react-flow/_edges.scss

@@ -1,24 +1,24 @@
-@mixin edgetypestyles($type, $color) {
+@mixin edgetypestyles($type) {
     .react-flow__edge-#{$type} {
-        @include edgecoloring($color);
+        @include edgecoloring($type);
     }
 }
 
-@mixin edgecoloring($color) {
-    --#{$eccgui}-reactflow-node-color-default: #{$color};
-    --#{$eccgui}-reactflow-node-color-hover: #{$color};
-    --#{$eccgui}-reactflow-node-color-selected: #{$color};
+@mixin edgecoloring($type) {
+    --#{$eccgui}-reactflow-node-color-default: var(--#{$eccgui}-#{$type}-edge);
+    --#{$eccgui}-reactflow-node-color-hover: var(--#{$eccgui}-#{$type}-edge);
+    --#{$eccgui}-reactflow-node-color-selected: var(--#{$eccgui}-#{$type}-edge);
 }
 
 // Graph edge types
 
-@include edgetypestyles("implicit", $reactflow-color-implicit-edge);
-@include edgetypestyles("import", $reactflow-color-import-edge);
-@include edgetypestyles("subclass", $reactflow-color-subclass-edge);
-@include edgetypestyles("subproperty", $reactflow-color-subproperty-edge);
-@include edgetypestyles("rdftype", $reactflow-color-rdftype-edge);
+@include edgetypestyles("implicit");
+@include edgetypestyles("import");
+@include edgetypestyles("subclass");
+@include edgetypestyles("subproperty");
+@include edgetypestyles("rdftype");
 
 // Linking edge types
 
-@include edgetypestyles("value", $reactflow-color-value-edge);
-@include edgetypestyles("score", $reactflow-color-score-edge);
+@include edgetypestyles("value");
+@include edgetypestyles("score");

package/src/cmem/react-flow/_handles.scss

@@ -1,34 +1,34 @@
-@mixin handletypestyles($type, $color) {
+@mixin handletypestyles($type) {
     .react-flow__node-#{$type} {
-        @include handlecoloring($color);
+        @include handlecoloring($type);
     }
 }
 
-@mixin handlecoloring($color) {
+@mixin handlecoloring($type) {
     .react-flow__handle {
-        color: $color;
+        color: var(--#{$eccgui}-#{$type}-node);
     }
 }
 
 // Graph handle types
 
-@include handletypestyles("graph", $reactflow-color-graph-node);
-@include handletypestyles("class", $reactflow-color-class-node);
-@include handletypestyles("instance", $reactflow-color-instance-node);
-@include handletypestyles("property", $reactflow-color-property-node);
+@include handletypestyles("graph");
+@include handletypestyles("class");
+@include handletypestyles("instance");
+@include handletypestyles("property");
 
 // Workflow handle types
 
-@include handletypestyles("dataset", $reactflow-color-dataset-node);
-@include handletypestyles("linking", $reactflow-color-linking-node);
-@include handletypestyles("transform", $reactflow-color-transform-node);
-@include handletypestyles("task", $reactflow-color-task-node);
-@include handletypestyles("workflow", $reactflow-color-workflow-node);
+@include handletypestyles("dataset");
+@include handletypestyles("linking");
+@include handletypestyles("transform");
+@include handletypestyles("task");
+@include handletypestyles("workflow");
 
 // Linking handle types
 
-@include handletypestyles("sourcepath", $reactflow-color-sourcepath-node);
-@include handletypestyles("targetpath", $reactflow-color-targetpath-node);
-@include handletypestyles("transformation", $reactflow-color-transformation-node);
-@include handletypestyles("comparator", $reactflow-color-comparator-node);
-@include handletypestyles("aggregator", $reactflow-color-aggregator-node);
+@include handletypestyles("sourcepath");
+@include handletypestyles("targetpath");
+@include handletypestyles("transformation");
+@include handletypestyles("comparator");
+@include handletypestyles("aggregator");

package/src/cmem/react-flow/_minimap.scss

@@ -1,38 +1,48 @@
-@mixin mapnodestyles($type, $color) {
+.#{$eccgui}-graphviz__minimap__node--default {
+    &:not([fill]) {
+        fill: $reactflow-node-border-color;
+    }
+
+    &:not([stroke]) {
+        stroke: $reactflow-node-border-color;
+    }
+}
+
+@mixin mapnodestyles($type) {
     .#{$eccgui}-graphviz__minimap__node--#{$type} {
-        @include mapcoloring($color);
+        @include mapcoloring($type);
     }
 }
 
-@mixin mapcoloring($color) {
+@mixin mapcoloring($type) {
     &:not([fill]) {
-        fill: $color;
+        fill: var(--#{$eccgui}-#{$type}-node);
     }
 
     &:not([stroke]) {
-        stroke: $color;
+        stroke: var(--#{$eccgui}-#{$type}-node);
     }
 }
 
 // Graph node type
 
-@include mapnodestyles("graph", $reactflow-color-graph-node);
-@include mapnodestyles("class", $reactflow-color-class-node);
-@include mapnodestyles("instance", $reactflow-color-instance-node);
-@include mapnodestyles("property", $reactflow-color-property-node);
+@include mapnodestyles("graph");
+@include mapnodestyles("class");
+@include mapnodestyles("instance");
+@include mapnodestyles("property");
 
 // Workflow node types
 
-@include mapnodestyles("dataset", $reactflow-color-dataset-node);
-@include mapnodestyles("linking", $reactflow-color-linking-node);
-@include mapnodestyles("transform", $reactflow-color-transform-node);
-@include mapnodestyles("task", $reactflow-color-task-node);
-@include mapnodestyles("workflow", $reactflow-color-workflow-node);
+@include mapnodestyles("dataset");
+@include mapnodestyles("linking");
+@include mapnodestyles("transform");
+@include mapnodestyles("task");
+@include mapnodestyles("workflow");
 
 // Linking node types
 
-@include mapnodestyles("sourcepath", $reactflow-color-sourcepath-node);
-@include mapnodestyles("targetpath", $reactflow-color-targetpath-node);
-@include mapnodestyles("transformation", $reactflow-color-transformation-node);
-@include mapnodestyles("comparator", $reactflow-color-comparator-node);
-@include mapnodestyles("aggregator", $reactflow-color-aggregator-node);
+@include mapnodestyles("sourcepath");
+@include mapnodestyles("targetpath");
+@include mapnodestyles("transformation");
+@include mapnodestyles("comparator");
+@include mapnodestyles("aggregator");

package/src/cmem/react-flow/configuration/_colors-graph.scss

@@ -1,37 +1,20 @@
-$reactflow-color-graph-node: #745a85 !default;
-$reactflow-color-class-node: #3a7896 !default;
-$reactflow-color-instance-node: #0097a7 !default;
-$reactflow-color-property-node: #40a691 !default;
-$reactflow-color-implicit-edge: #ae3c74 !default;
-$reactflow-color-import-edge: $reactflow-color-graph-node !default;
-$reactflow-color-subclass-edge: $reactflow-color-class-node !default;
-$reactflow-color-subproperty-edge: $reactflow-color-property-node !default;
-$reactflow-color-rdftype-edge: $reactflow-color-instance-node !default;
-
-@function bright($color) {
-    @return mix($color, #fff, 24%);
-}
-
-.#{eccgui}-configuration--colors__react-flow-graph {
-    /* stylelint-disable custom-property-pattern */
-    // TODO: we should correct custom property names later but atm this would lead to broken consumer apps
-    --graphNode: #{$reactflow-color-graph-node};
-    --classNode: #{$reactflow-color-class-node};
-    --instanceNode: #{$reactflow-color-instance-node};
-    --propertyNode: #{$reactflow-color-property-node};
-    --implicitEdge: #{$reactflow-color-implicit-edge};
-    --importEdge: #{$reactflow-color-import-edge};
-    --subclassEdge: #{$reactflow-color-subclass-edge};
-    --subpropertyEdge: #{$reactflow-color-subproperty-edge};
-    --rdftypeEdge: #{$reactflow-color-rdftype-edge};
-    --graphNodeBright: #{bright($reactflow-color-graph-node)};
-    --classNodeBright: #{bright($reactflow-color-class-node)};
-    --instanceNodeBright: #{bright($reactflow-color-instance-node)};
-    --propertyNodeBright: #{bright($reactflow-color-property-node)};
-    --implicitEdgeBright: #{bright($reactflow-color-implicit-edge)};
-    --importEdgeBright: #{bright($reactflow-color-import-edge)};
-    --subclassEdgeBright: #{bright($reactflow-color-subclass-edge)};
-    --subpropertyEdgeBright: #{bright($reactflow-color-subproperty-edge)};
-    --rdftypeEdgeBright: #{bright($reactflow-color-rdftype-edge)};
-    /* stylelint-enable custom-property-pattern */
+.#{$eccgui}-configuration--colors__react-flow-graph {
+    --#{$eccgui}-graph-node: #{eccgui-color-var("layout", "magenta", 900)};
+    --#{$eccgui}-graph-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-class-node: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-class-node-bright: #{eccgui-color-var("layout", "purple", 100)};
+    --#{$eccgui}-instance-node: #{eccgui-color-var("layout", "purple", 500)};
+    --#{$eccgui}-instance-node-bright: #{eccgui-color-var("layout", "purple", 100)};
+    --#{$eccgui}-property-node: #{eccgui-color-var("layout", "teal", 700)};
+    --#{$eccgui}-property-node-bright: #{eccgui-color-var("layout", "teal", 100)};
+    --#{$eccgui}-implicit-edge: #{eccgui-color-var("identity", "text", 700)};
+    --#{$eccgui}-implicit-edge-bright: #{eccgui-color-var("identity", "text", 100)};
+    --#{$eccgui}-import-edge: #{eccgui-color-var("layout", "magenta", 900)};
+    --#{$eccgui}-import-edge-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-subclass-edge: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-subclass-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
+    --#{$eccgui}-subproperty-edge: #{eccgui-color-var("layout", "teal", 700)};
+    --#{$eccgui}-subproperty-edge-bright: #{eccgui-color-var("layout", "teal", 100)};
+    --#{$eccgui}-rdftype-edge: #{eccgui-color-var("layout", "purple", 500)};
+    --#{$eccgui}-rdftype-edge-bright: #{eccgui-color-var("layout", "purple", 100)};
 }