mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-19 09:11:05 +00:00
8174fe629f
Certain tokens have the same value in night and light theme so do not need to be specified in the night mode palette Bug: T360845 Change-Id: Ibaf6bb1f45997bfee4fa8334948def64265917b0
107 lines
3.5 KiB
Plaintext
107 lines
3.5 KiB
Plaintext
/**
|
|
* Minerva CSS Custom properties
|
|
* ----------------------------
|
|
* Please be aware that these properties are accessible via *any* client-side code.
|
|
* These variables should mirror Codex design token names and values:
|
|
* https://doc.wikimedia.org/codex/latest/design-tokens
|
|
* Only include properties that are required for client-side modification.
|
|
*
|
|
* @private - Currently, these variables are only intended for use by Minerva,
|
|
* however, they are designed to mimic the naming convention in Codex tokens
|
|
* in order to facilitate an eventual migration to a centralized source.
|
|
* @experimental
|
|
* @since February 2024 (MediaWiki 1.43)
|
|
*/
|
|
|
|
@import 'mediawiki.skin.variables.less';
|
|
|
|
// Import CSS variable values from Codex
|
|
// TODO in the future this should be managed by MW core instead
|
|
@import ( less ) 'mediawiki.skin.codex-design-tokens/theme-codex-wikimedia-experimental.css';
|
|
@import 'mediawiki.skin.codex-design-tokens/theme-codex-wikimedia-mode-dark.less';
|
|
|
|
// :extend merges this :root selector into the one provided by theme-codex-wikimedia-experimental.less.
|
|
:root:extend( :root ) {
|
|
--minerva-diff-addedline: @color-success;
|
|
--minerva-diff-deletedline: @color-destructive;
|
|
--box-shadow-color-drawer: rgba( 0, 0, 0, 0.35 );
|
|
}
|
|
|
|
/**
|
|
* Placeholder Night mode color palette.
|
|
* NOTE: These values are temporarily hard coded.
|
|
*/
|
|
.mixin-night-mode-palette() {
|
|
.cdx-mode-dark();
|
|
/* These either do not exist in Codex or might be identical to the light mode
|
|
theme. If the latter we can remove . */
|
|
--color-link: #6e85d8;
|
|
--color-link-red: #e45d52;
|
|
--border-color-progressive--focus: #afb6e9;
|
|
--box-shadow-color-progressive--focus: #afb6e9;
|
|
--color-link-red--visited: #b97876;
|
|
--color-link-external: #6e85d8;
|
|
--color-link-external--visited: #b97876;
|
|
--color-link-external--active: #2a4b8d;
|
|
--color-link--visited: #977dbd;
|
|
--box-shadow-color-drawer: #000;
|
|
--minerva-diff-deletedline: #886525;
|
|
--minerva-diff-addedline: #36c;
|
|
}
|
|
|
|
/**
|
|
* == Forced night mode ==
|
|
* Applies the night mode color palette per the users explicit preference,
|
|
* regardless of system settings.
|
|
*/
|
|
html.skin-theme-clientpref-night {
|
|
color-scheme: dark;
|
|
.mixin-night-mode-palette();
|
|
}
|
|
|
|
/**
|
|
* == Auto night mode ==
|
|
* Applies the night mode color palette only in response to system settings.
|
|
*/
|
|
@media ( prefers-color-scheme: dark ) {
|
|
html.skin-theme-clientpref-os {
|
|
color-scheme: light dark;
|
|
.mixin-night-mode-palette();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* == Night-mode helpers ==
|
|
* The following classes are provided to help third-parties deal with night mode when using the
|
|
* CSS color variables is not feasible.
|
|
*
|
|
* .skin-invert - This class implements an inverted night-mode effect on applied elements using
|
|
* a CSS filter instead of CSS custom properties. For this effect to work, the light mode palette
|
|
* has to be applied to avoid inverting night-mode colors.
|
|
*
|
|
* .notheme - This class prevents night mode from being applied to a specific element. It needs the
|
|
* the light mode color palette, and includes an opinionated color: var( --color-base ); rule
|
|
* since the main assumption underlying the light theme is black text.
|
|
*/
|
|
|
|
/* stylelint-disable-next-line block-no-empty */
|
|
.skin-invert:extend( :root ),
|
|
.notheme:extend( :root ) {
|
|
}
|
|
|
|
.skin-invert,
|
|
.notheme {
|
|
color-scheme: light;
|
|
color: var( --color-base );
|
|
}
|
|
|
|
html.skin-theme-clientpref-night .skin-invert {
|
|
filter: invert( 1 ) hue-rotate( 180deg );
|
|
}
|
|
|
|
@media ( prefers-color-scheme: dark ) {
|
|
html.skin-theme-clientpref-os .skin-invert {
|
|
filter: invert( 1 ) hue-rotate( 180deg );
|
|
}
|
|
}
|