mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-16 18:58:45 +00:00
59fd0cd5dc
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
44 lines
1.7 KiB
Plaintext
44 lines
1.7 KiB
Plaintext
/**
|
|
* ###IMPORTANT:##
|
|
* If editing this file, please also edit the respective file in the Vector skin.
|
|
* ####
|
|
*
|
|
* This file is a LESS @import match for 'mediawiki.skin.variables.less'
|
|
* when MinervaNeue is the active skin.
|
|
*
|
|
* Please also note, that both current Wikimedia Design Style Guide based skins,
|
|
* MinervaNeue and Vector 2022 are using the same variable values respectively in their
|
|
* repositories.
|
|
*/
|
|
@import 'mediawiki.skin.defaults.less';
|
|
|
|
// Import the Codex design tokens from the “WikimediaUI” theme.
|
|
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
|
|
|
|
// Overrides for Codex tokens:
|
|
|
|
@font-size-base: 1em; // Codex: 16px
|
|
|
|
// == Typography ==
|
|
// Body content uses the user setting in browser / the system default sans-serif font:
|
|
// Arial on Windows, Roboto on Android.
|
|
// FIXME: Use WikimediaUI Base's OS specific default sans-serif fonts.
|
|
@font-family-sans: @font-family-sans--fallback;
|
|
|
|
/**
|
|
* Link styles are defined in MediaWiki core.
|
|
* These variables are first defined in core/resources/src/mediawiki.less/mediawiki.skin.defaults.less
|
|
* Then they're overridden here for night mode compatibility
|
|
* Then they're fed back into MediaWiki core & extensions
|
|
* through the usage of @import "mediawiki.skin.variables.less".
|
|
* 🙃
|
|
**/
|
|
@color-link: var(--color-link);
|
|
@color-link--visited: var( --color-visited);
|
|
@color-link--active: var(--color-progressive--active);
|
|
@color-link-new: var(--color-link-red);
|
|
@color-link-new--visited: var(--color-link-red--visited);
|
|
@color-link-external: var(--color-link-external);
|
|
@color-link-external--visited: var(--color-link-external--visited);
|
|
@color-link-external--active: var(--color-link-external--active);
|