Use variables in dialog and comment styling

Also cleans up some inconsistent styling in the various subcomponents of
the settings view.

Change-Id: I7b4487f84717cadd82c790785c3a83cf68eb8ce8

polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.html

@@ -26,6 +26,7 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       :host {
+        background-color: var(--dialog-background-color);
         display: block;
         padding: 1em;
       }

polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html

@@ -34,17 +34,18 @@ limitations under the License.
         padding: .5em .7em;
       }
       #container {
-        background-color: #fcfad6;
+        background-color: var(--comment-background-color);
-        border: 1px solid #bbb;
+        border: 1px solid var(--border-color);
+        color: var(--comment-text-color);
         display: block;
         margin-bottom: 1px;
         white-space: normal;
       }
       #container.unresolved {
-        background-color: #fcfaa6;
+        background-color: var(--unresolved-comment-background-color);
       }
       #commentInfoContainer {
-        border-top: 1px dotted #bbb;
+        border-top: 1px dotted var(--border-color);
         display: flex;
       }
       #unresolvedLabel {

polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html

@@ -76,7 +76,7 @@ limitations under the License.
       }
       .draftLabel,
       .draftTooltip {
-        color: #999;
+        color: var(--deemphasized-text-color);
         display: none;
       }
       .date {
@@ -151,7 +151,7 @@ limitations under the License.
         margin-left: .4em;
       }
       .robotId {
-        color: #808080;
+        color: var(--deemphasized-text-color);
         margin-bottom: .8em;
         margin-top: -.4em;
       }
@@ -168,7 +168,7 @@ limitations under the License.
         display: none;
       }
       label.show-hide {
-        color: var(--primary-text-color);
+        color: var(--comment-text-color);
         cursor: pointer;
         display: block;
         font-size: .8rem;
@@ -201,7 +201,7 @@ limitations under the License.
         margin: 0;
       }
       .resolve label {
-        color: #333;
+        color: var(--comment-text-color);
         font-size: var(--font-size-small);
       }
       gr-confirm-dialog .main {

polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html

@@ -44,6 +44,11 @@ limitations under the License.
       .actions {
         padding: 1em 1.5em;
       }
+      .header,
+      .mainContainer,
+      .actions {
+        background-color: var(--dialog-background-color);
+      }
       .header {
         border-bottom: 1px solid var(--border-color);
         font-family: var(--font-family-bold);

polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.html

@@ -79,6 +79,7 @@ limitations under the License.
           If you lose it, you will need to generate a new one.
         </section>
         <gr-button
+            link
             class="closeButton"
             on-tap="_closeOverlay">Close</gr-button>
       </div>

polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.html

@@ -74,12 +74,14 @@ limitations under the License.
                 <td>[[_getStatusLabel(key.valid)]]</td>
                 <td>
                   <gr-button
+                      link
                       on-tap="_showKey"
                       data-index$="[[index]]"
                       link>Click to View</gr-button>
                 </td>
                 <td>
                   <gr-button
+                      link
                       data-index$="[[index]]"
                       on-tap="_handleDeleteKey">Delete</gr-button>
                 </td>
@@ -123,6 +125,7 @@ limitations under the License.
         </section>
         <gr-button
             id="addButton"
+            link
             disabled$="[[_computeAddButtonDisabled(_newKey)]]"
             on-tap="_handleAddKey">Add new SSH key</gr-button>
       </fieldset>

polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html

@@ -23,6 +23,7 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       :host {
+        color: var(--primary-text-color);
         display: block;
         max-height: 90vh;
       }

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

@@ -23,7 +23,7 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       :host {
-        background: var(--view-background-color);
+        background: var(--dialog-background-color);
         box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       }
 

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

@@ -81,6 +81,10 @@ limitations under the License.
   --diff-highlight-range-color: rgba(255, 213, 0, 0.5);
   --diff-highlight-range-hover-color: rgba(255, 255, 0, 0.5);
 
+  --comment-text-color: #000;
+  --comment-background-color: #fcfad6;
+  --unresolved-comment-background-color: #fcfaa6;
+
   --edit-mode-background-color: #ebf5fb;
 
   --syntax-default-color: var(--primary-text-color);

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

@@ -36,7 +36,9 @@ limitations under the License.
       input,
       iron-autogrow-textarea {
         background-color: inherit;
+        border: 1px solid var(--border-color);
         box-sizing: border-box;
+        color: var(--primary-text-color);
         margin: 0;
         padding: 0;
       }