Fix specs; start on light theme

4 files changed, 58 insertions, 29 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 14e19134302..35e7a10379f 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -19,7 +19,7 @@
 @import "framework/flash";
 @import "framework/forms";
 @import "framework/gfm";
-@import "framework/gitlab-theme.scss";
+@import "framework/gitlab-theme";
 @import "framework/header";
 @import "framework/highlight";
 @import "framework/issue_box";
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index a860791b5f6..35c952af51b 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -118,7 +118,7 @@
       border-right: 1px solid $color-800;
     }
 
-    .search-input::placeholder  {
+    .search-input::placeholder {
       color: rgba($color-200, .8);
     }
 
@@ -173,10 +173,27 @@ body {
   }
 
   &.ui_dark {
-    @include gitlab-theme($dark-100, $dark-200, $dark-500, $dark-700, $dark-800, $dark-900);
+    @include gitlab-theme($theme-gray-100, $theme-gray-200, $theme-gray-500, $theme-gray-700, $theme-gray-800, $theme-gray-900);
+  }
+
+  &.ui_light {
+    @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-500, $theme-gray-200, $theme-gray-100);
+
+    header.navbar-gitlab-new {
+      background: linear-gradient(to right, $theme-gray-100, $theme-gray-100);
+      box-shadow: 0 2px 0 0 $border-color;
+
+      .logo-text svg {
+        fill: $theme-gray-900;
+      }
+    }
   }
 
   &.ui_blue {
     @include gitlab-theme($theme-blue-100, $theme-blue-200, $theme-blue-500, $theme-blue-700, $theme-blue-800, $theme-blue-900);
   }
+
+  &.ui_green {
+    @include gitlab-theme($theme-green-100, $theme-green-200, $theme-green-500, $theme-green-700, $theme-green-800, $theme-green-900);
+  }
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index adf30e81158..becdd7ff35b 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -88,19 +88,19 @@ $indigo-800: #393982;
 $indigo-900: #292961;
 $indigo-950: #1a1a40;
 
-$dark-50:  #fafafa;
-$dark-100: #f2f2f2;
-$dark-200: #dfdfdf;
-$dark-300: #cccccc;
-$dark-400: #bababa;
-$dark-500: #a7a7a7;
-$dark-600: #949494;
-$dark-700: #707070;
-$dark-800: #4f4f4f;
-$dark-900: #2e2e2e;
-$dark-950: #1f1f1f;
-
-$theme-blue-50:  #f4f8fc;
+$theme-gray-50: #fafafa;
+$theme-gray-100: #f2f2f2;
+$theme-gray-200: #dfdfdf;
+$theme-gray-300: #cccccc;
+$theme-gray-400: #bababa;
+$theme-gray-500: #a7a7a7;
+$theme-gray-600: #949494;
+$theme-gray-700: #707070;
+$theme-gray-800: #4f4f4f;
+$theme-gray-900: #2e2e2e;
+$theme-gray-950: #1f1f1f;
+
+$theme-blue-50: #f4f8fc;
 $theme-blue-100: #e6edf5;
 $theme-blue-200: #c8d7e6;
 $theme-blue-300: #97b3cf;
@@ -112,6 +112,18 @@ $theme-blue-800: #25496e;
 $theme-blue-900: #1a3652;
 $theme-blue-950: #0f2235;
 
+$theme-green-50: #f2faf6;
+$theme-green-100: #e4f3ea;
+$theme-green-200: #c0dfcd;
+$theme-green-300: #8ac2a1;
+$theme-green-400: #52a274;
+$theme-green-500: #35935c;
+$theme-green-600: #288a50;
+$theme-green-700: #1c7441;
+$theme-green-800: #145d33;
+$theme-green-900: #0d4524;
+$theme-green-950: #072d16;
+
 
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index a045f0d16d5..d85b19dee46 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -12,6 +12,17 @@ header.navbar-gitlab-new {
   border-bottom: 0;
   min-height: $new-navbar-height;
 
+  .logo-text {
+    line-height: initial;
+
+    svg {
+      width: 55px;
+      height: 14px;
+      margin: 0;
+      fill: $white-light;
+    }
+  }
+
   .header-content {
     display: -webkit-flex;
     display: flex;
@@ -37,10 +48,10 @@ header.navbar-gitlab-new {
 
       img {
         height: 28px;
-        margin-right: 10px;
+        margin-right: 8px;
       }
 
-      > a {
+      a {
         display: -webkit-flex;
         display: flex;
         align-items: center;
@@ -53,17 +64,6 @@ header.navbar-gitlab-new {
             margin-right: 8px;
           }
         }
-
-        .logo-text {
-          line-height: initial;
-
-          svg {
-            width: 55px;
-            height: 14px;
-            margin: 0;
-            fill: $white-light;
-          }
-        }
       }
     }