From 4a749590e8aaf9999ff815750f55cf47a565bf27 Mon Sep 17 00:00:00 2001
From: Kasper Nilsson <kaspern@google.com>
Date: Mon, 16 Apr 2018 14:53:14 +0200
Subject: [PATCH] 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
---
 .../gr-account-dropdown.html                  |  6 ++++++
 .../core/gr-main-header/gr-main-header.html   | 11 ++++++++--
 .../gr-autocomplete-dropdown.html             | 11 ++++++++--
 .../gr-dropdown-list/gr-dropdown-list.html    | 12 +++++------
 .../shared/gr-dropdown/gr-dropdown.html       | 21 ++++++++++++-------
 polygerrit-ui/app/styles/app-theme.html       |  3 +++
 6 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html
index 9a5fea8a03..bbe2877ff7 100644
--- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html
+++ b/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;
diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
index 595ad335a0..306b3fc0a2 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
+++ b/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 {
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
index 5179783c63..4e076a898d 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
+++ b/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>
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
index 7f79196b5a..0aa9ba6c79 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
+++ b/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);
       }
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
index 46fe0466b3..8a70b8ba90 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
+++ b/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);
diff --git a/polygerrit-ui/app/styles/app-theme.html b/polygerrit-ui/app/styles/app-theme.html
index 355c8cc3bc..0716e4c63c 100644
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/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;