refactor: use common CSS variables for ToC

resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less

@@ -1,40 +1,6 @@
 @import '../variables.less';
 @import '../mixins.less';
 
-:root {
-	--toc-color: @base-70;
-
-	--toc-title-h2-color: @base-50;
-
-	--toc-li-active-color: @accent-50;
-	--toc-li-active-a-li-color: @base-30;
-
-	--toc-a-color: @base-50;
-	--toc-a-hover-color: @base-30;
-
-	--screen3-toc-toggle-label-background-color: @base-90;
-	--screen3-toc-toggle-label-hover-background-color: @base-80;
-	--screen3-toc-toggle-label-focus-background-color: @accent-90;
-	--screen3-toc-ul-background-color: @base-100;
-}
-
-:root.skin-citizen-dark {
-	--toc-color: @dark-text-60;
-
-	--toc-title-h2-color: @base-50;
-
-	--toc-li-active-color: @color-link--active;
-	--toc-li-active-a-li-color: @dark-text-80;
-
-	--toc-a-color: @dark-text-70;
-	--toc-a-hover-color: @dark-text-80;
-
-	--screen3-toc-toggle-label-background-color: @dark-bg-50;
-	--screen3-toc-toggle-label-hover-background-color: @accent-10;
-	--screen3-toc-toggle-label-focus-background-color: @accent-10;
-	--screen3-toc-ul-background-color: @dark-bg-40;
-}
-
 .toc {
 	position: fixed;
 	z-index: -1; // So that it is below float objects in content
@@ -42,7 +8,7 @@
 	left: 0;
 	max-width: 450px;
 	padding: @margin-side;
-	color: var( --toc-color );
+	color: var( --color-base--subtle );
 
 	&::-webkit-scrollbar {
 		width: 0; // Hide bar on toc
@@ -51,8 +17,10 @@
 	&title {
 		h2 {
 			margin: 0;
-			color: var( --toc-title-h2-color ) !important;
+			color: var( --color-base--subtle ) !important;
-			font-size: @ui-menu-text-big;
+			font-size: @ui-menu-text;
+			font-weight: normal;
+			letter-spacing: 0.75px;
 		}
 	}
 
@@ -78,7 +46,7 @@
 	}
 
 	li.active {
-		color: var( --toc-li-active-a-li-color );
+		color: var( --color-primary );
 
 		> a {
 			border-color: currentColor;
@@ -87,7 +55,7 @@
 
 		a,
 		li {
-			color: var( --toc-li-active-a-li-color );
+			color: var( --color-base );
 		}
 	}
 
@@ -96,10 +64,14 @@
 		padding-left: 9px;
 		border-left: 3px solid transparent;
 		margin: @content-margin-top / 4 0;
-		color: var( --toc-a-color );
+		color: var( --color-base--subtle );
 
 		&:hover {
-			color: var( --toc-a-hover-color );
+			color: var( --color-base );
+		}
+
+		&:active {
+			color: var( --color-base--subtle );
 		}
 	}
 
@@ -154,12 +126,12 @@
 				height: 56px;
 				padding: 0 @margin-side / 2;
 				margin: @margin-side;
-				background-color: var( --screen3-toc-toggle-label-background-color );
+				background-color: var( --background-color-dp-06 );
 				border-radius: 100%;
 				.boxshadow(4);
 
 				&:hover {
-					background-color: var( --screen3-toc-toggle-label-hover-background-color );
+					background-color: var( --background-color-dp-12 );
 					.boxshadow(5);
 
 					&:before {
@@ -167,8 +139,8 @@
 					}
 				}
 
-				&:focus {
+				&:active {
-					background-color: var( --screen3-toc-toggle-label-focus-background-color );
+					background-color: var( --background-color-dp-02 );
 				}
 
 				&:before {
@@ -193,8 +165,9 @@
 			height: 100%;
 			max-height: ~'calc( 100vh - '@header-height + @margin-side * 3 ~')';
 			padding: @header-height + @margin-side @margin-side @margin-side * 2 @margin-side / 2 !important; // More scroll spaces
+			border-color: transparent;
 			margin: 0 !important;
-			background: var( --screen3-toc-ul-background-color );
+			background: var( --background-color-dp-16 );
 			border-radius: 0 @border-radius-large @border-radius-large 0;
 			transform: translateX( 100% );
 			transition: @transition-transform;

resources/skins.citizen.styles/Catlinks.less

@@ -41,8 +41,8 @@
 					.boxshadow(1);
 
 					&:hover {
-						border-color: @color-link--hover;
+						border-color: @color-primary--hover;
-						background-color: @color-link--hover;
+						background-color: @color-primary--hover;
 						color: @base-100 !important;
 						transform: translateY( -2px );
 						.boxshadow(2);

resources/skins.citizen.styles/common/common.less

@@ -135,7 +135,7 @@ td {
 }
 
 a {
-	color: var( --color-link );
+	color: var( --color-primary );
 	text-decoration: none !important;
 
 	&:not( [ href ] ) {
@@ -144,11 +144,11 @@ a {
 	}
 
 	&:hover {
-		color: var( --color-link--hover );
+		color: var( --color-primary--hover );
 	}
 
 	&:active {
-		color: var( --color-link--active );
+		color: var( --color-primary--active );
 	}
 
 	&.new {

resources/skins.citizen.styles/common/content.less

@@ -25,7 +25,7 @@
 	 * Only apply to internal links in article
 	*/
 	a[ href^='/' ]:not( .image ) {
-		.link-content-text(@color-link--active);
+		.link-content-text(@color-primary--active);
 
 		&.new {
 			background-image: linear-gradient( to right, @color-link-new--hover 0, @color-link-new--hover 100% );

resources/skins.citizen.styles/common/rootvariables.less

@@ -34,13 +34,14 @@
 	--color-base--emphasized: @color-base--emphasized;
 	--color-base--subtle: @color-base--subtle;
 
-	--color-link: @color-link;
-	--color-link--hover: @color-link--hover;
-	--color-link--active: @color-link--active;
 	--color-link-new: @color-link-new;
 	--color-link-new--hover: @color-link-new--hover;
 	--color-link-new--active: @color-link-new--active;
 
+	--color-primary: @color-primary;
+	--color-primary--hover: @color-primary--hover;
+	--color-primary--active: @color-primary--active;
+
 	/* Border Colors */
 	--border-color-base: @border-color-base;
 	--border-color-base--lighter: @border-color-base--lighter;

resources/variables.less

@@ -88,13 +88,14 @@
 @color-base--emphasized:	@color-base10;
 @color-base--subtle:		@color-base30;
 
-@color-link: 				@color-accent50;
-@color-link--hover: 		@color-accent50--lighten;
-@color-link--active:		@color-accent30;
 @color-link-new: 			@color-red50;
 @color-link-new--hover: 	@color-red50--lighten;
 @color-link-new--active:	@color-red30;
 
+@color-primary:				@color-accent50;
+@color-primary--hover:		@color-accent50--lighten;
+@color-primary--active:		@color-accent30;
+
 /* Border Colors */
 @border-color-base:				rgba( 0, 0, 0, 0.05 );
 @border-color-base--lighter:	rgba( 0, 0, 0, 0.02 );