Page MenuHomePhabricator

Get down to 15 shades of gray
Closed, ResolvedPublic

Description

MediaWiki UI defines 15 shades of gray:
@colorGray1: #111; darkest
@colorGray2: #222;
@colorGray3: #333;
@colorGray4: #444;
@colorGray5: #555;
@colorGray6: #666;
@colorGray7: #777;
@colorGray8: #888;
@colorGray9: #999;
@colorGray10: #AAA;
@colorGray11: #BBB;
@colorGray12: #CCC;
@colorGray13: #DDD;
@colorGray14: #EEE;
@colorGray15: #F9F9F9;
lightest

It gives semantic meaning to various ones:
@colorText: @colorGray2;
@colorTextLight: @colorGray6;
@colorButtonText: @colorGray5;
@colorDisabledText: @colorGray12;
@colorFieldBorder: @colorGray12;
@colorShadow: @colorGray14;
@colorPlaceholder: @colorGray10;
@colorNeutral: @colorGray7;

In mobile thanks to Bahodir we have identified there are another 17 shades of gray.
They are as follows:

@fancycaptchaReloadColor: #787878;
@imageListDescriptionColor: #565656;
@searchResultsDataColor: #535353;
@pageHeaderBarBorderColor, @watchlistSelectorBorderColor, @contentHeaderBorderColor: #e2e2e2;
@watchlistSelectorLinkColor: #58595b;

In diff page:
@userinfoBackgroundColor: #f0f0f0;
@userinfoBorderColor: #c0c0c0;
@diffDateColor: #c6c6c6;

In the Nearby, Watchlist A-Z page:
@pageSummaryHeaderColor: #404040; [title of the item]
@pageLeftListDarkBorderColor: #3e3e3e;
@pageLeftListMediumBorderColor: #5C5C5C;
@pageLeftListLightBorderColor: #717171;

Heads of tables in articles:
@tableHeadBackgroundColor: #F2F2F2;

@overlayBottomBackgroundColor, @topBarBackgroundColor: #f3f3f3;
@imageReplacementColor: #706E6E;
@inputsBoxBorderColor: #e1e1e1;
@progressBarBorderColor, @borderBottomColor (page actions): #CACACA;

Designers can you give us direction on what these colours can be mapped to. Can we map them to the 15 shades of gray, and maybe group them with more semantic meaning in the process? I've annotated some of the variables. Some I hope will easily map due to being close to the colour they relate to.


Version: unspecified
Severity: normal

Details

Reference
bz71627

Related Objects

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:43 AM
bzimport set Reference to bz71627.
Jdlrobson created this task.Oct 3 2014, 9:22 PM

Change 165151 had a related patch set uploaded by Bmansurov:
Get down to 15 shades of gray

https://gerrit.wikimedia.org/r/165151

Change 165151 abandoned by Bmansurov:
Get down to 15 shades of gray

Reason:
Wrong bug number and commit message. The correct one is here: https://gerrit.wikimedia.org/r/#/c/165151/

https://gerrit.wikimedia.org/r/165151

Change 165151 restored by Bmansurov:
Get down to 15 shades of gray

Reason:
'abandon' was a mistake

https://gerrit.wikimedia.org/r/165151

Change 165151 merged by jenkins-bot:
Get down to 15 shades of gray

https://gerrit.wikimedia.org/r/165151

Yeyy. 15 shades of gray finally!