Page MenuHomePhabricator

Color palette (Wikimedia Design Style Guide/WikimediaUI)

Authored By
violetto, Sep 16 2015
"Love" token, awarded by jhsoby-WMNO."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.

Mock History

Current Revision

Mock Description

Wikimedia Design color palette for user interface used throughout Foundation products. This Phabricator mock has been closed, visit for reference of our color palette instead.

It continues for the time being to be part of M101 for the widget collection.
It features WCAG 2.0 conformance level indicators.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

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.

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

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.

@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...

Volker_E renamed this mock from Color palette (WikimediaUI) to Color palette (Wikimedia Design Style Guide/WikimediaUI).Oct 23 2018, 3:54 PM
Volker_E updated the mock's description. (Show Details)
Volker_E removed an image: Dark backgrounds.png.
Volker_E closed this mock.