Use sass variabled for backgroung and border colors

app/assets/stylesheets/base/gl_variables.scss

@@ -716,8 +716,8 @@ $panel-border-radius:            0;
 // $panel-footer-bg:             #f5f5f5
 
 $panel-default-text:          $text-color;
-// $panel-default-border:        #ddd
-// $panel-default-heading-bg:    #f5f5f5
+$panel-default-border:        $border-color;
+$panel-default-heading-bg:    $background-color;
 
 // $panel-primary-text:          #fff
 // $panel-primary-border:        $brand-primary

app/assets/stylesheets/base/variables.scss

 $style_color: #474D57;
 $hover: #FFF3EB;
-$box_bg: #F9F9F9;
 $gl-link-color: #446e9b;
 $nprogress-color: #c0392b;
 $gl-font-size: 14px;
@@ -9,6 +8,8 @@ $sidebar_width: 230px;
 $avatar_radius: 50%;
 $code_font_size: 13px;
 $code_line_height: 1.5;
+$border-color: #dce4ec;
+$background-color: #ECF0F1;
 
 /*
  * State colors:

app/assets/stylesheets/generic/files.scss

@@ -3,7 +3,7 @@
  *
  */
 .file-holder {
-  border: 1px solid #CCC;
+  border: 1px solid $border-color;
   margin-bottom: 1em;
 
   table {
@@ -11,8 +11,9 @@
   }
 
   .file-title {
-    background: #EEE;
-    border-bottom: 1px solid #CCC;
+    position: relative;
+    background: $background-color;
+    border-bottom: 1px solid $border-color;
     text-shadow: 0 1px 1px #fff;
     margin: 0;
     text-align: left;
@@ -20,8 +21,9 @@
 
     .file-actions {
       float: right;
-      position: relative;
-      top: -5px;
+      position: absolute;
+      top: 5px;
+      right: 15px;
 
       .btn {
         padding: 0px 10px;
@@ -113,7 +115,7 @@
       ol {
         margin-left: 40px;
         padding: 10px 0;
-        border-left: 1px solid #CCC;
+        border-left: 1px solid $border-color;
         margin-bottom: 0;
         background: white;
         li {

app/assets/stylesheets/generic/highlight.scss

@@ -57,7 +57,7 @@
 .note-text .code {
   border: none;
   box-shadow: none;
-  background: $box_bg;
+  background: $background-color;
   padding: 1em;
   overflow-x: auto;
 

app/assets/stylesheets/generic/selects.scss

@@ -2,7 +2,7 @@
 .select2-container, .select2-container.select2-drop-above {
   .select2-choice {
     background: #FFF;
-    border-color: #BBB;
+    border-color: #CCC;
     padding: 6px 14px;
     line-height: 1.42857143;
     height: auto;

app/assets/stylesheets/generic/tables.scss

@@ -9,7 +9,7 @@ table {
       th {
         font-weight: normal;
         font-size: 15px;
-        border-bottom: 1px solid #CCC !important;
+        border-bottom: 1px solid $border-color !important;
       }
       td {
         border-color: #F1F1F1 !important;

app/assets/stylesheets/pages/diff.scss

 .diff-file {
-  border: 1px solid #CCC;
+  border: 1px solid $border-color;
   margin-bottom: 1em;
 
   .diff-header {
-    @extend .clearfix;
-    background: #EEE;
-    border-bottom: 1px solid #CCC;
-    padding: 5px 5px 5px 10px;
+    position: relative;
+    background: $background-color;
+    border-bottom: 1px solid $border-color;
+    padding: 10px 15px;
     color: #555;
     z-index: 10;
 
     > span {
+      @include str-truncated(65%);
       font-family: $monospace_font;
-      line-height: 2;
     }
 
     .diff-btn-group {
       float: right;
+      position: absolute;
+      top: 5px;
+      right: 15px;
 
       .btn {
-        background-color: #FFF;
+        padding: 0px 10px;
+        font-size: 13px;
+        line-height: 28px;
       }
     }
 
@@ -87,7 +92,7 @@
       background: #F5F5F5;
       color: rgba(0,0,0,0.3);
       padding: 0px 5px;
-      border-right: 1px solid #ccc;
+      border-right: 1px solid $border-color;
       text-align: right;
       min-width: 35px;
       max-width: 50px;
@@ -136,7 +141,7 @@
         background: #ffecec;
       }
       &.matched {
-        color: #ccc;
+        color: $border-color;
         background: #fafafa;
       }
       &.parallel {

app/assets/stylesheets/pages/graph.scss

 .project-network {
-  border: 1px solid #CCC;
+  border: 1px solid $border-color;
 
   .controls {
     color: #888;
     font-size: 14px;
     padding: 5px;
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid $border-color;
     background: #EEE;
   }
 

app/assets/stylesheets/pages/merge_requests.scss

@@ -123,10 +123,10 @@
 }
 
 .mr-state-widget {
-  background: $box_bg;
+  background: $background-color;
   margin-bottom: 20px;
   color: #666;
-  border: 1px solid #EEE;
+  border: 1px solid $border-color;
   @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
 
   .ci_widget {