@leanix/components 0.4.212 → 0.4.214

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,11 +8,28 @@ import Color from 'color';
8
8
  */
9
9
  export function getContrastColor(colorHex) {
10
10
  try {
11
- const color = Color(colorHex || '#000');
12
- // Check http://codepen.io/WebSeed/pen/pvgqEq
13
- const a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
14
- const d = a < 0.4 ? 0 : 255;
15
- return Color({ r: d, g: d, b: d }).hex();
11
+ colorHex = colorHex || '#000';
12
+ const backgroundColor = Color(colorHex);
13
+ const foregroundColor = Color(backgroundColor.isDark() ? '#FFFFFF' : '#000000');
14
+ const backgroundColorLuminance = backgroundColor.luminosity();
15
+ const foregroundColorLuminance = foregroundColor.luminosity();
16
+ /**
17
+ * Use the contrast ratio formula to determine the most eligible text color for the given background color.
18
+ * It is possible tha the background color is dark based on the RGB value, but has opacity, which makes it light.
19
+ * In such cases, the luminance value is used to determine the color. The solution is based on the following article:
20
+ * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
21
+ */
22
+ const contrastRatio = backgroundColorLuminance > foregroundColorLuminance
23
+ ? (foregroundColorLuminance + 0.05) / (backgroundColorLuminance + 0.05)
24
+ : (backgroundColorLuminance + 0.05) / (foregroundColorLuminance + 0.05);
25
+ /**
26
+ * Check contrast ratio for WCAG 2.0 level AA compliance level for small text. If the
27
+ * contrast ratio is less than 1 / 4.5, return the inverted foreground color.
28
+ */
29
+ if (contrastRatio >= 1 / 4.5) {
30
+ return foregroundColor.negate().hex();
31
+ }
32
+ return foregroundColor.hex();
16
33
  }
17
34
  catch {
18
35
  return '#FFFFFF';
@@ -32,4 +49,4 @@ export function shorthandHexHandle(hex) {
32
49
  export function isValidHexColor(color) {
33
50
  return /^#[0-9A-F]{6}$/i.test(color);
34
51
  }
35
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29yZS1jc3MuaGVscGVycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL2NvcmUtdWkvZnVuY3Rpb25zL2NvcmUtY3NzLmhlbHBlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCOzs7Ozs7R0FNRztBQUNILE1BQU0sVUFBVSxnQkFBZ0IsQ0FBQyxRQUFpQjtJQUNoRCxJQUFJO1FBQ0YsTUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLFFBQVEsSUFBSSxNQUFNLENBQUMsQ0FBQztRQUN4Qyw2Q0FBNkM7UUFDN0MsTUFBTSxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxHQUFHLEVBQUUsR0FBRyxLQUFLLEdBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxHQUFHLEtBQUssR0FBRyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsR0FBRyxHQUFHLENBQUM7UUFDekYsTUFBTSxDQUFDLEdBQUcsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUM7UUFDNUIsT0FBTyxLQUFLLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxFQUFFLENBQUM7S0FDMUM7SUFBQyxNQUFNO1FBQ04sT0FBTyxTQUFTLENBQUM7S0FDbEI7QUFDSCxDQUFDO0FBRUQsTUFBTSxVQUFVLGtCQUFrQixDQUFDLEdBQVc7SUFDNUMsTUFBTSxjQUFjLEdBQUcsbUNBQW1DLENBQUM7SUFDM0QsTUFBTSxTQUFTLEdBQUcsR0FBRyxDQUFDLEtBQUssQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUM1QyxJQUFJLFNBQVMsRUFBRTtRQUNiLE1BQU0sWUFBWSxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUUsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUM3SCxPQUFPLFlBQVksQ0FBQztLQUNyQjtTQUFNO1FBQ0wsT0FBTyxHQUFHLENBQUM7S0FDWjtBQUNILENBQUM7QUFFRCxNQUFNLFVBQVUsZUFBZSxDQUFDLEtBQWE7SUFDM0MsT0FBTyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7QUFDdkMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBDb2xvciBmcm9tICdjb2xvcic7XG5cbi8qKlxuICogQ29tcHV0ZSB0aGUgbW9zdCBlbGlnaWJsZSB0ZXh0IGNvbG9yIGZvciBhIGdpdmVuIGJhY2tncm91bmQgY29sb3IgKGJsYWNrIG9yIHdoaXRlKSwgZGVwZW5kaW5nIG9uIHRoZSBsdW1pbmFuY2Ugb2YgdGhlXG4gKiBiYWNrZ3JvdW5kIGNvbG9yLiBJbiBjYXNlIHRoZSBwcm92aWRlZCBjb2xvciBpcyB1bmRlZmluZWQgb3IgaW52YWxpZCwgd2hpdGUgKCNGRkZGRkYpIGlzIHJldHVybmVkLlxuICpcbiAqIEBwYXJhbSBjb2xvckhleCBDb2xvciBzdHJpbmcgaW4gaGV4YWRlY2ltYWwgZW5jb2RpbmcuXG4gKiBAcmV0dXJucyBFcXVpdmFsZW50IGNvbnRyYXN0IGNvbG9yIGluIGhleGFkZWNpbWFsIGVuY29kaW5nLlxuICovXG5leHBvcnQgZnVuY3Rpb24gZ2V0Q29udHJhc3RDb2xvcihjb2xvckhleD86IHN0cmluZyk6IHN0cmluZyB7XG4gIHRyeSB7XG4gICAgY29uc3QgY29sb3IgPSBDb2xvcihjb2xvckhleCB8fCAnIzAwMCcpO1xuICAgIC8vIENoZWNrIGh0dHA6Ly9jb2RlcGVuLmlvL1dlYlNlZWQvcGVuL3B2Z3FFcVxuICAgIGNvbnN0IGEgPSAxIC0gKDAuMjk5ICogY29sb3IucmVkKCkgKyAwLjU4NyAqIGNvbG9yLmdyZWVuKCkgKyAwLjExNCAqIGNvbG9yLmJsdWUoKSkgLyAyNTU7XG4gICAgY29uc3QgZCA9IGEgPCAwLjQgPyAwIDogMjU1O1xuICAgIHJldHVybiBDb2xvcih7IHI6IGQsIGc6IGQsIGI6IGQgfSkuaGV4KCk7XG4gIH0gY2F0Y2gge1xuICAgIHJldHVybiAnI0ZGRkZGRic7XG4gIH1cbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHNob3J0aGFuZEhleEhhbmRsZShoZXg6IHN0cmluZyk6IHN0cmluZyB7XG4gIGNvbnN0IHNob3J0aGFuZFJlZ2V4ID0gL14oIykoW2EtZlxcZF0pKFthLWZcXGRdKShbYS1mXFxkXSkkL2k7XG4gIGNvbnN0IHNob3J0aGFuZCA9IGhleC5tYXRjaChzaG9ydGhhbmRSZWdleCk7XG4gIGlmIChzaG9ydGhhbmQpIHtcbiAgICBjb25zdCBjb252ZXJ0ZWRIZXggPSBzaG9ydGhhbmRbMV0hICsgc2hvcnRoYW5kWzJdICsgc2hvcnRoYW5kWzJdICsgc2hvcnRoYW5kWzNdICsgc2hvcnRoYW5kWzNdICsgc2hvcnRoYW5kWzRdICsgc2hvcnRoYW5kWzRdO1xuICAgIHJldHVybiBjb252ZXJ0ZWRIZXg7XG4gIH0gZWxzZSB7XG4gICAgcmV0dXJuIGhleDtcbiAgfVxufVxuXG5leHBvcnQgZnVuY3Rpb24gaXNWYWxpZEhleENvbG9yKGNvbG9yOiBzdHJpbmcpIHtcbiAgcmV0dXJuIC9eI1swLTlBLUZdezZ9JC9pLnRlc3QoY29sb3IpO1xufVxuIl19
52
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29yZS1jc3MuaGVscGVycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL2NvcmUtdWkvZnVuY3Rpb25zL2NvcmUtY3NzLmhlbHBlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCOzs7Ozs7R0FNRztBQUNILE1BQU0sVUFBVSxnQkFBZ0IsQ0FBQyxRQUFpQjtJQUNoRCxJQUFJO1FBQ0YsUUFBUSxHQUFHLFFBQVEsSUFBSSxNQUFNLENBQUM7UUFFOUIsTUFBTSxlQUFlLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3hDLE1BQU0sZUFBZSxHQUFHLEtBQUssQ0FBQyxlQUFlLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUM7UUFFaEYsTUFBTSx3QkFBd0IsR0FBRyxlQUFlLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDOUQsTUFBTSx3QkFBd0IsR0FBRyxlQUFlLENBQUMsVUFBVSxFQUFFLENBQUM7UUFFOUQ7Ozs7O1dBS0c7UUFDSCxNQUFNLGFBQWEsR0FDakIsd0JBQXdCLEdBQUcsd0JBQXdCO1lBQ2pELENBQUMsQ0FBQyxDQUFDLHdCQUF3QixHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsd0JBQXdCLEdBQUcsSUFBSSxDQUFDO1lBQ3ZFLENBQUMsQ0FBQyxDQUFDLHdCQUF3QixHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsd0JBQXdCLEdBQUcsSUFBSSxDQUFDLENBQUM7UUFFNUU7OztXQUdHO1FBQ0gsSUFBSSxhQUFhLElBQUksQ0FBQyxHQUFHLEdBQUcsRUFBRTtZQUM1QixPQUFPLGVBQWUsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxHQUFHLEVBQUUsQ0FBQztTQUN2QztRQUVELE9BQU8sZUFBZSxDQUFDLEdBQUcsRUFBRSxDQUFDO0tBQzlCO0lBQUMsTUFBTTtRQUNOLE9BQU8sU0FBUyxDQUFDO0tBQ2xCO0FBQ0gsQ0FBQztBQUVELE1BQU0sVUFBVSxrQkFBa0IsQ0FBQyxHQUFXO0lBQzVDLE1BQU0sY0FBYyxHQUFHLG1DQUFtQyxDQUFDO0lBQzNELE1BQU0sU0FBUyxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDNUMsSUFBSSxTQUFTLEVBQUU7UUFDYixNQUFNLFlBQVksR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFFLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDN0gsT0FBTyxZQUFZLENBQUM7S0FDckI7U0FBTTtRQUNMLE9BQU8sR0FBRyxDQUFDO0tBQ1o7QUFDSCxDQUFDO0FBRUQsTUFBTSxVQUFVLGVBQWUsQ0FBQyxLQUFhO0lBQzNDLE9BQU8saUJBQWlCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0FBQ3ZDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgQ29sb3IgZnJvbSAnY29sb3InO1xuXG4vKipcbiAqIENvbXB1dGUgdGhlIG1vc3QgZWxpZ2libGUgdGV4dCBjb2xvciBmb3IgYSBnaXZlbiBiYWNrZ3JvdW5kIGNvbG9yIChibGFjayBvciB3aGl0ZSksIGRlcGVuZGluZyBvbiB0aGUgbHVtaW5hbmNlIG9mIHRoZVxuICogYmFja2dyb3VuZCBjb2xvci4gSW4gY2FzZSB0aGUgcHJvdmlkZWQgY29sb3IgaXMgdW5kZWZpbmVkIG9yIGludmFsaWQsIHdoaXRlICgjRkZGRkZGKSBpcyByZXR1cm5lZC5cbiAqXG4gKiBAcGFyYW0gY29sb3JIZXggQ29sb3Igc3RyaW5nIGluIGhleGFkZWNpbWFsIGVuY29kaW5nLlxuICogQHJldHVybnMgRXF1aXZhbGVudCBjb250cmFzdCBjb2xvciBpbiBoZXhhZGVjaW1hbCBlbmNvZGluZy5cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGdldENvbnRyYXN0Q29sb3IoY29sb3JIZXg/OiBzdHJpbmcpOiBzdHJpbmcge1xuICB0cnkge1xuICAgIGNvbG9ySGV4ID0gY29sb3JIZXggfHwgJyMwMDAnO1xuXG4gICAgY29uc3QgYmFja2dyb3VuZENvbG9yID0gQ29sb3IoY29sb3JIZXgpO1xuICAgIGNvbnN0IGZvcmVncm91bmRDb2xvciA9IENvbG9yKGJhY2tncm91bmRDb2xvci5pc0RhcmsoKSA/ICcjRkZGRkZGJyA6ICcjMDAwMDAwJyk7XG5cbiAgICBjb25zdCBiYWNrZ3JvdW5kQ29sb3JMdW1pbmFuY2UgPSBiYWNrZ3JvdW5kQ29sb3IubHVtaW5vc2l0eSgpO1xuICAgIGNvbnN0IGZvcmVncm91bmRDb2xvckx1bWluYW5jZSA9IGZvcmVncm91bmRDb2xvci5sdW1pbm9zaXR5KCk7XG5cbiAgICAvKipcbiAgICAgKiBVc2UgdGhlIGNvbnRyYXN0IHJhdGlvIGZvcm11bGEgdG8gZGV0ZXJtaW5lIHRoZSBtb3N0IGVsaWdpYmxlIHRleHQgY29sb3IgZm9yIHRoZSBnaXZlbiBiYWNrZ3JvdW5kIGNvbG9yLlxuICAgICAqIEl0IGlzIHBvc3NpYmxlIHRoYSB0aGUgYmFja2dyb3VuZCBjb2xvciBpcyBkYXJrIGJhc2VkIG9uIHRoZSBSR0IgdmFsdWUsIGJ1dCBoYXMgb3BhY2l0eSwgd2hpY2ggbWFrZXMgaXQgbGlnaHQuXG4gICAgICogSW4gc3VjaCBjYXNlcywgdGhlIGx1bWluYW5jZSB2YWx1ZSBpcyB1c2VkIHRvIGRldGVybWluZSB0aGUgY29sb3IuIFRoZSBzb2x1dGlvbiBpcyBiYXNlZCBvbiB0aGUgZm9sbG93aW5nIGFydGljbGU6XG4gICAgICogaHR0cHM6Ly9kZXYudG8vYWx2YXJvbW9udG9yby9idWlsZGluZy15b3VyLW93bi1jb2xvci1jb250cmFzdC1jaGVja2VyLTRqN29cbiAgICAgKi9cbiAgICBjb25zdCBjb250cmFzdFJhdGlvID1cbiAgICAgIGJhY2tncm91bmRDb2xvckx1bWluYW5jZSA+IGZvcmVncm91bmRDb2xvckx1bWluYW5jZVxuICAgICAgICA/IChmb3JlZ3JvdW5kQ29sb3JMdW1pbmFuY2UgKyAwLjA1KSAvIChiYWNrZ3JvdW5kQ29sb3JMdW1pbmFuY2UgKyAwLjA1KVxuICAgICAgICA6IChiYWNrZ3JvdW5kQ29sb3JMdW1pbmFuY2UgKyAwLjA1KSAvIChmb3JlZ3JvdW5kQ29sb3JMdW1pbmFuY2UgKyAwLjA1KTtcblxuICAgIC8qKlxuICAgICAqIENoZWNrIGNvbnRyYXN0IHJhdGlvIGZvciBXQ0FHIDIuMCBsZXZlbCBBQSBjb21wbGlhbmNlIGxldmVsIGZvciBzbWFsbCB0ZXh0LiBJZiB0aGVcbiAgICAgKiBjb250cmFzdCByYXRpbyBpcyBsZXNzIHRoYW4gMSAvIDQuNSwgcmV0dXJuIHRoZSBpbnZlcnRlZCBmb3JlZ3JvdW5kIGNvbG9yLlxuICAgICAqL1xuICAgIGlmIChjb250cmFzdFJhdGlvID49IDEgLyA0LjUpIHtcbiAgICAgIHJldHVybiBmb3JlZ3JvdW5kQ29sb3IubmVnYXRlKCkuaGV4KCk7XG4gICAgfVxuXG4gICAgcmV0dXJuIGZvcmVncm91bmRDb2xvci5oZXgoKTtcbiAgfSBjYXRjaCB7XG4gICAgcmV0dXJuICcjRkZGRkZGJztcbiAgfVxufVxuXG5leHBvcnQgZnVuY3Rpb24gc2hvcnRoYW5kSGV4SGFuZGxlKGhleDogc3RyaW5nKTogc3RyaW5nIHtcbiAgY29uc3Qgc2hvcnRoYW5kUmVnZXggPSAvXigjKShbYS1mXFxkXSkoW2EtZlxcZF0pKFthLWZcXGRdKSQvaTtcbiAgY29uc3Qgc2hvcnRoYW5kID0gaGV4Lm1hdGNoKHNob3J0aGFuZFJlZ2V4KTtcbiAgaWYgKHNob3J0aGFuZCkge1xuICAgIGNvbnN0IGNvbnZlcnRlZEhleCA9IHNob3J0aGFuZFsxXSEgKyBzaG9ydGhhbmRbMl0gKyBzaG9ydGhhbmRbMl0gKyBzaG9ydGhhbmRbM10gKyBzaG9ydGhhbmRbM10gKyBzaG9ydGhhbmRbNF0gKyBzaG9ydGhhbmRbNF07XG4gICAgcmV0dXJuIGNvbnZlcnRlZEhleDtcbiAgfSBlbHNlIHtcbiAgICByZXR1cm4gaGV4O1xuICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBpc1ZhbGlkSGV4Q29sb3IoY29sb3I6IHN0cmluZykge1xuICByZXR1cm4gL14jWzAtOUEtRl17Nn0kL2kudGVzdChjb2xvcik7XG59XG4iXX0=
@@ -1411,11 +1411,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
1411
1411
  */
1412
1412
  function getContrastColor(colorHex) {
1413
1413
  try {
1414
- const color = Color(colorHex || '#000');
1415
- // Check http://codepen.io/WebSeed/pen/pvgqEq
1416
- const a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
1417
- const d = a < 0.4 ? 0 : 255;
1418
- return Color({ r: d, g: d, b: d }).hex();
1414
+ colorHex = colorHex || '#000';
1415
+ const backgroundColor = Color(colorHex);
1416
+ const foregroundColor = Color(backgroundColor.isDark() ? '#FFFFFF' : '#000000');
1417
+ const backgroundColorLuminance = backgroundColor.luminosity();
1418
+ const foregroundColorLuminance = foregroundColor.luminosity();
1419
+ /**
1420
+ * Use the contrast ratio formula to determine the most eligible text color for the given background color.
1421
+ * It is possible tha the background color is dark based on the RGB value, but has opacity, which makes it light.
1422
+ * In such cases, the luminance value is used to determine the color. The solution is based on the following article:
1423
+ * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
1424
+ */
1425
+ const contrastRatio = backgroundColorLuminance > foregroundColorLuminance
1426
+ ? (foregroundColorLuminance + 0.05) / (backgroundColorLuminance + 0.05)
1427
+ : (backgroundColorLuminance + 0.05) / (foregroundColorLuminance + 0.05);
1428
+ /**
1429
+ * Check contrast ratio for WCAG 2.0 level AA compliance level for small text. If the
1430
+ * contrast ratio is less than 1 / 4.5, return the inverted foreground color.
1431
+ */
1432
+ if (contrastRatio >= 1 / 4.5) {
1433
+ return foregroundColor.negate().hex();
1434
+ }
1435
+ return foregroundColor.hex();
1419
1436
  }
1420
1437
  catch {
1421
1438
  return '#FFFFFF';