From bf7b99eaef5fea657e9394f639186c7dc78e23c7 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 8 Jan 2025 16:49:25 +0100
Subject: [PATCH 01/14] fix Tabs stories

---
 src/components/Tabs/stories/Tab.stories.tsx      | 2 +-
 src/components/Tabs/stories/TabPanel.stories.tsx | 2 +-
 src/components/Tabs/stories/TabTitle.stories.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Tabs/stories/Tab.stories.tsx b/src/components/Tabs/stories/Tab.stories.tsx
index d7a567748..44ec92bdc 100644
--- a/src/components/Tabs/stories/Tab.stories.tsx
+++ b/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: {
diff --git a/src/components/Tabs/stories/TabPanel.stories.tsx b/src/components/Tabs/stories/TabPanel.stories.tsx
index 0ba72f783..270a513ed 100644
--- a/src/components/Tabs/stories/TabPanel.stories.tsx
+++ b/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>;
diff --git a/src/components/Tabs/stories/TabTitle.stories.tsx b/src/components/Tabs/stories/TabTitle.stories.tsx
index 8bb53ba50..c4124754d 100644
--- a/src/components/Tabs/stories/TabTitle.stories.tsx
+++ b/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>;

From 0210d34c6e316ea09ac1dac6dd6dc66adf195ccc Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 9 Jan 2025 15:45:59 +0100
Subject: [PATCH 02/14] include color palette as custom properties

---
 src/components/Application/_colors.scss     | 15 ++++
 src/components/Application/application.scss |  1 +
 src/configuration/_palettes.scss            | 91 +++++++++++++++++++++
 src/configuration/_variables.scss           |  2 +
 4 files changed, 109 insertions(+)
 create mode 100644 src/components/Application/_colors.scss
 create mode 100644 src/configuration/_palettes.scss

diff --git a/src/components/Application/_colors.scss b/src/components/Application/_colors.scss
new file mode 100644
index 000000000..6c79ea7fe
--- /dev/null
+++ b/src/components/Application/_colors.scss
@@ -0,0 +1,15 @@
+@use "sass:map";
+@use "sass:list";
+
+:root {
+    @each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light {
+        @each $palette-tint-name, $palette-tint-colors in $palette-group-tints {
+            @for $i from 1 through list.length($palette-tint-colors) {
+                #{eccgui-color-name($palette-group-name, $palette-tint-name, $i * 100)}: #{list.nth(
+                        $palette-tint-colors,
+                        $i
+                    )};
+            }
+        }
+    }
+}
diff --git a/src/components/Application/application.scss b/src/components/Application/application.scss
index 78d1b5d45..ea0de1677 100644
--- a/src/components/Application/application.scss
+++ b/src/components/Application/application.scss
@@ -1,4 +1,5 @@
 // @import 'config';
+@import "colors";
 @import "header";
 @import "toolbar";
 
diff --git a/src/configuration/_palettes.scss b/src/configuration/_palettes.scss
new file mode 100644
index 000000000..f93c8c8de
--- /dev/null
+++ b/src/configuration/_palettes.scss
@@ -0,0 +1,91 @@
+@use "sass:list";
+@use "sass:color";
+@use "sass:math";
+
+/**
+ * Always provide a list of 9 color tints.
+ * If the list do not provide 9 colors then create them based on the first and last color in the list.
+ */
+@function eccgui-create-color-tints($colorset) {
+    $colorset-steps: 9; // 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.";
+    }
+
+    @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, $colorset-steps));
+        $colorset-fallback: list.append(
+            $colorset-fallback,
+            rgb(color.red($tint-step), color.green($tint-step), color.blue($tint-step))
+        );
+    }
+
+    $colorset-fallback: list.append($colorset-fallback, $color-tint-end);
+
+    @debug "Create fallback with 9 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 && $tint && $weight {
+        @return "--#{$eccgui}-color-palette-#{$group_or_name}-#{$tint}-#{$weight}";
+    } @else {
+        @return "--#{$eccgui}-color-#{$group_or_name}";
+    }
+}
+
+/**
+ * Base definition for colors.
+ * Can be overwritten if defined before this file is included.
+ * You need to define all or nothing, we currently support overwriting it only partly.
+ */
+
+$eccgui-color-palette-light: (
+    "identity": (
+        "brand": eccgui-create-color-tints(#fae1cc rgb(254 143 1)),
+        "accent": eccgui-create-color-tints(#e5f4fb rgb(10 103 163)),
+    ),
+    "semantic": (
+        "info": eccgui-create-color-tints(rgb(227 242 253) rgb(21 101 192)),
+        "success": eccgui-create-color-tints(rgb(232 245 233) #1b5e20),
+        "warning": eccgui-create-color-tints(rgb(255 243 224) #e65100),
+        "danger": eccgui-create-color-tints(rgb(255 235 238) #b71c1c),
+    ),
+    "layout": (
+        "indigo": eccgui-create-color-tints(#ebcef2 #46247a),
+        "pink": eccgui-create-color-tints(#fadaec #b23a78),
+        "rajah": eccgui-create-color-tints(#fef0e1 #88592c),
+        "yellow": eccgui-create-color-tints(#fce7e7 #d4af37),
+        "lime": eccgui-create-color-tints(#cde0d6 #789f3f),
+        "teal": eccgui-create-color-tints(#9addd6 #1f7a68),
+        "cyan": eccgui-create-color-tints(#ccf9fe #00a3c4),
+        "brown": eccgui-create-color-tints(#da780d #632114),
+        "blue": eccgui-create-color-tints(#e5f4fb #0074b1),
+        "grey": eccgui-create-color-tints(#dcdde4 #101016),
+        "red": eccgui-create-color-tints(#f9ecf4 #c41e3a),
+        "green": eccgui-create-color-tints(#e8ede9 #008c30),
+    ),
+) !default;
diff --git a/src/configuration/_variables.scss b/src/configuration/_variables.scss
index 6f980db67..43750488f 100644
--- a/src/configuration/_variables.scss
+++ b/src/configuration/_variables.scss
@@ -15,6 +15,8 @@
 
 $eccgui: "eccgui" !default;
 
+@import "palettes";
+
 // -- Configuration stack of colors --------------------------------------------
 
 $eccgui-color-primary: rgb(254 143 1) !default;

From 3799bac8194f35cd4ccea21a5a03df015282b50e Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 9 Jan 2025 15:53:36 +0100
Subject: [PATCH 03/14] allow filtering when fetching css custom properties

---
 src/common/utils/CssCustomProperties.ts | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/common/utils/CssCustomProperties.ts b/src/common/utils/CssCustomProperties.ts
index ec9495c1d..8522a83c0 100644
--- a/src/common/utils/CssCustomProperties.ts
+++ b/src/common/utils/CssCustomProperties.ts
@@ -13,6 +13,7 @@ interface getLocalCssStyleRulePropertiesProps extends getLocalCssStyleRulesProps
     propertyType?: "all" | "normal" | "custom";
 }
 interface getCustomPropertiesProps extends getLocalCssStyleRulesProps {
+    filterName?: (name?: string) => boolean;
     removeDashPrefix?: boolean;
     returnObject?: boolean;
 }
@@ -87,7 +88,7 @@ export default class CssCustomProperties {
         const { propertyType = "all", ...otherFilters } = filter;
         return CssCustomProperties.listLocalCssStyleRules(otherFilters)
             .map((cssrule) => {
-                return [...(cssrule as any).style].map((propertyname) => {
+                return [...(cssrule as AllowedCSSRule).style].map((propertyname) => {
                     return [propertyname.trim(), (cssrule as CSSStyleRule).style.getPropertyValue(propertyname).trim()];
                 });
             })
@@ -104,17 +105,21 @@ export default class CssCustomProperties {
     };
 
     static listCustomProperties = (props: getCustomPropertiesProps = {}) => {
-        const { removeDashPrefix = true, returnObject = true, ...filterProps } = props;
+        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;
     };

From f702e2d7e5db13d78b74772bf5e64b2bd35f7e6a Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 9 Jan 2025 16:09:02 +0100
Subject: [PATCH 04/14] use story to include protype for color palette tool

---
 src/cmem/markdown/Markdown.stories.tsx        |   1 -
 src/common/utils/CssCustomProperties.ts       |   2 +-
 .../stories/Application.stories.tsx           |   4 +-
 .../stories/ColorPalettes.stories.tsx         | 220 ++++++++++++++++++
 4 files changed, 223 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Application/stories/ColorPalettes.stories.tsx

diff --git a/src/cmem/markdown/Markdown.stories.tsx b/src/cmem/markdown/Markdown.stories.tsx
index d067e7912..2754e20cf 100644
--- a/src/cmem/markdown/Markdown.stories.tsx
+++ b/src/cmem/markdown/Markdown.stories.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Blockquote } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Markdown } from "./../../../index";
diff --git a/src/common/utils/CssCustomProperties.ts b/src/common/utils/CssCustomProperties.ts
index 8522a83c0..a7166fcc9 100644
--- a/src/common/utils/CssCustomProperties.ts
+++ b/src/common/utils/CssCustomProperties.ts
@@ -13,7 +13,7 @@ interface getLocalCssStyleRulePropertiesProps extends getLocalCssStyleRulesProps
     propertyType?: "all" | "normal" | "custom";
 }
 interface getCustomPropertiesProps extends getLocalCssStyleRulesProps {
-    filterName?: (name?: string) => boolean;
+    filterName?: (name: string) => boolean;
     removeDashPrefix?: boolean;
     returnObject?: boolean;
 }
diff --git a/src/components/Application/stories/Application.stories.tsx b/src/components/Application/stories/Application.stories.tsx
index e2feb5907..7e0aa6cf4 100644
--- a/src/components/Application/stories/Application.stories.tsx
+++ b/src/components/Application/stories/Application.stories.tsx
@@ -29,11 +29,11 @@ interface ApplicationBasicExampleProps {
 }
 
 function ApplicationBasicExample(args: ApplicationBasicExampleProps) {
-    return <></>;
+    return args ? <></> : <></>;
 }
 
 export default {
-    title: "Components/Application",
+    title: "Components/Application/Elements",
     component: ApplicationBasicExample,
     subcomponents: {
         ApplicationContainer,
diff --git a/src/components/Application/stories/ColorPalettes.stories.tsx b/src/components/Application/stories/ColorPalettes.stories.tsx
new file mode 100644
index 000000000..432f24ca4
--- /dev/null
+++ b/src/components/Application/stories/ColorPalettes.stories.tsx
@@ -0,0 +1,220 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import Color from "color";
+
+import CssCustomProperties from "./../../../common/utils/CssCustomProperties";
+import {
+    Button,
+    CLASSPREFIX as eccgui,
+    FieldItem,
+    FieldItemRow,
+    Section,
+    SectionHeader,
+    Spacing,
+    Tabs,
+    TextArea,
+    TextField,
+    TitleSubsection,
+} from "./../../../index";
+
+interface ColorPaletteConfiguratorProps {
+    customColorProperties?: string;
+}
+
+const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfiguratorProps) => {
+    const palettePrefix = `--${eccgui}-color-palette-`;
+
+    const createPaletteData = (csscustomprops: string | undefined) => {
+        const colors = (
+            csscustomprops
+                ? csscustomprops.split(";").map((rule: string) => {
+                      return rule.split(":").map((rulepart: string) => {
+                          return rulepart.trim();
+                      });
+                  })
+                : new CssCustomProperties({
+                      selectorText: `:root`,
+                      filterName: (name: string) => {
+                          return name.includes(palettePrefix);
+                      },
+                      removeDashPrefix: false,
+                      returnObject: false,
+                  }).customProperties()
+        )
+            .filter((colorconfig: object) => {
+                if (!Array.isArray(colorconfig)) {
+                    return false;
+                }
+                if (colorconfig.length !== 2) {
+                    return false;
+                }
+                return true;
+            })
+            .map((colorconfig: object) => {
+                return [colorconfig[0].replace(palettePrefix, ""), Color(colorconfig[1]).rgb()];
+            });
+
+        const data = new Object();
+
+        for (const [key, value] of colors) {
+            const hierarchy = key.split("-");
+            if (!data[hierarchy[0]]) {
+                data[hierarchy[0]] = new Object();
+            }
+            if (!data[hierarchy[0]][hierarchy[1]]) {
+                data[hierarchy[0]][hierarchy[1]] = new Object();
+            }
+            if (!data[hierarchy[0]][hierarchy[1]][hierarchy[2]]) {
+                data[hierarchy[0]][hierarchy[1]][hierarchy[2]] = value;
+            }
+        }
+
+        return data;
+    };
+
+    const createCustomPropsSerialization = (data: object) => {
+        let serialization = "";
+        for (const [group, tints] of Object.entries(data)) {
+            for (const [tint, weights] of Object.entries(tints as object)) {
+                for (const [weight, value] of Object.entries(weights)) {
+                    serialization =
+                        serialization +
+                        `--${eccgui}-color-palette-${group}-${tint}-${weight}: ${(value as Color).hex()};\n`;
+                }
+            }
+        }
+        return serialization.trim();
+    };
+
+    const createSassSerialization = (data: object) => {
+        const createTintData = (tint: string, weights: object) => {
+            return `\t\t"${tint}": eccgui-create-color-tints(${Object.values(weights)
+                .map((color) => color.hex())
+                .join(" ")}),\n`;
+        };
+
+        const createGroupData = (group: string, tints: object) => {
+            let groupData = `\t"${group}": (\n`;
+            for (const [tint, weights] of Object.entries(tints)) {
+                groupData = groupData + createTintData(tint, weights);
+            }
+            return groupData + `\t),\n`;
+        };
+
+        let sassData = `$eccgui-color-palette-light: (\n`;
+
+        for (const [group, tints] of Object.entries(data)) {
+            sassData = sassData + createGroupData(group, tints);
+        }
+
+        return sassData + `) !default;`;
+    };
+
+    const [paletteData, setPaletteData] = React.useState<object | undefined>(undefined);
+    const [userPaletteProps, setUserPaletteProps] = React.useState<string | undefined>(undefined);
+
+    React.useEffect(() => {
+        const paletteData = createPaletteData(customColorProperties);
+        //console.log("paletteData", paletteData);
+        setPaletteData(paletteData);
+    }, [customColorProperties]);
+
+    const editorPanel = (
+        <div>
+            {paletteData &&
+                Object.keys(paletteData).map((group, id) => {
+                    return (
+                        <Section key={id}>
+                            <SectionHeader>
+                                <TitleSubsection>{group}</TitleSubsection>
+                            </SectionHeader>
+                            <Spacing size="small" />
+                            {Object.keys(paletteData[group]).map((tint, id) => {
+                                return (
+                                    <FieldItemRow justifyItemWidths key={id}>
+                                        {Object.keys(paletteData[group][tint]).map((weight, id) => {
+                                            return (
+                                                <FieldItem
+                                                    key={id}
+                                                    labelProps={{ text: `${tint}${weight}` }}
+                                                    messageText={paletteData[group][tint][weight].hex()}
+                                                >
+                                                    <TextField
+                                                        type="color"
+                                                        defaultValue={paletteData[group][tint][weight].hex()}
+                                                        onValueChange={(newcolor) => {
+                                                            paletteData[group][tint][weight] = Color(newcolor).rgb();
+                                                            // console.log("new palette", paletteData);
+                                                            setPaletteData({ ...paletteData });
+                                                        }}
+                                                    />
+                                                </FieldItem>
+                                            );
+                                        })}
+                                    </FieldItemRow>
+                                );
+                            })}
+                            <Spacing size="large" hasDivider />
+                        </Section>
+                    );
+                })}
+        </div>
+    );
+
+    return (
+        <Tabs
+            id="colorconfig"
+            onChange={() => {}}
+            tabs={[
+                {
+                    id: "editor",
+                    panel: editorPanel,
+                    title: "Editor",
+                },
+                {
+                    id: "css",
+                    panel: (
+                        <div>
+                            <TextArea
+                                defaultValue={paletteData && createCustomPropsSerialization(paletteData)}
+                                onChange={(event) => {
+                                    setUserPaletteProps(event.target.value);
+                                }}
+                            />
+                            <Button
+                                text="Load to editor"
+                                onClick={() => setPaletteData(createPaletteData(userPaletteProps))}
+                            />
+                        </div>
+                    ),
+                    title: "CSS properties",
+                },
+                {
+                    id: "scss",
+                    panel: (
+                        <div>
+                            <pre>
+                                <code>{paletteData && createSassSerialization(paletteData)}</code>
+                            </pre>
+                        </div>
+                    ),
+                    title: "SCSS configuration",
+                },
+            ]}
+        />
+    );
+};
+
+export default {
+    title: "Components/Application/Colors",
+    component: ColorPaletteConfigurator,
+    argTypes: {},
+} as Meta<typeof ColorPaletteConfigurator>;
+
+const Template: StoryFn<typeof ColorPaletteConfigurator> = (args) => <ColorPaletteConfigurator {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+    customColorProperties: "",
+};

From f0d8cb2433b4debee746aea6af6ee06f651cb928 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 13 Jan 2025 14:33:14 +0100
Subject: [PATCH 05/14] add utility function to calculate color distances

---
 src/common/index.ts                        |  2 ++
 src/common/utils/colorCalculateDistance.ts | 28 ++++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/common/utils/colorCalculateDistance.ts

diff --git a/src/common/index.ts b/src/common/index.ts
index ed25944ee..5a4d72cc1 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -1,4 +1,5 @@
 import { invisibleZeroWidthCharacters } from "./utils/characters";
+import { colorCalculateDistance } from "./utils/colorCalculateDistance";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
 import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
@@ -8,6 +9,7 @@ import { openInNewTab } from "./utils/openInNewTab";
 export const utils = {
     openInNewTab,
     decideContrastColorValue,
+    colorCalculateDistance,
     getColorConfiguration,
     invisibleZeroWidthCharacters,
     getGlobalVar,
diff --git a/src/common/utils/colorCalculateDistance.ts b/src/common/utils/colorCalculateDistance.ts
new file mode 100644
index 000000000..2dd04df27
--- /dev/null
+++ b/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;
+};

From a6e739a6a0ef094785dc9a03eac053eb311dc5af Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 13 Jan 2025 17:29:10 +0100
Subject: [PATCH 06/14] add validation feedback to color for distances and
 contrast

---
 .../stories/ColorPalettes.stories.tsx         | 304 ++++++++++++++----
 1 file changed, 242 insertions(+), 62 deletions(-)

diff --git a/src/components/Application/stories/ColorPalettes.stories.tsx b/src/components/Application/stories/ColorPalettes.stories.tsx
index 432f24ca4..c7f01ba8c 100644
--- a/src/components/Application/stories/ColorPalettes.stories.tsx
+++ b/src/components/Application/stories/ColorPalettes.stories.tsx
@@ -4,17 +4,22 @@ import Color from "color";
 
 import CssCustomProperties from "./../../../common/utils/CssCustomProperties";
 import {
+    ApplicationContainer,
     Button,
     CLASSPREFIX as eccgui,
+    ContextMenu,
     FieldItem,
     FieldItemRow,
+    IconButton,
+    MenuItem,
     Section,
     SectionHeader,
     Spacing,
     Tabs,
-    TextArea,
+    Tag,
     TextField,
     TitleSubsection,
+    utils,
 } from "./../../../index";
 
 interface ColorPaletteConfiguratorProps {
@@ -23,6 +28,15 @@ interface ColorPaletteConfiguratorProps {
 
 const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfiguratorProps) => {
     const palettePrefix = `--${eccgui}-color-palette-`;
+    const userInputDelayTime = 500;
+    let userInputDelay; // timeout id
+    // let minimalDistance = 10; // @see https://wisotop.de/farbabstand-farben-vergleichen.php
+    const [minimalDistance, setMinimalDistance] = React.useState<number>(10);
+    const [minimalContrast, setMinimalContrast] = React.useState<number>(4);
+    const [paletteData, setPaletteData] = React.useState<object | undefined>(undefined);
+    const userPaletteRef = React.useRef<HTMLTextAreaElement | null>(null);
+    const [textColor, setTextColor] = React.useState<Color>(Color("#444"));
+    const [bgColor, setBgColor] = React.useState<Color>(Color("#f5f5f5"));
 
     const createPaletteData = (csscustomprops: string | undefined) => {
         const colors = (
@@ -110,17 +124,176 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
         return sassData + `) !default;`;
     };
 
-    const [paletteData, setPaletteData] = React.useState<object | undefined>(undefined);
-    const [userPaletteProps, setUserPaletteProps] = React.useState<string | undefined>(undefined);
-
     React.useEffect(() => {
         const paletteData = createPaletteData(customColorProperties);
-        //console.log("paletteData", paletteData);
         setPaletteData(paletteData);
     }, [customColorProperties]);
 
+    React.useEffect(() => {
+        if (userPaletteRef && userPaletteRef.current) {
+            userPaletteRef.current.value = createCustomPropsSerialization(paletteData || {});
+        }
+    }, [paletteData]);
+
+    const createWarnings = (color: Color, colors: object) => {
+        const warningsDistance: React.ReactElement[] = [];
+        for (const [, tints] of Object.entries(colors)) {
+            for (const [tint, weights] of Object.entries(tints as object)) {
+                for (const [weight, value] of Object.entries(weights)) {
+                    if (color.hex().toString() !== (value as Color).hex().toString()) {
+                        // color distance
+                        const distance = utils.colorCalculateDistance({ color1: color, color2: value as Color });
+                        if (distance && distance < minimalDistance) {
+                            warningsDistance.push(
+                                <MenuItem
+                                    key={tint + weight}
+                                    text={
+                                        <>
+                                            Fix for{" "}
+                                            <Tag backgroundColor={(value as Color).hex()}>
+                                                {tint + weight} ({distance.toPrecision(2)})
+                                            </Tag>
+                                        </>
+                                    }
+                                />
+                            );
+                        }
+                    }
+                }
+            }
+        }
+        // color contrast, only calculate to lighter/darker color
+        const warningsContrast: React.ReactElement[] = [];
+        if (color.isDark() && color.contrast(bgColor) < minimalContrast) {
+            warningsContrast.push(
+                <MenuItem
+                    key="contrast"
+                    text={
+                        <>
+                            Fix for{" "}
+                            <Tag backgroundColor={bgColor.hex()}>
+                                Background ({color.contrast(bgColor).toPrecision(2)})
+                            </Tag>
+                        </>
+                    }
+                />
+            );
+        }
+        if (color.isLight() && color.contrast(textColor) < minimalContrast) {
+            warningsContrast.push(
+                <MenuItem
+                    key="contrast"
+                    text={
+                        <>
+                            Fix for{" "}
+                            <Tag backgroundColor={textColor.hex()}>
+                                Text ({color.contrast(textColor).toPrecision(2)})
+                            </Tag>
+                        </>
+                    }
+                />
+            );
+        }
+        return warningsDistance.length + warningsContrast.length > 0 ? (
+            <ContextMenu
+                togglerElement={
+                    <IconButton
+                        name="state-warning"
+                        hasStateWarning
+                        badge={warningsDistance.length + warningsContrast.length}
+                        badgeProps={{
+                            intent: "warning",
+                            position: "top-right",
+                            size: "small",
+                        }}
+                    />
+                }
+            >
+                {warningsDistance.length > 0 ? <TitleSubsection key="dist">Distances</TitleSubsection> : <></>}
+                <>{warningsDistance}</>
+                {warningsContrast.length > 0 ? <TitleSubsection key="contrast">Contrasts</TitleSubsection> : <></>}
+                <>{warningsContrast}</>
+            </ContextMenu>
+        ) : undefined;
+    };
+
+    const renderColorInput = (
+        paletteData: object = {},
+        label: string,
+        color: Color,
+        updateFn: (color: string) => void
+    ) => {
+        const menuWarnings = createWarnings(color, paletteData);
+        return (
+            <FieldItem key={label} labelProps={{ text: label }} messageText={color.hex()}>
+                <TextField
+                    type="color"
+                    value={color.hex()}
+                    onValueChange={(newcolor) => {
+                        if (userInputDelay) {
+                            clearTimeout(userInputDelay);
+                        }
+                        userInputDelay = setTimeout(() => {
+                            updateFn(newcolor);
+                        }, userInputDelayTime);
+                    }}
+                    intent={menuWarnings ? "warning" : undefined}
+                    rightElement={menuWarnings}
+                />
+            </FieldItem>
+        );
+    };
+
     const editorPanel = (
         <div>
+            <FieldItemRow>
+                <FieldItem
+                    key="distance"
+                    labelProps={{ text: "Minimal color distance" }}
+                    messageText="CIE76 formula is used"
+                >
+                    <TextField
+                        defaultValue={minimalDistance.toString()}
+                        type="number"
+                        step={1}
+                        min={1}
+                        onValueChange={(value) => {
+                            if (userInputDelay) {
+                                clearTimeout(userInputDelay);
+                            }
+                            userInputDelay = setTimeout(() => {
+                                setMinimalDistance(parseInt(value, 10));
+                            }, userInputDelayTime);
+                        }}
+                    />
+                </FieldItem>
+                <FieldItem
+                    key="contrast"
+                    labelProps={{ text: "Minimum contrast", tooltip: "WCAG level AA: 4.5" }}
+                    messageText="Calculated to lighter/darker ()"
+                >
+                    <TextField
+                        defaultValue={minimalContrast.toString()}
+                        type="number"
+                        step={0.1}
+                        min={1}
+                        onValueChange={(value) => {
+                            if (userInputDelay) {
+                                clearTimeout(userInputDelay);
+                            }
+                            userInputDelay = setTimeout(() => {
+                                setMinimalContrast(parseInt(value, 10));
+                            }, userInputDelayTime);
+                        }}
+                    />
+                </FieldItem>
+                {renderColorInput(paletteData, "Text", Color(textColor), (newcolor) => {
+                    setTextColor(Color(newcolor));
+                })}
+                {renderColorInput(paletteData, "Background", Color(bgColor), (newcolor) => {
+                    setBgColor(Color(newcolor));
+                })}
+            </FieldItemRow>
             {paletteData &&
                 Object.keys(paletteData).map((group, id) => {
                     return (
@@ -132,23 +305,15 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                             {Object.keys(paletteData[group]).map((tint, id) => {
                                 return (
                                     <FieldItemRow justifyItemWidths key={id}>
-                                        {Object.keys(paletteData[group][tint]).map((weight, id) => {
-                                            return (
-                                                <FieldItem
-                                                    key={id}
-                                                    labelProps={{ text: `${tint}${weight}` }}
-                                                    messageText={paletteData[group][tint][weight].hex()}
-                                                >
-                                                    <TextField
-                                                        type="color"
-                                                        defaultValue={paletteData[group][tint][weight].hex()}
-                                                        onValueChange={(newcolor) => {
-                                                            paletteData[group][tint][weight] = Color(newcolor).rgb();
-                                                            // console.log("new palette", paletteData);
-                                                            setPaletteData({ ...paletteData });
-                                                        }}
-                                                    />
-                                                </FieldItem>
+                                        {Object.keys(paletteData[group][tint]).map((weight) => {
+                                            return renderColorInput(
+                                                paletteData,
+                                                `${tint}${weight}`,
+                                                paletteData[group][tint][weight],
+                                                (newcolor) => {
+                                                    paletteData[group][tint][weight] = Color(newcolor).rgb();
+                                                    setPaletteData({ ...paletteData });
+                                                }
                                             );
                                         })}
                                     </FieldItemRow>
@@ -162,46 +327,61 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
     );
 
     return (
-        <Tabs
-            id="colorconfig"
-            onChange={() => {}}
-            tabs={[
-                {
-                    id: "editor",
-                    panel: editorPanel,
-                    title: "Editor",
-                },
-                {
-                    id: "css",
-                    panel: (
-                        <div>
-                            <TextArea
-                                defaultValue={paletteData && createCustomPropsSerialization(paletteData)}
-                                onChange={(event) => {
-                                    setUserPaletteProps(event.target.value);
-                                }}
-                            />
-                            <Button
-                                text="Load to editor"
-                                onClick={() => setPaletteData(createPaletteData(userPaletteProps))}
-                            />
-                        </div>
-                    ),
-                    title: "CSS properties",
-                },
-                {
-                    id: "scss",
-                    panel: (
-                        <div>
-                            <pre>
-                                <code>{paletteData && createSassSerialization(paletteData)}</code>
-                            </pre>
-                        </div>
-                    ),
-                    title: "SCSS configuration",
-                },
-            ]}
-        />
+        <ApplicationContainer>
+            <Tabs
+                id="colorconfig"
+                onChange={() => {}}
+                tabs={[
+                    {
+                        id: "editor",
+                        panel: editorPanel,
+                        title: "Editor",
+                    },
+                    {
+                        id: "css",
+                        panel: (
+                            <div>
+                                <textarea
+                                    ref={userPaletteRef}
+                                    style={{
+                                        display: "block",
+                                        width: "100%",
+                                    }}
+                                    spellCheck="false"
+                                    rows={20}
+                                />
+                                <Spacing size="small" />
+                                <Button
+                                    text="Load to editor"
+                                    onClick={() => {
+                                        setPaletteData(createPaletteData(userPaletteRef.current?.value));
+                                    }}
+                                />
+                            </div>
+                        ),
+                        title: "CSS properties",
+                    },
+                    {
+                        id: "scss",
+                        panel: (
+                            <div>
+                                <textarea
+                                    style={{
+                                        display: "block",
+                                        width: "100%",
+                                    }}
+                                    spellCheck="false"
+                                    rows={20}
+                                    readOnly
+                                    value={paletteData && createSassSerialization(paletteData)}
+                                />
+                            </div>
+                        ),
+                        title: "SCSS configuration",
+                    },
+                ]}
+            />
+        </ApplicationContainer>
     );
 };
 

From 0469ec1e725a6fbc937450a53ddc1c2865fb6c66 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 13 Jan 2025 17:38:05 +0100
Subject: [PATCH 07/14] fix contrast type in validation

---
 src/components/Application/stories/ColorPalettes.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Application/stories/ColorPalettes.stories.tsx b/src/components/Application/stories/ColorPalettes.stories.tsx
index c7f01ba8c..9f0135a99 100644
--- a/src/components/Application/stories/ColorPalettes.stories.tsx
+++ b/src/components/Application/stories/ColorPalettes.stories.tsx
@@ -282,7 +282,7 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                                 clearTimeout(userInputDelay);
                             }
                             userInputDelay = setTimeout(() => {
-                                setMinimalContrast(parseInt(value, 10));
+                                setMinimalContrast(parseFloat(value));
                             }, userInputDelayTime);
                         }}
                     />

From 778ae16593b2d72f457186a154d86a64496420c6 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 13 Jan 2025 17:57:50 +0100
Subject: [PATCH 08/14] update palette

---
 src/configuration/_palettes.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/configuration/_palettes.scss b/src/configuration/_palettes.scss
index f93c8c8de..11f6fce64 100644
--- a/src/configuration/_palettes.scss
+++ b/src/configuration/_palettes.scss
@@ -65,7 +65,7 @@
 
 $eccgui-color-palette-light: (
     "identity": (
-        "brand": eccgui-create-color-tints(#fae1cc rgb(254 143 1)),
+        "brand": eccgui-create-color-tints(#fae1cc #f9d7b2 #f8cd99 #f7c37f #f6b966 #f5af4c #f4a533 #f39b19 #f29100),
         "accent": eccgui-create-color-tints(#e5f4fb rgb(10 103 163)),
     ),
     "semantic": (
@@ -75,7 +75,7 @@ $eccgui-color-palette-light: (
         "danger": eccgui-create-color-tints(rgb(255 235 238) #b71c1c),
     ),
     "layout": (
-        "indigo": eccgui-create-color-tints(#ebcef2 #46247a),
+        "indigo": eccgui-create-color-tints(#ebcef2 #d6b8e3 #c1a2d4 #ac8dc5 #9778b6 #8263a7 #6e4e98 #5a3989 #46247a),
         "pink": eccgui-create-color-tints(#fadaec #b23a78),
         "rajah": eccgui-create-color-tints(#fef0e1 #88592c),
         "yellow": eccgui-create-color-tints(#fce7e7 #d4af37),

From 7014fb9495aa5eb9ab36cb46289fb6a118f59e2c Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 23 Jan 2025 09:35:05 +0100
Subject: [PATCH 09/14] move text/background colors into identity group of
 palette

---
 .../stories/ColorPalettes.stories.tsx         | 76 ++++++++-----------
 src/configuration/_palettes.scss              |  2 +
 2 files changed, 35 insertions(+), 43 deletions(-)

diff --git a/src/components/Application/stories/ColorPalettes.stories.tsx b/src/components/Application/stories/ColorPalettes.stories.tsx
index 9f0135a99..d2bbf02c5 100644
--- a/src/components/Application/stories/ColorPalettes.stories.tsx
+++ b/src/components/Application/stories/ColorPalettes.stories.tsx
@@ -35,8 +35,6 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
     const [minimalContrast, setMinimalContrast] = React.useState<number>(4);
     const [paletteData, setPaletteData] = React.useState<object | undefined>(undefined);
     const userPaletteRef = React.useRef<HTMLTextAreaElement | null>(null);
-    const [textColor, setTextColor] = React.useState<Color>(Color("#444"));
-    const [bgColor, setBgColor] = React.useState<Color>(Color("#f5f5f5"));
 
     const createPaletteData = (csscustomprops: string | undefined) => {
         const colors = (
@@ -137,7 +135,8 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
 
     const createWarnings = (color: Color, colors: object) => {
         const warningsDistance: React.ReactElement[] = [];
-        for (const [, tints] of Object.entries(colors)) {
+        const warningsContrast: React.ReactElement[] = [];
+        for (const [group, tints] of Object.entries(colors)) {
             for (const [tint, weights] of Object.entries(tints as object)) {
                 for (const [weight, value] of Object.entries(weights)) {
                     if (color.hex().toString() !== (value as Color).hex().toString()) {
@@ -158,42 +157,39 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                                 />
                             );
                         }
+                        // color contrasts
+                        if (
+                            // test to text/background colors in identity group
+                            group === "identity" &&
+                            (tint === "text" || tint === "background")
+                        ) {
+                            if (
+                                // only calculate light versions to dark versions b/c other usage combination would not make sense at all
+                                (color.isDark() && (value as Color).isLight()) ||
+                                (color.isLight() && (value as Color).isDark())
+                            ) {
+                                if (color.contrast(value as Color) < minimalContrast) {
+                                    warningsContrast.push(
+                                        <MenuItem
+                                            key="contrast"
+                                            text={
+                                                <>
+                                                    Fix for{" "}
+                                                    <Tag backgroundColor={(value as Color).hex()}>
+                                                        {`${tint}${weight}`} (
+                                                        {color.contrast(value as Color).toPrecision(2)})
+                                                    </Tag>
+                                                </>
+                                            }
+                                        />
+                                    );
+                                }
+                            }
+                        }
                     }
                 }
             }
         }
-        // color contrast, only calculate to lighter/darker color
-        const warningsContrast: React.ReactElement[] = [];
-        if (color.isDark() && color.contrast(bgColor) < minimalContrast) {
-            warningsContrast.push(
-                <MenuItem
-                    key="contrast"
-                    text={
-                        <>
-                            Fix for{" "}
-                            <Tag backgroundColor={bgColor.hex()}>
-                                Background ({color.contrast(bgColor).toPrecision(2)})
-                            </Tag>
-                        </>
-                    }
-                />
-            );
-        }
-        if (color.isLight() && color.contrast(textColor) < minimalContrast) {
-            warningsContrast.push(
-                <MenuItem
-                    key="contrast"
-                    text={
-                        <>
-                            Fix for{" "}
-                            <Tag backgroundColor={textColor.hex()}>
-                                Text ({color.contrast(textColor).toPrecision(2)})
-                            </Tag>
-                        </>
-                    }
-                />
-            );
-        }
         return warningsDistance.length + warningsContrast.length > 0 ? (
             <ContextMenu
                 togglerElement={
@@ -246,7 +242,7 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
 
     const editorPanel = (
         <div>
-            <FieldItemRow>
+            <FieldItemRow justifyItemWidths>
                 <FieldItem
                     key="distance"
                     labelProps={{ text: "Minimal color distance" }}
@@ -270,7 +266,7 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                 <FieldItem
                     key="contrast"
                     labelProps={{ text: "Minimum contrast", tooltip: "WCAG level AA: 4.5" }}
-                    messageText="Calculated to lighter/darker ()"
+                    messageText="Calculated to lighter/darker colors of text/background"
                 >
                     <TextField
                         defaultValue={minimalContrast.toString()}
@@ -287,12 +283,6 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                         }}
                     />
                 </FieldItem>
-                {renderColorInput(paletteData, "Text", Color(textColor), (newcolor) => {
-                    setTextColor(Color(newcolor));
-                })}
-                {renderColorInput(paletteData, "Background", Color(bgColor), (newcolor) => {
-                    setBgColor(Color(newcolor));
-                })}
             </FieldItemRow>
             {paletteData &&
                 Object.keys(paletteData).map((group, id) => {
diff --git a/src/configuration/_palettes.scss b/src/configuration/_palettes.scss
index 11f6fce64..30fbf433a 100644
--- a/src/configuration/_palettes.scss
+++ b/src/configuration/_palettes.scss
@@ -67,6 +67,8 @@ $eccgui-color-palette-light: (
     "identity": (
         "brand": eccgui-create-color-tints(#fae1cc #f9d7b2 #f8cd99 #f7c37f #f6b966 #f5af4c #f4a533 #f39b19 #f29100),
         "accent": eccgui-create-color-tints(#e5f4fb rgb(10 103 163)),
+        "text": eccgui-create-color-tints(#f8f8f8 #191919),
+        "background": eccgui-create-color-tints(#fff rgb(128 128 128)),
     ),
     "semantic": (
         "info": eccgui-create-color-tints(rgb(227 242 253) rgb(21 101 192)),

From 500e76479123e23b6842bd3ea8fb18adc8ae1f48 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 23 Jan 2025 12:10:23 +0100
Subject: [PATCH 10/14] add summarized warnings counter to palette editor

---
 .../stories/ColorPalettes.stories.tsx         | 136 ++++++++++--------
 1 file changed, 80 insertions(+), 56 deletions(-)

diff --git a/src/components/Application/stories/ColorPalettes.stories.tsx b/src/components/Application/stories/ColorPalettes.stories.tsx
index d2bbf02c5..5fd8c7f95 100644
--- a/src/components/Application/stories/ColorPalettes.stories.tsx
+++ b/src/components/Application/stories/ColorPalettes.stories.tsx
@@ -1,10 +1,12 @@
 import React from "react";
+import { render } from "react-dom";
 import { Meta, StoryFn } from "@storybook/react";
 import Color from "color";
 
 import CssCustomProperties from "./../../../common/utils/CssCustomProperties";
 import {
     ApplicationContainer,
+    Badge,
     Button,
     CLASSPREFIX as eccgui,
     ContextMenu,
@@ -16,6 +18,7 @@ import {
     SectionHeader,
     Spacing,
     Tabs,
+    TabTitle,
     Tag,
     TextField,
     TitleSubsection,
@@ -30,8 +33,8 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
     const palettePrefix = `--${eccgui}-color-palette-`;
     const userInputDelayTime = 500;
     let userInputDelay; // timeout id
-    // let minimalDistance = 10; // @see https://wisotop.de/farbabstand-farben-vergleichen.php
-    const [minimalDistance, setMinimalDistance] = React.useState<number>(10);
+    const refConfigurator = React.useRef<HTMLDivElement>(null);
+    const [minimalDistance, setMinimalDistance] = React.useState<number>(10); // @see https://wisotop.de/farbabstand-farben-vergleichen.php
     const [minimalContrast, setMinimalContrast] = React.useState<number>(4);
     const [paletteData, setPaletteData] = React.useState<object | undefined>(undefined);
     const userPaletteRef = React.useRef<HTMLTextAreaElement | null>(null);
@@ -122,6 +125,25 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
         return sassData + `) !default;`;
     };
 
+    React.useEffect(() => {
+        if (refConfigurator.current) {
+            const panelConfig = document.getElementById("bp5-tab-panel_colorconfig_editor");
+            if (panelConfig) {
+                const warnings = Array.from(panelConfig.getElementsByClassName("eccgui-badge"))
+                    .map((warning: Element) => {
+                        return (warning as HTMLElement).textContent;
+                    })
+                    .reduce((partial, value) => {
+                        return partial + parseInt(value ?? "");
+                    }, 0 as number);
+                const warningsTarget = document.getElementById("sumWarnings");
+                if (warnings > 0 && warningsTarget) {
+                    render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
+                }
+            }
+        }
+    });
+
     React.useEffect(() => {
         const paletteData = createPaletteData(customColorProperties);
         setPaletteData(paletteData);
@@ -171,7 +193,7 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                                 if (color.contrast(value as Color) < minimalContrast) {
                                     warningsContrast.push(
                                         <MenuItem
-                                            key="contrast"
+                                            key={tint + weight}
                                             text={
                                                 <>
                                                     Fix for{" "}
@@ -318,59 +340,61 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
 
     return (
         <ApplicationContainer>
-            <Tabs
-                id="colorconfig"
-                onChange={() => {}}
-                tabs={[
-                    {
-                        id: "editor",
-                        panel: editorPanel,
-                        title: "Editor",
-                    },
-                    {
-                        id: "css",
-                        panel: (
-                            <div>
-                                <textarea
-                                    ref={userPaletteRef}
-                                    style={{
-                                        display: "block",
-                                        width: "100%",
-                                    }}
-                                    spellCheck="false"
-                                    rows={20}
-                                />
-                                <Spacing size="small" />
-                                <Button
-                                    text="Load to editor"
-                                    onClick={() => {
-                                        setPaletteData(createPaletteData(userPaletteRef.current?.value));
-                                    }}
-                                />
-                            </div>
-                        ),
-                        title: "CSS properties",
-                    },
-                    {
-                        id: "scss",
-                        panel: (
-                            <div>
-                                <textarea
-                                    style={{
-                                        display: "block",
-                                        width: "100%",
-                                    }}
-                                    spellCheck="false"
-                                    rows={20}
-                                    readOnly
-                                    value={paletteData && createSassSerialization(paletteData)}
-                                />
-                            </div>
-                        ),
-                        title: "SCSS configuration",
-                    },
-                ]}
-            />
+            <div ref={refConfigurator}>
+                <Tabs
+                    id="colorconfig"
+                    onChange={() => {}}
+                    tabs={[
+                        {
+                            id: "editor",
+                            panel: editorPanel,
+                            title: <TabTitle text="Editor" titleSuffix={<span id="sumWarnings"></span>} />,
+                        },
+                        {
+                            id: "css",
+                            panel: (
+                                <div>
+                                    <textarea
+                                        ref={userPaletteRef}
+                                        style={{
+                                            display: "block",
+                                            width: "100%",
+                                        }}
+                                        spellCheck="false"
+                                        rows={20}
+                                    />
+                                    <Spacing size="small" />
+                                    <Button
+                                        text="Load to editor"
+                                        onClick={() => {
+                                            setPaletteData(createPaletteData(userPaletteRef.current?.value));
+                                        }}
+                                    />
+                                </div>
+                            ),
+                            title: "CSS properties",
+                        },
+                        {
+                            id: "scss",
+                            panel: (
+                                <div>
+                                    <textarea
+                                        style={{
+                                            display: "block",
+                                            width: "100%",
+                                        }}
+                                        spellCheck="false"
+                                        rows={20}
+                                        readOnly
+                                        value={paletteData && createSassSerialization(paletteData)}
+                                    />
+                                </div>
+                            ),
+                            title: "SCSS configuration",
+                        },
+                    ]}
+                />
+            </div>
         </ApplicationContainer>
     );
 };

From c88df944e8c157159584545481a452e7aea1f50f Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 23 Jan 2025 13:11:52 +0100
Subject: [PATCH 11/14] fix class name generation for Switch

---
 src/components/Switch/Switch.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 485d5512b..147aff94e 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -1,4 +1,4 @@
-import React, { memo, SyntheticEvent } from "react";
+import React, { ChangeEvent, memo } from "react";
 import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -7,7 +7,7 @@ export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     /**
      * Event handler for changed state.
      */
-    onChange?: (value: boolean) => any;
+    onChange?: (value: boolean) => void;
     /**
      * class names
      */
@@ -15,12 +15,16 @@ export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
 }
 
 export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
-    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
-        const checked = !!(e as any).target?.checked;
-        onChange && onChange(checked);
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const checked = !!e.target?.checked;
+        if (onChange) {
+            onChange(checked);
+        }
     };
 
-    return <BlueprintSwitch className={`${eccgui}-switch ${className}`} {...otherProps} onChange={handleChange} />;
+    return (
+        <BlueprintSwitch className={`${eccgui}-switch ${className ?? ""}`} {...otherProps} onChange={handleChange} />
+    );
 };
 
 export default memo(Switch);

From d4ba6972273392466c45985add21e765f383335b Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 23 Jan 2025 13:13:50 +0100
Subject: [PATCH 12/14] use only 5 colors for each color tint set

---
 src/components/Application/_colors.scss | 2 +-
 src/configuration/_palettes.scss        | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Application/_colors.scss b/src/components/Application/_colors.scss
index 6c79ea7fe..fbff34a9c 100644
--- a/src/components/Application/_colors.scss
+++ b/src/components/Application/_colors.scss
@@ -5,7 +5,7 @@
     @each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light {
         @each $palette-tint-name, $palette-tint-colors in $palette-group-tints {
             @for $i from 1 through list.length($palette-tint-colors) {
-                #{eccgui-color-name($palette-group-name, $palette-tint-name, $i * 100)}: #{list.nth(
+                #{eccgui-color-name($palette-group-name, $palette-tint-name, ($i * 2 - 1) * 100)}: #{list.nth(
                         $palette-tint-colors,
                         $i
                     )};
diff --git a/src/configuration/_palettes.scss b/src/configuration/_palettes.scss
index 30fbf433a..c6e767fd9 100644
--- a/src/configuration/_palettes.scss
+++ b/src/configuration/_palettes.scss
@@ -7,7 +7,7 @@
  * If the list do not provide 9 colors then create them based on the first and last color in the list.
  */
 @function eccgui-create-color-tints($colorset) {
-    $colorset-steps: 9; // number of tints
+    $colorset-steps: 5; // number of tints
     $count-colors: list.length($colorset);
 
     @if $count-colors == $colorset-steps {
@@ -42,7 +42,7 @@
 
     $colorset-fallback: list.append($colorset-fallback, $color-tint-end);
 
-    @debug "Create fallback with 9 tints: #{$colorset-fallback}";
+    @debug "Create fallback with #{$colorset-steps} tints: #{$colorset-fallback}";
     @return $colorset-fallback;
 }
 
@@ -67,8 +67,8 @@ $eccgui-color-palette-light: (
     "identity": (
         "brand": eccgui-create-color-tints(#fae1cc #f9d7b2 #f8cd99 #f7c37f #f6b966 #f5af4c #f4a533 #f39b19 #f29100),
         "accent": eccgui-create-color-tints(#e5f4fb rgb(10 103 163)),
-        "text": eccgui-create-color-tints(#f8f8f8 #191919),
-        "background": eccgui-create-color-tints(#fff rgb(128 128 128)),
+        "text": eccgui-create-color-tints(#f8f8f8 #090909),
+        "background": eccgui-create-color-tints(#fff rgb(200 200 200)),
     ),
     "semantic": (
         "info": eccgui-create-color-tints(rgb(227 242 253) rgb(21 101 192)),

From f564b7ec9f9db110bf92a41dbd7d9ea65f33f736 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 23 Jan 2025 13:14:43 +0100
Subject: [PATCH 13/14] add switches to enable color distance/contrast checks

---
 .../stories/ColorPalettes.stories.tsx         | 116 +++++++++++-------
 1 file changed, 74 insertions(+), 42 deletions(-)

diff --git a/src/components/Application/stories/ColorPalettes.stories.tsx b/src/components/Application/stories/ColorPalettes.stories.tsx
index 5fd8c7f95..2586f87ff 100644
--- a/src/components/Application/stories/ColorPalettes.stories.tsx
+++ b/src/components/Application/stories/ColorPalettes.stories.tsx
@@ -17,6 +17,7 @@ import {
     Section,
     SectionHeader,
     Spacing,
+    Switch,
     Tabs,
     TabTitle,
     Tag,
@@ -34,6 +35,8 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
     const userInputDelayTime = 500;
     let userInputDelay; // timeout id
     const refConfigurator = React.useRef<HTMLDivElement>(null);
+    const [calculateDistanceWarnings, setCalculateDistanceWarnings] = React.useState<boolean>(false);
+    const [calculateContrastWarnings, setCalculateContrastWarnings] = React.useState<boolean>(false);
     const [minimalDistance, setMinimalDistance] = React.useState<number>(10); // @see https://wisotop.de/farbabstand-farben-vergleichen.php
     const [minimalContrast, setMinimalContrast] = React.useState<number>(4);
     const [paletteData, setPaletteData] = React.useState<object | undefined>(undefined);
@@ -137,8 +140,12 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                         return partial + parseInt(value ?? "");
                     }, 0 as number);
                 const warningsTarget = document.getElementById("sumWarnings");
-                if (warnings > 0 && warningsTarget) {
-                    render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
+                if (warningsTarget) {
+                    if (warnings > 0) {
+                        render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
+                    } else {
+                        render(<></>, warningsTarget);
+                    }
                 }
             }
         }
@@ -156,55 +163,62 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
     }, [paletteData]);
 
     const createWarnings = (color: Color, colors: object) => {
+        if (!calculateDistanceWarnings && !calculateContrastWarnings) {
+            return undefined;
+        }
         const warningsDistance: React.ReactElement[] = [];
         const warningsContrast: React.ReactElement[] = [];
         for (const [group, tints] of Object.entries(colors)) {
             for (const [tint, weights] of Object.entries(tints as object)) {
                 for (const [weight, value] of Object.entries(weights)) {
                     if (color.hex().toString() !== (value as Color).hex().toString()) {
-                        // color distance
-                        const distance = utils.colorCalculateDistance({ color1: color, color2: value as Color });
-                        if (distance && distance < minimalDistance) {
-                            warningsDistance.push(
-                                <MenuItem
-                                    key={tint + weight}
-                                    text={
-                                        <>
-                                            Fix for{" "}
-                                            <Tag backgroundColor={(value as Color).hex()}>
-                                                {tint + weight} ({distance.toPrecision(2)})
-                                            </Tag>
-                                        </>
-                                    }
-                                />
-                            );
+                        if (calculateDistanceWarnings) {
+                            // color distance
+                            const distance = utils.colorCalculateDistance({ color1: color, color2: value as Color });
+                            if (distance && distance < minimalDistance) {
+                                warningsDistance.push(
+                                    <MenuItem
+                                        key={tint + weight}
+                                        text={
+                                            <>
+                                                Fix for{" "}
+                                                <Tag backgroundColor={(value as Color).hex()}>
+                                                    {tint + weight} ({distance.toPrecision(2)})
+                                                </Tag>
+                                            </>
+                                        }
+                                    />
+                                );
+                            }
                         }
-                        // color contrasts
-                        if (
-                            // test to text/background colors in identity group
-                            group === "identity" &&
-                            (tint === "text" || tint === "background")
-                        ) {
+                        if (calculateContrastWarnings) {
+                            // color contrasts
                             if (
-                                // only calculate light versions to dark versions b/c other usage combination would not make sense at all
-                                (color.isDark() && (value as Color).isLight()) ||
-                                (color.isLight() && (value as Color).isDark())
+                                // test to text/background colors in identity group
+                                group === "identity" &&
+                                (tint === "text" || tint === "background")
                             ) {
-                                if (color.contrast(value as Color) < minimalContrast) {
-                                    warningsContrast.push(
-                                        <MenuItem
-                                            key={tint + weight}
-                                            text={
-                                                <>
-                                                    Fix for{" "}
-                                                    <Tag backgroundColor={(value as Color).hex()}>
-                                                        {`${tint}${weight}`} (
-                                                        {color.contrast(value as Color).toPrecision(2)})
-                                                    </Tag>
-                                                </>
-                                            }
-                                        />
-                                    );
+                                if (
+                                    // only calculate light versions to dark versions b/c other usage combination would not make sense at all
+                                    (color.isDark() && (value as Color).isLight()) ||
+                                    (color.isLight() && (value as Color).isDark())
+                                ) {
+                                    if (color.contrast(value as Color) < minimalContrast) {
+                                        warningsContrast.push(
+                                            <MenuItem
+                                                key={tint + weight}
+                                                text={
+                                                    <>
+                                                        Fix for{" "}
+                                                        <Tag backgroundColor={(value as Color).hex()}>
+                                                            {`${tint}${weight}`} (
+                                                            {color.contrast(value as Color).toPrecision(2)})
+                                                        </Tag>
+                                                    </>
+                                                }
+                                            />
+                                        );
+                                    }
                                 }
                             }
                         }
@@ -283,6 +297,15 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                                 setMinimalDistance(parseInt(value, 10));
                             }, userInputDelayTime);
                         }}
+                        rightElement={
+                            <Switch
+                                style={{ marginTop: "9px", marginBottom: "7px" }}
+                                checked={calculateDistanceWarnings}
+                                innerLabel="off"
+                                innerLabelChecked="calc"
+                                onChange={() => setCalculateDistanceWarnings(!calculateDistanceWarnings)}
+                            />
+                        }
                     />
                 </FieldItem>
                 <FieldItem
@@ -303,6 +326,15 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                                 setMinimalContrast(parseFloat(value));
                             }, userInputDelayTime);
                         }}
+                        rightElement={
+                            <Switch
+                                style={{ marginTop: "9px", marginBottom: "7px" }}
+                                checked={calculateContrastWarnings}
+                                innerLabel="off"
+                                innerLabelChecked="calc"
+                                onChange={() => setCalculateContrastWarnings(!calculateContrastWarnings)}
+                            />
+                        }
                     />
                 </FieldItem>
             </FieldItemRow>

From c7b28d7e384e6c7b2db35417ba2be3567a50eba1 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 23 Jan 2025 16:50:34 +0100
Subject: [PATCH 14/14] add functionality to auto-change colors

---
 .../stories/ColorPalettes.stories.tsx         | 256 +++++++++++++++---
 src/configuration/_palettes.scss              |   8 +-
 2 files changed, 230 insertions(+), 34 deletions(-)

diff --git a/src/components/Application/stories/ColorPalettes.stories.tsx b/src/components/Application/stories/ColorPalettes.stories.tsx
index 2586f87ff..d0bdf3229 100644
--- a/src/components/Application/stories/ColorPalettes.stories.tsx
+++ b/src/components/Application/stories/ColorPalettes.stories.tsx
@@ -12,6 +12,8 @@ import {
     ContextMenu,
     FieldItem,
     FieldItemRow,
+    FlexibleLayoutContainer,
+    FlexibleLayoutItem,
     IconButton,
     MenuItem,
     Section,
@@ -27,18 +29,31 @@ import {
 } from "./../../../index";
 
 interface ColorPaletteConfiguratorProps {
+    /** Color palette as custom CSS properties */
     customColorProperties?: string;
+    /** Default value for minimal color distance */
+    distanceMin?: number;
+    /** Default value for minimal contrast */
+    contrastMin?: number;
+    /** Enable color checks by default */
+    enableCalculations?: boolean;
 }
 
-const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfiguratorProps) => {
+const ColorPaletteConfigurator = ({
+    customColorProperties,
+    distanceMin = 10, // @see https://wisotop.de/farbabstand-farben-vergleichen.php
+    contrastMin = 4,
+    enableCalculations = false,
+}: ColorPaletteConfiguratorProps) => {
     const palettePrefix = `--${eccgui}-color-palette-`;
     const userInputDelayTime = 500;
+    const correctionStep = 0.01;
     let userInputDelay; // timeout id
     const refConfigurator = React.useRef<HTMLDivElement>(null);
-    const [calculateDistanceWarnings, setCalculateDistanceWarnings] = React.useState<boolean>(false);
-    const [calculateContrastWarnings, setCalculateContrastWarnings] = React.useState<boolean>(false);
-    const [minimalDistance, setMinimalDistance] = React.useState<number>(10); // @see https://wisotop.de/farbabstand-farben-vergleichen.php
-    const [minimalContrast, setMinimalContrast] = React.useState<number>(4);
+    const [calculateDistanceWarnings, setCalculateDistanceWarnings] = React.useState<boolean>(enableCalculations);
+    const [calculateContrastWarnings, setCalculateContrastWarnings] = React.useState<boolean>(enableCalculations);
+    const [minimalDistance, setMinimalDistance] = React.useState<number>(distanceMin);
+    const [minimalContrast, setMinimalContrast] = React.useState<number>(contrastMin);
     const [paletteData, setPaletteData] = React.useState<object | undefined>(undefined);
     const userPaletteRef = React.useRef<HTMLTextAreaElement | null>(null);
 
@@ -162,10 +177,35 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
         }
     }, [paletteData]);
 
-    const createWarnings = (color: Color, colors: object) => {
-        if (!calculateDistanceWarnings && !calculateContrastWarnings) {
+    const fixColorByLuminosity = (
+        color: Color,
+        colorTest: Color,
+        testFn: (color1: Color, color2: Color) => boolean
+    ) => {
+        let fixedColor = color as Color;
+        let check = testFn(fixedColor, colorTest);
+        while (check === true && fixedColor.luminosity() > 0 && fixedColor.luminosity() < 1) {
+            if (fixedColor.luminosity() < (colorTest as Color).luminosity()) {
+                fixedColor = fixedColor.darken(correctionStep);
+            } else {
+                fixedColor = fixedColor.lighten(correctionStep);
+            }
+            check = testFn(fixedColor, colorTest);
+        }
+
+        return fixedColor;
+    };
+
+    const createWarnings = (id: string[], colors: object) => {
+        if (
+            (!calculateDistanceWarnings && !calculateContrastWarnings) ||
+            !colors[id[0]] ||
+            !colors[id[0]][id[1]] ||
+            !colors[id[0]][id[1]][id[2]]
+        ) {
             return undefined;
         }
+        const color = colors[id[0]][id[1]][id[2]];
         const warningsDistance: React.ReactElement[] = [];
         const warningsContrast: React.ReactElement[] = [];
         for (const [group, tints] of Object.entries(colors)) {
@@ -181,13 +221,65 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                                         key={tint + weight}
                                         text={
                                             <>
-                                                Fix for{" "}
-                                                <Tag backgroundColor={(value as Color).hex()}>
-                                                    {tint + weight} ({distance.toPrecision(2)})
-                                                </Tag>
+                                                Fix with{" "}
+                                                <Tag backgroundColor={(value as Color).hex()}>{tint + weight}</Tag> (
+                                                {distance.toPrecision(2)})
                                             </>
                                         }
-                                    />
+                                    >
+                                        <MenuItem
+                                            key={"this"}
+                                            text={
+                                                <>
+                                                    Fix{" "}
+                                                    <Tag backgroundColor={(color as Color).hex()}>
+                                                        {`${id[1]}}${id[2]}}`}
+                                                    </Tag>
+                                                </>
+                                            }
+                                            onClick={() => {
+                                                colors[id[0]][id[1]][id[2]] = fixColorByLuminosity(
+                                                    color,
+                                                    value as Color,
+                                                    (c1, c2) => {
+                                                        const distance =
+                                                            utils.colorCalculateDistance({ color1: c1, color2: c2 }) ??
+                                                            0;
+                                                        // eslint-disable-next-line no-console
+                                                        console.log(`${c1.hex()} -> ${distance}`);
+                                                        return distance < minimalDistance;
+                                                    }
+                                                );
+                                                setPaletteData({ ...colors });
+                                            }}
+                                        />
+                                        <MenuItem
+                                            key={"that"}
+                                            text={
+                                                <>
+                                                    Fix{" "}
+                                                    <Tag backgroundColor={(value as Color).hex()}>
+                                                        {`${tint}${weight}`}
+                                                    </Tag>
+                                                </>
+                                            }
+                                            onClick={() => {
+                                                colors[group][tint][weight] = fixColorByLuminosity(
+                                                    value as Color,
+                                                    color,
+                                                    (c1, c2) => {
+                                                        const distance =
+                                                            utils.colorCalculateDistance({ color1: c1, color2: c2 }) ??
+                                                            0;
+                                                        // eslint-disable-next-line no-console
+                                                        console.log(`${c1.hex()} -> ${distance}`);
+                                                        return distance < minimalDistance;
+                                                    }
+                                                );
+                                                setPaletteData({ ...colors });
+                                            }}
+                                        />
+                                    </MenuItem>
                                 );
                             }
                         }
@@ -195,8 +287,9 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                             // color contrasts
                             if (
                                 // test to text/background colors in identity group
-                                group === "identity" &&
-                                (tint === "text" || tint === "background")
+                                (group === "identity" && (tint === "text" || tint === "background")) ||
+                                // test to same color tint
+                                (group === id[0] && tint === id[1])
                             ) {
                                 if (
                                     // only calculate light versions to dark versions b/c other usage combination would not make sense at all
@@ -209,14 +302,63 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                                                 key={tint + weight}
                                                 text={
                                                     <>
-                                                        Fix for{" "}
+                                                        Fix with{" "}
                                                         <Tag backgroundColor={(value as Color).hex()}>
                                                             {`${tint}${weight}`} (
                                                             {color.contrast(value as Color).toPrecision(2)})
                                                         </Tag>
                                                     </>
                                                 }
-                                            />
+                                            >
+                                                <MenuItem
+                                                    key="this"
+                                                    text={
+                                                        <>
+                                                            Fix{" "}
+                                                            <Tag backgroundColor={(color as Color).hex()}>
+                                                                {`${id[1]}}${id[2]}}`}
+                                                            </Tag>
+                                                        </>
+                                                    }
+                                                    onClick={() => {
+                                                        colors[id[0]][id[1]][id[2]] = fixColorByLuminosity(
+                                                            color,
+                                                            value as Color,
+                                                            (c1, c2) => {
+                                                                const contrast = c1.contrast(c2 as Color);
+                                                                // eslint-disable-next-line no-console
+                                                                console.log(`${c1.hex()} -> ${contrast}`);
+                                                                return contrast < minimalContrast;
+                                                            }
+                                                        );
+                                                        setPaletteData({ ...colors });
+                                                    }}
+                                                />
+                                                <MenuItem
+                                                    key="that"
+                                                    text={
+                                                        <>
+                                                            Fix{" "}
+                                                            <Tag backgroundColor={(value as Color).hex()}>
+                                                                {`${tint}${weight}`}
+                                                            </Tag>
+                                                        </>
+                                                    }
+                                                    onClick={() => {
+                                                        colors[group][tint][weight] = fixColorByLuminosity(
+                                                            value as Color,
+                                                            color,
+                                                            (c1, c2) => {
+                                                                const contrast = c1.contrast(c2 as Color);
+                                                                // eslint-disable-next-line no-console
+                                                                console.log(`${c1.hex()} -> ${contrast}`);
+                                                                return contrast < minimalContrast;
+                                                            }
+                                                        );
+                                                        setPaletteData({ ...colors });
+                                                    }}
+                                                />
+                                            </MenuItem>
                                         );
                                     }
                                 }
@@ -252,12 +394,20 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
     const renderColorInput = (
         paletteData: object = {},
         label: string,
-        color: Color,
+        id: string[],
         updateFn: (color: string) => void
     ) => {
-        const menuWarnings = createWarnings(color, paletteData);
+        if (!paletteData[id[0]] || !paletteData[id[0]][id[1]] || !paletteData[id[0]][id[1]][id[2]]) {
+            return <></>;
+        }
+        const color = paletteData[id[0]][id[1]][id[2]];
+        const menuWarnings = createWarnings(id, paletteData);
         return (
-            <FieldItem key={label} labelProps={{ text: label }} messageText={color.hex()}>
+            <FieldItem
+                key={label}
+                labelProps={{ text: label }}
+                messageText={`${color.hex()} / ${color.luminosity().toPrecision(2)}`}
+            >
                 <TextField
                     type="color"
                     value={color.hex()}
@@ -348,19 +498,62 @@ const ColorPaletteConfigurator = ({ customColorProperties }: ColorPaletteConfigu
                             <Spacing size="small" />
                             {Object.keys(paletteData[group]).map((tint, id) => {
                                 return (
-                                    <FieldItemRow justifyItemWidths key={id}>
-                                        {Object.keys(paletteData[group][tint]).map((weight) => {
-                                            return renderColorInput(
-                                                paletteData,
-                                                `${tint}${weight}`,
-                                                paletteData[group][tint][weight],
-                                                (newcolor) => {
-                                                    paletteData[group][tint][weight] = Color(newcolor).rgb();
+                                    <FlexibleLayoutContainer
+                                        key={id}
+                                        noEqualItemSpace
+                                        gapSize="small"
+                                        style={{
+                                            alignItems: "center",
+                                            marginBottom: "0.5rem",
+                                        }}
+                                    >
+                                        <FlexibleLayoutItem key="tints">
+                                            <FieldItemRow justifyItemWidths key={id}>
+                                                {Object.keys(paletteData[group][tint]).map((weight) => {
+                                                    return renderColorInput(
+                                                        paletteData,
+                                                        `${tint}${weight}`,
+                                                        [group, tint, weight],
+                                                        (newcolor) => {
+                                                            paletteData[group][tint][weight] = Color(newcolor).rgb();
+                                                            setPaletteData({ ...paletteData });
+                                                        }
+                                                    );
+                                                })}
+                                            </FieldItemRow>
+                                        </FlexibleLayoutItem>
+                                        <FlexibleLayoutItem key="actions" growFactor={0}>
+                                            <IconButton
+                                                name={"operation-magic"}
+                                                text="Auto-span tint value from 100 to 900"
+                                                onClick={() => {
+                                                    const tintValues = Object.values(
+                                                        paletteData[group][tint]
+                                                    ) as Color[];
+                                                    const tintKeys = Object.keys(paletteData[group][tint]);
+                                                    if (tintValues.length > 0) {
+                                                        const tint100 = tintValues[0];
+                                                        const tint900 = tintValues[tintValues.length - 1];
+                                                        tintKeys.forEach((weight, id) => {
+                                                            paletteData[group][tint][weight] = Color(tint100).mix(
+                                                                Color(tint900),
+                                                                id / (tintValues.length - 1)
+                                                            );
+                                                            // eslint-disable-next-line no-console
+                                                            console.log(
+                                                                `mix ${Color(tint100).hex()} with ${Color(
+                                                                    tint900
+                                                                ).hex()} by ${id / (tintValues.length - 1)} -> ${
+                                                                    paletteData[group][tint][weight]
+                                                                }`
+                                                            );
+                                                        });
+                                                    }
                                                     setPaletteData({ ...paletteData });
-                                                }
-                                            );
-                                        })}
-                                    </FieldItemRow>
+                                                }}
+                                            />
+                                        </FlexibleLayoutItem>
+                                    </FlexibleLayoutContainer>
                                 );
                             })}
                             <Spacing size="large" hasDivider />
@@ -443,4 +636,5 @@ export const Default = Template.bind({});
 
 Default.args = {
     customColorProperties: "",
+    enableCalculations: false,
 };
diff --git a/src/configuration/_palettes.scss b/src/configuration/_palettes.scss
index c6e767fd9..00f14f1fd 100644
--- a/src/configuration/_palettes.scss
+++ b/src/configuration/_palettes.scss
@@ -3,8 +3,8 @@
 @use "sass:math";
 
 /**
- * Always provide a list of 9 color tints.
- * If the list do not provide 9 colors then create them based on the first and last color in the list.
+ * 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
@@ -33,11 +33,13 @@
     $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, $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);