@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
|
-
|
12
|
-
|
13
|
-
const
|
14
|
-
const
|
15
|
-
|
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,
|
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
|
-
|
1415
|
-
|
1416
|
-
const
|
1417
|
-
const
|
1418
|
-
|
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';
|