Results from mix() aren't the same as the ones in the specification.
Added the correct colors as variables
Change-Id: I43e9413fc8d195f897426eeadce44f9ece294706
// 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 {
&: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;
}
}
-.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
}
}
-.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;
&:active,
&.mw-ui-checked {
- // lessphp doesn't implement shade, see above
- // color: shade(@textColor, 20%);
- color: mix(#000, @textColor, 20%);
+ color: @highlightColor;
}
&:disabled {
// 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
@colorText: @colorGray2;
@colorTextLight: @colorGray6;
@colorButtonText: @colorGray5;
+@colorButtonTextHighlight: @colorGray7;
@colorDisabledText: @colorGray12;
@colorErrorText: #CC0000;
zoom: 1;
// Container styling
- .button-colors(#FFF);
+ .button-colors(#FFF, #CCC);
border-radius: @borderRadius;
min-width: 4em;
// 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);
}
}
//
// 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);
}
}
//
// 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);
}
}
background: transparent;
border: none;
text-shadow: none;
- .button-colors-quiet(@colorButtonText);
+ .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight);
&:hover,
&:focus {