mediawiki.ui: Update color palette

New variables have been added to encourage reuse of the preferred
color palette.

See https://trello.com/c/IRqbu8p4/15-color-swatches

Also replacing deprecated LESS variables.

Change-Id: I03620cc4acb1ea0c7c0d2e951a9913396276c27a

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index bda4043..ae08c9f 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -5,7 +5,7 @@
 // Font is not included.
 .agora-field-styling() {
 
-       border: 1px solid @colorGrayLight;
+       border: 1px solid @colorFieldBorder;
 
        &:focus {
                // Styling focus of native checkboxes etc on Mac is almost impossible.
@@ -13,9 +13,9 @@
                        outline: 0; // Removes OS field focus
                }
 
-               box-shadow: @colorProgressiveShadow 0 0 5px;
+               box-shadow: lighten(@colorProgressive, 6%) 0 0 5px;
 
-               border-color: @colorProgressiveShadow;
+               border-color: lighten(@colorProgressive, 6%);
        }
 
        color: @colorText;
@@ -26,9 +26,8 @@
 }
 
 .agora-label-styling() {
-       //font-weight: bold;
        font-size: 0.9em;
-       color: darken(@colorGrayLight, 50%);
+       color: @colorText;
 
        * {
                font-weight: normal;
@@ -49,7 +48,7 @@
                height: auto;
                margin: 0 0.1em 0 0;
                padding: 0;
-               border: 1px solid @colorGrayLight;
+               border: 1px solid @colorFieldBorder;
                cursor: pointer;
        }
 }
@@ -84,11 +83,11 @@
 }
 
 .button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
-       color: @colorGrayDark;
-       border: 1px solid @colorGrayLight;
+       color: @colorButtonText;
+       border: 1px solid @colorGray12;
 
        &:disabled {
-               color: @colorGrayLight;
+               color: @colorDisabledText;
 
                // make sure disabled buttons don't have hover and active states
                &:hover,
@@ -100,7 +99,7 @@
 }
 
 .button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
-       color: @colorWhite;
+       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)
@@ -110,8 +109,8 @@
        text-shadow: 0 1px rgba(0, 0, 0, .1);
 
        &:disabled {
-               background: @colorGrayLight;
-               border-color: @colorGrayLight;
+               background: @colorGray12;
+               border-color: @colorGray12;
 
                // make sure disabled buttons don't have hover and active states
                &:hover,
@@ -125,7 +124,7 @@
 .button-colors-quiet(@textColor) {
        // Quiet buttons all start gray, and reveal
        // constructive/progressive/destructive color on hover and active.
-       color: @colorGrayDark;
+       color: @colorButtonText;
 
        &:hover,
        &:focus {
@@ -142,6 +141,6 @@
        }
 
        &:disabled {
-               color: @colorGrayLight;
+               color: @colorDisabledText;
        }
 }

diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index ccf869d..8a2741d 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -1,37 +1,59 @@
-@baseFontSize: 1em;
+// Colors for use in mediawiki.ui and elsewhere
 
-// 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;
-// 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;
+// 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;
-// 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
+// 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%;
\ No newline at end of file
+@colorLightenPercentage: 13.5%;
+
+// Text colors
+@colorText: @colorGray2;
+@colorTextLight: @colorGray6;
+@colorButtonText: @colorGray8;
+@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;

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index ec08413..189dae8 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -39,7 +39,7 @@
        zoom: 1;
 
        // Container styling
-       .button-colors(@colorWhite);
+       .button-colors(#FFF);
        border-radius: @buttonBorderRadius;
 
        // Ensure that buttons and inputs are nicely aligned when they have differing heights
@@ -75,7 +75,7 @@
        //
        // Styleguide 2.1.6.
        &.mw-ui-big {
-               font-size: @baseFontSize * 1.3;
+               font-size: 1.3em;
        }
 
        // Block buttons
@@ -169,7 +169,7 @@
                background: transparent;
                border: none;
                text-shadow: none;
-               .button-colors-quiet(@colorGrayDark);
+               .button-colors-quiet(@colorButtonText);
 
                &:hover,
                &:focus {