Rework some CSS constant usage Usage of the --header-background-color constant in place of #eee was a bit aggressive. This change modifies the styling to use constants that have a more consistent usage (table-header-background-color, for instance) and also introduces another new color, --chip-background-color, for styling chips. Bug: Issue 8809 Change-Id: Ie3acbfa4d221acc4f210f76bbb425a21e7f8b63e

diff --git a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
index a07c724f..5bdb3da 100644
--- a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html

@@ -58,8 +58,9 @@
         margin-bottom: 1em;
       }
       ul li {
+        border: 1px solid var(--border-color);
         border-radius: .2em;
-        background: var(--header-background-color);
+        background: var(--chip-background-color);
         display: inline-block;
         margin: 0 .2em .4em .2em;
         padding: .2em .4em;

diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
index 1e37725..4e6efed 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html

@@ -120,7 +120,7 @@
         display: block;
       }
       .previewContainer gr-formatted-text {
-        background: var(--header-background-color);
+        background: var(--table-header-background-color);
         padding: 1em;
       }
       .draftsContainer h3 {

diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 47b6e60..3834c1b 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html

@@ -201,7 +201,7 @@
         display: block;
       }
       .target-row td.blame {
-        background: var(--header-background-color);
+        background: var(--diff-selection-background-color);
       }
       col.blame {
         display: none;

diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
index f04caaa..8a86f93 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html

@@ -31,7 +31,7 @@
       }
       .container {
         align-items: center;
-        background: var(--header-background-color);
+        background: var(--table-header-background-color);
         border-radius: .75em;
         display: inline-flex;
         padding: 0 .5em;

diff --git a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
index 5d7a8a8..fab562a 100644
--- a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html

@@ -31,7 +31,7 @@
       }
       .container {
         align-items: center;
-        background: var(--header-background-color);
+        background: var(--chip-background-color);
         border-radius: .75em;
         display: inline-flex;
         padding: 0 .5em;

diff --git a/polygerrit-ui/app/styles/app-theme.html b/polygerrit-ui/app/styles/app-theme.html
index 64af9dc..1021037 100644
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html

@@ -42,6 +42,8 @@
   --table-header-background-color: #fafafa;
   --table-subheader-background-color: #eaeaea;
 
+  --chip-background-color: var(--header-background-color);
+
   --dropdown-background-color: #fff;
 
   /* Font sizes */