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

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

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

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?

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

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

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.

+2, too :-)

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:

@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

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

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:

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

https://github.com/Wikidata/primarysources/pull/135

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.

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

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

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

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

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

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

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