Add new "colored" style for Label (Valo)

Makes any Label text colored, by default the same as $v-selection-color.

Modify the Forms and Labels examples to use the new style, and remove
the fixed color from “light” style form layout for header labels.

Change-Id: I27a4fce56b1f734aa5c2c837bf1684284b0d96cc

5 files changed, 18 insertions, 1 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
index 25dbfbef28..fc065cec3d 100644
--- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
@@ -198,7 +198,6 @@
     > .v-label-h3,
     > .v-label-h4 {
       border-bottom: none;
-      color: $v-selection-color;
     }
 
     > .v-label-h3,
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index 51e7026834..e61aa4ec11 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -1,6 +1,7 @@
 $v-font-weight--header:   $v-font-weight - 100 !default;
 $v-line-height--header:   1.1             !default;
 $v-font-family--header:   null            !default;
+$v-font-color--colored:   $v-selection-color !default;
 
 $v-font-size--h1:         2.4em           !default;
 $v-font-size--h2:         1.6em           !default;
@@ -104,6 +105,10 @@ $v-letter-spacing--h4:    0               !default;
 
   @if $include-additional-styles {
 
+    .#{$primary-stylename}-colored {
+      color: $v-font-color--colored;
+    }
+
     .#{$primary-stylename}-large {
       font-size: $v-font-size--large;
     }
diff --git a/server/src/com/vaadin/ui/themes/ValoTheme.java b/server/src/com/vaadin/ui/themes/ValoTheme.java
index ea6b9082f8..d6bd97ed72 100644
--- a/server/src/com/vaadin/ui/themes/ValoTheme.java
+++ b/server/src/com/vaadin/ui/themes/ValoTheme.java
@@ -186,6 +186,11 @@ public class ValoTheme {
     public static final String LABEL_BOLD = "bold";
 
     /**
+     * Colored text. Can be combined with any other Label style.
+     */
+    public static final String LABEL_COLORED = "colored";
+
+    /**
      * Success badge style. Adds a border around the label and an icon next to
      * the text. Suitable for UI notifications that need to in the direct
      * context of some component. Can be combined with any other Label style.
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Forms.java b/uitest/src/com/vaadin/tests/themes/valo/Forms.java
index c5b08902be..90a6c51496 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/Forms.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/Forms.java
@@ -59,6 +59,7 @@ public class Forms extends VerticalLayout implements View {
 
         Label section = new Label("Personal Info");
         section.addStyleName("h2");
+        section.addStyleName("colored");
         form.addComponent(section);
         StringGenerator sg = new StringGenerator();
 
@@ -85,6 +86,7 @@ public class Forms extends VerticalLayout implements View {
 
         section = new Label("Contact Info");
         section.addStyleName("h3");
+        section.addStyleName("colored");
         form.addComponent(section);
 
         TextField email = new TextField("Email");
@@ -125,6 +127,7 @@ public class Forms extends VerticalLayout implements View {
 
         section = new Label("Additional Info");
         section.addStyleName("h4");
+        section.addStyleName("colored");
         form.addComponent(section);
 
         TextField website = new TextField("Website");
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Labels.java b/uitest/src/com/vaadin/tests/themes/valo/Labels.java
index 63c138093c..b5bab3a1d3 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/Labels.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/Labels.java
@@ -102,6 +102,11 @@ public class Labels extends VerticalLayout implements View {
         label.addStyleName("light");
         right.addComponent(label);
 
+        label = new Label(
+                "Colored type for highlighted text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        label.addStyleName("colored");
+        right.addComponent(label);
+
         label = new Label("A label for success");
         label.addStyleName("success");
         right.addComponent(label);