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

package/src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -1,28 +1,16 @@
-$reactflow-color-project-node: #A5356E !default; // Cannot be part of a workflow but we have no other place atm to configure it
-$reactflow-color-dataset-node: #3a7896 !default;
-$reactflow-color-linking-node: #0097a7 !default;
-$reactflow-color-transform-node: #40a691 !default;
-$reactflow-color-task-node: #80b67b !default;
-$reactflow-color-workflow-node: #745a85 !default;
-$reactflow-color-replaceable-input: #faa854 !default;
-
-@function bright($color) {
-    @return mix($color, #fff, 24%);
-}
-
-.#{eccgui}-configuration--colors__react-flow-workflow {
-    --projectNode: #{$reactflow-color-project-node};
-    --datasetNode: #{$reactflow-color-dataset-node};
-    --linkingNode: #{$reactflow-color-linking-node};
-    --transformNode: #{$reactflow-color-transform-node};
-    --taskNode: #{$reactflow-color-task-node};
-    --workflowNode: #{$reactflow-color-workflow-node};
-    --replaceableInput: #{$reactflow-color-replaceable-input};
-    --projectNodeBright: #{bright($reactflow-color-project-node)};
-    --datasetNodeBright: #{bright($reactflow-color-dataset-node)};
-    --linkingNodeBright: #{bright($reactflow-color-linking-node)};
-    --transformNodeBright: #{bright($reactflow-color-transform-node)};
-    --taskNodeBright: #{bright($reactflow-color-task-node)};
-    --workflowNodeBright: #{bright($reactflow-color-workflow-node)};
-    --replaceableInputBright: #{bright($reactflow-color-replaceable-input)};
+.#{$eccgui}-configuration--colors__react-flow-workflow {
+    --#{$eccgui}-project-node: #{eccgui-color-var("layout", "magenta", 700)};
+    --#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
+    --#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "cyan", 900)};
+    --#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
+    --#{$eccgui}-linking-node: #{eccgui-color-var("layout", "teal", 900)};
+    --#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "teal", 100)};
+    --#{$eccgui}-transform-node: #{eccgui-color-var("layout", "pink", 700)};
+    --#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "pink", 100)};
+    --#{$eccgui}-task-node: #{eccgui-color-var("layout", "lime", 700)};
+    --#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 100)};
+    --#{$eccgui}-workflow-node: #{eccgui-color-var("layout", "purple", 700)};
+    --#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 100)};
+    --#{$eccgui}-replaceableInput: #{eccgui-color-var("layout", "amber", 700)};
+    --#{$eccgui}-replaceableInput-bright: #{eccgui-color-var("layout", "amber", 100)};
 }

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

@@ -1,20 +1,22 @@
-import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+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: EdgeDefault,
-    implicit: EdgeDefault,
-    import: EdgeDefault,
-    subclass: EdgeDefault,
-    subproperty: EdgeDefault,
-    rdftype: EdgeDefault,
-    success: EdgeDefault,
-    warning: EdgeDefault,
-    danger: EdgeDefault,
+    default: EdgeBezier,
+    implicit: EdgeBezier,
+    import: EdgeBezier,
+    subclass: EdgeBezier,
+    subproperty: EdgeBezier,
+    rdftype: EdgeBezier,
+    success: EdgeBezier,
+    warning: EdgeBezier,
+    danger: EdgeBezier,
 };
 
-const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode> = {
+const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     graph: NodeDefault,
     class: NodeDefault,

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

@@ -2,6 +2,8 @@ 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,
@@ -12,7 +14,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode> = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,

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

@@ -1,10 +1,11 @@
 import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
+import { EdgeStraight } from "./../../../extensions/react-flow/edges/EdgeStraight";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 
 export const edgeTypes = {
     default: EdgeDefault,
-    straight: EdgeDefault,
+    straight: EdgeStraight,
     step: EdgeStep,
 };
 

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

@@ -2,6 +2,8 @@ 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,
@@ -10,7 +12,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode> = {
+const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     dataset: NodeDefault,
     linking: NodeDefault,

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

@@ -9,29 +9,15 @@ import {
     Transform,
 } from "react-flow-renderer/dist/types";
 
-import { ReactFlowProps } from "../ReactFlow/ReactFlow";
+import { ReactFlowExtendedScrollProps } from "../ReactFlow/ReactFlow";
+import { ReactFlowV9ContainerProps } from "../ReactFlow/ReactFlowV9";
 
-interface IProps {
+interface IProps extends ReactFlowExtendedScrollProps {
     /** The original react-flow props. */
-    reactFlowProps: ReactFlowProps;
-    /** If defined the canvas scrolls on all drag operations (node, selection, edge connect)
-     * when the mouse pointer comes near the canvas borders or goes beyond them.
-     * The `id` property of the ReactFlow component must be set in order for this to work. */
-    scrollOnDrag?: {
-        /** Time in milliseconds to wait before the canvas scrolls the next step. */
-        scrollInterval: number;
-
-        /**
-         * The size of each scroll step.
-         * This should be a number between 0.0 - 1.0.
-         * E.g. a value of 0.25 will lead to a scroll step size of a quarter of the visible canvas. */
-        scrollStepSize: number;
-    };
+    reactFlowProps: ReactFlowV9ContainerProps;
 }
 
-interface ScrollState {
-    // The react-flow instance
-    reactFlowInstance?: OnLoadParams;
+export interface ScrollStateShared {
     // The current x position of the react-flow view
     currentX: number;
     // The current y position of the react-flow view
@@ -50,8 +36,13 @@ interface ScrollState {
     draggingOperationActive: boolean;
 }
 
+interface ScrollState extends ScrollStateShared {
+    // The react-flow instance
+    reactFlowInstance?: OnLoadParams;
+}
+
 type ReturnType = Pick<
-    ReactFlowProps,
+    ReactFlowV9ContainerProps,
     | "onLoad"
     | "onNodeDragStart"
     | "onNodeDragStop"
@@ -65,7 +56,7 @@ type ReturnType = Pick<
 
 /** Handles the scrolling of the react-flow canvas on all drag operations when the mouse pointer gets near or over the borders.
  * The return value contains the wrapped react-flow callback functions that need to be handed over to the react-flow component. */
-export const useReactFlowScrollOnDrag = ({ reactFlowProps, scrollOnDrag }: IProps): ReturnType => {
+export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IProps): ReturnType => {
     /** Tracks the zoom on drag to border functionality. */
     const scrollState = React.useRef<ScrollState>({
         reactFlowInstance: undefined,
@@ -83,6 +74,7 @@ export const useReactFlowScrollOnDrag = ({ reactFlowProps, scrollOnDrag }: IProp
             return useStoreState((state) => state.transform);
         } catch (ex) {
             if (reactFlowProps.id && scrollOnDrag) {
+                // eslint-disable-next-line no-console
                 console.warn("Scroll on drag is not correctly working. Reason: " + ex);
             }
             return [0, 0, 1];
@@ -139,6 +131,7 @@ export const useReactFlowScrollOnDrag = ({ reactFlowProps, scrollOnDrag }: IProp
                 const canvasElement = document.getElementById(reactFlowInstanceId);
                 if (!canvasElement) {
                     if (!state.loggedWarning) {
+                        // eslint-disable-next-line no-console
                         console.warn("No element found with ID " + reactFlowInstanceId);
                         state.loggedWarning = true;
                     }
@@ -286,3 +279,8 @@ export const useReactFlowScrollOnDrag = ({ reactFlowProps, scrollOnDrag }: IProp
         };
     }
 };
+
+/**
+ * @deprecated (v26) Currently it ony supports ReactFlow v9. Better to `useReactFlowScrollOnDragV9` for now.
+ */
+export const useReactFlowScrollOnDrag = useReactFlowScrollOnDragV9;

package/src/cmem/react-flow/index.ts

@@ -1,3 +1,4 @@
 export * from "./ReactFlow/ReactFlow";
 export * from "./StickyNoteModal/StickyNoteModal";
-export * from "./extensions/scrollOnDragHook";
+export { useReactFlowScrollOnDragV9, useReactFlowScrollOnDrag } from "./extensions/scrollOnDragHook";
+export * from "./extensions/ReactFlowHotkeyContext";

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

@@ -1,17 +1,17 @@
-@mixin nodetypestyles($type, $color) {
+@mixin nodetypestyles($type) {
     .react-flow__node-#{$type} {
-        @include nodecoloring($color);
+        @include nodecoloring($type);
     }
 }
 
-@mixin nodecoloring($color) {
+@mixin nodecoloring($type) {
     .#{$eccgui}-graphviz__node {
-        background-color: mix($color, #fff, 24%);
-        border-color: $color;
+        background-color: var(--#{$eccgui}-#{$type}-node-bright);
+        border-color: var(--#{$eccgui}-#{$type}-node);
     }
     .#{$eccgui}-graphviz__node__extension--expanded {
         &.#{$eccgui}-graphviz__node__extension--slideout {
-            border-color: $color;
+            border-color: var(--#{$eccgui}-#{$type}-node);
         }
     }
 }
@@ -19,7 +19,7 @@
 // Graph node types
 
 .react-flow__node-graph {
-    @include nodecoloring($reactflow-color-graph-node);
+    @include nodecoloring("graph");
     .#{$eccgui}-graphviz__node {
         border-style: double;
         border-width: 3 * $reactflow-node-border-width;
@@ -34,11 +34,11 @@
     }
 }
 
-@include nodetypestyles("class", $reactflow-color-class-node);
-@include nodetypestyles("instance", $reactflow-color-instance-node);
+@include nodetypestyles("class");
+@include nodetypestyles("instance");
 
 .react-flow__node-property {
-    @include nodecoloring($reactflow-color-property-node);
+    @include nodecoloring("property");
     .#{$eccgui}-graphviz__node {
         border-style: dashed;
     }
@@ -51,16 +51,16 @@
 
 // Workflow node types
 
-@include nodetypestyles("dataset", $reactflow-color-dataset-node);
-@include nodetypestyles("linking", $reactflow-color-linking-node);
-@include nodetypestyles("transform", $reactflow-color-transform-node);
-@include nodetypestyles("task", $reactflow-color-task-node);
-@include nodetypestyles("workflow", $reactflow-color-workflow-node);
+@include nodetypestyles("dataset");
+@include nodetypestyles("linking");
+@include nodetypestyles("transform");
+@include nodetypestyles("task");
+@include nodetypestyles("workflow");
 
 // Linking node types
 
-@include nodetypestyles("sourcepath", $reactflow-color-sourcepath-node);
-@include nodetypestyles("targetpath", $reactflow-color-targetpath-node);
-@include nodetypestyles("transformation", $reactflow-color-transformation-node);
-@include nodetypestyles("comparator", $reactflow-color-comparator-node);
-@include nodetypestyles("aggregator", $reactflow-color-aggregator-node);
+@include nodetypestyles("sourcepath");
+@include nodetypestyles("targetpath");
+@include nodetypestyles("transformation");
+@include nodetypestyles("comparator");
+@include nodetypestyles("aggregator");

package/src/common/index.ts

@@ -1,5 +1,7 @@
 import { invisibleZeroWidthCharacters } from "./utils/characters";
+import { colorCalculateDistance } from "./utils/colorCalculateDistance";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
+import { getEnabledColorsFromPalette, textToColorHash } from "./utils/colorHash";
 import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
@@ -9,9 +11,12 @@ export type { IntentTypes as IntentBaseTypes } from "./Intent";
 export const utils = {
     openInNewTab,
     decideContrastColorValue,
+    colorCalculateDistance,
     getColorConfiguration,
     invisibleZeroWidthCharacters,
     getGlobalVar,
     setGlobalVar,
     getScrollParent,
+    getEnabledColorsFromPalette,
+    textToColorHash,
 };

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

@@ -0,0 +1,134 @@
+@use "sass:list";
+@use "sass:color";
+@use "sass:math";
+@use "sass:meta";
+
+/**
+ * Always provide a list of 5 color tints.
+ * If the list do not provide 5 colors then create them based on the first and last color in the list.
+ */
+@function eccgui-create-color-tints($colorset) {
+    $colorset-steps: 5; // number of tints
+    $count-colors: list.length($colorset);
+
+    @if $count-colors == $colorset-steps {
+        @return $colorset;
+    }
+
+    @if $count-colors < 1 {
+        @error "Need at least 1 color to create color tints.";
+    }
+
+    // we asume that it correct to give only start and end of tint weights
+    // only echo debug message if we have a 1, 3 or 4 color values
+    @if $count-colors != 2 {
+        @debug "Got only #{$count-colors} tints: #{$colorset}";
+    }
+
+    $color-tint-start: rgb(
+        color.red(list.nth($colorset, 1)),
+        color.green(list.nth($colorset, 1)),
+        color.blue(list.nth($colorset, 1))
+    );
+    $color-tint-end: rgb(
+        color.red(list.nth($colorset, -1)),
+        color.green(list.nth($colorset, -1)),
+        color.blue(list.nth($colorset, -1))
+    );
+    $colorset-fallback: $color-tint-start;
+
+    @for $i from 2 to $colorset-steps {
+        $tint-step: color.mix($color-tint-end, $color-tint-start, 100% * math.div($i - 1, $colorset-steps - 1));
+        $colorset-fallback: list.append(
+            $colorset-fallback,
+            rgb(color.red($tint-step), color.green($tint-step), color.blue($tint-step))
+        );
+
+        // @debug("mix #{$color-tint-start} with #{$color-tint-end} by #{math.div($i - 1, $colorset-steps - 1)} -> #{rgb(color.red($tint-step), color.green($tint-step), color.blue($tint-step))}")
+    }
+
+    $colorset-fallback: list.append($colorset-fallback, $color-tint-end);
+
+    @if $count-colors != 2 {
+        @debug "Create fallback with #{$colorset-steps} tints: #{$colorset-fallback}";
+    }
+
+    @return $colorset-fallback;
+}
+
+/**
+ * Create name for custom property.
+ */
+@function eccgui-color-name($group_or_name, $tint: null, $weight: null) {
+    @if $group_or_name and $tint and $weight {
+        @return "--#{$eccgui}-color-palette-#{$group_or_name}-#{$tint}-#{$weight}";
+    } @else {
+        @return "--#{$eccgui}-color-#{$group_or_name}";
+    }
+}
+
+/**
+ * Create custom property for palette color.
+ */
+@function eccgui-color-var($group_or_name, $tint: null, $weight: null) {
+    @return var(#{eccgui-color-name($group_or_name, $tint, $weight)});
+}
+
+/**
+ * Wraps the CSS color-mix function to control the color space on only one place.
+ */
+@function eccgui-color-mix($color1, $color2) {
+    @return color-mix(in srgb, $color1, $color2);
+}
+
+/**
+ * Similar to SCSS function rgba($color, $alpha).
+ * Created to replace them easily for CSS custom properties.
+ */
+@function eccgui-color-rgba($color, $alpha) {
+    @return eccgui-color-mix($color 100% * $alpha, transparent);
+}
+
+$debug-rgba-values: "yes";
+
+/**
+ * Split between rgba(red, green, blue, alpha) and rgba(color, alpha).
+ */
+@function rgba($r, $g, $b: "undefined", $a: 1) {
+    // check if old notation is used
+    @if meta.variable-exists("r") and meta.variable-exists("g") and $b == "undefined" {
+        // rgba(color, alpha) was used
+        // forward to our color check splitter
+        @return rgba-extended($r, $g);
+    } @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});
+
+        @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.
+ */
+@function rgba-extended($color, $alpha) {
+    @if meta.type-of($color) == "color" {
+        // value is SASS color value, we use SASS color functionality
+        $alphacolor: color.change($color, $alpha: $alpha);
+
+        @if $color == transparent {
+            $alphacolor: transparent;
+        }
+
+        @if $debug-rgba-values == "yes" {
+            @warn "Color value $color is not defined by CSS custom property: rgba(#{$color}, #{$alpha}) -> #{$alphacolor}";
+        }
+
+        @return $alphacolor;
+    } @else {
+        // value is not a SASS color value, we use CSS color method
+        @return eccgui-color-rgba($color, $alpha);
+    }
+}

package/src/common/utils/CssCustomProperties.ts

@@ -6,13 +6,14 @@
 type AllowedCSSRule = CSSStyleRule | CSSPageRule; // they have necessary `selectorText` and `style` properties
 
 interface getLocalCssStyleRulesProps {
-    cssRuleType?: "CSSStyleRule" | "CSSPageRule";
+    cssRuleType?: "CSSStyleRule";
     selectorText?: string;
 }
 interface getLocalCssStyleRulePropertiesProps extends getLocalCssStyleRulesProps {
     propertyType?: "all" | "normal" | "custom";
 }
 interface getCustomPropertiesProps extends getLocalCssStyleRulesProps {
+    filterName?: (name: string) => boolean;
     removeDashPrefix?: boolean;
     returnObject?: boolean;
 }
@@ -27,7 +28,7 @@ export default class CssCustomProperties {
 
     // Methods
 
-    customProperties = (props: getCustomPropertiesProps = {}) => {
+    customProperties = (props: getCustomPropertiesProps = {}): string[][] | Record<string, string> => {
         // FIXME:
         // in case of performance issues results should get saved at least into intern variables
         // other cache strategies could be also tested
@@ -64,7 +65,7 @@ export default class CssCustomProperties {
             .flat();
     };
 
-    static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}): AllowedCSSRule[] => {
+    static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}): CSSStyleRule[] => {
         const { cssRuleType = "CSSStyleRule", selectorText } = filter;
         const cssStyleRules = CssCustomProperties.listLocalCssRules().filter((rule) => {
             const cssrule = rule as AllowedCSSRule;
@@ -80,14 +81,14 @@ export default class CssCustomProperties {
                 return false;
             }
         });
-        return cssStyleRules as AllowedCSSRule[];
+        return cssStyleRules as CSSStyleRule[];
     };
 
-    static listLocalCssStyleRuleProperties = (filter: getLocalCssStyleRulePropertiesProps = {}) => {
+    static listLocalCssStyleRuleProperties = (filter: getLocalCssStyleRulePropertiesProps = {}): string[][] => {
         const { propertyType = "all", ...otherFilters } = filter;
         return CssCustomProperties.listLocalCssStyleRules(otherFilters)
             .map((cssrule) => {
-                return [...(cssrule as any).style].map((propertyname) => {
+                return [...(cssrule as CSSStyleRule).style].map((propertyname) => {
                     return [propertyname.trim(), (cssrule as CSSStyleRule).style.getPropertyValue(propertyname).trim()];
                 });
             })
@@ -103,19 +104,25 @@ export default class CssCustomProperties {
             });
     };
 
-    static listCustomProperties = (props: getCustomPropertiesProps = {}) => {
-        const { removeDashPrefix = true, returnObject = true, ...filterProps } = props;
+    static listCustomProperties = (props: getCustomPropertiesProps = {}): string[][] | Record<string, string> => {
+        const { removeDashPrefix = true, returnObject = true, filterName = () => true, ...filterProps } = props;
 
         const customProperties = CssCustomProperties.listLocalCssStyleRuleProperties({
             ...filterProps,
             propertyType: "custom",
-        }).map((declaration) => {
-            if (removeDashPrefix) {
-                return [declaration[0].substr(2), declaration[1]];
-            }
-            return declaration;
-        });
+        })
+            .filter((declaration) => {
+                return filterName(declaration[0]);
+            })
+            .map((declaration) => {
+                if (removeDashPrefix) {
+                    return [declaration[0].substr(2), declaration[1]];
+                }
+                return declaration;
+            });
 
-        return returnObject ? Object.fromEntries(customProperties) : customProperties;
+        return returnObject
+            ? (Object.fromEntries(customProperties) as Record<string, string>)
+            : (customProperties as string[][]);
     };
 }

package/src/common/utils/colorCalculateDistance.ts

@@ -0,0 +1,28 @@
+import Color from "color";
+
+export type colorValue = Color | string;
+
+export interface colorCalculateDistanceProps {
+    // Color used to calculate distance to other color.
+    color1: colorValue;
+    // Other color used to calculate distance to color.
+    color2: colorValue;
+}
+
+/**
+ * Calculates the distance between 2 colors.
+ * To keep it simple the CIE76 formula is used.
+ * @see https://en.wikipedia.org/wiki/Color_difference#CIE76
+ */
+export const colorCalculateDistance = ({ color1, color2 }: colorCalculateDistanceProps): number | null => {
+    let colorDistance: number | null = null;
+    try {
+        const lab1 = Color(color1).lab();
+        const lab2 = Color(color2).lab();
+        colorDistance = ((lab1.l() - lab2.l()) ** 2 + (lab1.a() - lab2.a()) ** 2 + (lab1.b() - lab2.b()) ** 2) ** 0.5;
+    } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn("Received invalid colors", { color1, color2, error });
+    }
+    return colorDistance;
+};