@eccenca/gui-elements 25.2.0 → 26.0.0-rc.0

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) {
@@ -281,6 +281,6 @@ export const useReactFlowScrollOnDragV9 = ({ reactFlowProps, scrollOnDrag }: IPr
 };
 
 /**
- * @deprecated (v26) Currently it ony supports ReactFlow v9. Better to `useReactFlowScrollOnDragV9` for now.
+ * @deprecated (v27) Currently it only supports ReactFlow v9. Better to `useReactFlowScrollOnDragV9` for now.
  */
 export const useReactFlowScrollOnDrag = useReactFlowScrollOnDragV9;

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;

package/src/common/utils/colorHash.ts

@@ -1,11 +1,11 @@
-import Color from "color";
+import Color, { ColorInstance } from "color";
 
 import { CLASSPREFIX as eccgui, COLORMINDISTANCE } from "../../configuration/constants";
 
 import { colorCalculateDistance } from "./colorCalculateDistance";
 import CssCustomProperties from "./CssCustomProperties";
 
-type ColorOrFalse = Color | false;
+type ColorOrFalse = ColorInstance | false;
 export type ColorWeight = 100 | 300 | 500 | 700 | 900;
 export type PaletteGroup = "identity" | "semantic" | "layout" | "extra";
 
@@ -20,10 +20,10 @@ export interface getEnabledColorsProps {
     // includeMixedColors?: boolean;
 }
 
-const getEnabledColorsFromPaletteCache = new Map<string, Color[]>();
+const getEnabledColorsFromPaletteCache = new Map<string, ColorInstance[]>();
 const getEnabledColorPropertiesFromPaletteCache = new Map<string, [string, string][]>();
 
-export function getEnabledColorsFromPalette(props: getEnabledColorsProps): Color[] {
+export function getEnabledColorsFromPalette(props: getEnabledColorsProps): ColorInstance[] {
     const configId = JSON.stringify({
         includePaletteGroup: props.includePaletteGroup,
         includeColorWeight: props.includeColorWeight,
@@ -39,7 +39,7 @@ export function getEnabledColorsFromPalette(props: getEnabledColorsProps): Color
         configId,
         colorPropertiesFromPalette.map((color) => {
             return Color(color[1]);
-        })
+        }),
     );
 
     return getEnabledColorsFromPaletteCache.get(configId)!;
@@ -108,7 +108,7 @@ function getColorcode(text: string): ColorOrFalse {
 
 interface textToColorOptions {
     /** Stack of colors that are allowed to be returned. */
-    enabledColors: Color[] | "all" | getEnabledColorsProps;
+    enabledColors: ColorInstance[] | "all" | getEnabledColorsProps;
     /** Return input text if it represents a valid color string, e.g. `#000` or `black`. */
     returnValidColorsDirectly: boolean;
 }
@@ -138,7 +138,7 @@ export function textToColorHash({
     }
 
     if (!color) {
-        color = getColorcode(stringToHexColorHash(text)) as Color;
+        color = getColorcode(stringToHexColorHash(text)) as ColorInstance;
     }
 
     if (options.enabledColors === "all" && color) {
@@ -146,13 +146,9 @@ export function textToColorHash({
         return color.hex().toString();
     }
 
-    let enabledColors = [] as Color[];
-
-    if (Array.isArray(options.enabledColors)) {
-        enabledColors = options.enabledColors;
-    } else {
-        enabledColors = getEnabledColorsFromPalette(options.enabledColors as getEnabledColorsProps);
-    }
+    const enabledColors = Array.isArray(options.enabledColors)
+        ? options.enabledColors
+        : getEnabledColorsFromPalette(options.enabledColors as getEnabledColorsProps);
 
     if (enabledColors.length === 0) {
         // eslint-disable-next-line no-console
@@ -160,7 +156,7 @@ export function textToColorHash({
         return false;
     }
 
-    return nearestColorNeighbour(color, enabledColors as Color[])
+    return nearestColorNeighbour(color, enabledColors as ColorInstance[])
         .hex()
         .toString();
 }
@@ -190,7 +186,7 @@ function stringToHexColorHash(inputString: string): string {
     return integerToHexColor(integerHash);
 }
 
-function nearestColorNeighbour(color: Color, enabledColors: Color[]): Color {
+function nearestColorNeighbour(color: ColorInstance, enabledColors: ColorInstance[]): ColorInstance {
     const nearestNeighbour = enabledColors.reduce(
         (nearestColor, enabledColorsItem) => {
             const distance = colorCalculateDistance({
@@ -207,7 +203,7 @@ function nearestColorNeighbour(color: Color, enabledColors: Color[]): Color {
         {
             distance: Number.POSITIVE_INFINITY,
             color: enabledColors[0],
-        }
+        },
     );
     return nearestNeighbour.color;
 }

package/src/common/utils/getColorConfiguration.ts

@@ -57,8 +57,8 @@ const getColorConfiguration = (configId: colorconfigs): Record<string, string> =
                     } catch {
                         return [setting[0], undefined];
                     }
-                })
-            ) as Record<string, string>
+                }),
+            ) as Record<string, string>,
         );
     }
     return colorConfigurationMemo.get(configId)!;

package/src/common/utils/openInNewTab.ts

@@ -3,7 +3,7 @@
 export const openInNewTab = (
     event: React.MouseEvent<HTMLAnchorElement>,
     handler?: (e: React.MouseEvent<HTMLAnchorElement>) => void,
-    url?: string
+    url?: string,
 ) => {
     //if ctrl key or cmd key bypass click handler and delegation open in the background new tab
     if (url && (event.ctrlKey || event.metaKey)) {

package/src/common/utils/reduceToText.tsx

@@ -11,7 +11,7 @@ export interface ReduceToTextFuncType {
          *  Component or text to reduce HTML markup content to plain text.
          */
         input: React.ReactNode | React.ReactNode[] | string,
-        options?: Pick<TextReducerProps, "maxNodes" | "maxLength" | "decodeHtmlEntities" | "decodeHtmlEntitiesOptions">
+        options?: Pick<TextReducerProps, "maxNodes" | "maxLength" | "decodeHtmlEntities" | "decodeHtmlEntitiesOptions">,
     ): string;
 }
 

package/src/components/Accordion/AccordionItem.tsx

@@ -9,7 +9,8 @@ type sizeOptions = "none" | "small" | "medium" | "large";
 // workaround to get type/interface
 type CarbonAccordionItemProps = React.ComponentProps<typeof CarbonAccordionItem>;
 export interface AccordionItemProps
-    extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando">,
+    extends
+        Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando">,
         Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
     /**
      * additional user class name
@@ -18,7 +19,7 @@ export interface AccordionItemProps
     /**
      * header of accordion item
      */
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * use full available width for content
      */

package/src/components/Accordion/Stories/AccordionItem.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
+import { Accordion, AccordionItem, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Components/Accordion/AccordionItem",

package/src/components/Application/ApplicationSidebarNavigation.tsx

@@ -4,8 +4,12 @@ import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@c
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationSidebarNavigationProps
-    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
-        React.HTMLAttributes<HTMLElement> {}
+    extends
+        Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
+        React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    className?: string;
+}
 
 export const ApplicationSidebarNavigation = ({
     children,

package/src/components/Application/ApplicationTitle.tsx

@@ -60,7 +60,15 @@ export const ApplicationTitle = ({
             <span className={`${eccgui}-application__title--content`}>
                 {!!depiction && (
                     <>
-                        <span className={`${eccgui}-application__title--depiction`}>{depiction}</span>
+                        <span className={`${eccgui}-application__title--depiction`}>
+                            {React.isValidElement(depiction) ? (
+                                depiction
+                            ) : depiction instanceof HTMLElement ? (
+                                <>{depiction.outerHTML}</>
+                            ) : (
+                                depiction
+                            )}
+                        </span>
                     </>
                 )}
                 {!!prefix && (

package/src/components/Application/ApplicationToolbarAction.tsx

@@ -7,7 +7,8 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 // workaround to get type/interface
 type CarbonHeaderGlobalActionProps = React.ComponentProps<typeof CarbonHeaderGlobalAction>;
 export interface ApplicationToolbarActionProps
-    extends CarbonHeaderGlobalActionProps,
+    extends
+        CarbonHeaderGlobalActionProps,
         Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {}
 
 export const ApplicationToolbarAction = ({

package/src/components/Application/_header.scss

@@ -52,19 +52,22 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 /// Item link
 $shell-header-link: $blue-60 !default;
 
+/// Height
+$shell-header-height: mini-units(8) !default;
+
 // load library sub component
 @import "~@carbon/react/scss/components/ui-shell/header/index";
 
 // tweak original layout
 
 .#{$prefix}--header {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 .#{$prefix}--header__action,
 .#{$prefix}--header__action.#{$prefix}--btn--icon-only {
-    width: mini-units(8);
-    height: mini-units(8);
+    width: $shell-header-height;
+    height: $shell-header-height;
     padding-block-start: 0;
     background-color: transparent;
 
@@ -128,7 +131,7 @@ span.#{$prefix}--header__name {
 }
 
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 // tweak original colors (as long as config does not work properly)
@@ -267,15 +270,15 @@ a.#{$prefix}--header__menu-item:focus > svg {
     // adjust position of all other modal dialogs
 
     .#{$ns}-dialog-container {
-        top: mini-units(8);
-        left: mini-units(8);
-        width: calc(100% - #{mini-units(8)});
-        min-height: calc(100% - #{mini-units(8)});
+        top: $shell-header-height;
+        left: $shell-header-height;
+        width: calc(100% - #{$shell-header-height});
+        min-height: calc(100% - #{$shell-header-height});
     }
 
     .#{$eccgui}-dialog__wrapper {
-        max-width: calc(100vw - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
-        max-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
+        max-width: calc(100vw - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
+        max-height: calc(100vh - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
         margin: 0;
     }
 }

package/src/components/Application/stories/ColorPalettes.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { loremIpsum } from "react-lorem-ipsum";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import Color from "color";
 
@@ -183,7 +184,9 @@ const ColorPaletteConfigurator = ({
 
     React.useEffect(() => {
         if (refConfigurator.current) {
-            const panelConfig = document.getElementById("bp5-tab-panel_colorconfig_editor");
+            const panelConfig = document.getElementById(
+                `${BlueprintClasses.getClassNamespace()}-tab-panel_colorconfig_editor`,
+            );
             if (panelConfig) {
                 const warnings = Array.from(panelConfig.getElementsByClassName("eccgui-badge"))
                     .map((warning: Element) => {
@@ -194,10 +197,11 @@ const ColorPaletteConfigurator = ({
                     }, 0 as number);
                 const warningsTarget = document.getElementById("sumWarnings");
                 if (warningsTarget) {
+                    const warningsRoot = createRoot(warningsTarget);
                     if (warnings > 0) {
-                        render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
+                        warningsRoot.render(<Badge intent={"warning"}>{warnings}</Badge>);
                     } else {
-                        render(<></>, warningsTarget);
+                        warningsRoot.render(<></>);
                     }
                 }
             }
@@ -238,7 +242,7 @@ const ColorPaletteConfigurator = ({
     const fixColorByLuminosity = (
         color: Color,
         colorTest: Color,
-        testFn: (color1: Color, color2: Color) => boolean
+        testFn: (color1: Color, color2: Color) => boolean,
     ) => {
         let fixedColor = color as Color;
         let check = testFn(fixedColor, colorTest);
@@ -306,7 +310,7 @@ const ColorPaletteConfigurator = ({
                                                         // eslint-disable-next-line no-console
                                                         console.log(`${c1.hex()} -> ${distance}`);
                                                         return distance < minimalDistance;
-                                                    }
+                                                    },
                                                 );
                                                 setPaletteData({ ...colors });
                                             }}
@@ -332,12 +336,12 @@ const ColorPaletteConfigurator = ({
                                                         // eslint-disable-next-line no-console
                                                         console.log(`${c1.hex()} -> ${distance}`);
                                                         return distance < minimalDistance;
-                                                    }
+                                                    },
                                                 );
                                                 setPaletteData({ ...colors });
                                             }}
                                         />
-                                    </MenuItem>
+                                    </MenuItem>,
                                 );
                             }
                         }
@@ -391,7 +395,7 @@ const ColorPaletteConfigurator = ({
                                                                 // eslint-disable-next-line no-console
                                                                 console.log(`${c1.hex()} -> ${contrast}`);
                                                                 return contrast < minimalContrast;
-                                                            }
+                                                            },
                                                         );
                                                         setPaletteData({ ...colors });
                                                     }}
@@ -415,12 +419,12 @@ const ColorPaletteConfigurator = ({
                                                                 // eslint-disable-next-line no-console
                                                                 console.log(`${c1.hex()} -> ${contrast}`);
                                                                 return contrast < minimalContrast;
-                                                            }
+                                                            },
                                                         );
                                                         setPaletteData({ ...colors });
                                                     }}
                                                 />
-                                            </MenuItem>
+                                            </MenuItem>,
                                         );
                                     }
                                 }
@@ -457,7 +461,7 @@ const ColorPaletteConfigurator = ({
         paletteData: object = {},
         label: string,
         id: string[],
-        updateFn: (color: string) => void
+        updateFn: (color: string) => void,
     ) => {
         if (!paletteData[id[0]] || !paletteData[id[0]][id[1]] || !paletteData[id[0]][id[1]][id[2]]) {
             return <></>;
@@ -579,7 +583,7 @@ const ColorPaletteConfigurator = ({
                                                         (newcolor) => {
                                                             paletteData[group][tint][weight] = Color(newcolor).rgb();
                                                             setPaletteData({ ...paletteData });
-                                                        }
+                                                        },
                                                     );
                                                 })}
                                             </FieldItemRow>
@@ -590,7 +594,7 @@ const ColorPaletteConfigurator = ({
                                                 text="Auto-span tint value from 100 to 900"
                                                 onClick={() => {
                                                     const tintValues = Object.values(
-                                                        paletteData[group][tint]
+                                                        paletteData[group][tint],
                                                     ) as Color[];
                                                     const tintKeys = Object.keys(paletteData[group][tint]);
                                                     if (tintValues.length > 0) {
@@ -599,15 +603,15 @@ const ColorPaletteConfigurator = ({
                                                         tintKeys.forEach((weight, id) => {
                                                             paletteData[group][tint][weight] = Color(tint100).mix(
                                                                 Color(tint900),
-                                                                id / (tintValues.length - 1)
+                                                                id / (tintValues.length - 1),
                                                             );
                                                             // eslint-disable-next-line no-console
                                                             console.log(
                                                                 `mix ${Color(tint100).hex()} with ${Color(
-                                                                    tint900
+                                                                    tint900,
                                                                 ).hex()} by ${id / (tintValues.length - 1)} -> ${
                                                                     paletteData[group][tint][weight]
-                                                                }`
+                                                                }`,
                                                             );
                                                         });
                                                     }
@@ -695,7 +699,7 @@ const ColorPaletteConfigurator = ({
                                                         onChange={(event) => {
                                                             updateHashtestGroups(
                                                                 event.target.value,
-                                                                event.target.checked
+                                                                event.target.checked,
                                                             );
                                                         }}
                                                         checked={hashtestGroups.includes(group)}
@@ -715,7 +719,7 @@ const ColorPaletteConfigurator = ({
                                                         onChange={(event) => {
                                                             updateHashtestWeights(
                                                                 event.target.value,
-                                                                event.target.checked
+                                                                event.target.checked,
                                                             );
                                                         }}
                                                         checked={hashtestWeights.includes(weight)}