Page MenuHomePhabricator

Apply WikimediaUI color palette to Wikibase
Closed, ResolvedPublic

Assigned To
Authored By
Nov 21 2016, 8:43 AM
Referenced Files
F6820375: pasted_file
Mar 21 2017, 3:55 PM
F6820353: pasted_file
Mar 21 2017, 3:55 PM
F6775199: pasted_file
Mar 20 2017, 3:41 PM
F6775188: pasted_file
Mar 20 2017, 3:41 PM
F6700538: pasted_file
Mar 18 2017, 5:06 PM
F6700673: pasted_file
Mar 18 2017, 5:06 PM
F6670492: Color_scheme_terms_after.png
Mar 17 2017, 4:08 PM
F6670500: Color_scheme_sitelinks_before.png
Mar 17 2017, 4:08 PM
"The World Burns" token, awarded by Jonas.

Event Timeline is the first patch. This is what it does (left = old, right = new, top = a colored popup, bottom = an error message):

ui-closable-colors.png (918×818 px, 121 KB)

As you can see this patch leaves the UI in an inconsistent state. Personally I don't think this is bad, but we should make sure we agree we want this, and agree on some minimum acceptance criteria. Explicitly pinging @Lydia_Pintscher.

Change 322494 had a related patch set uploaded (by Thiemo Mättig (WMDE)):
A little bit more compliance with Wikimedia's color palette

Do you think it would be okay to give the top of the popup the same color and then we would be good to go with this patch?

We use the same blue color in many more places. My personal opinion is: Either change it everywhere, or only in these message windows (which means: leave the patch as it is).

I talked to Lydia about this and I want to change all colors in one go. I do it right now.

thiemowmde lowered the priority of this task from Medium to Low.Nov 25 2016, 10:36 AM

Talked with @Lydia_Pintscher and decided that we are not going to change the colors just because we want to change the colors. There is not much value in adjusting some colors to other colors people are not more familiar with. What we want to do instead is to make the Wikibase UI more clean by possibly removing some of the boxes, backgrounds and gray bars. When we are going to do this we will consider the new color scheme.

I suggest we abandon for now. We can restore it later.

The last two comments are contradicting. Could I probably help with any questions or do you want to put this task on “Stalled”? Is there tracking of the mentioned UI cleanup?

Volker_E renamed this task from Apply ui standardization color palette to Wikibase to Apply WikimediaUI color palette to Wikibase.Dec 11 2016, 7:16 PM
Volker_E moved this task from Unsorted to Color consistency on the UI-Standardization board.

@Volker_E: I gave it a try rather long time ago but this requires PM's approval and also you need to talk to our UX designer: @Jan_Dittrich if they give me green light, I make this happen in no time.

I assume this would mean shifting the hues towards the ones the standard palette uses?
Because there is no light blue in that palette and changing to another much darker/saturated tone may require and extensive review. In that case I would be hesitant, since we want to touch the UI anyway, as soon as the new architecture is in place.

  1. How hard is it to do in code?
  2. Are there any breakages that could happen with that?

Yes, so instead of "#E8E8E8" we use "#eaecf0" and instead of "#D6F3FF" we use "#eaf3ff". Most (if not all) of these changes are almost invisible to the human eye. The color palette has indeed light blue (#eaf3ff), it's so beautiful in fawiki's opinion that they use it almost everywhere.

How hard is it to do in code?

Two hours of my time and a reviewer's time.

Are there any breakages that could happen with that?

No, it's not possible

No, it's not possible

Depends on what you call a "breakage". I just noticed that the colors are already broken when using the PrimarySources tool. Other gadgets and tools might also use the current colors. This should not block us from changing the current Wikibase UI colors, but we should consider this.

I define breakage in a programmatical manner, like fatal error, stuff like that ;) If these gadgets are in mediawiki namespace, I can take care of that.

@Ladsgroup @thiemowmde
In this case, please change the colors, I'm looking forward to the changes.


I did not expect code to fail; breakage from the point of the user (and something I can imagine to happen when changing colors) would be a contrast, which is too low.

I made some screenshots of what the patch actually does. Terms before and after:

Color_scheme_terms_before.png (1×1 px, 126 KB)
Color_scheme_terms_after.png (1×1 px, 127 KB)

Sitelinks before and after:

Color_scheme_sitelinks_before.png (1×1 px, 60 KB)
Color_scheme_sitelinks_after.png (1×1 px, 60 KB)

Differences in detail:

  • The most visible change is in the big gray areas in the statements. They are noticably brighter. The gray is also slightly more blue-ish instead of red-ish. I find this a good move.
  • The same gray background is in the sitelinks section. As above, I find this a good move.
  • The gray text color of the ID in the header, the aliases below, as well as the disabled "save" buttons (and all other disabled buttons) is actually a bit darker than before. I find this a good thing.
  • The border color of some gray boxes changed, but this is not noticeable at all.

+2 from my side.

Thanks for the screenshots. That helps. Let's do it! :)

Change 343315 merged by jenkins-bot:
[mediawiki/extensions/Wikibase] Align gray colors with WikimediaUI color palette

Change 343449 merged by jenkins-bot:
[mediawiki/extensions/Wikibase] Align blue colors with WikimediaUI color palatte

Change 343450 merged by jenkins-bot:
[data-values/value-view] Align blue with the Wikimedia UI color palette

Change 343661 merged by jenkins-bot:
[mediawiki/extensions/Wikibase] Align red colors with WikimediaUI color palette

Okay, a simple grep shows these are not moved to the color palette:

amir@amir-GL552VW:~/Wikibase2/view$ grep -irE "#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})" . | grep -viE "eaf3ff|fee7e6|c8ccd1|eaecf0|000|72777d|f8f9fa|fff|a2a9b1|54595d|2a4b8d|b6c8ec|efa0a0|0645ad"
./resources/wikibase/wikibase.css:	color: #252525;
./resources/wikibase/wikibase.css:	background-color: #F0F0F0;
./resources/wikibase/wikibase.css:	color: #565656;
./resources/wikibase/pencil.svg:        <path d="M307.05 1073.838q32.507 22.505 97.522 87.52L1659.846 26.107q-33.757-60.013-101.272-82.518zm-135.03-51.26L1563.576-225.197q156.284 26.256 276.31 155.034Q1959.91 58.616 1968.663 217.4L575.858 1470.177l-515.112 55.012z" id="path6" fill="#777"/>
./resources/wikibase/utilities/wikibase.utilities.ui.css:	color: #57a7b9;
./resources/wikibase/	color: #555;
./resources/jquery/wikibase/themes/default/jquery.wikibase.entityselector.css:	background-color: #4C59A6;
./resources/jquery/wikibase/themes/default/jquery.wikibase.aliasesview.css:	border: 1px solid #CCC;
./resources/jquery/wikibase/themes/default/jquery.wikibase.aliasesview.css:	background-color: #F8F8F8;
./resources/jquery/wikibase/themes/default/images/wb-badges-default.svg:<g fill="#357AFB" transform="matrix(1.0741053,0,0,1.0741053,-20.22352,-6.387075)">
./resources/jquery/wikibase/themes/default/images/rankselector.svg:<use fill="#9c9c9c" x="27" y="0" xlink:href="#a"/>
./resources/jquery/wikibase/themes/default/images/rankselector.svg:<use stroke="#9c9c9c" x="27" y="0" xlink:href="#b"/>
./resources/jquery/wikibase/themes/default/images/rankselector.svg:<use fill="#3b80b3" x="54" y="0" xlink:href="#a"/>
./resources/jquery/wikibase/themes/default/images/rankselector.svg:<use stroke="#3b80b3" x="54" y="0" xlink:href="#b"/>
./resources/jquery/wikibase/themes/default/images/rankselector.svg:<use fill="#2694e8" x="81" y="0" xlink:href="#a"/>
./resources/jquery/wikibase/themes/default/images/rankselector.svg:<use stroke="#2694e8" x="81" y="0" xlink:href="#b"/>
./resources/jquery/wikibase/snakview/themes/default/images/ui-icon_snaktypeselector.svg:<rect width="10" height="6" x="0" y="0" fill="#666"/>
./resources/jquery/wikibase/snakview/themes/default/images/ui-icon_snaktypeselector.svg:<rect width="9" height="5" x="0.5" y="7.5" fill="none" stroke="#666"/>
./resources/jquery/wikibase/snakview/themes/default/images/ui-icon_snaktypeselector.svg:<path d="m0.5,15 0,4.5 9,0 0,-4.5" fill="none" stroke="#666"/>
./resources/jquery/wikibase/snakview/themes/default/images/ui-icon_snaktypeselector.svg:<rect width="10" height="6" x="13" y="0" fill="#3d80b3"/>
./resources/jquery/wikibase/snakview/themes/default/images/ui-icon_snaktypeselector.svg:<rect width="9" height="5" x="13.5" y="7.5" fill="none" stroke="#3d80b3"/>
./resources/jquery/wikibase/snakview/themes/default/images/ui-icon_snaktypeselector.svg:<path d="m13.5,15 0,4.5 9,0 0,-4.5" fill="none" stroke="#3d80b3"/>
./resources/jquery/wikibase/snakview/themes/default/images/ui-icon_snaktypeselector.svg:<rect width="10" height="6" x="26" y="0" fill="#2694e8"/>
./resources/jquery/wikibase/snakview/themes/default/images/ui-icon_snaktypeselector.svg:<rect width="9" height="5" x="26.5" y="7.5" fill="none" stroke="#2694e8"/>
./resources/jquery/wikibase/snakview/themes/default/images/ui-icon_snaktypeselector.svg:<path d="m26.5,15 0,4.5 9,0 0,-4.5" fill="none" stroke="#2694e8"/>
./resources/jquery/ui/jquery.ui.tagadata.css:	background-color: #F0F0F0;

I make a patch to finish them all. will do some cleanups. Only svg files for badges and snakview will need change, that can happen later.

The +1 sign:

pasted_file (403×1 px, 39 KB)

pasted_file (403×1 px, 39 KB)

We decided to go with WikimediaUI's blue instead of green

Change 343760 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Minor cleanups in colors to align them with WikimediaUI color palette

Gerrit-bot is still broken. Here's the last patch. Once this is merged, we can call this done.

Change 344880 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Convert badge and entity/rank selector icons to conform WikimediaUI color palette

Ladsgroup moved this task from Blocked on others to Done on the User-Ladsgroup board.

Change 491535 had a related patch set uploaded (by Addshore; owner: Ladsgroup):
[mediawiki/extensions/WikibaseLexeme@master] Change colors to align with WikimediaUI color palette

Change 491535 had a related patch set uploaded (by Ladsgroup; owner: Ladsgroup):
[mediawiki/extensions/WikibaseLexeme@master] Change colors to align with WikimediaUI color palette

Change 491535 merged by jenkins-bot:
[mediawiki/extensions/WikibaseLexeme@master] Change colors to align with WikimediaUI color palette