ux(): making light theme better and changing page header

public/sass/_variables.light.scss

@@ -14,8 +14,9 @@ $gray-darker:           lighten(#000, 11.5%); // #222
 $gray-dark:             lighten(#000, 20%);   // #333
 $gray:                  lighten(#000, 33.5%); // #555
 $gray-light:            lighten(#000, 60%);   // #999
-$gray-lighter:          lighten(#000, 97.5%); // #eee
-$gray-lightest:         lighten(#000, 98.5%); // #eee
+$gray-light2:           lighten(#000, 70%);   // #999
+$gray-lighter:          lighten(#000, 96.5%); // #eee
+$gray-lightest:         lighten(#000, 98%); // #eee
 $white:                 #fff;
 
 
@@ -45,16 +46,16 @@ $critical:              #EC2128;
 // Scaffolding
 // -------------------------
 
-$body-bg:  		  #EFEFEF;
-$page-bg:  		  $gray-lightest;
+$body-bg:  		  $white;
+$page-bg:  		  $white;
 $body-color:    $gray;
 $text-color:    $gray;
 
 // Links
 // -------------------------
 $link-color:             $gray;
-$link-color-disabled:     lighten($link-color,30%);
-$link-hover-color:        darken($link-color, 20%);
+$link-color-disabled:    lighten($link-color,30%);
+$link-hover-color:       darken($link-color, 20%);
 
 // Typography
 // -------------------------
@@ -74,8 +75,8 @@ $component-active-bg:    $brand-primary !default;
 // Panel
 // -------------------------
 
-$panel-bg: 		    $gray-lighter;
-$panel-border: 	  solid 1px #ddd;
+$panel-bg: 		    $gray-lightest;
+$panel-border: 	  solid 1px $gray-lighter;
 
 $divider-border-color: 		$gray-light;
 
@@ -84,7 +85,7 @@ $submenuBackground:     rgb(218, 217, 217);
 $submenuBorder:         $white;
 
 // Graphite Target Editor
-$tight-form-border:         #ddd;
+$tight-form-border:     #ddd;
 $tight-form-bg:     		#efefef;
 
 $tight-form-func-bg: 			darken($tight-form-bg, 5%);
@@ -162,7 +163,7 @@ $input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
 $input-border-focus:             #66afe9 !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 $input-color-placeholder:        #999 !default;
-$input-label-bg:		        		 #f8f8f8;
+$input-label-bg:	        		   #f8f8f8;
 
 // Sidemenu
 // -------------------------

public/sass/components/_gfbox.scss

@@ -1,6 +1,6 @@
 .gf-box {
   margin: 10px 5px;
-  background-color: $panel-bg;
+  background-color: $page-bg;
   position: relative;
   border: 1px solid $tight-form-func-bg;
 }

public/sass/layout/_page.scss

@@ -33,17 +33,18 @@
 }
 
 .page-header {
-  padding: $spacer 0 $spacer * 2.5;
+  padding: $spacer 0;
 
   display: flex;
   justify-content: space-between;
   align-items: center;
-  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-  display: -ms-flexbox;      /* TWEENER - IE 10 */
-  display: -webkit-flex;     /* NEW - Chrome */
   flex-wrap: wrap-reverse;
-  background: transparent url(../img/page_header_line.png) no-repeat left 60px;
+  border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
+  border-image-slice: 1;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-bottom: 4px solid transparent;
 
   h1 {
     font-style: italic;

public/sass/mixins/_buttons.scss

@@ -5,8 +5,6 @@
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
   @include gradientBar($startColor, $endColor, $text-color, $textShadow);
 
-  box-shadow: inset 0 -4px rgba(0,0,0,0.3);
-
   // in these cases the gradient won't cover the background, so we override
   &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
     color: $text-color;
@@ -20,6 +18,8 @@
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   padding: $padding-y $padding-x;
   font-size: $font-size;
+  box-shadow: inset 0 (-$padding-y/2) rgba(0,0,0,0.2);
+
   @include border-radius($border-radius);
 }