Merge "Integrate Codex experimental design token build"

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/"
 	},