new grays for light theme

public/sass/_variables.dark.scss

@@ -238,6 +238,7 @@ $navbarButtonBackgroundHighlight: $body-bg;
 $side-menu-bg:            $black;
 $side-menu-item-hover-bg: $dark-2;
 $side-menu-shadow:        0 0 20px black;
+$side-menu-link-color:    $link-color;
 $breadcrumb-hover-hl:   #111;
 
 // Menu dropdowns

public/sass/_variables.light.scss

@@ -27,7 +27,7 @@ $gray-5:           #ECECEC;
 $gray-6:           #f4f5f8;
 $gray-7:           #fbfbfb;*/
 
-$black:            #000;
+/*$black:            #000;
 $dark-1:           #121314;
 $dark-2:           #1d1d1f;
 $dark-3:           #272729;
@@ -39,7 +39,22 @@ $gray-3:           #b2b3b8;
 $gray-4:           #d5d6db;
 $gray-5:           #e9eaf0;
 $gray-6:           #f4f5f8;
-$gray-7:           #fafbfc;
+$gray-7:           #fafbfc;*/
+
+$black:            #000;
+$dark-1:           #13161d;
+$dark-2:           #1e2028;
+$dark-3:           #303133;
+$dark-4:           #35373f;
+$dark-5:           #41444b;
+$gray-1:           #52545c;
+$gray-2:           #767980;
+$gray-3:           #acaeb6;
+$gray-4:           #ced0d8;
+$gray-5:           #dfe3eb;
+//$gray-5:             #dfe7eb;
+$gray-6:           #ebedf2;
+$gray-7:           #f7f8fa;
 
 $white:            #fff;
 
@@ -72,18 +87,21 @@ $critical:              #EC2128;
 $body-bg:  		  		    $white;
 $page-bg:  		  		    $white;
 $body-color:    		    $gray-1;
-$text-color:    		    $gray-1;
+$text-color:    		    $dark-4;
 $text-color-strong:	    $white;
-$text-color-weak: 	    $gray-3;
+$text-color-weak: 	    $gray-2;
 $text-color-faint:      $gray-4;
 $text-color-emphasis: 	$dark-5;
 
 $text-shadow-strong: none;
 $text-shadow-faint: none;
+$textShadow: none;
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
-$page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
+//$page-gradient: linear-gradient(120deg, transparent 40%, darken($gray-6, 4%) 98%);
+$page-gradient: linear-gradient(120deg, $gray-7 40%, $gray-6 98%);
+//$page-gradient: $gray-7;
 
 // Links
 // -------------------------
@@ -110,7 +128,7 @@ $component-active-bg:    $brand-primary !default;
 // Panel
 // -------------------------
 
-$panel-bg: 		       $gray-7;
+$panel-bg: 		       $white;//$gray-7;
 $panel-border-color: $gray-5;
 $panel-border:       solid 1px $panel-border-color;
 $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
@@ -130,12 +148,12 @@ $code-tag-bg:       $gray-6;
 $code-tag-border:   darken($code-tag-bg, 3%);
 
 // cards
-$card-background: linear-gradient(135deg, $gray-5, $gray-6);
+$card-background: linear-gradient(135deg, #ccd2d9, #dde4ed);//linear-gradient(135deg, $gray-4, $gray-5);
 $card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
 
 // Lists
-$list-item-bg:         $card-background;
+$list-item-bg:         linear-gradient(135deg, #dde4ed, $gray-6);//$card-background;
 $list-item-hover-bg:   darken($gray-5, 5%);
 $list-item-link-color: $text-color;
 $list-item-shadow:     $card-shadow;
@@ -170,9 +188,9 @@ $btn-warning-bg-hl:     darken($orange, 3%);
 $btn-danger-bg:         lighten($red, 3%);
 $btn-danger-bg-hl:      darken($red, 3%);
 
-$btn-inverse-bg:          $gray-5;
-$btn-inverse-bg-hl:       darken($gray-5, 5%);
-$btn-inverse-text-color:  $dark-4;
+$btn-inverse-bg:          #acb6bf;//#dae5f0;//$gray-5;
+$btn-inverse-bg-hl:       darken(#b8c2cc, 5%);
+$btn-inverse-text-color:  $gray-7;//$dark-4;
 
 $btn-link-color: $gray-1;
 
@@ -184,24 +202,25 @@ $iconContainerBackground: $white;
 
 // Forms
 // -------------------------
-$input-bg:                       $gray-7;
+$input-bg:                       $white;
 $input-bg-disabled:              $gray-5;
 
 $input-color:                    $dark-3;
-$input-border-color:             $gray-5;
+$input-border-color:             #dde4ed;//$gray-4;
 $input-box-shadow:               none;
 $input-border-focus:             $blue !default;
 $input-box-shadow-focus:         $blue !default;
 $input-color-placeholder:        $gray-4 !default;
-$input-label-bg:	        	 #eaebee;
-$input-label-border-color:       #e3e4e7;
+$input-label-bg:	        	     #dde4ed;//#dfe7f0;//#dae5f0;//#d8dfed;//$gray-5;#dde6f0;
+$input-label-border-color:       #dde4ed;//#dfe7f0;//#dae5f0;//#d8dfed;//$gray-5;#dde6f0;
 $input-invalid-border-color:     lighten($red, 5%);
 
 // Sidemenu
 // -------------------------
-$side-menu-bg:            $gray-7;
-$side-menu-item-hover-bg: $gray-5;
-$side-menu-shadow:        0 0 5px #c2c2c2;
+$side-menu-bg:            $dark-3;
+$side-menu-item-hover-bg: $gray-1;
+$side-menu-shadow:        0 0 5px $dark-5;//0 0 5px #c2c2c2;
+$side-menu-link-color:    $gray-6;
 
 // Menu dropdowns
 // -------------------------
@@ -264,7 +283,7 @@ $wellBackground:                  $gray-3;
 // -------------------------
 
 $navbarHeight:                    52px;
-$navbarBackgroundHighlight:       white;
+$navbarBackgroundHighlight:       $white;
 $navbarBackground:                $white;
 $navbarBorder:                    1px solid $gray-4;
 $navbarShadow:                    0 0 3px #c1c1c1;

public/sass/components/_sidemenu.scss

@@ -100,7 +100,7 @@
   display: inline-block;
 
   .fa, .icon-gf, .gicon {
-    color: $link-color;
+    color: $side-menu-link-color;
     position: relative;
     opacity: .7;
     font-size: 130%;
@@ -125,6 +125,7 @@
   white-space: nowrap;
   background-color: $side-menu-item-hover-bg;
   font-size: 17px;
+  color: #ebedf2;
 }
 
 li.sidemenu-org-switcher {

public/sass/layout/_page.scss

@@ -144,7 +144,6 @@
   line-height: 36px;
   padding: 0 7px 0 37px;
   @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
-  //background:linear-gradient(#edeff2, #e3e4e7);
   position: relative;
   box-shadow: $card-shadow;
 
@@ -166,13 +165,13 @@
   &.active,
   &:hover {
     background: #fff;//#333;
-    background: linear-gradient($gray-4, darken($gray-4, 5%)); //linear-gradient(#333, #000);
+    background: linear-gradient(#dde4ed, darken(#dde4ed, 5%)); //linear-gradient(#333, #000);
   }
 
   &.active:after,
   &:hover:after {
     background: #fff;//#333;
-    background: linear-gradient(135deg, $gray-4,darken($gray-4, 5%));////linear-gradient(135deg, #333, #000);
+    background: linear-gradient(135deg, #dde4ed,darken(#dde4ed, 5%));////linear-gradient(135deg, #333, #000);
   }
 
   &:after {