mediawiki.UI: Align buttons to design guidelines and OOjs UI

Aligning buttons to design guidelines in https://phabricator.wikimedia.org/M101
and to OOjs UI, similar to https://phabricator.wikimedia.org/rGOJUed9fef533bea
Additionally:
- aligning CSS code to MediaWiki Coding Guidelines,
- adding `transition`s equivalent to OOjs UI,
- replacing deprecated `@colorWhite` variable,
- replacing counter-intuitive `.button-colors()` Less mixin guard, given
our updated widget guidelines has only two primary button types
(`progressive` & `destructive`) left, with separate mixins and
- removing deprecated `constructive` CSS standalone selector and
corresponding KSS styleguide comments.

Bug: T146823
Change-Id: I6b9faefabc62689eabf6f4bccaa3d3756b5b662a

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 780b372..1bfa3a3 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -33,74 +33,91 @@
 // ----------------------------------------------------------------------------
 
 .button-colors( @bgColor, @highlightColor, @activeColor ) {
-       background: @bgColor;
+       background-color: @bgColor;
+       color: @colorButtonText;
+       border: 1px solid @colorFieldBorder;
+
+       // Make sure that `color` isn't inheriting from user-agent styles
+       &:visited {
+               color: @colorButtonText;
+       }
 
        &:hover {
                background-color: @highlightColor;
+               color: @colorGray4;
+               border-color: @colorGray10;
        }
 
        &:focus {
-               border-color: @colorWhite;
-               box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px @colorWhite;
-               outline-width: 0;
-
-               // Remove the inner border and padding in Firefox.
-               &::-moz-focus-inner {
-                       border-color: transparent;
-                       padding: 0;
-               }
+               background-color: @highlightColor;
+               // Make sure that `color` isn't inheriting from user-agent styles
+               color: @colorButtonText;
+               border-color: @colorProgressive;
+               box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px #fff;
        }
 
        &:active,
        &.is-on,
        &.mw-ui-checked {
                background-color: @activeColor;
+               color: @colorGray1;
+               border-color: @colorGray7;
                box-shadow: none;
        }
-}
-
-.button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) >= 70% ) {
-       color: @colorButtonText;
-       border: 1px solid @colorFieldBorder;
-
-       &:hover,
-       &:active,
-       &:visited {
-               // make sure that is isn't inheriting from a general rule
-               color: @colorButtonText;
-       }
-
-       &:focus {
-               background-color: @highlightColor;
-       }
 
        &:disabled {
-               color: @colorDisabledText;
+               background-color: @colorGray12;
+               color: #fff;
+               border-color: @colorGray12;
 
-               // make sure disabled buttons don't have hover and active states
+               // Make sure disabled buttons don't have hover and active states
                &:hover,
                &:active {
-                       background: @bgColor;
+                       background-color: @colorGray12;
+                       color: #fff;
                        box-shadow: none;
+                       border-color: @colorGray12;
                }
        }
 }
 
-.button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) < 70% ) {
+.button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
+       background-color: @bgColor;
        color: #fff;
        // border of the same color as background so that light background and
        // dark background buttons are the same height and width
        border: 1px solid @bgColor;
-       text-shadow: 0 1px rgba(0, 0, 0, .1);
+       text-shadow: 0 1px rgba( 0, 0, 0, 0.1 );
+
+       &:hover {
+               background-color: @highlightColor;
+               border-color: @highlightColor;
+       }
+
+       &:focus {
+               box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
+       }
+
+       &:active,
+       &.is-on,
+       &.mw-ui-checked {
+               background-color: @activeColor;
+               border-color: @activeColor;
+               box-shadow: none;
+       }
 
        &:disabled {
-               background-color: @colorGray13;
-               border-color: @colorGray13;
+               background-color: @colorGray12;
+               color: #fff;
+               border-color: @colorGray12;
 
-               // make sure disabled buttons don't have hover and active states
+               // Make sure disabled buttons don't have hover and active states
                &:hover,
                &:active,
                &.mw-ui-checked {
+                       background-color: @colorGray12;
+                       color: #fff;
+                       border-color: @colorGray12;
                        box-shadow: none;
                }
        }
@@ -108,7 +125,7 @@
 
 .button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
        // Quiet buttons all start gray, and reveal
-       // constructive/progressive/destructive color on hover and active.
+       // progressive/destructive color on hover and active.
        color: @colorButtonText;
 
        &:hover {

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 5931efb..18fdb2f 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -50,13 +50,28 @@
        vertical-align: middle;
 
        // Content styling
-       .button-colors( #fff, @colorGray12, @colorGray7 );
+       .button-colors( @colorGray15, #fff, #d9d9d9 );
        text-align: center;
        font-weight: bold;
 
        // Interaction styling
        cursor: pointer;
 
+       &:focus {
+               outline-width: 0;
+
+               // Remove the inner border and padding in Firefox.
+               &::-moz-focus-inner {
+                       border-color: transparent;
+                       padding: 0;
+               }
+       }
+
+       // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
+       &:not( :disabled ) {
+               .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
+       }
+
        &:disabled {
                text-shadow: none;
                cursor: default;
@@ -118,6 +133,7 @@
        // Progressive buttons
        //
        // Use progressive buttons for actions which lead to a next step in the process.
+       // .mw-ui-constructive is deprecated; consolidated with `progressive`, see T110555
        // .mw-ui-primary is deprecated, kept for compatibility.
        //
        // Markup:
@@ -130,31 +146,9 @@
        //
        // Styleguide 2.1.1.
        &.mw-ui-progressive,
+       &.mw-ui-constructive,
        &.mw-ui-primary {
-               .button-colors( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
-
-               &.mw-ui-quiet {
-                       .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
-               }
-       }
-
-       // Constructive buttons (deprecated, consolidated with `progressive` – see T110555)
-       //
-       // Use constructive buttons for actions which result in a final action in the process that results
-       // in a change of state.
-       // e.g. save changes button
-       //
-       // Markup:
-       // <div>
-       //   <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
-       // </div>
-       // <div>
-       //   <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
-       // </div>
-       //
-       // Styleguide 2.1.2.
-       &.mw-ui-constructive {
-               .button-colors( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
+               .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 
                &.mw-ui-quiet {
                        .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
@@ -174,9 +168,9 @@
        //   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
        // </div>
        //
-       // Styleguide 2.1.3.
+       // Styleguide 2.1.2.
        &.mw-ui-destructive {
-               .button-colors( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
+               .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 
                &.mw-ui-quiet {
                        .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
@@ -211,7 +205,7 @@
        //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
        // </div>
        //
-       // Styleguide 2.1.4.
+       // Styleguide 2.1.3.
        &.mw-ui-quiet {
                background: transparent;
                border: 0;