Split test theme into separate themes and added theme selector

Change-Id: I076a05a393ae85bb68983eaa2756d36a0e92014e

9 files changed, 121 insertions, 276 deletions

diff --git a/WebContent/VAADIN/themes/tests-valo/_blueprint.scss b/WebContent/VAADIN/themes/tests-valo/_blueprint.scss
deleted file mode 100644
index 696da0b69e..0000000000
--- a/WebContent/VAADIN/themes/tests-valo/_blueprint.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-$v-app-loading-text: "Blueprint Valo";
-$v-background-color: #1a61b7;
-$v-focus-color: #fff;
-$v-panel-background-color: $v-background-color;
-$v-overlay-background-color: $v-background-color;
-$valo-menu-background-color: $v-background-color;
-$v-overlay-shadow: 0 0 0 1px rgba(#fff, .5);
-$v-window-shadow: $v-overlay-shadow;
-$v-window-modality-curtain-background-color: $v-background-color;
-$v-bevel: false;
-$v-gradient: false;
-$v-shadow: false;
-$v-textfield-bevel: false;
-$v-textfield-shadow: false;
-$v-border: 1px solid (v-tint 1.5);
-$v-textfield-background-color: $v-background-color;
-$v-font-family: sans-serif;
-$v-font-size: 18px;
-
-@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/_dark.scss b/WebContent/VAADIN/themes/tests-valo/_dark.scss
deleted file mode 100644
index 21bcd00ae9..0000000000
--- a/WebContent/VAADIN/themes/tests-valo/_dark.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-$v-app-loading-text: "Dark Valo";
-$v-background-color: #444d50;
-$v-focus-color: #07a9ca;
-$v-focus-style: 0 0 3px 2px $v-focus-color;
-$v-bevel-depth: 40%;
-$v-gradient: v-linear 12%;
-$v-border-radius: 10px;
-$v-font-family: Roboto, sans-serif;
-$v-font-weight: 400;
-$v-font-weight--header: 400;
-$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1);
-$v-shadow: 0 0 0 3px darken($v-background-color, 3%), 0 1px 1px 3px lighten($v-background-color, 5%);
-$v-textfield-bevel: inset 0 2px 2px v-shade;
-$v-textfield-shadow: $v-shadow;
-$v-unit-size: 40px;
-$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4);
-
-@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/_facebook.scss b/WebContent/VAADIN/themes/tests-valo/_facebook.scss
deleted file mode 100644
index 5b83aae4ca..0000000000
--- a/WebContent/VAADIN/themes/tests-valo/_facebook.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-$v-app-loading-text: "Facebook Valo";
-$v-background-color: #fafafa;
-$v-app-background-color: #e7ebf2;
-$v-panel-background-color: #fff;
-$v-focus-color: #3b5998;
-$v-focus-style: 0 0 1px 1px rgba($v-focus-color, .5);
-$v-border-radius: 3px;
-$v-textfield-border-radius: 0;
-$v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
-$v-font-size: 14px;
-$v-font-color: #37404E;
-$v-font-weight: 400;
-$v-link-text-decoration: none;
-$v-shadow: 0 1px 0 (v-shade 0.2);
-$v-bevel: inset 0 1px 0 v-tint;
-$v-unit-size: 30px;
-$v-gradient: v-linear 12%;
-$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
-$v-shadow-opacity: 20%;
-$v-selection-overlay-padding-horizontal: 0;
-$v-selection-overlay-padding-vertical: 6px;
-$v-selection-item-border-radius: 0;
-
-@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss b/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss
deleted file mode 100644
index f68f9c266d..0000000000
--- a/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-$v-app-loading-text: "Dark & Flat Valo";
-
-$v-background-color: #000;
-$v-focus-color: orange;
-$v-font-size: 15px;
-$v-font-weight: 600;
-$v-unit-size: 42px;
-$v-bevel: false;
-$v-shadow: false;
-$v-gradient: false;
-$v-textfield-bevel: false;
-$v-textfield-shadow: false;
-$v-border-radius: 0;
-$v-border: 2px solid v-tone;
-$v-overlay-shadow: 0 0 0 2px (v-tint 10);
-$v-focus-style: $v-focus-color;
-$v-font-family: "Lato", sans-serif;
-$v-font-weight--header: 600;
-
-@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/_flat.scss b/WebContent/VAADIN/themes/tests-valo/_flat.scss
deleted file mode 100644
index 5d2b8abbb7..0000000000
--- a/WebContent/VAADIN/themes/tests-valo/_flat.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-$v-app-loading-text: "Flat Valo";
-
-$v-font-family: "Roboto", sans-serif;
-$v-font-weight: 400;
-$v-font-weight--header: 400;
-$v-background-color: #fff;
-$v-focus-color: rgb(150,190,90);
-$v-luminance-threshold: 180;
-$v-border: 2px solid v-shade;
-$v-border-radius: 6px;
-$v-bevel: false;
-$v-gradient: false;
-$v-shadow: false;
-$v-textfield-bevel: false;
-$v-textfield-shadow: false;
-$v-link-text-decoration: false;
-$v-selection-overlay-padding-horizontal: 0;
-$v-selection-overlay-padding-vertical: 6px;
-$v-selection-item-height: 30px;
-$v-selection-item-border-radius: 0;
-
-
-@import "../valo/valo";
-
-
-.valo-test {
-  .v-button-primary.v-button-primary {
-    background: #fff;
-    border-color: $v-focus-color;
-    color: $v-focus-color;
-  }
-
-  .v-button-danger.v-button-danger {
-    background: #fff;
-    border-color: $v-error-indicator-color;
-    color: $v-error-indicator-color;
-  }
-
-  .v-slider-base:before,
-  .v-slider-base:after {
-    border: none !important;
-  }
-}
diff --git a/WebContent/VAADIN/themes/tests-valo/_metro.scss b/WebContent/VAADIN/themes/tests-valo/_metro.scss
deleted file mode 100644
index f11cdb8b64..0000000000
--- a/WebContent/VAADIN/themes/tests-valo/_metro.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-$v-app-loading-text: "Metro Valo";
-
-$v-font-family: "Source Sans Pro", sans-serif;
-$v-app-background-color: #fff;
-$v-background-color: #eee;
-$v-focus-color: #0072C6;
-$v-focus-style: 0 0 0 1px $v-focus-color;
-$valo-menu-background-color: darken($v-focus-color, 10%);
-$v-border: 0 solid v-shade;
-$v-border-radius: 0px;
-$v-bevel: false;
-$v-gradient: false;
-$v-shadow: false;
-$v-textfield-bevel: false;
-$v-textfield-shadow: false;
-$v-textfield-border: 1px solid v-shade;
-$v-link-text-decoration: none;
-$v-overlay-shadow: 0 0 0 2px #000;
-$v-overlay-border-width: 2px; // For IE8
-$v-window-shadow: $v-overlay-shadow;
-$v-selection-overlay-background-color: #fff;
-$v-selection-overlay-padding-horizontal: 0;
-$v-selection-overlay-padding-vertical: 6px;
-$v-panel-border: 2px solid v-shade;
-
-@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/_valotest.scss b/WebContent/VAADIN/themes/tests-valo/_valotest.scss
new file mode 100644
index 0000000000..f775938e13
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/_valotest.scss
@@ -0,0 +1,118 @@
+@mixin valotest {
+  @include valo;
+
+  .valo-menu .v-checkbox {
+    margin: round($v-unit-size/2);
+    font-weight: 400;
+  }
+
+  $color1: hsl(220, 5%, 38%);
+  $color2: #5d73c0;
+  $color3: #3dbc1a;
+  $color4: #d2f4f3;
+  $color5: #fe902a;
+  $colors: $color1, $color2, $color3, $color4, $color5;
+
+  .v-textfield-color1 {
+    @include valo-textfield-style($background-color: $color1);
+  }
+
+  .v-textfield-color2 {
+    @include valo-textfield-style($background-color: $color3);
+  }
+
+  .v-textfield-color3 {
+    @include valo-textfield-style($background-color: $color4);
+  }
+
+
+  .v-textarea-color1 {
+    @include valo-textarea-style($background-color: $color1);
+  }
+
+  .v-textarea-color2 {
+    @include valo-textarea-style($background-color: $color3);
+  }
+
+  .v-textarea-color3 {
+    @include valo-textarea-style($background-color: $color4);
+  }
+
+
+  .v-datefield-color1 {
+    @include valo-datefield-style($background-color: $color1);
+  }
+
+  .v-datefield-color2 {
+    @include valo-datefield-style($background-color: $color3);
+  }
+
+  .v-datefield-color3 {
+    @include valo-datefield-style($background-color: $color4);
+  }
+
+
+  .v-filterselect-color1 {
+    @include valo-combobox-style($background-color: $color1);
+  }
+
+  .v-filterselect-color2 {
+    @include valo-combobox-style($background-color: $color3);
+  }
+
+  .v-filterselect-color3 {
+    @include valo-combobox-style($background-color: $color4);
+  }
+
+
+  $copy: $v-selection-color;
+  $v-selection-color: white;
+  .v-checkbox-color1 {
+    @include valo-checkbox-style($background-color: $color1);
+  }
+
+  .v-checkbox-color2 {
+    @include valo-checkbox-style($background-color: $color2);
+  }
+  $v-selection-color: $copy;
+
+
+  .v-slider-color1 {
+    @include valo-slider-handle-style($background-color: $color1);
+  }
+
+  .v-slider-color2 {
+    @include valo-slider-track-style($background-color: $color3);
+  }
+
+  .v-slider-color3 {
+    @include valo-slider-indicator-style($background-color: #dcdc1e);
+  }
+
+
+  .v-panel-caption-color1 {
+    @include valo-panel-caption-style($background-color: $color1);
+  }
+
+  .v-panel-caption-color2 {
+    @include valo-panel-caption-style($background-color: $color3);
+  }
+
+  .v-panel-caption-color3 {
+    @include valo-panel-caption-style($background-color: $color5);
+  }
+
+  // Show splitpanel borders
+  .v-splitpanel-vertical,
+  .v-splitpanel-horizontal {
+    outline: 1px dotted rgba(gray, .2);
+  }
+
+  .v-slider-ticks {
+    @include valo-slider-ticks($tick-count: 5);
+  }
+
+  .v-accordion-item-color1 .v-accordion-item-caption {
+    @include valo-accordion-item-caption-style($background-color: $color2);
+  }
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/tests-valo/_default.scss b/WebContent/VAADIN/themes/tests-valo/_variables.scss
index c227156e2e..c227156e2e 100644
--- a/WebContent/VAADIN/themes/tests-valo/_default.scss
+++ b/WebContent/VAADIN/themes/tests-valo/_variables.scss
diff --git a/WebContent/VAADIN/themes/tests-valo/styles.scss b/WebContent/VAADIN/themes/tests-valo/styles.scss
index 89fc5755f4..1ba0b29b04 100644
--- a/WebContent/VAADIN/themes/tests-valo/styles.scss
+++ b/WebContent/VAADIN/themes/tests-valo/styles.scss
@@ -1,127 +1,5 @@
-@import "default";
-// @import "flat";
-// @import "flat-dark";
-// @import "facebook";
-// @import "metro";
-// @import "dark";
-// @import "blueprint";
-
-
+@import "variables";
+@import "valotest";
 .tests-valo {
-  @include valo;
-
-  .valo-menu .v-checkbox {
-    margin: round($v-unit-size/2);
-    font-weight: 400;
-  }
-
-  $color1: hsl(220, 5%, 38%);
-  $color2: #5d73c0;
-  $color3: #3dbc1a;
-  $color4: #d2f4f3;
-  $color5: #fe902a;
-  $colors: $color1, $color2, $color3, $color4, $color5;
-
-  .v-textfield-color1 {
-    @include valo-textfield-style($background-color: $color1);
-  }
-
-  .v-textfield-color2 {
-    @include valo-textfield-style($background-color: $color3);
-  }
-
-  .v-textfield-color3 {
-    @include valo-textfield-style($background-color: $color4);
-  }
-
-
-  .v-textarea-color1 {
-    @include valo-textarea-style($background-color: $color1);
-  }
-
-  .v-textarea-color2 {
-    @include valo-textarea-style($background-color: $color3);
-  }
-
-  .v-textarea-color3 {
-    @include valo-textarea-style($background-color: $color4);
-  }
-
-
-  .v-datefield-color1 {
-    @include valo-datefield-style($background-color: $color1);
-  }
-
-  .v-datefield-color2 {
-    @include valo-datefield-style($background-color: $color3);
-  }
-
-  .v-datefield-color3 {
-    @include valo-datefield-style($background-color: $color4);
-  }
-
-
-  .v-filterselect-color1 {
-    @include valo-combobox-style($background-color: $color1);
-  }
-
-  .v-filterselect-color2 {
-    @include valo-combobox-style($background-color: $color3);
-  }
-
-  .v-filterselect-color3 {
-    @include valo-combobox-style($background-color: $color4);
-  }
-
-
-  $copy: $v-selection-color;
-  $v-selection-color: white;
-  .v-checkbox-color1 {
-    @include valo-checkbox-style($background-color: $color1);
-  }
-
-  .v-checkbox-color2 {
-    @include valo-checkbox-style($background-color: $color2);
-  }
-  $v-selection-color: $copy;
-
-
-  .v-slider-color1 {
-    @include valo-slider-handle-style($background-color: $color1);
-  }
-
-  .v-slider-color2 {
-    @include valo-slider-track-style($background-color: $color3);
-  }
-
-  .v-slider-color3 {
-    @include valo-slider-indicator-style($background-color: #dcdc1e);
-  }
-
-
-  .v-panel-caption-color1 {
-    @include valo-panel-caption-style($background-color: $color1);
-  }
-
-  .v-panel-caption-color2 {
-    @include valo-panel-caption-style($background-color: $color3);
-  }
-
-  .v-panel-caption-color3 {
-    @include valo-panel-caption-style($background-color: $color5);
-  }
-
-  // Show splitpanel borders
-  .v-splitpanel-vertical,
-  .v-splitpanel-horizontal {
-    outline: 1px dotted rgba(gray, .2);
-  }
-
-  .v-slider-ticks {
-    @include valo-slider-ticks($tick-count: 5);
-  }
-
-  .v-accordion-item-color1 .v-accordion-item-caption {
-    @include valo-accordion-item-caption-style($background-color: $color2);
-  }
+   @include valotest;
 }