Description
Details
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Resolved | Volker_E | T148708 Replace abandoned colors in current WMF/Wikimedia products with WikimediaUI palette colors (tracking) | |||
Resolved | Ladsgroup | T151194 Apply WikimediaUI color palette to Wikibase | |||
Resolved | Ladsgroup | T158407 Replace abandoned blue in Wikibase |
Event Timeline
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.
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.
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.
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: 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.
- How hard is it to do in code?
- 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.
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.
Change 343315 merged by jenkins-bot:
[mediawiki/extensions/Wikibase] Align gray colors with WikimediaUI color palette
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:
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/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.
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. https://gerrit.wikimedia.org/r/#/c/344880/ 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
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