@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.4 → 24.4.1-featurepreparefinalnextcmem6943.1

package/src/components/OverviewItem/overviewitem.scss

@@ -76,16 +76,14 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     }
 }
 
-.#{$eccgui}-overviewitem__item--highdensity,
-.#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item {
+.#{$eccgui}-overviewitem__item--highdensity {
     // same fix for Firefox v132+ like for the normal element height
-    // height: $button-height; // mini-units(4);
     min-height: $button-height;
     max-height: $button-height;
 
     & > .#{$eccgui}-overviewitem__depiction {
-        width: $button-height; // mini-units(4);
-        height: $button-height; // mini-units(4);
+        width: $button-height;
+        height: $button-height;
     }
 }
 
@@ -93,8 +91,7 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     box-sizing: content-box;
     padding: $eccgui-size-overviewitem-spacing * 0.5;
 
-    &.#{$eccgui}-overviewitem__item--highdensity,
-    .#{$eccgui}-overviewitem__list--highdensity > li > & {
+    &.#{$eccgui}-overviewitem__item--highdensity {
         box-sizing: border-box;
 
         & > .#{$eccgui}-overviewitem__depiction {
@@ -136,9 +133,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__description {
     display: flex;
-    flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
+    flex-direction: column;
     place-content: stretch flex-start;
     align-items: stretch;
     overflow: hidden;
@@ -175,9 +172,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__actions {
     display: flex;
-    flex-flow: row nowrap;
     flex-grow: 0;
     flex-shrink: 0;
+    flex-flow: row nowrap;
     align-items: center;
     justify-content: flex-end;
 

package/src/components/OverviewItem/stories/OverviewItemList.stories.tsx

@@ -24,7 +24,6 @@ export const ItemList = Template.bind({});
 ItemList.args = {
     hasSpacing: true,
     hasDivider: true,
-    densityHigh: false,
     columns: 1,
     children: Array(4).fill(<OverviewItem {...ItemExample.args} />),
 };

package/src/components/Pagination/pagination.scss

@@ -51,7 +51,7 @@ span.#{$prefix}--pagination__text {
 
 .#{$prefix}--pagination__button--no-index {
     // TODO: revalidate if this is still necessary using the latest version of carbon lib
-    color: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
+    color: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
 }
 
 .#{$eccgui}-pagination--hideinfotext {

package/src/components/Spinner/Spinner.tsx

@@ -1,25 +1,26 @@
 import React, { useEffect, useState } from "react";
 import {
-    Overlay as BlueprintOverlay,
+    Overlay2 as BlueprintOverlay,
     OverlayProps as BlueprintOverlayProps,
     Spinner as BlueprintSpinner,
     SpinnerProps as BlueprintSpinnerProps,
 } from "@blueprintjs/core";
+import Color from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type SpinnerPosition = "local" | "inline" | "global";
 type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
 type SpinnerStroke = "thin" | "medium" | "bold";
-type Intent = "inherit" | "primary" | "success" | "warning" | "danger" | "none";
+type Intent = "primary" | "success" | "warning" | "danger";
 
 /** A spinner that is either displayed globally or locally. */
-export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent"> {
+export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "intent" | "color"> {
     /**
-     * intent value or a valid css color definition
-     * @deprecated (v25) it will allow in the future only a color value string and that for other states the intent property needs to be used
+     * Must be a valid css color definition.
+     * `intent` property will always overwrite this setting.
      */
-    color?: Intent | string;
+    color?: Color | string | "inherit";
     /**
      * Intent state of the field item.
      */
@@ -79,7 +80,7 @@ export const Spinner = ({
     delay = 0,
     overlayProps,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    description = "Loading indicator", // currently unsupported (FIXME):
+    description = "Loading indicator", // currently unsupported (TODO):
     ...otherProps
 }: SpinnerProps) => {
     const [showSpinner, setShowSpinner] = useState<boolean>(!delay || delay <= 0);
@@ -90,7 +91,7 @@ export const Spinner = ({
         }
         return;
     }, [showSpinner, delay]);
-    const availableIntent = ["primary", "success", "warning", "danger", "inherit"];
+
     const internSizes = {
         thin: 100,
         medium: 50,
@@ -99,9 +100,6 @@ export const Spinner = ({
 
     const spinnerElement = position === "inline" ? "span" : "div";
 
-    const spinnerColor = !intent && availableIntent.indexOf(color) < 0 ? color : null;
-    const spinnerIntent = !intent && availableIntent.indexOf(color) < 0 ? "usercolor" : intent || color;
-
     let spinnerSize;
     let spinnerStroke;
     switch (position) {
@@ -129,7 +127,7 @@ export const Spinner = ({
             className={
                 `${eccgui}-spinner` +
                 ` ${eccgui}-spinner--position-${position}` +
-                ` ${eccgui}-spinner--intent-${spinnerIntent}` +
+                (intent ? ` ${eccgui}-spinner--intent-${intent}` : "") +
                 ` ${eccgui}-spinner--size-${spinnerSize}` +
                 (showLocalBackdrop ? ` ${eccgui}-spinner--localbackdrop` : "") +
                 (className ? " " + className : "")
@@ -138,8 +136,15 @@ export const Spinner = ({
         />
     );
 
-    if (spinnerColor && spinnerIntent === "usercolor") {
-        spinner = <span style={{ color: spinnerColor }}>{spinner}</span>;
+    if (!intent) {
+        try {
+            const spinnerColor = color === "inherit" ? color : Color(color).rgb().toString();
+            spinner = <span style={{ color: spinnerColor }}>{spinner}</span>;
+        } catch {
+            spinner = <span style={{ color: "inherit" }}>{spinner}</span>;
+            // eslint-disable-next-line no-console
+            console.warn("Spinner received invalid color property: " + color);
+        }
     }
 
     return position === "global" ? (

package/src/components/Spinner/spinner.scss

@@ -15,12 +15,13 @@ $eccgui-size-spinner-xlarge: 256px !default;
         stroke: currentcolor;
     }
     .#{$ns}-spinner-track {
-        stroke: rgba(#000, 0.1);
+        stroke: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-ghostly);
     }
 }
 
 span.#{$eccgui}-spinner {
     display: inline-flex;
+    height: auto;
     vertical-align: text-top;
 }
 
@@ -72,10 +73,10 @@ span.#{$eccgui}-spinner {
 .#{$eccgui}-spinner--localbackdrop {
     position: absolute;
     inset: 0;
-    background-color: rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
+    background-color: eccgui-color-rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
 
     .#{$eccgui}-card & {
-        background-color: rgba($card-background-color, $eccgui-opacity-muted);
+        background-color: eccgui-color-rgba($card-background-color, $eccgui-opacity-muted);
     }
 }
 
@@ -91,5 +92,5 @@ span.#{$eccgui}-spinner {
 }
 
 .#{$eccgui}-spinner__backdrop {
-    background-color: rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
+    background-color: eccgui-color-rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
 }

package/src/components/Sticky/sticky.scss

@@ -80,22 +80,22 @@
     --eccgui-sticky-target-bgcolor: #{$card-background-color};
 
     .#{$eccgui}-card.#{$eccgui}-intent--primary & {
-        --eccgui-sticky-target-bgcolor: #{color.mix($eccgui-color-primary, $card-background-color, 5%)};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("identity", "brand", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--accent & {
-        --eccgui-sticky-target-bgcolor: #{color.mix($eccgui-color-accent, $card-background-color, 10%)};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("identity", "accent", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--success & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-success-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "success", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--info & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-info-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "info", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--warning & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-warning-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "warning", "100");
     }
     .#{$eccgui}-card.#{$eccgui}-intent--danger & {
-        --eccgui-sticky-target-bgcolor: #{$eccgui-color-danger-background};
+        --eccgui-sticky-target-bgcolor: eccgui-color-var("semantic", "danger", "100");
     }
 
     .#{$eccgui}-card.#{$ns}-interactive:hover & {
@@ -112,7 +112,7 @@
 }
 
 .#{$eccgui}-sticky__target--bg-application {
-    --eccgui-sticky-target-bgcolor: #{$eccgui-color-application-background};
+    --eccgui-sticky-target-bgcolor: #{$eccgui-color-workspace-background};
 }
 
 .#{$eccgui}-sticky__target--issticky {

package/src/components/SuggestField/index.ts

@@ -1,5 +1,11 @@
 import { createNewItemRendererFactory } from "./../AutocompleteField/autoCompleteFieldUtils";
-export * from "./SuggestField";
+
+export * from "./../AutocompleteField/AutoCompleteField";
+export * from "./../AutocompleteField/interfaces";
+
 export const suggestFieldUtils = {
     createNewItemRendererFactory,
 };
+
+// @deprecated (v26) use `suggestFieldUtils`
+export const autoCompleteFieldUtils = suggestFieldUtils;

package/src/components/Table/Table.tsx

@@ -4,8 +4,7 @@ import { DataTableSize as CarbonDataTableSize, Table as CarbonTable } from "@car
 // import { TableProps as CarbonTableProps } from "@carbon/react/es/components/DataTable/Table"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-// @deprecated (v25) use `TableProps["size"]`
-export type TableRowHeightSize = "small" | "medium" | "large";
+type TableRowHeightSize = "small" | "medium" | "large";
 
 // workaround to get type/interface
 type CarbonTableProps = React.ComponentProps<typeof CarbonTable>;

package/src/components/Table/TableContainer.tsx

@@ -9,7 +9,7 @@ import { TableContainerProps as CarbonTableContainerProps } from "@carbon/react/
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-import { TableRowHeightSize, tableRowHeightSizes } from "./Table";
+import { TableProps, tableRowHeightSizes } from "./Table";
 
 export interface TableDataContainerProps
     extends Omit<
@@ -21,7 +21,7 @@ export interface TableDataContainerProps
         >,
         React.TableHTMLAttributes<HTMLTableElement> {
     children(signature: any): JSX.Element;
-    size?: TableRowHeightSize;
+    size?: TableProps["size"];
 }
 export interface TableSimpleContainerProps
     extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,

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/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,9 +201,10 @@ export const Tooltip = ({
             targetProps={
                 {
                     ...otherTooltipProps.targetProps,
-                    "data-postplaceholder": eventMemory.current
-                        ? `id${eventMemory.current}${searchId.current}`
-                        : undefined,
+                    "data-postplaceholder":
+                        eventMemory.current && searchId.current
+                            ? `id${eventMemory.current}${searchId.current}`
+                            : undefined,
                 } as React.HTMLProps<HTMLElement>
             }
         >