Merge "Introduce vars for styling header and dropdowns"

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 {
+      .topContent,
-        font-family: var(--font-family-bold);
+      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;
+        background-color: var(--hover-background-color);
-        color: var(--view-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;