@eccenca/gui-elements 25.1.0 → 25.2.0-featureupgradeblueprintjsv6cmem7139.0

package/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 
-import { Link, Spacing } from "../../index";
+import Link from "../../components/Link/Link";
+import Spacing from "../../components/Separation/Spacing";
+import InlineText from "../../components/Typography/InlineText";
 
 export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -31,6 +33,10 @@ export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivEle
         Callback if toggler is necessary. Default: true
     */
     enableToggler?: boolean;
+    /**
+     * Force always inline rendering.
+     */
+    forceInline?: boolean;
 }
 
 /** Shows a preview with the option to expand to a full view (and back). */
@@ -42,27 +48,29 @@ export function ContentBlobToggler({
     fullviewContent,
     startExtended = false,
     enableToggler = true,
+    forceInline = false,
     ...otherProps
 }: ContentBlobTogglerProps) {
     const [isExtended, setViewState] = useState(startExtended);
-    const handlerToggleView = (event: any) => {
+    const handlerToggleView = (event: React.MouseEvent<HTMLAnchorElement>) => {
         event.preventDefault();
         event.stopPropagation();
         setViewState(!isExtended);
     };
 
-    return (
+    const tooglerDisplay = (
         <div className={className} {...otherProps}>
             {!isExtended ? (
                 <>
                     {previewContent}
                     {enableToggler && (
                         <>
-                            {" "}&hellip;{" "}
+                            {" "}
+                            &hellip;{" "}
                             <Link
                                 href="#more"
                                 data-test-id={"content-blob-toggler-more-link"}
-                                onClick={(e: any) => {
+                                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                                     handlerToggleView(e);
                                 }}
                             >
@@ -76,11 +84,11 @@ export function ContentBlobToggler({
                     {fullviewContent}
                     {enableToggler && (
                         <div>
-                            <Spacing size="small" />
+                            {forceInline ? <> </> : <Spacing size="small" />}
                             <Link
                                 data-test-id={"content-blob-toggler-less-link"}
                                 href="#less"
-                                onClick={(e: any) => {
+                                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                                     handlerToggleView(e);
                                 }}
                             >
@@ -92,4 +100,6 @@ export function ContentBlobToggler({
             )}
         </div>
     );
+
+    return forceInline ? <InlineText>{tooglerDisplay}</InlineText> : tooglerDisplay;
 }

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,9 +1,15 @@
 import React from "react";
 
-import { ContentBlobToggler, ContentBlobTogglerProps, InlineText, Markdown, utils } from "./../../index";
+import { utils } from "../../common";
+import InlineText from "../../components/Typography/InlineText";
+import { Markdown } from "../markdown/Markdown";
 
-export interface StringPreviewContentBlobTogglerProps
-    extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
+import { ContentBlobToggler, ContentBlobTogglerProps } from "./ContentBlobToggler";
+
+export interface StringPreviewContentBlobTogglerProps extends Omit<
+    ContentBlobTogglerProps,
+    "previewContent" | "enableToggler"
+> {
     /**
      * The preview content will be cut to this length if it is too long.
      */
@@ -31,7 +37,7 @@ export interface StringPreviewContentBlobTogglerProps
      * Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
      * This allows to add non-string elements to both the full-view content and the pure string content.
      */
-    noTogglerContentSuffix?: JSX.Element;
+    noTogglerContentSuffix?: React.JSX.Element;
     /**
      * If only the first non-empty line should be shown in the preview.
      * This will in addition also be shortened according to `previewMaxLength`.
@@ -54,6 +60,7 @@ export function StringPreviewContentBlobToggler({
     allowedHtmlElementsInPreview,
     noTogglerContentSuffix,
     firstNonEmptyLineOnly,
+    ...otherContentBlobTogglerProps
 }: StringPreviewContentBlobTogglerProps) {
     // need to test `firstNonEmptyLineOnly` until property is removed
     const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly
@@ -105,6 +112,7 @@ export function StringPreviewContentBlobToggler({
             fullviewContent={fullviewContent}
             startExtended={startExtended}
             enableToggler={enableToggler}
+            {...otherContentBlobTogglerProps}
         />
     );
 }

package/src/cmem/ContentBlobToggler/tests/StringPreviewContentBlobToggler.test.tsx

@@ -21,12 +21,12 @@ describe("StringPreviewContentBlobToggler", () => {
         const { queryByText } = render(
             <StringPreviewContentBlobToggler
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
-            />
+            />,
         );
         textMustExist(queryByText, "A library for GUI elements.");
         textMustNotExist(
             queryByText,
-            "In order to create graphical user interfaces, please have look at the documentation at"
+            "In order to create graphical user interfaces, please have look at the documentation at",
         );
         textMustExist(queryByText, "show more");
     });
@@ -35,11 +35,11 @@ describe("StringPreviewContentBlobToggler", () => {
             <StringPreviewContentBlobToggler
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
                 startExtended
-            />
+            />,
         );
         textMustExist(
             queryByText,
-            "In order to create graphical user interfaces, please have look at the documentation at"
+            "In order to create graphical user interfaces, please have look at the documentation at",
         );
         textMustExist(queryByText, "show less");
     });
@@ -48,7 +48,7 @@ describe("StringPreviewContentBlobToggler", () => {
             <StringPreviewContentBlobToggler
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
                 useOnly={"firstNonEmptyLine"}
-            />
+            />,
         );
         textMustExist(queryByText, "A library for GUI elements.");
         textMustNotExist(queryByText, "In order to create");
@@ -58,7 +58,7 @@ describe("StringPreviewContentBlobToggler", () => {
             <StringPreviewContentBlobToggler
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
                 useOnly={"firstMarkdownSection"}
-            />
+            />,
         );
         textMustExist(queryByText, "A library for GUI elements.");
         textMustExist(queryByText, "In order to create");
@@ -69,12 +69,12 @@ describe("StringPreviewContentBlobToggler", () => {
             <StringPreviewContentBlobToggler
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
                 previewMaxLength={144}
-            />
+            />,
         );
         textMustExist(queryByText, "A library for GUI elements.");
         textMustExist(
             queryByText,
-            "In order to create graphical user interfaces, please have look at the documentation at"
+            "In order to create graphical user interfaces, please have look at the documentation at",
         );
         textMustNotExist(queryByText, "https://github.com/"); // test if Markdown was rendered
         textMustNotExist(queryByText, "show more");
@@ -85,12 +85,12 @@ describe("StringPreviewContentBlobToggler", () => {
                 {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
                 previewMaxLength={144}
                 renderPreviewAsMarkdown={false}
-            />
+            />,
         );
         textMustExist(queryByText, "A library for GUI elements.");
         textMustExist(
             queryByText,
-            "In order to create graphical user interfaces, please have look at the documentation at"
+            "In order to create graphical user interfaces, please have look at the documentation at",
         );
         textMustExist(queryByText, "https://github.com/"); // test if Markdown was rendered
         textMustExist(queryByText, "show more");

package/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx

@@ -56,7 +56,7 @@ const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
 const simplifiedElapsedTime = (
     timeSegments: number[],
     translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string,
-    includeSeconds = false
+    includeSeconds = false,
 ) => {
     const units: ElapsedDateTimeDisplayUnits[] = ["day", "hour", "minute"];
 
@@ -75,7 +75,7 @@ const simplifiedElapsedTime = (
         return `< 1 ${translateUnits("minute")}`;
     } else {
         return `${timeSegments[idx]} ${translateUnits(
-            (units[idx] + (timeSegments[idx] > 1 ? "s" : "")) as ElapsedDateTimeDisplayUnits
+            (units[idx] + (timeSegments[idx] > 1 ? "s" : "")) as ElapsedDateTimeDisplayUnits,
         )}`;
     }
 };

package/src/cmem/DateTimeDisplay/tests/ElapsedDateTimeDisplay.test.tsx

@@ -9,8 +9,8 @@ describe("Elapsed time component", () => {
         expect(
             elapsedDateTimeDisplayUtils.simplifiedElapsedTime(
                 elapsedDateTimeDisplayUtils.elapsedTimeSegmented(timeInSeconds * 1000),
-                translate
-            )
+                translate,
+            ),
         ).toBe(expectedString);
     it("should segment the time", () => {
         checkMS(2123, "0:0:0:2");

package/src/cmem/markdown/Markdown.tsx

@@ -8,8 +8,9 @@ import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
 import { PluggableList } from "unified";
 
+import { TestableComponent } from "../../components";
+import { HtmlContentBlock, HtmlContentBlockProps } from "../../components/Typography";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
 
 export interface MarkdownProps extends TestableComponent {
     children: string;

package/src/cmem/markdown/highlightSearchWords.test.ts

@@ -29,7 +29,7 @@ describe("Highlight search words reHype plugin", () => {
             },
             new VFile(),
 
-            () => {}
+            () => {},
         );
         const rootChildren = (result as Root).children;
         expect(rootChildren.length).toBe(1);

package/src/cmem/markdown/markdownutils.test.ts

@@ -3,14 +3,14 @@ import utils from "./markdown.utils";
 describe("Markdown utils", () => {
     it("should extract named anchors from the Markdown", () => {
         const namedAnchors = utils.extractNamedAnchors(
-            '# Header\n\nsome text\n\n## <a  id="anchor1" ></a> point 1\n\n## <a id="anchor2"></a> point 2'
+            '# Header\n\nsome text\n\n## <a  id="anchor1" ></a> point 1\n\n## <a id="anchor2"></a> point 2',
         );
         expect(namedAnchors).toStrictEqual(["anchor1", "anchor2"]);
     });
 
     it("should not extract named anchors from the Markdown that are not following the expected format", () => {
         const namedAnchors = utils.extractNamedAnchors(
-            '# <a id="anchor" href="http://">link text</a> \n\n## <a name="test" id="anchor2"></a> point 2'
+            '# <a id="anchor" href="http://">link text</a> \n\n## <a name="test" id="anchor2"></a> point 2',
         );
         expect(namedAnchors).toStrictEqual([]);
     });

package/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -7,7 +7,7 @@ import {
     Position,
 } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 import {
     Background as BackgroundV12,
     BackgroundVariant as BackgroundVariantV12,
@@ -444,7 +444,7 @@ const ReactFlowExampleV9: FC<ReactFlowExtendedProps> = (args) => {
                     }}
                 >
                     EdgeTools demo, add elements here.
-                </EdgeTools>
+                </EdgeTools>,
             );
         }
     }, []);
@@ -455,7 +455,7 @@ const ReactFlowExampleV9: FC<ReactFlowExtendedProps> = (args) => {
                 setReactflowInstance(rfi);
             }
         },
-        [reactflowInstance]
+        [reactflowInstance],
     );
 
     const { style, ...otherProps } = args;

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

@@ -93,7 +93,7 @@ const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>(
         zoomActivationKeyCode,
         ...originalProps
     }: T,
-    outerRef: Ref<HTMLDivElement>
+    outerRef: Ref<HTMLDivElement>,
 ) => {
     const innerRef = React.useRef<HTMLDivElement>(null);
     React.useImperativeHandle(outerRef, () => innerRef.current!, []);
@@ -205,7 +205,7 @@ const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>(
 
 /** Hack to make the Type Parameter work with the forward ref. */
 export const ReactFlowExtended = React.forwardRef(ReactFlowExtendedPlain) as <T extends ReactFlowExtendedProps>(
-    p: T & { ref?: Ref<HTMLDivElement> }
+    p: T & { ref?: Ref<HTMLDivElement> },
 ) => ReactElement;
 
 /**

package/src/cmem/react-flow/ReactFlow/ReactFlowV12.tsx

@@ -53,5 +53,5 @@ export const ReactFlowV12Container = React.forwardRef<HTMLDivElement, ReactFlowV
                 {children}
             </ReactFlowV12>
         );
-    }
+    },
 );

package/src/cmem/react-flow/ReactFlow/ReactFlowV9.tsx

@@ -1,8 +1,5 @@
 import React from "react";
-import {
-    default as ReactFlowV9,
-    ReactFlowProps as ReactFlowV9Props
-} from "react-flow-renderer";
+import { default as ReactFlowV9, ReactFlowProps as ReactFlowV9Props } from "react-flow-renderer";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
@@ -25,5 +22,5 @@ export const ReactFlowV9Container = React.forwardRef<HTMLDivElement, ReactFlowV9
                 {children}
             </ReactFlowV9>
         );
-    }
+    },
 );

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

@@ -40,7 +40,10 @@ export interface StickyNoteModalProps {
     /**
      * Forward other properties to the `SimpleModal` element that is used for this dialog.
      */
-    simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions" | "children">;
+    simpleDialogProps?: Omit<
+        SimpleDialogProps,
+        "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions" | "children"
+    >;
     /**
      * Code editor props
      */
@@ -52,7 +55,7 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
         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]
+            ([key, value]) => [key, value as string],
         );
         const { disableHotKeys } = React.useContext(ReactFlowHotkeyContext);
 
@@ -149,5 +152,5 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                 </FieldItem>
             </SimpleDialog>
         );
-    }
+    },
 );

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

@@ -1,8 +1,8 @@
+import { NodeProps } from "react-flow-renderer";
+
 import { EdgeBezier } from "./../../../extensions/react-flow/edges/EdgeBezier";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { GRAPH_NODE_TYPES } from "./typing";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeBezier,
@@ -16,7 +16,7 @@ const edgeTypes = {
     danger: EdgeBezier,
 };
 
-const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<GRAPH_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     graph: NodeDefault,
     class: NodeDefault,

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

@@ -1,9 +1,9 @@
+import { NodeProps } from "react-flow-renderer";
+
 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";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -14,7 +14,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,

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

@@ -1,9 +1,9 @@
+import { NodeProps } from "react-flow-renderer";
+
 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";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -12,7 +12,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     dataset: NodeDefault,
     linking: NodeDefault,

package/src/cmem/react-flow/extensions/scrollOnDragHook.ts

@@ -115,7 +115,7 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
                 clearIntervalIfExists();
             }
         },
-        [clearIntervalIfExists]
+        [clearIntervalIfExists],
     );
 
     // Handle scrolling if any operation is active e.g. connecting or dragging a node
@@ -150,14 +150,14 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
                         boundingRect.left > event.clientX
                             ? xStepSize
                             : boundingRect.right < event.clientX
-                            ? -xStepSize
-                            : 0;
+                              ? -xStepSize
+                              : 0;
                     const scrollY: number =
                         boundingRect.top > event.clientY
                             ? yStepSize
                             : boundingRect.bottom < event.clientY
-                            ? -yStepSize
-                            : 0;
+                              ? -yStepSize
+                              : 0;
                     if (state.scrollY === (scrollY !== 0) && state.scrollX === (scrollX !== 0)) {
                         // Nothing has changed, do not change interval function
                         return;
@@ -194,7 +194,7 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
             scrollState.current.reactFlowInstance = rfi;
             originalOnLoad?.(rfi);
         },
-        [originalOnLoad]
+        [originalOnLoad],
     );
 
     /** Wrap original callbacks to turn scrolling on and off. */
@@ -203,7 +203,7 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
             setScrolling(true);
             originalOnConnectStart?.(event, params);
         },
-        [originalOnConnectStart, setScrolling]
+        [originalOnConnectStart, setScrolling],
     );
 
     const onConnectStop: OnConnectStopFunc = React.useCallback(
@@ -211,7 +211,7 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
             setScrolling(false);
             originalOnConnectStop?.(event);
         },
-        [originalOnConnectStop, setScrolling]
+        [originalOnConnectStop, setScrolling],
     );
 
     const onNodeDragStart = React.useCallback(
@@ -219,7 +219,7 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
             setScrolling(true);
             originalOnNodeDragStart?.(event, node);
         },
-        [originalOnNodeDragStart, setScrolling]
+        [originalOnNodeDragStart, setScrolling],
     );
 
     const onNodeDragStop = React.useCallback(
@@ -227,7 +227,7 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
             setScrolling(false);
             originalOnNodeDragStop?.(event, node);
         },
-        [originalOnNodeDragStop, setScrolling]
+        [originalOnNodeDragStop, setScrolling],
     );
 
     const onSelectionDragStart = React.useCallback(
@@ -235,7 +235,7 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
             setScrolling(true);
             originalOnSelectionDragStart?.(event, nodes);
         },
-        [originalOnSelectionDragStart, setScrolling]
+        [originalOnSelectionDragStart, setScrolling],
     );
 
     const onSelectionDragStop = React.useCallback(
@@ -243,7 +243,7 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
             setScrolling(false);
             originalOnSelectionDragStop?.(event, nodes);
         },
-        [originalOnSelectionDragStop, setScrolling]
+        [originalOnSelectionDragStop, setScrolling],
     );
 
     const onEdgeUpdateStart = React.useCallback(
@@ -251,7 +251,7 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
             setScrolling(true);
             originalOnEdgeUpdateStart?.(event, edge);
         },
-        [originalOnEdgeUpdateStart, setScrolling]
+        [originalOnEdgeUpdateStart, setScrolling],
     );
 
     const onEdgeUpdateEnd = React.useCallback(
@@ -259,7 +259,7 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
             setScrolling(false);
             originalOnEdgeUpdateEnd?.(event, edge);
         },
-        [originalOnEdgeUpdateEnd, setScrolling]
+        [originalOnEdgeUpdateEnd, setScrolling],
     );
 
     if (!reactFlowProps.id || !scrollOnDrag) {

package/src/common/scss/_color-functions.scss

@@ -92,7 +92,11 @@
     }
 
     @if $alpha > 0 {
-        @return eccgui-color-mix($color 100% * $alpha, transparent);
+        @if math.is-unitless($alpha) {
+            $alpha: 100% * $alpha;
+        }
+
+        @return eccgui-color-mix($color $alpha, transparent);
     } @else {
         // workaround: we need to prevent `0%` because it will reduced to `0` by some CSS minifiers and leads to invalid color-mix values
         @return eccgui-color-mix($color, transparent 100%);
@@ -102,6 +106,8 @@
 $debug-rgba-values: "yes";
 
 /**
+ * Overwrite SCSS built-in rgba function
+ * TODO: we need to check if this is future proof, maybe this behaviour is not planned by Dart Sass library.
  * Split between rgba(red, green, blue, alpha) and rgba(color, alpha).
  */
 @function rgba($r, $g, $b: "undefined", $a: 1) {
@@ -113,15 +119,14 @@ $debug-rgba-values: "yes";
     } @else {
         // rgba(r, g, b, a) is used -> rgb(r g b / a)
         // @see https://developer.mozilla.org/de/docs/Web/CSS/color_value/rgb
-        $color-new-notation: rgb(#{$r} #{$g} #{$b} / #{$a});
+        $color-new-notation: #{"rgb(" + $r + " " + $g + " " + $b + " / " + $a + ")"};
 
         @return $color-new-notation;
     }
 }
 
 /**
- * Overwrite SCSS built-in rgba function to support colors by custom properties and CSS color methods.
- * TODO: we need to check if this is future proof, maybe this bahaviour is not planned by Dart Sass library.
+ * Support colors by custom properties and CSS color methods.
  */
 @function rgba-extended($color, $alpha) {
     @if meta.type-of($color) == "color" {

package/src/common/utils/CssCustomProperties.ts

@@ -105,7 +105,7 @@ export default class CssCustomProperties {
     };
 
     static listCustomProperties = (
-        props: getCustomPropertiesProps = {}
+        props: getCustomPropertiesProps = {},
     ): [string, string][] | Record<string, string> => {
         const { removeDashPrefix = true, returnObject = true, filterName = () => true, ...filterProps } = props;
 

package/src/common/utils/characters.ts

@@ -64,13 +64,13 @@ const invisibleZeroWidthCharacterCodePoints: InvisibleCharacter[] = internalInvi
 const createInvisibleZeroWidthCharacterCodePointsRegex = () => {
     return new RegExp(
         `([${invisibleZeroWidthCharacterCodePoints.map((cp) => `\\u{${cp.hexString}}`).join("")}])`,
-        "ug"
+        "ug",
     );
 };
 
 /** Map from codepoint to invisible character. */
 const invisibleZeroWidthCharacterCodePointsMap: Map<number, InvisibleCharacter> = new Map(
-    invisibleZeroWidthCharacterCodePoints.map((cp) => [cp.codePoint, cp])
+    invisibleZeroWidthCharacterCodePoints.map((cp) => [cp.codePoint, cp]),
 );
 
 const clearStringFromInvisibleCharacters = (inputString: string): string => {

package/src/common/utils/colorCalculateDistance.ts

@@ -1,6 +1,6 @@
-import Color from "color";
+import Color, { ColorLike } from "color";
 
-export type colorValue = Color | string;
+export type colorValue = ColorLike;
 
 export interface colorCalculateDistanceProps {
     // Color used to calculate distance to other color.

package/src/common/utils/colorDecideContrastvalue.ts

@@ -1,6 +1,6 @@
-import Color from "color";
+import Color, { ColorLike } from "color";
 
-export type colorValue = Color | string;
+export type colorValue = ColorLike;
 
 export interface decideContrastColorValueProps {
     // The color that is used to test if it need a light or dark color as contrast value.
@@ -21,7 +21,8 @@ const decideContrastColorValue = ({
         contrastColor = Color(testColor).isLight()
             ? Color(darkColor).rgb().toString()
             : Color(lightColor).rgb().toString();
-    } catch (ex) {
+    } catch {
+        // eslint-disable-next-line no-console
         console.warn("Received invalid colors", { testColor, lightColor, darkColor });
     }
     return contrastColor;