mw-ui mixins: More colors, more browser helper mixins

Change-Id: I895679ffe2f5eb1f002ff110c750e77824004820

diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index 6556af9..67e2f33 100644 (file)
--- 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 18661de..d456f86 100644 (file)
--- 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 df51efc..04e88e8 100644 (file)
--- 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";