mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/CSSCustomProperties.less

/**
 * 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 (inline) 'mediawiki.skin.codex-design-tokens/theme-codex-wikimedia-experimental.css';

// :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() {
	--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 );
	}
}