mediawiki.ui: Add @activeColor argument to the .button-colors() mixin

Have kept the colors same for now except for .mw-ui-button:active and
.mw-ui-button.mw-ui-checked . Can be changed later once the design
team has decided.

Change-Id: I7c418b970c5e5fa95f740ecf3d90622bf7f02364

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index db983a7..56b6811 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -33,7 +33,7 @@
 // Button styling
 // ----------------------------------------------------------------------------
 
-.button-colors(@bgColor, @highlightColor) {
+.button-colors(@bgColor, @highlightColor, @activeColor) {
        background: @bgColor;
 
        &:hover {
@@ -55,12 +55,12 @@
 
        &:active,
        &.mw-ui-checked {
-               background: @highlightColor;
+               background: @activeColor;
                box-shadow: none;
        }
 }
 
-.button-colors(@bgColor, @highlightColor) when (lightness(@bgColor) >= 70%) {
+.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) >= 70%) {
        color: @colorButtonText;
        border: 1px solid @colorGray12;
 
@@ -83,7 +83,7 @@
        }
 }
 
-.button-colors(@bgColor, @highlightColor) when (lightness(@bgColor) < 70%) {
+.button-colors(@bgColor, @highlightColor, @activeColor) 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
@@ -103,7 +103,7 @@
        }
 }
 
-.button-colors-quiet(@textColor, @highlightColor) {
+.button-colors-quiet(@textColor, @highlightColor, @activeColor) {
        // Quiet buttons all start gray, and reveal
        // constructive/progressive/destructive color on hover and active.
        color: @colorButtonText;
@@ -115,7 +115,7 @@
 
        &:active,
        &.mw-ui-checked {
-               color: @highlightColor;
+               color: @activeColor;
        }
 
        &:disabled {

diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index 8ffc6ed..7a81ff2 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -22,14 +22,17 @@
 // Blue; for contextual use of a continuing action
 @colorProgressive: #347bff;
 @colorProgressiveHighlight: #2962CC;
+@colorProgressiveActive: #2962CC;
 // Green; for contextual use of a positive finalizing action
 @colorConstructive: #00af89;
 @colorConstructiveHighlight: #008C6D;
+@colorConstructiveActive: #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;
+@colorDestructiveActive: #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
@@ -45,6 +48,7 @@
 @colorTextLight: @colorGray6;
 @colorButtonText: @colorGray5;
 @colorButtonTextHighlight: @colorGray7;
+@colorButtonTextActive: @colorGray7;
 @colorDisabledText: @colorGray12;
 @colorErrorText: #CC0000;
 

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 53e13b7..77b3f9d 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, #CCC);
+       .button-colors(#FFF, #CCC, #777);
        border-radius: @borderRadius;
        min-width: 4em;
 
@@ -135,10 +135,10 @@
        // Styleguide 2.1.1.
        &.mw-ui-progressive,
        &.mw-ui-primary {
-               .button-colors(@colorProgressive, @colorProgressiveHighlight);
+               .button-colors(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
 
                &.mw-ui-quiet {
-                       .button-colors-quiet(@colorProgressive, @colorProgressiveHighlight);
+                       .button-colors-quiet(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
                }
        }
 
@@ -158,10 +158,10 @@
        //
        // Styleguide 2.1.2.
        &.mw-ui-constructive {
-               .button-colors(@colorConstructive, @colorConstructiveHighlight);
+               .button-colors(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
 
                &.mw-ui-quiet {
-                       .button-colors-quiet(@colorConstructive, @colorConstructiveHighlight);
+                       .button-colors-quiet(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
                }
        }
 
@@ -180,10 +180,10 @@
        //
        // Styleguide 2.1.3.
        &.mw-ui-destructive {
-               .button-colors(@colorDestructive, @colorDestructiveHighlight);
+               .button-colors(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
 
                &.mw-ui-quiet {
-                       .button-colors-quiet(@colorDestructive, @colorDestructiveHighlight);
+                       .button-colors-quiet(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
                }
        }
 
@@ -220,7 +220,7 @@
                background: transparent;
                border: none;
                text-shadow: none;
-               .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight);
+               .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive);
 
                &:hover,
                &:focus {