From 7cff9e678b35100519a82545dec961a0baa0eb07 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 4 Nov 2022 18:43:50 -0400
Subject: [PATCH] =?UTF-8?q?feat(core):=20=E2=9C=A8=20migrate=20ToC=20icon?=
 =?UTF-8?q?=20to=20use=20RL=20icon=20module?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../skins.citizen.styles/TableOfContents.less | 27 ++++++++-----------
 skin.json                                     |  9 ++-----
 templates/TableOfContents.mustache            |  1 +
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/resources/skins.citizen.styles/TableOfContents.less b/resources/skins.citizen.styles/TableOfContents.less
index ca80e3ec..1a1a1ccb 100644
--- a/resources/skins.citizen.styles/TableOfContents.less
+++ b/resources/skins.citizen.styles/TableOfContents.less
@@ -157,26 +157,22 @@
 			position: absolute;
 			right: 0;
 			bottom: 0;
+			display: grid;
 			width: 2.5rem;
 			height: 2.5rem;
 			border-radius: var( --border-radius--medium );
 			margin: var( --space-xs );
 			background-color: var( --color-surface-1 );
 			box-shadow: var( --box-shadow-dialog );
+			place-content: center;
 			pointer-events: auto;
 			transform: none;
 			transform-origin: bottom right;
 			transition: @transition-transform;
 
-			&:after {
-				display: block;
-				width: inherit;
-				height: inherit;
-				background-position: center;
-				background-repeat: no-repeat;
-				background-size: 1rem;
-				content: '';
-				opacity: var( --opacity-icon-base );
+			.citizen-ui-icon {
+				width: 1rem;
+				height: 1rem;
 			}
 
 			// The hover state colors are not great but it will do for now
@@ -202,7 +198,7 @@
 					pointer-events: none;
 					transform: scale( 1.2 );
 
-					&:after {
+					.citizen-ui-icon {
 						display: none;
 					}
 				}
@@ -216,12 +212,6 @@
 			.citizen-card-transition();
 		}
 	}
-
-	.skin-citizen-dark {
-		#citizen-toc__buttonCheckbox:after {
-			filter: invert( 1 );
-		}
-	}
 }
 
 @media ( min-width: @width-breakpoint-desktop ) {
@@ -238,6 +228,11 @@
 		}
 	}
 
+	// Hide button in desktop viewport
+	#citizen-toc__buttonCheckbox {
+		display: none;
+	}
+
 	// Sticky header styles
 	.citizen-body-header--sticky {
 		.citizen-toc__card {
diff --git a/skin.json b/skin.json
index 7421c73a..b1f92393 100644
--- a/skin.json
+++ b/skin.json
@@ -280,12 +280,6 @@
 			"defaultColor": "#000",
 			"images": {
 				".citizen-toc__top:before": "resources/skins.citizen.icons/backToTop.svg",
-				"#citizen-toc__buttonCheckbox:after": {
-					"file": {
-						"ltr": "resources/skins.citizen.icons/toc-ltr.svg",
-						"rtl": "resources/skins.citizen.icons/toc-rtl.svg"
-					}
-				},
 				"#ca-ve-edit > a:before": "resources/skins.citizen.icons/shared/edit.svg",
 				".mw-editsection > a:before": "resources/skins.citizen.icons/shared/edit.svg",
 				".mw-editsection > a.mw-editsection-visualeditor + .mw-editsection-divider + a:before": "resources/skins.citizen.icons/shared/wikiText.svg",
@@ -355,7 +349,8 @@
 				"search",
 				"die",
 				"textLanguage",
-				"ellipsis"
+				"ellipsis",
+				"listBullet"
 			]
 		},
 		"skins.citizen.icons.sections": {
diff --git a/templates/TableOfContents.mustache b/templates/TableOfContents.mustache
index 59c84212..a65a75dd 100644
--- a/templates/TableOfContents.mustache
+++ b/templates/TableOfContents.mustache
@@ -24,6 +24,7 @@
 		for="citizen-toc__checkbox"
 		title="{{msg-toc}}"
 		aria-hidden="true">
+		<span class="citizen-ui-icon mw-ui-icon-wikimedia-listBullet"></span>
 		<span id="mw-panel-toc-label">{{msg-toc}}</span>
 	</label>
 </div>