Update to MediaWiki 1.24.1

10 files changed, 809 insertions, 0 deletions

diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less
new file mode 100644
index 00000000..e1b258dd
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/anchors.less
@@ -0,0 +1,77 @@
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins";
+
+// Helpers
+.mw-ui-anchor( @mainColor ) {
+	// Make all context classes take the main color in IE6
+	.select-ie6-only& {
+		&:link, &:visited, &:hover, &:focus, &:active {
+			color: @mainColor;
+		}
+	}
+
+	// Hover state
+	&:hover {
+		color: lighten( @mainColor, @colorLightenPercentage );
+	}
+	// Focus and active states
+	&:focus, &:active {
+		color: darken( @mainColor, @colorDarkenPercentage );
+		outline: none; // outline fix
+	}
+
+	color: @mainColor;
+
+	// Quiet mode is gray at first
+	&.mw-ui-quiet {
+		.mw-ui-anchor-quiet( @mainColor );
+	}
+}
+
+.mw-ui-anchor-quiet( @mainColor ) {
+	color: @colorTextLight;
+	text-decoration: none;
+
+	&:hover {
+		color: @mainColor;
+	}
+	&:focus, &:active {
+		color: darken( @mainColor, @colorDarkenPercentage );
+	}
+}
+
+/*
+Text & Anchors
+
+Allows you to give text a context as to the type of action it is indicating.
+
+Styleguide 6.
+*/
+
+/*
+Guidelines
+
+This context should only applied on elements without special behavior (DIV, SPAN, etc.), including A elements. These classes cannot be applied for styling purposes on other elements (such as form elements), except when used in combination with .mw-ui-button to alter a button context.
+
+Markup:
+<a href=# class="mw-ui-progressive {$modifiers}">Progressive</a>
+<a href=# class="mw-ui-constructive {$modifiers}">Constructive</a>
+<a href=# class="mw-ui-destructive {$modifiers}">Destructive</a>
+
+.mw-ui-quiet - Quiet until interaction.
+
+Styleguide 6.1.
+*/
+.mw-ui-progressive {
+	.mw-ui-anchor( @colorProgressive );
+}
+.mw-ui-constructive {
+	.mw-ui-anchor( @colorConstructive );
+}
+.mw-ui-destructive {
+	.mw-ui-anchor( @colorDestructive );
+}
+.mw-ui-quiet {
+	.mw-ui-anchor-quiet( @colorTextLight );
+}
diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
new file mode 100644
index 00000000..f6a44fd4
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -0,0 +1,276 @@
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins";
+
+// Buttons
+//
+// All buttons start with mw-ui-button class, modified by other classes.
+// It can be any element.  Due to a lack of a CSS reset, the exact styling of
+// the button depends on what type of element is used.
+// There are two kinds of buttons, the default is a "Call to Action" with an obvious border
+// and there is a quiet kind without a border.
+//
+// Styleguide 2.
+
+@transitionDuration: .1s;
+@transitionFunction: ease-in-out;
+
+// Neutral button styling
+//
+// Markup:
+// <div>
+//   <button class="mw-ui-button">.mw-ui-button</button>
+// </div>
+// <div>
+//   <button class="mw-ui-button" disabled>.mw-ui-button</button>
+// </div>
+//
+// Styleguide 2.1.
+.mw-ui-button {
+	// Inherit the font rather than apply user agent stylesheet (bug 70072)
+	font-family: inherit;
+	font-size: 1em;
+	// Container layout
+	display: inline-block;
+	padding: .5em 1em;
+	margin: 0;
+	.box-sizing(border-box);
+
+	// Disable weird iOS styling
+	-webkit-appearance: none;
+
+	// IE6/IE7 hack
+	// http://stackoverflow.com/a/5838575/365238
+	*display: inline;
+	zoom: 1;
+
+	// Container styling
+	.button-colors(#FFF);
+	border-radius: @borderRadius;
+	min-width: 80px;
+
+	// Ensure that buttons and inputs are nicely aligned when they have differing heights
+	vertical-align: middle;
+
+	// Content styling
+	text-align: center;
+	font-weight: bold;
+
+	// Interaction styling
+	cursor: pointer;
+
+	&:disabled {
+		text-shadow: none;
+		cursor: default;
+	}
+
+	.transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
+
+	// Styling for specific button types
+	// -----------------------------------------
+
+	// Big buttons
+	//
+	// Not all buttons are equal. You can emphasise certain actions over others
+	// using the mw-ui-big class.
+	//
+	// Markup:
+	// <div>
+	//   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
+	// </div>
+	//
+	// Styleguide 2.1.6.
+	&.mw-ui-big {
+		font-size: 1.3em;
+	}
+
+	// Block buttons
+	//
+	// Some buttons might need to be stacked.
+	//
+	// Markup:
+	// <div>
+	//   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
+	// </div>
+	//
+	// Styleguide 2.1.5.
+	&.mw-ui-block {
+		display: block;
+		width: 100%;
+	}
+
+	// Progressive buttons
+	//
+	// Use progressive buttons for actions which lead to a next step in the process.
+	// .mw-ui-primary is deprecated, kept for compatibility.
+	//
+	// Markup:
+	// <div>
+	//   <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
+	// </div>
+	//
+	// Styleguide 2.1.1.
+	&.mw-ui-progressive,
+	&.mw-ui-primary {
+		.button-colors(@colorProgressive);
+
+		&.mw-ui-quiet {
+			.button-colors-quiet(@colorProgressive);
+		}
+	}
+
+	// Constructive buttons
+	//
+	// Use constructive buttons for actions which result in a final action in the process that results
+	// in a change of state.
+	// e.g. save changes button
+	//
+	// Markup:
+	// <div>
+	//   <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
+	// </div>
+	//
+	// Styleguide 2.1.2.
+	&.mw-ui-constructive {
+		.button-colors(@colorConstructive);
+
+		&.mw-ui-quiet {
+			.button-colors-quiet(@colorConstructive);
+		}
+	}
+
+	// Destructive buttons
+	//
+	// Use destructive buttons for actions which result in the destruction of data.
+	// e.g. deleting a page.
+	// This should not be used for cancel buttons.
+	//
+	// Markup:
+	// <div>
+	//   <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
+	// </div>
+	//
+	// Styleguide 2.1.3.
+	&.mw-ui-destructive {
+		.button-colors(@colorDestructive);
+
+		&.mw-ui-quiet {
+			.button-colors-quiet(@colorDestructive);
+		}
+	}
+
+	// Quiet buttons
+	//
+	// Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons.
+	//
+	// Markup:
+	// <div>
+	//   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
+	// </div>
+	// <div>
+	//   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
+	// </div>
+	//
+	// Styleguide 2.1.4.
+	&.mw-ui-quiet {
+		background: transparent;
+		border: none;
+		text-shadow: none;
+		.button-colors-quiet(@colorButtonText);
+
+		&:hover,
+		&:focus {
+			box-shadow: none;
+		}
+
+		&:active,
+		&:disabled {
+			background: transparent;
+		}
+	}
+}
+
+a.mw-ui-button {
+	text-decoration: none;
+
+	// This overrides an underline declaration on a:hover and a:focus in
+	// commonElements.css, which the class alone isn't specific enough to do.
+	&:hover,
+	&:focus {
+		text-decoration: none;
+	}
+}
+
+// Button groups
+//
+// Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
+//
+// Markup:
+// <div class="mw-ui-button-group">
+//   <div class="mw-ui-button">A</div>
+//   <div class="mw-ui-button">B</div>
+//   <div class="mw-ui-button">C</div>
+//   <div class="mw-ui-button">D</div>
+// </div><div style="clear:both"></div>
+//
+// Styleguide 2.2.
+.mw-ui-button-group > * {
+	border-radius: 0;
+	float: left;
+
+	&:first-child {
+		border-top-left-radius: @borderRadius;
+		border-bottom-left-radius: @borderRadius;
+	}
+
+	&:not(:first-child) {
+		border-left: none;
+	}
+
+	&:last-child{
+		border-top-right-radius: @borderRadius;
+		border-bottom-right-radius: @borderRadius;
+	}
+}
diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
new file mode 100644
index 00000000..e39646bc
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -0,0 +1,100 @@
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+
+// Checkbox
+//
+// Styling checkboxes in a way that works cross browser is a tricky problem to solve.
+// In MediaWiki UI put a checkbox and label inside a mw-ui-checkbox div.
+// This renders in all browsers except IE6-8 which do not support the :checked selector;
+// these are kept backwards-compatible using the :not(#noop) selector.
+// You should give the checkbox and label matching "id" and "for" attributes, respectively.
+//
+// Markup:
+// <div class="mw-ui-checkbox">
+//   <input type="checkbox" id="kss-example-5"><label for="kss-example-5">Standard checkbox</label>
+// </div>
+// <div class="mw-ui-checkbox">
+//   <input type="checkbox" id="kss-example-5-2" disabled><label for="kss-example-5-2">Disabled checkbox</label>
+// </div>
+//
+// Styleguide 5.
+.mw-ui-checkbox {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+@checkboxSize: 24px;
+
+// We use the not selector to cancel out styling on IE 8 and below
+.mw-ui-checkbox:not(#noop) {
+	// Position relatively so we can make use of absolute pseudo elements
+	position: relative;
+	line-height: @checkboxSize;
+
+	* {
+		vertical-align: middle;
+	}
+
+	input[type="checkbox"] {
+		// we hide the input element as instead we will style the label that follows
+		// we use opacity so that VoiceOver software can still identify it
+		opacity: 0;
+		// ensure the invisible checkbox takes up the required width
+		width: @checkboxSize;
+		height: @checkboxSize;
+
+		// the pseudo before element of the label after the checkbox now looks like a checkbox
+		& + label {
+			cursor: pointer;
+
+			&::before {
+						content: '';
+						position: absolute;
+						left: 0;
+						display: inline-block;
+						border-radius: @borderRadius;
+						margin-right: 18px;
+						width: @checkboxSize;
+						height: @checkboxSize;
+						background-color: #fff;
+						border: 1px solid grey;
+					}
+		}
+
+		// when the input is checked, style the label pseudo before element that followed as a checked checkbox
+		&:checked {
+			+ label {
+				&::before {
+					.background-image-svg('images/checked.svg', 'images/checked.png');
+					background-repeat: no-repeat;
+					background-position: center top;
+				}
+			}
+		}
+
+		@focusBottomBorderSize: 3px;
+		&:active,
+		&:focus {
+			+ label {
+				&::after {
+					content: '';
+					position: absolute;
+					width: @checkboxSize;
+					height: @checkboxSize - @focusBottomBorderSize + 1; // offset by bottom border
+					// offset from the checkbox by 1px to account for left border
+					left: 1px;
+					border-bottom: solid @focusBottomBorderSize lightgrey;
+				}
+			}
+		}
+
+		// disabled checked boxes have a gray background
+		&:disabled + label {
+			cursor: default;
+
+			&::before {
+				background-color: lightgrey;
+			}
+		}
+	}
+}
diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less
new file mode 100644
index 00000000..592a3098
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/forms.less
@@ -0,0 +1,166 @@
+// Form elements and layouts
+
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins";
+
+// --------------------------------------------------------------------------
+// Layouts
+// --------------------------------------------------------------------------
+
+// The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the
+// 'VForm' design, the form can't be narrower than this.
+@captchaContainerWidth: 290px;
+@defaultFormWidth: @captchaContainerWidth;
+
+// Forms
+//
+// Styleguide 3.
+
+// VForm
+//
+// Style a compact vertical stacked form ("VForm") and the elements in divs
+// within it. See button and inputs section on guidance of how and when to use them.
+//
+// Markup:
+// <form class="mw-ui-vform">
+//   <div class="mw-ui-vform-field">This is a form example.</div>
+//   <div class="mw-ui-vform-field">
+//     <label>Username </label>
+//     <input class="mw-ui-input" value="input">
+//   </div>
+//   <div class="mw-ui-vform-field">
+//     <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
+//   </div>
+// </form>
+//
+// Styleguide 3.1.
+.mw-ui-vform {
+	.box-sizing(border-box);
+
+	width: @defaultFormWidth;
+
+	// MW currently doesn't use the type attribute everywhere on inputs.
+	select,
+	.mw-ui-button {
+		display: block;
+		.box-sizing(border-box);
+		margin: 0;
+		width: 100%;
+	}
+
+	// Give dropdown lists the same spacing as input fields for consistency.
+	// Values taken from .agora-field-styling() in mixins/form.less
+	select {
+		padding: 0.35em 0.5em 0.35em 0.5em;
+		vertical-align: middle;
+	}
+
+	> label {
+		display: block;
+		.box-sizing(border-box);
+		.agora-label-styling();
+		width: auto;
+		margin: 0 0 0.2em;
+		padding: 0;
+	}
+
+	// Override input styling just for checkboxes and radio inputs.
+	input[type="radio"] {
+		display: inline;
+		.box-sizing(content-box);
+		width: auto;
+	}
+
+
+	// Styles for information boxes
+	//
+	// Regular HTMLForm uses .error class, some special pages like
+	// SpecialUserlogin (login and create account) use .errorbox.
+	//
+	// Markup:
+	// <form class="mw-ui-vform">
+	//   <div class="errorbox">An error occurred</div>
+	//   <div class="warningbox">A warning to be noted</div>
+	//   <div class="successbox">Action successful!</div>
+	//   <div class="error">A different kind of error</div>
+	//   <div class="error">
+	//     <ul><li>There are problems with some of your input.</li></ul>
+	//   </div>
+	//   <div class="mw-ui-vform-field">
+	//     <input type="text" value="input" class="mw-ui-input">
+	//   </div>
+	//   <div class="mw-ui-vform-field">
+	//     <select>
+	//       <option value="1">Option 1</option>
+	//       <option value="2">Option 2</option>
+	//     </select>
+	//     <span class="error">The value you specified is not a valid option.</span>
+	//   </div>
+	//   <div class="mw-ui-vform-field">
+	//     <button class="mw-ui-button">Button in vform</button>
+	//   </div>
+	// </form>
+	//
+	// Styleguide 3.2.
+	.error,
+	.errorbox,
+	.warningbox,
+	.successbox {
+		.box-sizing(border-box);
+		font-size: 0.9em;
+		margin: 0 0 1em 0;
+		padding: 0.5em;
+		word-wrap: break-word;
+	}
+
+	// Colours taken from those for .errorbox in shared.css
+	.error {
+		color: #cc0000;
+		border: 1px solid #fac5c5;
+		background-color: #fae3e3;
+		text-shadow: 0 1px #fae3e3;
+	}
+
+	// This specifies styling for individual field validation error messages.
+	// Show them below the fields to prevent line break glitches, and leave
+	// some space between the field and the error message box.
+	.mw-ui-vform-field .error {
+		display: block;
+		margin-top: 5px;
+	}
+
+}
+
+// --------------------------------------------------------------------------
+// Elements
+// --------------------------------------------------------------------------
+
+// A wrapper for a single form field: the <input> / <select> / <button> element,
+// help text, labels, associated error/warning/success messages, and so on.
+// Elements with this class are generated by HTMLFormField in core MediaWiki.
+//
+// (We use a broad definition of 'field' here: a purely textual information
+// block is also a "field".)
+.mw-ui-vform-field {
+	display: block;
+	margin: 0 0 15px;
+	padding: 0;
+	width: 100%;
+}
+
+// Apply mw-ui-label to individual elements to style them.
+// You generally don't need to use this class if <label> is within an Agora
+// form container such as mw-ui-vform
+.mw-ui-label {
+	.agora-label-styling(); // mixins/forms.less
+}
+
+// Nesting an input  inside a label with this class
+// improves alignment, e.g.
+//	<label class="mw-ui-radio-label">
+//		<input type="radio">The label text
+//	</label>
+.mw-ui-radio-label {
+	.agora-inline-label-styling();
+}
diff --git a/resources/src/mediawiki.ui/components/images/checked.png b/resources/src/mediawiki.ui/components/images/checked.png
new file mode 100644
index 00000000..ce4e6b9a
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/images/checked.png
diff --git a/resources/src/mediawiki.ui/components/images/checked.svg b/resources/src/mediawiki.ui/components/images/checked.svg
new file mode 100644
index 00000000..aea69db4
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/images/checked.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 12l5 5 11-12" stroke="#00B78C" stroke-width="3" fill="none"/></svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
new file mode 100644
index 00000000..1da42a45
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -0,0 +1,126 @@
+// Inputs
+
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins";
+
+// Placeholder text styling helper
+.field-placeholder-styling() {
+	font-style: italic;
+	font-weight: normal;
+}
+// Inputs
+//
+// Apply the mw-ui-input class to input and textarea fields.
+//
+// Styleguide 1.
+
+// mw-ui-input
+//
+// Style an input using MediaWiki UI.
+// Currently in draft status and subject to change.
+// When focused a progressive highlight appears to the left of the field.
+//
+// Markup:
+// <input class="mw-ui-input" placeholder="Enter your name">
+// <textarea class="mw-ui-input">Text here</textarea>
+//
+// Styleguide 1.1.
+.mw-ui-input {
+	// turn off default input styling for input[type="search"] fields
+	-webkit-appearance: none;
+	border: 1px solid @colorFieldBorder;
+	.box-sizing(border-box);
+	width: 100%;
+	padding: .4em .3em .2em .6em;
+	display: block;
+	vertical-align: middle;
+	border-radius: @borderRadius;
+	// Override user agent stylesheet properties. Instead use parent element.
+	color: inherit;
+	font-family: inherit;
+	font-size: inherit;
+	line-height: inherit;
+	.transition(~"border linear .2s, box-shadow linear .2s");
+
+	// Placeholder text styling must be set individually for each browser @winter
+	&::-webkit-input-placeholder { // webkit
+		.field-placeholder-styling;
+	}
+	&::-moz-placeholder { // FF 4-18
+		.field-placeholder-styling;
+	}
+	&:-moz-placeholder { // FF >= 19
+		.field-placeholder-styling;
+	}
+	&:-ms-input-placeholder { // IE >= 10
+		.field-placeholder-styling;
+	}
+
+	// Remove red outline from inputs which have required field and invalid content.
+	// This is a Firefox only issue
+	// See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
+	// This should be above :focus so focus behaviour takes preference
+	&:invalid {
+		box-shadow: none;
+	}
+
+	&:focus {
+		box-shadow: inset .45em 0 0 @colorProgressive;
+		border-color: @colorGrayDark;
+		// Remove focus glow on input[type="search"]
+		outline: 0;
+	}
+}
+
+textarea.mw-ui-input {
+	min-height: 8em;
+}
+
+// mw-ui-input-inline
+//
+// Use mw-ui-input-inline with mw-ui-input in cases where you want a button to line up with the input.
+//
+// Markup:
+// <input class="mw-ui-input mw-ui-input-inline">
+// <button class="mw-ui-button mw-ui-constructive">go</button>
+//
+// Styleguide 1.2.
+input[type="number"],
+.mw-ui-input-inline {
+	display: inline-block;
+	width: auto;
+}
+
+// mw-ui-input-large
+//
+// Use mw-ui-input-large with mw-ui-input in cases where there are multiple inputs on a screen and you
+// want to draw attention to one instance. For example, replying with a subject line and more text.
+// Currently in draft status and subject to change. When used on an input field, the text is styled
+// in a large font. When used alongside another mw-ui-input large they are pushed together to form one
+// contiguous block.
+//
+// Markup:
+// <input value="input" class="mw-ui-input mw-ui-input-large" value="input" placeholder="Enter subject">
+// <textarea class="mw-ui-input mw-ui-input-large" placeholder="Provide additional details"></textarea>
+//
+// Styleguide 1.3.
+.mw-ui-input-large {
+	margin-top: 0;
+	margin-bottom: 0;
+
+	// When two large inputs are together, we make them flush by hiding one of the borders
+	& + .mw-ui-input-large {
+		margin-top: -1px;
+	}
+	// When focusing, make the input relative to raise it above any attached inputs to unhide its borders
+	&:focus {
+		position: relative;
+	}
+}
+
+input.mw-ui-input-large {
+	font-size: 1.75em;
+	font-weight: bold;
+	line-height: 1.25em;
+}
diff --git a/resources/src/mediawiki.ui/components/utilities.less b/resources/src/mediawiki.ui/components/utilities.less
new file mode 100644
index 00000000..0bbb440f
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/utilities.less
@@ -0,0 +1,47 @@
+// Utilities
+//
+// Other things which effect the behaviour of components
+
+// 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>
+.mw-ui-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>
+.mw-ui-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>
+.mw-ui-center-block {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
diff --git a/resources/src/mediawiki.ui/default.less b/resources/src/mediawiki.ui/default.less
new file mode 100644
index 00000000..c9d62087
--- /dev/null
+++ b/resources/src/mediawiki.ui/default.less
@@ -0,0 +1,5 @@
+/**
+ * Provide Agora appearance for mw-ui-* classes.
+ */
+@import "components/forms";
+@import "components/utilities";
diff --git a/resources/src/mediawiki.ui/styleguide.md b/resources/src/mediawiki.ui/styleguide.md
new file mode 100644
index 00000000..61691c79
--- /dev/null
+++ b/resources/src/mediawiki.ui/styleguide.md
@@ -0,0 +1,11 @@
+#mediawiki.ui
+
+This is the living style guide for mediawiki.ui.  It is generated from the mediawiki.ui LESS source code programmatically. Please use it as a reference when developing code for MediaWiki to ensure your design is consistent with others across the site. Note this document is a work in progress and subject to change.
+
+##Design Philosophy
+
+###Inviting
+Our aesthetics should be clean and encourage interaction.
+
+###Worldly
+We are thoughtful and are aware of cultural differences. We are careful about words, color usage, and images that might offend. We are also aware of limited connectivity in some areas of the world and are thoughtful of image sizes and loading speed.  We work to support accessibility.