Bug 162047 - Web Inspector: Use CSS variables for common text colors
Summary: Web Inspector: Use CSS variables for common text colors
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-09-15 21:29 PDT by Matt Baker
Modified: 2016-12-16 11:13 PST (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Matt Baker 2016-09-15 21:29:29 PDT
Summary:
Use CSS variables for common text colors.

Color usage identified by running ack over the UserInterface directory:

> ack -ohi --nogroup --css --match="hsl\(.*\)" | sort -r | uniq -c | sort -r

9  color: hsl(0, 0%, 60%)
9  color: hsl(0, 0%, 50%)
3  color: hsl(0, 0%, 70%)
3  color: hsl(0, 0%, 22%)
3  color: hsl(0, 0%, 18%)
2  color: hsl(209, 100%, 50%)
2  color: hsl(0, 0%, 85%)
2  color: hsl(0, 0%, 40%)
2  color: hsl(0, 0%, 4%)
2  color: hsl(0, 0%, 30%)
2  color: hsl(0, 0%, 23%)
2  color: hsl(0, 0%, 20%)
2  color: hsl(0, 0%, 0%, 0.25)
9  color: hsl(0, 0%, 60%)
9  color: hsl(0, 0%, 50%)
3  color: hsl(0, 0%, 70%)
3  color: hsl(0, 0%, 22%)
3  color: hsl(0, 0%, 18%)
2  color: hsl(209, 100%, 50%)
2  color: hsl(0, 0%, 85%)
2  color: hsl(0, 0%, 40%)
2  color: hsl(0, 0%, 4%)
2  color: hsl(0, 0%, 30%)
2  color: hsl(0, 0%, 23%)
2  color: hsl(0, 0%, 20%)
2  color: hsl(0, 0%, 0%, 0.25)
1  color: hsl(44, 53%, 33%)
1  color: hsl(43, 96%, 44%)
1  color: hsl(359, 57%, 50%)
1  color: hsl(309, 21%, 70%)
1  color: hsl(30, 90%, 35%)
1  color: hsl(295, 76%, 32%)
1  color: hsl(248, 52%, 78%)
1  color: hsl(240, 55%, 30%)
1  color: hsl(240, 55%, 25%)
1  color: hsl(240, 100%, 52%)
1  color: hsl(210, 100%, 40%)
1  color: hsl(210, 100%, 33%)
1  color: hsl(210, 0%, 0%)
1  color: hsl(207, 46%, 59%)
1  color: hsl(206, 69%, 45%)
1  color: hsl(119, 27%, 65%)
1  color: hsl(119, 100%, 22%)
1  color: hsl(1, 33%, 70%)
1  color: hsl(0, 86%, 47%)
1  color: hsl(0, 75%, 45%)
1  color: hsl(0, 59%, 41%)
1  color: hsl(0, 33%, 49%)
1  color: hsl(0, 100%, 100%)
1  color: hsl(0, 0%, 82%)
1  color: hsl(0, 0%, 75%)
1  color: hsl(0, 0%, 74%)
1  color: hsl(0, 0%, 65%)
1  color: hsl(0, 0%, 57%)
1  color: hsl(0, 0%, 46%)
1  color: hsl(0, 0%, 45%)
1  color: hsl(0, 0%, 37%)
1  color: hsl(0, 0%, 34%)
1  color: hsl(0, 0%, 33%)
1  color: hsl(0, 0%, 32%)
1  color: hsl(0, 0%, 31%)
1  color: hsl(0, 0%, 14%)
1  color: hsl(0, 0%, 12%)
1  color: hsl(0, 0%, 11%)

The most frequently used colors should be added to Variables.css. Colors that are used only once, and visually indistinguishable from another more frequently used color, should be replaced.
Comment 1 Radar WebKit Bug Importer 2016-09-15 21:29:56 PDT
<rdar://problem/28332668>
Comment 2 Matt Baker 2016-09-16 16:00:49 PDT
This should have been:
> ack -ohi --nogroup --css --match=" color: hsl\(.*\)" | sort -r | uniq -c | sort -r

Which limits the search to `color` properties:

9  color: hsl(0, 0%, 60%)
9  color: hsl(0, 0%, 50%)
3  color: hsl(0, 0%, 70%)
3  color: hsl(0, 0%, 22%)
3  color: hsl(0, 0%, 18%)
2  color: hsl(209, 100%, 50%)
2  color: hsl(0, 0%, 85%)
2  color: hsl(0, 0%, 40%)
2  color: hsl(0, 0%, 4%)
2  color: hsl(0, 0%, 23%)
2  color: hsl(0, 0%, 20%)
2  color: hsl(0, 0%, 0%, 0.25)
1  color: hsl(44, 53%, 33%)
1  color: hsl(43, 96%, 44%)
1  color: hsl(359, 57%, 50%)
1  color: hsl(309, 21%, 70%)
1  color: hsl(30, 90%, 35%)
1  color: hsl(295, 76%, 32%)
1  color: hsl(248, 52%, 78%)
1  color: hsl(240, 55%, 30%)
1  color: hsl(240, 55%, 25%)
1  color: hsl(240, 100%, 52%)
1  color: hsl(210, 100%, 40%)
1  color: hsl(210, 100%, 33%)
1  color: hsl(210, 0%, 0%)
1  color: hsl(207, 46%, 59%)
1  color: hsl(206, 69%, 45%)
1  color: hsl(119, 27%, 65%)
1  color: hsl(119, 100%, 22%)
1  color: hsl(1, 33%, 70%)
1  color: hsl(0, 86%, 47%)
1  color: hsl(0, 75%, 45%)
1  color: hsl(0, 59%, 41%)
1  color: hsl(0, 33%, 49%)
1  color: hsl(0, 100%, 100%)
1  color: hsl(0, 0%, 82%)
1  color: hsl(0, 0%, 75%)
1  color: hsl(0, 0%, 74%)
1  color: hsl(0, 0%, 65%)
1  color: hsl(0, 0%, 57%)
1  color: hsl(0, 0%, 46%)
1  color: hsl(0, 0%, 45%)
1  color: hsl(0, 0%, 37%)
1  color: hsl(0, 0%, 34%)
1  color: hsl(0, 0%, 33%)
1  color: hsl(0, 0%, 32%)
1  color: hsl(0, 0%, 31%)
1  color: hsl(0, 0%, 30%)
1  color: hsl(0, 0%, 14%)
1  color: hsl(0, 0%, 12%)
1  color: hsl(0, 0%, 11%)
Comment 3 Timothy Hatcher 2016-09-16 16:04:52 PDT
This one is invalid: color: hsl(0, 0%, 0%, 0.25)

Should be hsla() or just black.
Comment 4 Matt Baker 2016-09-16 16:16:01 PDT
(In reply to comment #3)
> This one is invalid: color: hsl(0, 0%, 0%, 0.25)
> 
> Should be hsla() or just black.

Good catch! This should be --text-color-placeholder, which is hsla(0, 0%, 0%, 0.35).
Comment 5 Brian Burg 2016-12-16 11:13:27 PST
I don't think this is important to do by itself. We can just refactor as we touch text colors in UI changes.