wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-11 16:38:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix color for inline styles with background color in night mode

Browse source 
Use CSS to target parsed content where a background color is defined
inline without an accompanying text color.  Additionally, add an ADR
documenting this decision to the repo

Visual change in night mode only, as the text color will now be correct

Bug: T358797
Change-Id: If375c4c9691462d314e91a74da0fc8365137cd8c
This commit is contained in:
Steph Toyofuku 2024-03-11 15:09:20 -07:00
parent df7c22088c
commit 1f564dfb23
2 changed files with 49 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
adr/0005-autocorrect-colors-in-inline-styles-in-night-mode.md Normal file
View file

@ -0,0 +1,39 @@
# 5. Adopt ADRs (Architectural decision records)
Date: 2024-03-11
## Status
Accepted
## Context
As the team works on developing night mode, the largest hurdle remains user-
generated content. One particular class of user-generated content that we've
run up against is the use of inline styles to define a background color, with
the assumption the text color would remain constant. With the introduction of
night mode, this assumption is broken, and we are running into color contrast
issues for light-colored text on a background that was presumed to be
contrasting with a darker text color
## Decision
After evaluating the expected performance impacts, we have decided that a CSS
approach targeting `[style*=background]` that sets the color explicitly to
`#333` would be sufficient to address this concern. While we considered a php-
based parser approach, it was found that the CSS approach was performant enough
to meet our needs and considerably more straightforward to implement
See https://phabricator.wikimedia.org/T358240#9591458 for further details
## Consequences
The most direct consequence of this change is that we will be modifying the
display of the page from what the authors explicitly intended for it to be.
We're quite confident that in the vast majority of cases this will not be an
issue, as the omission of font color was most likely predicated upon the
assumption it would remain the same in all cases, but we understand and
acknowledge that this could lead to issues where a user is unhappy with the
color being modified. To mitigate this issue, we have deliberately written the
style such that a defined color will take precendence over this, so ideally the
risk of this is low

10
resources/skins.minerva.base.styles/content/hacks.less
View file

@ -229,6 +229,11 @@ html.skin-night-mode-clientpref-1 {
.night-mode-strip-all-colors-when-safe();
}
}
// T358797 - if a background color is specified, assume they wanted the day mode font color
.mw-parser-output [ style*='background' ] {
color: #333; // not !important so that if a color is also specified it will take priority
}
}
@media ( prefers-color-scheme: dark ) {
@ -268,6 +273,11 @@ html.skin-night-mode-clientpref-1 {
color: var( --color-base ) !important;
background-color: var( --background-color-interactive-subtle ) !important;
}
// T358797 - if a background color is specified, assume they wanted the day mode font color
.mw-parser-output [ style*='background' ] {
color: #333; // not !important so that if a color is also specified it will take priority
}
}
}
// stylelint-enable no-descending-specificity