| Summary: | Web Inspector: Use CSS variables for common text colors | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Matt Baker <mattbaker> |
| Component: | Web Inspector | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | bburg, inspector-bugzilla-changes, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | All | ||
| OS: | All | ||
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%)
This one is invalid: color: hsl(0, 0%, 0%, 0.25) Should be hsla() or just black. (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). I don't think this is important to do by itself. We can just refactor as we touch text colors in UI changes. |
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.