Page MenuHomePhabricator

Special:RecentChanges - Make highlighted changelist legible in dark-mode
Open, HighPublic2 Estimated Story Points

Description

Background

While investigating the possibility of enabling Special:RecentChanges in dark-mode, I noticed that the highlight feature uses custom colors that do not work well in dark-mode.
(they also don't look great in light-mode, but maybe that's a separate issue...)

Screenshot 2024-06-07 at 11.01.37 AM.png (828×1 px, 306 KB)
Screenshot 2024-06-07 at 11.02.13 AM.png (855×1 px, 377 KB)

Technical notes

These colors are hex values defined in resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less

Screenshot 2024-06-07 at 11.14.16 AM.png (453×851 px, 107 KB)

The background colors are generated via a Less mixin that combines the different highlight colors together.
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less.

Screenshot 2024-06-07 at 11.24.27 AM.png (708×1 px, 202 KB)

These color functions are not compatible with Codex design tokens, and it looks like the results, when combined with red/blue/black text, don't meet accessibility guidelines either :/

Goal

  1. The changelist with highlights is legible in dark-mode

Event Timeline

I just wrote this task thinking we should replace the colors with Codex design tokens, but now I'm thinking it'd be easier to disable the highlighting feature in dark-mode entirely.

Jdrewniak renamed this task from Special:RecentChanges - Replace custom colors with Codex design tokens to Special:RecentChanges - Make highlighted changelist legible in dark-mode.Fri, Jun 7, 3:39 PM
Jdrewniak updated the task description. (Show Details)
Jdlrobson subscribed.

Adding "notheme" whenever we add "mw-rcfilters-highlighted" - seems like the quickest path to completion here.

$('.mw-rcfilters-highlighted').addClass('notheme')
Jdlrobson set the point value for this task to 2.Fri, Jun 14, 7:27 PM