mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-18 16:51:05 +00:00
5d6b866890
The classes: - skin-night-mode-clientpref-0 - skin-night-mode-clientpref-1 - skin-night-mode-clientpref-2 is being replaced with - skin-theme-clientpref-day - skin-theme-clientpref-night - skin-theme-clientpref-os - Moved $forceNightMode to be a text parameter (dat|night|os) - Keep adding the old classes to the html element, to give the ability of gradual deployment The preference is renamed from minerva-night-mode to minerva-theme (a follow up to consider migrating existing values will follow). The query string minervanightmode continues to behave the same but now accepts other values such as day, night and os. Bug: T359983 Change-Id: Ia253de68f94236e7fe2219b736dd6084c64ce838
131 lines
4.1 KiB
Plaintext
131 lines
4.1 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.codex-design-tokens/theme-wikimedia-ui-experimental.less';
|
|
|
|
// :extend merges this :root selector into the one provided by theme-wikimedia-ui-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() {
|
|
--color-base: #f8f9fa;
|
|
--color-subtle: #d4d5d5;
|
|
--color-link: #6e85d8;
|
|
--color-link-red: #e45d52;
|
|
--color-progressive: #6e85d8;
|
|
--background-color-destructive: #e45d52;
|
|
--color-progressive--active: #afb6e9;
|
|
--background-color-base: #101418;
|
|
--color-visited: #977dbd;
|
|
--background-color-interactive: #202122;
|
|
--background-color-interactive-subtle: #202122;
|
|
--background-color-progressive-subtle: #202122;
|
|
--border-color-base: #2e3136;
|
|
--border-color-inverted: #f8f9fa;
|
|
--border-color-muted: #2e3136;
|
|
--border-color-progressive--focus: #afb6e9;
|
|
--border-color-subtle: #d4d5d5;
|
|
--border-color-transparent: transparent;
|
|
--box-shadow-color-progressive--focus: #afb6e9;
|
|
--color-error: #f8a397;
|
|
--color-inverted: #f8f9fa;
|
|
--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;
|
|
--color-emphasized: #fff;
|
|
|
|
// Message box colors. [[T358402#9598616]]
|
|
--background-color-error-subtle: #70231f;
|
|
--background-color-warning-subtle: #4f3a1a;
|
|
--background-color-success-subtle: #194538;
|
|
--background-color-notice-subtle: #202122;
|
|
--border-color-error: #e45d52;
|
|
--border-color-warning: #ad822b;
|
|
--border-color-success: #0f9b7a;
|
|
--border-color-notice: #72777d;
|
|
--color-warning: #e7b032;
|
|
--color-success: #74c9ac;
|
|
--color-notice: #f8f9fa;
|
|
|
|
--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 );
|
|
}
|
|
}
|