VisualEditor should use Codex design tokens for custom colors
Open, HighPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	Jdrewniak
	Wed, May 29, 4:06 PM

Description

Background

In T363849 we discovered that although integrating Codex design tokens v1.5 goes a long way in getting VisualEditor to support dark-mode, there are lots of colors in VisualEditor itself that should be updated to use Codex design tokens as well.

Requirements

VisualEditor should convert hardcoded colors into Codex design tokens.

QA steps

VisualEditor

Repeat test b, c, d, f, g, l, r, s in T363780#9844863
Go to https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Talk:T352930&action=edit&redlink=1 and click "Start a new discussion" - the text area should be white text on a black background.

Talk pages

Repeat QA for the following workflows on https://en.wikipedia.org/wiki/Talk:Main_Page

Issues

screenshot 422 question.png (1×1 px, 507 KB)

screenshot 422 question 2.png (1×1 px, 532 KB)

Sign off steps

This is impacting other pages. Check the following pages on the beta cluster and open new tickets if they haven't been fixed.

Recent changes save filter workflow

Details

Subject	Repo	Branch	Lines +/-
Update VE core submodule to master (3137295a5)	mediawiki/extensions/VisualEditor	master	+1 -1
Replace static colors with CSS vars + fallbacks for dark-mode	VisualEditor/VisualEditor	master	+4 -4
Use Codex design tokens for custom styles	VisualEditor/VisualEditor	master	+385 -9
Replace hardcoded colors with Codex design tokens	mediawiki/extensions/VisualEditor	master	+69 -47

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	T367150 Deploy dark mode to logged-out users on the Vector2022 skin
Resolved	ovasileva	T366738 ULS should have a dark theme
Open	None	T365509 [GOAL] Talk page namespaces should not be excluded from night theme
Open	GMikesell-WMF	T366197 VisualEditor should use Codex design tokens for custom colors

Event Timeline

Jdrewniak created this task.Wed, May 29, 4:06 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptWed, May 29, 4:06 PM

Jdrewniak added projects: VisualEditor, FY2023-24-WE 2.1 Typography and palette customizations.Wed, May 29, 4:09 PM

Jdrewniak updated the task description. (Show Details)

Jdrewniak added a project: Codex.Wed, May 29, 4:14 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptWed, May 29, 4:14 PM

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

[VisualEditor/VisualEditor@master] [WIP] Use Codex design tokens for custom styles

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

gerritbot added a project: Patch-For-Review.Wed, May 29, 4:30 PM

@Jdrewniak do you need Design-System-Team support with this task?

CCiufo-WMF moved this task from Inbox to Triaging on the Design-System-Team board.Wed, May 29, 5:08 PM

@Jdrewniak do you need Design-System-Team support with this task?

Good question. This is definitely part of the current work DST is doing around updating OOUI to codex-design-tokens 1.5.
This task is dependant on that work and should be applied after OOUI is updated to 1.5 (or in conjunction with that update).
I think it should be included in the general VE/OOUI dark-mode QA, and it will need code-review from Editing-team 🙂

Jdrewniak added a project: Editing-team.Wed, May 29, 5:51 PM

Jdrewniak updated the task description. (Show Details)

Jdlrobson triaged this task as High priority.Wed, May 29, 7:13 PM

Jdlrobson moved this task from Incoming to Groomed on the Web-Team-Backlog board.Wed, May 29, 7:16 PM

CCiufo-WMF added a subtask: T364777: [EPIC] Enable dark mode in OOUI.Wed, May 29, 10:17 PM

CCiufo-WMF removed a subtask: T364777: [EPIC] Enable dark mode in OOUI.

CCiufo-WMF moved this task from Triaging to Following on the Design-System-Team board.

CCiufo-WMF updated the task description. (Show Details)

In T366197#9843431, @Jdrewniak wrote:

@Jdrewniak do you need Design-System-Team support with this task?

Good question. This is definitely part of the current work DST is doing around updating OOUI to codex-design-tokens 1.5.
This task is dependant on that work and should be applied after OOUI is updated to 1.5 (or in conjunction with that update).
I think it should be included in the general VE/OOUI dark-mode QA, and it will need code-review from Editing-team 🙂

Cool, thanks for expanding here. I've put myself as reviewer. I think it doesn't need to wait for OOUI using latest tokens. The patch seems sensible on its own.

Volker_E added a project: CSS.Thu, May 30, 12:38 AM

Jdlrobson updated the task description. (Show Details)Fri, May 31, 3:50 AM

Jdlrobson mentioned this in T363780: [QA] Exploratory testing: Vector 2022 night theme.Fri, May 31, 3:52 AM

Jdlrobson mentioned this in T365383: [Spike] QA outcome of OOUI work .Fri, May 31, 3:39 PM

Jdlrobson moved this task from Backlog to Night mode (desktop) on the FY2023-24-WE 2.1 Typography and palette customizations board.Fri, May 31, 4:47 PM

@Volker_E I think it's fine to review the patch now, but only if it's changed to use @wikimedia/codex-design-tokens v.1.3.6 instead of latest. That way it will still get colors as hex values instead of CSS variables. If VE were to get the variables, then the affected colors (and only those colors) would be changed in dark-mode and result in black-on-black text, since the rest of the colors in OOUI are still hex values.
I can update the patch now, and then after OOUI is updated, we can update the version of @wikimedia/codex-design-tokens in VE to latest.

@Jdrewniak Sounds good to me!

Jdrewniak attached a referenced file: F54674483: screenshot 422 question 2.png. (Show Details)Thu, Jun 6, 8:22 PM

Jdrewniak attached a referenced file: F54671490: screenshot 404.png. (Show Details)

Jdrewniak attached a referenced file: F54674196: screenshot 408.png. (Show Details)

Jdrewniak attached a referenced file: F54674450: screenshot 422 question.png. (Show Details)

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

[mediawiki/extensions/VisualEditor@master] Replace hardcoded colors with Codex design tokens

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

Jdrewniak updated the task description. (Show Details)Fri, Jun 7, 6:37 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 6); removed Web-Team-Backlog.Thu, Jun 13, 12:09 AM

Jdlrobson mentioned this in T366832: Enable dark mode on mobile visual editor.Thu, Jun 13, 12:40 AM

Jdlrobson added a parent task: T365509: [GOAL] Talk page namespaces should not be excluded from night theme.Thu, Jun 13, 3:44 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Needs analysis to Ready for estimation on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Thu, Jun 13, 3:53 PM

Marking as a 5 for now, but will do analysis to attempt to cut down scope

Jdlrobson mentioned this in T367432: DiscussionTools source mode preview is not night mode friendly.Thu, Jun 13, 8:16 PM

ovasileva moved this task from Ready for estimation to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Mon, Jun 17, 11:23 AM

ovasileva moved this task from Ready for Development to Ready for estimation on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.

bwang moved this task from Ready for estimation to Needs analysis on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Mon, Jun 17, 5:57 PM

Jdlrobson updated the task description. (Show Details)Mon, Jun 17, 8:09 PM

Jdlrobson updated the task description. (Show Details)Mon, Jun 17, 8:16 PM

Jdlrobson mentioned this in T366371: [Config] Enable night theme on diff and change list pages.

Jdlrobson mentioned this in T366737: Vector 2022: VisualEditor toolbar and overlays should appear in night theme.Mon, Jun 17, 9:07 PM

Jdlrobson mentioned this in T367813: [QA only] Media overlay, citation, link and template and save changes overlay close icon/search icon invisible.Mon, Jun 17, 9:30 PM

Jdlrobson mentioned this in T367822: [Regression 1.43.0-wmf.10] Desktop VisualEditor insert paragraph workflow not legible.Mon, Jun 17, 9:46 PM

The patch linked above - Replace hardcoded colors with Codex design tokens - replaces all static color values in Extension:VisualEditor with Codex tokens. From previous experience, these kinds of changes can introduce risk because the changes are widespread (the patch touches 25 files). Also, I'm not even sure if these changes resolve the white-on-white text issues (or if the most important changes should actually be made in the core VisualEditor repo).

In order to reduce scope, I'll try to narrow down the scope of this work to fix white-on-white text in VE in dark-mode only (other issues like border colors and lower contrast grey text can be handled separately).

White-on-white text issues in dark-mode in VE

Screenshot 2024-06-17 at 5.48.20 PM.png (810×1 px, 107 KB)

Save changes dialog

Screenshot 2024-06-17 at 5.34.49 PM.png (1×2 px, 185 KB)

Find and replace dialog

Screenshot 2024-06-17 at 5.33.30 PM.png (1×2 px, 375 KB)

Insert Gallery text input

Screenshot 2024-06-17 at 5.32.35 PM.png (1×2 px, 692 KB)

Insert map icons

Screenshot 2024-06-17 at 5.31.24 PM.png (1×2 px, 371 KB)

Insert Chemical formula graphic

Screenshot 2024-06-17 at 5.29.25 PM.png (1×2 px, 433 KB)

Math symbols

Screenshot 2024-06-17 at 5.28.27 PM.png (1×2 px, 335 KB)

Insert media text input

Screenshot 2024-06-17 at 5.26.50 PM.png (434×888 px, 45 KB)

insert paragraph text

Screenshot 2024-06-17 at 5.26.04 PM.png (2×3 px, 1 MB)

insert symbol

ovasileva moved this task from Needs analysis to Doing on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Tue, Jun 18, 4:24 PM

ppelberg subscribed.Tue, Jun 18, 5:39 PM

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

[VisualEditor/VisualEditor@master] Replace static colors with CSS vars + fallbacks for dark-mode

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

Change #1037116 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Use Codex design tokens for custom styles

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

Change #1047547 abandoned by Jdrewniak:

[VisualEditor/VisualEditor@master] Replace static colors with CSS vars + fallbacks for dark-mode

Reason:

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

Change #1048001 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (3137295a5)

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

Change #1048001 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (3137295a5)

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

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.11; 2024-06-25).Thu, Jun 20, 3:00 PM

Jdlrobson reassigned this task from Jdrewniak to GMikesell-WMF.Thu, Jun 20, 6:40 PM

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

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

[VisualEditor/VisualEditor@master] Follow-up to c2bf989 - Use Codex colors for Mobile Editor

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

	F55439787: Screenshot 2024-06-17 at 5.26.04 PM.png
	Tue, Jun 18, 4:16 PM

	F55439785: Screenshot 2024-06-17 at 5.26.50 PM.png
	Tue, Jun 18, 4:16 PM

	F55439782: Screenshot 2024-06-17 at 5.28.27 PM.png
	Tue, Jun 18, 4:16 PM

	F55439779: Screenshot 2024-06-17 at 5.29.25 PM.png
	Tue, Jun 18, 4:16 PM

	F55439772: Screenshot 2024-06-17 at 5.31.24 PM.png
	Tue, Jun 18, 4:16 PM

	F55439770: Screenshot 2024-06-17 at 5.32.35 PM.png
	Tue, Jun 18, 4:16 PM

	F55439765: Screenshot 2024-06-17 at 5.33.30 PM.png
	Tue, Jun 18, 4:16 PM

	F55439761: Screenshot 2024-06-17 at 5.34.49 PM.png
	Tue, Jun 18, 4:16 PM

VisualEditor should use Codex design tokens for custom colorsOpen, HighPublic5 Estimated Story PointsActions