@leanix/components 0.4.212 → 0.4.214

package/esm2022/lib/core-ui/functions/core-css.helpers.mjs

@@ -8,11 +8,28 @@ import Color from 'color';
  */
 export function getContrastColor(colorHex) {
     try {
-        const color = Color(colorHex || '#000');
-        // Check http://codepen.io/WebSeed/pen/pvgqEq
-        const a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
-        const d = a < 0.4 ? 0 : 255;
-        return Color({ r: d, g: d, b: d }).hex();
+        colorHex = colorHex || '#000';
+        const backgroundColor = Color(colorHex);
+        const foregroundColor = Color(backgroundColor.isDark() ? '#FFFFFF' : '#000000');
+        const backgroundColorLuminance = backgroundColor.luminosity();
+        const foregroundColorLuminance = foregroundColor.luminosity();
+        /**
+         * Use the contrast ratio formula to determine the most eligible text color for the given background color.
+         * It is possible tha the background color is dark based on the RGB value, but has opacity, which makes it light.
+         * In such cases, the luminance value is used to determine the color. The solution is based on the following article:
+         * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
+         */
+        const contrastRatio = backgroundColorLuminance > foregroundColorLuminance
+            ? (foregroundColorLuminance + 0.05) / (backgroundColorLuminance + 0.05)
+            : (backgroundColorLuminance + 0.05) / (foregroundColorLuminance + 0.05);
+        /**
+         * Check contrast ratio for WCAG 2.0 level AA compliance level for small text. If the
+         * contrast ratio is less than 1 / 4.5, return the inverted foreground color.
+         */
+        if (contrastRatio >= 1 / 4.5) {
+            return foregroundColor.negate().hex();
+        }
+        return foregroundColor.hex();
     }
     catch {
         return '#FFFFFF';
@@ -32,4 +49,4 @@ export function shorthandHexHandle(hex) {
 export function isValidHexColor(color) {
     return /^#[0-9A-F]{6}$/i.test(color);
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29yZS1jc3MuaGVscGVycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL2NvcmUtdWkvZnVuY3Rpb25zL2NvcmUtY3NzLmhlbHBlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCOzs7Ozs7R0FNRztBQUNILE1BQU0sVUFBVSxnQkFBZ0IsQ0FBQyxRQUFpQjtJQUNoRCxJQUFJO1FBQ0YsTUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLFFBQVEsSUFBSSxNQUFNLENBQUMsQ0FBQztRQUN4Qyw2Q0FBNkM7UUFDN0MsTUFBTSxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxHQUFHLEVBQUUsR0FBRyxLQUFLLEdBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxHQUFHLEtBQUssR0FBRyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsR0FBRyxHQUFHLENBQUM7UUFDekYsTUFBTSxDQUFDLEdBQUcsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUM7UUFDNUIsT0FBTyxLQUFLLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxFQUFFLENBQUM7S0FDMUM7SUFBQyxNQUFNO1FBQ04sT0FBTyxTQUFTLENBQUM7S0FDbEI7QUFDSCxDQUFDO0FBRUQsTUFBTSxVQUFVLGtCQUFrQixDQUFDLEdBQVc7SUFDNUMsTUFBTSxjQUFjLEdBQUcsbUNBQW1DLENBQUM7SUFDM0QsTUFBTSxTQUFTLEdBQUcsR0FBRyxDQUFDLEtBQUssQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUM1QyxJQUFJLFNBQVMsRUFBRTtRQUNiLE1BQU0sWUFBWSxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUUsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUM3SCxPQUFPLFlBQVksQ0FBQztLQUNyQjtTQUFNO1FBQ0wsT0FBTyxHQUFHLENBQUM7S0FDWjtBQUNILENBQUM7QUFFRCxNQUFNLFVBQVUsZUFBZSxDQUFDLEtBQWE7SUFDM0MsT0FBTyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7QUFDdkMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBDb2xvciBmcm9tICdjb2xvcic7XG5cbi8qKlxuICogQ29tcHV0ZSB0aGUgbW9zdCBlbGlnaWJsZSB0ZXh0IGNvbG9yIGZvciBhIGdpdmVuIGJhY2tncm91bmQgY29sb3IgKGJsYWNrIG9yIHdoaXRlKSwgZGVwZW5kaW5nIG9uIHRoZSBsdW1pbmFuY2Ugb2YgdGhlXG4gKiBiYWNrZ3JvdW5kIGNvbG9yLiBJbiBjYXNlIHRoZSBwcm92aWRlZCBjb2xvciBpcyB1bmRlZmluZWQgb3IgaW52YWxpZCwgd2hpdGUgKCNGRkZGRkYpIGlzIHJldHVybmVkLlxuICpcbiAqIEBwYXJhbSBjb2xvckhleCBDb2xvciBzdHJpbmcgaW4gaGV4YWRlY2ltYWwgZW5jb2RpbmcuXG4gKiBAcmV0dXJucyBFcXVpdmFsZW50IGNvbnRyYXN0IGNvbG9yIGluIGhleGFkZWNpbWFsIGVuY29kaW5nLlxuICovXG5leHBvcnQgZnVuY3Rpb24gZ2V0Q29udHJhc3RDb2xvcihjb2xvckhleD86IHN0cmluZyk6IHN0cmluZyB7XG4gIHRyeSB7XG4gICAgY29uc3QgY29sb3IgPSBDb2xvcihjb2xvckhleCB8fCAnIzAwMCcpO1xuICAgIC8vIENoZWNrIGh0dHA6Ly9jb2RlcGVuLmlvL1dlYlNlZWQvcGVuL3B2Z3FFcVxuICAgIGNvbnN0IGEgPSAxIC0gKDAuMjk5ICogY29sb3IucmVkKCkgKyAwLjU4NyAqIGNvbG9yLmdyZWVuKCkgKyAwLjExNCAqIGNvbG9yLmJsdWUoKSkgLyAyNTU7XG4gICAgY29uc3QgZCA9IGEgPCAwLjQgPyAwIDogMjU1O1xuICAgIHJldHVybiBDb2xvcih7IHI6IGQsIGc6IGQsIGI6IGQgfSkuaGV4KCk7XG4gIH0gY2F0Y2gge1xuICAgIHJldHVybiAnI0ZGRkZGRic7XG4gIH1cbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHNob3J0aGFuZEhleEhhbmRsZShoZXg6IHN0cmluZyk6IHN0cmluZyB7XG4gIGNvbnN0IHNob3J0aGFuZFJlZ2V4ID0gL14oIykoW2EtZlxcZF0pKFthLWZcXGRdKShbYS1mXFxkXSkkL2k7XG4gIGNvbnN0IHNob3J0aGFuZCA9IGhleC5tYXRjaChzaG9ydGhhbmRSZWdleCk7XG4gIGlmIChzaG9ydGhhbmQpIHtcbiAgICBjb25zdCBjb252ZXJ0ZWRIZXggPSBzaG9ydGhhbmRbMV0hICsgc2hvcnRoYW5kWzJdICsgc2hvcnRoYW5kWzJdICsgc2hvcnRoYW5kWzNdICsgc2hvcnRoYW5kWzNdICsgc2hvcnRoYW5kWzRdICsgc2hvcnRoYW5kWzRdO1xuICAgIHJldHVybiBjb252ZXJ0ZWRIZXg7XG4gIH0gZWxzZSB7XG4gICAgcmV0dXJuIGhleDtcbiAgfVxufVxuXG5leHBvcnQgZnVuY3Rpb24gaXNWYWxpZEhleENvbG9yKGNvbG9yOiBzdHJpbmcpIHtcbiAgcmV0dXJuIC9eI1swLTlBLUZdezZ9JC9pLnRlc3QoY29sb3IpO1xufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29yZS1jc3MuaGVscGVycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL2NvcmUtdWkvZnVuY3Rpb25zL2NvcmUtY3NzLmhlbHBlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCOzs7Ozs7R0FNRztBQUNILE1BQU0sVUFBVSxnQkFBZ0IsQ0FBQyxRQUFpQjtJQUNoRCxJQUFJO1FBQ0YsUUFBUSxHQUFHLFFBQVEsSUFBSSxNQUFNLENBQUM7UUFFOUIsTUFBTSxlQUFlLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3hDLE1BQU0sZUFBZSxHQUFHLEtBQUssQ0FBQyxlQUFlLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUM7UUFFaEYsTUFBTSx3QkFBd0IsR0FBRyxlQUFlLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDOUQsTUFBTSx3QkFBd0IsR0FBRyxlQUFlLENBQUMsVUFBVSxFQUFFLENBQUM7UUFFOUQ7Ozs7O1dBS0c7UUFDSCxNQUFNLGFBQWEsR0FDakIsd0JBQXdCLEdBQUcsd0JBQXdCO1lBQ2pELENBQUMsQ0FBQyxDQUFDLHdCQUF3QixHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsd0JBQXdCLEdBQUcsSUFBSSxDQUFDO1lBQ3ZFLENBQUMsQ0FBQyxDQUFDLHdCQUF3QixHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsd0JBQXdCLEdBQUcsSUFBSSxDQUFDLENBQUM7UUFFNUU7OztXQUdHO1FBQ0gsSUFBSSxhQUFhLElBQUksQ0FBQyxHQUFHLEdBQUcsRUFBRTtZQUM1QixPQUFPLGVBQWUsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxHQUFHLEVBQUUsQ0FBQztTQUN2QztRQUVELE9BQU8sZUFBZSxDQUFDLEdBQUcsRUFBRSxDQUFDO0tBQzlCO0lBQUMsTUFBTTtRQUNOLE9BQU8sU0FBUyxDQUFDO0tBQ2xCO0FBQ0gsQ0FBQztBQUVELE1BQU0sVUFBVSxrQkFBa0IsQ0FBQyxHQUFXO0lBQzVDLE1BQU0sY0FBYyxHQUFHLG1DQUFtQyxDQUFDO0lBQzNELE1BQU0sU0FBUyxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDNUMsSUFBSSxTQUFTLEVBQUU7UUFDYixNQUFNLFlBQVksR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFFLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDN0gsT0FBTyxZQUFZLENBQUM7S0FDckI7U0FBTTtRQUNMLE9BQU8sR0FBRyxDQUFDO0tBQ1o7QUFDSCxDQUFDO0FBRUQsTUFBTSxVQUFVLGVBQWUsQ0FBQyxLQUFhO0lBQzNDLE9BQU8saUJBQWlCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0FBQ3ZDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgQ29sb3IgZnJvbSAnY29sb3InO1xuXG4vKipcbiAqIENvbXB1dGUgdGhlIG1vc3QgZWxpZ2libGUgdGV4dCBjb2xvciBmb3IgYSBnaXZlbiBiYWNrZ3JvdW5kIGNvbG9yIChibGFjayBvciB3aGl0ZSksIGRlcGVuZGluZyBvbiB0aGUgbHVtaW5hbmNlIG9mIHRoZVxuICogYmFja2dyb3VuZCBjb2xvci4gSW4gY2FzZSB0aGUgcHJvdmlkZWQgY29sb3IgaXMgdW5kZWZpbmVkIG9yIGludmFsaWQsIHdoaXRlICgjRkZGRkZGKSBpcyByZXR1cm5lZC5cbiAqXG4gKiBAcGFyYW0gY29sb3JIZXggQ29sb3Igc3RyaW5nIGluIGhleGFkZWNpbWFsIGVuY29kaW5nLlxuICogQHJldHVybnMgRXF1aXZhbGVudCBjb250cmFzdCBjb2xvciBpbiBoZXhhZGVjaW1hbCBlbmNvZGluZy5cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGdldENvbnRyYXN0Q29sb3IoY29sb3JIZXg/OiBzdHJpbmcpOiBzdHJpbmcge1xuICB0cnkge1xuICAgIGNvbG9ySGV4ID0gY29sb3JIZXggfHwgJyMwMDAnO1xuXG4gICAgY29uc3QgYmFja2dyb3VuZENvbG9yID0gQ29sb3IoY29sb3JIZXgpO1xuICAgIGNvbnN0IGZvcmVncm91bmRDb2xvciA9IENvbG9yKGJhY2tncm91bmRDb2xvci5pc0RhcmsoKSA/ICcjRkZGRkZGJyA6ICcjMDAwMDAwJyk7XG5cbiAgICBjb25zdCBiYWNrZ3JvdW5kQ29sb3JMdW1pbmFuY2UgPSBiYWNrZ3JvdW5kQ29sb3IubHVtaW5vc2l0eSgpO1xuICAgIGNvbnN0IGZvcmVncm91bmRDb2xvckx1bWluYW5jZSA9IGZvcmVncm91bmRDb2xvci5sdW1pbm9zaXR5KCk7XG5cbiAgICAvKipcbiAgICAgKiBVc2UgdGhlIGNvbnRyYXN0IHJhdGlvIGZvcm11bGEgdG8gZGV0ZXJtaW5lIHRoZSBtb3N0IGVsaWdpYmxlIHRleHQgY29sb3IgZm9yIHRoZSBnaXZlbiBiYWNrZ3JvdW5kIGNvbG9yLlxuICAgICAqIEl0IGlzIHBvc3NpYmxlIHRoYSB0aGUgYmFja2dyb3VuZCBjb2xvciBpcyBkYXJrIGJhc2VkIG9uIHRoZSBSR0IgdmFsdWUsIGJ1dCBoYXMgb3BhY2l0eSwgd2hpY2ggbWFrZXMgaXQgbGlnaHQuXG4gICAgICogSW4gc3VjaCBjYXNlcywgdGhlIGx1bWluYW5jZSB2YWx1ZSBpcyB1c2VkIHRvIGRldGVybWluZSB0aGUgY29sb3IuIFRoZSBzb2x1dGlvbiBpcyBiYXNlZCBvbiB0aGUgZm9sbG93aW5nIGFydGljbGU6XG4gICAgICogaHR0cHM6Ly9kZXYudG8vYWx2YXJvbW9udG9yby9idWlsZGluZy15b3VyLW93bi1jb2xvci1jb250cmFzdC1jaGVja2VyLTRqN29cbiAgICAgKi9cbiAgICBjb25zdCBjb250cmFzdFJhdGlvID1cbiAgICAgIGJhY2tncm91bmRDb2xvckx1bWluYW5jZSA+IGZvcmVncm91bmRDb2xvckx1bWluYW5jZVxuICAgICAgICA/IChmb3JlZ3JvdW5kQ29sb3JMdW1pbmFuY2UgKyAwLjA1KSAvIChiYWNrZ3JvdW5kQ29sb3JMdW1pbmFuY2UgKyAwLjA1KVxuICAgICAgICA6IChiYWNrZ3JvdW5kQ29sb3JMdW1pbmFuY2UgKyAwLjA1KSAvIChmb3JlZ3JvdW5kQ29sb3JMdW1pbmFuY2UgKyAwLjA1KTtcblxuICAgIC8qKlxuICAgICAqIENoZWNrIGNvbnRyYXN0IHJhdGlvIGZvciBXQ0FHIDIuMCBsZXZlbCBBQSBjb21wbGlhbmNlIGxldmVsIGZvciBzbWFsbCB0ZXh0LiBJZiB0aGVcbiAgICAgKiBjb250cmFzdCByYXRpbyBpcyBsZXNzIHRoYW4gMSAvIDQuNSwgcmV0dXJuIHRoZSBpbnZlcnRlZCBmb3JlZ3JvdW5kIGNvbG9yLlxuICAgICAqL1xuICAgIGlmIChjb250cmFzdFJhdGlvID49IDEgLyA0LjUpIHtcbiAgICAgIHJldHVybiBmb3JlZ3JvdW5kQ29sb3IubmVnYXRlKCkuaGV4KCk7XG4gICAgfVxuXG4gICAgcmV0dXJuIGZvcmVncm91bmRDb2xvci5oZXgoKTtcbiAgfSBjYXRjaCB7XG4gICAgcmV0dXJuICcjRkZGRkZGJztcbiAgfVxufVxuXG5leHBvcnQgZnVuY3Rpb24gc2hvcnRoYW5kSGV4SGFuZGxlKGhleDogc3RyaW5nKTogc3RyaW5nIHtcbiAgY29uc3Qgc2hvcnRoYW5kUmVnZXggPSAvXigjKShbYS1mXFxkXSkoW2EtZlxcZF0pKFthLWZcXGRdKSQvaTtcbiAgY29uc3Qgc2hvcnRoYW5kID0gaGV4Lm1hdGNoKHNob3J0aGFuZFJlZ2V4KTtcbiAgaWYgKHNob3J0aGFuZCkge1xuICAgIGNvbnN0IGNvbnZlcnRlZEhleCA9IHNob3J0aGFuZFsxXSEgKyBzaG9ydGhhbmRbMl0gKyBzaG9ydGhhbmRbMl0gKyBzaG9ydGhhbmRbM10gKyBzaG9ydGhhbmRbM10gKyBzaG9ydGhhbmRbNF0gKyBzaG9ydGhhbmRbNF07XG4gICAgcmV0dXJuIGNvbnZlcnRlZEhleDtcbiAgfSBlbHNlIHtcbiAgICByZXR1cm4gaGV4O1xuICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBpc1ZhbGlkSGV4Q29sb3IoY29sb3I6IHN0cmluZykge1xuICByZXR1cm4gL14jWzAtOUEtRl17Nn0kL2kudGVzdChjb2xvcik7XG59XG4iXX0=

package/fesm2022/leanix-components.mjs

@@ -1411,11 +1411,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
  */
 function getContrastColor(colorHex) {
     try {
-        const color = Color(colorHex || '#000');
-        // Check http://codepen.io/WebSeed/pen/pvgqEq
-        const a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
-        const d = a < 0.4 ? 0 : 255;
-        return Color({ r: d, g: d, b: d }).hex();
+        colorHex = colorHex || '#000';
+        const backgroundColor = Color(colorHex);
+        const foregroundColor = Color(backgroundColor.isDark() ? '#FFFFFF' : '#000000');
+        const backgroundColorLuminance = backgroundColor.luminosity();
+        const foregroundColorLuminance = foregroundColor.luminosity();
+        /**
+         * Use the contrast ratio formula to determine the most eligible text color for the given background color.
+         * It is possible tha the background color is dark based on the RGB value, but has opacity, which makes it light.
+         * In such cases, the luminance value is used to determine the color. The solution is based on the following article:
+         * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
+         */
+        const contrastRatio = backgroundColorLuminance > foregroundColorLuminance
+            ? (foregroundColorLuminance + 0.05) / (backgroundColorLuminance + 0.05)
+            : (backgroundColorLuminance + 0.05) / (foregroundColorLuminance + 0.05);
+        /**
+         * Check contrast ratio for WCAG 2.0 level AA compliance level for small text. If the
+         * contrast ratio is less than 1 / 4.5, return the inverted foreground color.
+         */
+        if (contrastRatio >= 1 / 4.5) {
+            return foregroundColor.negate().hex();
+        }
+        return foregroundColor.hex();
     }
     catch {
         return '#FFFFFF';