From 5a1a382c17689d23cfca7f5dab3ab106645ac823 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Mon, 22 Mar 2021 15:59:18 -0700
Subject: [PATCH] [styles] LanguageButton: Amend icon color by setting opacity

Amending icon color by setting `opacity` accordingly to Design Style
Guide requirements.
Also using `em` base sizing for accessibility reasons in order to
make icon resizable on user text zoom preferences. And adding some
comments and mediawiki mixin usage.

Bug: T277660
Change-Id: Ia226857a38d3b3d5b4583e95905ef55e406c5cb2
---
 .../skins.vector.styles/LanguageButton.less      | 12 ++++++++++--
 skin.json                                        |  2 +-
 skinStyles/mediawiki.ui.icon.less                | 16 ++++++++--------
 variables.less                                   |  6 ++++++
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/resources/skins.vector.styles/LanguageButton.less b/resources/skins.vector.styles/LanguageButton.less
index 5ddd89812..4399f67b0 100644
--- a/resources/skins.vector.styles/LanguageButton.less
+++ b/resources/skins.vector.styles/LanguageButton.less
@@ -1,9 +1,16 @@
 // The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook
 @import '../../variables.less';
+@import 'mediawiki.mixins.less';
 
-// mw-body-header class can be removed when language button is the default.
+// `.mw-body-header` class can be removed when language button is the default.
 // e.g. upon removal of SkinVector::isLanguagesInHeader
 .mw-body-header .mw-portlet-lang {
+	.mw-ui-icon:before {
+		margin-right: 8px;
+		// Put icon on correct standard normal state color.
+		opacity: 0.87;
+	}
+
 	.vector-menu-heading {
 		// Special treatment for language button, based on Vector font-size
 		font-size: @font-size-base;
@@ -13,6 +20,7 @@
 		padding: 4px 30px 4px 8px;
 		// Prevent select of span text "X languages"
 		user-select: none;
+		// Remove opacity on language button (it applies to more menu because of label color).
 		opacity: 1;
 
 		&:after {
@@ -24,7 +32,7 @@
 		top: auto;
 		right: 0;
 		// align borders of open menu align with button
-		box-sizing: border-box;
+		.box-sizing( border-box );
 		max-height: 65vh;
 		overflow: scroll;
 		border-top-width: 1px;
diff --git a/skin.json b/skin.json
index 982ec8616..f0f0f2917 100644
--- a/skin.json
+++ b/skin.json
@@ -131,7 +131,7 @@
 			"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
 			"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
 			"useDataURI": false,
-			"defaultColor": "#54595d",
+			"defaultColor": "#000",
 			"class": "ResourceLoaderOOUIIconPackModule",
 			"variants": [],
 			"icons": [
diff --git a/skinStyles/mediawiki.ui.icon.less b/skinStyles/mediawiki.ui.icon.less
index 93d5f8014..38d3d4a5b 100644
--- a/skinStyles/mediawiki.ui.icon.less
+++ b/skinStyles/mediawiki.ui.icon.less
@@ -1,10 +1,10 @@
-// The .mw-page-container class is used to restrict this to the modern Vector.
-// This element is not needed in legacy Vector.
+// Override core's `.mw-ui-icon` which defaults to 24x24.
+// The Design Style Guide  and its icons are now set to 20x20.
+// FIXME: With core set to 20x20 this file should become obsolete, see T191021.
+@import '../variables.less';
+
 .mw-portlet-lang .mw-ui-icon:before {
-	// mw-ui-icon in core defaults to 24x24. The style guide now requests 20x20.
-	background-size: 20px auto;
-	width: 20px;
-	height: 20px;
-	min-height: 20px;
-	margin-right: 8px;
+	background-size: unit( @size-icon / @font-size-base, em ) auto;
+	width: unit( @size-icon / @font-size-base, em );
+	height: unit( @size-icon / @font-size-base, em );
 }
diff --git a/variables.less b/variables.less
index f892812cd..202e58c61 100644
--- a/variables.less
+++ b/variables.less
@@ -56,6 +56,12 @@
 @line-height-footer-buttons: 2;
 
 @size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`.
+
+@size-icon: unit( 20 / @font-size-browser, em );
+
+@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
+@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
+
 // FIXME: Use global variable since Echo and CentralNotice use this variable
 @border-color-content: #a7d7f9;
 // Due to darker background gradient, border needs to be darkened for aligned visual perception.