@eccenca/gui-elements 22.1.0 → 23.0.0-rc.2

package/src/extensions/_index.scss

@@ -1 +1,6 @@
 @import "./react-flow/react-flow";
+/*
+CodeMirror styles are already included by the base component styles
+because it is used as lib for elements there already. 
+@import "./codemirror/codemirror";
+*/

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { CodeEditor } from "./CodeMirror";
+
+export default {
+    title: "Extensions/CodeEditor",
+    component: CodeEditor,
+    //parameters: { actions: { argTypesRegex: '^on.*' } },
+    argTypes: {
+        onChange: {
+            action: "value changed"
+        }
+    },
+} as ComponentMeta<typeof CodeEditor>;
+
+const TemplateFull: ComponentStory<typeof CodeEditor> = (args) => (
+    <CodeEditor {...args} />
+);
+
+export const BasicExample = TemplateFull.bind({});
+BasicExample.args = {
+    name: "codeinput",
+    mode: "markdown",
+    defaultValue: "**test me**",
+};

package/src/extensions/codemirror/CodeMirror.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from "react";
+import CodeMirror from "codemirror";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import "codemirror/mode/markdown/markdown.js";
+import "codemirror/mode/python/python.js";
+import "codemirror/mode/sparql/sparql.js";
+import "codemirror/mode/sql/sql.js";
+import "codemirror/mode/turtle/turtle.js";
+import "codemirror/mode/xml/xml.js";
+
+export interface CodeEditorProps {
+    /**
+     * `name` attribute of connected textarea element.
+     */
+    name: string;
+    /**
+     * `id` attribute of connected textarea element.
+     * If not set then the default value is created by `codemirror-${name-attribute}`.
+     */
+    id?: string;
+    /**
+     * Handler method to receive onChange events.
+     * As input the new value is given.
+     */
+    onChange: (v: any) => void;
+    /**
+     * Syntax mode of the code editor.
+     */
+    mode?: "markdown" | "python" | "sparql" | "sql" | "turtle" | "xml" | "undefined";
+    /**
+     * Default value used first when the editor is instanciated.
+     */
+    defaultValue?: any;
+}
+
+/**
+ * Includes a code editor, currently we use CodeMirror library as base.
+ */
+export const CodeEditor = ({
+    onChange,
+    name,
+    id,
+    mode = "undefined",
+    defaultValue
+}: CodeEditorProps) => {
+    const domRef = useRef<HTMLTextAreaElement>(null);
+
+    useEffect(() => {
+        const editorInstance = CodeMirror.fromTextArea(domRef.current!, {
+            mode: mode === "undefined" ? undefined : mode,
+            lineWrapping: true,
+            lineNumbers: true,
+            tabSize: 2,
+            theme: "xq-light",
+        });
+
+        editorInstance.on("change", (api) => {
+            onChange(api.getValue());
+        });
+
+        return function cleanup() {
+            editorInstance.toTextArea();
+        };
+    }, [onChange, mode]);
+
+    return (
+        <div className={`${eccgui}-codeeditor`}>
+            <textarea
+                ref={domRef}
+                /**
+                 * FIXME: same `data-test-id` for multiple code editor elements are valid
+                 * but may not make really sense for testing purposes. Currently let it
+                 * unchanged from the code what was took over here.
+                 */
+                data-test-id="codemirror-wrapper"
+                id={!!id ? id : `codemirror-${name}`}
+                name={name}
+                defaultValue={defaultValue}
+            />
+        </div>
+    );
+}

package/src/extensions/codemirror/_codemirror.scss

@@ -0,0 +1,31 @@
+@import "~codemirror/lib/codemirror.css";
+@import "~codemirror/theme/xq-light.css";
+
+// adjustments
+
+.#{$eccgui}-codeeditor {
+    .CodeMirror {
+        border-radius: $pt-border-radius;
+
+        // get them a "border" like input boxes from blueprintjs
+        box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
+        &.CodeMirror-focused {
+            box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+        }
+
+        .CodeMirror-gutters {
+            // allow "borders" to shine through
+            background-color: rgba(0,0,0,0.05);
+        }
+
+        .CodeMirror-scroll {
+            cursor: text;
+        }
+    }
+}
+
+.#{$prefix}--accordion__content {
+    .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber {
+        box-sizing: content-box;
+    }
+}

package/src/extensions/index.ts

@@ -0,0 +1,2 @@
+export * from "./codemirror/CodeMirror";
+export * from "./react-flow";

package/src/extensions/react-flow/edges/EdgeDefault.tsx

@@ -11,6 +11,9 @@ import { drawEdgeStraight} from "./utils";
 
 export interface EdgeDefaultDataProps {
     pathGlowWidth?: number;
+    inversePath?: boolean;
+    markerStart?: string;
+    renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
 }
 
 export interface EdgeDefaultProps extends ReactFlowEdgeProps {
@@ -27,6 +30,7 @@ export const EdgeDefault = memo(
         } = edge;
         const {
             pathGlowWidth = 10,
+            markerStart
         } = data;
 
         const pathDisplay = drawSvgPath({...edgeOriginalProperties, data});
@@ -41,7 +45,7 @@ export const EdgeDefault = memo(
             targetY: edgeOriginalProperties.targetY,
         });
 
-        const edgeLabel = edgeOriginalProperties.label ? (
+        const edgeLabel = data.renderLabel?.(edgeCenter) ?? (edgeOriginalProperties.label ? (
             <EdgeText
                 x={edgeCenter[0]}
                 y={edgeCenter[1]}
@@ -52,7 +56,7 @@ export const EdgeDefault = memo(
                 labelBgPadding={edgeOriginalProperties.labelBgPadding || [5, 5]}
                 labelBgBorderRadius={edgeOriginalProperties.labelBgBorderRadius || 3}
             />
-        ) : null;
+        ) : null);
 
         const edgeStyle = edgeOriginalProperties.style ?? {};
         return (
@@ -67,6 +71,7 @@ export const EdgeDefault = memo(
                 <path
                     d={pathDisplay}
                     className="react-flow__edge-path"
+                    markerStart={markerStart}
                     markerEnd={markerEnd}
                 />
                 { edgeLabel }

package/src/extensions/react-flow/edges/EdgeTools.tsx

@@ -2,16 +2,17 @@ import React, {memo} from 'react';
 import {ContextOverlay} from "../../../index";
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
 import {
-    IPopoverProps as IBlueprintPopoverProps,
     PopoverInteractionKind as BlueprintPopoverInteractionKind,
 } from "@blueprintjs/core";
 
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+
 interface PosOffset {
     left: number;
     top: number;
 }
 
-export interface EdgeToolsProps extends IBlueprintPopoverProps {
+export interface EdgeToolsProps extends Omit<ContextOverlayProps, "children"> {
     posOffset: PosOffset;
     children: string | JSX.Element | JSX.Element[];
 }
@@ -30,9 +31,10 @@ export const EdgeTools = memo(
                     autoFocus={true}
                     interactionKind={BlueprintPopoverInteractionKind.HOVER}
                     content={<div className={`${eccgui}-graphviz__edgetools-content`}>{children}</div>}
-                    target={<div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />}
                     popoverClassName={`${eccgui}-graphviz__edgetools-overlay`}
-                />
+                >
+                    <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />
+                </ContextOverlay>
             </div>
         );
     }

package/src/extensions/react-flow/handles/HandleContent.tsx

@@ -25,7 +25,6 @@ export const HandleContent = memo(({
         return (
             <Tooltip
                 content={extendedTooltip}
-                wrapperTagName="div"
                 autoFocus={false}
                 enforceFocus={false}
                 openOnTargetFocus={false}

package/src/extensions/react-flow/index.ts

@@ -7,6 +7,8 @@ export { EdgeDefault } from "./edges/EdgeDefault";
 export { EdgeStep } from "./edges/EdgeStep";
 export { EdgeTools } from "./edges/EdgeTools";
 export { edgeTypes } from "./edges/edgeTypes";
+export { MarkerArrowClosedInverse } from "./markers/MarkerArrowClosedInverse";
+export { ReactFlowMarkers } from "./markers/ReactFlowMarkers";
 export { MiniMap } from "./minimap/MiniMap";
 export { minimapNodeClassName, minimapNodeColor } from "./minimap/utils";
 

package/src/extensions/react-flow/markers/MarkerArrowClosedInverse.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+
+export const MarkerArrowClosedInverse: FC = () => {
+    return (
+        <marker
+            className="react-flow__arrowhead"
+            id="react-flow__arrowclosed-inverse"
+            markerWidth="12.5"
+            markerHeight="12.5"
+            viewBox="-10 -10 20 20"
+            orient="auto"
+            refX="0"
+            refY="0"
+        >
+            <polyline
+                stroke="#b1b1b7"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1"
+                fill="#b1b1b7"
+                points="5,-4 0,0 5,4 5,-4"
+            ></polyline>
+        </marker>
+    );
+};

package/src/extensions/react-flow/markers/ReactFlowMarkers.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+
+import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
+
+export const ReactFlowMarkers: FC = () => {
+    return (
+        <svg>
+            <defs>
+                <MarkerArrowClosedInverse />
+            </defs>
+        </svg>
+    );
+};

package/src/extensions/react-flow/nodes/NodeTools.tsx

@@ -1,12 +1,13 @@
-import React, {memo, useEffect, useState} from "react";import {
-    IPopoverProps as IBlueprintPopoverProps,
+import React, {memo, useEffect, useState} from "react";
+import {
     PopoverInteractionKind as BlueprintPopoverInteractionKind,
 } from "@blueprintjs/core";
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 import {ContextOverlay, IconButton} from "../../../index";
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
 import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
 
-export interface NodeToolsProps extends IBlueprintPopoverProps {
+export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
     children: string | JSX.Element;
     togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
@@ -46,6 +47,11 @@ export const NodeTools = memo(({
             hoverCloseDelay={500}
             interactionKind={isOpen ? BlueprintPopoverInteractionKind.HOVER : BlueprintPopoverInteractionKind.CLICK}
             {...otherOverlayProps}
+            content={(
+                <div className={`${eccgui}-graphviz__nodetools__content`}>
+                    { children }
+                </div>
+            )}
         >
             {typeof togglerElement === "string" ? (
                 <IconButton
@@ -55,11 +61,8 @@ export const NodeTools = memo(({
                     onClick={() => setIsOpen(previous => !previous)}
                 />
             ) : (
-                { togglerElement }
+                <>{ togglerElement }</>
             )}
-            <div className={`${eccgui}-graphviz__nodetools__content`}>
-                { children }
-            </div>
         </ContextOverlay>
     );
 });

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -83,6 +83,24 @@ Default.args = {
     ),
     contentExtension: <ContentExtensionExample />,
     minimalShape: "none",
+    getMinimalTooltipData: (node: any) => {
+        return {
+            label: node.data?.label,
+            content: node.data?.content,
+            iconName: node.data?.iconName,
+            depiction: node.data?.depiction,
+        }
+    },
+    handles: [
+        {
+            type: "target",
+            tooltip: "this is a target handle",
+        },
+        {
+            type: "source",
+            data: {extendedTooltip: "this is a source handle"}
+        }
+    ]
 };
 
 export const SlideOut = Template.bind({});

package/src/includes/blueprintjs/_variables.scss

@@ -75,7 +75,7 @@ $pt-text-color: $eccgui-color-application-text !default;
 
 // Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
 // Do not quote this value, for Less consumers.
-$ns: bp3 !default;
+$ns: bp4 !default;
 
 // easily the most important variable, so it comes up top
 // (so other variables can use it to define themselves)

package/src/index.scss

@@ -15,9 +15,13 @@
 
 // calculate blueprintjs configuration
 @import "./includes/blueprintjs/variables";
-// load blueprintjs requsists
+// load blueprintjs requisists
+@import "~@blueprintjs/colors/src/colors";
 @import "~@blueprintjs/core/src/common/variables";
-// already included via bjs variables @import "~@blueprintjs/colors/src/colors";
+// future home for $icon-classes var @import "~@blueprintjs/core/src/common/variables-extended";
+@import "~@blueprintjs/core/src/common/react-transition";
+@import "~@blueprintjs/core/src/components/icon/icon-mixins";
+@import "~@blueprintjs/core/src/components/icon/icon"; // currently necessary for $icon-classes var
 // currently not needed @import "~@blueprintjs/core/src/reset";
 // currently not needed @import "~@blueprintjs/core/src/typography";
 @import "~@blueprintjs/core/src/accessibility/focus-states";
@@ -35,10 +39,9 @@
 // currently not needed @import "~@blueprintjs/core/src/components/drawer/drawer";
 @import "~@blueprintjs/core/src/components/editable-text/editable-text";
 // used in own component @import "~@blueprintjs/core/src/components/forms/index";
-@import "~@blueprintjs/core/src/components/html-select/html-select";
+// currently not used @import "~@blueprintjs/core/src/components/html-select/html-select";
 // currently not needed @import "~@blueprintjs/core/src/components/html-table/html-table";
 @import "~@blueprintjs/core/src/components/hotkeys/hotkeys";
-// not used @import "~@blueprintjs/core/src/components/icon/icon";
 // used in own component @import "~@blueprintjs/core/src/components/menu/menu";
 @import "~@blueprintjs/core/src/components/navbar/navbar";
 @import "~@blueprintjs/core/src/components/non-ideal-state/non-ideal-state";
@@ -56,7 +59,7 @@
 // used in own component @import "~@blueprintjs/core/src/components/tag-input/tag-input";
 // used in own component @import "~@blueprintjs/core/src/components/toast/toast";
 // used in own component @import "~@blueprintjs/core/src/components/tooltip/tooltip";
-@import "~@blueprintjs/core/src/components/tree/tree";
+// currently not used @import "~@blueprintjs/core/src/components/tree/tree";
 
 // -- Carbon Elements ----------------------------------------------------------
 
@@ -130,10 +133,6 @@
 // currently not needed @import '~carbon-components/scss/components/pagination-nav/pagination-nav';
 // used in own component @import '~carbon-components/scss/components/ui-shell/ui-shell'; // experimental
 
-// other 3rd party libs
-@import "~codemirror/lib/codemirror.css";
-@import "~codemirror/theme/xq-light.css";
-
 // == Load element styles ======================================================
 
 @import "./components/Typography/typography";
@@ -170,6 +169,8 @@
 @import "./components/PropertyValuePair/propertyvalue";
 @import "./components/Iframe/iframe";
 @import "./components/AutoSuggestion/AutoSuggestion";
+@import "./components/Select/select";
+@import "./extensions/codemirror/codemirror";
 
 // == load tweaks ==============================================================
 

package/src/index.ts

@@ -60,7 +60,8 @@ import TagList from "./components/Tag/TagList";
 
 import Notification from "./components/Notification/Notification";
 import Toast from "./components/Notification/Toast";
-import { Select } from "@blueprintjs/select";
+
+import Select from "./components/Select/Select";
 import MultiSelect from "./components/MultiSelect/MultiSelect";
 
 import { Iframe } from "./components/Iframe/Iframe";
@@ -250,4 +251,5 @@ export {
 };
 
 export * from "./cmem";
-export * from "./extensions/react-flow";
+export * from "./extensions";
+export * from "./components/interfaces";

package/dist/cjs/cmem/react-flow/configuration/_colors-graph.module.scss

@@ -1,35 +0,0 @@
-$reactflow-color-graph-node: #745a85 !default;
-$reactflow-color-class-node: #3a7896 !default;
-$reactflow-color-instance-node: #0097a7 !default;
-$reactflow-color-property-node: #ffd54f !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%);
-}
-
-:export {
-    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);
-}

package/dist/cjs/cmem/react-flow/configuration/_colors-linking.module.scss

@@ -1,29 +0,0 @@
-$reactflow-color-sourcepath-node: #745a85 !default;
-$reactflow-color-targetpath-node: #3a7896 !default;
-$reactflow-color-transformation-node: #ae3c74 !default;
-$reactflow-color-comparator-node: #40a691 !default;
-$reactflow-color-aggregator-node: #0097a7 !default;
-
-$reactflow-color-value-edge: #222 !default;
-$reactflow-color-score-edge: $reactflow-color-aggregator-node !default;
-
-@function bright($color) {
-    @return mix($color, #fff, 24%);
-}
-
-:export {
-    sourcepathNode: $reactflow-color-sourcepath-node;
-    targetpathNode: $reactflow-color-targetpath-node;
-    transformationNode: $reactflow-color-transformation-node;
-    comparatorNode: $reactflow-color-comparator-node;
-    aggregatorNode: $reactflow-color-aggregator-node;
-    valueEdge: $reactflow-color-value-edge;
-    scoreEdge: $reactflow-color-score-edge;
-    sourcepathNodeBright: bright($reactflow-color-sourcepath-node);
-    targetpathNodeBright: bright($reactflow-color-targetpath-node);
-    transformationNodeBright: bright($reactflow-color-transformation-node);
-    comparatorNodeBright: bright($reactflow-color-comparator-node);
-    aggregatorNodeBright: bright($reactflow-color-aggregator-node);
-    valueEdgeBright: bright($reactflow-color-value-edge);
-    scoreEdgeBright: bright($reactflow-color-score-edge);
-}

package/dist/cjs/cmem/react-flow/configuration/_colors-workflow.module.scss

@@ -1,22 +0,0 @@
-$reactflow-color-dataset-node: #3a7896 !default;
-$reactflow-color-linking-node: #0097a7 !default;
-$reactflow-color-transform-node: #40a691 !default;
-$reactflow-color-task-node: #80b67b !default;
-$reactflow-color-workflow-node: #745a85 !default;
-
-@function bright($color) {
-    @return mix($color, #fff, 24%);
-}
-
-:export {
-    datasetNode: $reactflow-color-dataset-node;
-    linkingNode: $reactflow-color-linking-node;
-    transformNode: $reactflow-color-transform-node;
-    taskNode: $reactflow-color-task-node;
-    workflowNode: $reactflow-color-workflow-node;
-    datasetNodeBright: bright($reactflow-color-dataset-node);
-    linkingNodeBright: bright($reactflow-color-linking-node);
-    transformNodeBright: bright($reactflow-color-transform-node);
-    taskNodeBright: bright($reactflow-color-task-node);
-    workflowNodeBright: bright($reactflow-color-workflow-node);
-}

package/dist/esm/cmem/react-flow/configuration/_colors-graph.module.scss

@@ -1,35 +0,0 @@
-$reactflow-color-graph-node: #745a85 !default;
-$reactflow-color-class-node: #3a7896 !default;
-$reactflow-color-instance-node: #0097a7 !default;
-$reactflow-color-property-node: #ffd54f !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%);
-}
-
-:export {
-    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);
-}

package/dist/esm/cmem/react-flow/configuration/_colors-linking.module.scss

@@ -1,29 +0,0 @@
-$reactflow-color-sourcepath-node: #745a85 !default;
-$reactflow-color-targetpath-node: #3a7896 !default;
-$reactflow-color-transformation-node: #ae3c74 !default;
-$reactflow-color-comparator-node: #40a691 !default;
-$reactflow-color-aggregator-node: #0097a7 !default;
-
-$reactflow-color-value-edge: #222 !default;
-$reactflow-color-score-edge: $reactflow-color-aggregator-node !default;
-
-@function bright($color) {
-    @return mix($color, #fff, 24%);
-}
-
-:export {
-    sourcepathNode: $reactflow-color-sourcepath-node;
-    targetpathNode: $reactflow-color-targetpath-node;
-    transformationNode: $reactflow-color-transformation-node;
-    comparatorNode: $reactflow-color-comparator-node;
-    aggregatorNode: $reactflow-color-aggregator-node;
-    valueEdge: $reactflow-color-value-edge;
-    scoreEdge: $reactflow-color-score-edge;
-    sourcepathNodeBright: bright($reactflow-color-sourcepath-node);
-    targetpathNodeBright: bright($reactflow-color-targetpath-node);
-    transformationNodeBright: bright($reactflow-color-transformation-node);
-    comparatorNodeBright: bright($reactflow-color-comparator-node);
-    aggregatorNodeBright: bright($reactflow-color-aggregator-node);
-    valueEdgeBright: bright($reactflow-color-value-edge);
-    scoreEdgeBright: bright($reactflow-color-score-edge);
-}

package/dist/esm/cmem/react-flow/configuration/_colors-workflow.module.scss

@@ -1,22 +0,0 @@
-$reactflow-color-dataset-node: #3a7896 !default;
-$reactflow-color-linking-node: #0097a7 !default;
-$reactflow-color-transform-node: #40a691 !default;
-$reactflow-color-task-node: #80b67b !default;
-$reactflow-color-workflow-node: #745a85 !default;
-
-@function bright($color) {
-    @return mix($color, #fff, 24%);
-}
-
-:export {
-    datasetNode: $reactflow-color-dataset-node;
-    linkingNode: $reactflow-color-linking-node;
-    transformNode: $reactflow-color-transform-node;
-    taskNode: $reactflow-color-task-node;
-    workflowNode: $reactflow-color-workflow-node;
-    datasetNodeBright: bright($reactflow-color-dataset-node);
-    linkingNodeBright: bright($reactflow-color-linking-node);
-    transformNodeBright: bright($reactflow-color-transform-node);
-    taskNodeBright: bright($reactflow-color-task-node);
-    workflowNodeBright: bright($reactflow-color-workflow-node);
-}

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

@@ -1,35 +0,0 @@
-$reactflow-color-graph-node: #745a85 !default;
-$reactflow-color-class-node: #3a7896 !default;
-$reactflow-color-instance-node: #0097a7 !default;
-$reactflow-color-property-node: #ffd54f !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%);
-}
-
-:export {
-    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);
-}