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 these patches:
** OOUI: https://gerrit.wikimedia.org/r/c/oojs/ui/+/1034592
** Vector: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1039268 (this patch applies some config used in production which limits dark mode on special pages and for certain other features like Visual Editor)
** Minerva: https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1039269 (same as above, for Minerva skin)
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. Captured in {T366101}
* ~~OOUI icons stay dark in dark mode and are thus barely legible. Captured in {T365764}~~
** Note: this will be addressed at a later date by the Web team; in the mean time, features like Visual Editor and most special pages will be forced to remain in light mode so as not to provide a broken UX
* ~~Line height for label elements is slightly off (see example below). On Special:RecentChanges, this makes the labels for the "chips" mis-aligned with the icons. The line height should be 21px, but the current computed value comes out to `18.5667px`. It looks like the discrepancy is that in the patch, OOUI's `..oo-ui-tagItemWidget.oo-ui-labelElement .oo-ui-labelElement-label` selector is no longer providing its own `line-height` value which would override the inherited `line-height` of `1.42857143`.~~
** Fixed in https://gerrit.wikimedia.org/r/c/oojs/ui/+/1034592 PS 7: {F54982343}
* From @Catrope re font size for the progress dialog title on mobile: "This [changing from ems to rems] causes an issue on mobile. The old code (which used 1.1em) automatically adapted to the base font size, so this title was 15.2px on desktop and 17.6px on mobile. Now it's 15.2px on both."
==== 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.