162047 2016-09-15 21:29:29 -0700 Web Inspector: Use CSS variables for common text colors 2016-12-16 11:13:27 -0800 1 1 1 Unclassified WebKit Web Inspector WebKit Nightly Build All All NEW InRadar P2 Normal --- 1 mattbaker webkit-unassigned bburg inspector-bugzilla-changes webkit-bug-importer oldest_to_newest 1230307 0 mattbaker 2016-09-15 21:29:29 -0700 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. 1230308 1 webkit-bug-importer 2016-09-15 21:29:56 -0700 <rdar://problem/28332668> 1230655 2 mattbaker 2016-09-16 16:00:49 -0700 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%) 1230656 3 timothy 2016-09-16 16:04:52 -0700 This one is invalid: color: hsl(0, 0%, 0%, 0.25) Should be hsla() or just black. 1230660 4 mattbaker 2016-09-16 16:16:01 -0700 (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). 1260658 5 bburg 2016-12-16 11:13:27 -0800 I don't think this is important to do by itself. We can just refactor as we touch text colors in UI changes.