From 9850db976c38a1c7d62dad4176e0e27d8d80daef Mon Sep 17 00:00:00 2001
From: Shahyar <shahyar@gmail.com>
Date: Thu, 3 Apr 2014 18:29:17 -0500
Subject: [PATCH] mw-ui mixins: More colors, more browser helper mixins

Change-Id: I895679ffe2f5eb1f002ff110c750e77824004820
---
 .../src/mediawiki.less/mediawiki.mixins.less  | 16 ++++++---
 .../src/mediawiki.ui/settings/colors.less     | 33 ++++++++++++++++---
 resources/src/mediawiki.ui/vector.less        |  1 +
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index 6556af9991..67e2f33e22 100644
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -60,13 +60,21 @@
 	list-style-image: url(@url);
 }
 
-.transition(@string) {
-	-webkit-transition: @string;
-	transition: @string;
+.transition(@value) {
+	-webkit-backface-visibility: hidden; // fixes Chrome 1px movement bug
+	-webkit-transition: @value;
+	-moz-transition: @value;
+	-o-transition: @value;
+	transition: @value;
 }
 
 .box-sizing(@value) {
-	-moz-box-sizing: @value;
 	-webkit-box-sizing: @value;
+	-moz-box-sizing: @value;
 	box-sizing: @value;
 }
+
+.box-shadow(@value) {
+	-webkit-box-shadow: @value; // Android 2.3+, iOS 4.0.2-4.2, Safari 3-4
+	box-shadow: @value; // Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+
+}
diff --git a/resources/src/mediawiki.ui/settings/colors.less b/resources/src/mediawiki.ui/settings/colors.less
index 18661de684..d456f864fd 100644
--- a/resources/src/mediawiki.ui/settings/colors.less
+++ b/resources/src/mediawiki.ui/settings/colors.less
@@ -1,10 +1,35 @@
+// FIXME: remove @colorProgressiveShadow (shadows should be generated
+// in LESS by dimming the original colors)
+@colorProgressiveShadow: #4091ed;
+
+// White; for background use, and text use on dark backgrounds
 @colorWhite: #fff;
-@colorGrayLight: #ccc;
+// Off-white; for background use on white backgrounds
+@colorOffWhite: #fafafa;
+// Dark gray; for non-text use
 @colorGrayDark: #898989;
+// Light gray; for non-text use
+@colorGrayLight: #ccc;
+// Very light gray; for non-text use
+@colorGrayLighter: #ddd;
+// Lightest gray; for non-text use
+@colorGrayLightest: #eee;
+
+// Dark gray; for body text
 @colorText: #252525;
+// Light gray; for less important body text and links
+@colorTextLight: #696969;
+
+// Blue; for contextual use of a continuing action
 @colorProgressive: #347bff;
-// FIXME: remove @colorProgressiveShadow (shadows should be generated
-// in LESS by dimming the original colors)
-@colorProgressiveShadow: #4091ed;
+// Orange; for contextual use of returning to a past action
+@colorRegressive: #ff7e1e;
+// Green; for contextual use of a positive finalizing action
 @colorConstructive: #00af89;
+// Red; for contextual use of a negative finalizing action
 @colorDestructive: #d11d13;
+
+// 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%;
\ No newline at end of file
diff --git a/resources/src/mediawiki.ui/vector.less b/resources/src/mediawiki.ui/vector.less
index df51efcd89..04e88e8bf4 100644
--- a/resources/src/mediawiki.ui/vector.less
+++ b/resources/src/mediawiki.ui/vector.less
@@ -20,6 +20,7 @@
 //
 // Styleguide 1.
 
+@import "mediawiki.mixins";
 @import "components/utilities";
 @import "components/vector/forms";
 @import "components/vector/containers";
-- 
2.20.1