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