Valo Sass API refactoring (#13668)

Also fixes #13672 (added ‘notification’ v-included-components list)

Fixes #13746 as well (DragAndDropWrapper won’t hide the drag source any
more)

Loads of smaller tweaks and fixes, went through almost all components
again and fixed any issues I could find in testing.

Testing done with the following:
Desktop (OS X Mavericks)
-Safari 7
-Chrome 35
-Firefox 24.5
-Opera 21, 12
-Internet Explorer 8,10

Mobile:
-iOS 7
-Android 4
-Android 2.3
-Windows Phone 8

Change-Id: Ide32cacd1958b5b8db85afe23f455ad3140a7d21

1 files changed, 18 insertions, 15 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index bb5655e94e..b254f097c5 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -15,7 +15,7 @@ $v-font-family--h3:       $v-font-family--header   !default;
 $v-letter-spacing--h1:    -0.03em         !default;
 $v-letter-spacing--h2:    -0.02em         !default;
 $v-letter-spacing--h3:    0               !default;
-$v-letter-spacing--h4:    0.05em          !default;
+$v-letter-spacing--h4:    0               !default;
 
 
 @mixin valo-label ($primary-stylename: v-label) {
@@ -23,15 +23,15 @@ $v-letter-spacing--h4:    0.05em          !default;
   .#{$primary-stylename}-undef-w {
     white-space: nowrap;
   }
-  
+
   h1, .h1,
   h2, .h2,
   h3, .h3 {
     line-height: $v-line-height--header;
     font-weight: $v-font-weight--header;
-    color: valo-header-color($v-background-color);
+    color: valo-header-color($v-app-background-color);
   }
-  
+
   h1, .h1 {
     font-size: $v-font-size--h1;
     margin-top: 1.4em;
@@ -39,7 +39,7 @@ $v-letter-spacing--h4:    0.05em          !default;
     font-family: $v-font-family--h1;
     letter-spacing: $v-letter-spacing--h1;
   }
-  
+
   h2, .h2 {
     font-size: $v-font-size--h2;
     font-family: $v-font-family--h2;
@@ -47,7 +47,7 @@ $v-letter-spacing--h4:    0.05em          !default;
     margin-bottom: 0.77em;
     letter-spacing: $v-letter-spacing--h2;
   }
-  
+
   h3, .h3 {
     font-size: $v-font-size--h3;
     font-family: $v-font-family--h3;
@@ -55,12 +55,12 @@ $v-letter-spacing--h4:    0.05em          !default;
     margin-bottom: 0.77em;
     letter-spacing: $v-letter-spacing--h3;
   }
-  
+
   h4, .h4 {
     line-height: $v-line-height--header;
     font-weight: $v-font-weight + 200;
     font-size: $v-font-size--small;
-    color: valo-header-color($v-background-color, $contrast: 0.12);
+    color: valo-header-color($v-app-background-color, $contrast: 0.12);
     text-transform: uppercase;
     letter-spacing: $v-letter-spacing--h4;
     margin-top: 2.4em;
@@ -91,7 +91,7 @@ $v-letter-spacing--h4:    0.05em          !default;
       margin-top: $v-font-size;
     }
   }
-  
+
   h1, .h1,
   h2, .h2,
   h3, .h3,
@@ -100,21 +100,24 @@ $v-letter-spacing--h4:    0.05em          !default;
       margin: 0 !important;
     }
   }
-  
+
   .#{$primary-stylename}-large {
     font-size: $v-font-size--large;
   }
-  
+
   .#{$primary-stylename}-small {
     font-size: $v-font-size--small;
   }
-  
+
   .#{$primary-stylename}-bold {
     font-weight: $v-font-weight + 200;
   }
-  
+
   .#{$primary-stylename}-light {
     font-weight: $v-font-weight - 100;
+    @if $v-font-weight < 400 {
+      color: valo-font-color($v-app-background-color, .5);
+    }
   }
-  
-}
\ No newline at end of file
+
+}