Page MenuHomePhabricator

Reintroduce standard colors in new theme
Closed, ResolvedPublic

Description

As requested by @Xqt in this comment, reintroduce standard colors (#900 (red), #396 (green), #069 (blue)) in the new theme. These colors were previously used in the nature theme via a CSS customization.

Event Timeline

KBach triaged this task as Medium priority.Nov 25 2022, 10:00 AM

As I understand, most of these colors come from the Legacy Palette described here: https://meta.wikimedia.org/wiki/Brand/colours#The_Legacy_Palette

There is also the Wikimedia Design Style Guide and its color guidelines: https://design.wikimedia.org/style-guide/visual-style_colors.html

KBach changed the task status from Open to In Progress.Nov 25 2022, 1:51 PM

As I understand, most of these colors come from the Legacy Palette described here: https://meta.wikimedia.org/wiki/Brand/colours#The_Legacy_Palette

There is also the Wikimedia Design Style Guide and its color guidelines: https://design.wikimedia.org/style-guide/visual-style_colors.html

For the previous pywikibot.css I just picked the colors from some wm icons (also from Pywikibot icon) and found only 3:
#396 (green), #069 (blue) and #900 (red) but these are different from the guideline`s colors which are #14866D (green), #2A4B8D (blue) and #B38888 (red) instead for similar colors. Other colors than these 3 can also be derived from them via HSB.

For the previous pywikibot.css I just picked the colors from some wm icons (also from Pywikibot icon) and found only 3:
#396 (green), #069 (blue) and #900 (red) but these are different from the guideline`s colors which are #14866D (green), #2A4B8D (blue) and #B38888 (red) instead for similar colors. Other colors than these 3 can also be derived from them via HSB.

Just want to make sure I understand - do you prefer the three colors the docs had originally (plus some derived colors via HSB), or the colors from one of these guides? I think either is fine as long as we are consistent.

Change 862887 had a related patch set uploaded (by KBach; author: KBach):

[pywikibot/core@tests] [doc] Introduce standard colors (legacy palette) in Furo

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

I submitted a patch that introduces colors from the legacy palette into the new theme. I changed the main brand color, the "problematic" (as per an scss variable) color, and link colors. I also used the extended palette to change colors of all admonitions as below.

My only doubts are about brand/link and problematic color in dark mode. They are improvements over Furo defaults in terms of contrast, but I'm not sure if they are a good fit.

admonitions_light.png (1×1 px, 247 KB)

admonitions_dark.png (1×1 px, 261 KB)

Just want to make sure I understand - do you prefer the three colors the docs had originally (plus some derived colors via HSB), or the colors from one of these guides? I think either is fine as long as we are consistent.

colors should be picked from any palette proposed by wmf but they should not be mixed. e.g. creative can be mixed with core and legacy palette but for red, green and blue thee should only be one color, either from legacy or creative.

The new colors from visual style guide looks also nice. The basic red, green and blue colors are red30, Green30 and Accent30 and there are a couple of of other colors which fits to them. The logo colors can be adopted.

I updated the patch to lower the total number of colors we are using, favoring the legacy palette over the creative one where they conflicted.

The current code in the patch also allows us to quickly test how the site would look if we replaced legacy+creative with the colors from the visual style guide. To do that, replace lines 233-256 with:

color_primary_blue = '#2a4b8d'
color_blue_bg_light = '#2a4b8d1B'
color_blue_bg_dark = '#2a4b8d22'
color_blue_text_dark = '#94D5FF'
color_primary_red = '#b32424'
color_red_bg_light = '#b3242411'
color_red_bg_dark = '#b3242414'
color_red_text_dark = '#FF5151'
color_primary_green = '#14866d'
color_green_bg_light = '#14866d12'
color_green_bg_dark = '#14866d33'
color_yellow = '#ffcc33'
color_yellow_background = '#ffcc3322'
color_brightblue = '#3366cc'
color_brightblue_background = '#3366cc22'
color_purple = '#5748B5'
color_purple_background = '#5748B52A'

It seems like deeptest jobs are failing for all recent changes on the tests branch. @Xqt, can you take a look and let me know if this is something I can fix? I am having trouble identifying if these failures are related to my changes.

Change 862887 merged by jenkins-bot:

[pywikibot/core@tests] [doc] Introduce standard colors (legacy palette) in Furo

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