feat(core): ✨ migrate ToC icon to use RL icon module

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 {

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": {

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>