@pexip-engage-public/color-utils 1.0.3 → 1.0.4-canary-20231127133723
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 +6 -0
- package/dist/color.js +3 -3
- package/dist/color.js.map +1 -1
- package/dist/color.test.js +1 -1
- package/dist/color.test.js.map +1 -1
- package/dist/hexValidators.js.map +1 -1
- package/dist/wcag.js +2 -2
- package/dist/wcag.js.map +1 -1
- package/package.json +2 -2
- package/src/color.ts +3 -3
- package/src/wcag.ts +7 -7
package/CHANGELOG.md
CHANGED
package/dist/color.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import convert from "color-convert";
|
|
2
2
|
import { AccessibilityLevel, calculateAccessibilityLevel } from "./wcag.js";
|
|
3
3
|
var TextColors;
|
|
4
4
|
(function (TextColors) {
|
|
@@ -33,11 +33,11 @@ export function calculateColor({ accessibilityLevel = AccessibilityLevel.WCAG_AA
|
|
|
33
33
|
}
|
|
34
34
|
// Make brand shade darker / lighter
|
|
35
35
|
function darkenOrLightenShade(color, textColor = TextColors.WHITE) {
|
|
36
|
-
const hsl =
|
|
36
|
+
const hsl = convert.hex.hsl(color);
|
|
37
37
|
hsl[2] =
|
|
38
38
|
textColor === TextColors.WHITE
|
|
39
39
|
? Math.max(hsl[2] - SHADE_SHIFT_AMOUNT, 0)
|
|
40
40
|
: Math.min(hsl[2] + SHADE_SHIFT_AMOUNT, 1);
|
|
41
|
-
return "#" +
|
|
41
|
+
return "#" + convert.hsl.hex(hsl);
|
|
42
42
|
}
|
|
43
43
|
//# sourceMappingURL=color.js.map
|
package/dist/color.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.js","sourceRoot":"","sources":["../src/color.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
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;YACT,kBAAkB;SACnB,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,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACpC,CAAC"}
|
package/dist/color.test.js
CHANGED
|
@@ -21,7 +21,7 @@ const WCAG_AA = [
|
|
|
21
21
|
];
|
|
22
22
|
const WCAG_A = [
|
|
23
23
|
{ hex: "#21b7c5", isAA: false, expected: "#18828C" },
|
|
24
|
-
{ hex: "#51b0a8", isAA: false, expected: "#397F7C" },
|
|
24
|
+
{ hex: "#51b0a8", isAA: false, expected: "#397F7C" }, // TODO: double check me (why not 397F7B?)
|
|
25
25
|
{ hex: "#2898cc", isAA: false, expected: "#217CA6" },
|
|
26
26
|
{ hex: "#1DFF76", isAA: false, expected: "#008535" },
|
|
27
27
|
{ hex: "#08c", isAA: false, expected: "#007AB8" },
|
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;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE;CACpD,CAAC;AAEF,MAAM,MAAM,GAAG;IACb,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE;IACpD,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE;
|
|
1
|
+
{"version":3,"file":"color.test.js","sourceRoot":"","sources":["../src/color.test.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hexValidators.js","sourceRoot":"","sources":["../src/hexValidators.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB,CAAC,GAAW;IAC1C,OAAO,wBAAwB,CAAC,GAAG,CAAC,IAAI,0BAA0B,CAAC,GAAG,CAAC,CAAC;AAC1E,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,GAAW;IAClD,OAAO,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,0BAA0B,CAAC,GAAW;IACpD,OAAO,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,GAAW;IAC3C,SAAS,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,0BAA0B,CAAC,CAAC;IAEnE,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAEzC,IAAI,wBAAwB,CAAC,GAAG,CAAC,EAAE;
|
|
1
|
+
{"version":3,"file":"hexValidators.js","sourceRoot":"","sources":["../src/hexValidators.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB,CAAC,GAAW;IAC1C,OAAO,wBAAwB,CAAC,GAAG,CAAC,IAAI,0BAA0B,CAAC,GAAG,CAAC,CAAC;AAC1E,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,GAAW;IAClD,OAAO,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,0BAA0B,CAAC,GAAW;IACpD,OAAO,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,GAAW;IAC3C,SAAS,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,0BAA0B,CAAC,CAAC;IAEnE,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAEzC,IAAI,wBAAwB,CAAC,GAAG,CAAC,EAAE,CAAC;QAClC,OAAO,IAAI,WAAW,EAAE,CAAC;IAC3B,CAAC;IAED,OAAO,CACL,GAAG;QACH,WAAW,CAAC,CAAC,CAAC;QACd,WAAW,CAAC,CAAC,CAAC;QACd,WAAW,CAAC,CAAC,CAAC;QACd,WAAW,CAAC,CAAC,CAAC;QACd,WAAW,CAAC,CAAC,CAAC;QACd,WAAW,CAAC,CAAC,CAAC,CACf,CAAC;AACJ,CAAC;AAID,MAAM,UAAU,SAAS,CAAC,KAAc,EAAE,OAAgB;IACxD,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;QACrC,MAAM,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,qBAAqB,OAAO,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACzF,CAAC;AACH,CAAC"}
|
package/dist/wcag.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import convert from "color-convert";
|
|
2
2
|
import { ensureSixDigitHex } from "./hexValidators.js";
|
|
3
3
|
const WCAG_RATIO_AA_LG = 3.0;
|
|
4
4
|
const WCAG_RATIO_AA_SM = 4.5;
|
|
@@ -15,7 +15,7 @@ export var AccessibilityLevel;
|
|
|
15
15
|
})(AccessibilityLevel || (AccessibilityLevel = {}));
|
|
16
16
|
export function calculateAccessibilityLevel({ bgColor, fontSize = 14, textColor = "#FFFFFF", // Text color depends on the theme. Skedify only has light for now.
|
|
17
17
|
}) {
|
|
18
|
-
const contrastRatio = calculateContrastRatio(
|
|
18
|
+
const contrastRatio = calculateContrastRatio(convert.hex.rgb(ensureSixDigitHex(bgColor)), convert.hex.rgb(ensureSixDigitHex(textColor)));
|
|
19
19
|
// TODO: improve me
|
|
20
20
|
if (fontSize >= WCAG_FONT_CUTOFF) {
|
|
21
21
|
return contrastRatio >= WCAG_RATIO_AAA_LG
|
package/dist/wcag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wcag.js","sourceRoot":"","sources":["../src/wcag.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"wcag.js","sourceRoot":"","sources":["../src/wcag.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.4-canary-20231127133723",
|
|
4
4
|
"description": "",
|
|
5
5
|
"homepage": "https://github.com/skedify/frontend-mono/tree/develop/packages/color-utils#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@types/color-convert": "^2.0.3",
|
|
35
35
|
"vitest": "^0.34.6",
|
|
36
36
|
"@pexip-engage/tsconfig": "0.1.1",
|
|
37
|
-
"eslint-config-pexip-engage": "0.1.
|
|
37
|
+
"eslint-config-pexip-engage": "0.1.2-canary-20231127133723"
|
|
38
38
|
},
|
|
39
39
|
"volta": {
|
|
40
40
|
"extends": "../../package.json"
|
package/src/color.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import convert from "color-convert";
|
|
2
2
|
import type { HEX } from "color-convert/conversions.js";
|
|
3
3
|
|
|
4
4
|
import { AccessibilityLevel, calculateAccessibilityLevel } from "./wcag.js";
|
|
@@ -52,12 +52,12 @@ export function calculateColor({
|
|
|
52
52
|
|
|
53
53
|
// Make brand shade darker / lighter
|
|
54
54
|
function darkenOrLightenShade(color: HEX, textColor: TextColors = TextColors.WHITE): HEX {
|
|
55
|
-
const hsl =
|
|
55
|
+
const hsl = convert.hex.hsl(color);
|
|
56
56
|
|
|
57
57
|
hsl[2] =
|
|
58
58
|
textColor === TextColors.WHITE
|
|
59
59
|
? Math.max(hsl[2] - SHADE_SHIFT_AMOUNT, 0)
|
|
60
60
|
: Math.min(hsl[2] + SHADE_SHIFT_AMOUNT, 1);
|
|
61
61
|
|
|
62
|
-
return "#" +
|
|
62
|
+
return "#" + convert.hsl.hex(hsl);
|
|
63
63
|
}
|
package/src/wcag.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import convert from "color-convert";
|
|
2
2
|
import type { RGB } from "color-convert/conversions.js";
|
|
3
3
|
|
|
4
4
|
import { ensureSixDigitHex } from "./hexValidators.js";
|
|
@@ -29,8 +29,8 @@ export function calculateAccessibilityLevel({
|
|
|
29
29
|
textColor = "#FFFFFF", // Text color depends on the theme. Skedify only has light for now.
|
|
30
30
|
}: Params): AccessibilityLevel {
|
|
31
31
|
const contrastRatio = calculateContrastRatio(
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
convert.hex.rgb(ensureSixDigitHex(bgColor)),
|
|
33
|
+
convert.hex.rgb(ensureSixDigitHex(textColor)),
|
|
34
34
|
);
|
|
35
35
|
|
|
36
36
|
// TODO: improve me
|
|
@@ -38,15 +38,15 @@ export function calculateAccessibilityLevel({
|
|
|
38
38
|
return contrastRatio >= WCAG_RATIO_AAA_LG
|
|
39
39
|
? AccessibilityLevel.WCAG_AAA
|
|
40
40
|
: contrastRatio >= WCAG_RATIO_AA_LG
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
? AccessibilityLevel.WCAG_AA
|
|
42
|
+
: AccessibilityLevel.WCAG_A;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
return contrastRatio >= WCAG_RATIO_AAA_SM
|
|
46
46
|
? AccessibilityLevel.WCAG_AAA
|
|
47
47
|
: contrastRatio >= WCAG_RATIO_AA_SM
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
? AccessibilityLevel.WCAG_AA
|
|
49
|
+
: AccessibilityLevel.WCAG_A;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
// TODO: formula / documentation?
|