mediawiki-skins-Vector/resources/skins.vector.styles/CSSCustomProperties.less

@import 'mediawiki.skin.variables.less';
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-mixin-dark.less';
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-reset.less';

/**
 * FIXME: Temporary Night-mode override classes
 * Remove these once T363849 has been addressed.
 *
 * The following classes are meant to force OOUI interfaces
 * into light-mode when night-mode is enabled. They should be
 * grouped with the `.notheme` rulset as an alternative to
 * using the `.notheme` class in multiple places.
 *
 * Note: These are wrapped in quotes to avoid dashed being interpreted as minus signs,
 * along with a `~` to unwrap them when they are used as selectors.
 */
@OOUIOverrideSelectors: ~'.ve-ui-overlay, .oo-ui-popupWidget-popup, .oo-ui-toolbar';  // T363861 - VisualEditor Overlays

/**
 * T365764 - OOUI Icon classes for inverted dark-mode icons.
 * This includes OOUI icons that are not colored (progressive/destructive), checkbox icons, and
 * indicator widgets.
 */
@OOUIIconSelectors: ~'.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ), .oo-ui-indicatorElement-indicator ';

/**
 * Light mode
 *
 * Applies the light mode color palette by default
 * or with the .skin-invert, or .notheme classes
 */
:root,
.skin-invert,
.notheme,
@{OOUIOverrideSelectors} {
	.cdx-mode-reset();
}

/**
 * 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;
	.cdx-mode-dark();

	// T363911 Temporarily override Codex variable for Vector night mode release
	// Remove after task has been resolved and new color is available in Codex.
	--color-link-red: #b97876;
}

/**
 * Forced light mode.
 * Also special treatment of inverted OOUI icons, see T365764.
 */
// T365102 invert class specifically for image related elements
html.skin-theme-clientpref-night .skin-invert-image img,
html.skin-theme-clientpref-night .skin-invert,
html.skin-theme-clientpref-night @{OOUIIconSelectors} {
	color-scheme: light;
	filter: invert( 1 ) hue-rotate( 180deg );
}

html.skin-theme-clientpref-night .notheme,
html.skin-theme-clientpref-night @{OOUIOverrideSelectors} {
	color-scheme: light;
	color: var( --color-base );
}

/**
 * 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;
		.cdx-mode-dark();

		// T363911 Temporarily override Codex variable for Vector night mode release
		// Remove after task has been resolved and new color is available in Codex.
		--color-link-red: #b97876;
	}

	html.skin-theme-clientpref-os .notheme,
	html.skin-theme-clientpref-os @{OOUIOverrideSelectors} {
		color-scheme: light;
	}

	// T365102 invert class specifically for image related elements
	html.skin-theme-clientpref-os .skin-invert-image img,
	html.skin-theme-clientpref-os .skin-invert,
	html.skin-theme-clientpref-os @{OOUIIconSelectors} {
		color-scheme: light;
		filter: invert( 1 ) hue-rotate( 180deg );
	}
}

/**
 * Prevent double inversion.
 * Do not apply invert to elements that are inside a notheme or a skin-invert class to avoid inversion in light theme or
 * double inversion in an already inverted element
 * - OOUI icons inside .notheme OOUI elements
 * - OOUI icons inside elements with .skin-invert
 * - OOUI icons inside elements with .notheme
 */
@{OOUIOverrideSelectors} @{OOUIIconSelectors},
.skin-invert @{OOUIIconSelectors},
.notheme @{OOUIIconSelectors} {
	filter: none !important; /* stylelint-disable-line declaration-no-important */
}

/**
 * Font size settings
 */
.vector-feature-custom-font-size-clientpref--excluded,
.vector-feature-custom-font-size-clientpref-0 {
	--font-size-medium: @font-size-small;
	--line-height-medium: @line-height-small;
}

.vector-feature-custom-font-size-clientpref-1 {
	--font-size-medium: @font-size-medium;
	--line-height-medium: @line-height-medium;
}

.vector-feature-custom-font-size-clientpref-2 {
	--font-size-medium: @font-size-x-large;
	--line-height-medium: 1.5;
}