Page MenuHomePhabricator

Minerva should not use CSS variables directly
Closed, ResolvedPublic2 Estimated Story Points

Description

Background

At the beginning of the night mode project, the color variables in Minerva were converted from Less variables to CSS variables. Since then, the strategy for integrating CSS variables in the MediaWiki ecosystem has changed.

The current recommendation for using CSS variables in MediaWiki is not to use them directly, but rather to use the existing Less variables and have Codex convert them to CSS variables under the hood, e.g: @color-base: var( --color-base );

As of Codex 1.5.0 (description of changes here:T354889) the underlying CSS variables now include fallback values, e.g: @color-base: var( --color-base, #202122 ); which means that our CSS variable implementation in Minerva now diverges from the one in Codex.

User story

  • As a MediaWiki developers, we should align our front-end implementations with current best practices based on the Codex UI library.

Requirements

Design

  • No visual changes

Acceptance criteria

  • No visual changes
  • Minerva uses Less variables for color
  • Any documentation or ADRs regarding CSS variable usage in Minerva is updated

Communication criteria - does this need an announcement or discussion?

  • No

Event Timeline

Jdrewniak triaged this task as Medium priority.May 9 2024, 5:35 PM

@Jdrewniak as I'm doing this, I'm seeing that in addition to some css variables not having fallbacks, the fallbacks also appear to be for day mode even when we're in night mode:

image.png (110×610 px, 23 KB)

Is my understanding correct that this is intentional?

Also noting the most effective way I've found to batch replace seems to be this regex: var\(\s*--(\S+)\s*\) and replacing with @$1, which I am now spot checking to make sure they exist

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

[mediawiki/skins/MinervaNeue@master] (Almost) no more CSS variables in minerva

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

I'm seeing that in addition to some css variables not having fallbacks, the fallbacks also appear to be for day mode even when we're in night mode:

@SToyofuku-WMF I don't see any token that lack fallbacks:
https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/lib/codex-design-tokens/theme-wikimedia-ui.less
but the fallback should be the light-mode color :)

Change #1041233 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] (Almost) no more CSS variables in minerva

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

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

[mediawiki/skins/MinervaNeue@master] Use upstream codex variables for diffs and red links

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

Change #1041814 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Use upstream codex variables for diffs and red links

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

This is a developer QA task.
The only match for this query is documentation documenting this change:
https://github.com/search?q=repo%3Awikimedia%2Fmediawiki-skins-MinervaNeue%20var(&type=code