Normalize small fonts

We use 0.9em in a variety of places, to shrink font-size from the
default font-size. However given we use 16px as a base font this results
in a font-size of 14.4px. This can also cause problems with icons resulting
in rounding errors when used with multiple icons

This changes the font-size to 14px for those areas and makes future usages
centralized by adding a specific variable.
Also amending `@font-size-browser` variable to be aligned to naming convention
and equal to Vector one.

Bug: T229399
Change-Id: I8e31bca2982c049a9be73c89aa9e8e2aa8141269

components/ToggleList/MenuListItem.less

@@ -4,7 +4,7 @@
 @import '../../minerva.less/minerva.mixins';
 
 .toggle-list-item__anchor--menu {
-	font-size: @pageActionFontSize;
+	font-size: @font-size-minerva-small;
 	font-weight: bold;
 	// Fill the list item cell.
 	.box-sizing( border-box );

minerva.less/minerva.mixins.less

@@ -25,14 +25,14 @@
 	left: 85px;
 	border-radius: 2px;
 	padding: 0 6px 1px;
-	font-size: 0.9em;
+	font-size: @font-size-minerva-small;
 	font-weight: bold;
 }
 
 .changeslist-meta() {
 	position: absolute;
 	left: 0;
-	font-size: 0.9em;
+	font-size: @font-size-minerva-small;
 }
 
 .changeslist-row() {
@@ -50,7 +50,7 @@
 	color: @colorGray7;
 	margin: 0.5em 0;
 	padding-left: 85px;
-	font-size: 0.9em;
+	font-size: @font-size-minerva-small;
 }
 
 .changeslist-header() {
@@ -65,7 +65,7 @@
 
 // Generic mixin for applying styles to text that accompanies/adds context to workflows
 .secondary-text() {
-	font-size: 0.9em;
+	font-size: @font-size-minerva-small;
 	color: @grayMedium;
 	margin-top: 0.5em;
 	line-height: 1.4;

minerva.less/minerva.variables.less

@@ -15,8 +15,9 @@
 @fontFamilySans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
 @fontFamilyBase: @fontFamilySans;
 
-@fontSizeBrowserDefault: 16; // Assumed browser default of `16px`.
-@tocFontSize: 0.8em;
+@font-size-browser: 16; // Assumed browser default of `16px`.
+@font-size-minerva-small: unit( 14 / @font-size-browser, em ); // Equals `14px` at `16px` browser default.
+@tocFontSize: @font-size-minerva-small;
 
 @indicatorFontSize: 0.4em;
 
@@ -54,12 +55,12 @@
 @contentMargin: 16px;
 
 // Header
-@headerHeight: unit( 54 / @fontSizeBrowserDefault, em );
+@headerHeight: unit( 54 / @font-size-browser, em );
 @headerVerticalPadding: 0.15em;
 @headerMarginTop: -1px; // used to hide the header border top when a banner is not present
 @searchBoxWidth: 375/16em;
 @iconSizeTotal: @iconSize + @iconGutterWidth + @iconGutterWidth;
-@deviceWidthTabletEms: unit( @width-breakpoint-tablet / @fontSizeBrowserDefault, em );
+@deviceWidthTabletEms: unit( @width-breakpoint-tablet / @font-size-browser, em );
 @brandingBoxWidth: @deviceWidthTabletEms - (3 * @menuButtonIconSize + @iconGutterWidth) - @searchBoxWidth;
 
 @titleSectionSpacingTop: 20px;
@@ -68,7 +69,6 @@
 // Page actions
 @taglineFontSize: 0.85em;
 @pageActionBorder: 1px;
-@pageActionFontSize: 0.9em;
 @pageActionToolbarHeight: 44px; // total height is 46px. 2px added by border on .page-actions-menu
 
 // colors

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

@@ -29,7 +29,7 @@ footer {
 	.last-modifier-tagline {
 		display: block;
 		width: 100%;
-		font-size: 0.9em;
+		font-size: @font-size-minerva-small;
 		padding: 7px 2em 7px 0;
 	}
 

resources/skins.minerva.content.styles/links.less

@@ -55,7 +55,7 @@ a {
 // Generic class name needed
 .return-link {
 	display: block;
-	font-size: 0.9em;
+	font-size: @font-size-minerva-small;
 	margin-top: 1.5em;
 }
 

skinStyles/mediawiki.special.search.styles/minerva.less

@@ -17,7 +17,7 @@
 		}
 
 		div.searchresult {
-			font-size: 0.9em;
+			font-size: @font-size-minerva-small;
 			width: 100%;
 			margin-left: 12px;
 		}

skinStyles/mobile.startup/toast.less

@@ -45,7 +45,7 @@
 
 .mw-notification,
 .toast {
-	font-size: 0.9em;
+	font-size: @font-size-minerva-small;
 	padding: 0.9em 1em;
 	background-color: @toastNotificationColor;
 	color: #fff;