styles: Unify on standard external link icon (re-applying)

Re-applying: Unify on using standard OOUI 'linkExternal' icon, which is
directly replacing Vector's image without relying on ResourceLoader.
This time we have lo- and hi-dpi optimized icon.
Please note that the icon features standard link color `#36c` which is
implemented in a later step. Due to the small icon size and the fact
that current external link icon is also not using the legacy color, this
seems acceptable to move forward with.

Also using relative `em` instead of `px` to support user text zoom
capabilities and introducing a `@size-indicator` variable to be replaced
by WikimediaUI Base variables later.
Alternative to I49de3bfff45.

Replacing images and image names to make quicker lookup with icon
collection possible future-facing.

Note that CSSJanus is flipping the `ltr` string in the background image
rule to `rtl`, therefore making sure that both icons are available.

Bug: T261391
Change-Id: I1c3cfb4cd83fe4d5d08c06b84cdc192cb90c0dfe

resources/common/images/external-link-ltr-icon.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
-	<path fill="#fff" stroke="#36c" d="M1.5 4.518h5.982V10.5H1.5z"/>
-	<path fill="#36c" d="M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z"/>
-	<path fill="#fff" d="m9.995 2.004.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z"/>
-</svg>

resources/common/images/external-link-rtl-icon.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
-	<path fill="#fff" stroke="#36c" d="M10.5 4.518H4.518V10.5H10.5z"/>
-	<path fill="#36c" d="M6.234 1H1v5.39l1.57 1.546 1.31-1.31L6.607 9.35l2.69-2.688-2.81-2.808L7.8 2.544z"/>
-	<path fill="#fff" d="M2.004 2.004 1.982 6.89 3.8 5.07l2.88 2.88 1.228-1.227-2.88-2.88 1.85-1.852z"/>
-</svg>

resources/common/images/link-external-small-ltr-progressive.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+	<title>
+		external link
+	</title>
+	<path fill="#36c" fill-rule="evenodd" d="M11 1H6l2 2 .3.3-4 4 .6.7 4-4H9l2 2V1ZM2 2h2v1H2v7h7V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z" clip-rule="evenodd"/>
+</svg>

resources/common/images/link-external-small-rtl-progressive.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+	<title>
+		external link
+	</title>
+	<path fill="#36c" fill-rule="evenodd" d="M1 1h5L4 3l-.3.3 4 4-.6.7-4-4H3L1 6V1Zm9 1H8v1h2v7H3V8H2v2a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z" clip-rule="evenodd"/>
+</svg>

resources/common/typography.less

@@ -140,10 +140,15 @@ pre,
 }
 
 // External links
-// Use of `a` element selector due to its widespread usage and for limiting generic class scope.
+// Use of `a` element selector for limiting generic class scope due to `.external` widespread usage.
 .mw-parser-output a.external {
-	background-image: url( images/external-link-ltr-icon.svg );
+	// Use copy of Codex/OOUI WikimediaUI theme's 'linkExternal' icon in progressive color.
+	// Note that CSSJanus is flipping the `ltr` in the URL to `rtl`.
+	// Therefore make sure that both icons are available and up-to-date.
+	background-image: url( images/link-external-small-ltr-progressive.svg );
 	background-position: center right;
 	background-repeat: no-repeat;
-	padding-right: 13px;
+	// Equivalent of `12px` at calculation base of `14px` is `0.857em`.
+	background-size: 0.857em;
+	padding-right: 1em;
 }

resources/common/variables.less

@@ -63,6 +63,7 @@
 @size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`.
 
 @size-icon: unit( 20 / @font-size-browser, em );
+@size-indicator: unit( 12 / @font-size-browser, em );
 // Copied from mediawiki.ui.icons
 @icon-padding-md: unit( 12 / @font-size-browser, em );