Update TOC heading and link styles

Bug: T306562
Change-Id: Iafe335547a1e3c432efce303b5c0e5f8f5a23a15

resources/skins.vector.es6/tableOfContents.js

@@ -87,12 +87,7 @@ module.exports = function tableOfContents( props ) {
 
 		const topSection = /** @type {HTMLElement} */ ( selectedTocSection.closest( `.${PARENT_SECTION_CLASS}` ) );
 
-		// The bolding of sections is arguably not "motion", however does provide a distraction to
-		// readers who are scrolling by visibly changing the table of contents. This can be removed
-		// if someone has a strong argument for why this should not be considered motion.
-		if ( prefersReducedMotion() ) {
-			return;
-		} else if ( selectedTocSection === topSection ) {
+		if ( selectedTocSection === topSection ) {
 			activeTopSection = topSection;
 			activeTopSection.classList.add( ACTIVE_SECTION_CLASS );
 		} else {

resources/skins.vector.styles/components/TableOfContents.less

@@ -19,8 +19,8 @@
 	}
 
 	.sidebar-toc-title {
-		font-weight: bold;
-		font-size: @font-size-reset;
+		color: @color-base--subtle;
+		font-size: @font-size-base;
 		margin: 0;
 		padding: 0;
 		border: 0;
@@ -40,6 +40,10 @@
 		display: none;
 	}
 
+	.sidebar-toc-link {
+		color: @color-link;
+	}
+
 	.sidebar-toc-text {
 		padding: ~'calc( @{subcategory-padding} / 2 )'  0;
 	}
@@ -62,17 +66,12 @@
 		padding-left: @subcategory-padding;
 
 		a {
-			color: @color-base;
 			font-size: @font-size-base;
 		}
 	}
 
 	.sidebar-toc-list-item.sidebar-toc-level-1 {
 		padding-left: 0;
-
-		& > a {
-			color: @color-link;
-		}
 	}
 }
 
@@ -97,7 +96,7 @@
 
 // Highlight active section
 .sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link {
-	font-weight: bold;
+	color: @color-base;
 }
 
 .sidebar-toc .sidebar-toc-toggle {