Use codex link styles in Vector, remove old link color variables

Visual changes: blue and red link colors have been updated to match codex, including hover/focus/active state colors

Bug: T366515
Change-Id: I16411a7ea47ae26c7e67a71f83e0521962c8ce61

bundlesize.config.json

@@ -24,7 +24,7 @@
 		},
 		{
 			"resourceModule": "skins.vector.styles",
-			"maxSize": "12.5 kB"
+			"maxSize": "12.6 kB"
 		},
 		{
 			"resourceModule": "skins.vector.js",

resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less

@@ -35,12 +35,12 @@
 // Overrides for non-Codex variables:
 
 // Colors
-@color-link: @color-progressive;
-@color-link--visited: #795cb2;
-@color-link--active: #faa700;
+// ****IMPORTANT****
+// When defining these make sure if needed, a dark mode color has also been defined
+// in CSSCustomProperties.less
 // Link colors for a power user feature to highlight links to other projects.
 // In Vector 2022 we unify these colors by default for simpler orientation by average users.
 // It's still possible to overwrite the styles per user.
 @color-link-external: @color-progressive;
-@color-link-external--visited: #795cb2;
-@color-link-external--active: #faa700;
+@color-link-external--visited: @color-visited;
+@color-link-external--active: @color-progressive--active;

resources/skins.vector.styles/CSSCustomProperties.less

@@ -46,10 +46,6 @@
 html.skin-theme-clientpref-night {
 	color-scheme: dark;
 	.cdx-mode-dark();
-
-	// T363911 Temporarily override Codex variable for Vector night mode release
-	// Remove after task has been resolved and new color is available in Codex.
-	--color-link-red: #b97876;
 }
 
 /**
@@ -90,10 +86,6 @@ html.skin-theme-clientpref-night @{OOUIOverrideSelectors} {
 	html.skin-theme-clientpref-os {
 		color-scheme: light dark;
 		.cdx-mode-dark();
-
-		// T363911 Temporarily override Codex variable for Vector night mode release
-		// Remove after task has been resolved and new color is available in Codex.
-		--color-link-red: #b97876;
 	}
 
 	html.skin-theme-clientpref-os .notheme,

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

@@ -67,6 +67,5 @@
 
 	a {
 		.mixin-vector-dropdown-menu-item();
-		color: @color-link;
 	}
 }

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

@@ -14,16 +14,6 @@
 		}
 	}
 
-	// T316574 Override visited link styles
-	.mw-list-item a {
-		color: @color-link;
-	}
-
-	/* T361841 add invisible bottom border by default */
-	.mw-list-item.vector-tab-noicon a {
-		border-bottom: 2px @border-style-base @border-color-transparent;
-	}
-
 	/* focus and hover have outlines. Text underline interferes with bottom border */
 	.mw-list-item.vector-tab-noicon a:focus,
 	.mw-list-item.vector-tab-noicon a:hover {
@@ -31,14 +21,23 @@
 		border-bottom: 2px @border-style-base;
 	}
 
-	.mw-list-item.new a,
-	.mw-list-item.new a:visited {
-		color: @color-link-red;
+	/* T361841 add invisible bottom border by default */
+	.mw-list-item.vector-tab-noicon a {
+		border-bottom: 2px @border-style-base @border-color-transparent;
 	}
 
-	.mw-list-item.selected a,
-	.mw-list-item.selected a:visited {
-		color: @color-link-selected;
+	// T316574 Override visited link styles
+	.mw-list-item a {
+		.mixin-vector-unvisited-link-base();
+	}
+
+	// Override visited red link styles
+	.mw-list-item.new a {
+		.mixin-vector-unvisited-link-red();
+	}
+
+	.mw-list-item.selected a {
+		.mixin-vector-selected-link();
 		border-bottom: 2px @border-style-base;
 	}
 }

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

@@ -29,7 +29,6 @@
 	.vector-toc-link {
 		display: block;
 		word-break: break-word;
-		color: @color-link;
 	}
 
 	// Highlight and bold active sections, active top sections that are unexpanded
@@ -39,7 +38,7 @@
 	.vector-toc-list-item-active.vector-toc-level-1-active {
 		> .vector-toc-link {
 			// Highlight active section
-			color: @color-base;
+			.mixin-vector-selected-link();
 			font-weight: bold;
 
 			.vector-toc-text {
@@ -52,7 +51,7 @@
 
 	// Highlight active top sections that contain an active section
 	.vector-toc-level-1-active:not( .vector-toc-list-item-active ) > .vector-toc-link {
-		color: @color-base;
+		.mixin-vector-selected-link();
 	}
 
 	.vector-toc-text {

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

@@ -99,7 +99,7 @@
 
 	a:not( .mw-selflink ) {
 		// T312157 Override redlink (.new) color for non-existant userpage
-		color: @color-link;
+		color: @color-progressive;
 	}
 
 	span {

resources/skins.vector.styles/mixins.less

@@ -64,22 +64,49 @@
 	max-width: 200px;
 }
 
+// Base links without a visited state
+.mixin-vector-unvisited-link-base() {
+	&:visited {
+		color: @color-progressive;
+	}
+
+	&:visited:hover {
+		color: @color-progressive--hover;
+	}
+}
+
+// Red links without a visited state
+.mixin-vector-unvisited-link-red() {
+	&:visited {
+		color: @color-link-red;
+	}
+
+	&:visited:hover {
+		color: @color-link-red--hover;
+	}
+}
+
+// Used for "selected" links inside tabs and dropdowns
+.mixin-vector-selected-link() {
+	// Override all link states to style it as text
+	color: @color-base !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .mixin-vector-dropdown-menu-item() {
 	display: flex;
 	align-items: center;
 	padding: @padding-vertical-dropdown-menu-item 0;
 
-	&:not( .mw-selflink ):visited {
-		color: @color-link;
-	}
-
 	.vector-icon {
 		margin-right: @spacing-35;
 	}
 
-	&.selected a,
-	&.selected a:visited {
-		color: @color-link-selected;
+	&:not( .mw-selflink ) {
+		.mixin-vector-unvisited-link-base();
+	}
+
+	&.selected a {
+		.mixin-vector-selected-link();
 	}
 }
 

resources/skins.vector.styles/typography.less

@@ -174,6 +174,14 @@ pre,
 	}
 }
 
+a {
+	.cdx-mixin-link-base();
+
+	&.new {
+		.cdx-mixin-link-red();
+	}
+}
+
 // T335625 - Move siteSub into common.less to prevent it from being feature-flagged
 // and overriding on-wiki modifications.
 #siteSub {