1 files changed, 55 insertions, 66 deletions

diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
index 483882ff58..fe18180ccf 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@@ -1,4 +1,5 @@
 <!--
+@license
 Copyright (C) 2016 The Android Open Source Project
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -26,9 +27,9 @@ limitations under the License.
     <style include="shared-styles">
       /* general styles for all buttons */
       :host {
+        --background-color: var(--button-background-color, var(--default-button-background-color));
+        --text-color: var(--default-button-text-color);
         display: inline-block;
-        font-family: var(--font-family-bold);
-        font-size: 12px;
         position: relative;
       }
       :host([hidden]) {
@@ -38,30 +39,64 @@ 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;
+        /* paper-button sets this to anti-aliased, which appears different than
+          bold font elsewhere on macOS. */
+        -webkit-font-smoothing: initial;
         align-items: center;
+        background-color: var(--background-color);
+        color: var(--text-color);
+        display: flex;
+        font-family: inherit;
         justify-content: center;
-        margin: 0;
-        min-width: 0;
-        padding: .4em .85em;
+        margin: var(--margin, 0);
+        min-width: var(--border, 0);
+        padding: var(--padding, 4px 8px);
         @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([primary]) {
+        --background-color: var(--primary-button-background-color);
+        --text-color: var(--primary-button-text-color);
       }
-      :host([disabled]) paper-button {
-        color: #a8a8a8;
-        cursor: wait;
+      :host([link][primary]) {
+        --text-color: var(--primary-button-background-color);
       }
-      /* styles for the optional down arrow */
+      :host([secondary]) {
+        --background-color: var(--secondary-button-text-color);
+        --text-color: var(--secondary-button-background-color);
+      }
+      :host([link][secondary]) {
+        --text-color: var(--secondary-button-text-color);
+      }
+
+      /* Keep below color definition for primary so that this takes precedence
+        when disabled. */
+      :host([disabled]) {
+        --background-color: var(--table-subheader-background-color);
+        --text-color: var(--deemphasized-text-color);
+        cursor: default;
+      }
+
+      /* Styles for link buttons specifically */
+      :host([link]) {
+        --background-color: transparent;
+        --margin: 0;
+        --padding: 5px 4px;
+      }
+      :host([disabled][link]) {
+        --background-color: transparent;
+      }
+
+      /* 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,60 +104,14 @@ 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]) {
-        color: var(--color-link-tertiary);
-      }
-      :host([link]) paper-button {
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        --paper-button: {
-          padding: 0;
-        }
-        @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: var(--deemphasized-text-color);
       }
     </style>
     <paper-button
         raised="[[!link]]"
         disabled="[[_computeDisabled(disabled, loading)]]"
         tabindex="-1">
-      <content></content>
+      <slot></slot>
       <i class="downArrow"></i>
     </paper-button>
   </template>