From 95a4609c17adca2f702812b8a8d19dd1d72ea591 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 17 May 2022 22:08:02 -0400
Subject: [PATCH] feat(core): use standard external link icon fo external links

Have to polyfill because it is still a long way to go until being standardized in core
Related: T261391
---
 .../common/typography.less                     | 18 ++++++++++++++----
 .../images/external-link-ltr-icon.svg          |  6 ------
 .../images/external-link-rtl-icon.svg          |  6 ------
 .../images/linkExternal-ltr.svg                |  8 ++++++++
 .../images/linkExternal-rtl.svg                |  8 ++++++++
 5 files changed, 30 insertions(+), 16 deletions(-)
 delete mode 100644 resources/skins.citizen.styles/images/external-link-ltr-icon.svg
 delete mode 100644 resources/skins.citizen.styles/images/external-link-rtl-icon.svg
 create mode 100644 resources/skins.citizen.styles/images/linkExternal-ltr.svg
 create mode 100644 resources/skins.citizen.styles/images/linkExternal-rtl.svg

diff --git a/resources/skins.citizen.styles/common/typography.less b/resources/skins.citizen.styles/common/typography.less
index 33a0616d..2a79fd00 100644
--- a/resources/skins.citizen.styles/common/typography.less
+++ b/resources/skins.citizen.styles/common/typography.less
@@ -140,10 +140,20 @@ figcaption,
 // External links
 .mw-parser-output {
 	a.external {
-		padding-right: 13px;
-		background-image: url( images/external-link-ltr-icon.svg );
-		background-position: center right;
-		background-repeat: no-repeat;
+		&:after {
+			display: inline-block;
+			width: 0.75em;
+			height: 0.75em;
+			margin-left: 0.25em;
+			background-color: currentcolor;
+			content: '';
+			/* @embed */
+			-webkit-mask: url( images/linkExternal-ltr.svg ) no-repeat 50% 50%;
+			/* @embed */
+			mask: url( images/linkExternal-ltr.svg ) no-repeat 50% 50%;
+			-webkit-mask-size: contain;
+			mask-size: contain;
+		}
 	}
 }
 
diff --git a/resources/skins.citizen.styles/images/external-link-ltr-icon.svg b/resources/skins.citizen.styles/images/external-link-ltr-icon.svg
deleted file mode 100644
index de5c4613..00000000
--- a/resources/skins.citizen.styles/images/external-link-ltr-icon.svg
+++ /dev/null
@@ -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>
diff --git a/resources/skins.citizen.styles/images/external-link-rtl-icon.svg b/resources/skins.citizen.styles/images/external-link-rtl-icon.svg
deleted file mode 100644
index 09e38806..00000000
--- a/resources/skins.citizen.styles/images/external-link-rtl-icon.svg
+++ /dev/null
@@ -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>
diff --git a/resources/skins.citizen.styles/images/linkExternal-ltr.svg b/resources/skins.citizen.styles/images/linkExternal-ltr.svg
new file mode 100644
index 00000000..eadfe652
--- /dev/null
+++ b/resources/skins.citizen.styles/images/linkExternal-ltr.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		external link
+	</title>
+	<path d="M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z"/>
+	<path d="m11 1 3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z"/>
+</svg>
diff --git a/resources/skins.citizen.styles/images/linkExternal-rtl.svg b/resources/skins.citizen.styles/images/linkExternal-rtl.svg
new file mode 100644
index 00000000..288cb5d2
--- /dev/null
+++ b/resources/skins.citizen.styles/images/linkExternal-rtl.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		external link
+	</title>
+	<path d="M3 12H1v5c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2h-5v2h5v14H3z"/>
+	<path d="m1 9 3.3-3.3 5.7 5.7 1.4-1.4-5.7-5.7L9 1H1z"/>
+</svg>