Restyle dashboard selection/hover states

Selected/focus state is now represented with a light blue background and
a blue outline, while hover is now changed to a slightly darker blue.

As a component of this change, some of the colors are replaced with
variables set in the app theme. These constants will be reused
throughout the app in descendant changes.

Bug: Issue 8362
Change-Id: I9498df814d1eab5ff4ec1ebb18de77366b8971c4

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

@@ -36,16 +36,11 @@ limitations under the License.
       :host {
         display: table-row;
       }
-      :host:focus {
+      :host(:focus) {
         outline: none;
       }
       :host(:hover) {
-        background-color: #eeeeee;
+        background-color: #e8effa;
-      }
-      :host([selected]) {
-        /* Double the value used in the file list due to the parent table having
-          `border-collapse: collapse;` */
-        border-left: .7rem solid var(--color-link);
       }
       :host([needs-review]) {
         font-family: var(--font-family-bold);
@@ -99,12 +94,6 @@ limitations under the License.
       a:hover {
         text-decoration: underline;
       }
-      .positionIndicator {
-        visibility: hidden;
-      }
-      :host([selected]) .positionIndicator {
-        visibility: visible;
-      }
       .u-monospace {
         font-family: var(--monospace-font-family);
       }
@@ -129,13 +118,10 @@ limitations under the License.
         :host {
           display: flex;
         }
-        :host([selected]) {
-          border-left: none;
-        }
       }
     </style>
     <style include="gr-change-list-styles"></style>
-    <td class="cell keyboard"></td>
+    <td class="cell leftPadding"></td>
     <td class="cell star" hidden$="[[!showStar]]" hidden>
       <gr-change-star change="{{change}}"></gr-change-star>
     </td>

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

@@ -38,7 +38,7 @@ limitations under the License.
     </style>
     <table id="changeList">
       <tr class="topHeader">
-        <th class="keyboard"></th>
+        <th class="leftPadding"></th>
         <th class="star" hidden$="[[!showStar]]" hidden></th>
         <th class="number" hidden$="[[!showNumber]]" hidden>#</th>
         <template is="dom-repeat" items="[[changeTableColumns]]" as="item">
@@ -57,7 +57,7 @@ limitations under the License.
           index-as="sectionIndex">
         <template is="dom-if" if="[[changeSection.sectionName]]">
           <tr class="groupHeader">
-            <td class="keyboard"></td>
+            <td class="leftPadding"></td>
             <td class="star" hidden$="[[!showStar]]" hidden></td>
             <td class="cell"
                 colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
@@ -69,7 +69,7 @@ limitations under the License.
         </template>
         <template is="dom-if" if="[[!changeSection.results.length]]">
           <tr class="noChanges">
-            <td class="keyboard"></td>
+            <td class="leftPadding"></td>
             <td class="star" hidden$="[[!showStar]]" hidden></td>
             <td class="cell"
                 colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">

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

@@ -23,10 +23,12 @@ limitations under the License.
   --header-icon: none;
   --header-icon-size: 0em;
   --footer-background-color: var(--header-background-color);
+  --border-color: #ddd;
 
   /* Following are not part of plugin API. */
   --search-border-color: #ddd;
-  --selection-background-color: #ebf5fb;
+  --selection-background-color: #f1f5fb;
+  --selection-border-color: #cadcfa;
   --default-text-color: #000;
   --view-background-color: #fff;
   --default-horizontal-margin: 1rem;

polygerrit-ui/app/styles/gr-change-list-styles.html

@@ -22,7 +22,19 @@ limitations under the License.
       }
       gr-change-list-item,
       tr {
-        border-bottom: 1px solid #ddd;
+        border-top: 1px solid var(--border-color);
+      }
+      gr-change-list-item[selected],
+      gr-change-list-item:focus {
+        background-color: var(--selection-background-color);
+        border: 1px solid var(--selection-border-color);
+      }
+      .topHeader ~ gr-change-list-item:first-of-type,
+      .topHeader + .groupHeader {
+        border-top: none;
+      }
+      tbody {
+        border-bottom: 1px solid var(--border-color);
       }
       tr.topHeader {
         border: none;
@@ -57,7 +69,7 @@ limitations under the License.
       /* :after pseudoelements are used here because borders on sticky table
         headers with a background color are broken. */
       th:after {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
         bottom: 0;
         content: '';
         left: 0;
@@ -65,7 +77,7 @@ limitations under the License.
         width: 100%;
       }
       th.label:after {
-        border-left: 1px solid #ddd;
+        border-left: 1px solid var(--border-color);
         top: 0;
       }
       .groupHeader {
@@ -81,14 +93,12 @@ limitations under the License.
       .cell {
         height: 2.25rem;
       }
-      .keyboard,
       .star {
         padding: 0;
       }
       gr-change-star {
         vertical-align: middle;
       }
-      .keyboard,
       .branch,
       .star,
       .label,
@@ -101,18 +111,17 @@ limitations under the License.
       .project {
         white-space: nowrap;
       }
-      .keyboard,
       .star {
         vertical-align: middle;
       }
-      .keyboard {
+      .leftPadding {
         width: 20px;
       }
       .star {
         width: 30px;
       }
       .label {
-        border-left: 1px solid #ddd;
+        border-left: 1px solid var(--border-color);
         text-align: center;
         width: 3rem;
       }
@@ -146,12 +155,21 @@ limitations under the License.
           justify-content: space-between;
           padding: .25em .5em;
         }
+        gr-change-list-item[selected],
+        gr-change-list-item:focus {
+          background-color: var(--view-background-color);
+          border: none;
+          border-top: 1px solid var(--border-color);
+        }
+        gr-change-list-item:hover {
+          background-color: var(--view-background-color);
+        }
         .cell {
           align-items: center;
           display: flex;
         }
         .topHeader,
-        .keyboard,
+        .leftPadding,
         .status,
         .project,
         .branch,