Split common-stylenames to individual component files (#14374)

Moved notification and valo-menu styles to the components folder as
well, and added them to the $v-included-components list.

Additional styles are now also controlled with a list variable, which
lists all components whose additional styles should be included in the
build.

Change-Id: Ifb8d49d71622decf8fa0d4875985fcafd908a1f8

27 files changed, 724 insertions, 638 deletions

diff --git a/WebContent/VAADIN/themes/valo/_valo.scss b/WebContent/VAADIN/themes/valo/_valo.scss
index b21cf733d1..f7d0534da1 100644
--- a/WebContent/VAADIN/themes/valo/_valo.scss
+++ b/WebContent/VAADIN/themes/valo/_valo.scss
@@ -44,10 +44,6 @@
 @import "components/all";
 
 
-// Import common additional style names for components (optional)
-@import "optional/common-stylenames";
-
-
 // Include global styles directly, without a theme name prefix (this is done only once)
 @include valo-global;
 
@@ -56,12 +52,4 @@
 @mixin valo {
   @include valo-common;
   @include valo-components;
-
-  @if v-is-included(notification) {
-    @include valo-notification;
-  }
-
-  @if $valo-include-common-stylenames {
-  	@include valo-common-stylenames;
-  }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss
index 350c704eb4..82a4396828 100644
--- a/WebContent/VAADIN/themes/valo/components/_accordion.scss
+++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss
@@ -1,4 +1,4 @@
-@mixin valo-accordion ($primary-stylename: v-accordion) {
+@mixin valo-accordion ($primary-stylename: v-accordion, $include-additional-styles: contains($v-included-additional-styles, accordion)) {
   .#{$primary-stylename} {
     @include valo-accordion-style;
   }
@@ -14,6 +14,20 @@
   .#{$primary-stylename}-item-content {
     @include valo-accordion-item-content-style;
   }
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      border: none;
+      border-radius: 0;
+      @include box-shadow(none);
+
+      > .#{$primary-stylename}-item {
+        border-radius: 0;
+      }
+    }
+
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss
index f20e8326bf..b41a2f3308 100644
--- a/WebContent/VAADIN/themes/valo/components/_all.scss
+++ b/WebContent/VAADIN/themes/valo/components/_all.scss
@@ -20,6 +20,7 @@
 @import "menubar";
 @import "nativebutton";
 @import "nativeselect";
+@import "notification";
 @import "optiongroup";
 @import "orderedlayout";
 @import "panel";
@@ -38,6 +39,7 @@
 @import "upload";
 @import "widget";
 @import "window";
+@import "valo-menu";
 
 
 @mixin valo-components {
@@ -207,4 +209,12 @@
     @include valo-upload;
   }
 
+  @if v-is-included(notification) {
+    @include valo-notification;
+  }
+
+  @if v-is-included(valo-menu) {
+    @include valo-menu;
+  }
+
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index 4930742dad..ec74f70eaf 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -1,8 +1,83 @@
-@mixin valo-button ($primary-stylename: v-button) {
+@mixin valo-button ($primary-stylename: v-button, $include-additional-styles: contains($v-included-additional-styles, button)) {
   .#{$primary-stylename} {
     @include valo-button-static-style;
     @include valo-button-style;
   }
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-primary {
+      @include valo-button-style($background-color: $v-selection-color);
+      $padding-width: round($v-unit-size/2);
+      padding: 0 $padding-width;
+      font-weight: bold;
+      $min-width: round($v-unit-size * 2.2);
+      min-width: $min-width;
+
+      // IE8 + border-box + min-width == fail
+      .v-ie8 & {
+        min-width: $min-width - ($padding-width * 2);
+      }
+    }
+
+    .#{$primary-stylename}-friendly {
+      @include valo-button-style($background-color: $v-friendly-color);
+    }
+
+    .#{$primary-stylename}-danger {
+      @include valo-button-style($background-color: $v-error-indicator-color);
+    }
+
+    .#{$primary-stylename}-borderless {
+      @include valo-button-borderless-style;
+    }
+
+    .#{$primary-stylename}-borderless-colored {
+      @include valo-button-borderless-style($font-color: $v-selection-color);
+    }
+
+    .#{$primary-stylename}-quiet {
+      @include valo-button-quiet-style;
+    }
+
+    .#{$primary-stylename}-link {
+      @include valo-button-borderless-style;
+      @include valo-link-style;
+    }
+
+    .#{$primary-stylename}-small {
+      @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null);
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null);
+    }
+
+    .#{$primary-stylename}-icon-align-right {
+      @include valo-button-icon-align-right-style;
+    }
+
+    .#{$primary-stylename}-icon-align-top {
+      @include valo-button-icon-align-top-style;
+    }
+
+    .#{$primary-stylename}-icon-only {
+      width: $v-unit-size;
+      padding: 0;
+
+      &.#{$primary-stylename}-small {
+        width: $v-unit-size--small;
+      }
+
+      &.#{$primary-stylename}-large {
+        width: $v-unit-size--large;
+      }
+
+      .#{$primary-stylename}-caption {
+        display: none;
+      }
+    }
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
index 0ee703c372..e74781fc46 100644
--- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
@@ -1,9 +1,22 @@
-@mixin valo-checkbox ($primary-stylename: v-checkbox) {
+@mixin valo-checkbox ($primary-stylename: v-checkbox, $include-additional-styles: contains($v-included-additional-styles, checkbox)) {
 
   .#{$primary-stylename} {
     @include valo-checkbox-style;
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-small {
+      @include valo-checkbox-style($unit-size: $v-unit-size--small);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-checkbox-style($unit-size: $v-unit-size--large);
+      font-size: $v-font-size--large;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 51ec65e55f..e514dc8e20 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -1,4 +1,4 @@
-@mixin valo-combobox ($primary-stylename: v-filterselect) {
+@mixin valo-combobox ($primary-stylename: v-filterselect, $include-additional-styles: contains($v-included-additional-styles, combobox)) {
 
   .#{$primary-stylename} {
     position: relative;
@@ -59,6 +59,35 @@
     }
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      .#{$primary-stylename}-input {
+        @include valo-textfield-borderless-style;
+      }
+      .#{$primary-stylename}-button {
+        border: none;
+      }
+    }
+
+    .#{$primary-stylename}-align-right input {
+      text-align: right;
+    }
+
+    .#{$primary-stylename}-align-center input {
+      text-align: center;
+    }
+
+    .#{$primary-stylename}-small {
+      @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
+      font-size: $v-font-size--large;
+    }
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss
index 3cefbb0a4b..ee7cd933c5 100644
--- a/WebContent/VAADIN/themes/valo/components/_csslayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_csslayout.scss
@@ -1,63 +1,74 @@
-@mixin valo-csslayout ($primary-stylename: v-csslayout){
+@mixin valo-csslayout ($primary-stylename: v-csslayout, $include-additional-styles: contains($v-included-additional-styles, csslayout)){
+  @if $include-additional-styles {
+    .#{$primary-stylename}-well {
+      @include valo-panel-well-style;
+      @include valo-panel-adjust-content-margins;
+    }
 
-}
+    .#{$primary-stylename}-card {
+      @include valo-panel-style;
+      @include valo-panel-adjust-content-margins;
+    }
 
+    .#{$primary-stylename}-v-component-group {
+      @include valo-component-group($primary-stylename);
+    }
+  }
+}
 
-@mixin valo-component-group ($primary-stylename: v-csslayout) {
-  .#{$primary-stylename}-v-component-group {
-    white-space: nowrap;
-    position: relative;
 
-    @if $v-border-radius > 0 {
-      .v-widget ~ .v-widget:not(:last-child) {
-        border-radius: 0;
-      }
+@mixin valo-component-group {
+  white-space: nowrap;
+  position: relative;
 
-      .v-widget:last-child {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
+  @if $v-border-radius > 0 {
+    .v-widget ~ .v-widget:not(:last-child) {
+      border-radius: 0;
+    }
 
-      .v-widget:first-child,
-      .v-caption:first-child + .v-widget {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
+    .v-widget:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
 
-      .v-widget ~ .v-widget.first.first {
-        border-radius: $v-border-radius 0 0 $v-border-radius;
-      }
+    .v-widget:first-child,
+    .v-caption:first-child + .v-widget {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
-      .v-widget ~ .v-widget.last.last {
-        border-radius: 0 $v-border-radius $v-border-radius 0;
-      }
+    .v-widget ~ .v-widget.first.first {
+      border-radius: $v-border-radius 0 0 $v-border-radius;
     }
 
-    // Assume most components have borders.
-    // This is just a best-guess, will need fine-tuning if border-widths vary from widget-to-widget
-    .v-widget {
-      vertical-align: middle;
+    .v-widget ~ .v-widget.last.last {
+      border-radius: 0 $v-border-radius $v-border-radius 0;
+    }
+  }
 
-      $v-border-width: first-number($v-border);
+  // Assume most components have borders.
+  // This is just a best-guess, will need fine-tuning if border-widths vary from widget-to-widget
+  .v-widget {
+    vertical-align: middle;
 
-      @if $v-border-width > 0 {
-        margin-left: -$v-border-width;
-      } @else {
-        margin-left: 1px;
-      }
+    $v-border-width: first-number($v-border);
 
-      &:first-child {
-        margin-left: 0;
-      }
+    @if $v-border-width > 0 {
+      margin-left: -$v-border-width;
+    } @else {
+      margin-left: 1px;
+    }
 
-      // Focused component should be on top
-      &:focus,
-      &[class*="focus"],
-      [class*="focus"] {
-        position: relative;
-        z-index: 5;
-      }
+    &:first-child {
+      margin-left: 0;
     }
 
+    // Focused component should be on top
+    &:focus,
+    &[class*="focus"],
+    [class*="focus"] {
+      position: relative;
+      z-index: 5;
+    }
   }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index b1f3a78af6..a2b67b3f8c 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -1,4 +1,4 @@
-@mixin valo-datefield ($primary-stylename: v-datefield) {
+@mixin valo-datefield ($primary-stylename: v-datefield, $include-additional-styles: contains($v-included-additional-styles, datefield)) {
 
   .#{$primary-stylename} {
     position: relative;
@@ -34,12 +34,42 @@
     width: round($v-font-size * 6.5);
   }
 
-  .v-datefield-popup {
+  .#{$primary-stylename}-popup {
     @include valo-datefield-popup-style;
   }
 
   @include valo-datefield-calendarpanel-style;
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      .#{$primary-stylename}-textfield {
+        @include valo-textfield-borderless-style;
+      }
+      .#{$primary-stylename}-button {
+        border: none;
+      }
+    }
+
+    .#{$primary-stylename}-align-right input {
+      text-align: right;
+    }
+
+    .#{$primary-stylename}-align-center input {
+      text-align: center;
+    }
+
+    .#{$primary-stylename}-small {
+      @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null);
+      font-size: $v-font-size--large;
+    }
+  }
+
 }
 
 
@@ -319,7 +349,7 @@
     @include valo-datefield-calendarpanel-month-style;
   }
 
-  .v-datefield-year td.v-datefield-calendarpanel-month {
+  .#{$primary-stylename}-year td.#{$primary-stylename}-month {
     width: round($v-unit-size * 2);
   }
 
@@ -350,12 +380,12 @@
     background: $v-app-background-color;
   }
 
-  td.v-datefield-calendarpanel-time {
+  td.#{$primary-stylename}-time {
     width: 100%;
     font-size: ceil($v-font-size * 0.86);
 
     .v-label {
-      display: inline-block;
+      display: inline;
       margin: 0 0.1em;
       font-weight: 400;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
index 33191e4a20..25dbfbef28 100644
--- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
@@ -1,4 +1,4 @@
-@mixin valo-formlayout ($primary-stylename: v-formlayout) {
+@mixin valo-formlayout ($primary-stylename: v-formlayout, $include-additional-styles: contains($v-included-additional-styles, formlayout)) {
 
   @include valo-formlayout-spacing;
   @include valo-formlayout-margins;
@@ -51,6 +51,11 @@
   }
 
 
+  @if $include-additional-styles {
+    .#{$primary-stylename}.light {
+      @include valo-formlayout-light-style($primary-stylename);
+    }
+  }
 
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index 502b640809..290d51fe9a 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -18,7 +18,7 @@ $v-letter-spacing--h3:    0               !default;
 $v-letter-spacing--h4:    0               !default;
 
 
-@mixin valo-label ($primary-stylename: v-label) {
+@mixin valo-label ($primary-stylename: v-label, $include-additional-styles: contains($v-included-additional-styles, label)) {
 
   .#{$primary-stylename}-undef-w {
     white-space: nowrap;
@@ -101,31 +101,67 @@ $v-letter-spacing--h4:    0               !default;
     }
   }
 
-  .#{$primary-stylename}-large {
-    font-size: $v-font-size--large;
-  }
 
-  .#{$primary-stylename}-small {
-    font-size: $v-font-size--small;
-  }
+  @if $include-additional-styles {
 
-  .#{$primary-stylename}-bold {
-    font-weight: $v-font-weight + 200;
-  }
+    .#{$primary-stylename}-large {
+      font-size: $v-font-size--large;
+    }
 
-  .#{$primary-stylename}-light {
-    font-weight: $v-font-weight - 100;
-    @if $v-font-weight < 400 {
-      color: valo-font-color($v-app-background-color, .5);
+    .#{$primary-stylename}-small {
+      font-size: $v-font-size--small;
     }
-  }
 
-  .#{$primary-stylename}-align-right {
-    text-align: right;
-  }
+    .#{$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);
+      }
+    }
 
-  .#{$primary-stylename}-align-center {
-    text-align: center;
+    .#{$primary-stylename}-align-right {
+      text-align: right;
+    }
+
+    .#{$primary-stylename}-align-center {
+      text-align: center;
+    }
+
+    .#{$primary-stylename}-spinner {
+      @include valo-spinner;
+    }
+
+    .#{$primary-stylename}-success,
+    .#{$primary-stylename}-failure {
+      background: #fff;
+      color: #555;
+      border: 2px solid $v-friendly-color;
+      border-radius: $v-border-radius;
+      padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
+      font-weight: $v-font-weight + 100;
+      font-size: round($v-font-size * 0.95);
+
+      &:before {
+        font-family: FontAwesome;
+        content: "\f00c";
+        margin-right: .5em;
+        margin-left: round($v-unit-size/-2);
+        color: $v-friendly-color;
+      }
+    }
+
+    .#{$primary-stylename}-failure {
+      border-color: $v-error-indicator-color;
+
+      &:before {
+        content: "\f05e";
+        color: $v-error-indicator-color;
+      }
+    }
   }
 
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_link.scss b/WebContent/VAADIN/themes/valo/components/_link.scss
index 129ffcca2f..680659b8b6 100644
--- a/WebContent/VAADIN/themes/valo/components/_link.scss
+++ b/WebContent/VAADIN/themes/valo/components/_link.scss
@@ -3,7 +3,7 @@ $v-link-text-decoration: underline !default;
 $v-link-cursor: pointer !default;
 
 
-@mixin valo-link ($primary-stylename: v-link) {
+@mixin valo-link ($primary-stylename: v-link, $include-additional-styles: contains($v-included-additional-styles, link)) {
   .#{$primary-stylename} {
     @include valo-link-style;
 
@@ -20,6 +20,16 @@ $v-link-cursor: pointer !default;
       cursor: inherit;
     }
   }
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-small {
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      font-size: $v-font-size--large;
+    }
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index 75b93b646f..e79e6898a9 100644
--- a/WebContent/VAADIN/themes/valo/components/_menubar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss
@@ -1,4 +1,4 @@
-@mixin valo-menubar ($primary-stylename: v-menubar) {
+@mixin valo-menubar ($primary-stylename: v-menubar, $include-additional-styles: contains($v-included-additional-styles, menubar)) {
 
   .#{$primary-stylename} {
     @include valo-button-static-style($states: normal, $vertical-centering: false);
@@ -70,6 +70,18 @@
     }
   }
 
+  
+  @if $include-additional-styles {
+    .#{$primary-stylename}-small {
+      @include valo-menubar-small-style($unit-size: $v-unit-size--small);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-borderless {
+      @include valo-menubar-borderless-style;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
index cfe4c19599..3cfa446f7d 100644
--- a/WebContent/VAADIN/themes/valo/shared/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/components/_notification.scss
@@ -1,11 +1,11 @@
 $v-notification-title-color: $v-focus-color !default;
 
 
-@mixin valo-notification ($primary-stylename: v-Notification) {
+@mixin valo-notification ($primary-stylename: v-Notification, $include-additional-styles: contains($v-included-additional-styles, notification)) {
 
   // Positional offsets
 
-  .v-Notification {
+  .#{$primary-stylename} {
     &.v-position-top {
       top: $v-layout-spacing-vertical;
     }
@@ -123,6 +123,78 @@ $v-notification-title-color: $v-focus-color !default;
   .#{$primary-stylename}.error {
     @include valo-notification-error-style;
   }
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}.dark {
+      @include valo-notification-dark-style;
+    }
+
+    .#{$primary-stylename}.bar {
+      @include valo-notification-bar-style;
+    }
+
+    .#{$primary-stylename}.small {
+      @include valo-notification-small-style;
+    }
+
+    .#{$primary-stylename}.closable {
+      @include valo-notification-closable-style;
+
+      &.dark,
+      &.error,
+      &.system {
+        &:after {
+          color: #fff;
+          border-color: #fff;
+          border-color: rgba(255,255,255,.3);
+        }
+        &:active:after {
+          background-color: #fff;
+          color: #000;
+        }
+      }
+
+      &.tray:after {
+        top: round($v-unit-size/2.3);
+        margin-top: 0;
+      }
+    }
+
+    .#{$primary-stylename}.success,
+    .#{$primary-stylename}.failure {
+      background: #fff;
+      color: #555;
+      border: 2px solid $v-friendly-color;
+
+      h1 {
+        color: $v-friendly-color;
+        font-weight: $v-font-weight + 100;
+
+        &:before {
+          font-family: FontAwesome;
+          content: "\f00c";
+          margin-right: .5em;
+        }
+      }
+
+      &.bar {
+        margin: -2px !important;
+      }
+    }
+
+    .#{$primary-stylename}.failure {
+      border-color: $v-error-indicator-color;
+
+      h1 {
+        color: $v-error-indicator-color;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+    }
+  }
 }
 
 
@@ -201,11 +273,11 @@ $v-notification-title-color: $v-focus-color !default;
     top: 0;
 
     @if $v-animations-enabled {
-      &.v-Notification-animate-in {
+      &[class*="animate-in"] {
         @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-down 200ms);
       }
 
-      &.v-Notification-animate-out {
+      &[class*="animate-out"] {
         @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-up 200ms);
       }
     }
@@ -215,18 +287,18 @@ $v-notification-title-color: $v-focus-color !default;
     bottom: 0;
 
     @if $v-animations-enabled {
-      &.v-Notification-animate-in {
+      &[class*="animate-in"] {
         @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-up 200ms);
       }
 
-      &.v-Notification-animate-out {
+      &[class*="animate-out"] {
         @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-down 200ms);
       }
     }
   }
 }
 
-@mixin valo-notification-system-style {
+@mixin valo-notification-dark-style {
   background-color: #444;
   background-color: rgba(#444, .9);
   font-weight: $v-font-weight + 100;
@@ -240,6 +312,10 @@ $v-notification-title-color: $v-focus-color !default;
   p {
     color: #e6e6e6;
   }
+}
+
+@mixin valo-notification-system-style {
+  @include valo-notification-dark-style;
 
   // No need to underline the "click here" text, let's imply that the whole banner is clickable
   u {
diff --git a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
index 71c67cd9d8..a058ad4e85 100644
--- a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
+++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
@@ -1,13 +1,30 @@
-@mixin valo-optiongroup ($primary-stylename: v-optiongroup) {
+@mixin valo-optiongroup ($primary-stylename: v-select-optiongroup, $include-additional-styles: contains($v-included-additional-styles, optiongroup)) {
 
   .v-radiobutton {
     @include valo-radiobutton-style;
   }
 
-  .v-select-optiongroup {
+  .#{$primary-stylename} {
     @include valo-optiongroup-style;
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-small {
+      @include valo-optiongroup-style($unit-size: $v-unit-size--small);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-optiongroup-style($unit-size: $v-unit-size--large);
+      font-size: $v-font-size--large;
+    }
+
+    .#{$primary-stylename}-horizontal {
+      @include valo-optiongroup-horizontal;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
index 1173ca3dbe..dbe2490826 100644
--- a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
@@ -140,7 +140,7 @@
 
 
 
-@mixin valo-orderedlayout {
+@mixin valo-orderedlayout ($include-additional-styles: contains($v-included-additional-styles, orderedlayout)) {
 
   .v-margin-top {
     padding-top: $v-layout-margin-top;
@@ -163,10 +163,28 @@
     height: $v-layout-spacing-vertical;
   }
 
+  @if $include-additional-styles {
+    .v-verticallayout-well,
+    .v-horizontallayout-well {
+      @include valo-panel-well-style;
+      @include valo-panel-adjust-content-margins;
+    }
+
+    .v-verticallayout-card,
+    .v-horizontallayout-card {
+      @include valo-panel-style;
+      @include valo-panel-adjust-content-margins;
+    }
+
+    .v-horizontallayout-wrapping {
+      @include valo-horizontallayout-wrapping-style;
+    }
+  }
+
 }
 
 
-@mixin valo-horizontallayout--wrapping {
+@mixin valo-horizontallayout-wrapping-style {
     white-space: normal !important;
 
     & > .v-spacing + .v-slot,
diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss
index 542c14ea64..075de3daeb 100644
--- a/WebContent/VAADIN/themes/valo/components/_panel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_panel.scss
@@ -1,7 +1,7 @@
 $v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default;
 $v-panel-border: $v-border !default;
 
-@mixin valo-panel ($primary-stylename: v-panel) {
+@mixin valo-panel ($primary-stylename: v-panel, $include-additional-styles: contains($v-included-additional-styles, panel)) {
 
   .#{$primary-stylename} {
     @include valo-panel-style;
@@ -19,6 +19,34 @@ $v-panel-border: $v-border !default;
     @include valo-panel-adjust-content-margins;
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      @include valo-panel-borderless-style;
+    }
+
+    .#{$primary-stylename}-well {
+      @include valo-panel-well-style;
+    }
+
+    .#{$primary-stylename}-scroll-divider {
+      @include valo-panel-scroll-divider-style;
+    }
+
+    .#{$primary-stylename}-caption.v-horizontallayout {
+      height: auto !important;
+      line-height: 0;
+
+      .v-slot {
+        vertical-align: middle;
+      }
+
+      .v-label {
+        line-height: $v-unit-size;
+      }
+    }
+  }
+
 }
 
 
@@ -68,7 +96,7 @@ $v-panel-border: $v-border !default;
   border-radius: $v-border-radius;
   border: valo-border();
 
-  > div > .v-panel-caption {
+  > div > [class*="-caption"] {
     background: transparent;
     @include box-shadow(none);
   }
@@ -83,7 +111,7 @@ $v-panel-border: $v-border !default;
   border-radius: 0;
   @include box-shadow(none);
 
-  > div > .v-panel-caption {
+  > div > [class*="-caption"] {
     background: transparent;
     @include box-shadow(none);
     color: inherit;
@@ -96,7 +124,7 @@ $v-panel-border: $v-border !default;
 
 
 @mixin valo-panel-scroll-divider-style ($border-width: max(1px, first-number($v-panel-border))) {
-  > .v-panel-captionwrap {
+  > [class*="-captionwrap"] {
     position: relative;
     z-index: 2;
 
@@ -111,7 +139,7 @@ $v-panel-border: $v-border !default;
     }
   }
 
-  > .v-panel-content {
+  > [class*="-content"] {
     &:before {
       content: "";
       position: absolute;
diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss
index b4785a8471..123712a8ee 100644
--- a/WebContent/VAADIN/themes/valo/components/_slider.scss
+++ b/WebContent/VAADIN/themes/valo/components/_slider.scss
@@ -8,7 +8,7 @@ $_valo-slider-base-margin-vertical: round(($v-unit-size - $v-slider-track-size)/
 $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 
 
-@mixin valo-slider ($primary-stylename: v-slider) {
+@mixin valo-slider ($primary-stylename: v-slider, $include-additional-styles: contains($v-included-additional-styles, slider)) {
 
   // Round to an even number
   $v-slider-track-size: $v-slider-track-size + $v-slider-track-size%2;
@@ -174,6 +174,13 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
     }
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-no-indicator {
+      @include valo-slider-no-indicator;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
index 27da1d9cc6..cd709e1df9 100644
--- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
@@ -1,4 +1,4 @@
-@mixin valo-splitpanel($primary-stylename : v-splitpanel) {
+@mixin valo-splitpanel($primary-stylename : v-splitpanel, $include-additional-styles: contains($v-included-additional-styles, splitpanel)) {
   .#{$primary-stylename}-horizontal {
     @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: horizontal);
   }
@@ -6,6 +6,16 @@
   .#{$primary-stylename}-vertical {
     @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: vertical);
   }
+  
+  @if $include-additional-styles {
+    .#{$primary-stylename}-horizontal.large {
+      @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true, $orientation: horizontal);
+    }
+    
+    .#{$primary-stylename}-vertical.large {
+      @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true, $orientation: vertical);
+    }
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index 2335c59873..3644e482f2 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -60,7 +60,7 @@ $v-table-background-color: null !default;
 }
 
 
-@mixin valo-table ($primary-stylename: v-table) {
+@mixin valo-table ($primary-stylename: v-table, $include-additional-styles: contains($v-included-additional-styles, table)) {
 
   $background-color: $v-table-background-color or valo-table-background-color();
   $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.8));
@@ -72,9 +72,9 @@ $v-table-background-color: null !default;
     color: valo-font-color($v-background-color);
   }
 
-  .v-table-header table,
-  .v-table-footer table,
-  .v-table-table {
+  .#{$primary-stylename}-header table,
+  .#{$primary-stylename}-footer table,
+  .#{$primary-stylename}-table {
     @include box-shadow(0 0 0 $v-table-border-width $border-color);
 
     .v-ie8 & {
@@ -178,6 +178,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-cell-wrapper {
     line-height: 1;
+    min-height: $v-table-row-height;
     $vertical-padding: round(($v-table-row-height - $v-font-size)/2);
     padding: $vertical-padding $v-table-cell-padding-horizontal;
     @include box-sizing(border-box);
@@ -472,6 +473,44 @@ $v-table-background-color: null !default;
     line-height: 0;
   }
 
+
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-no-stripes {
+      @include valo-table-no-stripes-style;
+    }
+
+    .#{$primary-stylename}-no-vertical-lines {
+      @include valo-table-no-vertical-lines-style;
+    }
+
+    .#{$primary-stylename}-no-horizontal-lines {
+      @include valo-table-no-horizontal-lines-style;
+    }
+
+    .#{$primary-stylename}-no-header {
+      @include valo-table-no-header-style;
+    }
+
+    .#{$primary-stylename}-borderless {
+      @include valo-table-borderless-style;
+    }
+
+    .#{$primary-stylename}-compact,
+    .#{$primary-stylename}-small {
+      @include valo-table-spacing-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
+    }
+
+    .#{$primary-stylename}-small {
+      font-size: $v-font-size--small;
+
+      &.v-treetable .#{$primary-stylename}-cell-wrapper {
+        min-height: $v-font-size--small;
+      }
+    }
+  }
+
 }
 
 
@@ -600,6 +639,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-cell-wrapper {
     padding: $vertical-padding $cell-padding-horizontal;
+    min-height: $row-height;
 
     > .v-widget {
       margin: round($vertical-padding / -2) round($cell-padding-horizontal / -2);
@@ -624,6 +664,7 @@ $v-table-background-color: null !default;
     .#{$primary-stylename}-cell-wrapper {
       padding-left: 0;
       padding-right: 0;
+      min-height: $v-font-size;
     }
 
     .#{$primary-stylename}-cell-content {
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index 2e28174fa7..7f2421b5ff 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -51,7 +51,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 
-@mixin valo-tabsheet ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet ($primary-stylename: v-tabsheet, $include-additional-styles: contains($v-included-additional-styles, tabsheet)) {
   .#{$primary-stylename} {
     &:not(.v-has-width) {
       width: auto !important;
@@ -119,6 +119,43 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     }
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-equal-width-tabs {
+      @include valo-tabsheet-equal-width-tabs-style($flex: false);
+    }
+
+    .#{$primary-stylename}-framed {
+      @include valo-tabsheet-framed-style;
+    }
+
+    .#{$primary-stylename}-centered-tabs {
+      @include valo-tabsheet-align-tabs-style($align: center);
+    }
+
+    .#{$primary-stylename}-right-aligned-tabs {
+      @include valo-tabsheet-align-tabs-style($align: right);
+    }
+
+    .#{$primary-stylename}-padded-tabbar {
+      @include valo-tabsheet-padded-tabbar-style;
+    }
+
+    .#{$primary-stylename}-icons-on-top {
+      @include valo-tabsheet-icons-on-top-style;
+    }
+
+    .#{$primary-stylename}-compact-tabbar {
+      > .#{$primary-stylename}-tabcontainer-compact-tabbar .v-caption {
+        line-height: 1.8;
+      }
+    }
+
+    .#{$primary-stylename}-only-selected-closable {
+      @include valo-tabsheet-only-selected-closable-style;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss
index 79bdb04d3c..4c5d99b8e2 100644
--- a/WebContent/VAADIN/themes/valo/components/_textarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss
@@ -1,4 +1,4 @@
-@mixin valo-textarea ($primary-stylename: v-textarea) {
+@mixin valo-textarea ($primary-stylename: v-textarea, $include-additional-styles: contains($v-included-additional-styles, textarea)) {
 
   .#{$primary-stylename} {
     @include valo-textarea-style;
@@ -13,6 +13,31 @@
     @include valo-textfield-error-style;
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      @include valo-textfield-borderless-style;
+    }
+
+    .#{$primary-stylename}-small {
+      @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-textarea-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--large;
+    }
+
+    .#{$primary-stylename}-align-right {
+      text-align: right;
+    }
+
+    .#{$primary-stylename}-align-center {
+      text-align: center;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index 39dfa3420e..75cfc5ef85 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -9,7 +9,51 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
+@mixin valo-textfield ($primary-stylename: v-textfield, $include-additional-styles: contains($v-included-additional-styles, textfield)) {
 
+  .#{$primary-stylename} {
+    @include valo-textfield-style;
+    width: $v-default-field-width;
+  }
+
+  .#{$primary-stylename}-readonly {
+    @include valo-textfield-readonly-style;
+  }
+
+  .#{$primary-stylename}-error {
+    @include valo-textfield-error-style;
+  }
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      @include valo-textfield-borderless-style;
+    }
+
+    .#{$primary-stylename}-small {
+      @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-textfield-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--large;
+    }
+
+    @include valo-textfield-inline-icon($stylenames: inline-icon);
+    @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
+    @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
+
+    .#{$primary-stylename}-align-right {
+      text-align: right;
+    }
+
+    .#{$primary-stylename}-align-center {
+      text-align: center;
+    }
+  }
+
+}
 
 
 
@@ -94,8 +138,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
   }
 
   // TODO allow parent selector to be used in interpolation
-  &.v-textfield-prompt,
-  &.v-textarea-prompt {
+  &[class*="prompt"] {
     @include valo-textfield-prompt-style($background-color);
   }
 
@@ -144,24 +187,6 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
-@mixin valo-textfield ($primary-stylename: v-textfield) {
-
-  .#{$primary-stylename} {
-    @include valo-textfield-style;
-    width: $v-default-field-width;
-  }
-
-  .#{$primary-stylename}-readonly {
-    @include valo-textfield-readonly-style;
-  }
-
-  .#{$primary-stylename}-error {
-    @include valo-textfield-error-style;
-  }
-
-}
-
-
 
 @mixin valo-textfield-borderless-style ($background-color: transparent) {
   border: none;
diff --git a/WebContent/VAADIN/themes/valo/components/_treetable.scss b/WebContent/VAADIN/themes/valo/components/_treetable.scss
index 0423b37ab1..41ef9060c7 100644
--- a/WebContent/VAADIN/themes/valo/components/_treetable.scss
+++ b/WebContent/VAADIN/themes/valo/components/_treetable.scss
@@ -8,6 +8,10 @@
       padding-right: 0;
     }
 
+    [class*="cell-wrapper"] {
+      min-height: $v-font-size;
+    }
+
     [class*="caption-container"] {
       padding-left: $v-table-cell-padding-horizontal;
     }
diff --git a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
index 8bd26e2b10..8bd26e2b10 100644
--- a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss
+++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
deleted file mode 100644
index 09d29b7d9f..0000000000
--- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
+++ /dev/null
@@ -1,441 +0,0 @@
-// Common styles for components
-// About 90KB of CSS output
-
-@import "valo-menu";
-
-@mixin valo-common-stylenames {
-
-  $v-scaling-factor--small: 0.8 !default;
-  $v-scaling-factor--large: 1.2 !default;
-
-  $v-unit-size--small: ceil($v-unit-size * $v-scaling-factor--small);
-  $v-unit-size--large: ceil($v-unit-size * $v-scaling-factor--large);
-
-  $v-font-size--small: ceil($v-font-size * $v-scaling-factor--small);
-  $v-font-size--large: ceil($v-font-size * $v-scaling-factor--large);
-
-  $v-friendly-color: #2c9720;
-
-
-  .v-button-primary {
-    @include valo-button-style($background-color: $v-selection-color);
-    $padding-width: round($v-unit-size/2);
-    padding: 0 $padding-width;
-    font-weight: bold;
-    $min-width: round($v-unit-size * 2.2);
-		min-width: $min-width;
-
-    // IE8 + border-box + min-width == fail
-    .v-ie8 & {
-      min-width: $min-width - $padding-width*2;
-    }
-  }
-
-  .v-button-friendly {
-    @include valo-button-style($background-color: $v-friendly-color);
-  }
-
-  .v-button-danger {
-    @include valo-button-style($background-color: $v-error-indicator-color);
-  }
-
-  .v-button-borderless {
-    @include valo-button-borderless-style;
-  }
-
-  .v-button-borderless-colored {
-    @include valo-button-borderless-style($font-color: $v-selection-color);
-  }
-
-  .v-button-quiet {
-    @include valo-button-quiet-style;
-  }
-
-  .v-button-link {
-    @include valo-button-borderless-style;
-    @include valo-link-style;
-  }
-
-  .v-button-small {
-    @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null);
-  }
-
-  .v-button-large {
-    @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null);
-  }
-
-  .v-button-icon-align-right {
-    @include valo-button-icon-align-right-style;
-  }
-
-  .v-button-icon-align-top {
-    @include valo-button-icon-align-top-style;
-  }
-
-  .v-button-icon-only {
-    width: $v-unit-size;
-    padding: 0;
-
-    &.v-button-small {
-      width: $v-unit-size--small;
-    }
-
-    &.v-button-large {
-      width: $v-unit-size--large;
-    }
-
-    .v-button-caption {
-      display: none;
-    }
-  }
-
-  .v-link-small {
-    font-size: $v-font-size--small;
-  }
-
-  .v-link-large {
-    font-size: $v-font-size--large;
-  }
-
-  .v-tabsheet-equal-width-tabs {
-    @include valo-tabsheet-equal-width-tabs-style($flex: false);
-  }
-
-  .v-tabsheet-framed {
-    @include valo-tabsheet-framed-style;
-  }
-
-  .v-tabsheet-centered-tabs {
-    @include valo-tabsheet-align-tabs-style($align: center);
-  }
-
-  .v-tabsheet-right-aligned-tabs {
-    @include valo-tabsheet-align-tabs-style($align: right);
-  }
-
-  .v-tabsheet-padded-tabbar {
-    @include valo-tabsheet-padded-tabbar-style;
-  }
-
-  .v-tabsheet-icons-on-top {
-    @include valo-tabsheet-icons-on-top-style;
-  }
-
-  .v-tabsheet-compact-tabbar {
-    > .v-tabsheet-tabcontainer-compact-tabbar .v-caption {
-      line-height: 1.8;
-    }
-  }
-
-  .v-tabsheet-only-selected-closable {
-    @include valo-tabsheet-only-selected-closable-style;
-  }
-
-  .v-panel-borderless {
-    @include valo-panel-borderless-style;
-  }
-
-  .v-formlayout.light {
-    @include valo-formlayout-light-style;
-  }
-
-  .v-textfield-borderless,
-  .v-textarea-borderless,
-  .v-datefield-borderless .v-datefield-textfield,
-  .v-filterselect-borderless .v-filterselect-input {
-    @include valo-textfield-borderless-style;
-  }
-
-  .v-datefield-borderless .v-datefield-button,
-  .v-filterselect-borderless .v-filterselect-button {
-    border: none;
-  }
-
-  .v-textfield-small {
-    @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
-    font-size: $v-font-size--small;
-  }
-
-  .v-textfield-large {
-    @include valo-textfield-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
-    font-size: $v-font-size--large;
-  }
-
-  @include valo-textfield-inline-icon($stylenames: inline-icon);
-  @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
-  @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
-
-  .v-textarea-small {
-    @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
-    font-size: $v-font-size--small;
-  }
-
-  .v-textarea-large {
-    @include valo-textarea-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
-    font-size: $v-font-size--large;
-  }
-
-  .v-textfield-align-right,
-  .v-textarea-align-right,
-  .v-datefield-align-right input,
-  .v-filterselect-align-right input {
-    text-align: right;
-  }
-
-  .v-textfield-align-center,
-  .v-textarea-align-center,
-  .v-datefield-align-center input,
-  .v-filterselect-align-center input {
-    text-align: center;
-  }
-
-  .v-filterselect-small {
-    @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
-    font-size: $v-font-size--small;
-  }
-
-  .v-filterselect-large {
-    @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
-    font-size: $v-font-size--large;
-  }
-
-  .v-datefield-small {
-    @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null);
-    font-size: $v-font-size--small;
-  }
-
-  .v-datefield-large {
-    @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null);
-    font-size: $v-font-size--large;
-  }
-
-  .v-checkbox-small {
-    @include valo-checkbox-style($unit-size: $v-unit-size--small);
-    font-size: $v-font-size--small;
-  }
-
-  .v-checkbox-large {
-    @include valo-checkbox-style($unit-size: $v-unit-size--large);
-    font-size: $v-font-size--large;
-  }
-
-  .v-select-optiongroup-small {
-    @include valo-optiongroup-style($unit-size: $v-unit-size--small);
-    font-size: $v-font-size--small;
-  }
-
-  .v-select-optiongroup-large {
-    @include valo-optiongroup-style($unit-size: $v-unit-size--large);
-    font-size: $v-font-size--large;
-  }
-
-  .v-label-spinner {
-    @include valo-spinner;
-  }
-
-  .v-panel-well {
-    @include valo-panel-well-style;
-  }
-
-  .v-panel-borderless {
-    @include valo-panel-borderless-style;
-  }
-
-  .v-panel-scroll-divider {
-    @include valo-panel-scroll-divider-style;
-  }
-
-  .v-csslayout-well,
-  .v-verticallayout-well,
-  .v-horizontallayout-well {
-    @include valo-panel-well-style;
-    @include valo-panel-adjust-content-margins;
-  }
-
-  .v-csslayout-card,
-  .v-verticallayout-card,
-  .v-horizontallayout-card {
-    @include valo-panel-style;
-    @include valo-panel-adjust-content-margins;
-  }
-
-  .v-splitpanel-horizontal.large,
-  .v-splitpanel-vertical.large {
-    @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true);
-  }
-
-  .v-menubar-small {
-    @include valo-menubar-small-style($unit-size: $v-unit-size--small);
-    font-size: $v-font-size--small;
-  }
-
-  .v-menubar-borderless {
-    @include valo-menubar-borderless-style;
-  }
-
-  @include valo-component-group;
-
-  .wrapping {
-    @include valo-horizontallayout--wrapping;
-  }
-
-  .v-Notification.bar {
-    @include valo-notification-bar-style;
-  }
-
-  .v-Notification.small {
-    @include valo-notification-small-style;
-  }
-
-  .v-Notification.closable {
-    @include valo-notification-closable-style;
-
-    &.error,
-    &.system {
-      &:after {
-        color: #fff;
-        border-color: #fff;
-        border-color: rgba(255,255,255,.3);
-      }
-      &:active:after {
-        background-color: #fff;
-        color: #000;
-      }
-    }
-
-    &.tray:after {
-      top: round($v-unit-size/2.3);
-      margin-top: 0;
-    }
-  }
-
-  .v-Notification.success,
-  .v-Notification.failure {
-		background: #fff;
-		color: #555;
-    border: 2px solid $v-friendly-color;
-
-    h1 {
-      color: $v-friendly-color;
-      font-weight: $v-font-weight + 100;
-
-      &:before {
-        font-family: FontAwesome;
-        content: "\f00c";
-        margin-right: .5em;
-      }
-    }
-
-    &.bar {
-      margin: -2px !important;
-    }
-  }
-
-  .v-Notification.failure {
-    border-color: $v-error-indicator-color;
-
-    h1 {
-      color: $v-error-indicator-color;
-
-      &:before {
-        content: "\f05e";
-      }
-    }
-  }
-
-  .v-label-success,
-  .v-label-failure {
-    background: #fff;
-    color: #555;
-    border: 2px solid $v-friendly-color;
-    border-radius: $v-border-radius;
-    padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
-    font-weight: $v-font-weight + 100;
-    font-size: round($v-font-size * 0.95);
-
-    &:before {
-      font-family: FontAwesome;
-      content: "\f00c";
-      margin-right: .5em;
-      margin-left: round($v-unit-size/-2);
-      color: $v-friendly-color;
-    }
-  }
-
-  .v-label-failure {
-    border-color: $v-error-indicator-color;
-
-    &:before {
-      content: "\f05e";
-      color: $v-error-indicator-color;
-    }
-  }
-
-
-  .v-panel-caption.v-horizontallayout {
-    height: auto !important;
-    line-height: 0;
-
-    .v-slot {
-      vertical-align: middle;
-    }
-
-    .v-label {
-      line-height: $v-unit-size;
-    }
-  }
-
-
-  .v-select-optiongroup-horizontal {
-    @include valo-optiongroup-horizontal;
-  }
-
-
-  .v-table-no-stripes {
-    @include valo-table-no-stripes-style;
-  }
-
-  .v-table-no-vertical-lines {
-    @include valo-table-no-vertical-lines-style;
-  }
-
-  .v-table-no-horizontal-lines {
-    @include valo-table-no-horizontal-lines-style;
-  }
-
-  .v-table-no-header {
-    @include valo-table-no-header-style;
-  }
-
-  .v-table-borderless {
-    @include valo-table-borderless-style;
-  }
-
-  .v-table-compact,
-  .v-table-small {
-    @include valo-table-spacing-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
-  }
-
-  .v-table-small {
-    font-size: $v-font-size--small;
-  }
-
-
-  .v-accordion-borderless {
-    border: none;
-    border-radius: 0;
-    @include box-shadow(none);
-
-    > .v-accordion-item {
-      border-radius: 0;
-    }
-  }
-
-  .v-slider-no-indicator {
-    @include valo-slider-no-indicator;
-  }
-
-
-	@include valo-menu;
-
-}
diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss
index ad5b9297cf..7b7e63489a 100644
--- a/WebContent/VAADIN/themes/valo/shared/_global.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_global.scss
@@ -1,15 +1,12 @@
 @import "loading-indicator";
 @import "contextmenu";
 @import "overlay";
-@import "notification";
 @import "tooltip";
 
 
-$v-app-background-color: $v-background-color !default;
-
-
 // Include global styles only once
 $valo-global-included: false !default;
+
 @mixin valo-global {
   @if $valo-global-included == false {
 
diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss
index 8adc3667d3..b1c113b2cc 100644
--- a/WebContent/VAADIN/themes/valo/shared/_variables.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss
@@ -1,66 +1,7 @@
-// @category  Common
-
 // Color functions are used to calculate default font color
 @import "../util/color";
 
 
-// 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.
-//
-// @usage
-// // Remove the Calendar component styles from the output
-// $v-included-components: remove($v-included-components, calendar);
-$v-included-components:
-    absolutelayout,
-    accordion,
-    button,
-    calendar,
-    checkbox,
-    colorpicker,
-    combobox,
-    csslayout,
-    customcomponent,
-    customlayout,
-    datefield,
-    dragwrapper,
-    form,
-    formlayout,
-    grid,
-    gridlayout,
-    label,
-    link,
-    menubar,
-    nativebutton,
-    nativeselect,
-    notification,
-    optiongroup,
-    orderedlayout,
-    panel,
-    popupview,
-    progressbar,
-    slider,
-    splitpanel,
-    table,
-    tabsheet,
-    textfield,
-    textarea,
-    richtextarea,
-    tree,
-    treetable,
-    twincolselect,
-    upload,
-    window !default;
-
-
-// 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.
-// @param     $component-name {String} the name of the component to check
-// @param     $is-included {list} (Optional) the list of components which is checked
-// @return    {Boolean} true if the component is included in the compilation, false if not
-@function v-is-included ($component-name, $is-included: $v-included-components) {
-  @return contains($is-included, $component-name);
-}
-
 
 // A static text that is shown while the application JavaScript is loaded and started
 $v-app-loading-text               : ""                                          !default;
@@ -116,13 +57,81 @@ $v-default-field-width            : $v-unit-size * 5
 
 $v-error-indicator-color          : #ed473b                                     !default;
 $v-required-field-indicator-color : $v-error-indicator-color                    !default;
+$v-friendly-color                 : #2c9720                                     !default;
+
 
+$v-scaling-factor--small          : 0.8                                         !default;
+$v-scaling-factor--large          : 1.2                                         !default;
 
+$v-unit-size--small               : round($v-unit-size * $v-scaling-factor--small) !default;
+$v-unit-size--large               : round($v-unit-size * $v-scaling-factor--large) !default;
 
+$v-font-size--small               : round($v-font-size * $v-scaling-factor--small) !default;
+$v-font-size--large               : round($v-font-size * $v-scaling-factor--large) !default;
 
-$valo-include-common-stylenames   : true                                        !default;
 
 
+// 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.
+//
+// @usage
+// // Remove the Calendar component styles from the output
+// $v-included-components: remove($v-included-components, calendar);
+$v-included-components:
+    absolutelayout,
+    accordion,
+    button,
+    calendar,
+    checkbox,
+    colorpicker,
+    combobox,
+    csslayout,
+    customcomponent,
+    customlayout,
+    datefield,
+    dragwrapper,
+    form,
+    formlayout,
+    grid,
+    gridlayout,
+    label,
+    link,
+    menubar,
+    nativebutton,
+    nativeselect,
+    notification,
+    optiongroup,
+    orderedlayout,
+    panel,
+    popupview,
+    progressbar,
+    slider,
+    splitpanel,
+    table,
+    tabsheet,
+    textfield,
+    textarea,
+    richtextarea,
+    tree,
+    treetable,
+    twincolselect,
+    upload,
+    window,
+    valo-menu !default;
+
+
+$v-included-additional-styles: $v-included-components !default;
+
+
+// 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.
+// @param     $component-name {String} the name of the component to check
+// @param     $is-included {list} (Optional) the list of components which is checked
+// @return    {Boolean} true if the component is included in the compilation, false if not
+@function v-is-included ($component-name, $is-included: $v-included-components) {
+  @return contains($is-included, $component-name);
+}
+
 
 
 // A flag to note whether relative URL paths are relative to the currently parsed SCSS file or to the compilation root file.