Enable night theme in Vector

- New night theme added via Codex `.cdx-mode-dark();` mixin.
- CSS custom properties separated from skin.less.
- Font-size rem conversion removed since Codex now uses rems.
- bundlesize increased by 1kb ( followup from
Icfcb5c7418061a5727580f0685054356ba4edb72 ).
- Icons that use background-images are inverted for night-theme.
- Linter error fixed for long-lines in clientPreferences.js

Co-Author: <Bernard Wang> bwang@wikimedia.org
Bug: T354889
Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c
Change-Id: I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1

bundlesize.config.json

@@ -2,7 +2,7 @@
 	"total": {
 		"vector-2022": {
 			"scripts": "80KB",
-			"styles": "18KB"
+			"styles": "19KB"
 		},
 		"vector": {
 			"scripts": "80KB",
@@ -24,7 +24,7 @@
 		},
 		{
 			"resourceModule": "skins.vector.styles",
-			"maxSize": "11.4 kB"
+			"maxSize": "11.8 kB"
 		},
 		{
 			"resourceModule": "skins.vector.js",

includes/templates/Logo.mustache

@@ -8,7 +8,7 @@
 	{{! alt is provided for valid HTML but given aria-hidden not needed. }}
 	<img class="mw-logo-icon" src="{{.}}" alt="" aria-hidden="true" height="50" width="50">
 	{{/icon}}
-	<span class="mw-logo-container">
+	<span class="mw-logo-container skin-invert">
 		{{#wordmark}}
 		{{!-- djlint:off H006 --}}
 		<img class="mw-logo-wordmark" alt="{{msg-sitetitle}}" src="{{src}}" style="{{style}}">

resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less

@@ -14,6 +14,11 @@
  */
 
 @import 'mediawiki.skin.defaults.less';
+
+/**
+ * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
+ * The CSS variable values are imported in CSSCustomProperties.less.
+ */
 @import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
 
 // Overrides for Codex variables:

resources/skins.vector.clientPreferences/clientPreferences.js

@@ -71,7 +71,7 @@ function toggleDocClassAndSave( featureName, value, config ) {
 		}, 100 )();
 		// END FIXME.
 	} else {
-		// This case is much simpler, the API transparently takes care of classes as well as storage.
+		// This case is much simpler, the API transparently takes care of classes as well as storage
 		mw.user.clientPrefs.set( featureName, value );
 		callback();
 	}

resources/skins.vector.styles/CSSCustomProperties.less

@@ -1,44 +1,75 @@
-/**
- * Vector 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 Vector 2022,
- *            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 October 2023 (MediaWiki 1.42)
- */
+@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';
 
-:root {
-	--font-size-medium: unit( @font-size-small, rem );
-	--line-height-medium: @line-height-small;
-	--background-color-base: @background-color-base;
+/**
+ * Light mode
+ *
+ * Applies the light mode color palette by default
+ * or with the .skin-invert, or .notheme classes
+ */
+:root,
+.skin-invert,
+.notheme {
+	.cdx-mode-reset();
 }
 
-.night-mode-palette() {
-	/* T354889 */
+/**
+ * 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();
+}
+
+html.skin-theme-clientpref-night .skin-invert {
+	color-scheme: light;
+	filter: invert( 1 ) hue-rotate( 180deg );
+}
+
+html.skin-theme-clientpref-night .notheme {
+	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();
+	}
+
+	html.skin-theme-clientpref-os .notheme {
+		color-scheme: light;
+	}
+
+	html.skin-theme-clientpref-os .skin-invert {
+		color-scheme: light;
+		filter: invert( 1 ) hue-rotate( 180deg );
+	}
+}
+
+/**
+ * Font size settings
+ */
+.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: unit( @font-size-medium, rem );
-	--line-height-medium: 1.6;
+	--font-size-medium: @font-size-medium;
+	--line-height-medium: @line-height-medium;
 }
 
 .vector-feature-custom-font-size-clientpref-2 {
-	--font-size-medium: unit( @font-size-x-large, rem );
+	--font-size-medium: @font-size-x-large;
 	--line-height-medium: 1.5;
 }
-
-html.skin-theme-clientpref-night {
-	.night-mode-palette();
-}
-
-@media ( prefers-color-scheme: dark ) {
-	html.skin-theme-clientpref-os {
-		.night-mode-palette();
-	}
-}

resources/skins.vector.styles/components/Icon.less

@@ -20,3 +20,22 @@
 	// Temporary fix for https://phabricator.wikimedia.org/T356540
 	background-size: ~'calc( max( @{size-icon-x-small}, @{min-size-icon-x-small} ) )';
 }
+
+// FIXME: T363920 Remove when all icons are migrated from ResourceLoader to Codex
+// Dont invert language icon because it is blue
+.vector-icon:not( .mw-ui-icon-wikimedia-language-progressive ) {
+	html.skin-theme-clientpref-night & {
+		filter: invert( 1 );
+	}
+
+	/**
+	 * 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 & {
+			filter: invert( 1 );
+		}
+	}
+}

resources/skins.vector.styles/skin.less

@@ -4,7 +4,6 @@
  */
 @import './variables.less';
 @import './mixins.less';
-@import './CSSCustomProperties.less';
 
 @media screen {
 	// Common styles

skin.json

@@ -299,6 +299,7 @@
 				"toc": false
 			},
 			"styles": [
+				"resources/skins.vector.styles/CSSCustomProperties.less",
 				"resources/skins.vector.styles/skin.less"
 			],
 			"lessMessages": [