From 8b6ed4d08fa0f209fa835b906cd64c55a50cabf0 Mon Sep 17 00:00:00 2001
From: jrobson <jrobson@wikimedia.org>
Date: Thu, 3 Oct 2013 13:22:14 -0700
Subject: [PATCH] Vector: New beta module with new typography styles

To enable install Extension:BetaFeatures and Extension:VectorBeta
in LocalSettings.php

Changes to core:
* Refactor screen.less to make use of variables

Introduce dormant skins.vector.beta module
* Activated by https://gerrit.wikimedia.org/r/#/admin/projects/mediawiki/extensions/VectorBeta
* Load different environment variables depending on whether in a beta
  experiment or not
* Switch global fonts for text from browser default sans-serif to a
  specific sans-serif stack.
* Switch global fonts for headings to Georgia/serif
* Cleanup over-specific specifiers in process
* Adjust styling of navigation menus to focus on content
* Adjust styling of collapsible navigation menu to be less prominent

See https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Typography

Change-Id: Ica0b69ad95051e15cd8ed9888927e034c13fbf92
---
 resources/Resources.php                       | 18 +++--
 skins/Vector.php                              |  5 +-
 skins/vector/beta/screen.less                 | 75 +++++++++++++++++++
 skins/vector/beta/variables.less              | 37 +++++++++
 skins/vector/collapsibleNav.less              | 12 +--
 .../vector/{screen-hd.css => screen-hd.less}  |  2 +-
 skins/vector/screen.less                      | 65 ++++++++--------
 skins/vector/styles-beta.less                 |  9 +++
 skins/vector/styles.less                      |  8 ++
 skins/vector/variables.less                   | 37 +++++++++
 10 files changed, 221 insertions(+), 47 deletions(-)
 create mode 100644 skins/vector/beta/screen.less
 create mode 100644 skins/vector/beta/variables.less
 rename skins/vector/{screen-hd.css => screen-hd.less} (92%)
 create mode 100644 skins/vector/styles-beta.less
 create mode 100644 skins/vector/styles.less
 create mode 100644 skins/vector/variables.less

diff --git a/resources/Resources.php b/resources/Resources.php
index 050e933f1b..ff933f614c 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -92,9 +92,18 @@ return array(
 			'common/commonElements.css' => array( 'media' => 'screen' ),
 			'common/commonContent.css' => array( 'media' => 'screen' ),
 			'common/commonInterface.css' => array( 'media' => 'screen' ),
-			'vector/screen.less' => array( 'media' => 'screen' ),
-			'vector/externalLinks.less' => array( 'media' => 'screen' ),
-			'vector/screen-hd.css' => array( 'media' => 'screen and (min-width: 982px)' ),
+			'vector/styles.less',
+		),
+		'remoteBasePath' => $GLOBALS['wgStylePath'],
+		'localBasePath' => $GLOBALS['wgStyleDirectory'],
+	),
+	'skins.vector.beta' => array(
+		// Keep in sync with skins.vector
+		'styles' => array(
+			'common/commonElements.css' => array( 'media' => 'screen' ),
+			'common/commonContent.css' => array( 'media' => 'screen' ),
+			'common/commonInterface.css' => array( 'media' => 'screen' ),
+			'vector/styles-beta.less' => array( 'media' => 'screen' ),
 		),
 		'remoteBasePath' => $GLOBALS['wgStylePath'],
 		'localBasePath' => $GLOBALS['wgStyleDirectory'],
@@ -110,9 +119,6 @@ return array(
 		'localBasePath' => $GLOBALS['wgStyleDirectory'],
 	),
 	'skins.vector.collapsibleNav' => array(
-		'styles' => array(
-			'vector/collapsibleNav.less',
-		),
 		'scripts' => array(
 			'vector/collapsibleNav.js',
 		),
diff --git a/skins/Vector.php b/skins/Vector.php
index c07a593bdd..288b5fd6e6 100644
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -66,7 +66,10 @@ class SkinVector extends SkinTemplate {
 	 */
 	function setupSkinUserCss( OutputPage $out ) {
 		parent::setupSkinUserCss( $out );
-		$out->addModuleStyles( 'skins.vector' );
+
+		$styles = array( 'skins.vector' );
+		wfRunHooks( 'SkinVectorStyleModules', array( &$this, &$styles ) );
+		$out->addModuleStyles( $styles );
 	}
 
 	/**
diff --git a/skins/vector/beta/screen.less b/skins/vector/beta/screen.less
new file mode 100644
index 0000000000..6d56cd5c00
--- /dev/null
+++ b/skins/vector/beta/screen.less
@@ -0,0 +1,75 @@
+/* Content */
+#content {
+	line-height: 1.5em;
+	.mw-editsection {
+		font-family: @content-font-family;
+	}
+
+	h1,
+	#firstHeading {
+		font-family: @content-heading-font-family;
+		font-size: 1.833em;
+		line-height: 22pt;
+		padding: 0;
+		margin-bottom: 4pt;
+	}
+
+	h2 {
+		font-size: 1.5em;
+		line-height: 22pt;
+	}
+
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: @content-heading-font-family;
+		padding: 0;
+		margin-bottom: 4pt;
+		margin-top: 14pt;
+	}
+
+	h3 {
+		font-size: 1.17em;
+		line-height: 22pt;
+	}
+
+	h3,
+	h4 {
+		font-weight: bold;
+	}
+
+	h4,
+	h5,
+	h6 {
+		font-size: 100%; /* (reset) */
+	}
+
+	h6 {
+		font-style: italic;
+	}
+
+	p {
+		margin-bottom: 8pt;
+	}
+
+	// FIXME: this is hacky
+	#toc h2 {
+		font-size: 100%;
+	}
+}
+
+/* Personal menu */
+#p-personal a {
+	color: #555;
+}
+
+/* Main menu */
+div#mw-panel div.portal {
+	margin-left: 1.25em;
+	h3 {
+		margin: 0;
+		line-height: 1;
+	}
+}
diff --git a/skins/vector/beta/variables.less b/skins/vector/beta/variables.less
new file mode 100644
index 0000000000..34627950ab
--- /dev/null
+++ b/skins/vector/beta/variables.less
@@ -0,0 +1,37 @@
+@html-font-size: 90%;
+
+@body-font-size: inherit;
+@body-font-color: inherit;
+
+// Page content
+@content-font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
+@content-font-size: 0.9em;
+@content-line-height: inherit;
+@content-padding: 1em;
+@content-heading-font-size: 1.6em;
+@content-heading-font-family: Georgia, "DejaVu Serif", serif;
+
+// Common menu
+@menu-link-color: #555;
+
+// Main menu
+@menu-main-font-size: 0.82em;
+@menu-main-heading-font-size: 100%;
+@menu-main-heading-padding: 5px 0;
+
+@menu-main-body-font-size: inherit;
+@menu-main-body-link-color: inherit;
+@menu-main-body-link-visited-color: inherit;
+@menu-main-body-margin: 0;
+@menu-main-body-padding: 0 0 10px;
+@menu-main-logo-left: 1.6em;
+
+// Personal menu
+@menu-personal-font-size: 0.75em;
+
+// Collapsible nav
+@collapsible-nav-heading-color: #555;
+@collapsible-nav-heading-collapsed-color: inherit;
+
+@collapsible-nav-heading-padding: 4px 0 3px 1.5em;
+@collapsible-nav-body-margin: 0 0 0 1.25em;
diff --git a/skins/vector/collapsibleNav.less b/skins/vector/collapsibleNav.less
index 25ebec7c38..e6f5c9aa06 100644
--- a/skins/vector/collapsibleNav.less
+++ b/skins/vector/collapsibleNav.less
@@ -12,12 +12,13 @@
 		margin: -11px 9px 10px 11px;
 
 		h3 {
-			color: #4D4D4D;
+			font-size: @menu-main-heading-font-size;
+			color: @collapsible-nav-heading-color;
 			font-weight: normal;
 			background-position: left center;
 			background-repeat: no-repeat;
 			.background-image-svg('images/arrow-expanded.svg', 'images/arrow-expanded.png');
-			padding: 4px 0 3px 1.5em;
+			padding: @collapsible-nav-heading-padding;
 			margin-bottom: 0;
 
 			&:hover {
@@ -26,12 +27,13 @@
 			}
 
 			a {
-				color: #4D4D4D;
+				color: @collapsible-nav-heading-color;
 				text-decoration: none;
 			}
 		}
 
 		.body {
+			margin: @collapsible-nav-body-margin;
 			background-image: none !important;
 			padding-top: 0;
 			display: none;
@@ -70,7 +72,7 @@
 		/* Collapsed */
 		&.collapsed {
 			h3 {
-				color: #0645AD;
+				color: @collapsible-nav-heading-collapsed-color;
 				background-position: left center;
 				background-repeat: no-repeat;
 				.background-image-svg('images/arrow-collapsed-ltr.svg', 'images/arrow-collapsed-ltr.png');
@@ -81,7 +83,7 @@
 				}
 
 				a {
-					color: #0645AD;
+					color: @collapsible-nav-heading-collapsed-color;
 				}
 			}
 		}
diff --git a/skins/vector/screen-hd.css b/skins/vector/screen-hd.less
similarity index 92%
rename from skins/vector/screen-hd.css
rename to skins/vector/screen-hd.less
index 7dbb1ba64d..5a1fc055ba 100644
--- a/skins/vector/screen-hd.css
+++ b/skins/vector/screen-hd.less
@@ -5,7 +5,7 @@ div#content {
 	padding: 1.25em 1.5em 1.5em 1.5em;
 }
 #p-logo {
-	left: 0.5em;
+	left: @menu-main-logo-left;
 }
 div#footer {
 	margin-left: 11em;
diff --git a/skins/vector/screen.less b/skins/vector/screen.less
index 0b656270ea..f919bda7b5 100644
--- a/skins/vector/screen.less
+++ b/skins/vector/screen.less
@@ -13,28 +13,32 @@
 @import "mediawiki.mixins.less";
 
 /* Framework */
+html {
+	font-size: @html-font-size;
+}
 html,
 body {
 	height: 100%;
 	margin: 0;
 	padding: 0;
-	font-family: sans-serif;
-	font-size: 1em;
+	font-family: @content-font-family;
 }
 body {
 	background-color: #f6f6f6;
+	font-size: @body-font-size;
 }
 /* Content */
 div#content {
+	line-height: @content-line-height;
 	margin-left: 10em;
-	padding: 1em;
+	padding: @content-padding;
 	/* Border on top, left, and bottom side */
 	border: 1px solid #a7d7f9;
 	border-right-width: 0;
 	/* Merge the border with tabs' one (in their background image) */
 	margin-top: -1px;
 	background-color: white;
-	color: black;
+	color: @body-font-color;
 	direction: ltr;
 }
 /* Hide, but keep accessible for screen-readers */
@@ -95,7 +99,7 @@ div.emptyPortlet {
 #p-personal li {
 	margin-left: 0.75em;
 	margin-top: 0.5em;
-	font-size: 0.75em;
+	font-size: @menu-personal-font-size;
 	white-space: nowrap;
 }
 /* Navigation Containers */
@@ -174,7 +178,7 @@ div.vectorTabs li a {
 	height: 1.9em;
 	padding-left: 0.5em;
 	padding-right: 0.5em;
-	color: #0645ad;
+	color: @menu-link-color;
 	cursor: pointer;
 	font-size: 0.8em;
 }
@@ -340,7 +344,7 @@ div.vectorMenu li a {
 	display: inline-block;
 	padding: 0.5em;
 	white-space: nowrap;
-	color: #0645ad;
+	color: @menu-link-color;
 	cursor: pointer;
 	font-size: 0.8em;
 }
@@ -448,6 +452,7 @@ div#simpleSearch button#searchButton > img {
 }
 /* Panel */
 div#mw-panel {
+	font-size: @menu-main-font-size;
 	position: absolute;
 	top: 160px;
 	padding-top: 1em;
@@ -461,17 +466,15 @@ div#mw-panel div.portal {
 div#mw-panel div.portal h3 {
 	font-weight: normal;
 	color: #444;
-	padding: 0.25em;
-	padding-top: 0;
-	padding-left: 1.75em;
+	padding: @menu-main-heading-padding;
 	cursor: default;
 	border: none;
-	font-size: 0.75em;
+	font-size: @menu-main-heading-font-size;
 }
 div#mw-panel div.portal div.body {
-	margin: 0;
 	padding-top: 0.5em;
-	margin-left: 1.25em;
+	margin: @menu-main-body-margin;
+
 	.background-image('images/portal-break.png');
 	background-repeat: no-repeat;
 	background-position: top left;
@@ -479,7 +482,7 @@ div#mw-panel div.portal div.body {
 div#mw-panel div.portal div.body ul {
 	list-style-type: none;
 	list-style-image: none;
-	padding: 0;
+	padding: @menu-main-body-padding;
 	margin: 0;
 }
 div#mw-panel div.portal div.body ul li {
@@ -487,15 +490,16 @@ div#mw-panel div.portal div.body ul li {
 	padding: 0;
 	padding-bottom: 0.5em;
 	margin: 0;
-	font-size: 0.75em;
+	font-size: @menu-main-body-font-size;
 	word-wrap: break-word;
 }
 div#mw-panel div.portal div.body ul li a {
-	color: #0645ad;
-}
-div#mw-panel div.portal div.body ul li a:visited {
-	color: #0b0080;
+	color: @menu-main-body-link-color;
+	&:visited {
+		color: @menu-main-body-link-visited-color;
+	}
 }
+
 /* Footer */
 div#footer {
 	margin-left: 10em;
@@ -596,7 +600,7 @@ div#footer #footer-places li {
 	#preftoc a:active {
 		display: inline-block;
 		position: relative;
-		color: #0645ad;
+		color: @menu-link-color;
 		padding: 0.5em;
 		text-decoration: none;
 		background-image: none;
@@ -653,16 +657,6 @@ div#footer #footer-places li {
 	margin-right: 0.25em;
 }
 
-/**
- * The following code is slightly modified from monobook
- */
-div#content {
-	line-height: 1.5em;
-}
-#bodyContent {
-	font-size: 0.8em;
-}
-
 ul {
 	list-style-type: disc;
 	.list-style-image('images/bullet-icon.png');
@@ -679,7 +673,7 @@ pre, .mw-code {
 #firstHeading {
 	padding-top: 0;
 	margin-top: 0;
-	font-size: 1.6em;
+	font-size: @content-heading-font-size;
 }
 
 /* Icon for Usernames */
@@ -705,9 +699,12 @@ pre, .mw-code {
 #bodyContent {
 	position: relative;
 	width: 100%;
-}
-div#bodyContent {
-	line-height: 1.5em;
+
+	// FIXME: Seems overly specific. Not sure why this is needed.
+	&div {
+		line-height: 1.5em;
+		font-size: @content-font-size;
+	}
 }
 
 /* mediawiki.notification */
diff --git a/skins/vector/styles-beta.less b/skins/vector/styles-beta.less
new file mode 100644
index 0000000000..62e3d55978
--- /dev/null
+++ b/skins/vector/styles-beta.less
@@ -0,0 +1,9 @@
+@import "variables.less";
+@import "beta/variables.less";
+@import "screen.less";
+@import "beta/screen.less";
+@import "externalLinks.less";
+@import "collapsibleNav.less";
+@media screen and (min-width: 982px) {
+	@import "screen-hd.less";
+}
diff --git a/skins/vector/styles.less b/skins/vector/styles.less
new file mode 100644
index 0000000000..a5db63caf9
--- /dev/null
+++ b/skins/vector/styles.less
@@ -0,0 +1,8 @@
+@import "variables.less";
+@import "screen.less";
+@import "externalLinks.less";
+@import "collapsibleNav.less";
+
+@media screen and (min-width: 982px) {
+	@import "screen-hd.less";
+}
diff --git a/skins/vector/variables.less b/skins/vector/variables.less
new file mode 100644
index 0000000000..fac7f82846
--- /dev/null
+++ b/skins/vector/variables.less
@@ -0,0 +1,37 @@
+@html-font-size: 1em;
+
+@body-font-size: 1em;
+@body-font-color: #252525;
+
+// Page content
+@content-font-family: sans-serif;
+@content-font-size: 0.8em;
+@content-line-height: 1.5em;
+@content-padding: 1.5em 1.5em 1.5em 1.75em;
+@content-heading-font-size: 1.6em;
+@content-heading-font-family: sans-serif;
+
+// Common menu
+@menu-link-color: #0645ad;
+
+// Main menu
+@menu-main-font-size: inherit;
+@menu-main-heading-font-size: 0.75em;
+@menu-main-heading-padding: 0 1.75em 0.25em 0.25em;
+
+@menu-main-body-font-size: 0.75em;
+@menu-main-body-link-color: #0645ad;
+@menu-main-body-link-visited-color: #0b0080;
+@menu-main-body-margin: 0 0 0 1.25em;
+@menu-main-body-padding: 0;
+@menu-main-logo-left: 0.5em;
+
+// Personal menu
+@menu-personal-font-size: 0.75em;
+
+// Collapsible nav
+@collapsible-nav-heading-color: #4D4D4D;
+@collapsible-nav-heading-collapsed-color: #0645AD;
+
+@collapsible-nav-heading-padding: 4px 0 3px 1.5em;
+@collapsible-nav-body-margin: 0 0 0 1.25em;
-- 
2.20.1