Last modified: 2014-10-07 22:50:02 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T73627, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 71627 - Get down to 15 shades of gray
Get down to 15 shades of gray
Status: RESOLVED FIXED
Product: MobileFrontend
Classification: Unclassified
Hygiene (Other open bugs)
unspecified
All All
: Unprioritized normal
: ---
Assigned To: Jon
:
Depends on: 65381
Blocks:
  Show dependency treegraph
 
Reported: 2014-10-03 21:22 UTC by Jon
Modified: 2014-10-07 22:50 UTC (History)
6 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description Jon 2014-10-03 21:22:01 UTC
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.
Comment 1 Gerrit Notification Bot 2014-10-07 00:50:11 UTC
Change 165151 had a related patch set uploaded by Bmansurov:
Get down to 15 shades of gray

https://gerrit.wikimedia.org/r/165151
Comment 2 Gerrit Notification Bot 2014-10-07 00:50:40 UTC
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
Comment 3 Gerrit Notification Bot 2014-10-07 22:10:17 UTC
Change 165151 restored by Bmansurov:
Get down to 15 shades of gray

Reason:
'abandon' was a mistake

https://gerrit.wikimedia.org/r/165151
Comment 4 Gerrit Notification Bot 2014-10-07 22:49:49 UTC
Change 165151 merged by jenkins-bot:
Get down to 15 shades of gray

https://gerrit.wikimedia.org/r/165151
Comment 5 Jon 2014-10-07 22:50:02 UTC
Yeyy. 15 shades of gray finally!

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links