Move diff colors to variables

3 files changed, 24 insertions, 14 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 8d3ad934a50..9f231429653 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -108,6 +108,8 @@ $red-light: #e52c5a;
 $red-normal: #d22852;
 $red-dark: darken($red-normal, 5%);
 
+$black-transparent: rgba(0, 0, 0, 0.3);
+
 $border-white-light: #f1f2f4;
 $border-white-normal: #d6dae2;
 $border-white-dark: #c6cacf;
@@ -158,7 +160,15 @@ $gl-btn-active-gradient: inset 0 0 4px $gl-btn-active-background;
  */
 $added: #63c363;
 $deleted: #f77;
-
+$line-added: #ebfdf0;
+$line-added-dark: #a6f3a6;
+$line-removed: #ffecec;
+$line-removed-dark: #f8cbcb;
+$line-number-old: #fdd;
+$line-number-old-border: #f1c0c0;
+$line-number-new: #dbffdb;
+$line-number-new-border: #c1e9c1;
+$match-line: #fafafa;
 /*
  * Fonts
  */
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index b90c95c62d1..c482a1258f7 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: rgba(0, 0, 0, 0.3);
+    color: $black-transparent;
   }
 
   // Code itself
@@ -30,7 +30,7 @@
     }
 
     .line_content.match {
-      color: rgba(0, 0, 0, 0.3);
+      color: $black-transparent;
       background: rgba(255, 255, 255, 0.4);
     }
   }
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 8c1b0cd84ec..80918970a75 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: rgba(0, 0, 0, 0.3);
+    color: $black-transparent;
   }
 
   // Code itself
@@ -23,36 +23,36 @@
   .line_holder {
     .diff-line-num {
       &.old {
-        background: #fdd;
-        border-color: #f1c0c0;
+        background-color: $line-number-old;
+        border-color: $line-number-old-border;
       }
 
       &.new {
-        background: #dbffdb;
-        border-color: #c1e9c1;
+        background-color: $line-number-new;
+        border-color: $line-number-new-border;
       }
     }
 
     .line_content {
       &.old {
-        background: #ffecec;
+        background: $line-removed;
 
         span.idiff {
-          background-color: #f8cbcb;
+          background-color: $line-removed-dark;
         }
       }
 
       &.new {
-        background: #eaffea;
+        background-color: $line-added;
 
         span.idiff {
-          background-color: #a6f3a6;
+          background-color: $line-added-dark;
         }
       }
 
       &.match {
-        color: rgba(0, 0, 0, 0.3);
-        background: #fafafa;
+        color: $black-transparent;
+        background: $match-line;
       }
     }
   }