Integrate Codex's experimental CSS variables-based styles into MediaWiki
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	Catrope
	Feb 2 2024, 9:23 PM

Description

We want to be able to use the experimental styles described in T356537 in MediaWiki. This requires adding a theme for these experimental styles, so that skins can opt into them.

Add the style files produced by the experimental theme to foreign-resources.yaml
Add the experimental theme to the themeStyles property in the definition of @wikimedia/codex in Resources.php
Add support for the experimental theme to CodexModule::getManifestFile()
Create WIP patches demonstrating this
- WIP patch that copies the Codex build outputs of https://gerrit.wikimedia.org/r/c/design/codex/+/993056 to resources/lib
- On top of that, a WIP patch that implements the three items above
- Depending on that (using Depends-On), a WIP patch in Minerva that selects the experimental theme (using skinCodexThemes in skin.json, see Vector for an example)
- Ask the Web team to test with this (they will have to figure out how to define the values of the CSS vars)

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
[WIP] Use experimental theme from Codex	mediawiki/skins/MinervaNeue	master	+8 -1
Codex: Add experimental theme	mediawiki/core	master	+862 -22
[DO NOT MERGE] Update Codex to pre-1.3.3	mediawiki/core	master	+2 K -149

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	DTorsani-WMF	T355147 [EPIC] Dark Mode
Resolved	egardner	T356537 Release experimental styles and CSS variable set of Codex design tokens for use in MediaWiki
Resolved	Catrope	T356542 Integrate Codex's experimental CSS variables-based styles into MediaWiki

Event Timeline

Catrope created this task.Feb 2 2024, 9:23 PM

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptFeb 2 2024, 9:23 PM

Catrope moved this task from Inbox to Up Next on the Design-System-Team board.Feb 2 2024, 9:24 PM

Catrope moved this task from Backlog to Infrastructure on the Codex board.

Catrope mentioned this in T356537: Release experimental styles and CSS variable set of Codex design tokens for use in MediaWiki.Feb 2 2024, 9:32 PM

CCiufo-WMF triaged this task as High priority.Feb 5 2024, 7:05 PM

CCiufo-WMF set the point value for this task to 3.

CCiufo-WMF moved this task from Up Next to DST-Sprint-16 (2024-02-05 to 2024-02-16) on the Design-System-Team board.

CCiufo-WMF edited projects, added Design-System-Team (DST-Sprint-16 (2024-02-05 to 2024-02-16)); removed Design-System-Team.

Jdlrobson mentioned this in T356825: Implement the new night mode color palette in Minerva.Feb 14 2024, 12:10 AM

Catrope changed the task status from Open to In Progress.Feb 14 2024, 11:21 PM

Catrope claimed this task.

Catrope moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-16 (2024-02-05 to 2024-02-16)) board.

Change 1003571 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] [DO NOT MERGE] Update Codex to pre-1.3.3

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

Change 1003572 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] [WIP] Codex: Add experimental theme

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

Change 1003573 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/skins/MinervaNeue@master] [WIP] Use experimental theme from Codex

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

Testing instructions:

Install MinervaNeue and CodexExample if you haven't already
In MW core, run git review -d 1003572
In MinervaNeue, run git review -d 1003573
Go to http://localhost:8080/wiki/Special:CodexExample?minervanightmode=1
Note that night mode applies to Codex components (e.g. tab labels are white, icon in Card is white)
Any changes made to color token values in CSSCustomProperties.less in Minerva apply to Codex components too

@Catrope if you update to use this Codex patch to produce the experimental output, you'll get an RTL experimental stylesheet.

In T356542#9548621, @egardner wrote:

@Catrope if you update to use this Codex patch to produce the experimental output, you'll get an RTL experimental stylesheet.

Thanks! I will update MW core patch once the new Codex patch is updated to reinstate CSS vars for filter-invert-icon, filter-invert-primary-button-icon and opacity-icon-base

Jdlrobson mentioned this in T358059: Use Codex experimental build in Minerva to allow codex components to appear in night mode.Feb 20 2024, 11:03 PM

Change 1003571 abandoned by Catrope:

[mediawiki/core@master] [DO NOT MERGE] Update Codex to pre-1.3.3

Reason:

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

Escargot_rouge subscribed.Feb 22 2024, 3:00 PM

Change 1003572 merged by jenkins-bot:

[mediawiki/core@master] Codex: Add experimental theme

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.20; 2024-02-27).Feb 23 2024, 7:00 PM

Catrope closed this task as Resolved.Feb 26 2024, 5:32 PM

Krinkle mentioned this in T359944: mmv.ui.download.pane.less fails due to "error evaluating function `mix` The second argument to mix must be a color".Mar 14 2024, 2:28 PM