Color palette (WikimediaUI)

"Love" token, awarded by Niedzielski."Love" token, awarded by jhsoby."Love" token, awarded by cmadeo."Love" token, awarded by SamanthaNguyen."Love" token, awarded by Jan_Dittrich."Love" token, awarded by Ladsgroup.
Authored By
violetto, Sep 16 2015

Mock History

Current Revision

Mock Description

WikimediaUI color palette used throughout Wikimedia Foundation products. Please see also M101 for the widget collection.
It features WCAG 2.0 conformance level indicators.

There are a very large number of changes, so older changes are hidden. Show Older Changes
jrbs added a subscriber: jrbs.Oct 13 2016, 11:57 PM
Volker_E updated the mock's description. (Show Details)Nov 4 2016, 9:07 PM

I'd like to repeat the comment of revision 2016-09-15 here, because Phabricator Mocks revisions do a weak job in showing history:

New, improved color palette featuring WCAG 2.0 conforming colors.
Outcome of [UI Standardization working with] WMF designers and UX engineers offsite earlier this summer. Thanks to all people involved for this result: @Nirzar, @Pginer-WMF, @RHo, @Jdrewniak, @JGirault

The call for overhauling to high contrast colors conforming to WCAG 2.0 level AA fell on fertile ground.

Lothar added a subscriber: Lothar.EditedDec 3 2016, 12:30 AM

I suppose it should be considered, see discussion on (especially pending-reviews class color).

Thanks @Lothar for pointing out, I've filed T152258: Aligning FlaggedRevision to WikimediaUI color palette received negative feedback – let's discuss this further there.

Hydriz added a subscriber: Hydriz.Dec 10 2016, 10:20 AM

Can these be added to mw LESS files as official variables we can use everywhere?

That will be super helpful and prevent overloading the code with the same colors over and over.

SamanthaNguyen added a comment.EditedDec 15 2016, 11:41 PM

@Mooeypoo I believe so! Are you looking for this? :)

@Mooeypoo @Fomafix Thanks for asking! It is very important to have those centralized somewhere and a UI Standardization goal T12335. But there are currently some caveats to overcome:

  1. The most similar variables as of now are available in resources/src/mediawiki.less/mediawiki.ui/variables.less which is part of no-further-developed mediawiki.UI, but used in some core views and foremost in MobileFrontend. What we're building right now is WikimediaUI, so we've got
  2. There's has also been discussion about a theme-agnostic stylesheet way for core, but T112747 got stuck.

Regarding 1, I could duplicate the old and introduce the new variables into the file and let the old point to the new ones and deprecate the old ones. But then, still, we shouldn't call it mediawiki.ui/variables, because it simply isn't mediawiki.UI and would lead to discoverability and referencing issues.
Regarding 2, this is IMHO the current show-stopper for giving a stylesheet like WikimediaUI Base Less version a correct place in core. If you have comments, feel free to share them at T112747.

Like @SamanthaNguyen mentioned above Wikimedia UI's Base repo provides base.css and base.less variables with agreed-on UI values for use in volunteer projects built on top of external libraries outside of core, like for example Bootstrap.

@Volker_E What's the problem with having resources/wikimedia-base.less which is a copy and paste of the current distribution of your wikimedia-base repo (in absence of being able to use a package manager) - we do this for jquery and other files?

mediawiki.ui/variables.less can import from the new file to keep its contract but move us away from using that.

e.g. @mediaWikiVarible: @wikimedia-ui-variable

I will happily help migrate us away from mediawiki ui variables if that's what's needed but I worry about having all these places to look...

@Jdlrobson Let's continue this at T112747

Lothar removed a subscriber: Lothar.Jan 16 2017, 8:27 AM