@pexip-engage-public/color-utils 1.0.37 → 1.0.39
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.
- package/CHANGELOG.md +12 -0
- package/dist/color.js +1 -1
- package/dist/color.js.map +1 -1
- package/dist/color.test.js +28 -28
- package/dist/color.test.js.map +1 -1
- package/package.json +3 -3
- package/src/color.test.ts +28 -28
- package/src/color.ts +1 -1
package/CHANGELOG.md
CHANGED
package/dist/color.js
CHANGED
|
@@ -24,9 +24,9 @@ export function calculateColor({ accessibilityLevel = AccessibilityLevel.WCAG_AA
|
|
|
24
24
|
// If color is not WCAG_AAA or WCAG_AA calculate again
|
|
25
25
|
if (brandHexWCAG === AccessibilityLevel.WCAG_A) {
|
|
26
26
|
return calculateColor({
|
|
27
|
+
accessibilityLevel,
|
|
27
28
|
brandHex: darkenOrLightenShade(brandHex, textColor),
|
|
28
29
|
textColor,
|
|
29
|
-
accessibilityLevel,
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
return brandHex;
|
package/dist/color.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.js","sourceRoot":"","sources":["../src/color.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,eAAe,CAAC;AAGpC,OAAO,EAAE,kBAAkB,EAAE,2BAA2B,EAAE,MAAM,WAAW,CAAC;AAE5E,IAAK,UAGJ;AAHD,WAAK,UAAU;IACb,2BAAa,CAAA;IACb,2BAAa,CAAA;AACf,CAAC,EAHI,UAAU,KAAV,UAAU,QAGd;AAQD,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAE7B,gEAAgE;AAChE,2DAA2D;AAC3D,sDAAsD;AACtD,8FAA8F;AAC9F,0FAA0F;AAC1F,yFAAyF;AACzF,+FAA+F;AAE/F,MAAM,UAAU,cAAc,CAAC,EAC7B,kBAAkB,GAAG,kBAAkB,CAAC,OAAO,EAC/C,QAAQ,EACR,SAAS,GACF;IACP,IAAI,kBAAkB,KAAK,kBAAkB,CAAC,QAAQ,EAAE,CAAC;QACvD,OAAO,CAAC,IAAI,CAAC,6DAA6D,CAAC,CAAC;IAC9E,CAAC;IAED,MAAM,YAAY,GAAG,2BAA2B,CAAC;QAC/C,OAAO,EAAE,QAAQ;QACjB,SAAS;KACV,CAAC,CAAC;IAEH,sDAAsD;IACtD,IAAI,YAAY,KAAK,kBAAkB,CAAC,MAAM,EAAE,CAAC;QAC/C,OAAO,cAAc,CAAC;YACpB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ,EAAE,SAAS,CAAC;YACnD,SAAS;
|
|
1
|
+
{"version":3,"file":"color.js","sourceRoot":"","sources":["../src/color.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,eAAe,CAAC;AAGpC,OAAO,EAAE,kBAAkB,EAAE,2BAA2B,EAAE,MAAM,WAAW,CAAC;AAE5E,IAAK,UAGJ;AAHD,WAAK,UAAU;IACb,2BAAa,CAAA;IACb,2BAAa,CAAA;AACf,CAAC,EAHI,UAAU,KAAV,UAAU,QAGd;AAQD,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAE7B,gEAAgE;AAChE,2DAA2D;AAC3D,sDAAsD;AACtD,8FAA8F;AAC9F,0FAA0F;AAC1F,yFAAyF;AACzF,+FAA+F;AAE/F,MAAM,UAAU,cAAc,CAAC,EAC7B,kBAAkB,GAAG,kBAAkB,CAAC,OAAO,EAC/C,QAAQ,EACR,SAAS,GACF;IACP,IAAI,kBAAkB,KAAK,kBAAkB,CAAC,QAAQ,EAAE,CAAC;QACvD,OAAO,CAAC,IAAI,CAAC,6DAA6D,CAAC,CAAC;IAC9E,CAAC;IAED,MAAM,YAAY,GAAG,2BAA2B,CAAC;QAC/C,OAAO,EAAE,QAAQ;QACjB,SAAS;KACV,CAAC,CAAC;IAEH,sDAAsD;IACtD,IAAI,YAAY,KAAK,kBAAkB,CAAC,MAAM,EAAE,CAAC;QAC/C,OAAO,cAAc,CAAC;YACpB,kBAAkB;YAClB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ,EAAE,SAAS,CAAC;YACnD,SAAS;SACV,CAAC,CAAC;IACL,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,oCAAoC;AACpC,SAAS,oBAAoB,CAAC,KAAU,EAAE,YAAwB,UAAU,CAAC,KAAK;IAChF,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAEnC,GAAG,CAAC,CAAC,CAAC;QACJ,SAAS,KAAK,UAAU,CAAC,KAAK;YAC5B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,CAAC;YAC1C,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,CAAC,CAAC;IAE/C,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;AACpC,CAAC"}
|
package/dist/color.test.js
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
import { describe, expect, it } from "vitest";
|
|
2
2
|
import { calculateColor } from "./color.js";
|
|
3
3
|
const WCAG_AA = [
|
|
4
|
-
{
|
|
5
|
-
{
|
|
6
|
-
{
|
|
7
|
-
{
|
|
8
|
-
{
|
|
9
|
-
{
|
|
10
|
-
{
|
|
11
|
-
{
|
|
12
|
-
{
|
|
13
|
-
{
|
|
14
|
-
{
|
|
15
|
-
{
|
|
16
|
-
{
|
|
17
|
-
{
|
|
18
|
-
{
|
|
19
|
-
{
|
|
20
|
-
{
|
|
4
|
+
{ expected: "#000000", hex: "#000000", isAA: true },
|
|
5
|
+
{ expected: "#00008F", hex: "#00008F", isAA: true },
|
|
6
|
+
{ expected: "#5C5C5B", hex: "#5C5C5B", isAA: true },
|
|
7
|
+
{ expected: "#7843ab", hex: "#7843ab", isAA: true },
|
|
8
|
+
{ expected: "#ce0303", hex: "#ce0303", isAA: true },
|
|
9
|
+
{ expected: "#07488b", hex: "#07488b", isAA: true },
|
|
10
|
+
{ expected: "#000000", hex: "#000000", isAA: true },
|
|
11
|
+
{ expected: "#e20000", hex: "#e20000", isAA: true },
|
|
12
|
+
{ expected: "#d42e41", hex: "#d42e41", isAA: true },
|
|
13
|
+
{ expected: "#870930", hex: "#870930", isAA: true },
|
|
14
|
+
{ expected: "#080070", hex: "#080070", isAA: true },
|
|
15
|
+
{ expected: "#3a5c76", hex: "#3a5c76", isAA: true },
|
|
16
|
+
{ expected: "#d71e3c", hex: "#d71e3c", isAA: true },
|
|
17
|
+
{ expected: "#9e1c12", hex: "#9e1c12", isAA: true },
|
|
18
|
+
{ expected: "#007279", hex: "#007279", isAA: true },
|
|
19
|
+
{ expected: "#ae0247", hex: "#ae0247", isAA: true },
|
|
20
|
+
{ expected: "#003D78", hex: "#003D78", isAA: true },
|
|
21
21
|
];
|
|
22
22
|
const WCAG_A = [
|
|
23
|
-
{ hex: "#21b7c5", isAA: false
|
|
24
|
-
{ hex: "#51b0a8", isAA: false
|
|
25
|
-
{ hex: "#2898cc", isAA: false
|
|
26
|
-
{ hex: "#1DFF76", isAA: false
|
|
27
|
-
{ hex: "#08c", isAA: false
|
|
28
|
-
{ hex: "#00b287", isAA: false
|
|
29
|
-
{ hex: "#79BB2B", isAA: false
|
|
30
|
-
{ hex: "#fbc7ab", isAA: false
|
|
31
|
-
{ hex: "#8dc63f", isAA: false
|
|
32
|
-
{ hex: "#a9937a", isAA: false
|
|
33
|
-
{ hex: "#008dcd", isAA: false
|
|
23
|
+
{ expected: "#18828C", hex: "#21b7c5", isAA: false },
|
|
24
|
+
{ expected: "#397F7C", hex: "#51b0a8", isAA: false }, // TODO: double check me (why not 397F7B?)
|
|
25
|
+
{ expected: "#217CA6", hex: "#2898cc", isAA: false },
|
|
26
|
+
{ expected: "#008535", hex: "#1DFF76", isAA: false },
|
|
27
|
+
{ expected: "#007AB8", hex: "#08c", isAA: false },
|
|
28
|
+
{ expected: "#008566", hex: "#00b287", isAA: false },
|
|
29
|
+
{ expected: "#52811D", hex: "#79BB2B", isAA: false },
|
|
30
|
+
{ expected: "#CD4A04", hex: "#fbc7ab", isAA: false },
|
|
31
|
+
{ expected: "#597E26", hex: "#8dc63f", isAA: false },
|
|
32
|
+
{ expected: "#887359", hex: "#a9937a", isAA: false },
|
|
33
|
+
{ expected: "#007DB8", hex: "#008dcd", isAA: false },
|
|
34
34
|
];
|
|
35
35
|
describe("calculateColor", () => {
|
|
36
36
|
it.each(WCAG_AA)("does not convert WCAG_AA hex codes", ({ hex: brandHex }) => {
|
package/dist/color.test.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.test.js","sourceRoot":"","sources":["../src/color.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE
|
|
1
|
+
{"version":3,"file":"color.test.js","sourceRoot":"","sources":["../src/color.test.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pexip-engage-public/color-utils",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.39",
|
|
4
4
|
"description": "",
|
|
5
5
|
"homepage": "https://github.com/skedify/frontend-mono/tree/develop/packages/color-utils#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@types/color-convert": "^2.0.4",
|
|
35
|
-
"vitest": "^3.
|
|
35
|
+
"vitest": "^3.2.3",
|
|
36
36
|
"@pexip-engage/tsconfig": "0.1.1",
|
|
37
|
-
"eslint-config-pexip-engage": "1.1.
|
|
37
|
+
"eslint-config-pexip-engage": "1.1.22"
|
|
38
38
|
},
|
|
39
39
|
"volta": {
|
|
40
40
|
"extends": "../../package.json"
|
package/src/color.test.ts
CHANGED
|
@@ -3,37 +3,37 @@ import { describe, expect, it } from "vitest";
|
|
|
3
3
|
import { calculateColor } from "./color.js";
|
|
4
4
|
|
|
5
5
|
const WCAG_AA = [
|
|
6
|
-
{
|
|
7
|
-
{
|
|
8
|
-
{
|
|
9
|
-
{
|
|
10
|
-
{
|
|
11
|
-
{
|
|
12
|
-
{
|
|
13
|
-
{
|
|
14
|
-
{
|
|
15
|
-
{
|
|
16
|
-
{
|
|
17
|
-
{
|
|
18
|
-
{
|
|
19
|
-
{
|
|
20
|
-
{
|
|
21
|
-
{
|
|
22
|
-
{
|
|
6
|
+
{ expected: "#000000", hex: "#000000", isAA: true },
|
|
7
|
+
{ expected: "#00008F", hex: "#00008F", isAA: true },
|
|
8
|
+
{ expected: "#5C5C5B", hex: "#5C5C5B", isAA: true },
|
|
9
|
+
{ expected: "#7843ab", hex: "#7843ab", isAA: true },
|
|
10
|
+
{ expected: "#ce0303", hex: "#ce0303", isAA: true },
|
|
11
|
+
{ expected: "#07488b", hex: "#07488b", isAA: true },
|
|
12
|
+
{ expected: "#000000", hex: "#000000", isAA: true },
|
|
13
|
+
{ expected: "#e20000", hex: "#e20000", isAA: true },
|
|
14
|
+
{ expected: "#d42e41", hex: "#d42e41", isAA: true },
|
|
15
|
+
{ expected: "#870930", hex: "#870930", isAA: true },
|
|
16
|
+
{ expected: "#080070", hex: "#080070", isAA: true },
|
|
17
|
+
{ expected: "#3a5c76", hex: "#3a5c76", isAA: true },
|
|
18
|
+
{ expected: "#d71e3c", hex: "#d71e3c", isAA: true },
|
|
19
|
+
{ expected: "#9e1c12", hex: "#9e1c12", isAA: true },
|
|
20
|
+
{ expected: "#007279", hex: "#007279", isAA: true },
|
|
21
|
+
{ expected: "#ae0247", hex: "#ae0247", isAA: true },
|
|
22
|
+
{ expected: "#003D78", hex: "#003D78", isAA: true },
|
|
23
23
|
];
|
|
24
24
|
|
|
25
25
|
const WCAG_A = [
|
|
26
|
-
{ hex: "#21b7c5", isAA: false
|
|
27
|
-
{ hex: "#51b0a8", isAA: false
|
|
28
|
-
{ hex: "#2898cc", isAA: false
|
|
29
|
-
{ hex: "#1DFF76", isAA: false
|
|
30
|
-
{ hex: "#08c", isAA: false
|
|
31
|
-
{ hex: "#00b287", isAA: false
|
|
32
|
-
{ hex: "#79BB2B", isAA: false
|
|
33
|
-
{ hex: "#fbc7ab", isAA: false
|
|
34
|
-
{ hex: "#8dc63f", isAA: false
|
|
35
|
-
{ hex: "#a9937a", isAA: false
|
|
36
|
-
{ hex: "#008dcd", isAA: false
|
|
26
|
+
{ expected: "#18828C", hex: "#21b7c5", isAA: false },
|
|
27
|
+
{ expected: "#397F7C", hex: "#51b0a8", isAA: false }, // TODO: double check me (why not 397F7B?)
|
|
28
|
+
{ expected: "#217CA6", hex: "#2898cc", isAA: false },
|
|
29
|
+
{ expected: "#008535", hex: "#1DFF76", isAA: false },
|
|
30
|
+
{ expected: "#007AB8", hex: "#08c", isAA: false },
|
|
31
|
+
{ expected: "#008566", hex: "#00b287", isAA: false },
|
|
32
|
+
{ expected: "#52811D", hex: "#79BB2B", isAA: false },
|
|
33
|
+
{ expected: "#CD4A04", hex: "#fbc7ab", isAA: false },
|
|
34
|
+
{ expected: "#597E26", hex: "#8dc63f", isAA: false },
|
|
35
|
+
{ expected: "#887359", hex: "#a9937a", isAA: false },
|
|
36
|
+
{ expected: "#007DB8", hex: "#008dcd", isAA: false },
|
|
37
37
|
];
|
|
38
38
|
|
|
39
39
|
describe("calculateColor", () => {
|
package/src/color.ts
CHANGED
|
@@ -41,9 +41,9 @@ export function calculateColor({
|
|
|
41
41
|
// If color is not WCAG_AAA or WCAG_AA calculate again
|
|
42
42
|
if (brandHexWCAG === AccessibilityLevel.WCAG_A) {
|
|
43
43
|
return calculateColor({
|
|
44
|
+
accessibilityLevel,
|
|
44
45
|
brandHex: darkenOrLightenShade(brandHex, textColor),
|
|
45
46
|
textColor,
|
|
46
|
-
accessibilityLevel,
|
|
47
47
|
});
|
|
48
48
|
}
|
|
49
49
|
|