Page MenuHomePhabricator

Define color palette for message boxes
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:

Screenshot 2024-02-23 at 4.42.09 PM.png (328×742 px, 36 KB)

  • ( Message boxes use color-emphasised which becomes white in the night mode color palette and background colors that were not covered by the new color palette we added to Minerva:
@background-color-error-subtle: #fee7e6;
@background-color-warning-subtle: #fef6e7;
@background-color-success-subtle: #d5fdf4;
@background-color-notice-subtle: #eaecf0;

https://doc.wikimedia.org/codex/latest/design-tokens/color.html

What should have happened instead?:

  • Either the background color of the warning (@background-color-warning-subtle) should darken OR the text should remain light mode color.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

QA Results - Beta

ACStatusDetails
1T358402#9614041

QA Results - Prod

ACStatusDetails
1T358402#9614047

Event Timeline

Jdlrobson triaged this task as High priority.
ovasileva lowered the priority of this task from High to Medium.Feb 26 2024, 2:27 PM

@DTorsani-WMF - have you worked through the error, warning, etc. colours in the new palette? If so, can you take this on?

@JScherer-WMF Yes, I will look into this and relay back.

@JScherer-WMF @Jdlrobson Here are the dark mode color values for message variables, as well as diff pages:

Message Background Colors
@background-color-error-subtle: #70231F;
@background-color-warning-subtle: #4F3A1A;
@background-color-success-subtle: #194538;
@background-color-notice-subtle: #202122;

Message Border Colors
@border-color-error: #E45D52;
@border-color-warning: #AD822B;
@border-color-success: #0F9B7A;
@border-color-notice: #72777D;

Message Icon Colors
@color-error: #F8A397;
@color-warning: #E7B032;
@color-success: #74C9AC;
@color-notice: #F8F9FA; (same as content color)

Diff Colors
diff-deletedline: #886525; (same color for line and highlight/text background)
diff-addedline: #3366CC; (same color for line and highlight/text background)

Change 1008559 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Define message box and diff colors for two themes

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

Jdlrobson renamed this task from [Design] Define color palette for message boxes to Define color palette for message boxes.Mar 4 2024, 10:49 PM
Jdlrobson removed DTorsani-WMF as the assignee of this task.
Jdlrobson set the point value for this task to 1.

Change 1008559 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Define message box, diff colors and missing box shadows for two themes

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

@DTorsani-WMF the color selected for night mode doesn't seem to be accessible on Recent changes page?
https://m.mediawiki.org/wiki/Special:RecentChanges?hidebots=1&translations=filter&hidecategorization=1&hideWikibase=1&limit=500&days=14&enhanced=1&minervanightmode=1&urlversion=2

I suspect the intention was to have white text on background rather than brown text on black? Is that correct?

Screenshot 2024-03-06 at 7.17.43 PM.png (68×82 px, 5 KB)

That's correct. This color was chosen specifically for the diff page where there is a yellow (brown) highlight with white text on it.

Before I can provide the correct color values to use here, I see that this and the added numbers are referencing the diff-line classes. On this page in day mode, the added is blue and removed is yellow. However, on this page in day mode, the added is green and the removed is red. Are these intentionally different? Which colors should they be?

@DTorsani-WMF I raised this before as an inconsistency. I think these colors should be the same since they mean the same thing and it is confusing that they are not. Should we create a new bug?

@Jdlrobson I think that makes sense. Might as well make this what it is intended to be. Now that begs the question, should these be red and green or yellow and blue?

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:RecentChanges?damaging=maybebad&hidebots=1&hidecategorization=1&hideWikibase=1&limit=500&days=7&enhanced=1&minervanightmode=1&urlversion=2
✅ AC1: Either the background color of the warning (@background-color-warning-subtle) should darken OR the text should remain light mode color.
The message box is readable and there are no contrast issues in the WCAG Contrast Checker.

screenshot 662.png (557×1 px, 138 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.org/wiki/Special:RecentChanges?damaging=maybebad&hidebots=1&hidecategorization=1&hideWikibase=1&limit=500&days=7&enhanced=1&minervanightmode=1&urlversion=2
✅ AC1: Either the background color of the warning (@background-color-warning-subtle) should darken OR the text should remain light mode color.
The message box is readable and there are no contrast issues in the WCAG Contrast Checker.

screenshot 663.png (542×1 px, 138 KB)

Edtadros subscribed.
Jdlrobson claimed this task.

@DTorsani-WMF I created T358406 to capture the follow up work here around standardizing these colors and making them work in both themes.