Update MobileFrontend codebase to use CSS variables
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	Jdlrobson
	Feb 1 2024, 6:32 PM

Description

MobileFrontend's component library should be update to use CSS variables. Note anything using OOUI or Codex should be considered out of scope - we should focus on colors defined in MobileFrontend.

QA

Check the following appear in a night-mode like theme:

Language overlay
Search
Reference drawer (click a reference)
New link drawer (click a red link)
Edit overlay (excluding any OOUI components)
The user page https://m.mediawiki.org/wiki/User%3A89.22.234.115?minervanightmode=1

Sign off

Note any components that use OOUi or Codex components and check we have follow up tickets to address them.

QA Results - Beta

AC	Status	Details
1	✅	T356427#9574170
2	✅	T356427#9574170
3	✅	T356427#9574170
4	✅	T356427#9574170
5	❓	T356427#9574170
6	✅	T356427#9574170

QA Results - Prod

AC	Status	Details
1	✅	T356427#9592857
2	✅	T356427#9592857
3	✅	T356427#9592857
4	✅	T356427#9592857
5	✅	T356427#9592857
6	✅	T356427#9592857

Details

Subject	Repo	Branch	Lines +/-
Follow-up to a30b575271 Map color-based skin variables to CSS variables	mediawiki/skins/MinervaNeue	master	+3 -0
Fixes search overlay icon	mediawiki/extensions/MobileFrontend	master	+17 -6
Fixes typo	mediawiki/skins/MinervaNeue	master	+3 -3
Map color-based skin variables to CSS variables	mediawiki/skins/MinervaNeue	master	+58 -12
Replace #72777d with @color-subtle	mediawiki/extensions/MobileFrontend	master	+10 -10
First pass at replacing hardcoded colors with LESS variables	mediawiki/extensions/MobileFrontend	master	+34 -32

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	Jdrewniak	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Open	Jdrewniak	T341632 [EPIC] Palette customizations and dark mode
Open	None	T354835 [epic] Release night mode as a beta feature on desktop and mobile
Open	None	T356434 [Night Mode] All pages and overlays that can be accessed within 2 clicks by a logged in user (AMC disabled) appear in night mode on mobile
Resolved	ovasileva	T356427 Update MobileFrontend codebase to use CSS variables

Event Timeline

Jdlrobson created this task.Feb 1 2024, 6:32 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 1 2024, 6:32 PM

Jdlrobson triaged this task as High priority.Feb 1 2024, 6:32 PM

Jdlrobson set the point value for this task to 3.Feb 1 2024, 6:49 PM

Jdlrobson added a project: FY2023-24-WE 2.1 Typography and palette customizations.Feb 1 2024, 7:19 PM

Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.Feb 8 2024, 12:33 AM

Jdlrobson updated the task description. (Show Details)Feb 8 2024, 12:58 AM

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptFeb 8 2024, 12:58 AM

Jdlrobson moved this task from Backlog to Night mode (mobile) on the FY2023-24-WE 2.1 Typography and palette customizations board.Feb 9 2024, 6:30 PM

SToyofuku-WMF claimed this task.Feb 13 2024, 4:03 PM

SToyofuku-WMF moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.

Putting down for now to work on the fixes for T356825 - will pick up again if nobody else does but didn't want to hold onto it in case someone else want to take it

Nvm, will pick this back up while I wait for clarification on the above (probably prioritizing the other one over this, but I am actively working on both)

SToyofuku-WMF moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.Feb 13 2024, 8:21 PM

Jdlrobson mentioned this in T357590: "Contents" <h2> needs to be updated to meet color contrast requirements in Minerva Night Mode.Feb 15 2024, 6:55 PM

Change 1003869 had a related patch set uploaded (by Stoyofuku-wmf; author: Stoyofuku-wmf):

[mediawiki/extensions/MobileFrontend@master] First pass at replacing hardcoded colors with LESS variables

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

gerritbot added a project: Patch-For-Review.Feb 15 2024, 8:10 PM

Change 1003872 had a related patch set uploaded (by Stoyofuku-wmf; author: Stoyofuku-wmf):

[mediawiki/extensions/MobileFrontend@master] Replace #72777d with @color-subtle

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

Change 1003869 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] First pass at replacing hardcoded colors with LESS variables

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.19; 2024-02-20).Feb 16 2024, 5:01 AM

(Posting here as I'm about to take off for a week and Justin is working on a more pressing matter, so let's have the discussion async and in public so it can be handed off easier)

We've got a couple more questions about visual changes that could affect day mode in the process of completing this ticket:

The first is around the hex code #72777d, which is hardcoded in a number of locations across the codebase. Looking at the codex design token definitions, there are a few variables we could use but none of them feel like the intended use of the variable (most instances of this value being hardcoded are for text color and most of the variables are for borders, etc). The variable that feels the most correct here is @color-base--subtle, which is marked as deprecated, with a comment to use @color-subtle instead, but a note that @color-subtle is using color.gray600 rather than color.gray500. Do you have an opinion on whether we should change these instances of #72777d in the codebase to use @color-subtle (in effect rewriting them to be #54595d, a shade darker) instead?

Second question is what you'd like us to do with the media viewer background in both day mode and night mode. Currently, the value is hardcoded to #000 and can be seen as the background here. In night mode, the background is still #000, as can be seen here (ignore the other styles, we haven't fixed those yet but will as part of this ticket). Do you have a sense of whether this background should be changed to use one of the codex variables, or how we'd like it to vary in night mode?

Thank you so much and sorry for another essay!!

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8f4f5289c9/w

The first is around the hex code #72777d, which is hardcoded in a number of locations across the codebase. Looking at the codex design token definitions, there are a few variables we could use but none of them feel like the intended use of the variable (most instances of this value being hardcoded are for text color and most of the variables are for borders, etc). The variable that feels the most correct here is @color-base--subtle, which is marked as deprecated, with a comment to use @color-subtle instead, but a note that @color-subtle is using color.gray600 rather than color.gray500. Do you have an opinion on whether we should change these instances of #72777d in the codebase to use @color-subtle (in effect rewriting them to be #54595d, a shade darker) instead?

Please use @color-subtle. That's no problem.

Second question is what you'd like us to do with the media viewer background in both day mode and night mode. Currently, the value is hardcoded to #000 and can be seen as the background here. In night mode, the background is still #000, as can be seen here (ignore the other styles, we haven't fixed those yet but will as part of this ticket). Do you have a sense of whether this background should be changed to use one of the codex variables, or how we'd like it to vary in night mode?

I'd like the image viewer and the citations drawer to have a #202122 background which is @color-base in day mode, but that would invert it in night mode, so let's just leave these for now. They still look ok in night mode with the #000 background.

Change 1003872 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Replace #72777d with @color-subtle

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

Maintenance_bot removed a project: Patch-For-Review.Feb 16 2024, 8:30 PM

Jdlrobson mentioned this in T357721: Hatnote Color Contrast Issues Across Wikipedia Pages on Minerva Night Mode.Feb 16 2024, 8:42 PM

Jdlrobson reassigned this task from SToyofuku-WMF to Edtadros.Feb 16 2024, 9:44 PM

Jdlrobson moved this task from Doing to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.

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

[mediawiki/skins/MinervaNeue@master] Map color-based skin variables to CSS variables

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

gerritbot added a project: Patch-For-Review.Feb 16 2024, 9:44 PM

When https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1003926 is merged the new MobileFrontend night theme should become enabled.

Change 1003926 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Map color-based skin variables to CSS variables

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

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.Feb 21 2024, 1:53 AM

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

[mediawiki/skins/MinervaNeue@master] Fixes typo

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

Following the fix I'm seeing some issues in night mode with the search in light mode due to the new Codex mixin updates:

Screenshot 2024-02-20 at 5.54.12 PM.png (1×920 px, 205 KB)

Should be easy to fix. I'll take a look tomorrow.

There was also an issue in editor overlay due to a typo that will be fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1005210

Screenshot 2024-02-20 at 5.55.42 PM.png (510×1 px, 36 KB)

I suspect these will be flagged by Pixel shortly.

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.Feb 21 2024, 2:03 AM

Change 1005210 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Fixes typo

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

Maintenance_bot removed a project: Patch-For-Review.Feb 21 2024, 2:30 AM

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.Feb 21 2024, 2:49 AM

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

[mediawiki/extensions/MobileFrontend@master] Fixes search overlay icon

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

gerritbot added a project: Patch-For-Review.Feb 21 2024, 2:50 AM

Change 1005522 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/MinervaNeue@master] Follow-up to a30b575271 Map color-based skin variables to CSS variables

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

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Feb 21 2024, 4:44 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.

Change 1005214 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Fixes search overlay icon

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

Change 1005522 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Follow-up to a30b575271 Map color-based skin variables to CSS variables

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

Maintenance_bot removed a project: Patch-For-Review.Feb 21 2024, 5:30 PM

ReleaseTaggerBot edited projects, added MW-1.42-notes (1.42.0-wmf.20; 2024-02-27); removed MW-1.42-notes (1.42.0-wmf.19; 2024-02-20).Feb 22 2024, 11:02 AM

Test Result - Beta

Status: ✅ PASS / ❓Need More Info
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

NOTE: Please see AC5 before signing off.

Check the following appear in a night-mode like theme:

✅ AC1: Language overlay

✅ AC2: Search

✅ AC3: Reference drawer (click a reference)

✅ AC4 New link drawer (click a red link)

❓ AC5: Edit overlay (excluding any OOUI components)
The Edit overlay buttons do not appear in night mode. Edit summary screen does not appear in dark mode. The edit help overlay is only partially in night mode. If those three items are not considered in scope for the task then this is a pass.