Replaced 'v-valo' prefix with just 'valo'

Mass find-and-replace, tested that the theme works as before.

Fixes #13686

Change-Id: I99dfed995f288d1b37a1ac425932bba95dfae994

WebContent/VAADIN/themes/valo/_valo.scss

@@ -53,16 +53,16 @@
 
 
 // Include global styles directly, without a theme name prefix (this is done only once)
-@include v-valo-global;
+@include valo-global;
 
 
 // The main theme mixin
 @mixin v-valo {
-  @include v-valo-common;
-  @include v-valo-components;
-  @include v-valo-notification;
+  @include valo-common;
+  @include valo-components;
+  @include valo-notification;
 
-  @if $v-valo-include-common-stylenames {
-  	@include v-valo-common-stylenames;
+  @if $valo-include-common-stylenames {
+  	@include valo-common-stylenames;
   }
 }

WebContent/VAADIN/themes/valo/components/_absolutelayout.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-absolutelayout ($primary-stylename: v-absolutelayout) {
+@mixin valo-absolutelayout ($primary-stylename: v-absolutelayout) {
   
   .#{$primary-stylename}-wrapper {
     position: absolute;

WebContent/VAADIN/themes/valo/components/_accordion.scss

@@ -2,10 +2,10 @@ $v-accordion-content-shadow-style: join(inset, $v-shadow-style) !default;
 $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default;
 
 
-@mixin v-valo-accordion ($primary-stylename: v-accordion) {
+@mixin valo-accordion ($primary-stylename: v-accordion) {
   .#{$primary-stylename} {
-    @include v-valo-panel-style;
-    @include v-valo-gradient($color: $v-app-background-color, $depth: $v-gradient-depth/2);
+    @include valo-panel-style;
+    @include valo-gradient($color: $v-app-background-color, $depth: $v-gradient-depth/2);
     overflow: hidden;
   }
 
@@ -25,10 +25,10 @@ $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default;
   }
 
   .#{$primary-stylename}-item-caption .v-caption {
-    @include v-valo-panel-caption-style;
+    @include valo-panel-caption-style;
     display: block;
     background: transparent;
-    border-bottom-color: v-valo-panel-border-color($background-color: v-valo-panel-background-color());
+    border-bottom-color: valo-panel-border-color($background-color: valo-panel-background-color());
     cursor: pointer;
     @include user-select(none);;
 
@@ -44,13 +44,13 @@ $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default;
 
     @if $v-hover-styles-enabled {
       &:hover:before {
-        @include v-valo-button-hover-style;
+        @include valo-button-hover-style;
         border: none;
       }
     }
 
     &:active:before {
-      @include v-valo-button-active-style;
+      @include valo-button-active-style;
     }
   }
 
@@ -63,13 +63,13 @@ $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default;
     width: 100%;
     bottom: 0;
     right: 0;
-    box-shadow: v-valo-shadow($shadow-style: $v-accordion-content-shadow-style, $shadow-depth: $v-accordion-content-shadow-depth);
-    background-color: v-valo-panel-background-color();
+    box-shadow: valo-shadow($shadow-style: $v-accordion-content-shadow-style, $shadow-depth: $v-accordion-content-shadow-depth);
+    background-color: valo-panel-background-color();
     @include box-sizing(border-box);
-    @include v-valo-panel-adjust-content-margins;
+    @include valo-panel-adjust-content-margins;
   }
 
   .#{$primary-stylename}-item-open + .#{$primary-stylename}-item {
-    border-top: $v-panel-border-width solid v-valo-panel-border-color($background-color: v-valo-panel-background-color());
+    border-top: $v-panel-border-width solid valo-panel-border-color($background-color: valo-panel-background-color());
   }
 }

WebContent/VAADIN/themes/valo/components/_all.scss

@@ -41,172 +41,172 @@
 @import "dragwrapper";
 
 
-@mixin v-valo-components {
+@mixin valo-components {
   
   @if v-is-included(absolutelayout) {
-    @include v-valo-absolutelayout;
+    @include valo-absolutelayout;
   }
   
   @if v-is-included(orderedlayout) {
-    @include v-valo-orderedlayout;
+    @include valo-orderedlayout;
   }
     
   @if v-is-included(button) {
-    @include v-valo-button;
+    @include valo-button;
   }
   
   @if v-is-included(checkbox) or v-is-included(optiongroup) {
-    @include v-valo-checkbox;
+    @include valo-checkbox;
   }
   
   @if v-is-included(combobox) {
-    @include v-valo-combobox;
+    @include valo-combobox;
   }
   
   @if v-is-included(csslayout) {
-    @include v-valo-csslayout;
+    @include valo-csslayout;
   }
   
   @if v-is-included(customcomponent) {
-    @include v-valo-customcomponent;
+    @include valo-customcomponent;
   }
   
   @if v-is-included(customlayout) {
-    @include v-valo-customlayout;
+    @include valo-customlayout;
   }
   
   @if v-is-included(form) {
-    @include v-valo-form;
+    @include valo-form;
   }
   
   @if v-is-included(formlayout) {
-    @include v-valo-formlayout;
+    @include valo-formlayout;
   }
   
   @if v-is-included(grid) {
-    @include v-valo-grid(v-escalator);
+    @include valo-grid(v-escalator);
   }
   
   @if v-is-included(textfield) {
-    @include v-valo-textfield;
+    @include valo-textfield;
   }
   
   @if v-is-included(textarea) {
-    @include v-valo-textarea;
+    @include valo-textarea;
   }
   
   @if v-is-included(datefield) {
-    @include v-valo-datefield;
-    @include v-valo-inline-datefield;
+    @include valo-datefield;
+    @include valo-inline-datefield;
   }
   
   @if v-is-included(orderedlayout) {
-    @include v-valo-orderedlayout;
+    @include valo-orderedlayout;
   }
   
   @if v-is-included(gridlayout) {
-    @include v-valo-gridlayout;
+    @include valo-gridlayout;
   }
   
   @if v-is-included(menubar) {
-    @include v-valo-menubar;
+    @include valo-menubar;
   }
   
   @if v-is-included(optiongroup) {
-    @include v-valo-optiongroup;
+    @include valo-optiongroup;
   }
   
   @if v-is-included(link) {
-    @include v-valo-link;
+    @include valo-link;
   }
   
   @if v-is-included(window) {
-    @include v-valo-window;
+    @include valo-window;
   }
   
   @if v-is-included(tree) {
-    @include v-valo-tree;
+    @include valo-tree;
   }
   
   @if v-is-included(table) or v-is-included(treetable) {
-    @include v-valo-table;
+    @include valo-table;
   }
   
   @if v-is-included(treetable) {
-    @include v-valo-treetable;
+    @include valo-treetable;
   }
   
   @if v-is-included(splitpanel) {
-    @include v-valo-splitpanel;
+    @include valo-splitpanel;
   }
   
   @if v-is-included(progressbar) or v-is-included(progressindicator) {
-    @include v-valo-progressbar;
-    @include v-valo-progressbar(v-progressindicator);
+    @include valo-progressbar;
+    @include valo-progressbar(v-progressindicator);
   }
   
   @if v-is-included(slider) {
-    @include v-valo-slider;
+    @include valo-slider;
   }
   
   @if v-is-included(tabsheet) {
-    @include v-valo-tabsheet;
+    @include valo-tabsheet;
   }
   
   @if v-is-included(colorpicker) {
-    @include v-valo-colorpicker;
+    @include valo-colorpicker;
   }
   
   @if v-is-included(panel) {
-    @include v-valo-panel;
+    @include valo-panel;
   }
   
   @if v-is-included(accordion) {
-    @include v-valo-accordion;
+    @include valo-accordion;
   }
   
   @if v-is-included(twincolselect) {
-    @include v-valo-twincolselect;
+    @include valo-twincolselect;
   }
   
   @if v-is-included(nativeselect) {
-    @include v-valo-nativeselect;
+    @include valo-nativeselect;
   }
   
   @if v-is-included(calendar) {
-    @include v-valo-calendar;
+    @include valo-calendar;
   }
   
   @if v-is-included(label) {
-    @include v-valo-label;
+    @include valo-label;
   }
   
   @if v-is-included(dragwrapper) {
-    @include v-valo-dragwrapper;
+    @include valo-dragwrapper;
   }
   
   @if v-is-included(loginform) {
-    @include v-valo-loginform;
+    @include valo-loginform;
   }
   
   @if v-is-included(nativebutton) {
-    @include v-valo-nativebutton;
+    @include valo-nativebutton;
   }
   
   @if v-is-included(nativeselect) {
-    @include v-valo-nativeselect;
+    @include valo-nativeselect;
   }
   
   @if v-is-included(popupview) {
-    @include v-valo-popupview;
+    @include valo-popupview;
   }
   
   @if v-is-included(richtextarea) {
-    @include v-valo-richtextarea;
+    @include valo-richtextarea;
   }
   
   @if v-is-included(upload) {
-    @include v-valo-upload;
+    @include valo-upload;
   }
   
 }

WebContent/VAADIN/themes/valo/components/_button.scss

@@ -20,12 +20,12 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 
 
 // The main mixin for Valo buttons
-// @mixin     v-valo-button
+// @mixin     valo-button
 // @param     $primary-stylename {String} the primary stylename to use for the output. Defaults to <code>v-button</code>
-@mixin v-valo-button ($primary-stylename: v-button) {
+@mixin valo-button ($primary-stylename: v-button) {
   .#{$primary-stylename} {
-    @include v-valo-button-common-properties;
-    @include v-valo-button-style;
+    @include valo-button-common-properties;
+    @include valo-button-style;
   }
 }
 
@@ -33,8 +33,8 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@mixin v-valo-button-common-properties {
-  @include v-valo-tappable;
+@mixin valo-button-common-properties {
+  @include valo-tappable;
   cursor: $v-button-cursor;
   font-weight: $v-button-font-weight;
   position: relative;
@@ -65,10 +65,10 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
     }
   }
 
-  @include v-valo-button-vertical-centering;
+  @include valo-button-vertical-centering;
 }
 
-@mixin v-valo-button-vertical-centering {
+@mixin valo-button-vertical-centering {
   // Vertical centering of icon and caption, independent of the height of the button
   @include vertical-align-guide($to-align: div, $pseudo-element: before);
 
@@ -92,7 +92,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@mixin v-valo-button-size ($unit-size, $border-radius) {
+@mixin valo-button-size ($unit-size, $border-radius) {
   height: $unit-size;
   
   $padding-width: ceil($unit-size/2.4);
@@ -110,7 +110,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@function v-valo-button-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
+@function valo-button-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
                                       $background-color: $v-button-background-color) {
 
   $background-color: $background-color or $v-app-background-color;
@@ -127,7 +127,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@mixin v-valo-button-style ($gradient-style: $v-button-gradient-style, $gradient-depth: $v-button-gradient-depth, 
+@mixin valo-button-style ($gradient-style: $v-button-gradient-style, $gradient-depth: $v-button-gradient-depth, 
                             $bevel-style: $v-button-bevel-style, $bevel-depth: $v-button-bevel-depth, 
                             $unit-size: $v-button-unit-size, $border-radius: $v-button-border-radius,
                             $background-color: $v-button-background-color) {
@@ -140,49 +140,49 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
   $bevel-depth: $bevel-depth or $v-bevel-depth;
   $unit-size: $unit-size or $v-unit-size;
   
-  @include v-valo-button-size($unit-size, $border-radius);
+  @include valo-button-size($unit-size, $border-radius);
 
   border-radius: $border-radius;
   border: $v-button-border-width solid;
-  border-color: v-valo-button-border-color($bevel-style, $bevel-depth, $background-color);
+  border-color: valo-button-border-color($bevel-style, $bevel-depth, $background-color);
 
-  @include v-valo-gradient($background-color, $gradient-style, $gradient-depth);
-  color: v-valo-font-color($background-color, 0.9);
+  @include valo-gradient($background-color, $gradient-style, $gradient-depth);
+  color: valo-font-color($background-color, 0.9);
 
-  box-shadow: v-valo-button-box-shadow($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth);
-  text-shadow: v-valo-button-text-shadow($background-color, $bevel-depth);
+  box-shadow: valo-button-box-shadow($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth);
+  text-shadow: valo-button-text-shadow($background-color, $bevel-depth);
   
   @if $v-button-hover-style-enabled {
     &:hover:after {
-      @include v-valo-button-hover-style($background-color: $background-color);
+      @include valo-button-hover-style($background-color: $background-color);
     }
   }
 
   &:focus {
     outline: none;
     &:after {
-      @include v-valo-button-focus-style($background-color: $background-color);
+      @include valo-button-focus-style($background-color: $background-color);
     }
   }
 
   &:active:after,
   &.v-pressed:after {
-    @include v-valo-button-active-style($background-color: $background-color);
+    @include valo-button-active-style($background-color: $background-color);
   }
   
 }
 
 
-@mixin v-valo-button-focus-style ($background-color: $v-app-background-color, $border-fallback: inherit) {
-  $focus-color: v-valo-focus-color();
+@mixin valo-button-focus-style ($background-color: $v-app-background-color, $border-fallback: inherit) {
+  $focus-color: valo-focus-color();
   
   @if color-luminance($focus-color) + 50 < color-luminance($background-color) {
     border: $v-button-border-width solid $focus-color;
   } @else {
-    border: $border-fallback or v-valo-button-border-color($background-color: $background-color);
+    border: $border-fallback or valo-button-border-color($background-color: $background-color);
   }
 
-  box-shadow: v-valo-focus-box-shadow($color: $focus-color);
+  box-shadow: valo-focus-box-shadow($color: $focus-color);
 
   @if $v-animations-enabled {
     @include transition(none);
@@ -191,7 +191,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@mixin v-valo-button-active-style ($background-color: $v-app-background-color) {
+@mixin valo-button-active-style ($background-color: $v-app-background-color) {
   $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($v-app-background-color));
   background-color: rgba($bg, .1);
   
@@ -203,7 +203,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@mixin v-valo-button-hover-style ($background-color: $v-app-background-color) {
+@mixin valo-button-hover-style ($background-color: $v-app-background-color) {
   $bg: lighten($background-color, 15%);
   background-color: rgba($bg, .1);
   border: inherit;
@@ -221,7 +221,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@mixin v-valo-button-borderless-style {
+@mixin valo-button-borderless-style {
   border: none;
   box-shadow: none;
   background: transparent;
@@ -229,7 +229,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
-@mixin v-valo-button-icon-align-right-style ($primary-stylename: v-button) {
+@mixin valo-button-icon-align-right-style ($primary-stylename: v-button) {
   .#{$primary-stylename}-wrap {
     display: inline-block;
   }
@@ -247,13 +247,13 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@function v-valo-button-box-shadow($background-color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) {
-  @return v-valo-bevel($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth), v-valo-shadow();
+@function valo-button-box-shadow($background-color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) {
+  @return valo-bevel($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth), valo-shadow();
 }
 
 
 
-@function v-valo-button-text-shadow($background-color, $bevel-depth: $v-bevel-depth) {
+@function valo-button-text-shadow($background-color, $bevel-depth: $v-bevel-depth) {
   @if is-dark-color($background-color) {
     @return 0 -1px 0 transparentize(darken($background-color, $bevel-depth), 1-($bevel-depth/100%));
   } @else {

WebContent/VAADIN/themes/valo/components/_calendar.scss

@@ -1,7 +1,7 @@
 $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateblue !default;
 
 
-@mixin v-valo-calendar-global ($primary-stylename: v-calendar) {
+@mixin valo-calendar-global ($primary-stylename: v-calendar) {
   .#{$primary-stylename}-month-day-scrollable {
     overflow-y: scroll;
   }
@@ -109,7 +109,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
 
 
 
-@mixin v-valo-calendar ($primary-stylename: v-calendar) {
+@mixin valo-calendar ($primary-stylename: v-calendar) {
 
 
   .#{$primary-stylename}-header-day {
@@ -145,11 +145,11 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
   }
 
   .#{$primary-stylename}-header-week .#{$primary-stylename}-back {
-    @include v-valo-calendar-prev-style;
+    @include valo-calendar-prev-style;
   }
 
   .#{$primary-stylename}-header-week .#{$primary-stylename}-next {
-    @include v-valo-calendar-next-style;
+    @include valo-calendar-next-style;
   }
 
 
@@ -205,7 +205,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
     cursor: pointer;
 
     &:hover {
-      color: v-valo-focus-color();
+      color: valo-focus-color();
     }
   }
 
@@ -219,17 +219,17 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
     cursor: pointer;
 
     &:hover {
-      color: v-valo-focus-color();
+      color: valo-focus-color();
     }
   }
 
   .#{$primary-stylename}-month-day-today {
-    background: blend-normal(rgba(v-valo-focus-color(), .05), $v-app-background-color);
+    background: blend-normal(rgba(valo-focus-color(), .05), $v-app-background-color);
 
     .#{$primary-stylename}-day-number {
       font-weight: $v-font-weight + 100;
-      color: v-valo-focus-color();
-      border-top: 2px solid v-valo-focus-color();
+      color: valo-focus-color();
+      border-top: 2px solid valo-focus-color();
       line-height: round($v-unit-size/1.5) - 1px;
       margin: 0;
       padding: 0 round($v-unit-size/8);
@@ -237,7 +237,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
   }
 
   .#{$primary-stylename}-month-day-selected {
-    background-color: blend-normal(rgba(v-valo-selection-color(), .1), $v-app-background-color);
+    background-color: blend-normal(rgba(valo-selection-color(), .1), $v-app-background-color);
   }
 
   .#{$primary-stylename}-month-day-dragemphasis {
@@ -311,11 +311,11 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
     }
   }
 
-  $v-valo-calendar-time-divider-color: darken($v-app-background-color, 5%);
+  $valo-calendar-time-divider-color: darken($v-app-background-color, 5%);
 
   .#{$primary-stylename} .v-datecellslot,
   .#{$primary-stylename} .v-datecellslot-even {
-    border-top: 1px solid $v-valo-calendar-time-divider-color;
+    border-top: 1px solid $valo-calendar-time-divider-color;
 
     &:first-child {
       border-top-color: transparent;
@@ -332,14 +332,14 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
   }
 
   .#{$primary-stylename}-current-time {
-    background: v-valo-focus-color();
+    background: valo-focus-color();
     line-height: 1px;
     pointer-events: none;
     @include opacity(.5);
 
     &:before {
       content: "\2022";
-      color: v-valo-focus-color();
+      color: valo-focus-color();
       font-size: 22px;
       margin-left: -0.07em;
     }
@@ -355,7 +355,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
       right: 0;
       bottom: -1px;
       left: 0;
-      background: v-valo-selection-color();
+      background: valo-selection-color();
       @include opacity(.5);
       @if $v-border-radius > 0 {
         border-radius: $v-border-radius $v-border-radius 0 0;
@@ -472,7 +472,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
 
     // Event is being dragged
     &[style*=" left:"] .#{$primary-stylename}-event-content {
-      //box-shadow: v-valo-shadow();
+      //box-shadow: valo-shadow();
     }
   }
 
@@ -533,14 +533,14 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
 }
 
 
-@mixin v-valo-calendar-prev-style {
+@mixin valo-calendar-prev-style {
   &:before {
-    @include v-valo-tabsheet-scroller-prev-icon-style;
+    @include valo-tabsheet-scroller-prev-icon-style;
   }
 }
 
-@mixin v-valo-calendar-next-style {
+@mixin valo-calendar-next-style {
   &:before {
-    @include v-valo-tabsheet-scroller-next-icon-style;
+    @include valo-tabsheet-scroller-next-icon-style;
   }
 }

WebContent/VAADIN/themes/valo/components/_checkbox.scss

@@ -1,20 +1,20 @@
-@mixin v-valo-checkbox ($primary-stylename: v-checkbox) {
+@mixin valo-checkbox ($primary-stylename: v-checkbox) {
   
   .#{$primary-stylename},
   .v-radiobutton {
-    @include v-valo-checkbox-style;   
+    @include valo-checkbox-style;   
   }
   
 }
 
 
-@mixin v-valo-checkbox-icon-style {
+@mixin valo-checkbox-icon-style {
   content: "\f00c";
   font-family: FontAwesome;
 }
 
 
-@mixin v-valo-checkbox-style ($background-color: $v-button-background-color, $unit-size: $v-unit-size) {
+@mixin valo-checkbox-style ($background-color: $v-button-background-color, $unit-size: $v-unit-size) {
   $background-color: $background-color or $v-app-background-color;
   
   position: relative;
@@ -29,7 +29,7 @@
     padding-left: round($unit-size/1.5);
 
     label {
-      @include v-valo-tappable;
+      @include valo-tappable;
     }
   }
   
@@ -42,8 +42,8 @@
     margin: 0;
 
     &:focus ~ label:before {
-      @include v-valo-button-focus-style($background-color: $background-color, $border-fallback: null);
-      box-shadow: v-valo-button-box-shadow($background-color), v-valo-focus-box-shadow();
+      @include valo-button-focus-style($background-color: $background-color, $border-fallback: null);
+      box-shadow: valo-button-box-shadow($background-color), valo-focus-box-shadow();
     }
 
     & ~ label:before,
@@ -62,13 +62,13 @@
     }
     
     & ~ label:before {
-      @include v-valo-button-style($background-color: $background-color, $unit-size: $unit-size);
+      @include valo-button-style($background-color: $background-color, $unit-size: $unit-size);
       padding: 0;
       height: round($unit-size/2);
     }
 
     & ~ label:after {
-      @include v-valo-checkbox-icon-style;
+      @include valo-checkbox-icon-style;
       color: transparent;
       @if $v-animations-enabled {
         @include transition(color 100ms);
@@ -76,11 +76,11 @@
     }
     
     &:active ~ label:after {
-      @include v-valo-button-active-style($background-color: $background-color);
+      @include valo-button-active-style($background-color: $background-color);
     }
     
     &:checked ~ label:after {
-      color: v-valo-selection-color($context: $background-color);
+      color: valo-selection-color($context: $background-color);
     }
 
     &[disabled] {

WebContent/VAADIN/themes/valo/components/_colorpicker.scss

@@ -1,7 +1,7 @@
-@mixin v-valo-colorpicker-global ($primary-stylename: v-colorpicker) {
-  $v-valo-colorpicker-pathPrefix: null;
+@mixin valo-colorpicker-global ($primary-stylename: v-colorpicker) {
+  $valo-colorpicker-pathPrefix: null;
   @if $v-relative-paths == false {
-    $v-valo-colorpicker-pathPrefix: "../valo/components/img/colorpicker/";
+    $valo-colorpicker-pathPrefix: "../valo/components/img/colorpicker/";
   }
 
   .#{$primary-stylename}-popup.v-window {
@@ -13,11 +13,11 @@
   }
   
   .rgb-gradient .#{$primary-stylename}-gradient-background {
-    background: url(#{$v-valo-colorpicker-pathPrefix}gradient2.png);
+    background: url(#{$valo-colorpicker-pathPrefix}gradient2.png);
   }
   
   .hsv-gradient .#{$primary-stylename}-gradient-foreground {
-    background: url(#{$v-valo-colorpicker-pathPrefix}gradient.png);
+    background: url(#{$valo-colorpicker-pathPrefix}gradient.png);
   }
   
   .#{$primary-stylename}-gradient-lowerbox {
@@ -43,7 +43,7 @@
   }
 
   .#{$primary-stylename}-popup .v-slider.hue-slider:before {
-    background: url(#{$v-valo-colorpicker-pathPrefix}slider_hue_bg.png);
+    background: url(#{$valo-colorpicker-pathPrefix}slider_hue_bg.png);
   }
 
   .#{$primary-stylename}-popup .v-textfield-dark {
@@ -69,7 +69,7 @@
 
 
 
-@mixin v-valo-colorpicker ($primary-stylename: v-colorpicker) {
+@mixin valo-colorpicker ($primary-stylename: v-colorpicker) {
 
   .#{$primary-stylename}-popup.v-window {
     min-width: 220px !important;

WebContent/VAADIN/themes/valo/components/_combobox.scss

@@ -3,12 +3,12 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@mixin v-valo-combobox ($primary-stylename: v-filterselect) {
+@mixin valo-combobox ($primary-stylename: v-filterselect) {
 
   .#{$primary-stylename} {
     position: relative;
     width: $v-default-field-width;
-    @include v-valo-combobox-style($primary-stylename: $primary-stylename);
+    @include valo-combobox-style($primary-stylename: $primary-stylename);
     white-space: nowrap;
 
     .v-icon {
@@ -17,7 +17,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
   }
   
   .#{$primary-stylename}-suggestpopup {
-    @include v-valo-combobox-popup-style;
+    @include valo-combobox-popup-style;
   }
 
 }
@@ -27,19 +27,19 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@mixin v-valo-combobox-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
+@mixin valo-combobox-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
                               $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth, 
                               $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
                               $background-color: $v-textfield-background-color, $primary-stylename: v-filterselect) {
 
-  $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color);
+  $background-color: $background-color or valo-textfield-background-color($v-app-background-color);
   $bevel-style: $bevel-style or $v-bevel-style;
   $bevel-depth: $bevel-depth or $v-bevel-depth;
   $unit-size: $unit-size or $v-unit-size;
   $border-radius: $border-radius or $v-border-radius;
 
   .#{$primary-stylename}-input {
-    @include v-valo-combobox-input-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $unit-size: $unit-size, 
+    @include valo-combobox-input-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $unit-size: $unit-size, 
                                          $shadow-style: $shadow-style, $shadow-depth: $shadow-depth,
                                          $border-radius: $border-radius, $background-color: $background-color);
   }
@@ -58,11 +58,11 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
   }
   
   &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input {
-    @include v-valo-textfield-prompt-style(v-valo-textfield-background-color($background-color));
+    @include valo-textfield-prompt-style(valo-textfield-background-color($background-color));
   }
 
   .#{$primary-stylename}-button {
-    @include v-valo-combobox-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth,
+    @include valo-combobox-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth,
                                            $background-color: $background-color);
   }
   
@@ -79,7 +79,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
   &.v-readonly {
     .#{$primary-stylename}-input {
-      @include v-valo-textfield-readonly-style;
+      @include valo-textfield-readonly-style;
     }
 
     .#{$primary-stylename}-button {
@@ -96,7 +96,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@include keyframes(v-valo-combobox-show-status) {
+@include keyframes(valo-combobox-show-status) {
   0% {
     opacity: 0;
     @include transform( translatey(-100%) );
@@ -106,12 +106,12 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@mixin v-valo-combobox-input-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
+@mixin valo-combobox-input-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
                                     $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth,
                                     $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
                                     $background-color: $v-textfield-background-color) {
   @include box-sizing(border-box);
-  @include v-valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, 
+  @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, 
                                   $shadow-style: $shadow-style, $shadow-depth: $shadow-depth,
                                   $unit-size: $unit-size, $border-radius: $border-radius,
                                   $background-color: $background-color) ;
@@ -126,9 +126,9 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@mixin v-valo-combobox-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
+@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
                                      $background-color: $v-textfield-background-color) {
-  @include v-valo-tappable;
+  @include valo-tappable;
   position: absolute;
   top: $v-textfield-border-width;
   right: $v-textfield-border-width;
@@ -142,8 +142,8 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
   }
   
   &:before {
-    @include v-valo-combobox-button-icon-style($background-color);
-    color: mix($background-color, v-valo-font-color($background-color));
+    @include valo-combobox-button-icon-style($background-color);
+    color: mix($background-color, valo-font-color($background-color));
     @if $v-animations-enabled {
       @include transition(color 140ms);
     }
@@ -157,7 +157,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
   @if $v-combobox-hover-style-enabled {
     &:hover:before {
-      color: v-valo-font-color($background-color);
+      color: valo-font-color($background-color);
     }
   }
 
@@ -169,25 +169,25 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
     bottom: 0;
     left: 0;
     border-radius: inherit;
-    @include v-valo-button-active-style($background-color);
+    @include valo-button-active-style($background-color);
   }
 }
 
 
 
-@mixin v-valo-combobox-button-icon-style ($background-color) {
+@mixin valo-combobox-button-icon-style ($background-color) {
   font-family: FontAwesome;
   content: "\f078";
-  color: v-valo-font-color($background-color);
+  color: valo-font-color($background-color);
 }
 
 
 
 
-@mixin v-valo-combobox-popup-style ($background-color: null) {
+@mixin valo-combobox-popup-style ($background-color: null) {
   
   .v-filterselect-suggestmenu {
-    @include v-valo-selection-overlay-style($background-color: $background-color);
+    @include valo-selection-overlay-style($background-color: $background-color);
     box-sizing: border-box;
     position: relative;
     z-index: 1;
@@ -203,11 +203,11 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
   }
   
   .gwt-MenuItem {
-    @include v-valo-selection-item-style;
+    @include valo-selection-item-style;
   }
   
   .gwt-MenuItem-selected {
-    @include v-valo-selection-item-selected-style($parent-background-color: $background-color);
+    @include valo-selection-item-selected-style($parent-background-color: $background-color);
   }
 
   .v-filterselect-status {
@@ -216,7 +216,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
     $bg: $background-color or $v-app-background-color;
     $bg: scale-color($bg, $lightness: -15%);
     background: transparentize($bg, .1);
-    color: v-valo-font-color($bg);
+    color: valo-font-color($bg);
     border-radius: 0 0 $v-border-radius $v-border-radius;
     height: ceil($v-unit-size*0.6);
     bottom: -(ceil($v-unit-size*0.6));
@@ -227,11 +227,11 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
     pointer-events: none;
 
     @if $v-animations-enabled {
-       @include animation(v-valo-combobox-show-status 200ms 80ms backwards);
+       @include animation(valo-combobox-show-status 200ms 80ms backwards);
     }
     
     > * {
-      color: v-valo-font-color($bg);
+      color: valo-font-color($bg);
       text-decoration: none;
     }
   }
@@ -251,7 +251,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
     @include transform( scale(.8) );
 
     $bg: $background-color or $v-app-background-color;
-    color: v-valo-font-color($bg);
+    color: valo-font-color($bg);
     
     &:hover {
       @include opacity(1);

WebContent/VAADIN/themes/valo/components/_csslayout.scss

@@ -1,9 +1,9 @@
-@mixin v-valo-csslayout ($primary-stylename: v-csslayout){
+@mixin valo-csslayout ($primary-stylename: v-csslayout){
 
 }
 
 
-@mixin v-valo-component-group ($primary-stylename: v-csslayout) {
+@mixin valo-component-group ($primary-stylename: v-csslayout) {
   .#{$primary-stylename}-v-component-group {
     white-space: nowrap;
     position: relative;

WebContent/VAADIN/themes/valo/components/_customcomponent.scss

@@ -1,3 +1,3 @@
-@mixin v-valo-customcomponent ($primary-stylename: v-customcomponent) {
+@mixin valo-customcomponent ($primary-stylename: v-customcomponent) {
   
 }

WebContent/VAADIN/themes/valo/components/_customlayout.scss

@@ -1,3 +1,3 @@
-@mixin v-valo-customlayout ($primary-stylename: v-customlayout) {
+@mixin valo-customlayout ($primary-stylename: v-customlayout) {
   
 }

WebContent/VAADIN/themes/valo/components/_datefield.scss

@@ -1,13 +1,13 @@
 $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
-@mixin v-valo-datefield ($primary-stylename: v-datefield) {
+@mixin valo-datefield ($primary-stylename: v-datefield) {
 
   .#{$primary-stylename} {
     position: relative;
     width: $v-default-field-width;
     height: $v-unit-size;
-    @include v-valo-datefield-style($primary-stylename: $primary-stylename);
+    @include valo-datefield-style($primary-stylename: $primary-stylename);
   }
 
   // Different widths for different resolutions
@@ -28,27 +28,27 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
   }
 
   .v-datefield-popup {
-    @include v-valo-datefield-popup-style;
+    @include valo-datefield-popup-style;
   }
 
-  @include v-valo-datefield-calendarpanel-style;
+  @include valo-datefield-calendarpanel-style;
 
 }
 
 
-@mixin v-valo-inline-datefield ($primary-stylename: v-inline-datefield) {
-  @include v-valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel);
+@mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) {
+  @include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel);
 }
 
 
 
 
 
-@mixin v-valo-datefield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
+@mixin valo-datefield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
                               $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
                               $background-color: $v-textfield-background-color, $primary-stylename: v-datefield) {
 
-  $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color);
+  $background-color: $background-color or valo-textfield-background-color($v-app-background-color);
   $bevel-style: $bevel-style or $v-bevel-style;
   $bevel-depth: $bevel-depth or $v-bevel-depth;
   $unit-size: $unit-size or $v-unit-size;
@@ -56,7 +56,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
 
   .#{$primary-stylename}-textfield {
     @include box-sizing(border-box);
-    @include v-valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, 
+    @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, 
                                     $unit-size: $unit-size, $border-radius: $border-radius,
                                     $background-color: $background-color) ;
     padding-left: $unit-size * 1.2;
@@ -65,11 +65,11 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
   }
   
   &.#{$primary-stylename}-prompt > .#{$primary-stylename}-textfield {
-    @include v-valo-textfield-prompt-style(v-valo-textfield-background-color($background-color));
+    @include valo-textfield-prompt-style(valo-textfield-background-color($background-color));
   }
 
   .#{$primary-stylename}-button {
-    @include v-valo-datefield-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth,
+    @include valo-datefield-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth,
                                            $background-color: $background-color);
   }
 
@@ -87,7 +87,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
 
   &.v-readonly {
     .#{$primary-stylename}-textfield {
-      @include v-valo-textfield-readonly-style;
+      @include valo-textfield-readonly-style;
     }
 
     .#{$primary-stylename}-button {
@@ -103,9 +103,9 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@mixin v-valo-datefield-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
+@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
                                       $background-color: $v-textfield-background-color) {
-  @include v-valo-tappable;
+  @include valo-tappable;
   -webkit-appearance: none;
   background: transparent;
   border: none;
@@ -129,8 +129,8 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
   }
   
   &:before {
-    @include v-valo-datefield-button-icon-style($background-color);
-    color: mix($background-color, v-valo-font-color($background-color));
+    @include valo-datefield-button-icon-style($background-color);
+    color: mix($background-color, valo-font-color($background-color));
     @if $v-animations-enabled {
       @include transition(color 140ms);
     }
@@ -138,7 +138,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
 
   @if $v-combobox-hover-style-enabled {
     &:hover:before {
-      color: v-valo-font-color($background-color);
+      color: valo-font-color($background-color);
     }
   }
 
@@ -149,27 +149,27 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
     right: 0;
     bottom: 0;
     left: 0;
-    @include v-valo-button-active-style($background-color);
+    @include valo-button-active-style($background-color);
   }
 }
 
 
 
 
-@mixin v-valo-datefield-button-icon-style ($background-color) {
+@mixin valo-datefield-button-icon-style ($background-color) {
   font-family: FontAwesome;
   content: "\f073";
-  color: v-valo-font-color($background-color);
+  color: valo-font-color($background-color);
 }
 
 
 
 
-@mixin v-valo-datefield-popup-style ($context: $v-app-background-color) {
+@mixin valo-datefield-popup-style ($context: $v-app-background-color) {
   $copy: $v-app-background-color;
   $v-app-background-color: $context;
 
-  @include v-valo-overlay-style;
+  @include valo-overlay-style;
 
   @include user-select(none);
 
@@ -186,13 +186,13 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
     padding: round($v-unit-size/20);
   }
 
-  @include v-valo-datefield-calendarpanel-style;
+  @include valo-datefield-calendarpanel-style;
 
   $v-app-background-color: $copy;
 }
 
 
-@mixin v-valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) {
+@mixin valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) {
   .#{$primary-stylename} {
     font-size: $v-font-size;
     text-align: center;
@@ -203,37 +203,37 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
   }
 
   .#{$primary-stylename}-day {
-    @include v-valo-datefield-calendarpanel-day-style;
+    @include valo-datefield-calendarpanel-day-style;
     display: inline-block;
     @include box-sizing(border-box);
     cursor: pointer;
     &:hover {
-      @include v-valo-datefield-calendarpanel-day-hover-style;
+      @include valo-datefield-calendarpanel-day-hover-style;
     }
   }
     
   .#{$primary-stylename}-day-offmonth {
-    @include v-valo-datefield-calendarpanel-day-offmonth-style;
+    @include valo-datefield-calendarpanel-day-offmonth-style;
   }
 
   .#{$primary-stylename}-day-today {
-    @include v-valo-datefield-calendarpanel-day-today-style;
+    @include valo-datefield-calendarpanel-day-today-style;
   }
   
   .#{$primary-stylename}-day.#{$primary-stylename}-day-selected,
   .#{$primary-stylename}-day.#{$primary-stylename}-day-selected:hover {
-    @include v-valo-datefield-calendarpanel-day-selected-style
+    @include valo-datefield-calendarpanel-day-selected-style
   }
   
   .#{$primary-stylename}-day.#{$primary-stylename}-day-focused {
-    @include v-valo-datefield-calendarpanel-day-focused-style;
+    @include valo-datefield-calendarpanel-day-focused-style;
   }
 
 
 
   .#{$primary-stylename}-weekdays {
     height: round($v-unit-size * 0.7);
-    color: mix(v-valo-font-color($v-app-background-color), rgba($v-app-background-color, .7));
+    color: mix(valo-font-color($v-app-background-color), rgba($v-app-background-color, .7));
     
     strong {
       font: inherit;
@@ -269,7 +269,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
         right: 0;
         bottom: 0;
         left: 0;
-        color: mix($v-app-background-color, v-valo-font-color($v-app-background-color));
+        color: mix($v-app-background-color, valo-font-color($v-app-background-color));
         font-size: round($v-font-size * 1.3);
         line-height: round($v-font-size * 1.5);
 
@@ -281,31 +281,31 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
       &:hover {
         @include opacity(1);
         &:before {
-          color: v-valo-link-font-color();
+          color: valo-link-font-color();
         }
       }
     }
   }
   
   .v-button-prevyear:before {
-    @include v-valo-datefield-calendarpanel-prevyear-icon-style;
+    @include valo-datefield-calendarpanel-prevyear-icon-style;
   }
   
   .v-button-prevmonth:before {
-    @include v-valo-datefield-calendarpanel-prevmonth-icon-style;
+    @include valo-datefield-calendarpanel-prevmonth-icon-style;
   }
   
   .v-button-nextyear:before {
-    @include v-valo-datefield-calendarpanel-nextyear-icon-style;
+    @include valo-datefield-calendarpanel-nextyear-icon-style;
   }
   
   .v-button-nextmonth:before {
-    @include v-valo-datefield-calendarpanel-nextmonth-icon-style;
+    @include valo-datefield-calendarpanel-nextmonth-icon-style;
   }
   
   td.#{$primary-stylename}-month {
     width: round($v-unit-size * 3.5);
-    @include v-valo-datefield-calendarpanel-month-style;
+    @include valo-datefield-calendarpanel-month-style;
   }
   
   .v-datefield-year td.v-datefield-calendarpanel-month {
@@ -315,7 +315,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
   .v-datefield-calendarpanel-weeknumber,
   .v-datefield-calendarpanel-weekdays.v-datefield-calendarpanel-weeknumbers td:first-child {
     width: round($v-unit-size * 0.7);
-    color: mix(v-valo-font-color($v-app-background-color), rgba($v-app-background-color, .7));
+    color: mix(valo-font-color($v-app-background-color), rgba($v-app-background-color, .7));
     font-size: ceil($v-font-size * 0.86);
     display: inline-block;
     text-align: left;
@@ -337,7 +337,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@mixin v-valo-datefield-calendarpanel-day-style {
+@mixin valo-datefield-calendarpanel-day-style {
   width: round($v-unit-size * 0.8);
   height: round($v-unit-size * 0.7);
   line-height: round($v-unit-size * 0.7);
@@ -352,53 +352,53 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
   }
 }
 
-@mixin v-valo-datefield-calendarpanel-day-hover-style {
-  color: v-valo-selection-color();
+@mixin valo-datefield-calendarpanel-day-hover-style {
+  color: valo-selection-color();
 }
 
-@mixin v-valo-datefield-calendarpanel-day-offmonth-style {
-  color: mix(v-valo-font-color($v-app-background-color), $v-app-background-color);
+@mixin valo-datefield-calendarpanel-day-offmonth-style {
+  color: mix(valo-font-color($v-app-background-color), $v-app-background-color);
   background: transparent;
 }
 
-@mixin v-valo-datefield-calendarpanel-day-today-style {
-  color: v-valo-selection-color();
-  background: blend-overlay(v-valo-selection-color(), $v-app-background-color);
+@mixin valo-datefield-calendarpanel-day-today-style {
+  color: valo-selection-color();
+  background: blend-overlay(valo-selection-color(), $v-app-background-color);
   font-weight: $v-font-weight + 100;
 }
 
-@mixin v-valo-datefield-calendarpanel-day-selected-style {
-  color: v-valo-font-color(v-valo-selection-color());
-  @include v-valo-gradient(v-valo-selection-color());
+@mixin valo-datefield-calendarpanel-day-selected-style {
+  color: valo-font-color(valo-selection-color());
+  @include valo-gradient(valo-selection-color());
   font-weight: $v-font-weight + 100;
 }
 
-@mixin v-valo-datefield-calendarpanel-day-focused-style {
-  box-shadow: v-valo-focus-box-shadow();
+@mixin valo-datefield-calendarpanel-day-focused-style {
+  box-shadow: valo-focus-box-shadow();
   position: relative; // Show above other cells
 }
 
 
-@mixin v-valo-datefield-calendarpanel-nextmonth-icon-style {
+@mixin valo-datefield-calendarpanel-nextmonth-icon-style {
   font-family: FontAwesome;
   content: "\f105";
 }
 
-@mixin v-valo-datefield-calendarpanel-prevmonth-icon-style {
+@mixin valo-datefield-calendarpanel-prevmonth-icon-style {
   font-family: FontAwesome;
   content: "\f104";
 }
 
-@mixin v-valo-datefield-calendarpanel-nextyear-icon-style {
+@mixin valo-datefield-calendarpanel-nextyear-icon-style {
   font-family: FontAwesome;
   content: "\f101";
 }
 
-@mixin v-valo-datefield-calendarpanel-prevyear-icon-style {
+@mixin valo-datefield-calendarpanel-prevyear-icon-style {
   font-family: FontAwesome;
   content: "\f100";
 }
 
-@mixin v-valo-datefield-calendarpanel-month-style {
-  color: v-valo-selection-color();
+@mixin valo-datefield-calendarpanel-month-style {
+  color: valo-selection-color();
 }

WebContent/VAADIN/themes/valo/components/_dragwrapper.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-dragwrapper ($primary-stylename: v-ddwrapper) {
+@mixin valo-dragwrapper ($primary-stylename: v-ddwrapper) {
   
   // TODO
 

WebContent/VAADIN/themes/valo/components/_escalator.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-escalator($primaryStyleName : v-escalator) {
+@mixin valo-escalator($primaryStyleName : v-escalator) {
 
 $background-color: white;
 $border-color: #aaa;

WebContent/VAADIN/themes/valo/components/_form.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-form ($primary-stylename: v-form) {
+@mixin valo-form ($primary-stylename: v-form) {
   
   .#{$primary-stylename} fieldset {
     border: none;

WebContent/VAADIN/themes/valo/components/_formlayout.scss

@@ -1,7 +1,7 @@
-@mixin v-valo-formlayout ($primary-stylename: v-formlayout) {
+@mixin valo-formlayout ($primary-stylename: v-formlayout) {
   
-  @include v-valo-formlayout-spacing;
-  @include v-valo-formlayout-margins;
+  @include valo-formlayout-spacing;
+  @include valo-formlayout-margins;
 
   .#{$primary-stylename} > table {
     border-spacing: 0;
@@ -29,7 +29,7 @@
 }
 
 
-@mixin v-valo-formlayout-margins ($primary-stylename: v-formlayout, $all: null, $top: $v-layout-margin-top, $right: $v-layout-margin-right, $bottom: $v-layout-margin-bottom, $left: $v-layout-margin-left) {
+@mixin valo-formlayout-margins ($primary-stylename: v-formlayout, $all: null, $top: $v-layout-margin-top, $right: $v-layout-margin-right, $bottom: $v-layout-margin-bottom, $left: $v-layout-margin-left) {
   @if $all != null {
     $top: $all;
     $right: $all;
@@ -63,7 +63,7 @@
 }
 
 
-@mixin v-valo-formlayout-spacing ($primary-stylename: v-formlayout, $vertical: $v-layout-spacing-vertical) {
+@mixin valo-formlayout-spacing ($primary-stylename: v-formlayout, $vertical: $v-layout-spacing-vertical) {
   .#{$primary-stylename}-spacing > tbody > .#{$primary-stylename}-row {
     > .#{$primary-stylename}-captioncell, 
     > .#{$primary-stylename}-contentcell,
@@ -77,7 +77,7 @@
 
 
 
-@mixin v-valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) {
+@mixin valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) {
   > table > tbody > .#{$primary-stylename}-row {
     > .#{$primary-stylename}-captioncell, 
     > .#{$primary-stylename}-contentcell,
@@ -119,7 +119,7 @@
     border: none;
     box-shadow: none;
     border-radius: 0;
-    @include v-valo-textfield-size($row-height, 0);
+    @include valo-textfield-size($row-height, 0);
   }
 
   .v-textarea {

WebContent/VAADIN/themes/valo/components/_grid.scss

@@ -1,5 +1,5 @@
 @import "escalator";
 
-@mixin v-valo-grid($primary-styleName : v-grid) {
-  @include v-valo-escalator($primary-styleName);
+@mixin valo-grid($primary-styleName : v-grid) {
+  @include valo-escalator($primary-styleName);
 }

WebContent/VAADIN/themes/valo/components/_gridlayout.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-gridlayout-global ($primary-stylename: v-gridlayout) {
+@mixin valo-gridlayout-global ($primary-stylename: v-gridlayout) {
   .#{$primary-stylename} {
     position: relative;
     line-height: 0;
@@ -21,7 +21,7 @@
 }
 
 
-@mixin v-valo-gridlayout($primary-stylename : v-gridlayout) {
+@mixin valo-gridlayout($primary-stylename : v-gridlayout) {
 
   .#{$primary-stylename}-margin-top {
     padding-top: $v-layout-margin-top;

WebContent/VAADIN/themes/valo/components/_label.scss

@@ -18,7 +18,7 @@ $v-letter-spacing--h3:    0               !default;
 $v-letter-spacing--h4:    0.05em          !default;
 
 
-@mixin v-valo-label ($primary-stylename: v-label) {
+@mixin valo-label ($primary-stylename: v-label) {
 
   .#{$primary-stylename}-undef-w {
     white-space: nowrap;
@@ -29,7 +29,7 @@ $v-letter-spacing--h4:    0.05em          !default;
   h3, .h3 {
     line-height: $v-line-height--header;
     font-weight: $v-font-weight--header;
-    color: v-valo-header-color($v-app-background-color);
+    color: valo-header-color($v-app-background-color);
   }
   
   h1, .h1 {
@@ -60,7 +60,7 @@ $v-letter-spacing--h4:    0.05em          !default;
     line-height: $v-line-height--header;
     font-weight: $v-font-weight + 200;
     font-size: $v-font-size--small;
-    color: v-valo-header-color($v-app-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;

WebContent/VAADIN/themes/valo/components/_link.scss

@@ -3,9 +3,9 @@ $v-link-text-decoration: underline !default;
 $v-link-cursor: pointer !default;
 
 
-@mixin v-valo-link ($primary-stylename: v-link) {
+@mixin valo-link ($primary-stylename: v-link) {
   .#{$primary-stylename} {
-    @include v-valo-link-style;
+    @include valo-link-style;
 
     a {
       cursor: inherit;
@@ -23,9 +23,9 @@ $v-link-cursor: pointer !default;
 }
 
 
-@mixin v-valo-link-style {
+@mixin valo-link-style {
   cursor: $v-link-cursor;
-  color: v-valo-link-font-color();
+  color: valo-link-font-color();
   text-decoration: $v-link-text-decoration;
   font-weight: inherit;
 
@@ -34,13 +34,13 @@ $v-link-cursor: pointer !default;
   }
 
   &:hover {
-    color: lighten(v-valo-link-font-color(), 10%);
+    color: lighten(valo-link-font-color(), 10%);
   }
 }
 
 
 
-@function v-valo-link-font-color ($color: null, $context: null) {
-  $link-color: $color or $v-link-font-color or v-valo-focus-color($color: $color, $context: $context);
+@function valo-link-font-color ($color: null, $context: null) {
+  $link-color: $color or $v-link-font-color or valo-focus-color($color: $color, $context: $context);
   @return $link-color;
 }

WebContent/VAADIN/themes/valo/components/_loginform.scss

@@ -1,3 +1,3 @@
-@mixin v-valo-loginform ($primary-stylename: v-loginform) {
+@mixin valo-loginform ($primary-stylename: v-loginform) {
   
 }

WebContent/VAADIN/themes/valo/components/_menubar.scss

@@ -1,11 +1,11 @@
-@mixin v-valo-menubar ($primary-stylename: v-menubar) {
+@mixin valo-menubar ($primary-stylename: v-menubar) {
   
   $copy: $v-button-hover-style-enabled;
   $v-button-hover-style-enabled: false;
 
   .#{$primary-stylename} {
-    @include v-valo-button-common-properties;
-    @include v-valo-button-style;
+    @include valo-button-common-properties;
+    @include valo-button-style;
     padding: 0;
     text-align: left;
   }
@@ -17,11 +17,11 @@
   }
 
   .#{$primary-stylename} > .#{$primary-stylename}-menuitem {
-    @include v-valo-menubar-menuitem-style;
+    @include valo-menubar-menuitem-style;
   }
 
   .#{$primary-stylename} > .#{$primary-stylename}-menuitem-checked {
-    @include v-valo-menubar-menuitem-checked-style;
+    @include valo-menubar-menuitem-checked-style;
   }
 
   .v-disabled > .#{$primary-stylename}-menuitem:before {
@@ -29,11 +29,11 @@
   }
 
   .#{$primary-stylename} > .#{$primary-stylename}-menuitem-selected {
-    @include v-valo-gradient($color: v-valo-selection-color());
-    box-shadow: v-valo-button-box-shadow($background-color: v-valo-selection-color());
-    text-shadow: v-valo-button-text-shadow($background-color: v-valo-selection-color());
-    color: v-valo-font-color(v-valo-selection-color());
-    $bc: v-valo-button-border-color($background-color: v-valo-selection-color());
+    @include valo-gradient($color: valo-selection-color());
+    box-shadow: valo-button-box-shadow($background-color: valo-selection-color());
+    text-shadow: valo-button-text-shadow($background-color: valo-selection-color());
+    color: valo-font-color(valo-selection-color());
+    $bc: valo-button-border-color($background-color: valo-selection-color());
     border-color: $bc;
 
     + .#{$primary-stylename}-menuitem {
@@ -50,7 +50,7 @@
   }
 
   .#{$primary-stylename}-popup {
-    @include v-valo-menubar-popup-style($primary-stylename);
+    @include valo-menubar-popup-style($primary-stylename);
     //margin-top: -$v-selection-overlay-padding-vertical !important;
     //margin-left: $v-selection-overlay-padding-horizontal !important;
   }
@@ -60,11 +60,11 @@
 
 
 
-@mixin v-valo-menubar-menuitem-style {
+@mixin valo-menubar-menuitem-style {
   position: relative;
   z-index: 1;
   display: inline-block;
-  @include v-valo-button-size($v-unit-size, $v-border-radius);
+  @include valo-button-size($v-unit-size, $v-border-radius);
   height: $v-unit-size - $v-button-border-width*2;
   border-left: $v-button-border-width solid;
   border-color: inherit;
@@ -98,13 +98,13 @@
 
   @if $v-button-hover-style-enabled {
     &:hover:before {
-      @include v-valo-button-hover-style;
+      @include valo-button-hover-style;
       border: none;
     }
   }
 
   &:active:before {
-    @include v-valo-button-active-style;
+    @include valo-button-active-style;
   }
 
   $margin-width: ceil($v-unit-size/2.4/5);
@@ -121,12 +121,12 @@
 
 
 
-@mixin v-valo-menubar-popup-style ($primary-stylename: v-menubar, $context: $v-app-background-color) {
+@mixin valo-menubar-popup-style ($primary-stylename: v-menubar, $context: $v-app-background-color) {
 
   $copy: $v-app-background-color;
   $v-app-background-color: $context;
 
-  @include v-valo-selection-overlay-style;
+  @include valo-selection-overlay-style;
 
   margin: ceil($v-unit-size/8) 0 0 1px !important;
 
@@ -136,7 +136,7 @@
 
   .#{$primary-stylename}-menuitem {
     display: block;
-    @include v-valo-selection-item-style;
+    @include valo-selection-item-style;
     padding-left: $v-selection-item-height + round($v-selection-item-padding-horizontal/2); // Make room for checkable icon
     padding-right: $v-unit-size;
     position: relative;
@@ -148,12 +148,12 @@
     + .#{$primary-stylename}-menuitem-caption:after {
       position: absolute;
       right: $v-selection-item-padding-horizontal;
-      @include v-valo-menubar-submenu-indicator-style;
+      @include valo-menubar-submenu-indicator-style;
     }
   }
 
   .#{$primary-stylename}-menuitem-selected {
-    @include v-valo-selection-item-selected-style;
+    @include valo-selection-item-selected-style;
   }
 
   .#{$primary-stylename}-separator {
@@ -161,11 +161,11 @@
     margin: $v-selection-overlay-padding-vertical 0;
     height: 0;
     overflow: hidden;
-    border-bottom: 1px solid darken(v-valo-overlay-background-color(), 5%);
+    border-bottom: 1px solid darken(valo-overlay-background-color(), 5%);
   }
 
   [class*="checked"] .#{$primary-stylename}-menuitem-caption:before {
-    @include v-valo-menubar-checked-icon-style;
+    @include valo-menubar-checked-icon-style;
     position: absolute;
     left: $v-selection-item-padding-horizontal;
   }
@@ -184,23 +184,23 @@
 
 
 
-@mixin v-valo-menubar-submenu-indicator-style {
+@mixin valo-menubar-submenu-indicator-style {
   font-family: FontAwesome;
   content: "\f054";
   line-height: $v-selection-item-height + 2px;
 }
 
-@mixin v-valo-menubar-checked-icon-style {
+@mixin valo-menubar-checked-icon-style {
   content: "\f00c";
   font-family: FontAwesome;
 }
 
 
-@mixin v-valo-menubar-menuitem-checked-style ($background-color: scale-color($v-app-background-color, $lightness: -5%, $saturation: -5%)) {
-  @include v-valo-gradient($color: $background-color, $depth: $v-gradient-depth/4, $direction: to top);
+@mixin valo-menubar-menuitem-checked-style ($background-color: scale-color($v-app-background-color, $lightness: -5%, $saturation: -5%)) {
+  @include valo-gradient($color: $background-color, $depth: $v-gradient-depth/4, $direction: to top);
 
   @if color-luminance($background-color) < color-luminance($v-app-background-color) {
-    $border-color: v-valo-button-border-color($background-color: $background-color);
+    $border-color: valo-button-border-color($background-color: $background-color);
     border-color: $border-color;
 
     + [class*="menuitem"] {
@@ -211,12 +211,12 @@
     }
   }
 
-  color: v-valo-font-color($background-color, 0.9);
-  text-shadow: v-valo-button-text-shadow($background-color: $background-color);
+  color: valo-font-color($background-color, 0.9);
+  text-shadow: valo-button-text-shadow($background-color: $background-color);
 }
 
-@mixin v-valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) {
+@mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) {
   .#{$primary-stylename}-menuitem-checked {
-    @include v-valo-menubar-menuitem-checked-style($background-color: $background-color);
+    @include valo-menubar-menuitem-checked-style($background-color: $background-color);
   }
 }

WebContent/VAADIN/themes/valo/components/_nativebutton.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-nativebutton ($primary-stylename: v-nativebutton) {
+@mixin valo-nativebutton ($primary-stylename: v-nativebutton) {
   .#{$primary-stylename} {
     -webkit-touch-callout: none;
   }

WebContent/VAADIN/themes/valo/components/_nativeselect.scss

@@ -1,6 +1,6 @@
-@mixin v-valo-nativeselect ($primary-stylename: v-select) {
+@mixin valo-nativeselect ($primary-stylename: v-select) {
   .#{$primary-stylename} select {
-    @include v-valo-nativeselect-select-style;
+    @include valo-nativeselect-select-style;
   }
 
   .#{$primary-stylename}-select {
@@ -20,17 +20,17 @@
 
 
 
-@mixin v-valo-nativeselect-select-style {
+@mixin valo-nativeselect-select-style {
   $_border-color: darken($v-app-background-color, $v-bevel-depth);
   @if is-dark-color($v-app-background-color) {
     $_border-color: lighten($v-app-background-color, $v-bevel-depth);
   }
   border: $v-border-width solid $_border-color;
-  background-color: v-valo-textfield-background-color($v-app-background-color);
+  background-color: valo-textfield-background-color($v-app-background-color);
 
   &:focus {
     outline: none;
-    //@include v-valo-button-focus-style;
-    box-shadow: v-valo-focus-box-shadow();
+    //@include valo-button-focus-style;
+    box-shadow: valo-focus-box-shadow();
   }
 }

WebContent/VAADIN/themes/valo/components/_optiongroup.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-optiongroup ($primary-stylename: v-optiongroup) {
+@mixin valo-optiongroup ($primary-stylename: v-optiongroup) {
   
   .v-radiobutton {
     :root & > input {
@@ -9,7 +9,7 @@
         height: $size;
         top: $offset;
         left: $offset;
-        background: v-valo-selection-color($v-button-background-color);
+        background: valo-selection-color($v-button-background-color);
       }
 
       & ~ label:before,

WebContent/VAADIN/themes/valo/components/_orderedlayout.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-orderedlayout-global {
+@mixin valo-orderedlayout-global {
 
   div.v-layout.v-horizontal.v-widget {
     white-space: nowrap;
@@ -145,7 +145,7 @@
 
 
 
-@mixin v-valo-orderedlayout {
+@mixin valo-orderedlayout {
   
   .v-margin-top {
     padding-top: $v-layout-margin-top;
@@ -171,7 +171,7 @@
 }
 
 
-@mixin v-valo-horizontallayout--wrapping {
+@mixin valo-horizontallayout--wrapping {
     white-space: normal !important;
     
     & > .v-spacing + .v-slot,

WebContent/VAADIN/themes/valo/components/_panel.scss

@@ -9,39 +9,39 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default;
 
 
 
-@mixin v-valo-panel ($primary-stylename: v-panel) {
+@mixin valo-panel ($primary-stylename: v-panel) {
 
   .#{$primary-stylename} {
-    @include v-valo-panel-style;
+    @include valo-panel-style;
   }
 
   .#{$primary-stylename}-caption {
-    @include v-valo-panel-caption-style;
+    @include valo-panel-caption-style;
   }
 
   .#{$primary-stylename}-content {
     @include box-sizing(border-box);
     width: 100%;
     height: 100%;
-    @include v-valo-panel-adjust-content-margins;
+    @include valo-panel-adjust-content-margins;
   }
 
 }
 
 
 
-@function v-valo-panel-background-color ($context: $v-app-background-color) {
+@function valo-panel-background-color ($context: $v-app-background-color) {
   $bg-color: lighten($context, 5%);
   @return $bg-color;
 }
 
 
-@function v-valo-panel-caption-background-color ($background-color) {
+@function valo-panel-caption-background-color ($background-color) {
   @return $background-color or $v-app-background-color;
 }
 
 
-@function v-valo-panel-border-color ($background-color: $v-app-background-color) {
+@function valo-panel-border-color ($background-color: $v-app-background-color) {
   $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color);
   $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-30%, -$v-bevel-depth/2)));
   $border-color: scale-color($border-color, $saturation: -$v-bevel-depth/2);
@@ -49,36 +49,36 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default;
 }
 
 
-@mixin v-valo-panel-style {
-  background: v-valo-panel-background-color();
+@mixin valo-panel-style {
+  background: valo-panel-background-color();
   border-radius: $v-panel-border-radius;
-  border: $v-panel-border-width solid v-valo-panel-border-color(v-valo-panel-background-color());
-  box-shadow: v-valo-shadow($shadow-style: $v-panel-shadow-style);
+  border: $v-panel-border-width solid valo-panel-border-color(valo-panel-background-color());
+  box-shadow: valo-shadow($shadow-style: $v-panel-shadow-style);
 }
 
 
-@mixin v-valo-panel-caption-style ($background-color: $v-panel-caption-background-color) {
+@mixin valo-panel-caption-style ($background-color: $v-panel-caption-background-color) {
   @include box-sizing(border-box);
   padding: 0 round($v-unit-size/3);
   line-height: $v-unit-size;
-  $_bg: v-valo-panel-caption-background-color($background-color);
+  $_bg: valo-panel-caption-background-color($background-color);
   $_border-color: scale-color($_bg, $lightness: -$v-panel-caption-bevel-depth/2, $saturation: -$v-panel-caption-bevel-depth/2);
   border-bottom: $v-panel-border-width solid $_border-color;
   border-bottom-color: rgba($_border-color, .8);
-  @include v-valo-gradient($color: $_bg, $depth: $v-panel-caption-gradient-depth);
-  color: v-valo-font-color($_bg);
+  @include valo-gradient($color: $_bg, $depth: $v-panel-caption-gradient-depth);
+  color: valo-font-color($_bg);
   font-weight: $v-caption-font-weight;
   font-size: $v-caption-font-size;
-  box-shadow: v-valo-bevel($_bg, $bevel-style: $v-panel-caption-bevel-style, $bevel-depth: $v-panel-caption-bevel-depth, $gradient-depth: $v-panel-caption-gradient-depth);
+  box-shadow: valo-bevel($_bg, $bevel-style: $v-panel-caption-bevel-style, $bevel-depth: $v-panel-caption-bevel-depth, $gradient-depth: $v-panel-caption-gradient-depth);
 }
 
 
-@mixin v-valo-panel-well-style {
+@mixin valo-panel-well-style {
   $_bg: scale-color(adjust-color($v-app-background-color, $lightness: -2%), $saturation: -1.5%);
   background: $_bg;
-  box-shadow: v-valo-shadow($shadow-style: (0 1px 0 0 v-hilite, join(inset, $v-panel-shadow-style)));
+  box-shadow: valo-shadow($shadow-style: (0 1px 0 0 v-hilite, join(inset, $v-panel-shadow-style)));
   border-radius: $v-border-radius;
-  border: $v-border-width solid v-valo-panel-border-color(v-valo-panel-background-color());
+  border: $v-border-width solid valo-panel-border-color(valo-panel-background-color());
 
   .v-panel-caption {
     background: transparent;
@@ -87,7 +87,7 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default;
 }
 
 
-@mixin v-valo-panel-borderless-style {
+@mixin valo-panel-borderless-style {
   background: transparent;
   border: none;
   box-shadow: none;
@@ -99,7 +99,7 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default;
 }
 
 
-@mixin v-valo-panel-adjust-content-margins {
+@mixin valo-panel-adjust-content-margins {
   > .v-margin-top {
     padding-top: round($v-unit-size/3);
   }

WebContent/VAADIN/themes/valo/components/_popupview.scss

@@ -1,3 +1,3 @@
-@mixin v-valo-popupview ($primary-stylename: v-popupview) {
+@mixin valo-popupview ($primary-stylename: v-popupview) {
   
 }

WebContent/VAADIN/themes/valo/components/_progressbar.scss

@@ -1,36 +1,36 @@
 $v-progressbar-border-radius: $v-border-radius !default;
 
 
-@mixin v-valo-progressbar ($primary-stylename: v-progressbar) {
+@mixin valo-progressbar ($primary-stylename: v-progressbar) {
   
   .#{$primary-stylename}-wrapper {
-    @include v-valo-progressbar-track-style;
+    @include valo-progressbar-track-style;
   }
 
   .#{$primary-stylename}-indicator {
-    @include v-valo-progressbar-indicator-style;
+    @include valo-progressbar-indicator-style;
   }
 
 }
 
 
-@mixin v-valo-progressbar-track-style {
+@mixin valo-progressbar-track-style {
   border-radius: $v-progressbar-border-radius;
   height: round($v-unit-size/4);
   min-width: $v-unit-size * 2;
-  @include v-valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -10%), $saturation: $v-bevel-depth/-2), $style: linear-reverse);
-  box-shadow: v-valo-textfield-box-shadow();
+  @include valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -10%), $saturation: $v-bevel-depth/-2), $style: linear-reverse);
+  box-shadow: valo-textfield-box-shadow();
   @include box-sizing(border-box);
 }
 
 
-@mixin v-valo-progressbar-indicator-style {
+@mixin valo-progressbar-indicator-style {
   border-radius: $v-progressbar-border-radius;
   height: inherit;
   min-width: max($v-border-radius*2, 3px);
-  @include v-valo-gradient($color: v-valo-selection-color());
-  box-shadow: v-valo-button-box-shadow($background-color: v-valo-selection-color(), $bevel-depth: $v-bevel-depth/2);
+  @include valo-gradient($color: valo-selection-color());
+  box-shadow: valo-button-box-shadow($background-color: valo-selection-color(), $bevel-depth: $v-bevel-depth/2);
   border: $v-button-border-width solid;
-  border-color: v-valo-button-border-color($v-bevel-style, $v-bevel-depth/2, v-valo-selection-color());
+  border-color: valo-button-border-color($v-bevel-style, $v-bevel-depth/2, valo-selection-color());
   @include box-sizing(border-box);
 }

WebContent/VAADIN/themes/valo/components/_richtextarea.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-richtextarea ($primary-stylename: v-richtextarea) {
+@mixin valo-richtextarea ($primary-stylename: v-richtextarea) {
   .#{$primary-stylename} .gwt-ToggleButton,
   .#{$primary-stylename} .gwt-PushButton {
     display: inline-block;

WebContent/VAADIN/themes/valo/components/_slider.scss

@@ -5,7 +5,7 @@ $v-slider-handle-height: round($v-unit-size/1.8) !default;
 $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;
 
 
-@mixin v-valo-slider ($primary-stylename: v-slider) {
+@mixin valo-slider ($primary-stylename: v-slider) {
 
   // Round to an even number
   $v-slider-track-size: $v-slider-track-size + $v-slider-track-size%2;
@@ -33,7 +33,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;
   }
 
   .#{$primary-stylename}-base {
-    @include v-valo-progressbar-track-style;
+    @include valo-progressbar-track-style;
     min-width: $v-unit-size * 2;
     height: $v-slider-track-size;
     margin: round(($v-unit-size - $v-slider-track-size)/2) round($v-slider-handle-width/2);
@@ -42,7 +42,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;
     border-radius: $v-slider-track-border-radius;
 
     &:after {
-      @include v-valo-progressbar-indicator-style;
+      @include valo-progressbar-indicator-style;
       min-width: 0;
       content: "";
       display: inline-block;
@@ -64,11 +64,11 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;
     vertical-align: top;
 
     &:before {
-      @include v-valo-button-style;
+      @include valo-button-style;
     }
 
     &:after {
-      @include v-valo-button-focus-style;
+      @include valo-button-focus-style;
       opacity: 0;
       @if $v-animations-enabled {
         @include transition(opacity 200ms);
@@ -95,7 +95,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;
   }
 
   .#{$primary-stylename}-feedback {
-    @include v-valo-tooltip-style;
+    @include valo-tooltip-style;
   }
 
 
@@ -109,7 +109,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;
     height: $v-unit-size * 2; // Effectively min-height
 
     .#{$primary-stylename}-base {
-      @include v-valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -5%), $saturation: $v-bevel-depth/-2), $style: linear-reverse, $direction: to right);
+      @include valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -5%), $saturation: $v-bevel-depth/-2), $style: linear-reverse, $direction: to right);
       min-width: 0;
       width: $v-slider-track-size;
       height: 100% !important;
@@ -118,7 +118,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;
 
       &:after {
         margin-left: 0;
-        @include v-valo-gradient($color: v-valo-selection-color(), $direction: to right);
+        @include valo-gradient($color: valo-selection-color(), $direction: to right);
 
         .v-ie8 & {
           top: round($v-slider-handle-width/2) - 2px;

WebContent/VAADIN/themes/valo/components/_splitpanel.scss

@@ -1,7 +1,7 @@
 $v-splitpanel-splitter-size: round($v-unit-size/5) !default;
 
 
-@mixin v-valo-splitpanel($primary-stylename : v-splitpanel) {
+@mixin valo-splitpanel($primary-stylename : v-splitpanel) {
 
   // Disable splitter shadow (should most likely be a variable)
   $copy: $v-shadow-depth;
@@ -22,7 +22,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default;
 
   .#{$primary-stylename}-hsplitter div,
   .#{$primary-stylename}-vsplitter div {
-    @include v-valo-button-style;
+    @include valo-button-style;
     @include box-sizing(border-box);
     height: auto;
     padding: 0;
@@ -62,7 +62,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default;
     cursor: e-resize;
     cursor: col-resize;
     $color: $v-button-background-color or $v-app-background-color;
-    @include v-valo-gradient($color: $color, $direction: to right);
+    @include valo-gradient($color: $color, $direction: to right);
 
     &:before {
       width: 0;
@@ -105,7 +105,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default;
 
 
 
-@mixin v-valo-splitpanel-small ($primary-stylename: v-splitpanel, $stylename: small) {
+@mixin valo-splitpanel-small ($primary-stylename: v-splitpanel, $stylename: small) {
   .#{$primary-stylename}-vsplitter-#{$stylename},
   .#{$primary-stylename}-hsplitter-#{$stylename} {
     div {

WebContent/VAADIN/themes/valo/components/_table.scss

@@ -11,7 +11,7 @@ $v-table-background-color: null !default;
 
 
 
-@mixin v-valo-table-global ($primary-stylename: v-table) {
+@mixin valo-table-global ($primary-stylename: v-table) {
 
   .#{$primary-stylename}-header table,
   .#{$primary-stylename}-footer table,
@@ -52,7 +52,7 @@ $v-table-background-color: null !default;
 
 
 
-@function v-valo-table-background-color($context: $v-app-background-color) {
+@function valo-table-background-color($context: $v-app-background-color) {
   @if is-dark-color($context) {
     @return darken($context, 2%);
   }
@@ -60,9 +60,9 @@ $v-table-background-color: null !default;
 }
 
 
-@mixin v-valo-table ($primary-stylename: v-table) {
+@mixin valo-table ($primary-stylename: v-table) {
 
-  $background-color: $v-table-background-color or v-valo-table-background-color();
+  $background-color: $v-table-background-color or valo-table-background-color();
   $border-color: $v-table-border-color or darken($v-app-background-color, max(5%, $v-bevel-depth/3));
 
   .#{$primary-stylename} {
@@ -81,10 +81,10 @@ $v-table-background-color: null !default;
   .#{$primary-stylename}-footer-wrap,
   .#{$primary-stylename}-header-drag {
     border: $v-table-border-width solid $border-color;
-    @include v-valo-gradient($v-app-background-color);
+    @include valo-gradient($v-app-background-color);
     white-space: nowrap;
     font-size: $v-table-header-font-size;
-    text-shadow: v-valo-button-text-shadow($v-app-background-color, $v-bevel-depth);
+    text-shadow: valo-button-text-shadow($v-app-background-color, $v-bevel-depth);
   }
 
   .#{$primary-stylename}-header-wrap {
@@ -185,15 +185,15 @@ $v-table-background-color: null !default;
   }
 
   .#{$primary-stylename} [class*="-row"].v-selected {
-    $selected-border-color: darken(v-valo-selection-color(), 8%);
+    $selected-border-color: darken(valo-selection-color(), 8%);
 
-    @include v-valo-gradient(v-valo-selection-color());
+    @include valo-gradient(valo-selection-color());
     background-origin: border-box;
-    color: v-valo-font-color(v-valo-selection-color(), 0.9);
-    text-shadow: v-valo-button-text-shadow(v-valo-selection-color(), $v-bevel-depth);
+    color: valo-font-color(valo-selection-color(), 0.9);
+    text-shadow: valo-button-text-shadow(valo-selection-color(), $v-bevel-depth);
 
     + .v-selected {
-      $gradient-end: first(last(v-valo-gradient-color-stops(v-valo-selection-color())));
+      $gradient-end: first(last(valo-gradient-color-stops(valo-selection-color())));
       background: $gradient-end;
 
       td {
@@ -233,17 +233,17 @@ $v-table-background-color: null !default;
   }
 
   .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before {
-    @include v-valo-table-sort-asc-icon-style;
+    @include valo-table-sort-asc-icon-style;
   }
 
   .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before {
-    @include v-valo-table-sort-desc-icon-style;
+    @include valo-table-sort-desc-icon-style;
   }
 
 
   .#{$primary-stylename}-focus {
     $outline-width: max($v-table-border-width, 1px);
-    outline: $outline-width solid v-valo-focus-color();
+    outline: $outline-width solid valo-focus-color();
     outline-offset: -$outline-width;
   }
 
@@ -261,18 +261,18 @@ $v-table-background-color: null !default;
   }
 
   .#{$primary-stylename}-focus-slot-right {
-    border-right: 2px solid rgba(v-valo-focus-color(), .5);
+    border-right: 2px solid rgba(valo-focus-color(), .5);
   }
 
   .#{$primary-stylename}-focus-slot-left {
-    border-left: 2px solid rgba(v-valo-focus-color(), .5);
+    border-left: 2px solid rgba(valo-focus-color(), .5);
     left: 0;
     right: auto;
     margin-left: 0 !important;
   }
 
   .#{$primary-stylename}-column-selector {
-    @include v-valo-button-style;
+    @include valo-button-style;
     position: absolute;
     z-index: 2;
     top: round($v-unit-size/-4);
@@ -300,10 +300,10 @@ $v-table-background-color: null !default;
       border-radius: inherit;
     }
     &:active:after {
-      @include v-valo-button-active-style;
+      @include valo-button-active-style;
     }
     &:before {
-      @include v-valo-table-column-selector-icon-style;
+      @include valo-table-column-selector-icon-style;
     }
   }
 
@@ -315,7 +315,7 @@ $v-table-background-color: null !default;
   .v-on,
   .v-off {
     &:before {
-      @include v-valo-table-column-visible-icon-style;
+      @include valo-table-column-visible-icon-style;
       font-size: 0.9em;
       margin-right: round($v-unit-size/6);
     }
@@ -337,7 +337,7 @@ $v-table-background-color: null !default;
 
     tr {
       display: block;
-      @include v-valo-drag-element-style;
+      @include valo-drag-element-style;
 
       &[style*="hidden"] {
 
@@ -369,14 +369,14 @@ $v-table-background-color: null !default;
   // Drag'n'drop styles
 
   .#{$primary-stylename}-drag .#{$primary-stylename}-body {
-    box-shadow: 0 0 0 2px rgba(v-valo-focus-color(), .5);
+    box-shadow: 0 0 0 2px rgba(valo-focus-color(), .5);
 
-    @if color-luminance(v-valo-focus-color()) + 50 < color-luminance($background-color) {
-      border-color: v-valo-focus-color();
+    @if color-luminance(valo-focus-color()) + 50 < color-luminance($background-color) {
+      border-color: valo-focus-color();
     }
 
     .v-ie8 & {
-      border-color: v-valo-focus-color();
+      border-color: valo-focus-color();
     }
 
     .#{$primary-stylename}-focus {
@@ -391,7 +391,7 @@ $v-table-background-color: null !default;
     height: $v-table-row-height + $v-table-border-width;
     left: 0;
     right: 0;
-    background: v-valo-focus-color();
+    background: valo-focus-color();
     @include opacity(.2);
   }
 
@@ -403,10 +403,10 @@ $v-table-background-color: null !default;
     height: 2px;
     left: 0;
     right: 0;
-    background: v-valo-focus-color();
+    background: valo-focus-color();
     font-size: $v-font-size * 2;
     line-height: 2px;
-    color: v-valo-focus-color();
+    color: valo-focus-color();
     text-indent: round($v-font-size/-4);
     text-shadow: 0 0 1px $background-color, 0 0 1px $background-color;
   }
@@ -430,22 +430,22 @@ $v-table-background-color: null !default;
 
 
 
-@mixin v-valo-table-sort-asc-icon-style {
+@mixin valo-table-sort-asc-icon-style {
   content: '\f0dd';
   font-family: FontAwesome;
 }
 
-@mixin v-valo-table-sort-desc-icon-style {
+@mixin valo-table-sort-desc-icon-style {
   content: '\f0de';
   font-family: FontAwesome;
 }
 
-@mixin v-valo-table-column-selector-icon-style {
+@mixin valo-table-column-selector-icon-style {
   font-family: FontAwesome;
   content: "\f013";
 }
 
-@mixin v-valo-table-column-visible-icon-style {
+@mixin valo-table-column-visible-icon-style {
   content: "\f00c";
   font-family: FontAwesome;
 }
@@ -453,7 +453,7 @@ $v-table-background-color: null !default;
 
 
 
-@mixin v-valo-table-no-stripes ($primary-stylename: v-table) {
+@mixin valo-table-no-stripes ($primary-stylename: v-table) {
   .#{$primary-stylename}-row,
   .#{$primary-stylename}-row-odd {
     background: transparent;
@@ -463,7 +463,7 @@ $v-table-background-color: null !default;
 
 
 
-@mixin v-valo-table-no-vertical-lines ($primary-stylename: v-table) {
+@mixin valo-table-no-vertical-lines ($primary-stylename: v-table) {
   .#{$primary-stylename}-cell-content,
   [class*="row"].v-selected .#{$primary-stylename}-cell-content {
     border-left-color: transparent;
@@ -471,7 +471,7 @@ $v-table-background-color: null !default;
   }
 }
 
-@mixin v-valo-table-no-horizontal-lines ($primary-stylename: v-table) {
+@mixin valo-table-no-horizontal-lines ($primary-stylename: v-table) {
   .#{$primary-stylename}-cell-content,
   [class*="row"].v-selected .#{$primary-stylename}-cell-content {
     border-top-color: transparent;
@@ -479,13 +479,13 @@ $v-table-background-color: null !default;
   }
 }
 
-@mixin v-valo-table-no-header ($primary-stylename: v-table) {
+@mixin valo-table-no-header ($primary-stylename: v-table) {
   .#{$primary-stylename}-header-wrap {
     display: none;
   }
 }
 
-@mixin v-valo-table-borderless ($primary-stylename: v-table) {
+@mixin valo-table-borderless ($primary-stylename: v-table) {
   .#{$primary-stylename}-header-wrap,
   .#{$primary-stylename}-footer-wrap,
   .#{$primary-stylename}-header-drag,

WebContent/VAADIN/themes/valo/components/_tabsheet.scss

@@ -3,7 +3,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 
-@mixin v-valo-tabsheet-global ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet-global ($primary-stylename: v-tabsheet) {
   .#{$primary-stylename}-hidetabs > .#{$primary-stylename}-tabcontainer,
   .#{$primary-stylename}-spacertd,
   .#{$primary-stylename}-deco,
@@ -22,7 +22,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 
-@mixin v-valo-tabsheet ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet ($primary-stylename: v-tabsheet) {
 
   $_scale: if( is-dark-color($v-app-background-color) , max(5%, $v-bevel-depth/2), min(-5%, -$v-bevel-depth/2) );
   $border-color: scale-color($v-app-background-color, $lightness: $_scale);
@@ -98,7 +98,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
       }
 
       &:hover {
-        color: v-valo-selection-color();
+        color: valo-selection-color();
       }
 
       &.v-disabled {
@@ -119,14 +119,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     outline: none;
 
     .v-caption {
-      color: v-valo-selection-color();
-      border-bottom: $v-border-width solid v-valo-selection-color();
+      color: valo-selection-color();
+      border-bottom: $v-border-width solid valo-selection-color();
     }
   }
 
   .#{$primary-stylename}-tabitem-selected .v-caption.v-caption {
-    border-bottom: $v-border-width*2 solid v-valo-selection-color();
-    color: v-valo-selection-color();
+    border-bottom: $v-border-width*2 solid valo-selection-color();
+    color: valo-selection-color();
   }
 
   .#{$primary-stylename}-caption-close {
@@ -139,13 +139,13 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     border-radius: round($v-border-radius/2);
 
     &:hover {
-      background: v-valo-selection-color();
-      color: v-valo-font-color(v-valo-selection-color());
+      background: valo-selection-color();
+      color: valo-font-color(valo-selection-color());
     }
 
     &:active {
-      background: darken(v-valo-selection-color(), 5%);
-      color: v-valo-font-color(v-valo-selection-color());
+      background: darken(valo-selection-color(), 5%);
+      color: valo-font-color(valo-selection-color());
     }
   }
 
@@ -195,12 +195,12 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
       &:hover {
         @include opacity(1);
-        color: v-valo-selection-color();
+        color: valo-selection-color();
       }
 
       &:active {
         @include opacity(.7);
-        color: v-valo-selection-color();
+        color: valo-selection-color();
       }
 
       &::-moz-focus-inner {
@@ -212,14 +212,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     [class*="Next"] {
       padding-left: round($v-unit-size/8);
       &:before {
-        @include v-valo-tabsheet-scroller-next-icon-style;
+        @include valo-tabsheet-scroller-next-icon-style;
       }
     }
 
     [class*="Prev"] {
       padding-right: round($v-unit-size/8);
       &:before {
-        @include v-valo-tabsheet-scroller-prev-icon-style;
+        @include valo-tabsheet-scroller-prev-icon-style;
       }
     }
 
@@ -233,7 +233,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
   @if $v-tabsheet-content-animation-enabled {
     .#{$primary-stylename}-tabsheetpanel > .v-scrollable > .v-widget {
-      @include v-valo-anim-fade-in(300ms);
+      @include valo-anim-fade-in(300ms);
     }
   }
 
@@ -243,13 +243,13 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 
-@mixin v-valo-tabsheet-centered-tabs ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet-centered-tabs ($primary-stylename: v-tabsheet) {
   .#{$primary-stylename}-tabcontainer {
     text-align: center;
   }
 }
 
-@mixin v-valo-tabsheet-equal-width-tabs ($primary-stylename: v-tabsheet, $flex: false) {
+@mixin valo-tabsheet-equal-width-tabs ($primary-stylename: v-tabsheet, $flex: false) {
   .#{$primary-stylename}-tabcontainer {
     table,
     tbody,
@@ -276,7 +276,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   }
 }
 
-@mixin v-valo-tabsheet-icons-on-top ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet-icons-on-top ($primary-stylename: v-tabsheet) {
   .#{$primary-stylename}-tabs {
     height: $v-unit-size * 2;
 
@@ -308,7 +308,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   }
 }
 
-@mixin v-valo-tabsheet-only-selected-closable ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet-only-selected-closable ($primary-stylename: v-tabsheet) {
   .#{$primary-stylename}-caption-close {
     visibility: hidden;
   }
@@ -318,18 +318,18 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   }
 }
 
-@mixin v-valo-tabsheet-padded-tabbar ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet-padded-tabbar ($primary-stylename: v-tabsheet) {
   .#{$primary-stylename}-tabs {
     padding: 0 round($v-unit-size/4);
   }
 }
 
-@mixin v-valo-tabsheet-scroller-prev-icon-style {
+@mixin valo-tabsheet-scroller-prev-icon-style {
   font-family: FontAwesome;
   content: "\f053";
 }
 
-@mixin v-valo-tabsheet-scroller-next-icon-style {
+@mixin valo-tabsheet-scroller-next-icon-style {
   font-family: FontAwesome;
   content: "\f054";
 }

WebContent/VAADIN/themes/valo/components/_textarea.scss

@@ -1,25 +1,25 @@
-@mixin v-valo-textarea ($primary-stylename: v-textarea) {
+@mixin valo-textarea ($primary-stylename: v-textarea) {
   
   .#{$primary-stylename} {
-    @include v-valo-textarea-style;
+    @include valo-textarea-style;
     width: $v-default-field-width;
   }
 
   .#{$primary-stylename}-readonly {
-    @include v-valo-textfield-readonly-style;
+    @include valo-textfield-readonly-style;
   }
 
 }
 
 
-@mixin v-valo-textarea-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
+@mixin valo-textarea-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
                               $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth,
                               $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
                               $background-color: $v-textfield-background-color) {
 
   $unit-size: $unit-size or $v-unit-size;
 
-  @include v-valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, 
+  @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, 
                                   $shadow-style: $shadow-style, $shadow-depth: $shadow-depth,
                                   $unit-size: $unit-size, $border-radius: $border-radius, 
                                   $background-color: $background-color);

WebContent/VAADIN/themes/valo/components/_textfield.scss

@@ -12,7 +12,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@function v-valo-textfield-background-color ($context) {
+@function valo-textfield-background-color ($context) {
   $bg-color: lighten($context, 8%);
   @if is-dark-color($context) {
     $bg-color: darken($context, 4%);
@@ -24,13 +24,13 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@function v-valo-textfield-box-shadow ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
+@function valo-textfield-box-shadow ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
                                        $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) {
   @if $bevel-depth == 0 and $shadow-depth == 0 {
     @return null;
   }
-  $_bevel: v-valo-replace-hilite-and-shade($bevel-style, white($bevel-depth/500%), black($bevel-depth/500%));
-  $_shadow: v-valo-shadow($shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
+  $_bevel: valo-replace-hilite-and-shade($bevel-style, white($bevel-depth/500%), black($bevel-depth/500%));
+  $_shadow: valo-shadow($shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
 
   @if $_bevel and $_shadow {
     @return $_bevel, $_shadow;
@@ -47,7 +47,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@mixin v-valo-textfield-size ($unit-size: $v-unit-size, $border-radius: $v-textfield-border-radius) {
+@mixin valo-textfield-size ($unit-size: $v-unit-size, $border-radius: $v-textfield-border-radius) {
   height: $unit-size;
   $padding-width: ceil($unit-size/6);
   @if $border-radius {
@@ -58,9 +58,9 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@function v-valo-textfield-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
+@function valo-textfield-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
                                          $background-color: $v-textfield-background-color) {
-  $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color);
+  $background-color: $background-color or valo-textfield-background-color($v-app-background-color);
   $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color);
   $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-50%, -$bevel-depth/2)));
   $border-color: scale-color($border-color, $saturation: -$bevel-depth/2);
@@ -70,12 +70,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@mixin v-valo-textfield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
+@mixin valo-textfield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
                                $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth,
                                $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
                                $background-color: $v-textfield-background-color) {
 
-  $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color);
+  $background-color: $background-color or valo-textfield-background-color($v-app-background-color);
   $unit-size: $unit-size or $v-unit-size;
   
   @include appearance(none);
@@ -83,12 +83,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
   font: inherit;
   font-size: if($v-textfield-font-size != $v-font-size, $v-textfield-font-size, null);
   font-weight: $v-textfield-font-weight;
-  @include v-valo-textfield-size($unit-size, $border-radius);
+  @include valo-textfield-size($unit-size, $border-radius);
   border-radius: $border-radius;
-  border: $v-textfield-border-width solid v-valo-textfield-border-color($bevel-style, $bevel-depth, $background-color);
+  border: $v-textfield-border-width solid valo-textfield-border-color($bevel-style, $bevel-depth, $background-color);
   background: $background-color;
-  color: v-valo-font-color($background-color);
-  box-shadow: v-valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
+  color: valo-font-color($background-color);
+  box-shadow: valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
 
   @if $v-animations-enabled {
     @include transition(box-shadow 180ms, border 180ms);
@@ -99,20 +99,20 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
   }
 
   &:focus {
-    @include v-valo-textfield-focus-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
+    @include valo-textfield-focus-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
   }
   
   // TODO allow parent selector to be used in interpolation
   &.v-textfield-prompt,
   &.v-textarea-prompt {
-    @include v-valo-textfield-prompt-style($background-color);
+    @include valo-textfield-prompt-style($background-color);
   }
 
 }
 
 
-@mixin v-valo-textfield-prompt-style ($background-color) {
-  $font-color: v-valo-font-color($background-color);
+@mixin valo-textfield-prompt-style ($background-color) {
+  $font-color: valo-font-color($background-color);
   $font-color: mix($background-color, $font-color);
   @if is-dark-color($background-color) and saturation($background-color) > 50% {
     $font-color: scale-color($font-color, $lightness: 20%);
@@ -122,49 +122,49 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
-@mixin v-valo-textfield-focus-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
+@mixin valo-textfield-focus-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
                                      $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) {
   outline: none;
   @if $v-animations-enabled {
     @include transition(none);
   } 
   
-  $focus-color: v-valo-focus-color();
+  $focus-color: valo-focus-color();
   
   @if color-luminance($focus-color) + 50 < color-luminance($v-app-background-color) {
     border-color: $focus-color;
   }
   
-  box-shadow: v-valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth), 
-              v-valo-focus-box-shadow($color: $focus-color);
+  box-shadow: valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth), 
+              valo-focus-box-shadow($color: $focus-color);
 }
 
 
-@mixin v-valo-textfield-readonly-style {
+@mixin valo-textfield-readonly-style {
   background: transparent;
   box-shadow: none;
   &:focus {
-    box-shadow: v-valo-focus-box-shadow();
+    box-shadow: valo-focus-box-shadow();
   }
 }
 
 
-@mixin v-valo-textfield ($primary-stylename: v-textfield) {
+@mixin valo-textfield ($primary-stylename: v-textfield) {
   
   .#{$primary-stylename} {
-    @include v-valo-textfield-style;
+    @include valo-textfield-style;
     width: $v-default-field-width;
   }
   
   .#{$primary-stylename}-readonly {
-    @include v-valo-textfield-readonly-style;
+    @include valo-textfield-readonly-style;
   }
   
 }
 
 
 
-@mixin v-valo-textfield-borderless-style ($background-color: transparent) {
+@mixin valo-textfield-borderless-style ($background-color: transparent) {
   border: none;
   border-radius: 0;
   background: $background-color;
@@ -177,7 +177,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@mixin v-valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-textfield-font-size, $image-icon-size: 16px) {
+@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-textfield-font-size, $image-icon-size: 16px) {
   .v-slot-#{$stylename} {
     position: relative;
   }
@@ -186,7 +186,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
     padding: 0;
 
     .v-captiontext {
-      @include v-valo-caption-style;
+      @include valo-caption-style;
       margin: 0;
     }
 

WebContent/VAADIN/themes/valo/components/_tree.scss

@@ -4,7 +4,7 @@ $v-tree-expand-animation-enabled: false !default;
 
 
 @if $v-tree-expand-animation-enabled {
-  @include keyframes(v-valo-tree-node-open) {
+  @include keyframes(valo-tree-node-open) {
     0% {
       max-height: 0;
     }
@@ -13,7 +13,7 @@ $v-tree-expand-animation-enabled: false !default;
     }
   }
 
-  @include keyframes(v-valo-tree-node-close) {
+  @include keyframes(valo-tree-node-close) {
     0% {
       max-height: $v-tree-row-height * 10;
     }
@@ -24,7 +24,7 @@ $v-tree-expand-animation-enabled: false !default;
 }
 
 
-@mixin v-valo-tree ($primary-stylename: v-tree) {
+@mixin valo-tree ($primary-stylename: v-tree) {
   
   .#{$primary-stylename} {
     position: relative;
@@ -52,7 +52,7 @@ $v-tree-expand-animation-enabled: false !default;
         margin-left: -1.9em;
         //background: red;
         vertical-align: top;
-        @include v-valo-tree-collapsed-icon-style;
+        @include valo-tree-collapsed-icon-style;
         text-align: center;
       }
     }
@@ -75,7 +75,7 @@ $v-tree-expand-animation-enabled: false !default;
       z-index: 2;
 
       &:before {
-        @include v-valo-tree-collapsed-icon-style;
+        @include valo-tree-collapsed-icon-style;
         display: inline-block;
         width: .5em;
         text-align: center;
@@ -137,16 +137,16 @@ $v-tree-expand-animation-enabled: false !default;
   }
   
   .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-caption > div:before {
-    @include v-valo-tree-expanded-icon-style;
+    @include valo-tree-expanded-icon-style;
 
     @if $v-tree-animations-enabled {
       @include transform(rotate(90deg));
-      @include v-valo-tree-collapsed-icon-style;
+      @include valo-tree-collapsed-icon-style;
     }
   }
 
   .v-ie8 & .#{$primary-stylename}-node-expanded:before {
-    @include v-valo-tree-expanded-icon-style(true);
+    @include valo-tree-expanded-icon-style(true);
   }
 
 
@@ -155,19 +155,19 @@ $v-tree-expand-animation-enabled: false !default;
     // This a v-tree-node-caption element
     &:after {
       opacity: 1;
-      border: 1px solid v-valo-focus-color();
+      border: 1px solid valo-focus-color();
     }
   }
   
   
   
   .#{$primary-stylename}-node-selected {
-    color: v-valo-font-color(v-valo-selection-color(), 0.9);
-    text-shadow: v-valo-button-text-shadow(v-valo-selection-color(), $v-bevel-depth);
+    color: valo-font-color(valo-selection-color(), 0.9);
+    text-shadow: valo-button-text-shadow(valo-selection-color(), $v-bevel-depth);
 
     &:after {
       opacity: 1;
-      @include v-valo-gradient(v-valo-selection-color());
+      @include valo-gradient(valo-selection-color());
       border: none;
 
       .v-ie8 & {
@@ -176,7 +176,7 @@ $v-tree-expand-animation-enabled: false !default;
     }
 
     .v-ie8 & {
-      @include v-valo-gradient(v-valo-selection-color());
+      @include valo-gradient(valo-selection-color());
     }
   }
   
@@ -190,12 +190,12 @@ $v-tree-expand-animation-enabled: false !default;
 
   @if $v-tree-expand-animation-enabled {
     .#{$primary-stylename}-node-children[style*="display: none"] {
-      @include animation(v-valo-tree-node-close 400ms ease-out forwards);
+      @include animation(valo-tree-node-close 400ms ease-out forwards);
       display: block !important;
     }
 
     .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children {
-      @include animation(v-valo-tree-node-open 400ms ease-in);
+      @include animation(valo-tree-node-open 400ms ease-in);
     }
   }
 
@@ -210,21 +210,21 @@ $v-tree-expand-animation-enabled: false !default;
     position: absolute;
     height: 2px;
     width: 100%;
-    background: v-valo-focus-color();
+    background: valo-focus-color();
     font-size: $v-font-size * 2;
     line-height: 2px;
-    color: v-valo-focus-color();
+    color: valo-focus-color();
     text-indent: round($v-font-size/-4);
     text-shadow: 0 0 1px $v-app-background-color, 0 0 1px $v-app-background-color;
   }
 
   .#{$primary-stylename}-node-caption-drag-center {
-    box-shadow: 0 0 0 2px v-valo-focus-color();
+    box-shadow: 0 0 0 2px valo-focus-color();
     position: relative;
     border-radius: $v-border-radius;
 
     .v-ie8 & {
-      outline: 2px solid v-valo-focus-color();
+      outline: 2px solid valo-focus-color();
     }
   }
 
@@ -240,12 +240,12 @@ $v-tree-expand-animation-enabled: false !default;
 }
 
 
-@mixin v-valo-tree-collapsed-icon-style {
+@mixin valo-tree-collapsed-icon-style {
   content: "\f0da";
   font-family: FontAwesome;
 }
 
-@mixin v-valo-tree-expanded-icon-style ($force: false) {
+@mixin valo-tree-expanded-icon-style ($force: false) {
   @if $v-tree-animations-enabled == false or $force {
     content: "\f0d7";
     font-family: FontAwesome;

WebContent/VAADIN/themes/valo/components/_treetable.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-treetable ($primary-stylename: v-treetable) {
+@mixin valo-treetable ($primary-stylename: v-treetable) {
   .v-table-cell-wrapper {
     //position: relative;
   }
@@ -18,10 +18,10 @@
   }
 
   .#{$primary-stylename}-node-closed:before {
-    @include v-valo-tree-collapsed-icon-style;
+    @include valo-tree-collapsed-icon-style;
   }
 
   .#{$primary-stylename}-node-open:before {
-    @include v-valo-tree-expanded-icon-style($force: true);
+    @include valo-tree-expanded-icon-style($force: true);
   }
 }

WebContent/VAADIN/themes/valo/components/_twincolselect.scss

@@ -1,10 +1,10 @@
-@mixin v-valo-twincolselect ($primary-stylename: v-select-twincol) {
+@mixin valo-twincolselect ($primary-stylename: v-select-twincol) {
   
   .#{$primary-stylename} {
     white-space: normal;
     
     select {
-      @include v-valo-nativeselect-select-style;
+      @include valo-nativeselect-select-style;
     }
 
     &:not(.v-has-width) {
@@ -24,7 +24,7 @@
 
   .#{$primary-stylename}-caption-left,
   .#{$primary-stylename}-caption-right {
-    @include v-valo-caption-style;
+    @include valo-caption-style;
   }
   
   .#{$primary-stylename}-buttons {
@@ -35,7 +35,7 @@
     min-width: 3.5em;
 
     .v-button {
-      @include v-valo-widget-style;
+      @include valo-widget-style;
       position: absolute;
       left: round($v-unit-size/4);
       right: round($v-unit-size/4);
@@ -67,11 +67,11 @@
     }
 
     .v-button-wrap:before {
-      @include v-valo-twincolselect-remove-icon-style;
+      @include valo-twincolselect-remove-icon-style;
     }
 
     .v-button:first-child .v-button-wrap:before {
-      @include v-valo-twincolselect-add-icon-style;
+      @include valo-twincolselect-add-icon-style;
     }
   }
   
@@ -79,12 +79,12 @@
 
 
 
-@mixin v-valo-twincolselect-add-icon-style {
+@mixin valo-twincolselect-add-icon-style {
   font-family: FontAwesome;
   content: "\f054";
 }
 
-@mixin v-valo-twincolselect-remove-icon-style {
+@mixin valo-twincolselect-remove-icon-style {
   font-family: FontAwesome;
   content: "\f053";
 }

WebContent/VAADIN/themes/valo/components/_upload.scss

@@ -1,5 +1,5 @@
-@mixin v-valo-upload ($primary-stylename: v-upload) {
+@mixin valo-upload ($primary-stylename: v-upload) {
   .#{$primary-stylename} .v-button {
-    @include v-valo-widget-style;
+    @include valo-widget-style;
   }
 }

WebContent/VAADIN/themes/valo/components/_widget.scss

@@ -1,6 +1,6 @@
 // 
-// @mixin v-valo-widget-style
-@mixin v-valo-widget-style {
+// @mixin valo-widget-style
+@mixin valo-widget-style {
   // Baseline expectations for all Vaadin widgets
   @include box-sizing(border-box);
   display: inline-block;
@@ -19,8 +19,8 @@
 }
 
 
-@mixin v-valo-widget {
+@mixin valo-widget {
   .v-widget {
-    @include v-valo-widget-style;
+    @include valo-widget-style;
   }
 }

WebContent/VAADIN/themes/valo/components/_window.scss

@@ -5,17 +5,17 @@ $v-window-animations-enabled: $v-animations-enabled !default;
 
 
 @if $v-window-animations-enabled {
-  @include keyframes(v-valo-modal-window-indication) {
+  @include keyframes(valo-modal-window-indication) {
     0% { opacity: 0; }
     100% { opacity: 1; }
   }
 }
 
 
-@mixin v-valo-window ($primary-stylename: v-window) {
+@mixin valo-window ($primary-stylename: v-window) {
 
   .#{$primary-stylename} {
-    @include v-valo-overlay-style;
+    @include valo-overlay-style;
 
     @if $v-window-animations-enabled and $v-window-open-animation {
       @include animation($v-window-open-animation);
@@ -25,7 +25,7 @@ $v-window-animations-enabled: $v-animations-enabled !default;
       @if $v-window-shadow-style == none {
         box-shadow: none;
       } @else {
-        box-shadow: v-valo-shadow($shadow-style: $v-window-shadow-style);
+        box-shadow: valo-shadow($shadow-style: $v-window-shadow-style);
       }
     }
     border-radius: $v-window-border-radius;
@@ -76,7 +76,7 @@ $v-window-animations-enabled: $v-animations-enabled !default;
       right: 0;
       left: 0;
       height: 1px;
-      $_bg: v-valo-overlay-background-color();
+      $_bg: valo-overlay-background-color();
       background: adjust-color($_bg, $lightness: if(is-dark-color($_bg), 3%, -5%), $saturation: -10%);
     }
   }
@@ -90,7 +90,7 @@ $v-window-animations-enabled: $v-animations-enabled !default;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: blend-normal(rgba(v-valo-font-color(v-valo-overlay-background-color()), .7), v-valo-overlay-background-color());
+    color: blend-normal(rgba(valo-font-color(valo-overlay-background-color()), .7), valo-overlay-background-color());
   }
   
   .#{$primary-stylename}-closebox,
@@ -118,7 +118,7 @@ $v-window-animations-enabled: $v-animations-enabled !default;
     
     &:hover {
       @include opacity(1);
-      color: v-valo-selection-color();
+      color: valo-selection-color();
     }
     
     &:active {
@@ -127,7 +127,7 @@ $v-window-animations-enabled: $v-animations-enabled !default;
   }
   
   .#{$primary-stylename}-closebox {
-    @include v-valo-window-close-icon-style;
+    @include valo-window-close-icon-style;
   }
   
   .#{$primary-stylename}-maximizebox,
@@ -141,11 +141,11 @@ $v-window-animations-enabled: $v-animations-enabled !default;
   }
 
   .#{$primary-stylename}-maximizebox {
-    @include v-valo-window-maximize-icon-style;
+    @include valo-window-maximize-icon-style;
   }
   
   .#{$primary-stylename}-restorebox {
-    @include v-valo-window-restore-icon-style;
+    @include valo-window-restore-icon-style;
   }
   
   .v-window > .popupContent,
@@ -161,10 +161,10 @@ $v-window-animations-enabled: $v-animations-enabled !default;
     margin-top: 0 !important;
 
     > .v-scrollable {
-      @include v-valo-panel-adjust-content-margins;
+      @include valo-panel-adjust-content-margins;
 
       > .v-formlayout {
-        @include v-valo-formlayout-margins($all: round($v-unit-size/3));
+        @include valo-formlayout-margins($all: round($v-unit-size/3));
       }
 
       position: relative;
@@ -179,7 +179,7 @@ $v-window-animations-enabled: $v-animations-enabled !default;
         z-index: 2;
         top: 0;
         height: 1px;
-        background: v-valo-overlay-background-color();
+        background: valo-overlay-background-color();
         left: 0;
         right: 0;
       }
@@ -252,20 +252,20 @@ $v-window-animations-enabled: $v-animations-enabled !default;
 }
 
 
-@mixin v-valo-window-close-icon-style {
+@mixin valo-window-close-icon-style {
   &:before {
     // times cross
     content: "\00d7";
   }
 }
 
-@mixin v-valo-window-maximize-icon-style {
+@mixin valo-window-maximize-icon-style {
   &:before {
     content: "+";
   }
 }
 
-@mixin v-valo-window-restore-icon-style {
+@mixin valo-window-restore-icon-style {
   &:before {
     // en-dash
     content: "\2013";

WebContent/VAADIN/themes/valo/fonts/_fonts.scss

@@ -6,19 +6,19 @@
 @import "lora/lora";
 
 
-@mixin v-valo-fonts {
-  $v-valo-fonts-pathPrefix: null;
+@mixin valo-fonts {
+  $valo-fonts-pathPrefix: null;
   @if $v-relative-paths == false {
-    $v-valo-fonts-pathPrefix: "../valo/fonts/";
+    $valo-fonts-pathPrefix: "../valo/fonts/";
   }
 
   // Font Awesome
-  @include v-valo-icon-font(FontAwesome, #{$v-valo-fonts-pathPrefix}font-awesome/fontawesome-webfont);
+  @include valo-icon-font(FontAwesome, #{$valo-fonts-pathPrefix}font-awesome/fontawesome-webfont);
 }
 
 
 
-@mixin v-valo-icon-font($font-family, $file-name) {
+@mixin valo-icon-font($font-family, $file-name) {
   @include font-face($font-family, $file-name);
 
   .#{$font-family} {
@@ -38,4 +38,4 @@
 
 // Include directly to avoid trapping inside a parent selector
 // TODO move inside the theme main mixin once we can use Sass 3.3 (@at-root)
-@include v-valo-fonts;
+@include valo-fonts;

WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss

@@ -1,7 +1,7 @@
 // Common styles for components
 // About 40KB of CSS output
 
-@mixin v-valo-common-stylenames {
+@mixin valo-common-stylenames {
 
 	$v-scaling-factor--small: 0.8 !default;
 	$v-scaling-factor--large: 1.2 !default;
@@ -14,143 +14,143 @@
 
 
 	.v-button-primary {
-	  @include v-valo-button-style($background-color: v-valo-selection-color());
+	  @include valo-button-style($background-color: valo-selection-color());
 	  padding: 0 round($v-unit-size/1.4);
 	  font-weight: bold;
 	}
 
 	.v-button-friendly {
-	  @include v-valo-button-style($background-color: #2c9720);
+	  @include valo-button-style($background-color: #2c9720);
 	}
 
 	.v-button-danger {
-	  @include v-valo-button-style($background-color: $v-error-indicator-color);
+	  @include valo-button-style($background-color: $v-error-indicator-color);
 	}
 
 	.v-button-borderless {
-	  @include v-valo-button-borderless-style;
+	  @include valo-button-borderless-style;
 	}
 
 	.v-button-link {
-	  @include v-valo-button-borderless-style;
-	  @include v-valo-link-style;
+	  @include valo-button-borderless-style;
+	  @include valo-link-style;
 	}
 
 	.v-button-small {
-	  @include v-valo-button-style($unit-size: $v-unit-size--small);
+	  @include valo-button-style($unit-size: $v-unit-size--small);
 	  font-size: $v-font-size--small;
 	}
 
 	.v-button-large {
-	  @include v-valo-button-style($unit-size: $v-unit-size--large);
+	  @include valo-button-style($unit-size: $v-unit-size--large);
 	  font-size: $v-font-size--large;
 	}
 
 	.v-button-icon-align-right {
-		@include v-valo-button-icon-align-right-style;
+		@include valo-button-icon-align-right-style;
 	}
 
 	.v-tabsheet-centered-tabs {
-	  @include v-valo-tabsheet-centered-tabs;
+	  @include valo-tabsheet-centered-tabs;
 	}
 
 	.v-tabsheet-equal-width-tabs {
-	  @include v-valo-tabsheet-equal-width-tabs($flex: false);
+	  @include valo-tabsheet-equal-width-tabs($flex: false);
 	}
 
 	.v-tabsheet-icons-on-top {
-	  @include v-valo-tabsheet-icons-on-top;
+	  @include valo-tabsheet-icons-on-top;
 	}
 
 	.v-panel-borderless {
-	  @include v-valo-panel-borderless-style;
+	  @include valo-panel-borderless-style;
 	}
 
 	.v-formlayout.light {
-	  @include v-valo-formlayout-light-style;
+	  @include valo-formlayout-light-style;
 	}
 
 	.v-textfield-borderless,
 	.v-textarea-borderless {
-	  @include v-valo-textfield-borderless-style;
+	  @include valo-textfield-borderless-style;
 	}
 
 	.v-textfield-small {
-	  @include v-valo-textfield-style($unit-size: $v-unit-size--small);
+	  @include valo-textfield-style($unit-size: $v-unit-size--small);
 	  font-size: $v-font-size--small;
 	}
 
 	.v-textfield-large {
-	  @include v-valo-textfield-style($unit-size: $v-unit-size--large);
+	  @include valo-textfield-style($unit-size: $v-unit-size--large);
 	  font-size: $v-font-size--large;
 	}
 
-	@include v-valo-textfield-inline-icon($stylename: inline-icon);
+	@include valo-textfield-inline-icon($stylename: inline-icon);
 
 	.v-textarea-small {
-	  @include v-valo-textarea-style($unit-size: $v-unit-size--small);
+	  @include valo-textarea-style($unit-size: $v-unit-size--small);
 	  font-size: $v-font-size--small;
 	}
 
 	.v-textarea-large {
-	  @include v-valo-textarea-style($unit-size: $v-unit-size--large);
+	  @include valo-textarea-style($unit-size: $v-unit-size--large);
 	  font-size: $v-font-size--large;
 	}
 
 	.v-filterselect-small {
-	  @include v-valo-combobox-style($unit-size: $v-unit-size--small);
+	  @include valo-combobox-style($unit-size: $v-unit-size--small);
 	  font-size: $v-font-size--small;
 	}
 
 	.v-filterselect-large {
-	  @include v-valo-combobox-style($unit-size: $v-unit-size--large);
+	  @include valo-combobox-style($unit-size: $v-unit-size--large);
 	  font-size: $v-font-size--large;
 	}
 
 	.v-datefield-small {
-	  @include v-valo-datefield-style($unit-size: $v-unit-size--small);
+	  @include valo-datefield-style($unit-size: $v-unit-size--small);
 	}
 
 	.v-datefield-large {
-	  @include v-valo-datefield-style($unit-size: $v-unit-size--large);
+	  @include valo-datefield-style($unit-size: $v-unit-size--large);
 	}
 
 	.v-checkbox-small {
-	  @include v-valo-checkbox-style($unit-size: $v-unit-size--small);
+	  @include valo-checkbox-style($unit-size: $v-unit-size--small);
 	}
 
 	.v-checkbox-large {
-	  @include v-valo-checkbox-style($unit-size: $v-unit-size--large);
+	  @include valo-checkbox-style($unit-size: $v-unit-size--large);
 	}
 
 	.v-label-spinner {
-	  @include v-valo-spinner;
+	  @include valo-spinner;
 	}
 
 	.v-panel-well {
-	  @include v-valo-panel-well-style;
+	  @include valo-panel-well-style;
 	}
 
 	.v-panel-borderless {
-	  @include v-valo-panel-borderless-style;
+	  @include valo-panel-borderless-style;
 	}
 
 	.v-csslayout-well {
-	  @include v-valo-panel-well-style;
-	  @include v-valo-panel-adjust-content-margins;
+	  @include valo-panel-well-style;
+	  @include valo-panel-adjust-content-margins;
 	}
 
 	.v-csslayout-card {
-	  @include v-valo-panel-style;
-	  @include v-valo-panel-adjust-content-margins;
+	  @include valo-panel-style;
+	  @include valo-panel-adjust-content-margins;
 	}
 
-	@include v-valo-splitpanel-small($stylename: small);
+	@include valo-splitpanel-small($stylename: small);
 
-	@include v-valo-component-group;
+	@include valo-component-group;
 
 	.wrapping {
-    @include v-valo-horizontallayout--wrapping;
+    @include valo-horizontallayout--wrapping;
   }
 
 }

WebContent/VAADIN/themes/valo/shared/_contextmenu.scss

@@ -1,15 +1,15 @@
-@mixin v-valo-contextmenu {
+@mixin valo-contextmenu {
   
   .v-contextmenu {
-    @include v-valo-selection-overlay-style;
+    @include valo-selection-overlay-style;
   }
   
   .v-contextmenu .gwt-MenuItem {
-    @include v-valo-selection-item-style;
+    @include valo-selection-item-style;
   }
   
   .v-contextmenu .gwt-MenuItem-selected {
-    @include v-valo-selection-item-selected-style;
+    @include valo-selection-item-selected-style;
   }
   
 }

WebContent/VAADIN/themes/valo/shared/_global.scss

@@ -6,13 +6,13 @@
 
 
 // Include global styles only once
-$v-valo-global-included: false !default;
-@mixin v-valo-global {
-  @if $v-valo-global-included == false {
+$valo-global-included: false !default;
+@mixin valo-global {
+  @if $valo-global-included == false {
 
     // Core widget styles come before any other component (and are always included),
     // so that it has the least specificity
-    @include v-valo-widget;
+    @include valo-widget;
 
     .v-generated-body {
       overflow: hidden;
@@ -99,27 +99,27 @@ $v-valo-global-included: false !default;
     }
 
     // Component global styles should also be included here
-    @include v-valo-orderedlayout-global;
-    @include v-valo-gridlayout-global;
-    @include v-valo-calendar-global;
-    @include v-valo-colorpicker-global;
-    @include v-valo-table-global;
-    @include v-valo-tabsheet-global;
-
-    $v-valo-global-included: true;
+    @include valo-orderedlayout-global;
+    @include valo-gridlayout-global;
+    @include valo-calendar-global;
+    @include valo-colorpicker-global;
+    @include valo-table-global;
+    @include valo-tabsheet-global;
+
+    $valo-global-included: true;
   }
 }
 
 
 
-$v-valo-shared-pathPrefix: null;
+$valo-shared-pathPrefix: null;
   
 @if $v-relative-paths == false {
-  $v-valo-shared-pathPrefix: "../valo/shared/";
+  $valo-shared-pathPrefix: "../valo/shared/";
 }
 
 
-@mixin v-valo-app-style {
+@mixin valo-app-style {
   font: $v-font-weight #{$v-font-size}/#{$v-line-height} $v-font-family;
   color: $v-font-color;
   background-color: $v-app-background-color;
@@ -134,17 +134,17 @@ $v-valo-shared-pathPrefix: null;
 }
 
 
-@mixin v-valo-common {
+@mixin valo-common {
 
   //@if & != null {
   //  &,
   //  &.v-app-loading {
-  //    @include v-valo-app-style;
+  //    @include valo-app-style;
   //  }
   //} @else {
     &.v-app,
     &.v-app-loading {
-      @include v-valo-app-style;
+      @include valo-app-style;
     }
   //}
 
@@ -171,7 +171,7 @@ $v-valo-shared-pathPrefix: null;
       padding: round($v-unit-size/4);
       margin-top: round($_size/-2);
       margin-left: round($_size/-2);
-      background: #fff url($v-valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%;
+      background: #fff url($valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%;
       border-radius: $v-border-radius;
     }
 
@@ -189,7 +189,7 @@ $v-valo-shared-pathPrefix: null;
     }
   }
   
-  @include v-valo-loading-bar;
+  @include valo-loading-bar;
 
 
   // Fallback spinner for browsers without CSS animations
@@ -201,7 +201,7 @@ $v-valo-shared-pathPrefix: null;
       width: 28px !important;
       height: 28px;
       padding: round($v-unit-size/4);
-      background: #fff url($v-valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%;
+      background: #fff url($valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%;
       border-radius: $v-border-radius;
       top: round($v-unit-size/4);
       right: round($v-unit-size/4);
@@ -230,7 +230,7 @@ $v-valo-shared-pathPrefix: null;
   }
   
   .v-caption {
-    @include v-valo-caption-style;
+    @include valo-caption-style;
   }
 
   .v-caption-on-left .v-caption,
@@ -249,7 +249,7 @@ $v-valo-shared-pathPrefix: null;
   }
   
   .v-errorindicator {
-    @include v-valo-error-indicator-style;
+    @include valo-error-indicator-style;
   }
 
   .v-required-field-indicator {
@@ -266,7 +266,7 @@ $v-valo-shared-pathPrefix: null;
     margin: 0;
     border-radius: $v-border-radius;
 
-    @include v-valo-nativeselect-select-style;
+    @include valo-nativeselect-select-style;
   }
 
   button {
@@ -279,18 +279,18 @@ $v-valo-shared-pathPrefix: null;
     cursor: default !important;
   }
 
-  @include v-valo-drag-element;
+  @include valo-drag-element;
 
-  @include v-valo-tooltip;
+  @include valo-tooltip;
 
-  @include v-valo-contextmenu;
+  @include valo-contextmenu;
 
 }
 
 
 
 
-@mixin v-valo-caption-style {
+@mixin valo-caption-style {
   font-size: $v-caption-font-size;
   font-weight: $v-caption-font-weight;
   padding-bottom: .3em;
@@ -301,18 +301,18 @@ $v-valo-shared-pathPrefix: null;
 
 
 
-@mixin v-valo-error-indicator-style {
+@mixin valo-error-indicator-style {
   color: $v-error-indicator-color;
   font-weight: 600;
   width: ceil($v-unit-size/2);
   text-align: center;
 
   &:before {
-    @include v-valo-error-indicator-icon-style;
+    @include valo-error-indicator-icon-style;
   }
 }
 
-@mixin v-valo-error-indicator-icon-style {
+@mixin valo-error-indicator-icon-style {
   content: "!";
 }
 
@@ -320,11 +320,11 @@ $v-valo-shared-pathPrefix: null;
 
 // Make the BODY element scrollable instead of the .v-ui element. Scrolling the BODY works better on touch screens.
 // NOTE: breaks percentage sized overlay elements
-// @mixin v-valo-natural-page-scrolling
+// @mixin valo-natural-page-scrolling
 // @usage
 // // Call without any parent selector somewhere in your theme
-// =v-valo-natural-page-scrolling;
-@mixin v-valo-natural-page-scrolling {
+// =valo-natural-page-scrolling;
+@mixin valo-natural-page-scrolling {
   
   html {
     height: auto;

WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss

@@ -14,8 +14,8 @@
 }
 
 
-@mixin v-valo-spinner ($size: 24px, $thickness: 4px, $color: null, $speed: 500ms) {
-  $color: $color or v-valo-focus-color();
+@mixin valo-spinner ($size: 24px, $thickness: 4px, $color: null, $speed: 500ms) {
+  $color: $color or valo-focus-color();
   // Make size divisible by 2, so that the rotation won't jiggle
   $size: $size + $size%2;
   height: $size !important;
@@ -65,10 +65,10 @@
 }
 
 
-$v-loading-indicator-color: v-valo-focus-color() !default;
+$v-loading-indicator-color: valo-focus-color() !default;
 $v-loading-indicator-bar-height: ceil($v-unit-size/7) !default;
 
-@mixin v-valo-loading-bar {
+@mixin valo-loading-bar {
   
   .v-loading-indicator {
     position: fixed !important;

WebContent/VAADIN/themes/valo/shared/_notification.scss

@@ -1,4 +1,4 @@
-@mixin v-valo-notification {
+@mixin valo-notification {
 
 
 
@@ -32,20 +32,20 @@
   // Can't match to "top: 0", since that would target "margin-top: 0" also, which all GWT PopupPanels have always
   @if $v-animations-enabled {
     .v-Notification[style*=" top: 0"] {
-      @include v-valo-anim-slide-down(600ms);
+      @include valo-anim-slide-down(600ms);
     }
 
     .v-Notification[style*="bottom: 0"] {
-      @include v-valo-anim-slide-up(600ms);
+      @include valo-anim-slide-up(600ms);
     }
 
     .v-Notification[style*="right: 0"] {
-      @include v-valo-anim-slide-left(600ms);
+      @include valo-anim-slide-left(600ms);
     }
 
     // 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) {
-      @include v-valo-anim-slide-right(600ms);
+      @include valo-anim-slide-right(600ms);
     }
   }
 
@@ -91,10 +91,10 @@
       margin-left: round($v-font-size);
     }
 
-    @include v-valo-notification-style;
+    @include valo-notification-style;
 
     @if $v-animations-enabled {
-      @include v-valo-anim-fade-in;
+      @include valo-anim-fade-in;
     }
 
   }
@@ -109,7 +109,7 @@
     margin: 0 !important;
     border-radius: 0;
     
-    @include v-valo-notification-system-style;
+    @include valo-notification-system-style;
   }
 
   // Needs a more specific selector to override positional margins
@@ -132,19 +132,19 @@
       display: block;
       margin: .5em 0 0;
     }
-    @include v-valo-notification-tray-style;
+    @include valo-notification-tray-style;
   }
   
   .v-Notification.warning {
-    @include v-valo-notification-warning-style;
+    @include valo-notification-warning-style;
   }
   
   .v-Notification.error {
-    @include v-valo-notification-error-style;
+    @include valo-notification-error-style;
   }
 
   .v-Notification.closable {
-    @include v-valo-notification-closable-style;
+    @include valo-notification-closable-style;
 
     &.error,
     &.system {
@@ -172,7 +172,7 @@
 
 
 
-@mixin v-valo-notification-closable-style {
+@mixin valo-notification-closable-style {
   padding-right: $v-unit-size + round($v-unit-size/1.7);
   overflow: hidden !important; // Override GWT PopupPanel
   cursor: pointer;
@@ -225,8 +225,8 @@
 
 
 
-@mixin v-valo-notification-style {
-  background: v-valo-overlay-background-color();
+@mixin valo-notification-style {
+  background: valo-overlay-background-color();
   box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15);
   padding: round($v-unit-size/2) round($v-unit-size/1.7);
 
@@ -236,7 +236,7 @@
   }
   
   h1 {
-    color: v-valo-focus-color();
+    color: valo-focus-color();
     font-size: round($v-font-size * 1.2);
     line-height: 1;
   }
@@ -245,7 +245,7 @@
   }
 }
 
-@mixin v-valo-notification-system-style {
+@mixin valo-notification-system-style {
   background-color: #444;
   font-weight: $v-font-weight + 100;
   line-height: round($v-font-size * 1.4);
@@ -268,9 +268,9 @@
 }
 
 
-@mixin v-valo-notification-tray-style {}
+@mixin valo-notification-tray-style {}
 
-@mixin v-valo-notification-warning-style {
+@mixin valo-notification-warning-style {
   background: #FFF3D2;
 
   h1 {
@@ -282,16 +282,16 @@
   }
 }
 
-@mixin v-valo-notification-error-style {
+@mixin valo-notification-error-style {
   background: $v-error-indicator-color;
   font-weight: $v-font-weight + 100;
   box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
 
   h1 {
-    color: v-valo-font-color($v-error-indicator-color, 1);
+    color: valo-font-color($v-error-indicator-color, 1);
   }
 
   p {
-    color: v-valo-font-color($v-error-indicator-color, .8);
+    color: valo-font-color($v-error-indicator-color, .8);
   }
 }

WebContent/VAADIN/themes/valo/shared/_overlay.scss

@@ -1,6 +1,6 @@
 $v-overlay-border-radius: $v-border-radius !default;
 $v-overlay-border-width: $v-border-width !default;
-$v-overlay-open-animation: v-valo-overlay-open 200ms !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;
@@ -18,7 +18,7 @@ $v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default;
 $v-selection-item-font-weight: max(400, $v-font-weight);
 
 
-@function v-valo-overlay-background-color ($context: $v-app-background-color) {
+@function valo-overlay-background-color ($context: $v-app-background-color) {
   @if is-dark-color($context) {
     @return darken($context, 2%);
   }
@@ -30,7 +30,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 
 
 
-@mixin v-valo-ie8-shadow($shadow, $element: top) {
+@mixin valo-ie8-shadow($shadow, $element: top) {
   .#{$element} {
     $shadow-offset-x: nth($shadow, 1);
     $shadow-offset-y: nth($shadow, 2);
@@ -69,16 +69,16 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
       right: -$v-overlay-border-width;
       bottom: -$v-overlay-border-width;
       left: -$v-overlay-border-width;
-      background: darken(v-valo-overlay-background-color(), $v-bevel-depth);
+      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: v-valo-shadow($shadow-style: $v-overlay-shadow-style);
+    $shadows: valo-shadow($shadow-style: $v-overlay-shadow-style);
 
     @if type-of(last($shadows)) == color {
-      @include v-valo-ie8-shadow($shadows);
+      @include valo-ie8-shadow($shadows);
     } @else {
       @for $i from 1 through min(length($elements), length($shadows)) {
         $shadow: nth($shadows, $i);
@@ -86,7 +86,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
           $shadow: last($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list
         }
         @if length($shadow) > 3 {
-          @include v-valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i));
+          @include valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i));
         }
       }
     }
@@ -98,22 +98,22 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 
 
 
-@function v-valo-overlay-box-shadow ($bg: null) {
-  $bg: $bg or v-valo-overlay-background-color();
-  @return v-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));
+@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 v-valo-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
+@mixin valo-overlay-style ($background-color: null, $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 v-valo-overlay-background-color();
+  $bg: $background-color or valo-overlay-background-color();
   background: $bg;
-  color: v-valo-font-color($bg);
+  color: valo-font-color($bg);
 
-  box-shadow:  v-valo-overlay-box-shadow($bg);
+  box-shadow:  valo-overlay-box-shadow($bg);
 
   @if $v-animations-enabled and $v-overlay-open-animation {
     @include animation($open-animation);
@@ -128,7 +128,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 
 
 @if $v-animations-enabled {
-  @include keyframes(v-valo-overlay-open) {
+  @include keyframes(valo-overlay-open) {
     0% {
       @include transform(translatey(-3px));
       opacity: 0;
@@ -141,15 +141,15 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 
 
 
-@mixin v-valo-selection-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
-  @include v-valo-overlay-style($background-color: $background-color, $open-animation: $open-animation);
+@mixin valo-selection-overlay-style ($background-color: null, $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;
 }
 
 
 
 
-@mixin v-valo-selection-item-style {
+@mixin valo-selection-item-style {
   cursor: pointer;
   line-height: $v-selection-item-height;
   padding: 0 $v-selection-item-padding-horizontal*2 0 $v-selection-item-padding-horizontal;
@@ -167,7 +167,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
     right: 0;
     bottom: 0;
     left: 0;
-    background: scale-color(v-valo-selection-color(), $lightness: -30%, $saturation: 50%);
+    background: scale-color(valo-selection-color(), $lightness: -30%, $saturation: 50%);
     @include opacity(.15);
     pointer-events: none;
     border-radius: inherit;
@@ -183,10 +183,10 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 
 
 
-@mixin v-valo-selection-item-selected-style ($parent-background-color: null) {
-  $selection-color: v-valo-selection-color($parent-background-color);
-  @include v-valo-gradient($selection-color);
-  color: v-valo-font-color($selection-color, 0.9);
+@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);
 }
 
 
@@ -196,13 +196,13 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 
 
 
-@mixin v-valo-drag-element {
+@mixin valo-drag-element {
   .v-drag-element {
-    @include v-valo-drag-element-style;
+    @include valo-drag-element-style;
   }
 }
 
-@mixin v-valo-drag-element-style {
+@mixin valo-drag-element-style {
   background: #fff;
   box-shadow: 0 2px 10px rgba(#000, .2);
   border-radius: $v-border-radius;

WebContent/VAADIN/themes/valo/shared/_tooltip.scss

@@ -1,7 +1,7 @@
 // @category Tooltip
 
 $v-tooltip-background-color: rgba(if(is-dark-color($v-app-background-color), scale-color($v-app-background-color, $lightness: 80%), scale-color($v-app-background-color, $lightness: -80%)), .75) !default;
-$v-tooltip-font-color: v-valo-font-color(opacify($v-tooltip-background-color, 1), 1) !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;
 $v-tooltip-padding-vertical: round($v-unit-size/8) !default;
@@ -11,9 +11,9 @@ $v-tooltip-error-message-font-color: $v-error-indicator-color !default;
 $v-tooltip-border-radius: $v-border-radius - 1px !default;
 
 
-@mixin v-valo-tooltip {
+@mixin valo-tooltip {
   .v-tooltip {
-    @include v-valo-tooltip-style;
+    @include valo-tooltip-style;
 
     div[style*="width"] {
       width: auto !important;
@@ -55,7 +55,7 @@ $v-tooltip-border-radius: $v-border-radius - 1px !default;
 }
 
 
-@mixin v-valo-tooltip-style {
+@mixin valo-tooltip-style {
   background-color: opacify($v-tooltip-background-color, 1);  // For IE8
   background-color: $v-tooltip-background-color;
   box-shadow: $v-tooltip-box-shadow;
@@ -67,6 +67,6 @@ $v-tooltip-border-radius: $v-border-radius - 1px !default;
   font-size: $v-tooltip-font-size;
 
   @if $v-animations-enabled {
-    //@include v-valo-anim-fade-in;
+    //@include valo-anim-fade-in;
   }
 }

WebContent/VAADIN/themes/valo/shared/_variables.scss

@@ -53,7 +53,7 @@ $v-included-components:
 
 
 // Checks if a given component is included in the compilation. Used by the collection mixins that 
-// include all components, like v-valo-components and v-valo-components.
+// include all components, like valo-components and valo-components.
 // @mixin v-is-included
 // @param     $component-name {String} the name of the component to check
 // @param     $is-included {list} (Optional) the list of components which is checked
@@ -79,7 +79,7 @@ $v-app-background-color:        hsl(210, 0%, 98%)               !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:                  v-valo-font-color($v-app-background-color) !default;
+$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
@@ -125,7 +125,7 @@ $v-required-field-indicator-color: $v-error-indicator-color     !default;
 
 
 
-$v-valo-include-common-stylenames: true                         !default;
+$valo-include-common-stylenames: true                         !default;
 
 
 

WebContent/VAADIN/themes/valo/util/_anim.scss

@@ -1,36 +1,36 @@
-@include keyframes(v-valo-anim-fade-in) {
+@include keyframes(valo-anim-fade-in) {
   0% {
     opacity: 0;
   }
 }
 
 
-@include keyframes(v-valo-anim-fade-out) {
+@include keyframes(valo-anim-fade-out) {
   100% {
     opacity: 0;
   }
 }
 
 
-@include keyframes(v-valo-anim-slide-down) {
+@include keyframes(valo-anim-slide-down) {
   0% {
     @include transform( translateY(-100%) );
   }
 }
 
-@include keyframes(v-valo-anim-slide-up) {
+@include keyframes(valo-anim-slide-up) {
   0% {
     @include transform( translateY(100%) );
   }
 }
 
-@include keyframes(v-valo-anim-slide-left) {
+@include keyframes(valo-anim-slide-left) {
   0% {
     @include transform( translateX(100%) );
   }
 }
 
-@include keyframes(v-valo-anim-slide-right) {
+@include keyframes(valo-anim-slide-right) {
   0% {
     @include transform( translateX(-100%) );
   }
@@ -38,26 +38,26 @@
 
 
 
-@mixin v-valo-anim-fade-in ($duration: 120ms, $delay: null){
-  @include animation(v-valo-anim-fade-in $duration $delay);
+@mixin valo-anim-fade-in ($duration: 120ms, $delay: null){
+  @include animation(valo-anim-fade-in $duration $delay);
 }
 
-@mixin v-valo-anim-fade-out ($duration: 120ms, $delay: null){
-  @include animation(v-valo-anim-fade-out $duration $delay);
+@mixin valo-anim-fade-out ($duration: 120ms, $delay: null){
+  @include animation(valo-anim-fade-out $duration $delay);
 }
 
-@mixin v-valo-anim-slide-down ($duration: 260ms, $delay: null){
-  @include animation(v-valo-anim-slide-down $duration $delay);
+@mixin valo-anim-slide-down ($duration: 260ms, $delay: null){
+  @include animation(valo-anim-slide-down $duration $delay);
 }
 
-@mixin v-valo-anim-slide-up ($duration: 260ms, $delay: null){
-  @include animation(v-valo-anim-slide-up $duration $delay);
+@mixin valo-anim-slide-up ($duration: 260ms, $delay: null){
+  @include animation(valo-anim-slide-up $duration $delay);
 }
 
-@mixin v-valo-anim-slide-left ($duration: 260ms, $delay: null){
-  @include animation(v-valo-anim-slide-left $duration $delay);
+@mixin valo-anim-slide-left ($duration: 260ms, $delay: null){
+  @include animation(valo-anim-slide-left $duration $delay);
 }
 
-@mixin v-valo-anim-slide-right ($duration: 260ms, $delay: null){
-  @include animation(v-valo-anim-slide-right $duration $delay);
+@mixin valo-anim-slide-right ($duration: 260ms, $delay: null){
+  @include animation(valo-anim-slide-right $duration $delay);
 }

WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss

@@ -1,11 +1,11 @@
-@function v-valo-bevel ($color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, 
+@function valo-bevel ($color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, 
                         $gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) {
   
   @if $bevel-depth == 0% or $bevel-style == none {
     @return null;
   }
   
-  $color-stops: v-valo-gradient-color-stops($color, $gradient-style, $gradient-depth);
+  $color-stops: valo-gradient-color-stops($color, $gradient-style, $gradient-depth);
 
   $top-color: first(first($color-stops));
   $bottom-color: first(last($color-stops));
@@ -13,12 +13,12 @@
   $top-color: blend-lighten(adjust-color($top-color, $lightness: $bevel-depth/4, $saturation: -$bevel-depth), scale-color($top-color, $lightness: $bevel-depth/4));
   $bottom-color: blend-darken(rgba(scale-color($bottom-color, $lightness: max(-30%, -$bevel-depth/3), $saturation: -$bevel-depth), $bevel-depth/100%), $bottom-color);
   
-  @return v-valo-replace-hilite-and-shade($bevel-style, $top-color, $bottom-color);
+  @return valo-replace-hilite-and-shade($bevel-style, $top-color, $bottom-color);
 }
 
 
 
-@function v-valo-shadow ($shadow-style: null, $shadow-depth: null) {
+@function valo-shadow ($shadow-style: null, $shadow-depth: null) {
   $shadow-style: $shadow-style or $v-shadow-style;
   $shadow-depth: $shadow-depth or $v-shadow-depth;
 
@@ -26,12 +26,12 @@
     @return null;
   }
 
-  @return v-valo-replace-hilite-and-shade($shadow-style, rgba(#fff, $shadow-depth/100%), rgba(#000, $shadow-depth/100%));
+  @return valo-replace-hilite-and-shade($shadow-style, rgba(#fff, $shadow-depth/100%), rgba(#000, $shadow-depth/100%));
 }
 
 
 
-@function v-valo-replace-hilite-and-shade($shadow-list, $hilite, $shade) {
+@function valo-replace-hilite-and-shade($shadow-list, $hilite, $shade) {
   @if $shadow-list == none {
     @return null;
   }
@@ -52,7 +52,7 @@
   $new: null;
   @each $part in $shadow-list {
     @if type-of($part) == list and length($part) > 0 {
-      $part: v-valo-replace-hilite-and-shade($part, $hilite, $shade);
+      $part: valo-replace-hilite-and-shade($part, $hilite, $shade);
       @if $part {
         $new: $new, $part;
       }

WebContent/VAADIN/themes/valo/util/_color.scss

@@ -52,7 +52,7 @@ $v-luminance-threshold: 150 !default;
 
 // Returns a text color with enough contrast for the given background color
 //
-@function v-valo-font-color ($bg-color, $contrast: 0.8) {
+@function valo-font-color ($bg-color, $contrast: 0.8) {
   @if $bg-color {
     @if is-dark-color($bg-color) {
       @return scale_color($bg-color, $lightness: min(100%, 100% * $contrast), $saturation: max(-100%, -50% * $contrast));
@@ -64,8 +64,8 @@ $v-luminance-threshold: 150 !default;
 }
 
 
-@function v-valo-header-color ($bg-color, $contrast: 1) {
-  $font-color: v-valo-font-color($bg-color);
+@function valo-header-color ($bg-color, $contrast: 1) {
+  $font-color: valo-font-color($bg-color);
   @if is-dark-color($bg-color) {
     @return lighten($font-color, 30% * $contrast);
   } @else {
@@ -76,7 +76,7 @@ $v-luminance-threshold: 150 !default;
 
 
 
-@function v-valo-focus-color ($color: null, $context: null) {
+@function valo-focus-color ($color: null, $context: null) {
   $context: $context or $v-app-background-color;
 
   $fallback: $context;
@@ -95,15 +95,15 @@ $v-luminance-threshold: 150 !default;
 
 
 
-@function v-valo-focus-box-shadow ($color: null, $focus-style: $v-focus-style) {
-  $focus-color: v-valo-focus-color($color: $color);
+@function valo-focus-box-shadow ($color: null, $focus-style: $v-focus-style) {
+  $focus-color: valo-focus-color($color: $color);
   @return replace($focus-style, v-focus-color, transparentize($focus-color, .5));
 }
 
 
 
-@function v-valo-selection-color ($color: null, $context: null) {
-  $selection-color: $color or $v-selection-color or v-valo-focus-color($color: $color, $context: $context);
+@function valo-selection-color ($color: null, $context: null) {
+  $selection-color: $color or $v-selection-color or valo-focus-color($color: $color, $context: $context);
   //@if luminance-diff($context, $selection-color) < 30 or (luminance-diff($context, $selection-color) < 10 and saturation-diff($context, $selection-color) < 20%) {
   //  $selection-color: #fff;
   //}

WebContent/VAADIN/themes/valo/util/_gradient.scss

@@ -1,15 +1,15 @@
-@mixin v-valo-gradient($color, $style: $v-gradient-style, $depth: $v-gradient-depth, $fallback: null, $direction: to bottom) {
+@mixin valo-gradient($color, $style: $v-gradient-style, $depth: $v-gradient-depth, $fallback: null, $direction: to bottom) {
   @if $color {
     @if $depth <= 0 {
       background: $fallback or $color;
     } @else {
-      $color-stops: v-valo-gradient-color-stops($color, $style, $depth);
+      $color-stops: valo-gradient-color-stops($color, $style, $depth);
       @include linear-gradient($direction, $color-stops, $fallback: $fallback or $color);
     }
   }
 }
 
-@function v-valo-gradient-color-stops($color, $style: $v-gradient-style, $depth: $v-gradient-depth) {
+@function valo-gradient-color-stops($color, $style: $v-gradient-style, $depth: $v-gradient-depth) {
   @if $depth > 0 {
     
     @if $style == v-linear or $style == v-linear-reverse {

WebContent/VAADIN/themes/valo/util/_util.scss

@@ -31,14 +31,14 @@
 
 
 
-@mixin v-valo-round {
+@mixin valo-round {
   border-radius: 50%;
 }
 
 
 
 
-@mixin v-valo-tappable {
+@mixin valo-tappable {
   @include user-select(none);
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;