Improve palette (ECC-6637)

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";

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,

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;
     };

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;
+};

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 * 2 - 1) * 100)}: #{list.nth(
+                        $palette-tint-colors,
+                        $i
+                    )};
+            }
+        }
+    }
+}

src/components/Application/application.scss

@@ -1,4 +1,5 @@
 // @import 'config';
+@import "colors";
 @import "header";
 @import "toolbar";
 

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,