new-colors

3 files changed, 21 insertions, 19 deletions

diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index aa5acb93cc5..a1a9990241d 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -5,7 +5,7 @@ html {
 }
 
 body {
-  background-color: #EAEBEC !important;
+  background-color: #F3F3F3 !important;
 
   &.navless {
     background-color: white !important;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 11c48d26ab5..b804f59e643 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -123,7 +123,6 @@
   padding: 0;
   margin: 0;
   list-style: none;
-  margin-top: 5px;
   height: 56px;
 
   li {
@@ -131,9 +130,9 @@
 
     a {
       padding: 14px;
-      font-size: 17px;
-      line-height: 28px;
-      color: #7f8fa4;
+      font-size: 15px;
+      line-height: 23px;
+      color: #959494;
       border-bottom: 2px solid transparent;
 
       &:hover, &:active, &:focus {
@@ -143,8 +142,8 @@
     }
 
     &.active a {
-      color: #4c4e54;
-      border-bottom: 2px solid #1cacfc;
+      color: #616060;
+      border-bottom: 2px solid #4688f1;
     }
 
     .badge {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 2ef40a6e517..a24a4ea3b62 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -1,9 +1,9 @@
-$hover: #FFFAF1;
+$hover: #faf9f9;
 $gl-text-color: #54565B;
 $gl-text-green: #4A2;
 $gl-text-red: #D12F19;
 $gl-text-orange: #D90;
-$gl-header-color: #4c4e54;
+$gl-header-color: #323232;
 $gl-link-color: #333c48;
 $md-text-color: #444;
 $md-link-color: #3084bb;
@@ -15,13 +15,14 @@ $sidebar_width: 230px;
 $avatar_radius: 50%;
 $code_font_size: 13px;
 $code_line_height: 1.5;
-$border-color: #dce0e6;
+$border-color: #efeff1;
 $table-border-color: #eef0f2;
-$background-color: #F7F8FA;
+$background-color: #faf9f9;
 $header-height: 58px;
 $fixed-layout-width: 1280px;
-$gl-gray: #7f8fa4;
+$gl-gray: #5a5a5a;
 $gl-padding: 16px;
+$gl-padding-top:10px;
 $gl-avatar-size: 46px;
 
 /*
@@ -29,12 +30,12 @@ $gl-avatar-size: 46px;
  */
 
 $white-light: #FFFFFF;
-$white-normal: #DCE0E5;
-$white-dark: #E4E7ED;
+$white-normal: #ededed;
+$white-dark: #ededed;
 
-$gray-light: #F0F2F5;
-$gray-normal: #DCE0E5;
-$gray-dark: #E4E7ED;
+$gray-light: #f7f7f7;
+$gray-normal: #ededed;
+$gray-dark: #ededed;
 
 $green-light: #31AF64;
 $green-normal: #2FAA60;
@@ -52,11 +53,11 @@ $red-light: #F43263;
 $red-normal: #E52C5A;
 $red-dark: #D22852;
 
-$border-white-light: #E3E7EC;
+$border-white-light: #F1F2F4;
 $border-white-normal: #D6DAE2;
 $border-white-dark: #C6CACF;
 
-$border-gray-light: #DCE0E5;
+$border-gray-light: #d1d1d1;
 $border-gray-normal: #D6DAE2;
 $border-gray-dark: #C6CACF;
 
@@ -76,6 +77,8 @@ $border-red-light: #E52C5A;
 $border-red-normal: #D22852;
 $border-red-dark: #CA264F;
 
+/* header */
+$light-grey-header: #faf9f9;
 
 /*
  * State colors: