@eccenca/gui-elements 24.4.1 → 25.0.0-rc.0

package/src/common/utils/colorHash.ts

@@ -0,0 +1,195 @@
+import Color from "color";
+
+import { CLASSPREFIX as eccgui, COLORMINDISTANCE } from "../../configuration/constants";
+
+import { colorCalculateDistance } from "./colorCalculateDistance";
+import CssCustomProperties from "./CssCustomProperties";
+
+type ColorOrFalse = Color | false;
+type ColorWeight = 100 | 300 | 500 | 700 | 900;
+type PaletteGroup = "identity" | "semantic" | "layout" | "extra";
+
+interface getEnabledColorsProps {
+    /** Specify the palette groups used to define the set of colors. */
+    includePaletteGroup?: PaletteGroup[];
+    /** Use only some weights of a color tint. */
+    includeColorWeight?: ColorWeight[];
+    /** Only keep colors in the stack with a minimal color distance to all other colors. */
+    minimalColorDistance?: number;
+    /** Extend color stack by values generated by mixing tints of the same weight, e.g. `yellow100` with `purple100`. */
+    // includeMixedColors?: boolean;
+}
+
+const getEnabledColorsFromPaletteCache = new Map<string, Color[]>();
+
+export function getEnabledColorsFromPalette({
+    includePaletteGroup = ["layout"],
+    includeColorWeight = [100, 300, 500, 700, 900],
+    // TODO (planned for later): includeMixedColors = false,
+    minimalColorDistance = COLORMINDISTANCE,
+}: getEnabledColorsProps): Color[] {
+    const configId = JSON.stringify({
+        includePaletteGroup,
+        includeColorWeight,
+    });
+
+    if (getEnabledColorsFromPaletteCache.has(configId)) {
+        return getEnabledColorsFromPaletteCache.get(configId)!;
+    }
+
+    const colorsFromPalette = new CssCustomProperties({
+        selectorText: `:root`,
+        filterName: (name: string) => {
+            if (!name.includes(`--${eccgui}-color-palette-`)) {
+                // only allow custom properties created for the palette
+                return false;
+            }
+            // test for correct group and weight of the palette color
+            const tint = name.substring(`--${eccgui}-color-palette-`.length).split("-");
+            const group = tint[0] as PaletteGroup;
+            const weight = parseInt(tint[2], 10) as ColorWeight;
+            return includePaletteGroup.includes(group) && includeColorWeight.includes(weight);
+        },
+        removeDashPrefix: false,
+        returnObject: true,
+    }).customProperties();
+
+    const colorsFromPaletteValues = Object.values(colorsFromPalette) as string[];
+
+    const colorsFromPaletteWithEnoughDistance =
+        minimalColorDistance > 0
+            ? colorsFromPaletteValues.reduce((enoughDistance: string[], color: string) => {
+                  if (enoughDistance.includes(color)) {
+                      return enoughDistance.filter((checkColor) => {
+                          const distance = colorCalculateDistance({ color1: color, color2: checkColor });
+                          return checkColor === color || (distance && minimalColorDistance <= distance);
+                      });
+                  } else {
+                      return enoughDistance;
+                  }
+              }, colorsFromPaletteValues)
+            : colorsFromPaletteValues;
+
+    getEnabledColorsFromPaletteCache.set(
+        configId,
+        colorsFromPaletteWithEnoughDistance.map((color: string) => {
+            return Color(color);
+        })
+    );
+
+    return getEnabledColorsFromPaletteCache.get(configId)!;
+}
+
+function getColorcode(text: string): ColorOrFalse {
+    try {
+        return Color(text);
+    } catch {
+        return false;
+    }
+}
+
+interface textToColorOptions {
+    /** Stack of colors that are allowed to be returned. */
+    enabledColors: Color[] | "all" | getEnabledColorsProps;
+    /** Return input text if it represents a valid color string, e.g. `#000` or `black`. */
+    returnValidColorsDirectly: boolean;
+}
+
+interface textToColorProps {
+    text: string;
+    options?: textToColorOptions;
+}
+
+/**
+ * Map a text string to a color.
+ * It always returns the same color for a text as long as the options stay the same.
+ * It returns `false` in case there are no colors defined to chose from.
+ */
+export function textToColorHash({
+    text,
+    options = {
+        enabledColors: getEnabledColorsFromPalette({}),
+        returnValidColorsDirectly: false,
+    },
+}: textToColorProps): string | false {
+    let color = getColorcode(text);
+
+    if (options.returnValidColorsDirectly && color) {
+        // return color code for text because it was a valid color string
+        return color.hex().toString();
+    }
+
+    if (!color) {
+        color = getColorcode(stringToHexColorHash(text)) as Color;
+    }
+
+    if (options.enabledColors === "all" && color) {
+        // all colors are allowed as return value
+        return color.hex().toString();
+    }
+
+    let enabledColors = [] as Color[];
+
+    if (Array.isArray(options.enabledColors)) {
+        enabledColors = options.enabledColors;
+    } else {
+        enabledColors = getEnabledColorsFromPalette(options.enabledColors as getEnabledColorsProps);
+    }
+
+    if (enabledColors.length === 0) {
+        // eslint-disable-next-line no-console
+        console.warn("textToColorHash functionaliy need enabledColors list with at least 1 color.");
+        return false;
+    }
+
+    return nearestColorNeighbour(color, enabledColors as Color[])
+        .hex()
+        .toString();
+}
+
+function stringToIntegerHash(inputString: string): number {
+    /* this function is idempotend, meaning it retrieves the same result for the same input
+    no matter how many times it's called */
+    // Convert the string to a hash code
+    let hashCode = 0;
+    for (let i = 0; i < inputString.length; i++) {
+        hashCode = (hashCode << 5) - hashCode + inputString.charCodeAt(i);
+        hashCode &= hashCode; // Convert to 32bit integer
+    }
+    return hashCode;
+}
+
+function integerToHexColor(number: number): string {
+    // Convert the hash code to a positive number (32unsigned)
+    const hash = Math.abs(number + Math.pow(31, 2));
+    // Convert the number to a hex color (excluding white)
+    const hexColor = "#" + (hash % 0xffffff).toString(16).padStart(6, "0");
+    return hexColor;
+}
+
+function stringToHexColorHash(inputString: string): string {
+    const integerHash = stringToIntegerHash(inputString);
+    return integerToHexColor(integerHash);
+}
+
+function nearestColorNeighbour(color: Color, enabledColors: Color[]): Color {
+    const nearestNeighbour = enabledColors.reduce(
+        (nearestColor, enabledColorsItem) => {
+            const distance = colorCalculateDistance({
+                color1: color,
+                color2: enabledColorsItem,
+            });
+            return distance && distance < nearestColor.distance
+                ? {
+                      distance,
+                      color: enabledColorsItem,
+                  }
+                : nearestColor;
+        },
+        {
+            distance: Number.POSITIVE_INFINITY,
+            color: enabledColors[0],
+        }
+    );
+    return nearestNeighbour.color;
+}

package/src/common/utils/getColorConfiguration.ts

@@ -1,3 +1,5 @@
+import Color from "color";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import CssCustomProperties from "./CssCustomProperties";
@@ -5,22 +7,58 @@ import CssCustomProperties from "./CssCustomProperties";
 // Configurations can be found in `src/cmem/react-flow/configuration/_colors-*.scss`
 type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-workflow" | "stickynotes";
 
-const colorConfigurationMemo = new Map<colorconfigs, any>();
+const colorConfigurationMemo = new Map<colorconfigs, Record<string, string>>();
 
 /**
  * Read and returns color values provided by CSS custom properties.
  * They are defined for special CSS classes.
  * Currently color configurations for the react flow editors are supported.
  **/
-const getColorConfiguration = (configId: colorconfigs) => {
+const getColorConfiguration = (configId: colorconfigs): Record<string, string> => {
     if (!colorConfigurationMemo.has(configId)) {
+        const selectorClass = `${eccgui}-configuration--colors__${configId}`;
         colorConfigurationMemo.set(
             configId,
-            new CssCustomProperties({
-                selectorText: `.${eccgui}-configuration--colors__${configId}`,
-                removeDashPrefix: true,
-                returnObject: true,
-            }).customProperties()
+            Object.fromEntries(
+                (
+                    new CssCustomProperties({
+                        selectorText: `.${selectorClass}`,
+                        removeDashPrefix: true,
+                        returnObject: false,
+                    }).customProperties() as string[][]
+                ).map((setting) => {
+                    // check if the value could be a color
+
+                    let testColorValue = setting[1];
+                    // check if value itself is a reference to another css custom property
+                    if (testColorValue.slice(0, 3) === "var") {
+                        // we currently only extract the first part and ignore any fallbacks
+                        const customPropertyName = /var\(\s*(--[a-zA-Z0-9_-]+)/g.exec(testColorValue);
+                        if (customPropertyName && customPropertyName[1]) {
+                            let selectorElement = document.getElementsByClassName(selectorClass)[0];
+                            if (!selectorElement) {
+                                // we need to add an empty element that the JS API can read the value of the custom prop
+                                selectorElement = document.createElement("div");
+                                selectorElement.classList.add(selectorClass);
+                                selectorElement.setAttribute("style", "display: none");
+                                document.body.appendChild(selectorElement);
+                            }
+                            // only check 1 time, not recursive
+                            testColorValue = getComputedStyle(selectorElement).getPropertyValue(customPropertyName[1]);
+                        }
+                    }
+
+                    try {
+                        if (Color(testColorValue)) {
+                            return [setting[0], testColorValue];
+                        } else {
+                            return [setting[0], undefined];
+                        }
+                    } catch {
+                        return [setting[0], undefined];
+                    }
+                })
+            ) as Record<string, string>
         );
     }
     return colorConfigurationMemo.get(configId)!;

package/src/components/Accordion/accordion.scss

@@ -4,12 +4,11 @@
 @include accordion.accordion;
 
 // own vars
-$eccgui-color-accordion-background-elevated: rgba($eccgui-color-accent, 0.1) !default;
+$eccgui-color-accordion-background-elevated: eccgui-color-var("identity", "accent", "100") !default;
 $eccgui-color-accordion-toggler-hover: $menu-item-color-hover !default;
-$eccgui-color-accordion-toggler-elevated-hover: color.mix(
-    $eccgui-color-accordion-background-elevated,
-    $eccgui-color-accordion-toggler-hover,
-    50%
+$eccgui-color-accordion-toggler-elevated-hover: eccgui-color-mix(
+    #{$eccgui-color-accordion-background-elevated},
+    #{$eccgui-color-accordion-toggler-hover}
 ) !default;
 $eccgui-size-accordion-header-baseheight: mini-units(5) !default;
 $eccgui-size-accordion-content-basespace: $eccgui-size-block-whitespace * 0.5 !default;
@@ -178,6 +177,8 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
     background-color: $eccgui-color-accordion-background-elevated;
 
     .#{$prefix}--accordion__heading {
+        &:hover,
+        &:focus,
         &:hover::before,
         &:focus::before {
             background-color: $eccgui-color-accordion-toggler-elevated-hover;

package/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) {
+                $css-property-name: #{eccgui-color-name($palette-group-name, $palette-tint-name, ($i * 2 - 1) * 100)};
+                $css-property-value: #{list.nth($palette-tint-colors, $i)};
+
+                #{$css-property-name}: #{$css-property-value};
+            }
+        }
+    }
+}

package/src/components/Application/_header.scss

@@ -14,10 +14,10 @@ $shell-header-bg-01: var(
 ) !default;
 
 /// Header menu trigger hover, Header nav link hover
-$shell-header-bg-02: color-mix(in srgb, $shell-header-bg-01, black 5%) !default;
+$shell-header-bg-02: eccgui-color-mix($shell-header-bg-01, black 5%) !default;
 
 /// Header action active background
-$shell-header-bg-03: color-mix(in srgb, $shell-header-bg-01, black 10%) !default;
+$shell-header-bg-03: eccgui-color-mix($shell-header-bg-01, black 10%) !default;
 
 /// Header submenu link hover
 $shell-header-bg-04: $shell-header-bg-02 !default;
@@ -32,10 +32,10 @@ $shell-header-bg-06: $shell-header-bg-03 !default;
 $shell-header-border-01: transparent !default;
 
 /// Header focus
-$shell-header-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
+$shell-header-focus: eccgui-color-mix($eccgui-color-applicationheader-text, white 39%) !default;
 
 /// Primary text in header, Title text
-$shell-header-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+$shell-header-text-01: eccgui-color-mix($eccgui-color-applicationheader-text, black 5%) !default;
 
 /// Secondary text in header, Menu item nav text
 $shell-header-text-02: $eccgui-color-applicationheader-text !default;
@@ -196,12 +196,12 @@ a.#{$prefix}--header__menu-item:active {
 a.#{$prefix}--header__name:focus,
 a.#{$prefix}--header__menu-item:focus {
     border: none;
-    outline: 1px dotted color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
+    outline: 1px dotted $shell-header-focus;
     outline-offset: -1px;
     box-shadow: none;
 }
 .#{$prefix}--header__menu-title[aria-expanded="true"] {
-    color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
+    color: $shell-header-focus;
 }
 
 // $shell-header-text-01
@@ -214,7 +214,7 @@ a.#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:focus,
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover,
 .#{$prefix}--skip-to-content:focus {
-    color: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%);
+    color: $shell-header-text-01;
 }
 
 // $shell-header-text-02

package/src/components/Application/_toolbar.scss

@@ -12,25 +12,25 @@
 $shell-panel-bg-01: $shell-header-bg-01 !default;
 
 /// Panel item hover background
-$shell-panel-bg-02: color-mix(in srgb, $shell-header-bg-01, black 10%) !default;
+$shell-panel-bg-02: eccgui-color-mix($shell-header-bg-01, black 10%) !default;
 
 /// Panel item focus and active background
-$shell-panel-bg-03: color-mix(in srgb, $shell-header-bg-01, black 5%) !default;
+$shell-panel-bg-03: eccgui-color-mix($shell-header-bg-01, black 5%) !default;
 
 /// Panel item link selected background
-$shell-panel-bg-04: color-mix(in srgb, $shell-header-bg-01, white 5%) !default;
+$shell-panel-bg-04: eccgui-color-mix($shell-header-bg-01, white 5%) !default;
 
 /// Panel border
 $shell-panel-border: $shell-panel-bg-03 !default;
 
 /// Header panel text
-$shell-panel-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+$shell-panel-text-01: $shell-header-text-01 !default;
 
 /// Header panel secondary text
 $shell-panel-text-02: $eccgui-color-applicationheader-text !default;
 
 /// Header panel focus border
-$shell-panel-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
+$shell-panel-focus: $shell-header-focus !default;
 
 @import "~@carbon/react/scss/components/ui-shell/header-panel/index";
 

package/src/components/Application/application.scss

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

package/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,