Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/196967
Change subject: mediawiki.ui: Add a new 'highlightColor' argument to
.button-colors() instead of using mix()
......................................................................
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
---
M resources/src/mediawiki.less/mediawiki.ui/mixins.less
M resources/src/mediawiki.less/mediawiki.ui/variables.less
M resources/src/mediawiki.ui/components/buttons.less
3 files changed, 19 insertions(+), 20 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/67/196967/1
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 2d68457..db983a7 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 e91302b..f130a68 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 f88f3ee..53e13b7 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 {
--
To view, visit https://gerrit.wikimedia.org/r/196967
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I43e9413fc8d195f897426eeadce44f9ece294706
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
