From c5f26f5f8d84b1fdfd68a2d9087dc108ca052130 Mon Sep 17 00:00:00 2001
From: Prateek Saxena <prtksxna@gmail.com>
Date: Mon, 16 Mar 2015 04:57:21 +0530
Subject: [PATCH] mediawiki.ui: Add a new 'highlightColor' argument to
 .button-colors() instead of using mix()

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

Change-Id: I43e9413fc8d195f897426eeadce44f9ece294706
---
 .../mediawiki.less/mediawiki.ui/mixins.less   | 19 +++++++------------
 .../mediawiki.ui/variables.less               |  4 ++++
 .../src/mediawiki.ui/components/buttons.less  | 16 ++++++++--------
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 2d68457204..db983a78d7 100644
--- 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 f6bf382956..8ffc6ed41a 100644
--- 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 f88f3ee6b9..53e13b7564 100644
--- 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 {
-- 
2.20.1