Per https://docs.gitlab.com/ee/administration/appearance.html we could do so via https://gitlab.wikimedia.org/admin/application_settings/appearance

jelto opened https://gitlab.wikimedia.org/repos/releng/gitlab-settings/-/merge_requests/51

add script to change appearance

@Jelto: Guess content should also be light, given our dark background:

Note to myself: https://meta.wikimedia.org/wiki/Brand/typography (though I personally do not enjoy the kerning of Montserrat Bold used here).

I updated the MR to upload the new WMF GitLab logo. The code works but is a bit duplicate with the application settings script. I also did not want to make the scripts too complicated. I'll wait for review from RelEng.

The test instance uses the new logo already: https://gitlab.devtools.wmcloud.org. I think the logo looks good (except when you use the white-themed status bar).

I think the logo looks good (except when you use the white-themed status bar).

Uhm, I had no idea https://gitlab.wikimedia.org/-/profile/preferences exists. Too many preferences, sigh.
Let me add a 4px stroke to the WMF logo and the text, so it should be also visible with that Light Grey preference

I uploaded the new logo to the test instance. The logo works with the white theme.

But somehow the bigger outline makes the logo a bit blurry. I tried a 1px stroke, which looks way less blurry on my machine and it's still readable on the white theme.

@Aklapper Could you checkout the new logo on the test instance? Feel free to also upload any logo via the web-interface during our tests: https://gitlab.devtools.wmcloud.org/admin/application_settings/appearance

That URL shows a Application Not Authorized to Use CAS error here.
But if 1px stroke renders well for you, let's just use that?

Application Not Authorized to Use CAS

That might be a bug with GitLab Admin Mode. You could try login to https://gitlab.devtools.wmcloud.org first and then visit https://gitlab.devtools.wmcloud.org/admin/application_settings/appearance. I think you need a active session for admin mode redirect to work. Also you did not have admin permissions on the test instance. I promoted you to admin.

I uploaded the new logo to the test instance, looks good to me.

jelto merged https://gitlab.wikimedia.org/repos/releng/gitlab-settings/-/merge_requests/51

add script to change appearance

Mentioned in SAL (#wikimedia-releng) [2023-11-30T07:39:48Z] <jelto> update GitLab logo on GitLab Replicas with a Wikimedia flavored one - T349167

Mentioned in SAL (#wikimedia-releng) [2023-11-30T07:41:31Z] <jelto> update GitLab logo on GitLab production with a Wikimedia flavored one - T349167

The new logo is configured on all instances using https://gitlab.wikimedia.org/repos/releng/gitlab-settings.

The top left icon looks quite nice, also in darker and lighter themes. However the login logo is far too small and too light. The login dialogue seems to be light all the time, so the icon should be dark.

I'll do some more tests on the test instance with a darker and bigger login logo.

jelto opened https://gitlab.wikimedia.org/repos/releng/gitlab-settings/-/merge_requests/52

add dedicated logos for header and login

GitLab uses just a square logo without text for the login screen (see T285354#9367898 for example).

So I changed the gitlab-settings code and added a dedicated logo for the login screen in MR.

The new logo looks better on the login screen imo (tested on the test instance).

jelto merged https://gitlab.wikimedia.org/repos/releng/gitlab-settings/-/merge_requests/52

add dedicated logos for header and login

Mentioned in SAL (#wikimedia-releng) [2023-11-30T09:28:55Z] <jelto> update GitLab login logo on GitLab with a Wikimedia flavored one - T349167

GitLab uses WMF flavored logos for the navbar header and login logo now.

@Aklapper let me know if you see any problem with the logos :)

The original task mentioned:

it's somewhat difficult to distinguish Wikimedia GitLab browser tabs from other GitLab instances.

Which is also about the favicon. I suggest we can use the GitLab logo but with wmf colors?

What do you think about:

removed due to licensing issues

Hmm, at least in Firefox 120 the 1px stroke is barely recognizable here:

hmm yes true, with the Light Gray theme the logo is a bit too light.

Maybe we can use a solid logo (so without outline and a solid color) which is darken than light grey but lighter than the darker themes? So something like a2a9b1ff?

Both logo and background are single color. I tried setting a thicker outline to get contrast on any background. Would you want to try the 4px stroke logo above?

So something like a2a9b1ff?

#A2A9B1 on the Gray setting (#303030) will fail WCAG AAA. #A2A9B1 on the Light Gray setting (#F0F0F0) will also fail WCAG AA.

jelto opened https://gitlab.wikimedia.org/repos/releng/gitlab-settings/-/merge_requests/54

update header_logo to use 4px stroke

In T349167#9370951, @Aklapper wrote:

Both logo and background are single color. I tried setting a thicker outline to get contrast on any background. Would you want to try the 4px stroke logo above?

So something like a2a9b1ff?

#A2A9B1 on the Gray setting (#303030) will fail WCAG AAA. #A2A9B1 on the Light Gray setting (#F0F0F0) will also fail WCAG AA.

I uploaded the 4px stroke header_logo again again to https://gitlab.devtools.wmcloud.org. If you like the header logo we can merge https://gitlab.wikimedia.org/repos/releng/gitlab-settings/-/merge_requests/54 and apply it to all instances.

Hmm, it's still not the most beautiful but at least recognizable on light grey. I'd say let's go for it for now. :)

jelto merged https://gitlab.wikimedia.org/repos/releng/gitlab-settings/-/merge_requests/54

update header_logo to use 4px stroke

In T349167#9371494, @Aklapper wrote:

Hmm, it's still not the most beautiful but at least recognizable on light grey. I'd say let's go for it for now. :)

Agreed :)

What about the favicon mentioned in T349167#9370200?

The favicon probably should be different from the default orange. This proposal uses some of the style guide colors, which are also used for phabricator and wikitech for example. On the other hand I'm not sure if this mixture of colors still is contemporary. Maybe we can skip one of the colors and just go with the blue and white colors?

I don't have any strong opinions on favicons. I think anything that allows differentiation in open browser tabs is pretty fine.

We could use the black version from https://about.gitlab.com/press/press-kit/ so we don't even modify it but it's also not the orange one.

jelto opened https://gitlab.wikimedia.org/repos/releng/gitlab-settings/-/merge_requests/55

manage favicon with appearance script

I opened https://gitlab.wikimedia.org/repos/releng/gitlab-settings/-/merge_requests/55 and added the Logomark-1-color (black) favicon. Unfortunately in a dark-themed browser the icon is not really visible. Maybe the white one Logomark-1-color (white) makes more sense?

I uploaded the black favicon to the test instance: https://gitlab.devtools.wmcloud.org/explore

The black and also the white logo have accessibility issues when using a very dark or light theme.

GitLab has quite strict rules regarding usage of their logomark: https://design.gitlab.com/brand-logo/logomark/#incorrect-usage. So we either have to create our own or use one of the existing ones.

One last proposal from my side: we could use the old-school GitLab logo which was introduced in GitLab 7.13: https://about.gitlab.com/blog/2015/07/03/our-new-logo/, old press kit: https://web.archive.org/web/20201103050758/https://about.gitlab.com/press/press-kit/

That logo is slightly different from the current upstream logo but not too different to confuse users with a completely new logo. However the logo allows to distinguish between WMF GitLab and upstream GitLab.

Here a comparison (old logo on the left, new logo on the right):

I updated the MR above.

jelto merged https://gitlab.wikimedia.org/repos/releng/gitlab-settings/-/merge_requests/55

manage favicon with appearance script

Mentioned in SAL (#wikimedia-releng) [2023-12-07T11:25:57Z] <jelto> run gitlab-settings and update GitLab favicon - T349167