Merge "Update Minerva skin to use Codex icons"

2024-11-15 18:29:50 +00:00 · 2024-09-30 12:10:53 +00:00 · 2024-09-30 12:10:53 +00:00 · e3de4dc0c7
parent e2443d17d6 5ef5694fbf
commit e3de4dc0c7
9 changed files with 85 additions and 58 deletions
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@ -13,11 +13,11 @@
 	},
 	{
 		"resourceModule": "skins.minerva.icons.wikimedia",
-		"maxSize": "0.8KB"
+		"maxSize": "0.95KB"
 	},
 	{
 		"resourceModule": "skins.minerva.mainMenu.icons",
-		"maxSize": "0.3KB"
+		"maxSize": "0.8KB"
 	},
 	{
 		"resourceModule": "skins.minerva.mainMenu.styles",
--- a/includes/Menu/Entries/LanguageSelectorEntry.php
+++ b/includes/Menu/Entries/LanguageSelectorEntry.php
@ -56,7 +56,7 @@ class LanguageSelectorEntry implements IMenuEntry {
 		$this->title = $title;
 		$this->doesPageHaveLanguages = $doesPageHaveLanguages;
 		$this->messageLocalizer = $messageLocalizer;
-		$this->icon = $doesPageHaveLanguages ? 'language-base20' : 'language-disabled';
+		$this->icon = 'language-base20';
 		$this->label = $label;
 		$this->classes = $classes;
 	}
--- a/includes/Skins/SearchBox.mustache
+++ b/includes/Skins/SearchBox.mustache
@ -1,8 +1,9 @@
 <form action="{{form-action}}" method="get" class="minerva-search-form">
 	<div class="search-box">
 		<input type="hidden" name="title" value="{{page-title}}"/>
-		<input class="search minerva-icon--search skin-minerva-search-trigger" id="searchInput"
+		<input class="search skin-minerva-search-trigger" id="searchInput"
 			{{{html-input-attributes}}}>
+		{{#data-btn.data-icon}}<span class="search-box-icon-overlay">{{>Icon}}</span>{{/data-btn.data-icon}}
 	</div>
 	{{!
 		A button when clicked will submit the form
--- a/resources/skins.minerva.base.styles/header.less
+++ b/resources/skins.minerva.base.styles/header.less
@ -85,13 +85,6 @@
 // Night mode
@media screen {
 	html.skin-theme-clientpref-night {
-		// The following icons use background-image instead of mask-image.
-		// These can be removed if a fix for T358246 is found.
-		.minerva-icon.minerva-icon--search-base20,
-		.minerva-icon.minerva-icon--search,
-		.page-actions-menu__list .minerva-icon,
-		.mw-editsection .minerva-icon,
-		.toggle-list .minerva-icon,
 		.branding-box img {
 			.night-mode-invert-image();
 		}
@ -100,11 +93,6 @@

@media screen and ( prefers-color-scheme: dark ) {
 	html.skin-theme-clientpref-os {
-		.minerva-icon.minerva-icon--search-base20,
-		.minerva-icon.minerva-icon--search,
-		.page-actions-menu__list .minerva-icon,
-		.mw-editsection .minerva-icon,
-		.toggle-list .minerva-icon,
 		.branding-box img {
 			.night-mode-invert-image();
 		}
--- a/resources/skins.minerva.base.styles/icons.less
+++ b/resources/skins.minerva.base.styles/icons.less
@ -2,29 +2,67 @@

 // NOTE: @param-is-button-icon lets us change the icon color
 // with background-color by using mask-image.
-.minerva-icon--modified-history {
+// over specified so that it overrides the minerva-icon default.
+.minerva-icon.minerva-icon--modified-history {
 	.cdx-mixin-css-icon( @cdx-icon-history, @param-is-button-icon: true );
 }

-.minerva-icon--expand {
+.minerva-icon.minerva-icon--expand {
 	.cdx-mixin-css-icon( @cdx-icon-next, @param-is-button-icon: true );
 }

-.minerva-icon {
-	.cdx-mixin-css-icon-background();
-	.cdx-mixin-css-icon-size( @size-icon-medium );
-	.cdx-mixin-css-icon-alignment();
-
-	// Temporary fix for https://phabricator.wikimedia.org/T356540
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: ~'calc( max( @{size-icon-medium}, @{min-size-icon-medium} ) )';
+.minerva-icon.minerva-icon--newspaper {
+	.cdx-mixin-css-icon(@cdx-icon-newspaper, @param-is-button-icon: true);
 }

-.minerva-icon-size-small {
+.minerva-icon.minerva-icon-size-small {
 	.cdx-mixin-css-icon-background( @size-icon-small );
 	.cdx-mixin-css-icon-size( @size-icon-small );
-
-	// Temporary fix for https://phabricator.wikimedia.org/T356540
-	background-size: ~'calc( max( @{size-icon-small}, @{min-size-icon-small} ) )';
 }
+
+// Start T374145
+@transparentPNG: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
+
+.minerva-icon {
+	// By default use a transparent PNG. This is important for icons loaded via JavaScript, as without this
+	// the icon will appear as a black square until loaded.
+	-webkit-mask-image: @transparentPNG;
+	mask-image: @transparentPNG;
+	.cdx-mixin-css-icon('none');
+	background-color: @color-subtle;
+}
+
+.minerva-icon--language-disabled {
+	background-color: @color-disabled;
+}
+
+// Dark mode adjustments
+@media screen {
+	html.skin-theme-clientpref-night {
+		// Disable inversion for icons in dark mode, except where explicitly defined
+		.toggle-list .minerva-icon {
+			filter: none;
+		}
+
+		// Invert only branding images (e.g., logo) inside the branding-box in dark mode
+		.branding-box img {
+			filter: invert( 1 );
+		}
+	}
+}
+
+@media screen and ( prefers-color-scheme: dark ) {
+	html.skin-theme-clientpref-os {
+		// Disable inversion for OS-level dark mode as well
+		.toggle-list .minerva-icon {
+			filter: none;
+		}
+
+		// Branding image inversion for OS-level dark mode
+		.branding-box img {
+			filter: invert( 1 );
+		}
+	}
+}
+
+// End T374145
--- a/resources/skins.minerva.base.styles/pageactions.less
+++ b/resources/skins.minerva.base.styles/pageactions.less
@ -37,6 +37,10 @@
 	display: flex;
 	height: @size-icon * 2;
 	justify-content: space-between;
+
+	.disabled .minerva-icon {
+		background: @color-disabled;
+	}
 }

 .page-actions-menu__list-item {
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@ -91,6 +91,10 @@ main {
 	}
 }

+.search-box {
+	position: relative;
+}
+
 // Search input
 // Used in minerva header and search overlay header
 .search-box .search {
@ -100,9 +104,6 @@ main {
 	@padding-vertical-search: 8px - @border-width-base;
 	@padding-start-search-icon: @size-icon-search + ( 2 * @size-icon-search-gutter ) - @size-modifier-border;
 	background-color: @background-color-base; // Support Fennec, Opera Mini: Remove default background, see T38490.
-	background-position: left @size-icon-search-gutter center;
-	background-repeat: no-repeat;
-	background-size: @size-icon-search;
 	// Support Safari: Get rid of rounded corners.
 	-webkit-appearance: none;
 	width: 100%;
@ -117,6 +118,8 @@ main {
 	transition-property: border-color, box-shadow;
 	transition-duration: @transition-duration-medium;
 	font: inherit;
+	// Disable search background for cached HTML.
+	mask-image: none;

 	// [T139928] Hide all pseudo-elements added to search inputs in WebKit.
 	&::-webkit-search-decoration,
@ -127,6 +130,15 @@ main {
 	}
 }

+.search-box-icon-overlay {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	left: 8px;
+	top: 0;
+	bottom: 0;
+}
+
 // Provide focus styles only in non-JS and overlay to prevent double transition.
 .client-nojs .search-box .search:focus,
 .search-overlay .search-box .search:focus {
--- a/resources/skins.minerva.scripts/styles.less
+++ b/resources/skins.minerva.scripts/styles.less
@ -7,11 +7,11 @@
@import 'Toolbar.less';

 .minerva-icon--download {
-	.cdx-mixin-css-icon( @cdx-icon-download, #54595d );
+	.cdx-mixin-css-icon( @cdx-icon-download, @color-subtle );
 }

 .minerva-icon--listBullet {
-	.cdx-mixin-css-icon( @cdx-icon-list-bullet, #54595d );
+	.cdx-mixin-css-icon( @cdx-icon-list-bullet, @color-subtle );
 }

 .mw-mf-page-center__mask {
--- a/skin.json
+++ b/skin.json
@ -372,6 +372,7 @@
 			"useDataURI": false,
 			"defaultColor": "#54595d",
 			"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
+			"useMaskImage": true,
 			"icons": [
 				"block",
 				"ellipsis",
@ -395,29 +396,11 @@
 			]
 		},
 		"skins.minerva.icons.wikimedia": {
-			"selectorWithVariant": ".minerva-icon--{name}-{variant}",
-			"selectorWithoutVariant": ".minerva-icon--{name}-base20, .minerva-icon--{name}",
+			"selectorWithoutVariant": ".minerva-icon--{name}-base20, .minerva-icon--{name}-disabled, .minerva-icon--{name}",
 			"useDataURI": false,
 			"defaultColor": "#54595d",
-			"variants": {
-				"progressive": {
-					"color": "#36c",
-					"global": true
-				},
-				"invert": {
-					"color": "#fff",
-					"global": true
-				},
-				"warning": {
-					"color": "#fc3",
-					"global": true
-				},
-				"disabled": {
-					"color": "#72777d",
-					"global": true
-				}
-			},
 			"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
+			"useMaskImage": true,
 			"icons": [
 				"edit",
 				"wikiText",
@ -445,16 +428,17 @@
 		},
 		"skins.minerva.personalMenu.icons": {
 			"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
+			"useMaskImage": true,
 			"selectorWithoutVariant": ".minerva-icon--{name}",
 			"defaultColor": "#54595d",
 			"icons": [
 				"sandbox"
 			],
-			"variants": [],
 			"useDataURI": false
 		},
 		"skins.minerva.mainMenu.advanced.icons": {
 			"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
+			"useMaskImage": true,
 			"selectorWithoutVariant": ".minerva-icon--{name}",
 			"defaultColor": "#54595d",
 			"icons": [
@ -467,7 +451,7 @@
 		},
 		"skins.minerva.mainMenu.icons": {
 			"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
-			"variants": [],
+			"useMaskImage": true,
 			"selectorWithoutVariant": ".minerva-icon--{name}",
 			"defaultColor": "#54595d",
 			"useDataURI": false,