@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.3 → 24.4.1-featurepreparefinalnextcmem6943.0

package/src/components/Table/table.scss

@@ -21,15 +21,11 @@ $eccgui-size-tablecell-font-weight: $eccgui-font-weight-regular !default;
 $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 $eccgui-color-table-background: $card-background-color !default;
 $eccgui-color-tableheader-background: $button-background-color !default;
-$eccgui-color-tablerow-background-even: color.adjust($menu-item-color-hover, $lightness: 24%) !default;
+$eccgui-color-tablerow-background-even: eccgui-color-mix($menu-item-color-hover, $white 24%) !default;
 $eccgui-color-tablerow-background-odd: transparent !default;
 $eccgui-color-tablerow-hover: $menu-item-color-hover !default;
-$eccgui-color-tablerow-selected: rgba($eccgui-color-accent, 0.1) !default;
-$eccgui-color-tablerow-selected-hover: color.mix(
-    $eccgui-color-tablerow-selected,
-    $eccgui-color-tablerow-hover,
-    50%
-) !default;
+$eccgui-color-tablerow-selected: eccgui-color-var("identity", "accent", "100") !default;
+$eccgui-color-tablerow-selected-hover: eccgui-color-var("identity", "accent", "200") !default;
 $eccgui-color-tablerow-border: $pt-divider-black !default;
 
 // changes
@@ -168,11 +164,10 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 
         &.#{$prefix}--data-table--selected {
             & > th {
-                --#{$eccgui}-color-cell: #{color.mix(
-                        $eccgui-color-tablerow-selected,
-                        $eccgui-color-tableheader-background,
-                        50%
-                    )};
+                --#{$eccgui}-color-cell: eccgui-color-mix(
+                    #{$eccgui-color-tablerow-selected},
+                    #{$eccgui-color-tableheader-background}
+                );
             }
 
             & > td {
@@ -181,11 +176,10 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 
             &:hover {
                 & > th {
-                    --#{$eccgui}-color-cell: #{color.mix(
-                            $eccgui-color-tablerow-selected-hover,
-                            $eccgui-color-tableheader-background,
-                            50%
-                        )};
+                    --#{$eccgui}-color-cell: eccgui-color-mix(
+                        #{$eccgui-color-tablerow-selected-hover},
+                        #{$eccgui-color-tableheader-background}
+                    );
                 }
 
                 & > td {
@@ -219,46 +213,44 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
     &.#{$prefix}--expandable-row--hover {
         & > th,
         & > td {
-            --#{$eccgui}-color-cell: #{color.mix(
-                    $eccgui-color-tablerow-hover,
-                    $eccgui-color-tablerow-background-even,
-                    50%
-                )};
+            --#{$eccgui}-color-cell: eccgui-color-mix(
+                #{$eccgui-color-tablerow-hover},
+                #{$eccgui-color-tablerow-background-even}
+            );
         }
     }
 
     &.#{$prefix}--data-table--selected {
         & > th {
-            --#{$eccgui}-color-cell: #{color.mix(
-                    color.mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-background-even, 50%),
-                    $eccgui-color-tableheader-background,
-                    50%
-                )};
+            --#{$eccgui}-color-cell: eccgui-color-mix(
+                eccgui-color-mix(#{$eccgui-color-tablerow-selected}, #{$eccgui-color-tablerow-background-even}),
+                #{$eccgui-color-tableheader-background}
+            );
         }
 
         & > td {
-            --#{$eccgui}-color-cell: #{color.mix(
-                    $eccgui-color-tablerow-selected,
-                    $eccgui-color-tablerow-background-even,
-                    50%
-                )};
+            --#{$eccgui}-color-cell: eccgui-color-mix(
+                #{$eccgui-color-tablerow-selected},
+                #{$eccgui-color-tablerow-background-even}
+            );
         }
 
         &:hover {
             & > th {
-                --#{$eccgui}-color-cell: #{color.mix(
-                        color.mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tablerow-background-even, 50%),
-                        $eccgui-color-tableheader-background,
-                        50%
-                    )};
+                --#{$eccgui}-color-cell: eccgui-color-mix(
+                    eccgui-color-mix(
+                        #{$eccgui-color-tablerow-selected-hover},
+                        #{$eccgui-color-tablerow-background-even}
+                    ),
+                    #{$eccgui-color-tableheader-background}
+                );
             }
 
             & > td {
-                --#{$eccgui}-color-cell: #{color.mix(
-                        $eccgui-color-tablerow-selected-hover,
-                        $eccgui-color-tablerow-background-even,
-                        50%
-                    )};
+                --#{$eccgui}-color-cell: eccgui-color-mix(
+                    #{$eccgui-color-tablerow-selected-hover},
+                    #{$eccgui-color-tablerow-background-even}
+                );
             }
         }
     }
@@ -360,10 +352,6 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
 }
 
 .#{$prefix}--data-table--sticky-header {
-    thead tr th {
-        // border-bottom-color: $active-ui;
-    }
-
     tr {
         min-height: $eccgui-size-tablecell-height-regular;
     }

package/src/components/Tabs/Tab.tsx

@@ -40,8 +40,9 @@ export const transformTabProperties = ({
         let color = Color("#ffffff");
         try {
             color = Color(backgroundColor);
-        } catch (ex) {
-            console.warn("Received invalid background color for tag: " + backgroundColor);
+        } catch {
+            // eslint-disable-next-line no-console
+            console.warn("Tag received invalid backgroundColor property: " + backgroundColor);
         }
         colorStyles = {
             backgroundColor: `${color.rgb().toString()}`,

package/src/components/Tabs/stories/Tab.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { Tab as TabDummyForStorybook, Tabs } from "./../../../../";
 
 export default {
-    title: "Components/Tabs",
+    title: "Components/Tabs/Tab",
     component: TabDummyForStorybook,
     argTypes: {
         backgroundColor: {

package/src/components/Tabs/stories/TabPanel.stories.tsx

@@ -5,7 +5,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { TabPanel } from "./../../../";
 
 export default {
-    title: "Components/Tabs",
+    title: "Components/Tabs/TabPanel",
     component: TabPanel,
     argTypes: {},
 } as Meta<typeof TabPanel>;

package/src/components/Tabs/stories/TabTitle.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
 
 export default {
-    title: "Components/Tabs",
+    title: "Components/Tabs/TabTitle",
     component: TabTitleOrg,
     argTypes: {},
 } as Meta<typeof TabTitleOrg>;

package/src/components/Tag/tag.scss

@@ -140,24 +140,24 @@ $tag-round-adjustment: 0 !default;
 
     &:not([class*="#{$ns}-intent-"]) {
         &.#{$eccgui}-tag--strongeremphasis {
-            background-color: rgba($tag-default-color, 1);
-            border-color: rgba($tag-default-color, 1);
+            background-color: $tag-default-color;
+            border-color: $tag-default-color;
         }
         &.#{$eccgui}-tag--strongemphasis {
-            background-color: rgba($tag-default-color, 0.875);
-            border-color: rgba($tag-default-color, 0.875);
+            background-color: eccgui-color-rgba($tag-default-color, 0.875);
+            border-color: eccgui-color-rgba($tag-default-color, 0.875);
         }
         &.#{$eccgui}-tag--normalemphasis {
-            background-color: rgba($tag-default-color, 0.75);
-            border-color: rgba($tag-default-color, 0.75);
+            background-color: eccgui-color-rgba($tag-default-color, 0.75);
+            border-color: eccgui-color-rgba($tag-default-color, 0.75);
         }
         &.#{$eccgui}-tag--weakemphasis {
-            background-color: rgba($tag-default-color, 0.625);
-            border-color: rgba($tag-default-color, 0.625);
+            background-color: eccgui-color-rgba($tag-default-color, 0.625);
+            border-color: eccgui-color-rgba($tag-default-color, 0.625);
         }
         &.#{$eccgui}-tag--weakeremphasis {
-            background-color: rgba($tag-default-color, 0.5);
-            border-color: rgba($tag-default-color, 0.5);
+            background-color: eccgui-color-rgba($tag-default-color, 0.5);
+            border-color: eccgui-color-rgba($tag-default-color, 0.5);
         }
 
         &.#{$eccgui}-intent--primary {
@@ -194,24 +194,24 @@ $tag-round-adjustment: 0 !default;
         &.#{$ns}-minimal,
         &.#{$ns}-minimal.#{$ns}-interactive {
             &.#{$eccgui}-tag--strongeremphasis {
-                background-color: rgba(color.mix(rgba($tag-default-color, 0.3), #fff), 1);
-                border-color: rgba($tag-default-color, 0.3);
+                background-color: eccgui-color-rgba(eccgui-color-var("identity", "background", "900"), 1);
+                border-color: eccgui-color-rgba($tag-default-color, 0.3);
             }
             &.#{$eccgui}-tag--strongemphasis {
-                background-color: rgba(color.mix(rgba($tag-default-color, 0.225), #fff), 0.875);
-                border-color: rgba($tag-default-color, 0.225);
+                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--normalemphasis {
-                background-color: rgba(color.mix(rgba($tag-default-color, 0.15), #fff), 0.75);
-                border-color: rgba($tag-default-color, 0.15);
+                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--weakemphasis {
-                background-color: rgba(color.mix(rgba($tag-default-color, 0.075), #fff), 0.625);
-                border-color: rgba($tag-default-color, 0.075);
+                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--weakeremphasis {
-                background-color: rgba(color.mix(rgba($tag-default-color, 0), #fff), 0.5);
-                border-color: rgba($tag-default-color, 0.15);
+                background-color: eccgui-color-rgba(eccgui-color-var("identity", "background", "100"), 0.5);
+                border-color: eccgui-color-rgba($tag-default-color, 0.15);
             }
             &.#{$eccgui}-intent--primary {
                 color: $eccgui-color-primary;

package/src/components/TextField/SearchField.tsx

@@ -7,12 +7,7 @@ import IconButton from "../Icon/IconButton";
 
 import TextField, { TextFieldProps } from "./TextField";
 
-export interface SearchFieldProps
-    extends TestableComponent,
-        Omit<
-            TextFieldProps,
-            "placeholder | hasStatePrimary | hasStateSuccess | hasStateWarning | hasStateDanger | fullWidth"
-        > {
+export interface SearchFieldProps extends TestableComponent, Omit<TextFieldProps, "placeholder" | "fullWidth"> {
     /**
      * Placeholder text for search box.
      */

package/src/components/TextField/stories/SearchField.stories.tsx

@@ -15,10 +15,6 @@ export default {
         rightElement: {
             ...helpersArgTypes.exampleIcon,
         },
-        hasStatePrimary: { table: { disable: true } },
-        hasStateSuccess: { table: { disable: true } },
-        hasStateWarning: { table: { disable: true } },
-        hasStateDanger: { table: { disable: true } },
         fullWidth: { table: { disable: true } },
     },
 } as Meta<typeof SearchField>;

package/src/components/TextField/textfield.scss

@@ -9,7 +9,7 @@ $eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $ec
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $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-application-text !default;
+$eccgui-color-textfield-text: $eccgui-color-workspace-text !default;
 $eccgui-color-textfield-background: white !default; // TODO define global var for it
 // lib vars
 $pt-input-height: $eccgui-size-textfield-height-regular; // !default;
@@ -20,8 +20,8 @@ $input-small-padding: $eccgui-size-textfield-padding-horizontal-small; // !defau
 $input-font-weight: $eccgui-typo-textfield-fontweight; // !default;
 // $input-transition: box-shadow $pt-transition-duration $pt-transition-ease;
 $input-color: $eccgui-color-textfield-text; // !default;
-$input-color-disabled: rgba($eccgui-color-textfield-text, 0.39); // !default;
-$input-placeholder-color: rgba($eccgui-color-textfield-text, 0.61); // !default;
+$input-color-disabled: eccgui-color-rgba($eccgui-color-textfield-text, 0.39); // !default;
+$input-placeholder-color: eccgui-color-rgba($eccgui-color-textfield-text, 0.61); // !default;
 $input-background-color: $eccgui-color-textfield-background; // !default;
 // $input-background-color-disabled: rgba($light-gray1, 0.5) !default;
 // $input-shadow-color-focus: $pt-intent-primary !default;
@@ -84,15 +84,15 @@ $eccgui-map-intent-bgcolors: (
 @mixin intent-state-flash-animation($state, $bgcolor, $mixratio: 24%) {
     @keyframes intent-state-flash-#{$state} {
         0% {
-            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: eccgui-color-var("semantic", $state, "100");
         }
 
         39% {
-            background-color: $bgcolor;
+            background-color: eccgui-color-var("semantic", $state, "300");
         }
 
         100% {
-            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: eccgui-color-var("semantic", $state, "100");
         }
     }
 }
@@ -109,7 +109,7 @@ $eccgui-map-intent-bgcolors: (
 
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
         .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
-            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            background-color: eccgui-color-var("semantic", $each-intent, "100");
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
@@ -149,7 +149,7 @@ $eccgui-map-intent-bgcolors: (
 
     @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-var("semantic", $each-intent, "100");
             animation-name: intent-state-flash-#{$each-intent};
         }
     }

package/src/components/TextReducer/TextReducer.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { HtmlContentBlock, Markdown, TextReducer } from "../../../index";
+
+export default {
+    title: "Components/TextReducer",
+    component: TextReducer,
+    argTypes: {},
+} as Meta<typeof TextReducer>;
+
+const TemplateFull: StoryFn<typeof TextReducer> = (args) => <TextReducer {...args} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: [
+        <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
+        "Simple text with URL http://example.com/ that should not get parsed.",
+        "a < b to test equations in text like b > a.",
+        <>
+            <Markdown>{`* This\n* is\n* a\n* list\n\nwritten in Markdown.`}</Markdown>
+            <HtmlContentBlock>
+                <h1>Block with sub elements</h1>
+                <LoremIpsum p={3} avgSentencesPerParagraph={3} random={false} />
+            </HtmlContentBlock>
+        </>,
+    ],
+};
+
+export const UseMaximumContraints = TemplateFull.bind({});
+UseMaximumContraints.args = {
+    ...Default.args,
+    maxNodes: 3,
+    maxLength: 130,
+};
+
+export const WithOverflowText = TemplateFull.bind({});
+WithOverflowText.args = {
+    ...Default.args,
+    useOverflowTextWrapper: true,
+    overflowTextProps: {
+        className: "my-extra-class",
+        "data-test-id": "my-test-id",
+        ellipsis: "reverse",
+    },
+};

package/src/components/TextReducer/TextReducer.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import * as ReactIs from "react-is";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { OverflowText, OverflowTextProps } from "./../Typography";
+
+export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Maximum number of nodes that are used from the HTML content.
+     * An HTML element with multiple sub elements is count as only 1 node.
+     */
+    maxNodes?: number;
+    /**
+     * Set maximum string length of returned content.
+     */
+    maxLength?: number;
+    /**
+     * Wrap returned content automatically in a `OverflowText` component.
+     * This way you always will get a element returned that displays only 1 single text line.
+     */
+    useOverflowTextWrapper?: boolean;
+    /**
+     * Specify more `OverflowText` properties used when `useOverflowTextWrapper` is set to `true`.
+     */
+    overflowTextProps?: Omit<OverflowTextProps, "passDown">;
+}
+
+/**
+ * Component to reduce HTML markup content to simple text.
+ * Display can be wrapped easily in `OverflowText`.
+ */
+export const TextReducer = ({
+    children,
+    maxNodes,
+    maxLength,
+    useOverflowTextWrapper,
+    overflowTextProps,
+}: TextReducerProps) => {
+    const nodesCount = 0;
+
+    const onlyText = (children: React.ReactNode | React.ReactNode[], maxNodes?: number): string => {
+        if (typeof maxNodes !== "undefined" && nodesCount >= maxNodes) {
+            return "";
+        }
+
+        if (children instanceof Array) {
+            return children
+                .slice(0, maxNodes)
+                .map((child: React.ReactNode) => {
+                    return onlyText(child, maxNodes);
+                })
+                .join(" ");
+        }
+
+        return React.Children.toArray(children)
+            .slice(0, maxNodes)
+            .map((child) => {
+                if (ReactIs.isFragment(child)) {
+                    return onlyText(child.props?.children, maxNodes);
+                }
+                if (typeof child === "string") {
+                    return child;
+                }
+                if (typeof child === "number") {
+                    return child.toString();
+                }
+                if (ReactIs.isElement(child)) {
+                    // for some reasons `renderToString` returns empty string if not wrappe in a `span`
+                    return renderToString(<span>{child}</span>);
+                }
+                return "";
+            })
+            .join(" ")
+            .replaceAll("\n", " ");
+    };
+
+    const shrinkedContent = onlyText(children, maxNodes)
+        .replaceAll(/<[^\s][^>]*>/g, "")
+        .slice(0, maxLength);
+
+    return useOverflowTextWrapper ? (
+        <OverflowText
+            {...overflowTextProps}
+            className={
+                `${eccgui}-textreducer` +
+                (overflowTextProps && overflowTextProps.className ? ` ${overflowTextProps.className}` : "")
+            }
+        >
+            {shrinkedContent}
+        </OverflowText>
+    ) : (
+        <>{shrinkedContent}</>
+    );
+};
+
+export default TextReducer;

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import Tooltip from "./Tooltip";
+import { Default as TooltipStory } from "./Tooltip.stories";
+
+const checkForPlaceholderClass = (container: HTMLElement, tobe: number) => {
+    expect(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`).length).toBe(tobe);
+};
+
+describe("Tooltip", () => {
+    it("should render placeholder automatically for text tooltip", () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} content="this is a simple text tooltip" />);
+        checkForPlaceholderClass(container, 1);
+    });
+    it("should render no placeholder automatically for html tooltip", () => {
+        const { container } = render(
+            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} />
+        );
+        checkForPlaceholderClass(container, 0);
+    });
+    it("should render placeholder when `usePlaceholder===true`", () => {
+        const { container } = render(
+            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} usePlaceholder={true} />
+        );
+        checkForPlaceholderClass(container, 1);
+    });
+    it("should render no placeholder when `usePlaceholder===false`", () => {
+        const { container } = render(
+            <Tooltip {...TooltipStory.args} content="this is a simple text tooltip" usePlaceholder={false} />
+        );
+        checkForPlaceholderClass(container, 0);
+    });
+    it("should be displayed on first mouse hover when no placeholder is used", async () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={false} />);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+        expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
+    });
+    it("should not be displayed on first mouse hover when placeholder is used but placeholder markup is swapped", async () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`)[0]);
+        checkForPlaceholderClass(container, 1);
+        await waitFor(() => {
+            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+            checkForPlaceholderClass(container, 0);
+        });
+    });
+    it("should be displayed on two continues mouse hover when placeholder is used", async () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+        checkForPlaceholderClass(container, 1);
+        await waitFor(async () => {
+            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+            checkForPlaceholderClass(container, 0);
+            fireEvent.mouseOver(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+            expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
+        });
+    });
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -19,7 +19,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
      * The size specifies the dimension the tooltip overlay element can maximal grow.
      */
-    size?: "small" | "medium" | "large";
+    size?: TooltipSize;
     /**
      * The tooltip will be attached to this element when it is hovered.
      */
@@ -50,6 +50,8 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     swapPlaceholderDelay?: number;
 }
 
+export type TooltipSize = "small" | "medium" | "large"
+
 export const Tooltip = ({
     children,
     content,
@@ -199,7 +201,10 @@ export const Tooltip = ({
             targetProps={
                 {
                     ...otherTooltipProps.targetProps,
-                    "data-postplaceholder": `id${eventMemory.current}${searchId.current}`,
+                    "data-postplaceholder":
+                        eventMemory.current && searchId.current
+                            ? `id${eventMemory.current}${searchId.current}`
+                            : undefined,
                 } as React.HTMLProps<HTMLElement>
             }
         >

package/src/components/Tooltip/tooltip.scss

@@ -6,8 +6,9 @@ $eccgui-size-typo-tooltip-lineheight: $eccgui-size-typo-caption-lineheight !defa
 $eccgui-size-tooltip-width: 20em !default;
 
 // library vars
-$tooltip-background-color: $eccgui-color-applicationheader-text; // !default;
-$tooltip-text-color: $eccgui-color-applicationheader-background; // !default;
+$tooltip-background-color: #{eccgui-color-var("layout", "grey", "900")};
+$tooltip-text-color: #{eccgui-color-var("identity", "text", "300")};
+
 // $dark-tooltip-background-color: $light-gray3 !default;
 // $dark-tooltip-text-color: $dark-gray5 !default;
 $tooltip-padding-vertical: $eccgui-size-block-whitespace * 0.25; // !default;
@@ -45,7 +46,10 @@ $tooltip-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
     pre,
     .#{$eccgui}-typography__contentblock pre,
     pre.#{$eccgui}-typography__text {
-        background-color: color.invert($eccgui-color-workspace-background);
+        background-color: eccgui-color-mix(
+            eccgui-color-var("identity", "background", "900") 100% * $eccgui-opacity-ghostly,
+            transparent
+        );
     }
 }
 

package/src/components/Typography/OverflowText.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverflowTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
     /**
@@ -25,11 +25,6 @@ export interface OverflowTextProps extends React.HTMLAttributes<HTMLElement>, Te
      * HTML element that is used for the component.
      */
     useHtmlElement?: "p" | "div" | "span";
-    /**
-     * Used for all other necessary properties.
-     * @deprecated (v25) we will allow only basic HTML element properties and testing IDs
-     */
-    [key: string]: any;
 }
 
 /** Prevents text from overflowing. */

package/src/components/Typography/typography.scss

@@ -53,7 +53,7 @@ mark {
         styles from other stylesheets we cannot control here
         TODO: need to reevaluated when it is not used together with MDL anymore
     */
-    background-color: rgba($eccgui-color-info-background, 1) !important;
+    background-color: eccgui-color-rgba($eccgui-color-info-background, 1) !important;
 }
 
 // HtmlContentBlock