commit 83d8aaceec455adc826dcb56620566549afc94fc
author Kasper Nilsson <kaspern@google.com> Tue Apr 17 13:39:50 2018 +0200
committer Kasper Nilsson <kaspern@google.com> Sat Apr 21 14:10:11 2018 +0200
tree 4a7615de36bdc6d5416645a47c61518e029a9306
parent ebab158cde11e7f3c5aed3856b6eb4842b86fe5f

Use CSS variables in the diff

Change-Id: I35734f619ce10eb66b343c318148ed3ed24cc802

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

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 3972751..47b6e60 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -32,16 +32,6 @@
 <dom-module id="gr-diff">
   <template>
     <style include="shared-styles">
-      :host {
-        --light-remove-highlight-color: #fee;
-        --dark-remove-highlight-color: rgba(255, 0, 0, 0.15);
-        --light-add-highlight-color: #efe;
-        --dark-add-highlight-color: rgba(0, 255, 0, 0.15);
-        --light-rebased-remove-highlight-color: #fff6ea;
-        --dark-rebased-remove-highlight-color: rgba(255, 139, 6, 0.15);
-        --light-rebased-add-highlight-color: #edfffa;
-        --dark-rebased-add-highlight-color: rgba(11, 255, 155, 0.15);
-      }
       :host(.no-left) .sideBySide ::content .left,
       :host(.no-left) .sideBySide ::content .left + td,
       :host(.no-left) .sideBySide ::content .right:not([data-value]),
@@ -54,7 +44,7 @@
         @apply --diff-container-styles;
       }
       .diffContainer.hiddenscroll {
-        padding-bottom: .8em;
+        margin-bottom: .8em;
       }
       table {
         border-collapse: collapse;
@@ -62,14 +52,14 @@
         table-layout: fixed;
       }
       .lineNum {
-        background-color: var(--header-background-color);
+        background-color: var(--table-header-background-color);
       }
       .image-diff .gr-diff {
         text-align: center;
       }
       .image-diff img {
         max-width: 50em;
-        outline: 1px solid #ccc;
+        outline: 1px solid var(--border-color);
       }
       .image-diff label,
       .binary-diff label {
@@ -82,7 +72,7 @@
       .diff-row.target-row.target-side-left .lineNum.left,
       .diff-row.target-row.target-side-right .lineNum.right,
       .diff-row.target-row.unified .lineNum {
-        background-color: #BBDEFB;
+        background-color: var(--diff-selection-background-color);
         color: var(--primary-text-color);
       }
       .blank,
@@ -151,15 +141,15 @@
         background-color: var(--dark-rebased-remove-highlight-color);
       }
       .dueToRebase .content.remove {
-        background-color: var(--light-rebased-remove-highlight-color);
+        background-color: var(--light-remove-add-highlight-color);
       }
       .content .contentText:empty:after {
         /* Newline, to ensure empty lines are one line-height tall. */
         content: '\A';
       }
       .contextControl {
-        background-color: #fff7d4;
-        border: 1px solid #f6e6a5;
+        background-color: var(--diff-context-control-color);
+        border: 1px solid var(--diff-context-control-border-color);
       }
       .contextControl gr-button {
         display: inline-block;
@@ -172,7 +162,7 @@
         text-align: center;
       }
       .displayLine .diff-row.target-row td {
-        box-shadow: inset 0 -1px #bbb;
+        box-shadow: inset 0 -1px var(--border-color);
       }
       .br:after {
         /* Line feed */
@@ -182,17 +172,18 @@
         display: inline-block;
       }
       .tab-indicator:before {
-        color: #C62828;
+        color: var(--diff-tab-indicator-color);
         /* >> character */
         content: '\00BB';
       }
       .trailing-whitespace {
         border-radius: .4em;
-        background-color: #FF9AD2;
+        background-color: var(--diff-trailing-whitespace-indicator);
       }
       #diffHeader {
-        background-color: #F9F9F9;
-        color: #2A00FF;
+        background-color: var(--table-header-background-color);
+        border-bottom: 1px solid var(--border-color);
+        color: var(--link-color);
         font-family: var(--monospace-font-family);
         font-size: var(--font-size, var(--font-size-small));
         padding: 0.5em 0 0.5em 4em;