mediawiki-skins-Citizen/resources/skins.citizen.styles/common/features.less

/**
 * Dark theme mixin
 * Dark theme needs a mixin because it is being used by the auto theme as well
 */
 .theme-dark() {
	--color-primary__l: 60%;

	--color-surface-0: ~'hsl( var( --color-primary__h ), 20%, 10% )';
	--color-surface-1: ~'hsl( var( --color-primary__h ), 25%, 12% )';
	--color-surface-2: ~'hsl( var( --color-primary__h ), 25%, 15% )';
	--color-surface-3: ~'hsl( var( --color-primary__h ), 15%, 20% )';
	--color-surface-4: ~'hsl( var( --color-primary__h ), 15%, 25% )';

	--color-base--emphasized: ~'hsl( var( --color-primary__h ), 80%, 95% )';
	--color-base: ~'hsl( var( --color-primary__h ), 25%, 80% )';
	--color-base--subtle: ~'hsl( var( --color-primary__h ), 25%, 65% )';

	--background-color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 15% )';
	--background-color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 20% )';

	--background-color-overlay: ~'hsla( var( --color-primary__h ), 20%, 10%, 0.95 )';
	--background-color-overlay--lighter: ~'hsla( var( --color-primary__h ), 20%, 10%, 0.6 )';

	--color-surface-2--hover: ~'hsl( var( --color-primary__h ), 25%, 19% )';
	--color-surface-2--active: ~'hsl( var( --color-primary__h ), 25%, 11% )';

	--border-color-base: rgba( 255, 255, 255, 0.05 );
	--border-color-subtle: rgba( 255, 255, 255, 0.02 );
	--border-color-interactive: rgba( 255, 255, 255, 0.08 );

	--surface-shadow: var( --color-primary__h ), 50%, 3%;
	--shadow-strength: 0.8;

	--filter-invert: invert( 1 ) hue-rotate( 180deg );

	--font-grade: -25;

	// FIXME: Browsers seem to treat GRAD differently, disabling for now
	// Dark theme usually have an illusion of thicker fonts
	// So we have to tune it back
	// font-variation-settings: 'GRAD' -90;

	color-scheme: dark;
}

.feature-pure-black() {
	--color-surface-0: #000;
	--color-surface-1: ~'hsl( var( --color-primary__h ), 20%, 4% )';
	--color-surface-2: ~'hsl( var( --color-primary__h ), 25%, 6% )';
	--color-surface-3: ~'hsl( var( --color-primary__h ), 25%, 9% )';
	--color-surface-4: ~'hsl( var( --color-primary__h ), 15%, 14% )';

	--color-surface-2--hover: ~'hsl( var( --color-primary__h ), 25%, 10% )';
	--color-surface-2--active: ~'hsl( var( --color-primary__h ), 25%, 2% )';

	--shadow-strength: 0.04;
}

.skin-theme-clientpref-night {
	:root& {
		.theme-dark();
	}
}

.skin-theme-clientpref-os {
	@media ( prefers-color-scheme: dark ) {
		:root& {
			.theme-dark();
		}
	}
}

.citizen-feature-pure-black-clientpref-1 {
	:root.skin-theme-clientpref-night& {
		.feature-pure-black();
	}

	@media ( prefers-color-scheme: dark ) {
		:root.skin-theme-clientpref-os& {
			.feature-pure-black();
		}
	}
}

.citizen-feature-custom-font-size-clientpref-small {
	.citizen-body {
		font-size: var( --font-size-small );
	}
}

.citizen-feature-custom-font-size-clientpref-large {
	.citizen-body {
		font-size: var( --font-size-large );
	}
}

.citizen-feature-custom-width-clientpref-standard {
	:root& {
		--width-layout: 1080px;
	}
}

.citizen-feature-custom-width-clientpref-wide {
	:root& {
		--width-layout: 1600px;
	}
}

.citizen-feature-custom-width-clientpref-full {
	:root& {
		--width-layout: 100vw;
	}
}