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

7 files changed, 190 insertions, 159 deletions

diff --git a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss
index 046b5923ad..8a3894b524 100644
--- a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss
@@ -1,15 +1,19 @@
 @mixin valo-contextmenu {
-  
+
   .v-contextmenu {
     @include valo-selection-overlay-style;
+
+    table {
+      border-spacing: 0;
+    }
   }
-  
+
   .v-contextmenu .gwt-MenuItem {
     @include valo-selection-item-style;
   }
-  
+
   .v-contextmenu .gwt-MenuItem-selected {
     @include valo-selection-item-selected-style;
   }
-  
-}
\ No newline at end of file
+
+}
diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss
index e685c7fc01..2c71f076e2 100644
--- a/WebContent/VAADIN/themes/valo/shared/_global.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_global.scss
@@ -88,6 +88,10 @@ $valo-global-included: false !default;
       overflow: hidden;
     }
 
+    .v-icon {
+      cursor: inherit;
+    }
+
     .v-icon,
     .v-errorindicator,
     .v-required-field-indicator {
@@ -95,19 +99,45 @@ $valo-global-included: false !default;
       line-height: inherit;
     }
 
-    .v-caption,
-    .v-captiontext {
+    .v-caption {
       display: inline-block;
+      white-space: nowrap;
       line-height: $v-line-height;
     }
 
+    .v-captiontext {
+      display: inline-block;
+      line-height: inherit;
+    }
+
     // Component global styles should also be included here
-    @include valo-orderedlayout-global;
-    @include valo-gridlayout-global;
-    @include valo-calendar-global;
-    @include valo-colorpicker-global;
-    @include valo-table-global;
-    @include valo-tabsheet-global;
+    @if v-is-included(orderedlayout) {
+      @include valo-orderedlayout-global;
+    }
+
+    @if v-is-included(gridlayout) {
+      @include valo-gridlayout-global;
+    }
+
+    @if v-is-included(calendar) {
+      @include valo-calendar-global;
+    }
+
+    @if v-is-included(colorpicker) {
+      @include valo-colorpicker-global;
+    }
+
+    @if v-is-included(table) or v-is-included(treetable) {
+      @include valo-table-global;
+    }
+
+    @if v-is-included(tabsheet) {
+      @include valo-tabsheet-global;
+    }
+
+    @if v-is-included(splitpanel) {
+      @include valo-splitpanel-global;
+    }
 
     $valo-global-included: true;
   }
@@ -225,9 +255,6 @@ $valo-shared-pathPrefix: null;
     outline: none;
   }
 
-  //.v-captiontext,
-  //.v-errorindicator,
-  //.v-required-field-indicator,
   img.v-icon {
     vertical-align: middle;
   }
@@ -340,6 +367,7 @@ $valo-shared-pathPrefix: null;
   .v-generated-body {
     height: auto;
     overflow: auto;
+    background-color: $v-app-background-color;
   }
 
   .v-app,
@@ -349,20 +377,4 @@ $valo-shared-pathPrefix: null;
     overflow: visible !important;
   }
 
-  // Reposition loading indicator so that it doens't scroll with the page
-  .v-loading-indicator {
-    position: fixed !important;
-  }
-
-  .v-overlay-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  // Reposition notifications so that they don't scroll with the page
-  .v-Notification {
-    position: fixed !important;
-  }
-
 }
diff --git a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
index 0b083310fd..9ad3d27e0e 100644
--- a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
@@ -43,6 +43,14 @@
 
 
 
+
+
+$v-loading-indicator-color: valo-focus-color() !default;
+$v-loading-indicator-bar-height: ceil($v-unit-size/10) !default;
+$v-loading-indicator-bar-height--wait: ceil($v-unit-size/6) !default;
+
+
+
 @include keyframes(v-progress-start) {
   0% { width: 0%; }
   100% { width: 50%; }
@@ -54,8 +62,9 @@
 }
 
 @include keyframes(v-progress-wait) {
-  0% { width: 90%; }
-  100% { width: 96%; }
+  0% { width: 90%; height: $v-loading-indicator-bar-height; }
+  3% { width: 91%; height: $v-loading-indicator-bar-height--wait; }
+  100% { width: 96%; height: $v-loading-indicator-bar-height--wait; }
 }
 
 @include keyframes(v-progress-wait-pulse) {
@@ -65,11 +74,9 @@
 }
 
 
-$v-loading-indicator-color: valo-focus-color() !default;
-$v-loading-indicator-bar-height: ceil($v-unit-size/7) !default;
 
 @mixin valo-loading-bar {
-  
+
   .v-loading-indicator {
     position: fixed !important;
     z-index: 99999;
@@ -82,11 +89,11 @@ $v-loading-indicator-bar-height: ceil($v-unit-size/7) !default;
     background-color: $v-loading-indicator-color;
     //@include linear-gradient(to right, rgba($v-loading-indicator-color,0) 0%, $v-loading-indicator-color 100%);
     pointer-events: none;
-    
+
     @include transition(none);
     @include animation(v-progress-start 1000ms 200ms both);
     //@include animation-fill-mode(forwards);
-    
+
     &[style*="none"] {
       // Chrome skips the transitions because it thinks the element is display: none;
       display: block !important;
@@ -96,7 +103,7 @@ $v-loading-indicator-bar-height: ceil($v-unit-size/7) !default;
       @include transition(opacity 500ms 300ms, width 300ms);
     }
   }
-  
+
   .v-loading-indicator-delay {
     width: 90%;
     .v-ff & {
@@ -104,7 +111,7 @@ $v-loading-indicator-bar-height: ceil($v-unit-size/7) !default;
     }
     @include animation(v-progress-delay 3.8s forwards);
   }
-  
+
   .v-loading-indicator-wait {
     width: 96%;
     .v-ff & {
@@ -112,5 +119,5 @@ $v-loading-indicator-bar-height: ceil($v-unit-size/7) !default;
     }
     @include animation(v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards);
   }
-  
-}
\ No newline at end of file
+
+}
diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss
index c239a65c11..ff470b8144 100644
--- a/WebContent/VAADIN/themes/valo/shared/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss
@@ -1,3 +1,6 @@
+$v-notification-title-color: $v-focus-color !default;
+
+
 @mixin valo-notification {
 
 
@@ -44,7 +47,7 @@
     }
 
     // Can't match to "left: 0", since that would target "margin-left: 0" also, which all GWT PopupPanels have always
-    .v-Notification[style*=" left: 0"]:not(.v-Notification-system) {
+    .v-Notification[style*=" left: 0"]:not(.v-Notification-system):not(.bar) {
       @include valo-anim-slide-right(600ms);
     }
   }
@@ -59,12 +62,12 @@
     border-radius: $v-border-radius;
     text-align: center;
     position: fixed !important;
-    
+
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     backface-visibility: hidden;
-    
+
     h1 {
       margin: 0;
       display: inline-block;
@@ -74,7 +77,7 @@
       white-space: nowrap;
       letter-spacing: 0;
     }
-    
+
     p {
       margin: 0;
       display: inline-block;
@@ -82,11 +85,11 @@
       max-width: 30em;
       text-align: left;
     }
-    
+
     h1 ~ p {
       margin-left: round($v-font-size * 1.5);
     }
-    
+
     .v-icon + h1 {
       margin-left: round($v-font-size);
     }
@@ -103,12 +106,7 @@
   // System notification
 
   .v-Notification-system {
-    left: 0 !important;
-    right: 0;
-    max-width: 100%;
-    margin: 0 !important;
-    border-radius: 0;
-    
+    @include valo-notification-bar-style;
     @include valo-notification-system-style;
   }
 
@@ -116,7 +114,7 @@
   .v-Notification-system.v-Notification-system {
     margin: 0 !important;
   }
-  
+
 
 
 
@@ -125,24 +123,28 @@
   .v-Notification.tray {
     text-align: left;
     h1 {
-      //display: block;      
+      //display: block;
     }
-    
+
     h1 + p {
       display: block;
       margin: .5em 0 0;
     }
     @include valo-notification-tray-style;
   }
-  
+
   .v-Notification.warning {
     @include valo-notification-warning-style;
   }
-  
+
   .v-Notification.error {
     @include valo-notification-error-style;
   }
 
+  .v-Notification.bar {
+    @include valo-notification-bar-style;
+  }
+
   .v-Notification.closable {
     @include valo-notification-closable-style;
 
@@ -177,18 +179,6 @@
   overflow: hidden !important; // Override GWT PopupPanel
   cursor: pointer;
 
-  //&:before {
-  //  content: "";
-  //  position: absolute;
-  //  top: 0;
-  //  right: 0;
-  //  bottom: 0;
-  //  width: $v-unit-size;
-  //  cursor: pointer;
-  //  background: #000;
-  //  @include opacity(.15);
-  //}
-
   &:after {
     content: "\00d7";
     font-size: 1.5em;
@@ -203,7 +193,7 @@
     color: #000;
     @include opacity(.5);
     text-align: center;
-    border: $v-border-width solid #000;
+    border: first-number($v-border) solid #000;
     border-color: rgba(0,0,0,.3);
     border-radius: 50%;
     @include transition(opacity 200ms);
@@ -232,11 +222,11 @@
 
   // Make thigns easier to read
   &[style*="opacity: 0.9;"] {
-    @include opacity(1, true);
+    @include opacity(1 !important);
   }
-  
+
   h1 {
-    color: valo-focus-color();
+    color: $v-notification-title-color;
     font-size: round($v-font-size * 1.2);
     line-height: 1;
   }
@@ -245,11 +235,24 @@
   }
 }
 
+@mixin valo-notification-bar-style {
+  left: 0 !important;
+  right: 0;
+  max-width: 100%;
+  margin: 0 !important;
+  border-radius: 0;
+  box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
+  padding: round($v-unit-size/3) round($v-unit-size/2.5);
+
+  p {
+    max-width: 50em;
+  }
+}
+
 @mixin valo-notification-system-style {
   background-color: #444;
   font-weight: $v-font-weight + 100;
   line-height: round($v-font-size * 1.4);
-  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
 
   h1 {
     color: #fff;
@@ -258,7 +261,6 @@
 
   p {
     color: #e6e6e6;
-    max-width: 50em;
   }
 
   // No need to underline the "click here" text, let's imply that the whole banner is clickable
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
index 35e055516a..6f29b1efef 100644
--- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -1,13 +1,23 @@
+@function valo-overlay-background-color ($context: $v-background-color) {
+  @if is-dark-color($context) {
+    @return darken($context, 3%);
+  }
+  @return lighten($context, 2%);
+}
+
+
+$v-overlay-background-color: valo-overlay-background-color() !default;
 $v-overlay-border-radius: $v-border-radius !default;
-$v-overlay-border-width: $v-border-width !default;
+$v-overlay-border-width: first-number($v-border) !default;
 $v-overlay-open-animation: valo-overlay-open 200ms !default;
 
 $v-overlay-padding: round($v-unit-size/9) !default;
 $v-overlay-padding-vertical: $v-overlay-padding !default;
 $v-overlay-padding-horizontal: $v-overlay-padding !default;
 
-$v-overlay-shadow-style: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade !default;
+$v-overlay-shadow: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade 2-color-luminance($v-background-color)/255) !default;
 
+$v-selection-overlay-background-color: $v-overlay-background-color !default;
 $v-selection-overlay-padding: $v-overlay-padding !default;
 $v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default;
 $v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default;
@@ -16,14 +26,7 @@ $v-selection-item-border-radius: $v-border-radius - 1px !default;
 $v-selection-item-height: ceil($v-unit-size/1.4) !default;
 $v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default;
 $v-selection-item-font-weight: max(400, $v-font-weight);
-
-
-@function valo-overlay-background-color ($context: $v-background-color) {
-  @if is-dark-color($context) {
-    @return darken($context, 2%);
-  }
-  @return lighten($context, 2%);
-}
+$v-selection-item-selection-color: $v-selection-color !default;
 
 
 
@@ -35,17 +38,21 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
     $shadow-offset-x: nth($shadow, 1);
     $shadow-offset-y: nth($shadow, 2);
     $shadow-blur: nth($shadow, 3);
+    $shadow-spread: 0;
+    @if length($shadow) > 4 {
+      $shadow-spread: nth($shadow, 4);
+    }
     $shadow-color: last($shadow);
-    $shadow-color-opacity: opacity($shadow-color);
+    $shadow-color-opacity: round(opacity($shadow-color) * 100);
     $shadow-color: opacify($shadow-color, 1);
 
     position: absolute;
-    top: $shadow-offset-y - $shadow-blur;
-    right: -$shadow-offset-x + $shadow-blur;
-    bottom: -$shadow-offset-y + $shadow-blur;
-    left: $shadow-offset-x - $shadow-blur;
+    top: $shadow-offset-y - $shadow-blur - $shadow-spread;
+    right: -$shadow-offset-x + $shadow-blur - $shadow-spread;
+    bottom: -$shadow-offset-y + $shadow-blur - $shadow-spread;
+    left: $shadow-offset-x - $shadow-blur - $shadow-spread;
     background: $shadow-color;
-    filter: progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true, ShadowOpacity=#{$shadow-color-opacity});
+    filter: alpha(opacity=#{$shadow-color-opacity}) progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true);
   }
 }
 
@@ -63,7 +70,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
     display: block;
 
     // Border simulation
-    .center {
+    /*.center {
       position: absolute;
       top: -$v-overlay-border-width;
       right: -$v-overlay-border-width;
@@ -71,11 +78,11 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
       left: -$v-overlay-border-width;
       background: darken(valo-overlay-background-color(), $v-bevel-depth);
       filter: alpha(opacity=round($v-bevel-depth/1%));
-    }
+    }*/
 
     // Up to 8 shadows are supported
     $elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right;
-    $shadows: valo-shadow($shadow-style: $v-overlay-shadow-style);
+    $shadows: valo-bevel-and-shadow($shadow: $v-overlay-shadow);
 
     @if type-of(last($shadows)) == color {
       @include valo-ie8-shadow($shadows);
@@ -83,7 +90,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
       @for $i from 1 through min(length($elements), length($shadows)) {
         $shadow: nth($shadows, $i);
         @if length($shadow) == 2 {
-          $shadow: last($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list
+          $shadow: flatten-list($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list
         }
         @if length($shadow) > 3 {
           @include valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i));
@@ -98,27 +105,25 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 
 
 
-@function valo-overlay-box-shadow ($bg: null) {
-  $bg: $bg or valo-overlay-background-color();
-  @return valo-shadow($shadow-style: (0 0 0 $v-overlay-border-width rgba(darken($bg, $v-bevel-depth), $v-bevel-depth/100%), $v-overlay-shadow-style));
-}
-
 
 
-@mixin valo-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
+@mixin valo-overlay-style (
+    $background-color: $v-overlay-background-color,
+    $shadow: $v-overlay-shadow,
+    $open-animation: $v-overlay-open-animation
+  ) {
   padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal;
   border-radius: $v-overlay-border-radius;
-  
-  $bg: $background-color or valo-overlay-background-color();
-  background: $bg;
-  color: valo-font-color($bg);
 
-  box-shadow:  valo-overlay-box-shadow($bg);
+  background-color: $background-color;
+  color: valo-font-color($background-color);
+
+  box-shadow:  valo-bevel-and-shadow($bevel: null, $shadow: $shadow);
 
   @if $v-animations-enabled and $v-overlay-open-animation {
     @include animation($open-animation);
   }
-    
+
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
@@ -141,7 +146,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 
 
 
-@mixin valo-selection-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
+@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $open-animation: $v-overlay-open-animation) {
   @include valo-overlay-style($background-color: $background-color, $open-animation: $open-animation);
   padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
 }
@@ -167,7 +172,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
     right: 0;
     bottom: 0;
     left: 0;
-    background: scale-color(valo-selection-color(), $lightness: -30%, $saturation: 50%);
+    background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: 50%);
     @include opacity(.15);
     pointer-events: none;
     border-radius: inherit;
@@ -183,10 +188,9 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 
 
 
-@mixin valo-selection-item-selected-style ($parent-background-color: null) {
-  $selection-color: valo-selection-color($parent-background-color);
-  @include valo-gradient($selection-color);
-  color: valo-font-color($selection-color, 0.9);
+@mixin valo-selection-item-selected-style {
+  @include valo-gradient($v-selection-item-selection-color);
+  color: valo-font-color($v-selection-item-selection-color, 0.9);
 }
 
 
@@ -202,8 +206,9 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
   }
 }
 
-@mixin valo-drag-element-style {
-  background: #fff;
+@mixin valo-drag-element-style ($background-color: $v-app-background-color) {
+  background: $background-color;
+  color: valo-font-color($background-color);
   box-shadow: 0 2px 10px rgba(#000, .2);
   border-radius: $v-border-radius;
   overflow: hidden;
@@ -211,4 +216,4 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 
   // This has the unfortunate side-effect of selecting an the table row where the drag is dropped
   //pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss
index 5ba996d42a..197ef4d9d9 100644
--- a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss
@@ -1,6 +1,6 @@
 // @category Tooltip
 
-$v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .75) !default;
+$v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .9) !default;
 $v-tooltip-font-color: valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default;
 $v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default;
 $v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default;
diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss
index 3bf5f04bdb..b652ea720a 100644
--- a/WebContent/VAADIN/themes/valo/shared/_variables.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss
@@ -4,13 +4,13 @@
 @import "../util/color";
 
 
-// List of components to include in the theme compilation. The list can be modified to make 
+// List of components to include in the theme compilation. The list can be modified to make
 // the compiled theme smaller by removing unused components from the list.
 // @variable v-included-components
 // @usage
 // // Remove the Calendar component styles from the output
 // $v-included-components: remove($v-included-components, calendar);
-$v-included-components: 
+$v-included-components:
     absolutelayout,
     accordion,
     button,
@@ -29,15 +29,15 @@ $v-included-components:
     gridlayout,
     label,
     link,
-    loginform,
     menubar,
     nativebutton,
     nativeselect,
+    notification,
     optiongroup,
     orderedlayout,
     panel,
     popupview,
-    progressindicator,
+    progressbar,
     slider,
     splitpanel,
     table,
@@ -52,7 +52,7 @@ $v-included-components:
     window !default;
 
 
-// Checks if a given component is included in the compilation. Used by the collection mixins that 
+// Checks if a given component is included in the compilation. Used by the collection mixins that
 // include all components, like valo-components and valo-components.
 // @mixin v-is-included
 // @param     $component-name {String} the name of the component to check
@@ -66,66 +66,67 @@ $v-included-components:
 // A static text that is shown while the application JavaScript is loaded and started
 // @variable    v-app-loading-text
 // @default     ""
-$v-app-loading-text: "" !default;
+$v-app-loading-text               : ""                                          !default;
 
 
 // Base line height used for all widgets
 // @variable     v-line-height
 // @default     1.55 !default
-$v-line-height: 1.55 !default;
+$v-line-height                    : 1.55                                        !default;
 
 
-$v-background-color:        hsl(210, 0%, 98%)               !default;
+$v-background-color               : hsl(210, 0%, 98%)                           !default;
+$v-app-background-color           : $v-background-color                         !default;
 
-$v-font-size:                   16px                            !default; // Should be specified in pixels
-$v-font-weight:                 300                             !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold')
-$v-font-color:                  valo-font-color($v-background-color) !default;
-$v-font-family:                 "Open Sans", sans-serif         !default;
+$v-font-size                      : 16px                                        !default; // Should be specified in pixels
+$v-font-weight                    : 300                                         !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold')
+$v-font-color                     : valo-font-color($v-app-background-color)    !default;
+$v-font-family                    : "Open Sans", sans-serif                     !default;
 
-$v-caption-font-size:           round($v-font-size * 0.9)       !default; // Should be a pixel value
-$v-caption-font-weight:         max(400, $v-font-weight)        !default;
+$v-caption-font-size              : round($v-font-size * 0.9)                   !default; // Should be a pixel value
+$v-caption-font-weight            : max(400, $v-font-weight)                    !default;
 
-$v-unit-size:                   round(2.3 * $v-font-size)       !default; // Must be specified in pixels (suitable range 18-50)
+$v-unit-size                      : round(2.3 * $v-font-size)                   !default; // Must be specified in pixels (suitable range 18-50)
 
-$v-layout-margin-top:           round($v-unit-size)             !default;
-$v-layout-margin-right:         round($v-unit-size)             !default;
-$v-layout-margin-bottom:        round($v-unit-size)             !default;
-$v-layout-margin-left:          round($v-unit-size)             !default;
+$v-layout-margin-top              : round($v-unit-size)                         !default;
+$v-layout-margin-right            : round($v-unit-size)                         !default;
+$v-layout-margin-bottom           : round($v-unit-size)                         !default;
+$v-layout-margin-left             : round($v-unit-size)                         !default;
 
-$v-layout-spacing-vertical:     round($v-unit-size/3)           !default;
-$v-layout-spacing-horizontal:   round($v-unit-size/3)           !default;
+$v-layout-spacing-vertical        : round($v-unit-size/3)                       !default;
+$v-layout-spacing-horizontal      : round($v-unit-size/3)                       !default;
 
-$v-border-width:                1px                             !default; // Must be specified in pixels
-$v-border-radius:               4px                             !default; // Must be specified in pixels
+$v-border                         : 1px solid (v-shade 0.7)                     !default; // Size must be specified in pixels
+$v-border-radius                  : 4px                                         !default; // Must be specified in pixels
 
-$v-gradient-style:              v-linear                        !default;
-$v-gradient-depth:              8%                              !default;
+$v-gradient                       : v-linear 8%                                 !default;
 
-$v-bevel-style:                 inset 0 1px 0 v-hilite, inset 0 -1px 0 v-shade !default;
-$v-bevel-depth:                 25%                             !default;
+$v-bevel                          : inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default;
+$v-bevel-depth                    : 25%                                         !default;
 
-$v-shadow-style:                0 2px 3px v-shade               !default;
-$v-shadow-depth:                5%                              !default;
+$v-shadow                         : 0 2px 3px v-shade                           !default;
+$v-shadow-opacity                 : 5%                                          !default;
 
-$v-focus-style:                 0 0 0 2px v-focus-color         !default;
-$v-focus-color:                 null                            !default;
+$v-focus-color                    : null                                        !default;
+$v-focus-style                    : 0 0 0 2px rgba(valo-focus-color(), .5)      !default;
+$v-focus-color                    : valo-focus-color()                          !default;
 
-$v-animations-enabled:          true                            !default;
-$v-hover-styles-enabled:        true                            !default;
+$v-animations-enabled             : true                                        !default;
+$v-hover-styles-enabled           : true                                        !default;
 
-$v-disabled-opacity:            0.7                             !default;
+$v-disabled-opacity               : 0.5                                         !default;
 
-$v-selection-color:             null                            !default;
+$v-selection-color                : valo-focus-color()                          !default;
 
-$v-default-field-width:         $v-unit-size * 5                !default;
+$v-default-field-width            : $v-unit-size * 5                            !default;
 
-$v-error-indicator-color:       #ed473b                         !default;
-$v-required-field-indicator-color: $v-error-indicator-color     !default;
+$v-error-indicator-color          : #ed473b                                     !default;
+$v-required-field-indicator-color : $v-error-indicator-color                    !default;
 
 
 
 
-$valo-include-common-stylenames: true                         !default;
+$valo-include-common-stylenames   : true                                        !default;