@pexip-engage-public/color-utils 1.0.4-canary-20231127133723 → 1.0.4
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 +1 -1
- package/dist/color.js +3 -3
- package/dist/color.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 +3 -3
package/CHANGELOG.md
CHANGED
package/dist/color.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { hex as convertHexTo, hsl as convertHslTo } 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 = convertHexTo.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 "#" + convertHslTo.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,EAAE,GAAG,IAAI,YAAY,EAAE,GAAG,IAAI,YAAY,EAAE,MAAM,eAAe,CAAC;AAGzE,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,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAEpC,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,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACrC,CAAC"}
|
package/dist/wcag.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { hex as convertHexTo } 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(convertHexTo.rgb(ensureSixDigitHex(bgColor)), convertHexTo.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.4
|
|
3
|
+
"version": "1.0.4",
|
|
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.2
|
|
37
|
+
"eslint-config-pexip-engage": "0.1.2"
|
|
38
38
|
},
|
|
39
39
|
"volta": {
|
|
40
40
|
"extends": "../../package.json"
|
package/src/color.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { hex as convertHexTo, hsl as convertHslTo } 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 = convertHexTo.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 "#" + convertHslTo.hex(hsl);
|
|
63
63
|
}
|
package/src/wcag.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { hex as convertHexTo } 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
|
+
convertHexTo.rgb(ensureSixDigitHex(bgColor)),
|
|
33
|
+
convertHexTo.rgb(ensureSixDigitHex(textColor)),
|
|
34
34
|
);
|
|
35
35
|
|
|
36
36
|
// TODO: improve me
|