Use Wikimedia visual style colours

Possibly more consistent in general with the rest of wikimedia. Maybe. We're still using the colours rather differently, though.
Should also resolve some contrast issues we've had thus far. Maybe.
Breaking up the greys like this may or may not help with theming down the road. I'm not really sure.

Bug: T131992
Bug: T200320
Change-Id: I2757271066c54891e2b6e45b86e827f34af59435

resources/forms.less

@@ -35,14 +35,14 @@ textarea {
 	resize: vertical;
 	box-sizing: border-box;
 	line-height: 1.3em;
-	border: solid 1px @grey;
+	border: solid 1px @base70;
 }
 
 div.editOptions {
 	padding: 1.25em 1.75em;
-	border: solid @grey;
+	border: solid @base70;
 	border-width: 0 1px @border;
-	background: @background2;
+	background: @base80;
 
 	// For Extension:TemplateSandbox and the like
 	fieldset {

resources/screen-common.less

@@ -11,7 +11,7 @@ body {
 body {
 	font-family: @fonts;
 	color: @text;
-	background: @background-dark;
+	background: @base30;
 	font-size: @font-size;
 	line-height: 1.5;
 }
@@ -31,12 +31,17 @@ body {
 }
 
 #mw-footer-container {
-	border-top: solid 1px @background-dark2;
+	border-top: solid 1px @base20;
 	box-shadow: inset 0 7px 2px -4px rgba( 0, 0, 0, 0.1 );
-	color: @text-inverse;
+	color: @base100;
 
 	a {
-		color: @text-inverse;
+		color: @base100;
+
+		&:hover,
+		&:visited {
+			color: @base90;
+		}
 	}
 
 	ul {
@@ -87,7 +92,7 @@ body {
 	box-shadow: inset 0 2px 4px 0 rgba( 0, 0, 0, 0.05 );
 	background: @background;
 	position: relative;
-	border: solid 1px @grey;
+	border: solid 1px @base70;
 }
 
 #searchInput {
@@ -123,14 +128,14 @@ body {
 
 	.suggestions-special {
 		background-color: @background;
-		border: 1px solid @grey;
+		border: 1px solid @base70;
 		border-bottom-width: @border;
 		padding: 0.75em 2em;
 	}
 
 	.suggestions-results {
 		background-color: @background;
-		border: 1px solid @grey;
+		border: 1px solid @base70;
 		border-bottom-width: @border;
 	}
 
@@ -149,7 +154,7 @@ body {
 
 .pokey,
 .pokey:after {
-	border-bottom: 10px solid @grey-bright;
+	border-bottom: 10px solid @base80;
 	border-left: 10px solid transparent;
 	border-right: 10px solid transparent;
 	content: '';
@@ -213,7 +218,7 @@ body {
 /* Content */
 
 #mw-content-container {
-	background: @background2;
+	background: @base80;
 	border-bottom: solid 4px @green;
 
 	// Background image (default cat) set via TimelessFileModule
@@ -236,7 +241,7 @@ body {
 		border-bottom: solid 3px transparent;
 
 		&:hover {
-			border-bottom-color: @grey;
+			border-bottom-color: @base70;
 		}
 
 		&.selected {
@@ -296,21 +301,21 @@ body {
 
 a {
 	text-decoration: none;
-	color: @blue;
+	color: @link;
 
 	&:hover,
 	&:visited {
-		color: @blue-dark;
+		color: @link-visited;
 	}
 }
 
 a.new,
 .new a {
-	color: @red;
+	color: @link-red;
 
 	&:hover,
 	&:visited {
-		color: @red-dark;
+		color: @link-red-visited;
 	}
 }
 
@@ -365,7 +370,7 @@ div.magnify a {
  */
 #contentSub {
 	font-size: 84%;
-	color: @grey-dark;
+	color: @base20;
 
 	/* This forces "redirect page" (on a redirect page) etc. on a new line */
 	.subpages {
@@ -379,8 +384,8 @@ div.magnify a {
  */
 code {
 	color: #000;
-	background-color: @grey-bright;
-	border: 1px solid @grey-dark;
+	background-color: @base80;
+	border: 1px solid @base30;
 	border-radius: 2px;
 	padding: 1px 4px;
 }
@@ -388,8 +393,8 @@ code {
 pre,
 .mw-code {
 	color: #000;
-	background-color: @grey-bright;
-	border: 1px solid @grey-dark;
+	background-color: @base80;
+	border: 1px solid @base30;
 	padding: 1em;
 	/* Wrap lines in overflow. T2260, T103780 */
 	white-space: pre-wrap;
@@ -434,13 +439,13 @@ pre,
 
 	h1 {
 		font-size: 2em;
-		border-bottom: solid 3px @grey;
+		border-bottom: solid 3px @base70;
 		overflow: hidden;
 	}
 
 	h2 {
 		font-size: 1.8em;
-		border-bottom: solid 2px @grey;
+		border-bottom: solid 2px @base70;
 		overflow: hidden;
 	}
 
@@ -486,7 +491,7 @@ pre,
 
 hr {
 	border-width: 1px;
-	border-color: @grey;
+	border-color: @base70;
 	border-style: solid none solid none;
 	margin: 0.5em 0;
 }
@@ -542,7 +547,7 @@ ul {
 
 .thumbinner .thumbimage,
 .thumbborder {
-	border: solid 1px @grey-bright;
+	border: solid 1px @base80;
 }
 
 .mw-body li.gallerybox div.thumb {
@@ -590,7 +595,7 @@ ul#filetoc {
 	font-family: @fonts;
 	margin: 0;
 	display: inline;
-	border-bottom-color: @grey;
+	border-bottom-color: @base70;
 }
 
 .toctogglespan {
@@ -614,7 +619,7 @@ body :not( :checked ) > .toctogglespan:after {
 }
 
 .tocnumber {
-	color: @grey-dark;
+	color: @base20;
 }
 
 .skin-timeless .mw-body .oo-ui-tagMultiselectWidget-handle,
@@ -639,7 +644,7 @@ body :not( :checked ) > .toctogglespan:after {
 .wikitable > tr > td,
 .wikitable > * > tr > th,
 .wikitable > * > tr > td {
-	border: 1px solid @grey-bright;
+	border: 1px solid @base80;
 	padding: 0.5em;
 }
 

resources/screen-desktop-small.less

@@ -63,7 +63,7 @@
 }
 
 #mw-header-nav-hack {
-	border-top: solid 2px @grey-bright;
+	border-top: solid 2px @base80;
 	display: block;
 	position: absolute;
 	z-index: 98;

resources/screen-mobile.less

@@ -18,7 +18,7 @@
 
 #catlinks {
 	padding-bottom: 2em;
-	border-top: solid 3px @grey;
+	border-top: solid 3px @base70;
 }
 
 #mw-page-header-links #ca-view,
@@ -88,7 +88,7 @@
 	z-index: 99;
 	width: 100%;
 	height: 100%;
-	background: @background2;
+	background: @base80;
 	opacity: 0.8;
 	overflow: hidden;
 }

resources/variables.less

@@ -1,37 +1,35 @@
 @import 'mediawiki.mixins';
 
-// Colours
+// Colours; see https://design.wikimedia.org/style-guide/visual-style_colors.html
 
-@text: #013;
-@background: #fff;
-@background2: #f3f3f3;
-@background3: #fcfcfc;
+@base100: #fff;
+@base90: #f8f9fa;
+@base80: #eaecf0;
+@base70: #c8ccd1;
+@base30: #72777d;
+@base20: #54595d;
+@base0: #000;
 
-@background-dark: #777;
-@background-dark2: #555;
-@text-inverse: #fff;
+@red: #d33;
+@red-bright: #fee7e6;
+@red-dark: #b32424;
 
-@link: @blue;
-@link-red: @red;
-
-@grey: #ccc;
-@grey-bright: #eee;
-@grey-dark: #666;
+@green: #00af89;
+@green-bright: #d5fdf4;
+@green-dark: #14866d;
 
-@red: #d44;
-@red-bright: #f55;
-@red-dark: #900;
+@blue: #36c;
+@blue-bright: #eaf3ff;
+@blue-dark: #2a4b8d;
 
-@green: #3b7;
-@green-bright: #4c8;
-@green-dark: #396;
-
-@blue: #08d;
-@blue-bright: #2af;
-@blue-dark: #069;
+@background: @base100;
+@text: @base0;
 
 @link: @blue;
+@link-visited: @blue-dark;
+
 @link-red: @red;
+@link-red-visited: @red-dark;
 
 // Flair
 
@@ -85,8 +83,8 @@
 }
 
 .box() {
-	background: @background3;
-	border: solid @grey-bright;
+	background: @base90;
+	border: solid @base80;
 	border-width: 1px 1px @border;
 	padding: 1.25em 1.75em;
 	box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
@@ -131,7 +129,7 @@
 		font-size: 1em;
 		margin: 0.25em 0 0.75em 0;
 		padding-bottom: 0.15em;
-		border-bottom: solid 2px @grey;
+		border-bottom: solid 2px @base70;
 	}
 
 	ul {