All colors used in Minerva are converted from Less variables
into CSS custom properties. A new file called CSSCustomProperties.less
is created in the skins.minerva.base.styles module to store
these custom properties and an ADR is provided on the rationale for
dropping support for browsers that don't support custom properties.
The new CSS custom properties follow Codex design token conventions
where possible (and noted when not).
Link colors are unique because their styles are defined in core,
so in that case the Less variables values are set to custom properties.
Those values are then fed back into MediaWiki core for core link
styling.
Also adds a temporary night-mode color palette under the
.skin-nightmode-1 class on the <html> element.
Bug: T356074
Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
Changes
* Update FIXME in userMenu.less to merge selectors
* We replace minerva-user-notifications class with minerva-notifications
to short-circuit Echo's code so that it no longer replaces the Minerva
notification badge with its own.
* We update resources/skins.minerva.scripts/initMobile.js to introduce
our own wire up code - this is responsible for opening Echo overlay
and reseting the counter. The code in Echo will be removed in a follow
up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>)
* We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022
so that Minerva desktop remains consistent with desktop Vector 2022 experience.
* We clearly mark technical debt relating to the special mobile version.
Testing:
* Pixel.js has a group echo that covers all the different variants.
Make sure to update to latest main branch before running these.
* Desktop should behave the same for Minerva as Echo.
* On mobile only when a user has unseen notifications a red circle
is shown. Otherwise a bell icon is shown, never with number.
* On mobile a single button is visible that combines alert and count
numbers.
* With Echo disabled a bell shows that links to the user talk page
Visual changes:
* Previously the red circle became a transparent/gray circle on click. Now
it will always be red.
* Minor aligment changes to red circle and bell icon are expected as
the change prevents MobileFrontend/Echo updating the icon to use
Codex.
Bug: T342907
Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
On desktop, the "Alert" icon had more white space around it than the
"Notice" icon, and its popup displayed with a different offset.
On mobile, the combined icon jumped around while the page was loading.
Change-Id: Icdd5bc6e8478f3453b6461a35b7fb53e8ab014e9
