@pexip-engage-public/color-utils 1.0.4 → 1.0.6
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 +13 -0
- 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 +3 -3
- package/src/color.ts +3 -3
- package/src/wcag.ts +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @pexip-engage-public/color-utils
|
|
2
2
|
|
|
3
|
+
## 1.0.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- d19dd80: chore(deps): update all non-major dependencies
|
|
8
|
+
- bb82536: fix(deps): update all non-major dependencies
|
|
9
|
+
|
|
10
|
+
## 1.0.5
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- 61b3be3: chore(deps): update all non-major dependencies
|
|
15
|
+
|
|
3
16
|
## 1.0.4
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
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/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.6",
|
|
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.3",
|
|
35
|
-
"vitest": "^
|
|
35
|
+
"vitest": "^1.1.3",
|
|
36
36
|
"@pexip-engage/tsconfig": "0.1.1",
|
|
37
|
-
"eslint-config-pexip-engage": "0.1.
|
|
37
|
+
"eslint-config-pexip-engage": "0.1.5"
|
|
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
|