From 76d5f43a58da432be0f21d5edb30d457cb46fcfc Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Fri, 11 Jul 2014 14:24:53 -0700
Subject: [PATCH] Simplify MediaWiki UI codebase

* Stop thinking in terms of skins. Apply same styles to all uses of
  MediaWiki. MediaWiki UI should be able to be slotted in anywhere.
* Kill unused mixins
* Move variables into single separate file
** Kill unused variables
* Do not load variables in mixin files (skins should tweak if necessary)
* Create a single variables file

Change-Id: Ib6c2485aca9a6a7c88f1a5326d9990647a1a26fb
---
 resources/Resources.php                       | 10 ++--
 .../mediawiki.ui/mixins/effects.less          |  1 -
 .../mediawiki.ui/mixins/forms.less            |  2 -
 .../mediawiki.ui/mixins/type.less             |  6 --
 .../mediawiki.ui/mixins/utilities.less        | 17 ------
 .../mediawiki.ui/typography.less              |  5 --
 .../{colors.less => variables.less}           |  2 +
 .../components/{default => }/buttons.less     |  3 +-
 .../components/{default => }/forms.less       |  9 ++-
 .../mediawiki.ui/components/utilities.less    | 56 +++++++++++++++----
 .../components/vector/buttons.less            |  6 --
 .../components/vector/containers.less         |  6 --
 .../mediawiki.ui/components/vector/forms.less |  8 ---
 resources/src/mediawiki.ui/default.less       |  2 +-
 resources/src/mediawiki.ui/vector.less        | 26 ---------
 15 files changed, 62 insertions(+), 97 deletions(-)
 delete mode 100644 resources/src/mediawiki.less/mediawiki.ui/mixins/type.less
 delete mode 100644 resources/src/mediawiki.less/mediawiki.ui/mixins/utilities.less
 delete mode 100644 resources/src/mediawiki.less/mediawiki.ui/typography.less
 rename resources/src/mediawiki.less/mediawiki.ui/{colors.less => variables.less} (95%)
 rename resources/src/mediawiki.ui/components/{default => }/buttons.less (98%)
 rename resources/src/mediawiki.ui/components/{default => }/forms.less (97%)
 delete mode 100644 resources/src/mediawiki.ui/components/vector/buttons.less
 delete mode 100644 resources/src/mediawiki.ui/components/vector/containers.less
 delete mode 100644 resources/src/mediawiki.ui/components/vector/forms.less
 delete mode 100644 resources/src/mediawiki.ui/vector.less

diff --git a/resources/Resources.php b/resources/Resources.php
index 4f854fb3e0..5afe336a82 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1442,18 +1442,16 @@ return array(
 	/* MediaWiki UI */
 
 	'mediawiki.ui' => array(
-		'skinStyles' => array(
-			'default' => 'resources/src/mediawiki.ui/default.less',
-			'vector' => 'resources/src/mediawiki.ui/vector.less',
+		'styles' => array(
+			'resources/src/mediawiki.ui/default.less',
 		),
 		'position' => 'top',
 		'targets' => array( 'desktop', 'mobile' ),
 	),
 	// Lightweight module for button styles
 	'mediawiki.ui.button' => array(
-		'skinStyles' => array(
-			'default' => 'resources/src/mediawiki.ui/components/default/buttons.less',
-			'vector' => 'resources/src/mediawiki.ui/components/vector/buttons.less',
+		'styles' => array(
+			'resources/src/mediawiki.ui/components/buttons.less',
 		),
 		'position' => 'top',
 		'targets' => array( 'desktop', 'mobile' ),
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less
index 8561582c62..9b62efe5dc 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less
@@ -1,4 +1,3 @@
-@import "mediawiki.ui/colors";
 // ----------------------------------------------------------------------------
 // Button styling
 // ----------------------------------------------------------------------------
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less
index 6b04061b38..7258d30aac 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less
@@ -1,5 +1,3 @@
-@import "mediawiki.ui/colors";
-
 // Font is not included.
 // For Vector, that should be layered on top with vector-type
 .agora-field-styling() {
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/type.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/type.less
deleted file mode 100644
index bf80ccb167..0000000000
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins/type.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "mediawiki.ui/typography";
-
-.vector-type() {
-	font-size: @baseFontSize;
-	line-height: @baseLineHeight;
-}
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/utilities.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/utilities.less
deleted file mode 100644
index 3d7b73245e..0000000000
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins/utilities.less
+++ /dev/null
@@ -1,17 +0,0 @@
-.agora-flush-left() {
-	float: left;
-	margin-left: 0;
-	padding-left: 0;
-}
-
-.agora-flush-right() {
-	float: right;
-	margin-right: 0;
-	padding-right: 0;
-}
-
-.agora-center-block() {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-}
diff --git a/resources/src/mediawiki.less/mediawiki.ui/typography.less b/resources/src/mediawiki.less/mediawiki.ui/typography.less
deleted file mode 100644
index 83651edb70..0000000000
--- a/resources/src/mediawiki.less/mediawiki.ui/typography.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@baseFontSize: 1em;
-@baseLineHeight: 1.4 * @baseFontSize;
-@baseFontColor: @colorText;
-
-@smallFontSize: 0.75em;
diff --git a/resources/src/mediawiki.less/mediawiki.ui/colors.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
similarity index 95%
rename from resources/src/mediawiki.less/mediawiki.ui/colors.less
rename to resources/src/mediawiki.less/mediawiki.ui/variables.less
index d456f864fd..ccf869df82 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/colors.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -1,3 +1,5 @@
+@baseFontSize: 1em;
+
 // FIXME: remove @colorProgressiveShadow (shadows should be generated
 // in LESS by dimming the original colors)
 @colorProgressiveShadow: #4091ed;
diff --git a/resources/src/mediawiki.ui/components/default/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
similarity index 98%
rename from resources/src/mediawiki.ui/components/default/buttons.less
rename to resources/src/mediawiki.ui/components/buttons.less
index cc8212fe10..e5495ba4d9 100644
--- a/resources/src/mediawiki.ui/components/default/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -1,7 +1,6 @@
 @import "mediawiki.mixins";
-@import "mediawiki.ui/typography";
+@import "mediawiki.ui/variables";
 @import "mediawiki.ui/mixins/effects";
-@import "mediawiki.ui/mixins/utilities";
 
 // Buttons
 //
diff --git a/resources/src/mediawiki.ui/components/default/forms.less b/resources/src/mediawiki.ui/components/forms.less
similarity index 97%
rename from resources/src/mediawiki.ui/components/default/forms.less
rename to resources/src/mediawiki.ui/components/forms.less
index 1a84afd286..bb914801c4 100644
--- a/resources/src/mediawiki.ui/components/default/forms.less
+++ b/resources/src/mediawiki.ui/components/forms.less
@@ -1,7 +1,7 @@
 // Form elements and layouts
 
 @import "mediawiki.mixins";
-@import "mediawiki.ui/mixins/utilities";
+@import "mediawiki.ui/variables";
 @import "mediawiki.ui/mixins/forms";
 
 // --------------------------------------------------------------------------
@@ -157,6 +157,11 @@
 	margin: 0 0 15px;
 	padding: 0;
 	width: 100%;
+
+	input {
+		font-size: 1em;
+		line-height: 1.4;
+	}
 }
 
 // Apply mw-ui-input to individual input fields to style them.
@@ -164,6 +169,8 @@
 // form container such as mw-ui-vform
 .mw-ui-input {
 	.agora-field-styling(); // mixins/forms.less
+	font-size: 1em;
+	line-height: 1.4em;
 }
 
 // Apply mw-ui-label to individual elements to style them.
diff --git a/resources/src/mediawiki.ui/components/utilities.less b/resources/src/mediawiki.ui/components/utilities.less
index dd26cdda91..ccfb67791d 100644
--- a/resources/src/mediawiki.ui/components/utilities.less
+++ b/resources/src/mediawiki.ui/components/utilities.less
@@ -1,19 +1,55 @@
-// Generic helper classes that could be used in many elements/layouts
-
-// --------------------------------------------------------------------------
-// Positioning
-// --------------------------------------------------------------------------
-
-@import "mediawiki.ui/mixins/utilities";
+// Utilities
+//
+// Other things which effect the behaviour of components
+//
+// Styleguide 4.
 
+// Flush left
+//
+// Used when you want to push an element to the left of its containing element
+//
+// Markup:
+// <div class="mw-ui-vform-field">
+//   <label>Username <a href="#" class="mw-ui-flush-left">?</a></label>
+//   <input>
+// </div>
+//
+// Styleguide 4.1.
 .mw-ui-flush-left {
-	.agora-flush-left();
+	float: left;
+	margin-left: 0;
+	padding-left: 0;
 }
 
+// Flush right
+//
+// Used when you want to push an element to the right of its containing element
+//
+// Markup:
+// <div class="mw-ui-vform-field">
+//   <label>Username <a href="#" class="mw-ui-flush-right">?</a></label>
+//   <input>
+// </div>
+//
+// Styleguide 4.2.
 .mw-ui-flush-right {
-	.agora-flush-right();
+	float: right;
+	padding-right: 0;
+	margin-right: 0;
 }
 
+// Center block
+//
+// Centers the element in its containing element
+//
+// Markup:
+// <div>
+//   <button class="mw-ui-center-block">click me</button>
+// </div>
+//
+// Styleguide 4.3.
 .mw-ui-center-block {
-	.agora-center-block();
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
 }
diff --git a/resources/src/mediawiki.ui/components/vector/buttons.less b/resources/src/mediawiki.ui/components/vector/buttons.less
deleted file mode 100644
index 967b193636..0000000000
--- a/resources/src/mediawiki.ui/components/vector/buttons.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "../default/buttons"; // Layer Vector on top of the default settings.
-@import "mediawiki.ui/mixins/type";
-
-.mw-ui-button {
-	.vector-type();
-}
diff --git a/resources/src/mediawiki.ui/components/vector/containers.less b/resources/src/mediawiki.ui/components/vector/containers.less
deleted file mode 100644
index 6db4675ee2..0000000000
--- a/resources/src/mediawiki.ui/components/vector/containers.less
+++ /dev/null
@@ -1,6 +0,0 @@
-// No default settings for containers yet.
-@import "mediawiki.ui/mixins/type";
-
-.mw-ui-container {
-	.vector-type();
-}
diff --git a/resources/src/mediawiki.ui/components/vector/forms.less b/resources/src/mediawiki.ui/components/vector/forms.less
deleted file mode 100644
index 139ee6caf9..0000000000
--- a/resources/src/mediawiki.ui/components/vector/forms.less
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "../default/forms"; // Layer Vector on top of the default settings.
-@import "mediawiki.ui/mixins/type";
-
-.mw-ui-vform,
-.mw-ui-vform input,
-.mw-ui-input {
-	.vector-type();
-}
diff --git a/resources/src/mediawiki.ui/default.less b/resources/src/mediawiki.ui/default.less
index e576937095..ab599fd23b 100644
--- a/resources/src/mediawiki.ui/default.less
+++ b/resources/src/mediawiki.ui/default.less
@@ -3,5 +3,5 @@
  * Vector.
  */
 
+@import "components/forms";
 @import "components/utilities";
-@import "components/default/forms";
diff --git a/resources/src/mediawiki.ui/vector.less b/resources/src/mediawiki.ui/vector.less
deleted file mode 100644
index 04e88e8bf4..0000000000
--- a/resources/src/mediawiki.ui/vector.less
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Provide Agora appearance for mw-ui-* classes when using the Vector skin.
- */
-
-// Typography
-//
-// We prefer the usage of Georgia Bold for all headings. Georgia Regular is used to place emphasis on pull-out or short quotations. This latter usage should be used sparingly. 
-//
-// We prefer the use of Helvetica Neue Regular for body copy. Helvetiva Neue Bold for sub-headers. Pull-out quotes within the body copy should use Helvetica Neue Bold. Helvetica Neue is an not open-source font. Hence, below is a list of preferred alternate choices.
-//
-// Second choice: Helvetica
-//
-// Third choice: Arial
-//
-// Wiki content is often predominantly text; hence, visual hierarchy must be clear. Use these recommended type sizes to inform and establish information hierarchy and organization.
-//
-// Unless if you plan to put extra attention and manually adjust spacing, avoid justifying texts and paragraphs as they are harder to read and create unnecessary visual distractions. Along with centered text, they convey a formal and less friendly environment. 
-//
-// It will be important to talk about other languages, scripts and writing direction - with the same level as importance, not as an afterthought.
-//
-// Styleguide 1.
-
-@import "mediawiki.mixins";
-@import "components/utilities";
-@import "components/vector/forms";
-@import "components/vector/containers";
-- 
2.20.1