Skip to content

Commit f10ff0a

Browse files
torres-engineertorres-engineer
committed
adding tests
1 parent 2cf966a commit f10ff0a

File tree

3 files changed

+183
-31
lines changed

3 files changed

+183
-31
lines changed

‎index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function plugin(options = {}) {
3333
case "function": return `${i.value}(${i.nodes.filter(i => i.type !== "div").map(i => i.value).join("")})`;
3434
}
3535
});
36-
decl.value = gettxt(params[0], "txt", `${getFontSizePX(params[1] ?? fontSize, curM)}px`, params[2] ?? fontWeight, params[3] ?? usage);
36+
decl.value = gettxt(params[0], "txt", getFontSizePX(params[1] ?? fontSize, curM), params[2] ?? fontWeight, params[3] ?? usage);
3737
}
3838
}
3939
}

‎index.test.js

+112-8
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,118 @@ async function run(input, output, opts = { }) {
1111

1212
// Write tests here
1313

14-
it("finds the best text color for the background-color: hsl(192deg, 62%, 94%)", async () => {
14+
it("Use text as a decorative element for the background-color: hsl(192deg, 62%, 6%)", async () => {
1515
await run(`p {
16-
background-color: hsl(192 62% 94%);
17-
color: a11y-txt(hsl(192 62% 94%), 1.75em, 400);
18-
font-size: 1.75em;
16+
background-color: hsl(192 62% 6%);
17+
color: a11y-txt(hsl(192 62% 6%), 12px, 100, Decorative);
18+
font-size: 12px;
19+
font-weight: 100;
1920
}`, `p {
20-
background-color: hsl(192 62% 94%);
21-
color: hsl(192.63157894736838 61.290322580645174% 17%);
22-
font-size: 1.75em;
23-
}`, {});
21+
background-color: hsl(192 62% 6%);
22+
color: hsl(193 61% 24%);
23+
font-size: 12px;
24+
font-weight: 100;
25+
}`);
26+
});
27+
28+
it("Creates a good text color to use on copyright/by-line text for the background-color: hsl(192deg, 62%, 6%)", async () => {
29+
await run(`p {
30+
background-color: hsl(192 62% 6%);
31+
color: a11y-txt(hsl(192 62% 6%), 14px, 300, Spot);
32+
font-size: 14px;
33+
font-weight: 300;
34+
}`, `p {
35+
background-color: hsl(192 62% 6%);
36+
color: hsl(193 61% 36%);
37+
font-size: 14px;
38+
font-weight: 300;
39+
}`);
40+
});
41+
42+
it("Use text as a decorative element for the background-color: hsl(192deg, 62%, 6%)", async () => {
43+
await run(`p {
44+
background-color: hsl(192 62% 6%);
45+
color: a11y-txt(hsl(192 62% 6%), 96px, 900, Decorative);
46+
font-size: 96px;
47+
font-weight: 900;
48+
}`, `p {
49+
background-color: hsl(192 62% 6%);
50+
color: hsl(193 61% 32%);
51+
font-size: 96px;
52+
font-weight: 900;
53+
}`);
54+
});
55+
56+
it("Creates a good text color to use on copyright/by-line text for the background-color: hsl(192deg, 62%, 6%)", async () => {
57+
await run(`p {
58+
background-color: hsl(192 62% 6%);
59+
color: a11y-txt(hsl(192 62% 6%), 96px, 900, Spot);
60+
font-size: 96px;
61+
font-weight: 900;
62+
}`, `p {
63+
background-color: hsl(192 62% 6%);
64+
color: hsl(193 61% 36%);
65+
font-size: 96px;
66+
font-weight: 900;
67+
}`);
68+
});
69+
70+
//
71+
//
72+
//
73+
74+
it("", async () => {
75+
await run(`p {
76+
background-color: hsl(192 62% 6%);
77+
color: a11y-txt(hsl(192 62% 6%), 96px, 200, Fluent);
78+
font-size: 96px;
79+
font-weight: 200;
80+
}`, `p {
81+
background-color: hsl(192 62% 6%);
82+
color: hsl(193 61% 60%);
83+
font-size: 96px;
84+
font-weight: 200;
85+
}`);
86+
});
87+
88+
it("", async () => {
89+
await run(`p {
90+
background-color: hsl(192 62% 6%);
91+
color: a11y-txt(hsl(192 62% 6%), 28px, 200, Fluent);
92+
font-size: 28px;
93+
font-weight: 200;
94+
}`, `p {
95+
background-color: hsl(192 62% 6%);
96+
color: hsl(193 61% 88%);
97+
font-size: 28px;
98+
font-weight: 200;
99+
}`);
100+
});
101+
102+
it("", async () => {
103+
await run(`p {
104+
background-color: hsl(192 62% 6%);
105+
color: a11y-txt(hsl(192 62% 6%), 42px, 900, Fluent);
106+
font-size: 42px;
107+
font-weight: 900;
108+
}`, `p {
109+
background-color: hsl(192 62% 6%);
110+
color: hsl(193 61% 44%);
111+
font-size: 42px;
112+
font-weight: 900;
113+
}`);
114+
});
115+
116+
it("", async () => {
117+
await run(`p {
118+
background-color: hsl(192 62% 6%);
119+
color: a11y-txt(hsl(192 62% 6%), 16px, 800, Fluent);
120+
font-size: 16px;
121+
font-weight: 800;
122+
}`, `p {
123+
background-color: hsl(192 62% 6%);
124+
color: hsl(193 61% 72%);
125+
font-size: 16px;
126+
font-weight: 800;
127+
}`);
24128
});

‎tools.mjs

+70-22
Original file line numberDiff line numberDiff line change
@@ -53,31 +53,73 @@ const nonTextScoreG = fontScoreGmin[4][2]; // level to break to non-text only
5353
// 999 = too low. 777 = non-text and spot text only
5454

5555
const byFontSize = [
56-
['px',100,200,300,400,500,600,700,800,900],
57-
[10, 999,999,999,999,999,999,999,999,999],
58-
[12, 999,999,999,777,777,777,777,999,999],
59-
[14, 999,999,777,100,100,90, 75, 999,999],
60-
[15, 999,999,777,100,90, 75, 70, 999,999],
61-
[16, 999,999,777,90, 75, 70, 60, 60, 999],
62-
[18, 999,777,100,75, 70, 60, 55, 55, 55 ],
63-
[21, 999,777,90, 70, 60, 55, 50, 50, 50 ],
64-
[24, 999,777,75, 60, 55, 50, 45, 45, 45 ],
65-
[28, 999,100,70, 55, 50, 45, 43, 43, 43 ],
66-
[32, 999,90, 65, 50, 45, 43, 40, 40, 40 ],
67-
[36, 999,75, 60, 45, 43, 40, 38, 38, 38 ],
68-
[42, 100,70, 55, 43, 40, 38, 35, 35, 35 ],
69-
[48, 90, 60, 50, 40, 38, 35, 33, 33, 33 ],
70-
[60, 75, 55, 45, 38, 35, 33, 30, 30, 30 ],
71-
[72, 60, 50, 40, 35, 33, 30, 30, 30, 30 ],
72-
[96, 50, 45, 35, 33, 30, 30, 30, 30, 30 ],
56+
['px', 100, 200, 300, 400, 500, 600, 700, 800, 900 ],
57+
[10, { Lc: 999 }, { Lc: 999 }, { Lc: 999 }, { Lc: 999 }, { Lc: 999 }, { Lc: 999 }, { Lc: 999 }, { Lc: 999 }, { Lc: 999 } ],
58+
[12, { Lc: 999 }, { Lc: 999 }, { Lc: 999 }, { Lc: 777 }, { Lc: 777 }, { Lc: 777 }, { Lc: 777 }, { Lc: 999 }, { Lc: 999 } ],
59+
[14, { Lc: 999 }, { Lc: 999 }, { Lc: 777 }, { Lc: 100 }, { Lc: 100 }, { Lc: 90 }, { Lc: 75 }, { Lc: 999 }, { Lc: 999 } ],
60+
[15, { Lc: 999 }, { Lc: 999 }, { Lc: 777 }, { Lc: 100 }, { Lc: 90 }, { Lc: 75 }, { Lc: 70 }, { Lc: 999 }, { Lc: 999 } ],
61+
[16, { Lc: 999 }, { Lc: 999 }, { Lc: 777 }, { Lc: 90 }, { Lc: 75 }, { Lc: 70 }, { Lc: 60 }, { Lc: 60 }, { Lc: 999 } ],
62+
[18, { Lc: 999 }, { Lc: 777 }, { Lc: 100 }, { Lc: 75 }, { Lc: 70 }, { Lc: 60 }, { Lc: 55 }, { Lc: 55 }, { Lc: 55 } ],
63+
[21, { Lc: 999 }, { Lc: 777 }, { Lc: 90 }, { Lc: 70 }, { Lc: 60 }, { Lc: 55 }, { Lc: 50 }, { Lc: 50 }, { Lc: 50 } ],
64+
[24, { Lc: 999 }, { Lc: 777 }, { Lc: 75 }, { Lc: 60 }, { Lc: 55 }, { Lc: 50 }, { Lc: 45 }, { Lc: 45 }, { Lc: 45 } ],
65+
[28, { Lc: 999 }, { Lc: 100 }, { Lc: 70 }, { Lc: 55 }, { Lc: 50 }, { Lc: 45 }, { Lc: 43 }, { Lc: 43 }, { Lc: 43 } ],
66+
[32, { Lc: 999 }, { Lc: 90 }, { Lc: 65 }, { Lc: 50 }, { Lc: 45 }, { Lc: 43 }, { Lc: 40 }, { Lc: 40 }, { Lc: 40 } ],
67+
[36, { Lc: 999 }, { Lc: 75 }, { Lc: 60 }, { Lc: 45 }, { Lc: 43 }, { Lc: 40 }, { Lc: 38 }, { Lc: 38 }, { Lc: 38 } ],
68+
[42, { Lc: 100 }, { Lc: 70 }, { Lc: 55 }, { Lc: 43 }, { Lc: 40 }, { Lc: 38 }, { Lc: 35 }, { Lc: 35 }, { Lc: 35 } ],
69+
[48, { Lc: 90 }, { Lc: 60 }, { Lc: 50 }, { Lc: 40 }, { Lc: 38 }, { Lc: 35 }, { Lc: 33 }, { Lc: 33 }, { Lc: 33 } ],
70+
[60, { Lc: 75 }, { Lc: 55 }, { Lc: 45 }, { Lc: 38 }, { Lc: 35 }, { Lc: 33 }, { Lc: 30 }, { Lc: 30 }, { Lc: 30 } ],
71+
[72, { Lc: 60 }, { Lc: 50 }, { Lc: 40 }, { Lc: 35 }, { Lc: 33 }, { Lc: 30 }, { Lc: 30 }, { Lc: 30 }, { Lc: 30 } ],
72+
[96, { Lc: 50 }, { Lc: 45 }, { Lc: 35 }, { Lc: 33 }, { Lc: 30 }, { Lc: 30 }, { Lc: 30 }, { Lc: 30 }, { Lc: 30 } ],
7373
];
7474

7575
export function gettxt(color, knownType, fs, fw, usage) {
76+
if (fw <= 100) console.warn("Avoid using font-weight 100");
77+
7678
const [fontWeights, ...rest] = byFontSize;
7779
const closestFontSize = rest.reduce((x, y) => Math.abs(y[0] - fs) < Math.abs(x[0] - fs) ? y : x);
78-
const Lc = closestFontSize[fontWeights.indexOf(fw)];
79-
const target = fontScoreGmin.reduce((x, y) => Math.abs(y[0] - Lc) < Math.abs(x[0] - Lc) ? y : x)[usage];
80+
let Lc = closestFontSize[fontWeights.indexOf(+fw)].Lc;
81+
82+
switch (usage.toUpperCase()) {
83+
case "DECORATIVE": usage = 1; break;
84+
case "SPOT": usage = 2; break;
85+
case "SUBFLUENT": usage = 3; break;
86+
case "FLUENT": usage = 4; break;
87+
case "BODYTEXT": usage = 5; break;
88+
case "MAX": usage = 6; break;
89+
}
8090

91+
if (Lc === 999) {
92+
if (usage !== 1) {
93+
return console.log(
94+
`Got font-size = ${fs}px and font-weight = ${fw}.`,
95+
"Too low. Prohibited Except for Decorative Purposes. Maybe you forgot to make the usage = Decorative."
96+
);
97+
}
98+
Lc = minScoreG;
99+
} else if (Lc === 777) {
100+
if (usage !== 2) {
101+
return console.log(
102+
`Got font-size = ${fs}px and font-weight = ${fw}.`,
103+
"Just for non-text and spot text only. Maybe you forgot to make the usage = Spot. If not try to increase the font size or font weight."
104+
);
105+
}
106+
Lc = nonTextScoreG;
107+
} else if (Lc < nonTextScoreG && usage > 3) {
108+
return console.log(
109+
`Got font-size = ${fs}px and font-weight = ${fw}.`,
110+
"Contrast too low for text. Try decreasing the font size or the font weight."
111+
);
112+
} else if (
113+
fw >= 300 && fw <= 700 &&
114+
fs >= 14 && fs <= 36 &&
115+
Lc > nonTextScoreG &&
116+
usage > 4
117+
) {
118+
Lc += 15;
119+
}
120+
121+
const target = fontScoreGmin.reduce((x, y) => Math.abs(y[0] - Lc) < Math.abs(x[0] - Lc) ? y : x)[usage];
122+
81123
const { h, s } = toHSL(color);
82124

83125
const colors = [];
@@ -86,8 +128,8 @@ export function gettxt(color, knownType, fs, fw, usage) {
86128

87129
let contrast;
88130
switch (knownType) {
89-
case "txt": contrast = calcAPCA(newColor, color); break;
90-
case "bg": contrast = calcAPCA(color, newColor); break;
131+
case "bg": contrast = calcAPCA(newColor, color); break;
132+
case "txt": contrast = calcAPCA(color, newColor); break;
91133
}
92134

93135
colors.push({
@@ -98,6 +140,7 @@ export function gettxt(color, knownType, fs, fw, usage) {
98140

99141
const { color: contrast } = colors.reduce((x, y) => Math.abs(Math.abs(y.contrast) - target) < Math.abs(Math.abs(x.contrast) - target) ? y : x);
100142

143+
/*
101144
const colors3 = [];
102145
for (let i = 0; i <= 100; i++) {
103146
const newColor = toHSLString({h: 0, s: 0, l: i});
@@ -123,6 +166,7 @@ export function gettxt(color, knownType, fs, fw, usage) {
123166
contrast2 = toHSLString(toHSL(contrast2));
124167
125168
//console.log(target, contrast, contrast2, contrast3);
169+
*/
126170

127171
return contrast;
128172
}
@@ -153,7 +197,11 @@ function toHSL(color) {
153197
}
154198
})() * 60;
155199

156-
return {h, s: s * 100 + "%", l: l * 100 + "%"};
200+
return {
201+
h: Math.round(h),
202+
s: Math.round(s * 100) + "%",
203+
l: Math.round(l * 100) + "%",
204+
};
157205
}
158206

159207
function toHSLString({h, s, l}) {

0 commit comments

Comments
 (0)