[wp-trac] [WordPress Trac] #35783: The WordPress shades of grey

[WordPress Trac]

#35783: The WordPress shades of grey
----------------------------+-----------------------------
 Reporter:  afercia         |      Owner:
     Type:  enhancement     |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:
 Severity:  normal          |   Keywords:  needs-patch
  Focuses:  ui              |
----------------------------+-----------------------------
 A while ago there was a
 [https://wordpress.slack.com/archives/design/p1453812787000255
 conversation on Slack] about the multitude of grays used in the WordPress
 admin. Wondering about a tool capable of extracting colors and return some
 usage data, we tried cssstats. Far from being a scientific method, I've
 just uploaded the concatenated and minified CSS file and
 [https://cldup.com/10C6ryGsN3.png got some results].

 I'm pretty sure cssstats doesn't get all the colors but the data report is
 an interesting summary of the WordPress CSS (as of January 26th, 2016).
 There are many interesting points to consider, for example the media
 queries total number, but let's focus just on colors for now and more
 specifically on grays.

 Looks like there are more than 40 different shades of grays, not counting
 the rgba ones and the ones that cssstats probably missed. It's totally
 understandable that in a so large project, with time, year after year,
 some things get missed and some colors stay in the CSS without particular
 reasons other than historical ones. By the way, for the sanity of the CSS
 in the long run, I'd recommend to audit all these shades of gray and try
 to reduce their total number as much as possible.

 About backgrounds, this would have beneficial effects also when trying to
 find accessible colors for links (hover, focus states included) and other
 controls. Finding suitable colors against, say, 20 different gray
 backgrounds would be a bit hard. Reducing the gray backgrounds to a small,
 known, number would greatly help. Not to mention design consistency and
 the ongoing effort to make WordPress use a well established, standardized,
 color palette.

 Working a bit on the cssstats results, I've split the grays in different
 groups, just scanning the WordPress CSS files and trying to check how many
 times they're used and where. Again, this doesn't pretend to be a
 scientific method :) for that, maybe there would be the need of some more
 reliable tools other than cssstats.

 The grays in the first group are used in only one CSS ruleset and I'd say
 they should be definitely standardized and replaced with other grays. The
 ones in the second group have just two occurrences and they should
 probably be standardized too. Third and fourth group: to evaluate :)

 One occurrence
 {{{
 2f2f2f - for .theme-browser .theme.active .theme-name
 686868 - .theme-overlay .theme-author
 808080 - suggest.js auto suggestions border
 grey   - .media-disabled, .imgedit-settings .disabled
 9a9a9a - old media upload? to move to deprecated media css
 bbb    - media upload dashicon upload-dismiss-errors, also tinymce
 "lightgray" skin
 d2d2d2 - borders for .tablenav .tablenav-pages a, .tablenav-pages-navspan
 ececec - background for #plugin-information .counter-back (star rating in
 the plugin details modal)
 e7e7e7 - .media-icon img fallback border for rgba border, remove both?
 f4f4f4 - "undo" table row background, maybe unify with a more used
 background like f5f5f5 ?
 }}}

 Two occurrences
 {{{
 101010 - suggest.js auto suggestions text color list on white or #f0f0b8
 background (also on Press This)
 a9a9a9 - input placeholder, there's a ticket for this, see #35777
 b4b4b4 - tablenav-pages-navspan and the pressthis-bookmarklet link
 dadada - (excluding deprecated media css) only for borders, maybe unify
 with more used borders ?
 d7d7d7 - revisions borders, also tinymce "lightgray" skin
 e6e6e6 - #plugin-information .review, press this, also tinymce "lightgray"
 skin, to unify with e5e5e5 ?
 }}}

 Have very similar colors, maybe should be unified
 {{{
 464646 - unify with 444 ?
 dedede - mainly borders and .wp-playlist-dark .wp-playlist-caption, maybe
 unify with dfdfdf ?
 dfdfdf - mainly borders, maybe unify with dedede ?
 e4e4e4 - used very few times, maybe unify with e5e5e5 ?
 }}}

 Used very few times, to evaluate
 {{{
 222    - .edit-comment-author text and wp-embed and mediaelement
 background, maybe change to #23282d ?
 727272 - maybe change to 72777c ?
 ebebeb - used very few times
 fbfbfb - manage-menus (toolbar in menus screen) and login form, very close
 to white
 fdfdfd - tab panels
 eaeaea - only for `kbd` and `code` backgrounds
 e8e8e8 - border for list table pagination links and few other things
 e1e1e1 - a very few borders and shadows
 }}}

 Other grays
 {{{
 444    - main text color
 555    - maybe should be replaced with the new 555d66 ?
 555d66 - new gray
 666    - mainly for text color
 999    - there's a ticket for text color, see #35660 but it's also used
 for borders
 ccc    - mixed use, text, borders, backgrounds, shadows
 c4c4c4 - only in the gradient for #postimagediv .inside img
 ddd    - mainly borders and a few backgrounds
 eee    - mixed use, most notably: main Customizer background
 e5e5e5 - mixed use, mainly borders
 fcfcfc - backgrounds
 f1f1f1 - main background
 f3f3f3 - backgrounds
 f5f5f5 - backgrounds
 f7f7f7 - backgrounds
 f9f9f9 - backgrounds, zebra striping and others
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/35783>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform