ComputerSurge/shields
3
0
Fork 0
Code Pull Requests 1 Activity

Use black font when background color is too light (#5467)

Browse Source 
* Use black font when background color is too light

* Tweak dark color

* Extract magic brightness numbers to constants

* Fix snapshot tests

* Switch threshold to 0.69
This commit is contained in:
Pierre-Yves B
2020-09-07 19:07:28 +02:00
committed by GitHub
parent 38322e1412
commit 471f3f4ad1
9 changed files with 114 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
__snapshots__/make-badge.spec.js
View File

@@ -125,3 +125,11 @@ exports['The badge generator "social" template badge generation should match sna
exports['The badge generator badges with logos should always produce the same badge badge with logo 1'] = `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113" height="20" role="img" aria-label="label: message"><title>label: message</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="113" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="54" height="20" fill="#555"/><rect x="54" width="59" height="20" fill="#4c1"/><rect width="113" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu"/><text aria-hidden="true" x="365" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="365" y="140" transform="scale(.1)" fill="#fff" textLength="270">label</text><text aria-hidden="true" x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="825" y="140" transform="scale(.1)" fill="#fff" textLength="490">message</text></g></svg>
`
exports['The badge generator text colors should use black text when the label color is light 1'] = `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="20" role="img" aria-label="cactus: grown"><title>cactus: grown</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="90" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="20" fill="#f3f3f3"/><rect x="45" width="45" height="20" fill="#000"/><rect width="90" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="235" y="150" fill="#ccc" fill-opacity=".3" transform="scale(.1)" textLength="350">cactus</text><text x="235" y="140" transform="scale(.1)" fill="#333" textLength="350">cactus</text><text aria-hidden="true" x="665" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">grown</text><text x="665" y="140" transform="scale(.1)" fill="#fff" textLength="350">grown</text></g></svg>
`
exports['The badge generator text colors should use black text when the message color is light 1'] = `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="147" height="28" role="img" aria-label="CACTUS: GROWN"><title>CACTUS: GROWN</title><g shape-rendering="crispEdges"><rect width="74" height="28" fill="#000"/><rect x="74" width="73" height="28" fill="#e2ffe1"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="100"><text fill="#fff" x="370" y="175" transform="scale(.1)" textLength="500">CACTUS</text><text fill="#333" x="1105" y="175" font-weight="bold" transform="scale(.1)" textLength="490">GROWN</text></g></svg>
`