Major refactor of button styles

Declares several CSS variables for styling buttons throughout the app
and uses them.

Removes the concept of a 'tertiary' button -- primary and secondary have
the exact same styling, so all tertiary buttons are changed to secondary
buttons and the existing secondary button (only replyBtn) is changed to
a primary button.

Also removes some of the many ways to modify a button color and
background -- there is no need for mixins to specifically style various
attributes of the paper-button when the ability to apply any styles
directly to it (via @apply --gr-button) is already supported.

Change-Id: I19a4114764df80b06175032b228a6ec63b414089

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html

@@ -244,11 +244,11 @@ limitations under the License.
         background-color: var(--table-header-background-color);
         border-top: 1px solid var(--border-color);
         height: 3rem;
-        --paper-tabs-selection-bar-color: var(--color-link);
+        --paper-tabs-selection-bar-color: var(--link-color);
       }
       paper-tab {
         max-width: 15rem;
-        --paper-tab-ink: var(--color-link);
+        --paper-tab-ink: var(--link-color);
       }
       gr-thread-list,
       gr-messages-list {
@@ -425,7 +425,7 @@ limitations under the License.
                       id="replyBtn"
                       class="reply"
                       hidden$="[[!_loggedIn]]"
-                      secondary
+                      primary
                       disabled="[[_replyDisabled]]"
                       on-tap="_handleReplyTap">[[_replyButtonLabel]]</gr-button>
               </div>

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html

@@ -178,7 +178,7 @@ limitations under the License.
         display: none;
       }
       label.show-hide {
-        color: var(--color-link);
+        color: var(--link-color);
         cursor: pointer;
         display: block;
         font-size: var(--font-size-small);
@@ -203,7 +203,7 @@ limitations under the License.
         width: 15em;
       }
       .reviewed label {
-        color: var(--color-link);
+        color: var(--link-color);
         opacity: 0;
         justify-content: flex-end;
         width: 100%;

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html

@@ -58,25 +58,25 @@ limitations under the License.
       gr-button {
         min-width: 40px;
         --gr-button: {
+          background-color: var(--button-background-color, #f5f5f5);
+          color: var(--primary-text-color);
           padding: .2em .85em;
           @apply(--vote-chip-styles);
         }
-        --gr-button-background: var(--button-background-color, #f5f5f5);
-        --gr-button-color: var(--primary-text-color);
       }
-      iron-selector > gr-button.iron-selected.max {
+      gr-button.iron-selected.max {
         --button-background-color: var(--vote-color-max);
       }
-      iron-selector > gr-button.iron-selected.positive {
+      gr-button.iron-selected.positive {
         --button-background-color: var(--vote-color-positive);
       }
-      iron-selector > gr-button.iron-selected.min {
+      gr-button.iron-selected.min {
         --button-background-color: var(--vote-color-min);
       }
-      iron-selector > gr-button.iron-selected.negative {
+      gr-button.iron-selected.negative {
         --button-background-color: var(--vote-color-negative);
       }
-      iron-selector > gr-button.iron-selected.neutral {
+      gr-button.iron-selected.neutral {
         --button-background-color: var(--vote-color-neutral);
       }
       .placeholder {

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html

@@ -267,7 +267,7 @@ limitations under the License.
           <template is="dom-if" if="[[canBeStarted]]">
             <gr-button
                 link
-                tertiary
+                secondary
                 disabled="[[_isState(knownLatestState, 'not-latest')]]"
                 class="action save"
                 has-tooltip

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

@@ -28,7 +28,6 @@ limitations under the License.
     <style include="shared-styles">
       gr-button {
         margin-left: .5em;
-        --gr-button-color: #212121;
       }
       #actions {
         margin-left: auto;
@@ -94,21 +93,25 @@ limitations under the License.
           <gr-button
               id="replyBtn"
               link
+              secondary
               class="action reply"
               on-tap="_handleCommentReply">Reply</gr-button>
           <gr-button
               id="quoteBtn"
               link
+              secondary
               class="action quote"
               on-tap="_handleCommentQuote">Quote</gr-button>
           <gr-button
               id="ackBtn"
               link
+              secondary
               class="action ack"
               on-tap="_handleCommentAck">Ack</gr-button>
           <gr-button
               id="doneBtn"
               link
+              secondary
               class="action done"
               on-tap="_handleCommentDone">Done</gr-button>
         </div>

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

@@ -97,7 +97,6 @@ limitations under the License.
       }
       .action {
         margin-left: 1em;
-        --gr-button-color: #212121;
       }
       .robotActions {
         display: flex;
@@ -249,6 +248,7 @@ limitations under the License.
         <gr-button
             id="deleteBtn"
             link
+            secondary
             class$="action delete [[_computeDeleteButtonClass(_isAdmin, draft)]]"
             on-tap="_handleCommentDelete">
           (Delete)
@@ -314,21 +314,35 @@ limitations under the License.
             </label>
           </div>
           <div class="rightActions">
-            <gr-button link class="action cancel hideOnPublished"
+            <gr-button
+                link
+                secondary
+                class="action cancel hideOnPublished"
                 on-tap="_handleCancel">Cancel</gr-button>
-            <gr-button link class="action discard hideOnPublished"
+            <gr-button
+                link
+                secondary
+                class="action discard hideOnPublished"
                 on-tap="_handleDiscard">Discard</gr-button>
-            <gr-button link class="action edit hideOnPublished"
+            <gr-button
+                link
+                secondary
+                class="action edit hideOnPublished"
                 on-tap="_handleEdit">Edit</gr-button>
-            <gr-button link class="action save hideOnPublished"
+            <gr-button
-                on-tap="_handleSave"
+                link
-                disabled$="[[_computeSaveDisabled(_messageText, comment, resolved)]]">Save
+                secondary
-            </gr-button>
+                disabled$="[[_computeSaveDisabled(_messageText, comment, resolved)]]"
+                class="action save hideOnPublished"
+                on-tap="_handleSave">Save</gr-button>
           </div>
         </div>
         <div class="robotActions" hidden$="[[!_showRobotActions]]">
           <template is="dom-if" if="[[isRobotComment]]">
-            <gr-button link class="action fix"
+            <gr-button
+                link
+                secondary
+                class="action fix"
                 on-tap="_handleFix"
                 disabled="[[robotButtonDisabled]]">
               Please Fix

polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html

@@ -28,7 +28,7 @@ limitations under the License.
         display: flex;
       }
       gr-button.selected iron-icon {
-        color: var(--color-link);
+        color: var(--link-color);
       }
       iron-icon {
         height: 1.3rem;

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

@@ -164,7 +164,6 @@ limitations under the License.
       .contextControl gr-button {
         display: inline-block;
         text-decoration: none;
-        --gr-button-color: var(--deemphasized-text-color);
         --gr-button: {
           padding: .2em;
         }

polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.html

@@ -44,7 +44,7 @@ limitations under the License.
         --gr-dropdown-item: {
           background-color: transparent;
           border: none;
-          color: var(--color-link);
+          color: var(--link-color);
           font-size: inherit;
           text-transform: uppercase;
         }

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

@@ -27,8 +27,8 @@ limitations under the License.
     <style include="shared-styles">
       /* general styles for all buttons */
       :host {
-        --background-color: var(--gr-button-background, var(--view-background-color));
+        --background-color: var(--button-background-color, var(--default-button-background-color));
-        --button-color: var(--gr-button-color, var(--color-link));
+        --text-color: var(--default-button-text-color);
         display: inline-block;
         font-family: var(--font-family-bold);
         font-size: var(--font-size-small);
@@ -46,7 +46,7 @@ limitations under the License.
         -webkit-font-smoothing: initial;
         align-items: center;
         background-color: var(--background-color);
-        color: var(--button-color);
+        color: var(--text-color);
         display: flex;
         font-family: inherit;
         justify-content: center;
@@ -62,18 +62,26 @@ limitations under the License.
         ), var(--background-color);
       }
 
-      /* Styles for raised buttons specifically */
+      :host([primary]) {
-      :host([primary][raised]),
+        --background-color: var(--primary-button-background-color);
-      :host([secondary][raised]) {
+        --text-color: var(--primary-button-text-color);
-        --background-color: var(--color-link);
+      }
-        --button-color: var(--view-background-color);
+      :host([link][primary]) {
+        --text-color: var(--primary-button-background-color);
+      }
+      :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/secondary so that this takes
+      /* Keep below color definition for primary so that this takes precedence
-       precedence when disabled. */
+        when disabled. */
       :host([disabled]) {
         --background-color: var(--table-subheader-background-color);
-        --button-color: var(--deemphasized-text-color);
+        --text-color: var(--deemphasized-text-color);
         cursor: default;
       }
 
@@ -86,9 +94,6 @@ limitations under the License.
       :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; }

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

@@ -31,21 +31,11 @@
         value: false,
         reflectToAttribute: true,
       },
-      raised: {
-        type: Boolean,
-        reflectToAttribute: true,
-        computed: '_isRaised(link)',
-      },
       loading: {
         type: Boolean,
         value: false,
         reflectToAttribute: true,
       },
-      tertiary: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
       disabled: {
         type: Boolean,
         observer: '_disabledChanged',
@@ -81,10 +71,6 @@
       tabindex: '0',
     },
 
-    _isRaised(isLink) {
-      return !isLink;
-    },
-
     _handleAction(e) {
       if (this.disabled) {
         e.preventDefault();

polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html

@@ -28,7 +28,7 @@ limitations under the License.
         cursor: pointer;
       }
       iron-icon.active {
-        fill: var(--color-link);
+        fill: var(--link-color);
       }
     </style>
     <button aria-label="Change star" on-tap="toggleStar">

polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html

@@ -48,7 +48,7 @@ limitations under the License.
         @apply --label-style;
       }
       label.editable {
-        color: var(--color-link);
+        color: var(--link-color);
         cursor: pointer;
       }
       #dropdown {

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

@@ -27,7 +27,7 @@ limitations under the License.
 
         background-color: var(--tooltip-background-color, #333);
         box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-        color: var(--view-background-color);
+        color: #fff;
         font-size: var(--font-size-small);
         position: absolute;
         z-index: 1000;

polygerrit-ui/app/styles/app-theme.html

@@ -49,11 +49,13 @@ limitations under the License.
   --font-size-small: .92rem;
   --font-size-large: 1.076rem;
 
-  /* Follow are a part of the design refresh */
+  --link-color: #2a66d9;
-  --color-link: #2a66d9;
+  --primary-button-background-color: var(--link-color);
-  --color-link-tertiary: #000;
+  --primary-button-text-color: #fff;
-  /* 12% darker */
+  --secondary-button-background-color: #fff;
-  --color-button-hover: #0B47BA;
+  --secondary-button-text-color: #212121;
+  --default-button-background-color: #fff;
+  --default-button-text-color: var(--link-color);
 
   /* Used for both the old patchset header and for indicating that a particular
     change message was selected. */

polygerrit-ui/app/styles/shared-styles.html

@@ -41,7 +41,7 @@ limitations under the License.
         padding: 0;
       }
       a {
-        color: var(--color-link);
+        color: var(--link-color);
       }
       input,
       textarea,
@@ -98,8 +98,8 @@ limitations under the License.
         border-color: transparent;
       }
       paper-toggle-button {
-        --paper-toggle-button-checked-bar-color: var(--color-link);
+        --paper-toggle-button-checked-bar-color: var(--link-color);
-        --paper-toggle-button-checked-button-color: var(--color-link);
+        --paper-toggle-button-checked-button-color: var(--link-color);
       }
       strong {
         font-family: var(--font-family-bold);