mediawiki.ui: Add a new 'highlightColor' argument to .button-colors() instead of...

Results from mix() aren't the same as the ones in the specification.
Added the correct colors as variables

Change-Id: I43e9413fc8d195f897426eeadce44f9ece294706

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 2d68457..db983a7 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -33,13 +33,13 @@
 // Button styling
 // ----------------------------------------------------------------------------
 
-.button-colors(@bgColor) {
+.button-colors(@bgColor, @highlightColor) {
        background: @bgColor;
 
        &:hover {
                // 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%);
+               border-bottom-color: @highlightColor;
        }
 
        &:focus {
@@ -55,15 +55,12 @@
 
        &: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%);
+               background: @highlightColor;
                box-shadow: none;
        }
 }
 
-.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
+.button-colors(@bgColor, @highlightColor) when (lightness(@bgColor) >= 70%) {
        color: @colorButtonText;
        border: 1px solid @colorGray12;
 
@@ -86,7 +83,7 @@
        }
 }
 
-.button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
+.button-colors(@bgColor, @highlightColor) 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 and width
@@ -106,7 +103,7 @@
        }
 }
 
-.button-colors-quiet(@textColor) {
+.button-colors-quiet(@textColor, @highlightColor) {
        // Quiet buttons all start gray, and reveal
        // constructive/progressive/destructive color on hover and active.
        color: @colorButtonText;
@@ -118,9 +115,7 @@
 
        &:active,
        &.mw-ui-checked {
-               // lessphp doesn't implement shade, see above
-               // color: shade(@textColor, 20%);
-               color: mix(#000, @textColor, 20%);
+               color: @highlightColor;
        }
 
        &:disabled {

diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index f6bf382..8ffc6ed 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -21,12 +21,15 @@
 // Semantic background colors
 // Blue; for contextual use of a continuing action
 @colorProgressive: #347bff;
+@colorProgressiveHighlight: #2962CC;
 // Green; for contextual use of a positive finalizing action
 @colorConstructive: #00af89;
+@colorConstructiveHighlight: #008C6D;
 // 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;
+@colorDestructiveHighlight: #A7170F;
 // 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
@@ -41,6 +44,7 @@
 @colorText: @colorGray2;
 @colorTextLight: @colorGray6;
 @colorButtonText: @colorGray5;
+@colorButtonTextHighlight: @colorGray7;
 @colorDisabledText: @colorGray12;
 @colorErrorText: #CC0000;
 

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index f88f3ee..53e13b7 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -47,7 +47,7 @@
        zoom: 1;
 
        // Container styling
-       .button-colors(#FFF);
+       .button-colors(#FFF, #CCC);
        border-radius: @borderRadius;
        min-width: 4em;
 
@@ -135,10 +135,10 @@
        // Styleguide 2.1.1.
        &.mw-ui-progressive,
        &.mw-ui-primary {
-               .button-colors(@colorProgressive);
+               .button-colors(@colorProgressive, @colorProgressiveHighlight);
 
                &.mw-ui-quiet {
-                       .button-colors-quiet(@colorProgressive);
+                       .button-colors-quiet(@colorProgressive, @colorProgressiveHighlight);
                }
        }
 
@@ -158,10 +158,10 @@
        //
        // Styleguide 2.1.2.
        &.mw-ui-constructive {
-               .button-colors(@colorConstructive);
+               .button-colors(@colorConstructive, @colorConstructiveHighlight);
 
                &.mw-ui-quiet {
-                       .button-colors-quiet(@colorConstructive);
+                       .button-colors-quiet(@colorConstructive, @colorConstructiveHighlight);
                }
        }
 
@@ -180,10 +180,10 @@
        //
        // Styleguide 2.1.3.
        &.mw-ui-destructive {
-               .button-colors(@colorDestructive);
+               .button-colors(@colorDestructive, @colorDestructiveHighlight);
 
                &.mw-ui-quiet {
-                       .button-colors-quiet(@colorDestructive);
+                       .button-colors-quiet(@colorDestructive, @colorDestructiveHighlight);
                }
        }
 
@@ -220,7 +220,7 @@
                background: transparent;
                border: none;
                text-shadow: none;
-               .button-colors-quiet(@colorButtonText);
+               .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight);
 
                &:hover,
                &:focus {