Add a new variation for Valo

A new variation named “Light”, similar to iOS7 style.

Fix some valo-menu styles to accommodate the new light style better.

Change-Id: Ib7c396263db7838c972d75a6b79fed1caf7ca576

6 files changed, 53 insertions, 9 deletions

diff --git a/WebContent/VAADIN/themes/tests-valo-light/_variables.scss b/WebContent/VAADIN/themes/tests-valo-light/_variables.scss
new file mode 100644
index 0000000000..e851f075e4
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo-light/_variables.scss
@@ -0,0 +1,24 @@
+$v-app-loading-text: "Light Valo";
+
+$v-background-color: hsl(0, 0, 99.5%);
+$v-app-background-color: #fff;
+$v-focus-color: hsl(218, 80%, 60%);
+$v-border: 1px solid (v-shade 0.6);
+$v-border-radius: 3px;
+$v-bevel: inset 0 1px 0 v-tint;
+$v-textfield-bevel: false;
+$v-gradient: v-linear 3%;
+$v-shadow: false;
+$valo-menu-background-color: hsl(218, 20%, 98%);
+$v-friendly-color: hsl(163, 61%, 41%);
+$v-error-indicator-color: hsl(349, 66%, 56%);
+
+
+@import "../valo/valo";
+
+.tests-valo-light .valo-menu .valo-menu-title {
+  background: $v-app-background-color;
+  color: $v-selection-color;
+  text-shadow: none;
+  border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
+}
diff --git a/WebContent/VAADIN/themes/tests-valo-light/styles.scss b/WebContent/VAADIN/themes/tests-valo-light/styles.scss
new file mode 100644
index 0000000000..12ee8a780e
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo-light/styles.scss
@@ -0,0 +1,6 @@
+@import "variables";
+@import "../tests-valo/valotest";
+
+.tests-valo-light {
+   @include valotest;
+}
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index 3144acb37c..2669ac44f6 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -221,7 +221,6 @@ $v-table-background-color: null !default;
     @include valo-gradient($v-selection-color);
     background-origin: border-box;
     color: valo-font-color($v-selection-color, 0.9);
-    text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth);
 
     + .v-selected {
       $gradient-end: first(last(valo-gradient-color-stops($v-selection-color)));
diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss
index 93553fe55a..8e75f59945 100644
--- a/WebContent/VAADIN/themes/valo/components/_tree.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tree.scss
@@ -176,8 +176,9 @@ $v-tree-expand-animation-enabled: false !default;
 
 
   .#{$primary-stylename}-node-selected {
-    color: valo-font-color($v-selection-color, 0.9);
-    text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth);
+    $font-color: valo-font-color($v-selection-color, 0.9);
+    color: $font-color;
+    text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-item-selection-color);
 
     &:after {
       opacity: 1;
diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
index 507065d339..020eb1cae7 100644
--- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
+++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
@@ -91,6 +91,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
         box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $v-shadow);
         display: block;
         margin: 0 auto .3em;
+        border: valo-border();
       }
     }
 
@@ -101,10 +102,6 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
   .valo-menu-subtitle {
     @include valo-menu-subtitle-style($bg);
-
-    .valo-menu-badge {
-      color: mix(valo-font-color($bg), $v-selection-color);
-    }
   }
 
   .valo-menuitems {
@@ -177,9 +174,11 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
         padding: 0;
         height: $v-unit-size;
         color: valo-font-color($v-selection-color, 0.5);
+        max-width: 30%;
 
         .v-menubar-menuitem {
           line-height: $v-unit-size - 1px;
+          white-space: nowrap;
         }
 
         img.v-icon {
@@ -188,6 +187,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
           width: round($v-unit-size / 2);
           height: round($v-unit-size / 2);
           border-radius: ceil($v-unit-size / 4);
+          border: none;
         }
       }
 
@@ -228,7 +228,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
 @mixin valo-menu-style ($bg: $valo-menu-background-color) {
   height: 100%;
-  @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
+  @include linear-gradient(to left, (darken($bg, valo-gradient-opacity() / 2) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
   color: valo-font-color($bg, 0.5);
   font-size: round($v-font-size * 0.9);
   line-height: round($v-unit-size * 0.8);
@@ -256,6 +256,10 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
   color: valo-font-color($bg, 0.33);
   margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2);
   border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone);
+
+  [class*="badge"] {
+    color: mix(valo-font-color($bg), $v-selection-color);
+  }
 }
 
 
@@ -286,6 +290,14 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
     overflow: hidden;
   }
 
+  [class*="badge"] {
+    @if abs($diff) < 50 {
+      color: mix(valo-font-color($bg), $v-selection-color);
+    } @else {
+      color: $active-color;
+    }
+  }
+  
   &.selected {
     background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%));
 
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
index a5f6e36957..dc54672cb6 100644
--- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -181,7 +181,9 @@ $v-selection-item-selection-color: $v-selection-color !default;
 
 @mixin valo-selection-item-selected-style {
   @include valo-gradient($v-selection-item-selection-color);
-  color: valo-font-color($v-selection-item-selection-color, 0.9);
+  $font-color: valo-font-color($v-selection-item-selection-color, 0.9);
+  color: $font-color;
+  text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-item-selection-color);
 }