Refactor gr-button styling

A few changes:
- Utilize mixins within gr-button internally, so less styles have to be
  overridden by elements implementing their own button styles.
- All buttons have a hover background color, which is 12% black
  overlayed on top of its current background color.

Bug: Issue 7894
Change-Id: I4f2879aa0232912267bbf1290a1c800d024099a6

polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html

@@ -31,10 +31,7 @@ limitations under the License.
       }
       gr-button {
         margin-left: .5em;
-        --gr-button: {
-          color: #212121;
-        }
-        --gr-button-hover-color: rgba(33, 33, 33, .75);
+        --gr-button-color: #212121;
       }
       #actions {
         margin-left: auto;

polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html

@@ -97,10 +97,7 @@ limitations under the License.
       }
       .action {
         margin-left: 1em;
-        --gr-button: {
-          color: #212121;
-        }
-        --gr-button-hover-color: rgba(33, 33, 33, .75);
+        --gr-button-color: #212121;
       }
       .rightActions {
         display: flex;

polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html

@@ -56,12 +56,6 @@ limitations under the License.
           padding: 0;
           text-decoration: none;
         }
-        --gr-button-hover-color: {
-          color: #333;
-        }
-        --gr-button-hover-background-color: {
-          color: #333;
-        }
       }
       :host:focus {
         border-color: transparent;

polygerrit-ui/app/elements/shared/gr-button/gr-button.html

@@ -26,6 +26,8 @@ limitations under the License.
     <style include="shared-styles">
       /* general styles for all buttons */
       :host {
+        --background-color: var(--gr-button-background, #fff);
+        --button-color: var(--gr-button-color, var(--color-link));
         display: inline-block;
         font-family: var(--font-family-bold);
         font-size: 12px;
@@ -38,30 +40,53 @@ limitations under the License.
         text-transform: none;
       }
       paper-button {
-        /* Some of these are overridden for link style buttons since buttons
-         without the link attribute are raised */
-        background-color: var(--gr-button-background, #fff);
-        color: var(--gr-button-color, var(--color-link));
-        display: flex;
         align-items: center;
+        background-color: var(--background-color);
+        color: var(--button-color);
+        display: flex;
         justify-content: center;
-        margin: 0;
-        min-width: 0;
-        padding: 5px 10px;
+        margin: var(--margin, 0);
+        min-width: var(--border, 0);
+        padding: var(--padding, 5px 10px);
         @apply --gr-button;
       }
-      paper-button:hover,
-      paper-button:focus {
-        color: var(--gr-button-hover-color, var(--color-button-hover));
+      paper-button:hover {
+        background: linear-gradient(
+          rgba(0, 0, 0, .12),
+          rgba(0, 0, 0, .12)
+        ), var(--background-color);
       }
-      :host([disabled]) paper-button {
-        color: #a8a8a8;
-        cursor: wait;
+
+      :host([disabled]) {
+        --background-color: #eaeaea;
+        --button-color: #a8a8a8;
+        cursor: default;
       }
-      /* styles for the optional down arrow */
+
+      /* Styles for raised buttons specifically */
+      :host([primary][raised]),
+      :host([secondary][raised]) {
+        --background-color: var(--color-link);
+        --button-color: #fff;
+      }
+
+      /* Styles for link buttons specifically */
+      :host([link]) {
+        --background-color: transparent;
+        --margin: 0;
+        --padding: 5px 4px;
+      }
+      :host([disabled][link]) {
+        --background-color: transparent;
+      }
+      :host([link][tertiary]) {
+        --button-color: var(--color-link-tertiary);
+      }
+
+      /* Styles for the optional down arrow */
       :host:not([down-arrow]) .downArrow {display: none; }
       :host([down-arrow]) .downArrow {
-        border-top: .36em solid var(--gr-button-arrow-color, #ccc);
+        border-top: .36em solid #ccc;
         border-left: .36em solid transparent;
         border-right: .36em solid transparent;
         margin-bottom: .05em;
@@ -69,50 +94,7 @@ limitations under the License.
         transition: border-top-color 200ms;
       }
       :host([down-arrow]) paper-button:hover .downArrow {
-        border-top-color: var(--gr-button-arrow-hover-color, #666);
-      }
-
-      /* styles for raised buttons specifically*/
-      :host([primary]) paper-button[raised],
-      :host([secondary]) paper-button[raised] {
-        background-color: var(--color-link);
-        color: #fff;
-      }
-      :host([primary]) paper-button[raised]:hover,
-      :host([primary]) paper-button[raised]:focus,
-      :host([secondary]) paper-button[raised]:hover,
-      :host([secondary]) paper-button[raised]:focus {
-        background-color: var(--gr-button-hover-background-color, var(--color-button-hover));
-        color: var(--gr-button-color, #fff);
-      }
-      :host([disabled]) paper-button[raised] {
-        background-color: #eaeaea;
-        color: #a8a8a8;
-      }
-      /* styles for link buttons specifically */
-      :host([link]) {
-        background-color: transparent;
-        border: none;
-        color: var(--color-link);
-        font-size: inherit;
-        font-family: var(--font-family-bold);
-        text-transform: none;
-      }
-      :host([link][tertiary]) paper-button {
-        color: var(--color-link-tertiary);
-      }
-      :host([link]) paper-button {
-        background-color: transparent;
-        margin: 0;
-        padding: 5px 4px;
-        @apply --gr-button;
-      }
-      :host([disabled][link]) paper-button {
-        background-color: transparent;
-      }
-      :host([link]) paper-button:hover,
-      :host([link]) paper-button:focus {
-        color: var(--gr-button-hover-color, var(--color-button-hover));
+        border-top-color: #666;
       }
     </style>
     <paper-button

polygerrit-ui/app/elements/shared/gr-button/gr-button.js

@@ -28,6 +28,11 @@
         value: false,
         reflectToAttribute: true,
       },
+      raised: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: '_isRaised(link)',
+      },
       loading: {
         type: Boolean,
         value: false,
@@ -73,6 +78,10 @@
       tabindex: '0',
     },
 
+    _isRaised(isLink) {
+      return !isLink;
+    },
+
     _handleAction(e) {
       if (this.disabled) {
         e.preventDefault();
@@ -85,6 +94,7 @@
         this._enabledTabindex = this.getAttribute('tabindex');
       }
       this.setAttribute('tabindex', disabled ? '-1' : this._enabledTabindex);
+      this.updateStyles();
     },
 
     _computeDisabled(disabled, loading) {

polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html

@@ -92,7 +92,6 @@ limitations under the License.
         --gr-button: {
           @apply --trigger-style;
         }
-        --gr-button-hover-color: var(--trigger-hover-color);
       }
       gr-date-formatter {
         color: rgba(0,0,0,.54);

polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html

@@ -53,12 +53,6 @@ limitations under the License.
           padding: 0;
           text-decoration: none;
         }
-        --gr-button-hover-color: {
-          color: #333;
-        }
-        --gr-button-hover-background-color: {
-          color: #333;
-        }
       }
       .transparentBackground,
       gr-button.transparentBackground {