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

package/src/components/VisualTour/stories/VisualTour.stories.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import {
+    Button,
+    Icon,
+    OverflowText,
+    OverviewItem,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+    OverviewItemLine,
+    Toolbar,
+    ToolbarSection,
+    VisualTour,
+    VisualTourProps,
+} from "../../../../index";
+
+import stepDefinitionsEn from "./defaultTour";
+
+export default {
+    title: "Components/VisualTour",
+    component: VisualTour,
+    argTypes: {},
+} as Meta<typeof VisualTour>;
+
+const Template: StoryFn<typeof VisualTour> = (args: VisualTourProps) => {
+    const [isOpen, setIsOpen] = React.useState<boolean | undefined>();
+
+    return (
+        <div style={{ minHeight: "600px", minWidth: "800px" }}>
+            <Toolbar id={"tourContainer"}>
+                <ToolbarSection canGrow={true}>
+                    <span id={"textSection"}>Some text</span>
+                </ToolbarSection>
+                <ToolbarSection id={"buttonSection"}>
+                    <Button id={"actionA"}>Action A</Button>
+                    <Button id={"actionB"}>Action B</Button>
+                    <Button id={"startTour"} elevated onClick={() => setIsOpen(true)}>
+                        Start tour!
+                    </Button>
+                </ToolbarSection>
+            </Toolbar>
+            <div id="actionC" style={{ margin: "1rem", padding: "1rem", border: "dotted 1px lightgray" }}>
+                Some other element for the tour.
+            </div>
+            <div style={{ height: "100vh" }} />
+            <div id="actionD" style={{ margin: "1rem", padding: "1rem", border: "dotted 1px lightgray" }}>
+                Another element for the tour, not visible at first.
+            </div>
+            <VisualTour
+                {...args}
+                onClose={() => setIsOpen(false)}
+                isOpen={typeof isOpen !== "undefined" ? isOpen : args.isOpen}
+            />
+        </div>
+    );
+};
+
+const stepDefinitions = stepDefinitionsEn;
+
+export const Default = Template.bind({});
+const defaultArgs: VisualTourProps = {
+    steps: [
+        {
+            ...stepDefinitions.firstStep,
+        },
+        {
+            ...stepDefinitions.customContent,
+            content: () => {
+                const texts = stepDefinitions.customContent.texts;
+                return (
+                    <OverviewItem>
+                        <OverviewItemDepiction>
+                            <Icon name={"item-info"} />
+                        </OverviewItemDepiction>
+                        <OverviewItemDescription>
+                            <OverviewItemLine>
+                                <OverflowText>{texts.firstLine}</OverflowText>
+                            </OverviewItemLine>
+                            <OverviewItemLine>
+                                <OverflowText>{texts.secondLine}</OverflowText>
+                            </OverviewItemLine>
+                        </OverviewItemDescription>
+                    </OverviewItem>
+                );
+            },
+        },
+        {
+            ...stepDefinitions.highlightElementA,
+            highlightElementQuery: "#actionA",
+        },
+        {
+            ...stepDefinitions.highlightElementB,
+            highlightElementQuery: "#actionB",
+        },
+        {
+            ...stepDefinitions.highlightElementLeft,
+            highlightElementQuery: "#textSection",
+        },
+        {
+            ...stepDefinitions.highlightElementC,
+            highlightElementQuery: "#actionC",
+        },
+        {
+            ...stepDefinitions.highlightElementD,
+            highlightElementQuery: "#actionD",
+        },
+    ],
+    onClose: () => {},
+    isOpen: false,
+};
+Default.args = defaultArgs;

package/src/components/VisualTour/stories/defaultTour.ts

@@ -0,0 +1,42 @@
+import { VisualTourStepDefinitions } from "../VisualTour";
+
+const definition = {
+    firstStep: {
+        title: "First step",
+        content: "This is a demonstration of a visual tour. A step can be simple text.",
+    },
+    customContent: {
+        title: "Custom content",
+        texts: {
+            firstLine: "Or a step can be arbitrary content that is displayed in a modal by default.",
+            secondLine: "The developer can choose what's appropriate.",
+        },
+    },
+    highlightElementA: {
+        title: "Highlight element A",
+        usableStepTarget: false,
+        content:
+            "It's possible to highlight specific elements on a page. The step content is then displayed in a kind of tooltip instead of a modal.",
+    },
+    highlightElementB: {
+        title: "Highlight element B",
+        usableStepTarget: true,
+        content: "Context overlay for another highlighted element.",
+    },
+    highlightElementLeft: {
+        title: "Highlight element on the left & portrait image",
+        image: "https://upload.wikimedia.org/wikipedia/commons/a/a3/Knowledge_graph_installation_at_the_Futurium_Berlin_21.jpg",
+        content: "The tooltip is placed where it is best seen by the user.",
+    },
+    highlightElementC: {
+        title: "Highlight element C & landscape image",
+        image: "https://upload.wikimedia.org/wikipedia/commons/1/15/Knowledge_graph_installation_at_the_Futurium_Berlin.jpg",
+        content: "Element outside tour container.",
+    },
+    highlightElementD: {
+        title: "Highlight element D",
+        content: "Element not visible at first.",
+    },
+} satisfies VisualTourStepDefinitions;
+
+export default definition;

package/src/components/VisualTour/visualTour.scss

@@ -0,0 +1,83 @@
+.#{$eccgui}-visual-tour {
+    opacity: 1;
+
+    --#{$eccgui}-visual-tour-focus-padding: #{0.5 * $eccgui-size-block-whitespace};
+}
+
+[class*="#{$eccgui}-visual-tour__highlighted-element"] {
+    .#{$eccgui}-overviewitem__actions--hiddeninteractions:has(&) {
+        display: inherit;
+    }
+}
+
+.#{$eccgui}-visual-tour__highlighted-element--useable {
+    position: relative;
+    z-index: 999999 !important;
+}
+
+.#{$eccgui}-visual-tour__focushelper {
+    position: absolute;
+    z-index: 8001; // 1 over application header
+    box-sizing: border-box;
+    border: 2px solid $eccgui-color-accent;
+    border-radius: var(--#{$eccgui}-visual-tour-focus-padding);
+    box-shadow: 0 0 0 10000px $eccgui-color-modal-backdrop;
+}
+
+.#{$eccgui}-visual-tour__backdrop {
+    position: fixed;
+    inset: 0;
+    box-sizing: content-box;
+    opacity: 0;
+}
+
+.#{$eccgui}-visual-tour__arrow {
+    &::before {
+        background: $card-background-color;
+    }
+
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="top"] & {
+        bottom: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="right"] & {
+        left: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="bottom"] & {
+        top: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="left"] & {
+        right: -0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-visual-tour__overlay {
+    z-index: 8002; // 2 over application header
+    &--small {
+        @extend .#{$eccgui}-tooltip--small;
+    }
+
+    &--medium {
+        @extend .#{$eccgui}-tooltip--medium;
+    }
+
+    &--large {
+        @extend .#{$eccgui}-tooltip--large;
+    }
+}
+
+.#{$eccgui}-card__content {
+    .#{$eccgui}-visual-tour__overlay__content & {
+        max-height: 45vh;
+    }
+    .#{$eccgui}-visual-tour__overlay__content &,
+    .#{$eccgui}-visual-tour__dialog & {
+        img {
+            display: block;
+            width: auto;
+            max-width: 100%;
+            height: auto;
+            max-height: 40vh;
+            margin: 0 auto;
+        }
+    }
+}

package/src/components/index.scss

@@ -3,6 +3,7 @@
 @import "./Breadcrumb/breadcrumb";
 @import "./Button/button";
 @import "./Card/card";
+@import "./Chat/chat";
 @import "./Checkbox/checkbox";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";
@@ -34,6 +35,7 @@
 @import "./TagInput/taginput";
 @import "./Toolbar/toolbar";
 @import "./Tooltip/tooltip";
+@import "./VisualTour/visualTour";
 @import "./Tree/tree";
 @import "./Typography/typography";
 @import "./Workspace/workspace";

package/src/components/index.ts

@@ -1,14 +1,13 @@
 export * from "./Accordion";
 export * from "./Application";
-export * from "./AutocompleteField";
-export * from "./SuggestField";
-export * from "./AutoSuggestion";
-export * from "./CodeAutocompleteField";
 export * from "./Badge/Badge";
 export * from "./Breadcrumb";
 export * from "./Button/Button";
 export * from "./Card";
+export * from "./Chat";
 export * from "./Checkbox/Checkbox";
+export * from "./CodeAutocompleteField";
+export * from "./ContentGroup/ContentGroup";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";
@@ -23,8 +22,7 @@ export * from "./Label/Label";
 export * from "./Link/Link";
 export * from "./List/List";
 export * from "./Menu";
-export * from "./MultiSelect/MultiSelect";
-export * from "./MultiSuggestField/MultiSuggestField";
+export * from "./MultiSuggestField";
 export * from "./Notification";
 export * from "./OverviewItem";
 export * from "./Pagination/Pagination";
@@ -38,16 +36,18 @@ export * from "./Skeleton/Skeleton";
 export * from "./Spinner/Spinner";
 export * from "./Sticky";
 export * from "./Structure";
+export * from "./SuggestField";
 export * from "./Switch/Switch";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TextReducer/TextReducer";
 export * from "./Toolbar";
 export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
+export * from "./VisualTour/VisualTour";
 export * from "./Workspace";
-export * from "./ContentGroup/ContentGroup";
 
 export * from "./interfaces";

package/src/configuration/_libprefix.scss

@@ -0,0 +1 @@
+$eccgui: "eccgui" !default;

package/src/configuration/_palettes.scss

@@ -0,0 +1,40 @@
+/**
+ * Base definition for colors.
+ * Can be overwritten if it is defined before this file is included.
+ * You need to define all or nothing, we currently don't support overwriting only some parts of it.
+ */
+
+$eccgui-color-palette-light: (
+    "identity": (
+        "brand": eccgui-create-color-tints(#fbead9 #f8cd99 #f6b966 #f4a533 #f29100),
+        "accent": eccgui-create-color-tints(#e5f4fb #aecfe3 #77abca #4186b2 #0a6199),
+        "text": eccgui-create-color-tints(#f8f8f8 #bcbcbc #818181 #434343 #090909),
+        "background": eccgui-create-color-tints(#fff #e8e8e8 #d6d6d6 #bfbfbf #a6a6a6),
+    ),
+    "semantic": (
+        "info": eccgui-create-color-tints(#e5f4fb #aecfe3 #77aaca #4086b2 #096199),
+        "success": eccgui-create-color-tints(#e8f5e9 #b1d4b7 #7ab286 #429154 #0b6f22),
+        "warning": eccgui-create-color-tints(#fff3e0 #fad2b3 #f5b287 #f0915a #eb702d),
+        "danger": eccgui-create-color-tints(#fff5f6 #edbfc0 #db8989 #c95253 #b71c1c),
+    ),
+    "layout": (
+        "yellow": eccgui-create-color-tints(#fff6d5 #f1ecb5 #e3db79 #d4c93c #a07d00),
+        "purple": eccgui-create-color-tints(#f8e9f7 #c8a2d1 #9d6eb8 #71378f #370e59),
+        "magenta": eccgui-create-color-tints(#ffeaf2 #f5a6c3 #e276a4 #be4c80 #8c1656),
+        "pink": eccgui-create-color-tints(#fde4f1 #e6b4ce #d08aae #bb5f8e #711c4d),
+        "violet": eccgui-create-color-tints(#f4e3f4 #d8b0d8 #b377b3 #904490 #6e1f6e),
+        "indigo": eccgui-create-color-tints(#efe4fb #b89ee0 #8f72c5 #6547aa #3b1e8f),
+        "petrol": eccgui-create-color-tints(#e7eef2 #b0c8d4 #7aa2b5 #437c97 #0c5678),
+        "cyan": eccgui-create-color-tints(#dff9fc #86d6e5 #5abfd4 #2da9c4 #006a8f),
+        "teal": eccgui-create-color-tints(#dff4ef #a3ddd3 #6dc0b2 #479d8d #104c42),
+        "lime": eccgui-create-color-tints(#e4f3ea #d2edd6 #9dcd99 #688a55 #5a7b2c),
+        "amber": eccgui-create-color-tints(#fff3d9 #ffe9c4 #f9cd8d #eeb757 #c77400),
+        "vermilion": eccgui-create-color-tints(#ffe8e2 #f5b8a8 #d48772 #8c4b3a #651c09),
+        "grey": eccgui-create-color-tints(#f5f6f7 #b7b7b7 #808080 #484848 #1c2329),
+    ),
+    "extra": (
+        "gold": eccgui-create-color-tints(#fff7d5 #ebd893 #dfc670 #d3b44e #c7a22b),
+        "silver": eccgui-create-color-tints(#f0f0f0 #dedede #ccc #bababa #a8a8a8),
+        "bronze": eccgui-create-color-tints(#fbe9db #f2d6bc #eac29d #e1af7e #d89b5f),
+    ),
+) !default;

package/src/configuration/_variables.scss

@@ -12,29 +12,30 @@
 */
 
 @use "sass:math";
-
-$eccgui: "eccgui" !default;
+@use "sass:map";
+@use "sass:list";
+@import "palettes";
 
 // -- Configuration stack of colors --------------------------------------------
 
-$eccgui-color-primary: rgb(254 143 1) !default;
-$eccgui-color-primary-contrast: rgb(255 255 255) !default;
-$eccgui-color-accent: rgb(10 103 163) !default;
-$eccgui-color-accent-contrast: rgb(255 255 255) !default;
-$eccgui-color-success-text: #1b5e20 !default;
-$eccgui-color-success-background: rgb(232 245 233) !default;
-$eccgui-color-info-text: rgb(21 101 192) !default;
-$eccgui-color-info-background: rgb(227 242 253) !default;
-$eccgui-color-warning-text: #e65100 !default;
-$eccgui-color-warning-background: rgb(255 243 224) !default;
-$eccgui-color-danger-text: #b71c1c !default;
-$eccgui-color-danger-background: rgb(255 235 238) !default;
-$eccgui-color-applicationheader-text: #222 !default;
-$eccgui-color-applicationheader-background: #ddd !default;
-$eccgui-color-workspace-text: #444 !default;
-$eccgui-color-workspace-background: #f5f5f5 !default;
-$eccgui-color-application-text: $eccgui-color-workspace-text !default; // deprecated
-$eccgui-color-application-background: $eccgui-color-workspace-background !default; // deprecated
+// @deprecated (v26) those variable cannot be set by other SCSS, the will only set here (no `default!` anymore)
+
+$eccgui-color-primary: eccgui-color-var("identity", "brand", "900") !default;
+$eccgui-color-primary-contrast: eccgui-color-var("identity", "brand", "100") !default;
+$eccgui-color-accent: eccgui-color-var("identity", "accent", "900") !default;
+$eccgui-color-accent-contrast: eccgui-color-var("identity", "accent", "100") !default;
+$eccgui-color-success-text: eccgui-color-var("semantic", "success", "900") !default;
+$eccgui-color-success-background: eccgui-color-var("semantic", "success", "100") !default;
+$eccgui-color-info-text: eccgui-color-var("semantic", "info", "900") !default;
+$eccgui-color-info-background: eccgui-color-var("semantic", "info", "100") !default;
+$eccgui-color-warning-text: eccgui-color-var("semantic", "warning", "900") !default;
+$eccgui-color-warning-background: eccgui-color-var("semantic", "warning", "100") !default;
+$eccgui-color-danger-text: eccgui-color-var("semantic", "danger", "900") !default;
+$eccgui-color-danger-background: eccgui-color-var("semantic", "danger", "100") !default;
+$eccgui-color-applicationheader-text: eccgui-color-var("identity", "text", "900") !default;
+$eccgui-color-applicationheader-background: eccgui-color-var("identity", "background", "500") !default;
+$eccgui-color-workspace-text: eccgui-color-var("identity", "text", "700") !default;
+$eccgui-color-workspace-background: eccgui-color-var("identity", "background", "300") !default;
 
 // -- Configuration stack of typography ----------------------------------------
 

package/src/configuration/constants.ts

@@ -1,2 +1,4 @@
 // basic vars
 export const CLASSPREFIX = "eccgui";
+export const COLORMINDISTANCE = 10;
+export const COLORMINCONTRAST = 4;

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
-import { foldKeymap } from "@codemirror/language";
+import { defaultHighlightStyle, foldKeymap } from "@codemirror/language";
 import { EditorState, Extension, Compartment } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
@@ -30,11 +30,13 @@ import {
     adaptedHighlightSpecialChars,
     adaptedLineNumbers,
     adaptedLintGutter,
-    adaptedPlaceholder, compartment,
+    adaptedPlaceholder,
+    compartment,
+    adaptedSyntaxHighlighting,
 } from "./tests/codemirrorTestHelper";
 import { ExtensionCreator } from "./types";
 
-export interface CodeEditorProps extends TestableComponent {
+export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">, TestableComponent {
     // Is called with the editor instance that allows access via the CodeMirror API
     setEditorView?: (editor: EditorView | undefined) => void;
     /**
@@ -53,9 +55,8 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Handler method to receive onChange events.
      * As input the new value is given.
-     * @deprecated (v25) use `(v: string) => void` in future
      */
-    onChange?: (v: any) => void;
+    onChange?: (v: string) => void;
     /**
      *  Called when the focus status changes
      */
@@ -99,7 +100,11 @@ export interface CodeEditorProps extends TestableComponent {
     /** Long lines are wrapped and displayed on multiple lines */
     wrapLines?: boolean;
 
-    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
+    /**
+     * Add properties to the `div` used as warpper element.
+     * @deprecated (v26) You can now use all properties directly on `CodeEditor`.
+     */
+    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id" | "data-testid" | "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">;
 
     /**
      * Size in spaces that is used for a tabulator key.
@@ -185,6 +190,7 @@ const ModeToolbarSupport: ReadonlyArray<SupportedCodeEditorModes> = ["markdown"]
  * Includes a code editor, currently we use CodeMirror library as base.
  */
 export const CodeEditor = ({
+    className,
     onChange,
     onSelection,
     onMouseDown,
@@ -212,7 +218,6 @@ export const CodeEditor = ({
     enableTab = false,
     height,
     useLinting = false,
-    "data-test-id": dataTestId,
     autoFocus = false,
     disabled = false,
     intent,
@@ -353,6 +358,7 @@ export const CodeEditor = ({
             wrapLinesCompartment.current.of(addExtensionsFor(wrapLines, EditorView?.lineWrapping)),
             supportCodeFoldingCompartment.current.of(addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding())),
             useLintingCompartment.current.of(addExtensionsFor(useLinting, ...linters)),
+            adaptedSyntaxHighlighting(defaultHighlightStyle),
             additionalExtensions,
         ];
 
@@ -488,14 +494,13 @@ export const CodeEditor = ({
             // overwrite/extend some attributes
             id={id ? id : name ? `codemirror-${name}` : undefined}
             ref={parent}
-            // @deprecated (v25) fallback with static test id will be removed
-            data-test-id={dataTestId ? dataTestId : "codemirror-wrapper"}
+            {...otherCodeEditorProps}
             className={
                 `${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}` +
+                (className ? ` ${className}` : "") +
                 (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "") +
                 (hasToolbarSupport ? ` ${eccgui}-codeeditor--has-toolbar` : "")
             }
-            {...otherCodeEditorProps}
         >
             {hasToolbarSupport && editorToolbar(mode)}
         </div>

package/src/extensions/codemirror/_codemirror.scss

@@ -71,7 +71,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
 
         @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
             &.#{eccgui}-intent--#{$each-intent} {
-                background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+                background-color: eccgui-color-mix($each-bgcolor 24%, $eccgui-color-textfield-background);
                 animation-name: intent-state-flash-#{$each-intent};
             }
         }
@@ -195,7 +195,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
             &::after {
                 position: absolute;
                 left: 10%;
-                color: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
+                color: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
                 content: "⇥";
             }
         }

package/src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts

@@ -5,6 +5,8 @@ import { markdown } from "@codemirror/lang-markdown";
 import { sql } from "@codemirror/lang-sql";
 import { xml } from "@codemirror/lang-xml";
 import { yaml } from "@codemirror/lang-yaml";
+import {html} from "@codemirror/lang-html"
+
 import { defaultHighlightStyle, LanguageSupport, StreamLanguage, StreamParser } from "@codemirror/language";
 //legacy mode imports
 import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
@@ -30,6 +32,7 @@ const supportedModes = {
     mathematica,
     sql,
     javascript,
+    html
 } as const;
 
 export const supportedCodeEditorModes = Object.keys(supportedModes) as Array<keyof typeof supportedModes>;
@@ -42,6 +45,7 @@ const v6AdaptedModes: ReadonlyMap<SupportedCodeEditorModes, boolean> = new Map([
     ["sql", true],
     ["yaml", true],
     ["javascript", true],
+    ["html", true]
 ]);
 
 export const useCodeMirrorModeExtension = (mode?: SupportedCodeEditorModes) => {

package/src/extensions/react-flow/_config.scss

@@ -1,16 +1,22 @@
+$reactflow-background-color: $card-background-color !default;
 $reactflow-node-basesize: $button-height !default;
 $reactflow-node-largesize: mini-units(6) !default;
-$reactflow-node-border-color: $eccgui-color-workspace-text !default;
-$reactflow-node-background-color: $button-background-color !default;
+$reactflow-node-border-color: #{eccgui-color-var("identity", "text", "700")} !default;
+$reactflow-node-background-color: #{eccgui-color-var("layout", "grey", "100")} !default;
 $reactflow-node-color: $eccgui-color-workspace-text !default;
 $reactflow-node-font-size: $eccgui-size-typo-caption !default;
 $reactflow-node-border-width: 2 * $button-border-width !default;
 $reactflow-node-border-radius: $button-border-radius !default;
-$reactflow-edge-stroke-opacity-default: 0.6 !default;
-$reactflow-edge-stroke-opacity-hover: 0.8 !default;
-$reactflow-edge-stroke-opacity-selected: 1 !default;
-$reactflow-edge-stroke-color-default: $eccgui-color-workspace-text !default;
-$reactflow-edge-stroke-color-hover: $eccgui-color-workspace-text !default;
+$reactflow-edge-rendering: geometricprecision !default;
+$reactflow-edge-stroke-width-default: 2px !default;
+$reactflow-edge-stroke-width-hover: 2px !default;
+$reactflow-edge-stroke-width-selected: 2px !default;
+$reactflow-edge-stroke-opacity-default: $eccgui-opacity-muted !default;
+$reactflow-edge-stroke-opacity-hover: $eccgui-opacity-narrow !default;
+$reactflow-edge-stroke-opacity-selected: $eccgui-opacity-regular !default;
+$reactflow-edge-stroke-opacity-interaction-ratio: $eccgui-opacity-ghostly !default;
+$reactflow-edge-stroke-color-default: #{eccgui-color-var("identity", "text", "700")} !default;
+$reactflow-edge-stroke-color-hover: $reactflow-edge-stroke-color-default !default;
 $reactflow-edge-stroke-color-selected: $eccgui-color-accent !default;
 $reactflow-transition-time: 0.25s !default;
 $reactflow-transition-function: "" !default;

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

@@ -1,10 +1,7 @@
 @import "config";
 @import "nodes/nodes";
 @import "edges/edges";
+@import "markers/markers";
 @import "handles/handles";
 @import "minimap/minimap";
 @import "react-flow_v12";
-
-.react-flow__background {
-    border: solid 1px $eccgui-color-separation-divider;
-}