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

diff --git a/WebContent/VAADIN/themes/tests-valo-light/_variables.scss b/WebContent/VAADIN/themes/tests-valo-light/_variables.scss
new file mode 100644 (file)
index 0000000..e851f07
--- /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 (file)
index 0000000..12ee8a7
--- /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 3144acb37c7ceef110dcfa4fba111a5a61156ad0..2669ac44f68ee6c26a7d6bf3693c0fe94954986a 100644 (file)
--- 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 93553fe55a3b79b28952bca8893f09208e0ee505..8e75f59945bff5acd629271dc1bd30bb271beed6 100644 (file)
--- 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 507065d3398d2be309b98ca237437c404d794242..020eb1cae76482976f492180663002faeeab0ca2 100644 (file)
--- 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 a5f6e36957bb33ce9043e8f344248a19c1250a4f..dc54672cb60e309aaf737ad48dc7eda8ed441b2d 100644 (file)
--- 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);
 }
 
 

diff --git a/build/ide.xml b/build/ide.xml
index c7183077a9cb437914ee8bcbc486183070b809d2..1e586acc19d971b21da45f03d0b1b27ded8cb1e6 100755 (executable)
--- a/build/ide.xml
+++ b/build/ide.xml
@@ -92,6 +92,9 @@
             <antcall target="compile-theme" inheritRefs="true">
                 <param name="theme" value="tests-valo-blueprint" />
             </antcall>
+            <antcall target="compile-theme" inheritRefs="true">
+              <param name="theme" value="tests-valo-light" />
+            </antcall>
         </parallel>
     </target>
 

diff --git a/uitest/build.xml b/uitest/build.xml
index e81983f1f5bb18cd229ff3450f32e43075546c1c..02b97fb3a06ddfed4c70d664823bf380afdefd07 100644 (file)
--- a/uitest/build.xml
+++ b/uitest/build.xml
@@ -267,6 +267,9 @@
         <antcall target="compile-theme">
             <param name="theme" value="tests-valo-blueprint" />
         </antcall>
+        <antcall target="compile-theme">
+          <param name="theme" value="tests-valo-light" />
+        </antcall>
 
     </target>
     <target name="compile-theme" depends="copy-theme">

diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java
index b33a6040338c7f83592ea5d0b0a9604e6acba4b0..62d76569ddfafb222ac4b3c031e1f5e35dd23702 100644 (file)
--- a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java
@@ -71,6 +71,7 @@ public class ValoThemeUI extends UI {
         themeVariants.put("tests-valo-facebook", "Facebook");
         themeVariants.put("tests-valo-flatdark", "Flat dark");
         themeVariants.put("tests-valo-flat", "Flat");
+        themeVariants.put("tests-valo-light", "Light");
         themeVariants.put("tests-valo-metro", "Metro");
     }
     private TestIcon testIcon = new TestIcon(100);