@eccenca/gui-elements 23.0.0-rc.2 → 23.0.0-rc.3-unofficial.0

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

@@ -0,0 +1,134 @@
+import React from "react";
+import { Tag, TagList, SimpleDialog, Icon, Button, FieldItem } from "./../../../index";
+import getColorConfiguration from "../../../common/utils/getColorConfiguration";
+import { CodeEditor } from "../../../extensions";
+
+export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
+
+export type StickyNoteMetadataType = { note: string; color: string };
+
+export interface StickyNoteModalProps {
+    /**
+     * sticky data containing the sticky note and the selected color
+     */
+    metaData?: StickyNoteMetadataType;
+    /**
+     * utility to close the sticky note modal when cancelled as well as closed also
+     */
+    onClose: () => void;
+    /**
+     * utility to save recently entered metadata for sticky
+     *  note and add on to the canvas
+     */
+    onSubmit: (data: StickyNoteMetadataType) => void;
+    /**
+     * translation utility for language compatibility
+     */
+    translate: (key: StickyNoteModalTranslationKeys) => string;
+}
+
+export const StickyNoteModal: React.FC<StickyNoteModalProps> = ({ metaData, onClose, onSubmit, translate }) => {
+    const refNote = React.useRef<string>(metaData?.note ?? "");
+    const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
+    const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(([key, value]) => [
+        key,
+        value as string,
+    ]);
+
+    React.useEffect(() => {
+        if (!color && noteColors[0][1]) {
+            setSelectedColor(noteColors[0][1]);
+        }
+    }, [color, noteColors]);
+
+    const wrapperDivProps: { [key: string]: (event: any) => any } = {
+        // Prevent react-flow from getting these events
+        onContextMenu: (event) => event.stopPropagation(),
+        onDrag: (event) => event.stopPropagation(),
+        onDragStart: (event) => event.stopPropagation(),
+        onDragEnd: (event) => event.stopPropagation(),
+        onMouseDown: (event) => event.stopPropagation(),
+        onMouseUp: (event) => event.stopPropagation(),
+        onClick: (event) => event.stopPropagation(),
+    };
+
+    const predefinedColorsMenu = (
+        <TagList>
+            {noteColors &&
+                noteColors.map(([colorName, colorValue]) => {
+                    const selectedFeedback =
+                        color === colorValue
+                            ? {
+                                  icon: <Icon name="state-checkedsimple" />,
+                                  large: true,
+                              }
+                            : {};
+                    return (
+                        <Tag
+                            round
+                            onClick={() => setSelectedColor(colorValue)}
+                            backgroundColor={colorValue}
+                            {...selectedFeedback}
+                            key={colorName}
+                        />
+                    );
+                })}
+        </TagList>
+    );
+
+    return (
+        <SimpleDialog
+            data-test-id={"sticky-note-modal"}
+            size="small"
+            title={translate("modalTitle")}
+            hasBorder
+            isOpen
+            onClose={onClose}
+            wrapperDivProps={wrapperDivProps}
+            actions={[
+                <Button
+                    key="submit"
+                    data-test-id="sticky-submit-btn"
+                    affirmative
+                    onClick={() => {
+                        onSubmit({ note: refNote.current, color: color || "#444444" });
+                        onClose();
+                    }}
+                >
+                    {translate("saveButton")}
+                </Button>,
+                <Button key="cancel" onClick={onClose}>
+                    {translate("cancelButton")}
+                </Button>,
+            ]}
+        >
+            <FieldItem
+                key="note"
+                labelProps={{
+                    htmlFor: "noteinput",
+                    text: translate("noteLabel"),
+                }}
+            >
+                <CodeEditor
+                    name={translate("noteLabel")}
+                    id={"sticky-note-input"}
+                    mode="markdown"
+                    preventLineNumbers
+                    onChange={(value) => {
+                        refNote.current = value;
+                    }}
+                    defaultValue={refNote.current}
+                />
+            </FieldItem>
+            <FieldItem
+                key="color"
+                labelProps={{
+                    htmlFor: "colorinput",
+                    text: translate("colorLabel"),
+                }}
+            >
+                {predefinedColorsMenu}
+            </FieldItem>
+        </SimpleDialog>
+    );
+};

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

@@ -2,4 +2,4 @@
 @import "edges";
 @import "handles";
 @import "minimap";
-@import "nodes";
+@import "./nodes";

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

@@ -5,8 +5,12 @@
 }
 
 @mixin mapcoloring($color) {
-    fill: $color;
-    stroke: $color;
+    &:not([fill]) {
+        fill: $color;
+    }
+    &:not([stroke]) {
+        stroke: $color;
+    }
 }
 
 // Graph node type

package/src/cmem/react-flow/configuration/graph.ts

@@ -1,5 +1,6 @@
 import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import { GRAPH_NODE_TYPES } from "./typing";
 
 const edgeTypes = {
     default: EdgeDefault,
@@ -13,7 +14,7 @@ const edgeTypes = {
     danger: EdgeDefault,
 };
 
-const nodeTypes = {
+const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode> = {
     default: NodeDefault,
     graph: NodeDefault,
     class: NodeDefault,
@@ -21,7 +22,4 @@ const nodeTypes = {
     property: NodeDefault,
 };
 
- export {
-     edgeTypes,
-     nodeTypes,
- }
+export { edgeTypes, nodeTypes };

package/src/cmem/react-flow/configuration/linking.ts

@@ -1,6 +1,7 @@
-
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import { StickyNoteNode } from "./../nodes/StickyNoteNode";
+import { LINKING_NODE_TYPES } from "./typing";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -11,16 +12,14 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,
     transformation: NodeDefault,
     comparator: NodeDefault,
     aggregator: NodeDefault,
+    stickynote: StickyNoteNode,
 };
 
- export {
-     edgeTypes,
-     nodeTypes,
- }
+export { edgeTypes, nodeTypes };

package/src/cmem/react-flow/configuration/typing.ts

@@ -0,0 +1,30 @@
+/** node types for linking editor nodes  */
+export enum LINKING_NODE_TYPES {
+    default = "default",
+    sourcepath = "sourcepath",
+    targetpath = "targetpath",
+    transformation = "transformation",
+    comparator = "comparator",
+    aggregator = "aggregator",
+    stickynote = "stickynote",
+}
+
+/** node types for workflow editor nodes */
+export enum WORKFLOW_NODE_TYPES {
+    default = "default",
+    dataset = "dataset",
+    linking = "linking",
+    transform = "transform",
+    task = "task",
+    workflow = "workflow",
+    stickynote = "stickynote",
+}
+
+/** node types for graph editor */
+export enum GRAPH_NODE_TYPES {
+    default = "default",
+    graph = "graph",
+    class = "class",
+    instance = "instance",
+    property = "property",
+}

package/src/cmem/react-flow/configuration/workflow.ts

@@ -1,5 +1,7 @@
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+import { StickyNoteNode } from "./../nodes/StickyNoteNode";
+import { WORKFLOW_NODE_TYPES } from "./typing";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -8,16 +10,14 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes = {
+const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode> = {
     default: NodeDefault,
     dataset: NodeDefault,
     linking: NodeDefault,
     transform: NodeDefault,
     task: NodeDefault,
     workflow: NodeDefault,
+    stickynote: StickyNoteNode,
 };
 
- export {
-     edgeTypes,
-     nodeTypes,
- }
+export { edgeTypes, nodeTypes };

package/src/cmem/react-flow/nodes/StickyNoteNode.tsx

@@ -0,0 +1,13 @@
+import React, { memo } from "react";
+import { NodeDefault, NodeProps } from "./../../../extensions/react-flow/nodes/NodeDefault";
+
+export const StickyNoteNode = memo((node: NodeProps<any>) => {
+    const {
+        data,
+        ...otherNodeProps
+    } = node;
+
+    data.minimalShape = data.minimalShape??"none";
+
+    return <NodeDefault data={data} {...otherNodeProps} />;
+});

package/src/cmem/react-flow/nodes/_index.scss

@@ -0,0 +1,2 @@
+@import "stickynote";
+@import "colors";

package/src/cmem/react-flow/nodes/_stickynote.scss

@@ -0,0 +1,72 @@
+.react-flow__node-stickynote {
+    .#{$eccgui}-graphviz__node {
+        &:not(.#{$eccgui}-graphviz__node--minimal-rectangular),
+        &:not(.#{$eccgui}-graphviz__node--minimal-circular) {
+            .#{$eccgui}-graphviz__node__header {
+                color: currentColor;
+                position: absolute;
+                width: 100%;
+                height: 0px;
+                top: 0;
+                align-items: flex-start;
+                min-height: unset;
+            }
+            .#{$eccgui}-graphviz__node__header-label {
+                visibility: hidden;
+            }
+            .#{$eccgui}-graphviz__node__content {
+                color: currentColor;
+                background: transparent;
+                padding: $eccgui-size-block-whitespace / 2;
+            }
+        }
+    }
+    .#{$eccgui}-graphviz__node__header-menu {
+        display: none;
+    }
+    &.selected, &:hover {
+        .#{$eccgui}-graphviz__node__header-menu {
+            display: block;
+            opacity: $eccgui-opacity-muted;
+        }
+    }
+    &.selected {
+        .#{$eccgui}-graphviz__node__header-menu {
+            opacity: $eccgui-opacity-regular;
+        }
+    }
+    .#{$eccgui}-typography__contentblock {
+        h1 {
+            font-size: $eccgui-size-typo-subtitle;
+            line-height: $eccgui-size-typo-subtitle-lineheight;
+            font-weight: $eccgui-font-weight-bold;
+        }
+
+        h2 {
+            font-size: $eccgui-size-typo-subtitle;
+            line-height: $eccgui-size-typo-subtitle-lineheight;
+            font-weight: $eccgui-font-weight-regular;
+        }
+
+        h3 {
+            font-size: $eccgui-size-typo-text;
+            line-height: $eccgui-size-typo-text-lineheight;
+            font-weight: $eccgui-font-weight-bold;
+        }
+
+        h4 {
+            font-size: $eccgui-size-typo-text;
+            line-height: $eccgui-size-typo-text-lineheight;
+            font-weight: $eccgui-font-weight-regular;
+        }
+    }
+}
+
+.#{eccgui}-configuration--colors__stickynotes {
+    --yellowish: #ffd54f;
+    --blueish: #3a7896;
+    --purplish: #ae3c74;
+    --success: #{$eccgui-color-success-text};
+    --warning: #{$eccgui-color-warning-text};
+    --danger: #{$eccgui-color-danger-text};
+}

package/src/common/utils/CssCustomProperties.ts

@@ -90,11 +90,11 @@ export default class CssCustomProperties {
         const { propertyType = "all", ...otherFilters } = filter;
         return CssCustomProperties.listLocalCssStyleRules(otherFilters)
             .map((cssrule) => {
-                return [...cssrule.style]
+                return [...(cssrule as CSSStyleRule).style]
                     .map((propertyname) => {
                         return [
                             propertyname.trim(),
-                            cssrule.style.getPropertyValue(propertyname).trim()
+                            (cssrule as CSSStyleRule).style.getPropertyValue(propertyname).trim()
                         ];
                     });
             })

package/src/common/utils/getColorConfiguration.ts

@@ -2,7 +2,7 @@ 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";
+type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-workflow" | "stickynotes";
 
 /**
  * Read and returns color values provided by CSS custom properties.
@@ -12,7 +12,6 @@ type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-work
 const getColorConfiguration = (configId: colorconfigs) => {
     return new CssCustomProperties({
         selectorText: `.${eccgui}-configuration--colors__${configId}`,
-        cssRuleType: "CSSStyleRule",
         removeDashPrefix: true,
         returnObject: true,
     }).customProperties();

package/src/components/Accordion/accordion.scss

@@ -9,10 +9,10 @@
     color: inherit;
 
     .#{$prefix}--accordion__arrow {
-        margin: 0 $eccgui-size-block-whitespace / 2 0 0;
+        margin: 0 $eccgui-size-block-whitespace * 0.5 0 0;
 
         .#{$prefix}--accordion--start & {
-            margin: 0 0 0 $eccgui-size-block-whitespace / 2;
+            margin: 0 0 0 $eccgui-size-block-whitespace * 0.5;
         }
     }
 }
@@ -25,27 +25,27 @@
     margin: 0 0 0 $eccgui-size-block-whitespace;
 
     .#{$prefix}--accordion--start & {
-        margin: 0 0 0 $eccgui-size-block-whitespace / 2;
+        margin: 0 0 0 $eccgui-size-block-whitespace * 0.5;
     }
 }
 
 .#{$prefix}--accordion__content {
-    padding: $eccgui-size-block-whitespace / 2;
-    margin: 0 calc(1rem + #{$eccgui-size-block-whitespace / 2}) 0 $eccgui-size-block-whitespace / 2;
+    padding: $eccgui-size-block-whitespace * 0.5;
+    margin: 0 calc(1rem + #{$eccgui-size-block-whitespace * 0.5}) 0 $eccgui-size-block-whitespace * 0.5;
     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;
+        padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace $eccgui-size-block-whitespace * 0.5;
         opacity: 1;
         position: static;
         left: auto;
     }
 
     .#{$prefix}--accordion--start & {
-        margin: 0 $eccgui-size-block-whitespace / 2 0 calc(1rem + #{$eccgui-size-block-whitespace / 2});
+        margin: 0 $eccgui-size-block-whitespace * 0.5 0 calc(1rem + #{$eccgui-size-block-whitespace * 0.5});
     }
 
     .#{$eccgui}-accordion__item--fullwidth & {
@@ -84,19 +84,19 @@
         }
 
         .#{$prefix}--accordion__title {
-            margin: 0 0 0 $eccgui-size-block-whitespace / 4;
+            margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
 
             .#{$prefix}--accordion--start & {
-                margin: 0 0 0 $eccgui-size-block-whitespace / 4;
+                margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
             }
         }
     }
 
     .#{$prefix}--accordion__content {
-        padding: $eccgui-size-block-whitespace / 4 0;
+        padding: $eccgui-size-block-whitespace * 0.25 0;
 
         .#{$prefix}--accordion__item--active & {
-            padding: $eccgui-size-block-whitespace / 4 0;
+            padding: $eccgui-size-block-whitespace * 0.25 0;
         }
     }
 }

package/src/components/Application/_header.scss

@@ -68,12 +68,13 @@ $shell-header-link: $carbon--blue-60 !default;
 
 
 span.#{$prefix}--header__name {
-    @extend a.#{$prefix}--header__name;
+    // @extend a.#{$prefix}--header__name;
+    @extend .#{$prefix}--header__name;
 }
 
 .#{$prefix}--header__name {
     &.#{$eccgui}-application__title--withsidebar {
-        padding-right: $eccgui-size-block-whitespace / 2;
+        padding-right: $eccgui-size-block-whitespace * 0.5;
     }
 }
 
@@ -91,7 +92,7 @@ span.#{$prefix}--header__name {
 
 .#{$eccgui}-application__title--depiction {
     display: inline-block;
-    margin-right: $eccgui-size-block-whitespace / 2;
+    margin-right: $eccgui-size-block-whitespace * 0.5;
 
     & > * {
         display: none;

package/src/components/Button/button.scss

@@ -1,11 +1,14 @@
+@use "sass:color";
+@use "sass:map";
+
 $button-height: $pt-button-height;
 $button-border-width: 1px; // !default;
-$button-padding: ($pt-grid-size / 2) $pt-grid-size; // !default;
+$button-padding: ($pt-grid-size * 0.5) $pt-grid-size; // !default;
 $button-border-radius: $pt-border-radius;
 // $button-padding-small: 0 ($pt-grid-size * 0.7) !default;
-// $button-padding-large: ($pt-grid-size / 2) ($pt-grid-size * 1.5) !default;
-// $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) / 2 !default;
-// $button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) / 2 !default;
+// $button-padding-large: ($pt-grid-size * 0.5) ($pt-grid-size * 1.5) !default;
+// $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
+// $button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
 // $button-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 (-$button-border-width) 0 rgba($black, 0.1) !default;
 // $button-box-shadow-active: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 1px 2px rgba($black, 0.2) !default;
 // $button-intent-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.4), inset 0 (-$button-border-width) 0 rgba($black, 0.2) !default;
@@ -44,10 +47,44 @@ $dark-button-gradient: $button-gradient; // !default; // linear-gradient(to bott
 // $button-outlined-border-intent-opacity: 0.6 !default;
 // $button-outlined-border-disabled-intent-opacity: 0.2 !default;
 
+$button-intents: (
+  "primary": ($eccgui-color-accent, color.scale($eccgui-color-accent, $lightness: -20%), color.scale($eccgui-color-accent, $lightness: -40%)),
+  "success": ($eccgui-color-success-text, color.scale($eccgui-color-success-text, $lightness: -20%), color.scale($eccgui-color-success-text, $lightness: -40%)),
+  "warning": ($eccgui-color-warning-text, color.scale($eccgui-color-warning-text, $lightness: -20%), color.scale($eccgui-color-warning-text, $lightness: -40%)),
+  "danger": ($eccgui-color-danger-text, color.scale($eccgui-color-danger-text, $lightness: -20%), color.scale($eccgui-color-danger-text, $lightness: -40%))
+);
+
 @import "~@blueprintjs/core/src/components/button/button";
 
-.#{$ns}-button.#{$ns}-large {
-    min-height: mini-units(6);
+.#{$ns}-button {
+    .#{$ns}-large {
+        min-height: mini-units(6);
+    }
+    // special case override: blueprint do not use configured colors here
+    &.#{$ns}-intent-warning {
+      @include pt-button-intent(map.get($button-intents, "warning")...);
+
+      &:not(.#{$ns}-disabled).#{$ns}-icon > svg {
+        fill: rgba($white, 0.7);
+      }
+
+      &:not(.#{$ns}-disabled):not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
+        @include pt-button-intent(map.get($button-intents, "warning")...);
+      }
+
+      &.#{$ns}-minimal,
+      &.#{$ns}-outlined {
+        background: none;
+        box-shadow: none;
+        color: $eccgui-color-warning-text;
+        border-color: $eccgui-color-warning-text;
+
+        &:disabled,
+        &.#{$ns}-disabled {
+            color: rgba($eccgui-color-warning-text, 0.39);
+        }
+      }
+    }
 }
 
 .#{$ns}-button-text {

package/src/components/Card/card.scss

@@ -49,7 +49,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__header {
-    padding: $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing;
+    padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing;
     box-sizing: content-box;
     flex-grow: 0;
     flex-shrink: 0;
@@ -83,7 +83,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__content {
-    padding: $eccgui-size-card-spacing/2 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
+    padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
     flex-grow: 1;
     flex-shrink: 1;
     overflow: auto;
@@ -95,7 +95,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__actions {
-    padding: $eccgui-size-card-spacing/4;
+    padding: $eccgui-size-card-spacing * 0.25;
     flex-grow: 0;
     flex-shrink: 0;
     display: flex;
@@ -103,7 +103,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     align-items: center;
 
     & > * {
-        margin: $eccgui-size-card-spacing/4;
+        margin: $eccgui-size-card-spacing * 0.25;
     }
 
     &.#{$eccgui}-intent--success > .#{$eccgui}-button:first-child {
@@ -133,7 +133,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     align-items: center;
 
     & > * {
-        margin: $eccgui-size-card-spacing/4;
+        margin: $eccgui-size-card-spacing * 0.25;
     }
 
     .#{$eccgui}-card__actions--inversedirection > & {

package/src/components/ContextOverlay/ContextMenu.stories.tsx

@@ -25,6 +25,9 @@ export const Default = Template.bind({});
 Default.args = {
     children: [
         <MenuItem key="m0" text={"First option"} />,
-        <MenuItem key="m1" text={"Item two"} />
+        <MenuItem key="m1" text={"Item two"}>
+            <MenuItem key="m0" text={"First sub option"} />
+            <MenuItem key="m1" text={"Sub item two"} />
+        </MenuItem>
     ]
 }

package/src/components/ContextOverlay/contextoverlay.scss

@@ -1,6 +1,6 @@
 /*
-$popover-background-color: $white !default;
-$dark-popover-background-color: $dark-gray4 !default;
+$pt-popover2-background-color: $white !default;
+$pt-dark-popover2-background-color: $dark-gray4 !default;
 */
 
 @import "~@blueprintjs/popover2/src/popover2";
@@ -13,3 +13,15 @@ $dark-popover-background-color: $dark-gray4 !default;
     cursor: pointer;
     max-width: 100%;
 }
+
+.#{$ns}-submenu.#{$ns}-popover > .#{$ns}-popover-content {
+    // fix for submenu items in overlays/popovers
+    background-color: $pt-popover2-background-color;
+}
+
+.#{$ns}-overlay-start-focus-trap,
+.#{$ns}-overlay-end-focus-trap {
+    &:focus-visible {
+        outline: none;
+    }
+}

package/src/components/Dialog/dialog.scss

@@ -1,12 +1,14 @@
+@use "sass:math";
+
 // our vars
-$eccgui-size-modal-tiny-width: 4/16 * 100vw !default;
-$eccgui-size-modal-tiny-height: 1/9 * 100vh !default;
-$eccgui-size-modal-small-width: 6/16 * 100vw !default;
-$eccgui-size-modal-small-height: 2/9 * 100vh !default;
-$eccgui-size-modal-regular-width: 6/16 * 100vw !default;
-$eccgui-size-modal-regular-height: 3/9 * 100vh !default;
-$eccgui-size-modal-large-width: 8/16 * 100vw !default;
-$eccgui-size-modal-large-height: 6/9 * 100vh !default;
+$eccgui-size-modal-tiny-width: math.div(4, 16) * 100vw !default;
+$eccgui-size-modal-tiny-height:  math.div(1, 9) * 100vh !default;
+$eccgui-size-modal-small-width:  math.div(6, 16) * 100vw !default;
+$eccgui-size-modal-small-height:  math.div(2, 9) * 100vh !default;
+$eccgui-size-modal-regular-width:  math.div(6, 16) * 100vw !default;
+$eccgui-size-modal-regular-height:  math.div(3, 9) * 100vh !default;
+$eccgui-size-modal-large-width:  math.div(8, 16) * 100vw !default;
+$eccgui-size-modal-large-height:  math.div(6, 9) * 100vh !default;
 $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0.69) !default;
 
 @import "~@blueprintjs/core/src/components/dialog/dialog";