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

package/src/common/utils/CssCustomProperties.ts

@@ -0,0 +1,123 @@
+/**
+ * Based on CSS Tricks tutorial.
+ * @see https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/
+ */
+
+interface getLocalCssStyleRulesProps {
+    cssRuleType?: "CSSStyleRule";
+    selectorText?: string;
+}
+interface getLocalCssStyleRulePropertiesProps extends getLocalCssStyleRulesProps {
+    propertyType?: "all" | "normal" | "custom";
+}
+interface getCustomPropertiesProps extends getLocalCssStyleRulesProps {
+    removeDashPrefix?: boolean;
+    returnObject?: boolean;
+}
+
+export default class CssCustomProperties {
+
+    getterDefaultProps = {} as getCustomPropertiesProps;
+    customprops = {};
+
+    constructor(props: getCustomPropertiesProps = {}) {
+        this.getterDefaultProps = props;
+    }
+
+    // Methods
+
+    customProperties = (props: getCustomPropertiesProps = {}) => {
+        // FIXME:
+        // in case of performance issues results should get saved at least into intern variables
+        // other cache strategies could be also tested
+        if (Object.keys(this.customprops).length > 1) {
+            return this.customprops;
+        }
+        const customprops = CssCustomProperties.listCustomProperties({
+            ...this.getterDefaultProps,
+            ...props
+        });
+        this.customprops = customprops;
+        return customprops;
+    }
+
+    static listLocalStylesheets = () => {
+        if (document && document.styleSheets) {
+            return Array.from(document.styleSheets)
+                .filter((stylesheet) => {
+                    // is inline stylesheet or from same domain
+                    if (!stylesheet.href) {
+                        return true;
+                    }
+                    return stylesheet.href.indexOf(window.location.origin) === 0;
+                });
+        }
+
+        return [];
+    }
+
+    static listLocalCssRules = () => {
+        return CssCustomProperties.listLocalStylesheets()
+            .map((stylesheet) => {
+                return Array.from(stylesheet.cssRules);
+            })
+            .flat();
+    }
+
+    static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}) => {
+        const {cssRuleType = "CSSStyleRule", selectorText} = filter;
+        return CssCustomProperties.listLocalCssRules()
+            .filter((cssrule) => {
+                if (cssrule.constructor.name !== cssRuleType) { return false; }
+                if (!!selectorText && cssrule.selectorText !== selectorText) { return false; }
+                return true;
+            })
+    }
+
+    static listLocalCssStyleRuleProperties = (filter: getLocalCssStyleRulePropertiesProps = {}) => {
+        const { propertyType = "all", ...otherFilters } = filter;
+        return CssCustomProperties.listLocalCssStyleRules(otherFilters)
+            .map((cssrule) => {
+                return [...cssrule.style]
+                    .map((propertyname) => {
+                        return [
+                            propertyname.trim(),
+                            cssrule.style.getPropertyValue(propertyname).trim()
+                        ];
+                    });
+            })
+            .flat()
+            .filter((declaration) => {
+                switch(propertyType) {
+                    case "normal":
+                        return declaration[0].indexOf("--") !== 0;
+                    case "custom":
+                        return declaration[0].indexOf("--") === 0;
+                }
+                return true; // case "all"
+            });
+    }
+
+    static listCustomProperties = (props: getCustomPropertiesProps = {}) => {
+        const {
+            removeDashPrefix = true,
+            returnObject = true,
+            ...filterProps
+        } = props;
+
+        const customProperties = CssCustomProperties.listLocalCssStyleRuleProperties({
+            ...filterProps,
+            propertyType: "custom",
+        }).map((declaration) => {
+            if (removeDashPrefix) {
+                return [
+                    declaration[0].substr(2),
+                    declaration[1]
+                ];
+            }
+            return declaration;
+        });
+
+        return returnObject ? Object.fromEntries(customProperties) : customProperties;
+    }
+}

package/src/common/utils/getColorConfiguration.ts

@@ -0,0 +1,21 @@
+import CssCustomProperties from "./CssCustomProperties";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+// Configurations can be found in `src/cmem/react-flow/configuration/_colors-*.scss`
+type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-workflow";
+
+/**
+ * Read and returns color values provided by CSS custom properties.
+ * They are defined for special CSS classes.
+ * Currently color configurations for the react flow editors are supported.
+ **/
+const getColorConfiguration = (configId: colorconfigs) => {
+    return new CssCustomProperties({
+        selectorText: `.${eccgui}-configuration--colors__${configId}`,
+        cssRuleType: "CSSStyleRule",
+        removeDashPrefix: true,
+        returnObject: true,
+    }).customProperties();
+};
+
+export default getColorConfiguration;

package/src/components/Accordion/accordion.scss

@@ -32,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 & {

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

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

package/src/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/src/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);
-}