mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-16 10:50:52 +00:00
649cb10622
Use the Codex experimental design token build to providing CSS custom property version of design tokens for night mode. The build also provides Less variables which are references to the CSS custom properties. These are pulled into the mediawiki.skin.variables.less file and propagated across core and extensions. Bug: T358059 Change-Id: I78558f6cc1de91d62fb9f8cbf571f73b51eae8ca
46 lines
1.7 KiB
Plaintext
46 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';
|
|
|
|
/**
|
|
* Codex experiment design tokens.
|
|
* This is imported using the "(reference)" option to avoid duplicating the :root block which
|
|
* contains CSS custom properties. However, it still imports the Less variables, which are
|
|
* then propagated to anyone using `@import 'mediawiki.skin.variables.less'`;
|
|
*/
|
|
@import ( reference ) 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-experimental.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;
|
|
|
|
/**
|
|
* == Non-standard variable names ==
|
|
* These variables don't correspond to Codex variables.
|
|
* TODO: Determine whether any of these are actually used in practice.
|
|
**/
|
|
@color-link: var( --color-progressive );
|
|
@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-progressive );
|
|
@color-link-external--visited: var( --color-visited );
|
|
@color-link-external--active: var(--color-progressive--active);
|