Integrate Codex experimental design token build

Use the Codex experimental design token build to
providing CSS custom property version of design tokens
for night mode.

The build also provides Less variables which are
references to the CSS custom properties. These are
pulled into the mediawiki.skin.variables.less file
and propagated across core and extensions.

Bug: T358059
Change-Id: I78558f6cc1de91d62fb9f8cbf571f73b51eae8ca

bundlesize.config.json

@@ -1,7 +1,7 @@
 [
 	{
 		"resourceModule": "skins.minerva.base.styles",
-		"maxSize": "8.5KB"
+		"maxSize": "9KB"
 	},
 	{
 		"resourceModule": "skins.minerva.content.styles.images",

resources/mediawiki.less/mediawiki.skin.variables.less

@@ -12,8 +12,13 @@
  */
 @import 'mediawiki.skin.defaults.less';
 
-// Import the Codex design tokens from the “WikimediaUI” theme.
+/**
-@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
+ * Codex experiment design tokens.
+ * This is imported using the "(reference)" option to avoid duplicating the :root block which
+ * contains CSS custom properties. However, it still imports the Less variables, which are
+ * then propagated to anyone using `@import 'mediawiki.skin.variables.less'`;
+ */
+@import ( reference ) 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-experimental.less';
 
 // Overrides for Codex tokens:
 
@@ -26,43 +31,15 @@
 @font-family-sans: @font-family-sans--fallback;
 
 /**
- * Link styles are defined in MediaWiki core.
+ * == Non-standard variable names ==
- * These variables are first defined in core/resources/src/mediawiki.less/mediawiki.skin.defaults.less
+ * These variables don't correspond to Codex variables.
- * Then they're overridden here for night mode compatibility
+ * TODO: Determine whether any of these are actually used in practice.
- * Then they're fed back into MediaWiki core & extensions
- * through the usage of @import "mediawiki.skin.variables.less".
- * 🙃
  **/
-@color-subtle: var(--color-subtle);
+@color-link: var( --color-progressive );
-@color-error: var(--color-error);
-@color-progressive: var(--color-progressive);
-@color-destructive: var(--color-destructive);
-@color-inverted:  var(--color-inverted);
-@color-base: var(--color-base);
-@background-color-progressive-subtle: var(--background-color-progressive-subtle);
-@color-link: var(--color-link);
 @color-link--visited: var( --color-visited);
 @color-link--active: var(--color-progressive--active);
 @color-link-new: var(--color-link-red);
 @color-link-new--visited: var(--color-link-red--visited);
-@color-link-external: var(--color-link-external);
+@color-link-external: var( --color-progressive );
-@color-link-external--visited: var(--color-link-external--visited);
+@color-link-external--visited: var( --color-visited );
-@color-link-external--active: var(--color-link-external--active);
+@color-link-external--active:  var(--color-progressive--active);
-@background-color-base: var(--background-color-base);
-@background-color-destructive: var(--background-color-destructive);
-@background-color-interactive: var(--background-color-interactive);
-@background-color-interactive-subtle: var(--background-color-interactive-subtle);
-@background-color-notice-subtle: var(--background-color-notice-subtle);
-@border-color-base: var(--border-color-base);
-@border-color-inverted: var(--border-color-inverted);
-@border-color-muted: var(--border-color-muted);
-@border-color-progressive--focus: var(--border-color-progressive--focus);
-@border-color-subtle: var(--border-color-subtle);
-@border-color-transparent: var(--border-color-transparent);
-@box-shadow-color-progressive--focus: var(--box-shadow-color-progressive--focus);
-@color-visited: var(--color-visited);
-@color-progressive--active: var(--color-progressive--active);
-@color-link-red: var(--color-link-red);
-@color-link-red--visited: var(--color-link-red--visited);
-@color-link--active: var(--color-link--active);
-@color-emphasized: var(--color-emphasized);

resources/skins.minerva.base.styles/CSSCustomProperties.less

@@ -11,64 +11,30 @@
  *            in order to facilitate an eventual migration to a centralized source.
  * @experimental
  * @since February 2024 (MediaWiki 1.43)
- * This file is kept separate from the skin.less to avoid the side effects of CSS variable conversion
- * that occurs to LESS variables when importing mediawiki.skin.variables.
- * We import mediawiki.skin.defaults to obtain the original unmodified values for these CSS variables.
  */
-@import 'mediawiki.skin.defaults.less';
 
-// Import the Codex design tokens from the “WikimediaUI” theme.
+@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-experimental.less';
-@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
 
-.light-mode-palette() {
+/**
-	/* Standard Codex colors */
+ * The following line groups the .skin-invert selector along with the :root selector.
-	--background-color-base: @background-color-base;
+ * (From the theme-wikimedia-ui-experimental.less import above).
-	--background-color-destructive: @background-color-destructive;
+ * This ensures that the light-mode color palette is always associated with the .skin-invert class.
-	--background-color-interactive: @background-color-interactive;
+ */
-	--background-color-interactive-subtle: @background-color-interactive-subtle;
-	--background-color-progressive-subtle: @background-color-progressive-subtle;
-	--border-color-base: @border-color-base;
-	--border-color-inverted: @border-color-inverted;
-	--border-color-muted: @border-color-muted;
-	--border-color-progressive--focus: @border-color-progressive--focus;
-	--border-color-subtle: @border-color-subtle;
-	--border-color-transparent: @border-color-transparent;
-	--box-shadow-color-progressive--focus: @box-shadow-color-progressive--focus;
-	--color-base: @color-base;
-	--color-error: @color-error;
-	--color-inverted: @color-inverted;
-	--color-subtle: @color-subtle;
-	--color-emphasized: @color-emphasized;
 
-	// NOTE: The following link colors are fed *back* into MediaWiki core
+/* stylelint-disable-next-line */
-	// by being used in mediawiki.skin.variables.less.
+.skin-invert:extend(:root) {}
-	--color-progressive: @color-progressive;
+/**
-	--color-visited: @color-visited;
+ * As with the .skin-invert class, .notheme should also reset the CSS variables to the default light theme.
-	--color-progressive--active: @color-progressive--active;
+ */
-	--color-link: @color-progressive;
-	--color-link-red: @color-link-red;
-	--color-link-red--visited: @color-link-red--visited;
-	--color-link-external: @color-progressive;
-	--color-link-external--visited: @color-visited;
-	--color-link-external--active: @color-progressive--active;
-	--color-link--visited: @color-visited;
-	// T357381: Note Minerva uses a different active color then the standard one.
-	--color-link--active: #faa700;
 
-	/* Minerva specific colors */
+/* stylelint-disable-next-line */
-	// FIXME: Replace with Codex drop shadows
+.notheme:extend(:root) {}
-	--box-shadow-color-drawer: rgba( 0, 0, 0, 0.35 );
-}
-
-:root {
-	.light-mode-palette();
-}
 
 /**
  * Placeholder Night mode color palette.
  * NOTE: These values are temporarily hard coded.
  */
-.night-mode-palette() {
+.mixin-night-mode-palette() {
 	--color-base: #f8f9fa;
 	--color-subtle: #d4d5d5;
 	--color-link: #6e85d8;
@@ -95,35 +61,47 @@
 	--color-link-external--visited: #b97876;
 	--color-link-external--active: #2a4b8d;
 	--color-link--visited: #977dbd;
-	--box-shadow-color-drawer: #afb6e9;
+	--box-shadow-color-drawer: #000;
 	--color-emphasized: #fff;
 }
 
-.night-mode-invert() {
+/**
+ * Forced night mode.
+ *
+ * Applies the night mode color palette per the users explicit preference,
+ * regardless of system settings.
+ */
+html.skin-night-mode-clientpref-1 {
+	color-scheme: dark;
+	.mixin-night-mode-palette();
+}
+
+html.skin-night-mode-clientpref-1 .skin-invert {
 	color-scheme: light;
-	.light-mode-palette();
-	// Keep in sync with .night-mode-invert-image() mixin.
 	filter: invert( 1 ) hue-rotate( 180deg );
 }
 
-html.skin-night-mode-clientpref-1 {
+html.skin-night-mode-clientpref-1 .notheme {
-	color-scheme: dark;
+	color-scheme: light;
-	.night-mode-palette();
-
-	/** Content that uses the mw-invert class is inverted and the light mode palette should be used. */
-	.skin-invert {
-		.night-mode-invert();
-	}
 }
 
+/**
+ * Auto night mode.
+ *
+ * Applies the night mode color palette only in response to system settings.
+ */
 @media ( prefers-color-scheme: dark ) {
 	html.skin-night-mode-clientpref-2 {
 		color-scheme: light dark;
-		.night-mode-palette();
+		.mixin-night-mode-palette();
+	}
 
-		/** Content that uses the mw-invert class is inverted and the light mode palette should be used. */
+	html.skin-night-mode-clientpref-2 .notheme {
-		.skin-invert {
+		color-scheme: light;
-			.night-mode-invert();
+	}
-		}
+
+	html.skin-night-mode-clientpref-2 .skin-invert {
+		color-scheme: light;
+		filter: invert( 1 ) hue-rotate( 180deg );
 	}
 }

skin.json

@@ -155,6 +155,9 @@
 			]
 		}
 	},
+	"SkinCodexThemes": {
+		"minerva": "experimental"
+	},
 	"AutoloadNamespaces": {
 		"MediaWiki\\Minerva\\": "includes/"
 	},