Apply WikimediaUI color palette to Wikibase
Closed, ResolvedPublic

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 21 2016, 8:43 AM
thiemowmde triaged this task as "Normal" priority.Nov 21 2016, 2:42 PM
Restricted Application added a project: Design. · View Herald TranscriptNov 21 2016, 2:42 PM

https://gerrit.wikimedia.org/r/322494 is the first patch. This is what it does (left = old, right = new, top = a colored popup, bottom = an error message):

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.

thiemowmde moved this task from Proposed to Review on the Wikidata-Sprint board.Nov 21 2016, 2:46 PM
thiemowmde moved this task from incoming to in current sprint on the Wikidata board.

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

https://gerrit.wikimedia.org/r/322494

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

thiemowmde moved this task from Review to Proposed on the Wikidata-Sprint board.Nov 25 2016, 10:29 AM

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 "Normal" 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 https://gerrit.wikimedia.org/r/322494 for now. We can restore it later.

Jonas awarded a token.Nov 25 2016, 6:45 PM

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 changed the title 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 moved this task from Incoming to WMDE on the Design board.Jan 5 2017, 5:32 PM

@Ladsgroup What's the status here?

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

@Ladsgroup:
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?

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

breakage…

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.

Ladsgroup added a project: Wikidata-Sprint.
Restricted Application added a project: User-Ladsgroup. · View Herald TranscriptMar 17 2017, 3:13 PM
Ladsgroup moved this task from Proposed to Review on the Wikidata-Sprint board.

I made some screenshots of what the patch https://gerrit.wikimedia.org/r/343315 actually does. Terms before and after:

Sitelinks before and after:

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

https://gerrit.wikimedia.org/r/343315

Now we have two patches to align the blue colors: https://gerrit.wikimedia.org/r/343449 and https://gerrit.wikimedia.org/r/#/c/343450/
Old:


New:

@Jan_Dittrich designer eye please ^ ;-)

Looks good to me – thanks @Ladsgroup !

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

https://gerrit.wikimedia.org/r/343449

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

https://gerrit.wikimedia.org/r/343450

Ladsgroup added a comment.EditedMar 20 2017, 3:41 PM

Started red ones: https://gerrit.wikimedia.org/r/#/c/343661/
Before:


After:

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

https://gerrit.wikimedia.org/r/343661

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/wikibase.mobile.css:	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.

https://gerrit.wikimedia.org/r/#/c/343760/ will do some cleanups. Only svg files for badges and snakview will need change, that can happen later.

The +1 sign:
Before:


After:

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

https://gerrit.wikimedia.org/r/343760

Gerrit-bot is still broken. Here's the last patch. https://gerrit.wikimedia.org/r/#/c/344880/ Once this is merged, we can call this done.

thiemowmde moved this task from Review to Done on the Wikidata-Sprint board.Mon, Mar 27, 4:11 PM
thiemowmde removed a project: Patch-For-Review.

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

https://gerrit.wikimedia.org/r/344880

Ladsgroup closed this task as "Resolved".