@eccenca/gui-elements 24.4.1-featurepreparefinalnextcmem6943.2 → 25.0.0-rc.0

package/src/components/Icon/stories/Icon.stories.tsx

@@ -2,7 +2,18 @@ import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Button, Icon } from "../../../../index";
+import {
+    Card,
+    FlexibleLayoutContainer,
+    FlexibleLayoutItem,
+    Icon,
+    OverflowText,
+    OverviewItem,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+    OverviewItemLine,
+    TitleSubsection,
+} from "../../../../index";
 import { Definitions } from "../../../common/Intent";
 import BaseIcon from "../BaseIcon";
 
@@ -19,7 +30,8 @@ export default {
         },
         intent: {
             control: "select",
-            options: { ...Definitions },
+            options: [...Object.keys(Definitions)],
+            mapping: { ...Definitions },
         },
     },
 } as Meta<typeof Icon>;
@@ -49,12 +61,60 @@ IconSizes.args = {
     name: "undefined",
 };
 
+/**
+ * Available icons by their canonical names.
+ * If you need another icon then use `<TestIcon /`> component.
+ */
 export const IconsOverview = () => {
+    let section = "";
+    let separation = <></>;
     return (
         <OverlaysProvider>
-            {Object.keys(canonicalIcons).map((iconName) => {
-                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} key={iconName} />;
-            })}
+            <FlexibleLayoutContainer
+                noEqualItemSpace
+                gapSize="small"
+                style={{ flexWrap: "wrap", justifyContent: "flex-start" }}
+            >
+                {Object.keys(canonicalIcons)
+                    .sort()
+                    .map((iconName) => {
+                        if (
+                            section !==
+                            iconName.substring(0, iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length)
+                        ) {
+                            section = iconName.substring(
+                                0,
+                                iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length
+                            );
+                            separation = (
+                                <FlexibleLayoutItem style={{ width: "100%", padding: "1rem 0 0.5rem 0" }}>
+                                    <TitleSubsection>{section}</TitleSubsection>
+                                </FlexibleLayoutItem>
+                            );
+                        } else {
+                            separation = <></>;
+                        }
+                        return (
+                            <React.Fragment key={iconName}>
+                                {separation}
+                                <FlexibleLayoutItem growFactor={0} style={{ width: "20rem" }}>
+                                    <Card>
+                                        <OverviewItem>
+                                            <OverviewItemDepiction keepColors>
+                                                <Icon name={iconName as ValidIconName} />
+                                            </OverviewItemDepiction>
+                                            <OverviewItemDescription>
+                                                <OverviewItemLine small>
+                                                    <OverflowText>{iconName}</OverflowText>
+                                                </OverviewItemLine>
+                                            </OverviewItemDescription>
+                                        </OverviewItem>
+                                    </Card>
+                                </FlexibleLayoutItem>
+                            </React.Fragment>
+                        );
+                    })}
+            </FlexibleLayoutContainer>
         </OverlaysProvider>
     );
 };

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -5,13 +5,13 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { IconButton, TestIcon } from "../../../../index";
 
+import buttonStory from "./../../Button/Button.stories";
 import canonicalIcons from "./../canonicalIconNames";
 
 export default {
     title: "Components/IconButton",
     component: IconButton,
     argTypes: {
-        text: { control: "text" },
         name: {
             control: "select",
             options: ["Test icon", ...Object.keys(canonicalIcons)],
@@ -20,6 +20,7 @@ export default {
                 ...Object.keys(canonicalIcons),
             },
         },
+        intent: buttonStory.argTypes?.intent,
     },
 } as Meta<typeof IconButton>;
 

package/src/components/Notification/Notification.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { LoremIpsum } from "react-lorem-ipsum";
+import { LoremIpsum, loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Button, HtmlContentBlock, Notification, Spacing } from "../../../index";
+import { Button, HtmlContentBlock, Markdown, Notification, Spacing } from "../../../index";
 
 export default {
     title: "Components/Notification",
@@ -33,12 +33,26 @@ ExampleWithMessage.args = {
 export const ExampleWithChildren = TemplateFull.bind({});
 ExampleWithChildren.args = {
     children: (
-        <HtmlContentBlock>
-            <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
-            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
-        </HtmlContentBlock>
+        <>
+            <HtmlContentBlock>
+                <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
+                <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+            <br />
+            <Markdown
+                htmlContentBlockProps={{
+                    style: {
+                        maxHeight: "25vh",
+                        overflow: "auto",
+                    },
+                }}
+            >
+                {"```\n" + loremIpsum({ random: false }) + "\n```"}
+            </Markdown>
+        </>
     ),
     onDismiss: false, // workaround for undefined function in Storybook
+    actions: [<></>],
 };
 
 export const ExampleNeutralMessage = TemplateFull.bind({});

package/src/components/Notification/notification.scss

@@ -3,6 +3,10 @@
 @use "sass:math";
 @import "~@blueprintjs/core/src/components/toast/toast";
 
+.#{$ns}-toast-message {
+    min-width: 0;
+}
+
 .#{$eccgui}-notification {
     width: 100%;
     min-width: math.div(4, 16) * 100vw;
@@ -69,13 +73,14 @@
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-    margin: -10px; // TODO: use blueprint var ofr toast padding here
+    margin: -0.5 * $toast-margin;
 }
 
 .#{$eccgui}-notification__messagebody {
     flex-grow: 1;
     flex-shrink: 1;
-    padding: 10px; // TODO: use blueprint var ofr toast padding here
+    min-width: 0;
+    padding: 0.5 * $toast-margin;
 }
 
 .#{$eccgui}-notification__actions {

package/src/components/ProgressBar/Stories/ProgressBar.stories.tsx

@@ -1,11 +1,17 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 import { ProgressBar } from "../../../../index";
 export default {
     title: "Components/ProgressBar",
     component: ProgressBar,
-    argTypes: {},
+    argTypes: {
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+        },
+    },
 } as Meta<typeof ProgressBar>;
 
 const ProgressBarExample: StoryFn<typeof ProgressBar> = (args) => <ProgressBar {...args}></ProgressBar>;

package/src/components/Select/Select.stories.tsx

@@ -53,7 +53,7 @@ export const ControlledTarget = Template.bind({});
 ControlledTarget.args = {
     ...Default.args,
     fill: false,
-    children: <Button text="Controlled select target" intent="primary" />,
+    children: <Button text="Controlled select target" elevated />,
     onActiveItemChange: fn(),
 };
 

package/src/components/Spinner/Spinner.tsx

@@ -9,10 +9,11 @@ import Color from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import { ButtonProps } from "./../Button/Button";
+
 type SpinnerPosition = "local" | "inline" | "global";
 type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
 type SpinnerStroke = "thin" | "medium" | "bold";
-type Intent = "primary" | "success" | "warning" | "danger";
 
 /** A spinner that is either displayed globally or locally. */
 export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent" | "color"> {
@@ -22,9 +23,16 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "inte
      */
     color?: Color | string | "inherit";
     /**
-     * Intent state of the field item.
+     * Intent state of the spinner.
+     * When used the spinner is colored.
+     * Property overwrites `elevated` setting.
+     */
+    intent?: ButtonProps["intent"];
+    /**
+     * Highlight the spinner.
+     * It is displayed with accent color intent.
      */
-    intent?: Intent;
+    elevated?: boolean;
     /**
      * Additional CSS class names.
      */
@@ -67,6 +75,7 @@ export const Spinner = ({
     className = "",
     color = "inherit",
     intent,
+    elevated,
     position = "local",
     size,
     stroke,
@@ -119,6 +128,7 @@ export const Spinner = ({
             className={
                 `${eccgui}-spinner` +
                 ` ${eccgui}-spinner--position-${position}` +
+                (elevated ? ` ${eccgui}-spinner--intent-accent` : "") +
                 (intent ? ` ${eccgui}-spinner--intent-${intent}` : "") +
                 ` ${eccgui}-spinner--size-${spinnerSize}` +
                 (showLocalBackdrop ? ` ${eccgui}-spinner--localbackdrop` : "") +

package/src/components/Spinner/Stories/spinner.stories.tsx

@@ -10,7 +10,7 @@ export default {
         color: { control: "color" },
         intent: {
             ...helpersArgTypes.exampleIntent,
-            options: ["UNDEFINED", "primary", "success", "warning", "danger", "none"],
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger", "none"],
         },
         position: { control: "radio", options: ["local", "inline", "global"] },
         size: { control: "radio", options: ["tiny", "small", "medium", "large", "xlarge", "inherit"] },

package/src/components/Spinner/spinner.scss

@@ -29,10 +29,14 @@ span.#{$eccgui}-spinner {
     color: inherit;
 }
 
-.#{$eccgui}-spinner--intent-primary {
+.#{$eccgui}-spinner--intent-accent {
     color: $eccgui-color-accent;
 }
 
+.#{$eccgui}-spinner--intent-primary {
+    color: $eccgui-color-primary;
+}
+
 .#{$eccgui}-spinner--intent-success {
     color: $eccgui-color-success-text;
 }

package/src/components/Tag/tag.scss

@@ -7,19 +7,21 @@ $eccgui-size-margin-tag: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-color-tag-background-emphasized: $eccgui-color-workspace-text !default;
 
 // lib vars
-$tag-default-color: $eccgui-color-tag-background-emphasized; // !default;
+$tag-default-color: $eccgui-color-tag-background-emphasized;
+
 // $dark-tag-default-color: $gray5 !default;
-$tag-height: $eccgui-size-typo-tag * $eccgui-size-typo-tag-lineheight; // !default;
-$tag-line-height: $eccgui-size-typo-tag; // !default;
-$tag-padding-top: ($tag-height - $tag-line-height) * 0.5; // !default;
-$tag-padding: $tag-padding-top * 2; // !default;
-$tag-margin: 0; // !default;
-$tag-height-small: $eccgui-size-typo-tag; // !default;
-$tag-line-height-small: $tag-height-small; // !default;
-$tag-padding-small: $tag-padding-top * 0.5; // !default;
-$tag-height-large: $eccgui-size-typo-tag-large * $eccgui-size-typo-tag-large-lineheight; // !default;
-$tag-line-height-large: $eccgui-size-typo-tag-large; // !default;
-$tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
+$tag-height: $eccgui-size-typo-tag * $eccgui-size-typo-tag-lineheight;
+$tag-line-height: $eccgui-size-typo-tag;
+$tag-padding-top: ($tag-height - $tag-line-height) * 0.5;
+$tag-padding: $tag-padding-top * 2;
+$tag-margin: 0;
+$tag-height-small: $eccgui-size-typo-tag;
+$tag-line-height-small: $tag-height-small;
+$tag-padding-small: $tag-padding-top * 0.5;
+$tag-height-large: $eccgui-size-typo-tag-large * $eccgui-size-typo-tag-large-lineheight;
+$tag-line-height-large: $eccgui-size-typo-tag-large;
+$tag-padding-large: ($tag-height-large - $tag-line-height-large);
+
 // $tag-icon-spacing: ($tag-height - 12px) * 0.5 !default;
 // $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) * 0.5 !default;
 $tag-round-adjustment: 0 !default;
@@ -139,109 +141,128 @@ $tag-round-adjustment: 0 !default;
     border-width: 1px;
 
     &:not([class*="#{$ns}-intent-"]) {
+        --eccgui-tag-bg: #{$tag-default-color};
+        --eccgui-tag-border: #{$tag-default-color};
+        --eccgui-tag-text: #{eccgui-color-var("identity", "text", "100")};
+        --eccgui-tag-emfactor: 100%;
+
+        color: var(--eccgui-tag-text);
+        background-color: eccgui-color-mix(
+            var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
+            eccgui-color-var("identity", "background", "100")
+        );
+        border-color: var(--eccgui-tag-border);
+
         &.#{$eccgui}-tag--strongeremphasis {
-            background-color: $tag-default-color;
-            border-color: $tag-default-color;
+            --eccgui-tag-emfactor: 95%;
         }
         &.#{$eccgui}-tag--strongemphasis {
-            background-color: eccgui-color-rgba($tag-default-color, 0.875);
-            border-color: eccgui-color-rgba($tag-default-color, 0.875);
+            --eccgui-tag-emfactor: 90%;
         }
         &.#{$eccgui}-tag--normalemphasis {
-            background-color: eccgui-color-rgba($tag-default-color, 0.75);
-            border-color: eccgui-color-rgba($tag-default-color, 0.75);
+            --eccgui-tag-emfactor: 85%;
         }
         &.#{$eccgui}-tag--weakemphasis {
-            background-color: eccgui-color-rgba($tag-default-color, 0.625);
-            border-color: eccgui-color-rgba($tag-default-color, 0.625);
+            --eccgui-tag-emfactor: 80%;
         }
         &.#{$eccgui}-tag--weakeremphasis {
-            background-color: eccgui-color-rgba($tag-default-color, 0.5);
-            border-color: eccgui-color-rgba($tag-default-color, 0.5);
+            --eccgui-tag-emfactor: 75%;
         }
 
         &.#{$eccgui}-intent--primary {
-            color: $eccgui-color-primary-contrast;
-            background-color: $eccgui-color-primary;
-            border-color: $eccgui-color-primary;
+            --eccgui-tag-bg: #{$eccgui-color-primary};
+            --eccgui-tag-border: #{$eccgui-color-primary};
+            --eccgui-tag-text: #{$eccgui-color-primary-contrast};
         }
         &.#{$eccgui}-intent--accent {
-            color: $eccgui-color-accent-contrast;
-            background-color: $eccgui-color-accent;
-            border-color: $eccgui-color-accent;
+            --eccgui-tag-bg: #{$eccgui-color-accent};
+            --eccgui-tag-border: #{$eccgui-color-accent};
+            --eccgui-tag-text: #{$eccgui-color-accent-contrast};
         }
         &.#{$eccgui}-intent--info {
-            color: $eccgui-color-info-background;
-            background-color: $eccgui-color-info-text;
-            border-color: $eccgui-color-info-text;
+            --eccgui-tag-bg: #{$eccgui-color-info-text};
+            --eccgui-tag-border: #{$eccgui-color-info-text};
+            --eccgui-tag-text: #{$eccgui-color-info-background};
         }
         &.#{$eccgui}-intent--success {
-            color: $eccgui-color-success-background;
-            background-color: $eccgui-color-success-text;
-            border-color: $eccgui-color-success-text;
+            --eccgui-tag-bg: #{$eccgui-color-success-text};
+            --eccgui-tag-border: #{$eccgui-color-success-text};
+            --eccgui-tag-text: #{$eccgui-color-success-background};
         }
         &.#{$eccgui}-intent--warning {
-            color: $eccgui-color-warning-background;
-            background-color: $eccgui-color-warning-text;
-            border-color: $eccgui-color-warning-text;
+            --eccgui-tag-bg: #{$eccgui-color-warning-text};
+            --eccgui-tag-border: #{$eccgui-color-warning-text};
+            --eccgui-tag-text: #{$eccgui-color-warning-background};
         }
         &.#{$eccgui}-intent--danger {
-            color: $eccgui-color-danger-background;
-            background-color: $eccgui-color-danger-text;
-            border-color: $eccgui-color-danger-text;
+            --eccgui-tag-bg: #{$eccgui-color-danger-text};
+            --eccgui-tag-border: #{$eccgui-color-danger-text};
+            --eccgui-tag-text: #{$eccgui-color-danger-background};
         }
 
         &.#{$ns}-minimal,
         &.#{$ns}-minimal.#{$ns}-interactive {
+            --eccgui-tag-bg: #{eccgui-color-var("identity", "background", "500")};
+            --eccgui-tag-border: #{$tag-default-color};
+            --eccgui-tag-text: #{$tag-default-color};
+
+            color: var(--eccgui-tag-text);
+            background-color: eccgui-color-mix(
+                var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
+                eccgui-color-var("identity", "background", "100")
+            );
+            border-color: var(--eccgui-tag-border);
+
             &.#{$eccgui}-tag--strongeremphasis {
-                background-color: eccgui-color-rgba(eccgui-color-var("identity", "background", "900"), 1);
-                border-color: eccgui-color-rgba($tag-default-color, 0.3);
+                --eccgui-tag-emfactor: 100%;
             }
             &.#{$eccgui}-tag--strongemphasis {
-                background-color: eccgui-color-rgba(eccgui-color-var("identity", "background", "700"), 0.875);
-                border-color: eccgui-color-rgba($tag-default-color, 0.225);
+                --eccgui-tag-emfactor: 90%;
             }
             &.#{$eccgui}-tag--normalemphasis {
-                background-color: eccgui-color-rgba(eccgui-color-var("identity", "background", "500"), 0.75);
-                border-color: eccgui-color-rgba($tag-default-color, 0.15);
+                --eccgui-tag-emfactor: 80%;
             }
             &.#{$eccgui}-tag--weakemphasis {
-                background-color: eccgui-color-rgba(eccgui-color-var("identity", "background", "300"), 0.625);
-                border-color: eccgui-color-rgba($tag-default-color, 0.075);
+                --eccgui-tag-emfactor: 70%;
             }
             &.#{$eccgui}-tag--weakeremphasis {
-                background-color: eccgui-color-rgba(eccgui-color-var("identity", "background", "100"), 0.5);
-                border-color: eccgui-color-rgba($tag-default-color, 0.15);
+                --eccgui-tag-emfactor: 60%;
+            }
+
+            &[class*="#{$eccgui}-intent--"] {
+                color: eccgui-color-rgba(var(--eccgui-tag-text), var(--eccgui-tag-emfactor));
+                border-color: eccgui-color-rgba(var(--eccgui-tag-border), var(--eccgui-tag-emfactor));
             }
+
             &.#{$eccgui}-intent--primary {
-                color: $eccgui-color-primary;
-                background-color: $eccgui-color-primary-contrast;
-                border-color: $eccgui-color-primary;
+                --eccgui-tag-text: #{$eccgui-color-primary};
+                --eccgui-tag-border: #{$eccgui-color-primary};
+                --eccgui-tag-bg: #{$eccgui-color-primary-contrast};
             }
             &.#{$eccgui}-intent--accent {
-                color: $eccgui-color-accent;
-                background-color: $eccgui-color-accent-contrast;
-                border-color: $eccgui-color-accent;
+                --eccgui-tag-text: #{$eccgui-color-accent};
+                --eccgui-tag-border: #{$eccgui-color-accent};
+                --eccgui-tag-bg: #{$eccgui-color-accent-contrast};
             }
             &.#{$eccgui}-intent--info {
-                color: $eccgui-color-info-text;
-                background-color: $eccgui-color-info-background;
-                border-color: $eccgui-color-info-text;
+                --eccgui-tag-text: #{$eccgui-color-info-text};
+                --eccgui-tag-border: #{$eccgui-color-info-text};
+                --eccgui-tag-bg: #{$eccgui-color-info-background};
             }
             &.#{$eccgui}-intent--success {
-                color: $eccgui-color-success-text;
-                background-color: $eccgui-color-success-background;
-                border-color: $eccgui-color-success-text;
+                --eccgui-tag-text: #{$eccgui-color-success-text};
+                --eccgui-tag-border: #{$eccgui-color-success-text};
+                --eccgui-tag-bg: #{$eccgui-color-success-background};
             }
             &.#{$eccgui}-intent--warning {
-                color: $eccgui-color-warning-text;
-                background-color: $eccgui-color-warning-background;
-                border-color: $eccgui-color-warning-text;
+                --eccgui-tag-text: #{$eccgui-color-warning-text};
+                --eccgui-tag-border: #{$eccgui-color-warning-text};
+                --eccgui-tag-bg: #{$eccgui-color-warning-background};
             }
             &.#{$eccgui}-intent--danger {
-                color: $eccgui-color-danger-text;
-                background-color: $eccgui-color-danger-background;
-                border-color: $eccgui-color-danger-text;
+                --eccgui-tag-text: #{$eccgui-color-danger-text};
+                --eccgui-tag-border: #{$eccgui-color-danger-text};
+                --eccgui-tag-bg: #{$eccgui-color-danger-background};
             }
         }
     }

package/src/components/TextField/textfield.scss

@@ -10,7 +10,8 @@ $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespac
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
 $eccgui-color-textfield-text: $eccgui-color-workspace-text !default;
-$eccgui-color-textfield-background: white !default; // TODO define global var for it
+$eccgui-color-textfield-background: eccgui-color-var("identity", "background", 100) !default;
+
 // lib vars
 $pt-input-height: $eccgui-size-textfield-height-regular; // !default;
 $pt-input-height-large: $eccgui-size-textfield-height-large; // !default;
@@ -191,33 +192,40 @@ $eccgui-map-intent-bgcolors: (
     position: absolute;
     top: 0;
     left: 0;
+    margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+
+    .#{$ns}-input.#{$ns}-small ~ & {
+        margin-top: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+        margin-right: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+    }
 }
 
 .#{$eccgui}-textarea__options {
     position: absolute;
     top: 0;
     right: 0;
+    margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    text-align: right;
     filter: grayscale(1);
 
+    .#{$ns}-input.#{$ns}-small ~ & {
+        margin-top: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+        margin-right: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+    }
+
     &:hover,
     .#{$eccgui}-textarea:focus ~ & {
         filter: none;
     }
 
-    & > .#{$eccgui}-button--icon {
-        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-regular;
-
-        &:last-of-type {
-            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-regular;
-        }
-    }
-
-    .#{$ns}-input.#{$ns}-small ~ & > .#{$eccgui}-button--icon {
-        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
-
-        &:last-of-type {
-            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
-        }
+    & > .#{$eccgui}-button,
+    & > .#{$eccgui}-icon,
+    & > .#{$eccgui}-contextoverlay,
+    & > .#{$eccgui}-tooltip__wrapper {
+        display: inline-block;
+        vertical-align: middle;
     }
 }
 

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

@@ -35,7 +35,7 @@ const Template: StoryFn<typeof VisualTour> = (args: VisualTourProps) => {
                 <ToolbarSection id={"buttonSection"}>
                     <Button id={"actionA"}>Action A</Button>
                     <Button id={"actionB"}>Action B</Button>
-                    <Button id={"startTour"} intent={"primary"} onClick={() => setIsOpen(true)}>
+                    <Button id={"startTour"} elevated onClick={() => setIsOpen(true)}>
                         Start tour!
                     </Button>
                 </ToolbarSection>

package/src/configuration/_palettes.scss

@@ -24,6 +24,7 @@ $eccgui-color-palette-light: (
         "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),

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

@@ -67,7 +67,7 @@
     position: absolute;
 }
 
-.react-flow .react-flow__edges svg {
+.react-flow .react-flow__edges svg:not(.#{$eccgui}-icon) {
     position: absolute;
     overflow: visible;
     pointer-events: none;
@@ -179,31 +179,27 @@ svg.react-flow__connectionline {
     pointer-events: none;
     background-color: $reactflow-background-color;
     border: solid 1px $eccgui-color-separation-divider;
-
-    pattern path {
-        opacity: $eccgui-opacity-ghostly;
-        stroke: #{eccgui-color-var("identity", "text", "300")};
-    }
 }
 
 .react-flow__background-pattern,
-.react-flow__background pattern path:first-child {
-    opacity: $eccgui-opacity-ghostly;
-    stroke: #{eccgui-color-var("identity", "text", "500")};
+.react-flow__background pattern *:first-child:not(.react-flow__background-pattern) {
+    opacity: $eccgui-opacity-muted;
+    stroke: $eccgui-color-separation-divider;
 }
 
 .react-flow__background-pattern.dots,
-.react-flow__background pattern circle:first-child {
-    opacity: $eccgui-opacity-muted;
-    fill: #{eccgui-color-var("identity", "text", "700")};
+.react-flow__background pattern circle:first-child:not(.react-flow__background-pattern) {
+    fill: #{eccgui-color-var("identity", "text", "500")};
 }
 
 .react-flow__background-pattern.cross {
-    stroke: #{eccgui-color-var("identity", "text", "300")};
+    opacity: $eccgui-opacity-disabled;
+    stroke: #{eccgui-color-var("identity", "text", "500")};
+    stroke-width: 0.3;
 }
 
 .react-flow__background-pattern.lines {
-    stroke: #{eccgui-color-var("identity", "text", "300")};
+    stroke-width: 0.4;
 }
 
 .react-flow__attribution {