Introduce vars for styling header and dropdowns

Makes dropdowns and header elements respect theme colors.

Also aligns differences in styling between various dropdown elements to
the styles specified for selection and hover by UX.

Change-Id: I8f4423453c82cb3e3b51c2da74f530cb5a69076f

polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html

@@ -27,6 +27,12 @@ limitations under the License.
     <style include="shared-styles">
       gr-dropdown {
         padding: .5em;
+        --gr-button: {
+          color: var(--header-text-color);
+        }
+        --gr-dropdown-item: {
+          color: var(--header-text-color);
+        }
       }
       gr-avatar {
         height: 2em;

polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html

@@ -35,7 +35,7 @@ limitations under the License.
         display: flex;
       }
       .bigTitle {
-        color: var(--primary-text-color);
+        color: var(--header-text-color);
         font-size: 1.75rem;
         text-decoration: none;
       }
@@ -68,7 +68,7 @@ limitations under the License.
         position: relative;
       }
       .linksTitle {
-        color: var(--primary-text-color);
+        color: var(--header-text-color);
         display: inline-block;
         font-family: var(--font-family-bold);
         position: relative;
@@ -95,7 +95,13 @@ limitations under the License.
       .browse {
         padding: .6em .5em;
       }
+      gr-dropdown {
+        --gr-dropdown-item: {
+          color: var(--header-text-color);
+        }
+      }
       .browse {
+        color: var(--header-text-color);
         /* Same as gr-button */
         margin: 5px 4px;
         text-decoration: none;
@@ -115,6 +121,7 @@ limitations under the License.
         text-overflow: ellipsis;
       }
       .loginButton {
+        color: var(--header-text-color);
         padding: 1em;
       }
       .dropdown-trigger {

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

@@ -36,17 +36,24 @@ limitations under the License.
         list-style: none;
       }
       li {
+        border-bottom: 1px solid var(--border-color);
         cursor: pointer;
         padding: .5em .75em;
       }
+      li:last-of-type {
+        border: none;
+      }
       li:focus {
         outline: none;
       }
+      li:hover {
+        background-color: var(--hover-background-color);
+      }
       li.selected {
-        background-color: #eee;
+        background-color: var(--selection-background-color);
       }
       .dropdown-content {
-        background: var(--view-background-color);
+        background: var(--dropdown-background-color);
         box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       }
     </style>

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

@@ -43,7 +43,7 @@ limitations under the License.
         padding: 0;
       }
       .dropdown-content {
-        background-color: var(--view-background-color);
+        background-color: var(--dropdown-background-color);
         box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
         max-height: 70vh;
         margin-top: 2em;
@@ -63,16 +63,16 @@ limitations under the License.
           min-height: 0;
           padding: 10px 16px;
         }
-        --paper-item-selected: {
-          background-color: rgba(161,194,250,.12);
-        }
         --paper-item-focused-before: {
-          background-color: #f2f2f2;
+          background-color: var(--selection-background-color);
         }
         --paper-item-focused: {
-          background-color: #f2f2f2;
+          background-color: var(--selection-background-color);
         }
       }
+      paper-item:hover {
+        background-color: var(--hover-background-color);
+      }
       paper-item:not(:last-of-type) {
         border-bottom: 1px solid var(--border-color);
       }

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

@@ -36,7 +36,7 @@ limitations under the License.
         width: 100%;
       }
       .dropdown-content {
-        background-color: var(--view-background-color);
+        background-color: var(--dropdown-background-color);
         box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
       }
       gr-button {
@@ -53,10 +53,13 @@ limitations under the License.
       ul {
         list-style: none;
       }
-      ul .accountName {
-        font-family: var(--font-family-bold);
+      .topContent,
+      li {
+        border-bottom: 1px solid var(--border-color);
+      }
+      li:last-of-type {
+        border: none;
       }
-      li .accountInfo,
       li .itemAction {
         cursor: pointer;
         display: block;
@@ -74,17 +77,21 @@ limitations under the License.
         text-decoration: none;
       }
       li .itemAction:not(.disabled):hover {
-        background-color: #6B82D6;
-        color: var(--view-background-color);
+        background-color: var(--hover-background-color);
       }
       li:focus,
       li.selected {
-        background-color: #EBF5FB;
+        background-color: var(--selection-background-color);
         outline: none;
       }
+      li:focus .itemAction,
+      li.selected .itemAction {
+        background-color: transparent;
+      }
       .topContent {
         display: block;
         padding: .85em 1em;
+        @apply --gr-dropdown-item;
       }
       .bold-text {
         font-family: var(--font-family-bold);

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

@@ -22,6 +22,7 @@ limitations under the License.
   --header-title-content: 'Gerrit';
   --header-icon: none;
   --header-icon-size: 0em;
+  --header-text-color: #000;
   --footer-background-color: var(--header-background-color);
   --border-color: #ddd;
 
@@ -40,6 +41,8 @@ limitations under the License.
   --table-header-background-color: #fafafa;
   --table-subheader-background-color: #eaeaea;
 
+  --dropdown-background-color: #fff;
+
   /* Font sizes */
   --font-size-normal: 1rem;
   --font-size-small: .92rem;