2 files changed, 184 insertions, 0 deletions
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
new file mode 100644
index 00000000..ec9888f2
--- /dev/null
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -0,0 +1,122 @@
+// ----------------------------------------------------------------------------
+// Form styling mixins
+// ----------------------------------------------------------------------------
+.agora-label-styling() {
+	font-size: 0.9em;
+	color: @colorText;
+
+	* {
+		font-weight: normal;
+	}
+}
+
+.agora-inline-label-styling() {
+	margin-bottom: 0.5em;
+	cursor: pointer;
+	vertical-align: bottom;
+	line-height: normal;
+
+	font-weight: normal;
+
+	& > input[type="checkbox"],
+	& > input[type="radio"] {
+		width: auto;
+		height: auto;
+		margin: 0 0.1em 0 0;
+		padding: 0;
+		border: 1px solid @colorFieldBorder;
+		cursor: pointer;
+	}
+}
+
+// ----------------------------------------------------------------------------
+// Button styling
+// ----------------------------------------------------------------------------
+
+.button-colors(@bgColor) {
+	background: @bgColor;
+
+	&:hover,
+	&:focus {
+		// The inner bottom bevel should match the active background color.
+		box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
+		border-bottom-color: mix(#000, @bgColor, 20%);
+		outline: none;
+		// remove outline in Firefox
+		&::-moz-focus-inner {
+			border-color: transparent;
+		}
+	}
+
+	&:active,
+	&.mw-ui-checked {
+		// lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
+		// it passes it through, then ResourceLoader drops it.
+		// background: shade(@bgColor, 20%);
+		background: mix(#000, @bgColor, 20%);
+		box-shadow: none;
+	}
+}
+
+.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
+	color: @colorButtonText;
+	border: 1px solid @colorGray12;
+
+	&:disabled {
+		color: @colorDisabledText;
+
+		// make sure disabled buttons don't have hover and active states
+		&:hover,
+		&:active {
+			background: @bgColor;
+			box-shadow: none;
+		}
+	}
+}
+
+.button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
+	color: #fff;
+	// border of the same color as background so that light background and
+	// dark background buttons are the same height (only top and bottom to
+	// make box shadow on hover cover the corners too)
+	border: 1px solid @bgColor;
+	border-left: none;
+	border-right: none;
+	text-shadow: 0 1px rgba(0, 0, 0, .1);
+
+	&:disabled {
+		background: @colorGray12;
+		border-color: @colorGray12;
+
+		// make sure disabled buttons don't have hover and active states
+		&:hover,
+		&:active,
+		&.mw-ui-checked {
+			box-shadow: none;
+		}
+	}
+}
+
+.button-colors-quiet(@textColor) {
+	// Quiet buttons all start gray, and reveal
+	// constructive/progressive/destructive color on hover and active.
+	color: @colorButtonText;
+
+	&:hover,
+	&:focus {
+		// lessphp doesn't implement tint, see above
+		// color: tint(@textColor, 20%);
+		color: mix(#fff, @textColor, 20%);
+	}
+
+	&:active,
+	&.mw-ui-checked {
+		// lessphp doesn't implement shade, see above
+		// color: shade(@textColor, 20%);
+		color: mix(#000, @textColor, 20%);
+	}
+
+	&:disabled {
+		color: @colorDisabledText;
+	}
+}
diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
new file mode 100644
index 00000000..e91302be
--- /dev/null
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -0,0 +1,62 @@
+// Colors for use in mediawiki.ui and elsewhere
+
+// Although this defines many shades, be parsimonious in your own use of grays. Prefer
+// colors already in use in MediaWiki. Prefer semantic color names such as "@colorText".
+@colorGray1: #111; // darkest
+@colorGray2: #222;
+@colorGray3: #333;
+@colorGray4: #444;
+@colorGray5: #555;
+@colorGray6: #666;
+@colorGray7: #777;
+@colorGray8: #888;
+@colorGray9: #999;
+@colorGray10: #AAA;
+@colorGray11: #BBB;
+@colorGray12: #CCC;
+@colorGray13: #DDD;
+@colorGray14: #EEE;
+@colorGray15: #F9F9F9; // lightest
+
+// Semantic background colors
+// Blue; for contextual use of a continuing action
+@colorProgressive: #347bff;
+// Green; for contextual use of a positive finalizing action
+@colorConstructive: #00af89;
+// Orange; for contextual use of returning to a past action
+@colorRegressive: #FF5D00;
+// Red; for contextual use of a negative action of high severity
+@colorDestructive: #d11d13;
+// Orange; for contextual use of a potentially negative action of medium severity
+@colorMediumSevere: #FF5D00;
+// Yellow; for contextual use of a potentially negative action of low severity
+@colorLowSevere: #FFB50D;
+
+// Used in mixins to darken contextual colors by the same amount (eg. focus)
+@colorDarkenPercentage: 13.5%;
+// Used in mixins to lighten contextual colors by the same amount (eg. hover)
+@colorLightenPercentage: 13.5%;
+
+// Text colors
+@colorText: @colorGray2;
+@colorTextLight: @colorGray6;
+@colorButtonText: @colorGray5;
+@colorDisabledText: @colorGray12;
+@colorErrorText: #CC0000;
+
+// UI colors
+@colorFieldBorder: @colorGray12;
+@colorShadow: @colorGray14;
+@colorPlaceholder: @colorGray10;
+@colorNeutral: @colorGray7;
+
+// The following rules are deprecated
+@colorWhite: #fff;
+@colorOffWhite: #fafafa;
+@colorGrayDark: #898989;
+@colorGrayLight: #ccc;
+@colorGrayLighter: #ddd;
+@colorGrayLightest: #eee;
+
+// Global border radius to be used to buttons and inputs
+@borderRadius: 2px;