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

package/src/components/Accordion/accordion.scss

@@ -3,7 +3,6 @@
 
 // changes
 
-
 .#{$prefix}--accordion__heading {
     min-height: mini-units(5);
     align-items: center;
@@ -33,9 +32,16 @@
 .#{$prefix}--accordion__content {
     padding: $eccgui-size-block-whitespace / 2;
     margin: 0 calc(1rem + #{$eccgui-size-block-whitespace / 2}) 0 $eccgui-size-block-whitespace / 2;
+    display: block;
+    opacity: 0;
+    position: fixed;
+    left: -5000em;
 
     .#{$prefix}--accordion__item--active & {
         padding: $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace $eccgui-size-block-whitespace / 2;
+        opacity: 1;
+        position: static;
+        left: auto;
     }
 
     .#{$prefix}--accordion--start & {
@@ -47,7 +53,7 @@
     }
 
     *, *::before, *::after {
-        box-sizing: revert;
+        box-sizing: inherit;
     }
 }
 

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -182,6 +182,7 @@ const AutoSuggestion = ({
                 return () => marker.clear()
             }
         }
+        return;
     }, [highlightedElement, selectedTextRanges, editorInstance])
 
     //handle linting
@@ -266,6 +267,7 @@ const AutoSuggestion = ({
             handleEditorInputChange(value, cursorPosition)
             return handleEditorInputChange.cancel
         }
+        return;
     }, [cursorPosition, value, isFocused, handleEditorInputChange]);
 
     // Trigger input validation

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -1,4 +1,4 @@
-import "codemirror/addon/display/placeholder"
+import "codemirror/addon/display/placeholder.js"
 import "codemirror/mode/sparql/sparql.js";
 import React from "react";
 import { Controlled as ControlledEditor } from "react-codemirror2";
@@ -74,7 +74,7 @@ const SingleLineCodeEditor = ({
             placeholder,
             scrollbarStyle: showScrollBar ? "native" : "null"
         }}
-        onSelection={(editor, data) => {
+        onSelection={(_editor, data) => {
           if(Array.isArray(data?.ranges)) {
             onSelection(data.ranges
                 .map((r: any) => ({from: r.from().ch, to: r.to().ch}))
@@ -84,7 +84,7 @@ const SingleLineCodeEditor = ({
         onCursor={(editor, data) => {
           onCursorChange(data, editor.cursorCoords(true, "div"));
         }}
-        onBeforeChange={(editor, data, value) => {
+        onBeforeChange={(_editor, _data, value) => {
           const trimmedValue = value.replace(/\n/g, "");
           onChange(trimmedValue);
         }}

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -213,6 +213,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 setListLoading(false);
             };
         }
+        return;
     },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [hasFocus, query]

package/src/components/Dialog/Modal.tsx

@@ -47,7 +47,7 @@ function Modal({
     ...otherProps
 }: ModalProps) {
 
-    const alteredChildren = React.Children.map(children, (child, index) => {
+    const alteredChildren = React.Children.map(children, (child) => {
         if ((child as React.ReactElement).type && (child  as React.ReactElement).type === Card) {
             return React.cloneElement(
                 child as React.ReactElement,

package/src/components/Dialog/SimpleDialog.tsx

@@ -16,6 +16,7 @@ import {
 import Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
 import {TestableComponent} from "../interfaces";
+import IconButton from "../Icon/IconButton";
 
 export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
@@ -49,6 +50,10 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     intent?: IntentTypes;
     /** Optional props for the wrapper div element inside the modal. */
     wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    /** If a full screen toggler is shown that will allow to switch to full screen mode. */
+    showFullScreenToggler?: boolean
+    /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
+    startInFullScreenMode?: boolean
 }
 
 /**
@@ -66,8 +71,13 @@ function SimpleDialog({
     preventSimpleClosing = false,
     intent,
     headerOptions,
+    showFullScreenToggler = false,
+    startInFullScreenMode = false,
+    size,
     ...otherProps
 }: SimpleDialogProps) {
+    const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
+    const showToggler = startInFullScreenMode || showFullScreenToggler
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";
     return (
         <Modal
@@ -76,21 +86,32 @@ function SimpleDialog({
             data-test-id={otherProps["data-test-id"] ?? "simpleDialogWidget"}
             canOutsideClickClose={canOutsideClickClose || !preventSimpleClosing}
             canEscapeKeyClose={canEscapeKeyClose || !preventSimpleClosing}
+            size={displayFullscreen ? "fullscreen" : size}
         >
             <Card className={intentClassName}
             >
-                {(title || headerOptions) && (
+                {(title || headerOptions || showToggler) ? (
                     <CardHeader>
                         <CardTitle
                             className={intentClassName}
                         >
                             {title}
                         </CardTitle>
-                        {headerOptions && (
-                            <CardOptions>{headerOptions}</CardOptions>
+                        {(headerOptions || showToggler) ? (
+                            <CardOptions>
+                                { headerOptions }
+                                {showToggler && (
+                                    <IconButton
+                                        name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
+                                        onClick={() => setDisplayFullscreen(!displayFullscreen)}
+                                    />
+                                )}
+                            </CardOptions>
+                        ) : (
+                            <></>
                         )}
                     </CardHeader>
-                )}
+                ) : null}
                 {hasBorder && <Divider />}
                 <CardContent>{children}</CardContent>
                 {hasBorder && <Divider />}

package/src/components/Form/FieldItemRow.tsx

@@ -6,7 +6,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 */
 /** Allows to layout field items horizontally. */
 function FieldItemRow({ children, className, ...otherProps }: any) {
-    return <div className={`${eccgui}-fielditem__row` + (className ? " " + className : "")}>{children}</div>;
+    return <div className={`${eccgui}-fielditem__row` + (className ? " " + className : "")} {...otherProps}>{children}</div>;
 }
 
 export default FieldItemRow;

package/src/components/Form/FieldSet.tsx

@@ -59,6 +59,7 @@ function FieldSet({
                 classIntent +
                 (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
+            {...otherProps}
         >
             {title && <legend>{title}</legend>}
             {userhelp}

package/src/components/Icon/canonicalIconNames.tsx

@@ -67,6 +67,8 @@ export type ValidIconName = "application-dataintegration"
     | "operation-comparison"
     | "operation-transform"
     | "operation-aggregation"
+    | "operation-commit"
+    | "operation-sharelink"
     | "data-sourcepath"
     | "data-targetpath"
     | "list-sort"
@@ -453,6 +455,16 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.DataCollection20,
         large: icons.DataCollection32
     },
+    "operation-commit": {
+        small: icons.Commit16,
+        normal: icons.Commit20,
+        large: icons.Commit32
+    },
+    "operation-sharelink": {
+        small: icons.CopyLink16,
+        normal: icons.CopyLink20,
+        large: icons.CopyLink32
+    },
 
     "data-sourcepath": {
         small: icons.Data_216,

package/src/components/Iframe/Iframe.tsx

@@ -60,7 +60,7 @@ export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(({
     const classNames = `${eccgui}-iframe` +
         (!!useViewportHeight ? ` ${eccgui}-iframe--${useViewportHeight}height` : "") +
         (!!useAvailableSpace ? ` ${eccgui}-iframe--useavailablespace` : "");
-    const { onLoad = (e: any)=>{}, style, ...otherOriginalIframeProps } = htmlIframeProps;
+    const { onLoad = ()=>{}, style, ...otherOriginalIframeProps } = htmlIframeProps;
     return (
         <div className={classNames}>
             {!isLoaded && <Spinner />}

package/src/components/Iframe/IframeModal.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import SimpleDialog, { SimpleDialogProps } from "../Dialog/SimpleDialog";
-import IconButton from "../Icon/IconButton";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { Iframe, IframeProps } from "./Iframe";
+import SimpleDialog, {SimpleDialogProps} from "../Dialog/SimpleDialog";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+import {Iframe, IframeProps} from "./Iframe";
 
 export interface IframeModalProps extends Omit<SimpleDialogProps, "children"> {
     // The title of the dialog
@@ -29,7 +28,6 @@ export function IframeModal({
     size = "large",
     ...otherSimpleDialogProps
 }: IframeModalProps) {
-    const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startFullscreen);
     const {
         useViewportHeight,
         useAvailableSpace,
@@ -44,22 +42,13 @@ export function IframeModal({
         <SimpleDialog
             hasBorder
             title={title}
-            headerOptions={(
-                <>
-                    <IconButton
-                        name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
-                        onClick={()=>setDisplayFullscreen(!displayFullscreen)}
-                    />
-                    <>
-                        {headerOptions}
-                    </>
-                </>
-            )}
+            headerOptions={headerOptions}
             className={
                 `${eccgui}-iframemodal` +
                 (className ? ` ${className}` : "")
             }
-            size={displayFullscreen ? "fullscreen" : size}
+            showFullScreenToggler={true}
+            startInFullScreenMode={startFullscreen}
             {...otherSimpleDialogProps}
         >
             <Iframe

package/src/components/MultiSelect/MultiSelect.tsx

@@ -8,7 +8,7 @@ import OverflowText from "../Typography/OverflowText";
 import {HTMLInputProps} from "@blueprintjs/core/src/common/props";
 import {removeExtraSpaces} from "../../common/utils/stringUtils";
 
-interface SelectedParamsType<T> {
+export interface SelectedParamsType<T> {
     newlySelected: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
@@ -254,7 +254,7 @@ function MultiSelect<T>({
      * @param label
      * @param index
      */
-    const removeTagFromSelectionViaIndex = (label: string, index: number) => {
+    const removeTagFromSelectionViaIndex = (label: React.ReactNode, index: number) => {
         setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
         setCreatedItems(items => items.filter(item => itemLabel(item) !== label));
     };

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -47,7 +47,7 @@ function OverviewItemList({
             }
         >
             {
-                React.Children.map(children, (child, i) => {
+                React.Children.map(children, (child) => {
                     return <li>{ child }</li>
                 })
             }

package/src/components/Spinner/Spinner.tsx

@@ -41,6 +41,7 @@ function Spinner({
             const timeoutId = setTimeout(() => setShowSpinner(true), delay);
             return () => clearTimeout(timeoutId);
         }
+        return;
     }, [showSpinner, delay]);
     const availableIntent = ["primary", "success", "warning", "danger", "inherit"];
     const internSizes = {

package/src/components/Tag/TagList.tsx

@@ -16,6 +16,7 @@ function TagList({
                 `${eccgui}-tag__list` +
                 ((className && label) ? ' ' + className : '')
             }
+            {...otherProps}
         >
             {
                 React.Children.map(children, (child, i) => {

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/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/minimap/MiniMap.tsx

@@ -91,7 +91,7 @@ export const MiniMap = memo(({
     /**
         enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
      **/
-    const handleMiniMapMouseDown = (event: any) => {
+    const handleMiniMapMouseDown = () => {
         if (enableNavigation && flowInstance) { minimapCalcConf.navigationOn = true; }
     };
 

package/src/index.scss

@@ -130,10 +130,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 +166,7 @@
 @import "./components/PropertyValuePair/propertyvalue";
 @import "./components/Iframe/iframe";
 @import "./components/AutoSuggestion/AutoSuggestion";
+@import "./extensions/codemirror/codemirror";
 
 // == load tweaks ==============================================================
 

package/src/index.ts

@@ -250,4 +250,4 @@ export {
 };
 
 export * from "./cmem";
-export * from "./extensions/react-flow";
+export * from "./extensions";

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);
-}