In order to successfully roll out the new dark mode across the wikis, we need to bring dark mode support to OOUI, which powers many features that are currently in production.
DST recently overhauled Codex (specifically, the Codex design tokens) to support alternate color schemes with the introduction of [[ https://github.com/wikimedia/design-codex/blob/main/CHANGELOG.md#150--2024-04-30 | CSS variables ]] and the [[ https://doc.wikimedia.org/codex/latest/using-codex/adrs/08-adr-color-modes.html | concept of "modes" ]] (alternate sets of CSS variables which can be loaded to override the default values of design tokens). This change came as part of Codex's `1.5.0` release. OOUI consumes Codex design tokens in its own styles, but before it can benefit from these new features we need to upgrade the version of `@wikimedia/codex-design-tokens` which is used in OOUI and deal with any potential compatibility issues.
==== Acceptance Criteria
- [ ] OOUI has been updated to `@wikimedia/codex-design-tokens` version 1.4.0 (rem units)
- [ ] OOUI has been updated to `@wikimedia/codex-design-tokens` version 1.5.0 or later (CSS variables)
==== Work Plan
Currently, OOUI uses version `1.3.5` of `@wikimedia/codex-design-tokens`. There are currently patches open to incrementally update OOUI to Codex 1.4.0 (rem units) and then to Codex 1.5.0 (CSS variables). These patches should remain un-merged for the time being while we test out these updates in the context of different features.
* Update OOUI to Codex 1.4.0: T363857
* Update OOUI to Codex 1.5.0: T363849
As new issues are surfaced, DST engineers will add fixes to the existing patches or will add new patches to the chain, and will rebase as necessary. OOUI should otherwise remain in code freeze during this time.
==== Testing Plan
The following features or extensions should consider testing these changes using PatchDemo:
- VisualEditor (maintained by Editing Team)
- Echo (maintained by Growth)
- Special:Preferences
- Special:RecentChanges
- DiscussionTools
- others?
Steps to test:
1. Go to https://patchdemo.wmflabs.org
2. Apply this patch: https://gerrit.wikimedia.org/r/c/oojs/ui/+/1034592/4
3. Select whatever configuration is appropriate to your feature, and make sure to check the box for `oojs/ui` under the "custom" section as well.
4. Create a patch demo instance
5. Log in and enable Dark Mode in user preferences
6. Test out your feature as appropriate
7. If you encounter issues, add them to the "known issues" task below or file subtasks of this task. Note: we are only concerned with problems in the OOUI library itself. Features using OOUI may need to take additional steps to enable dark mode in that particular feature. Any such work is beyond the scope of this task (but we encourage you to file your own task in the appropriate workboard).
==== Known Issues
* Vector/Minerva font size
** With the change to `rem` in Codex 1.4.0 we also need to update OOUI to base sizing on `rem`. That means no more auto-sizing of `em` based widgets in regards to the skin's base font-size (not root font-size!). We are aware of the impact for MinervaNeue and plan to workaround this visual change by introducing a //temporary// helper token and moving to `calc` for using it to remain visually equivalent sizing-wise in #Vector, #MinervaNeue etc.
* OOUI icons stay dark in dark mode and are thus barely legible (see T365764)
==== Deadline
Web has targeted June 10 as the date to roll out dark mode to non-logged-in users. Ideally all OOUI testing and fixes for dark mode should be completed by this time. However, this may not be enough time to allow feature maintainers to test their respective projects, so this date may need to be adjusted.