feat(form): apply state color also to label class

When the form with error state contain the labels, these labels will be styled as red color, but only they're used as HTML label element.

Now, any element with label class will have the same style as label element, and produces more consistent design flow.

Author: ko2in

src/definitions/collections/form.less

@@ -468,6 +468,7 @@
     @c: @formStates[@@state][color];
     @bg: @formStates[@@state][background];
     @bdc: @formStates[@@state][borderColor];
+    @lbg: @formStates[@@state][labelBackground];
 
     /* On Form */
     .ui.form.@{state} .@{state}.message:not(:empty) {
@@ -495,12 +496,19 @@
     }
 
     .ui.ui.form .fields.@{state} .field label,
+    .ui.ui.form .fields.@{state} .field .ui.label:not(.corner),
     .ui.ui.form .field.@{state} label,
+    .ui.ui.form .field.@{state} .ui.label:not(.corner),
     .ui.ui.form .fields.@{state} .field .input,
     .ui.ui.form .field.@{state} .input {
       color: @c;
     }
 
+    .ui.form .fields.@{state} .field .ui.label, 
+    .ui.form .field.@{state} .ui.label {
+      background-color: @lbg;
+    }
+
     .ui.form .fields.@{state} .field .corner.label,
     .ui.form .field.@{state} .corner.label {
       border-color: @c;

src/themes/default/globals/colors.less

@@ -497,6 +497,7 @@
     borderRadius: @inputErrorBorderRadius;
     boxShadow: @inputErrorBoxShadow;
     cornerLabelColor: @white;
+    labelBackground: darken(@formErrorBorder, -8);
 
     dropdownLabelColor: @dropdownErrorLabelColor;
     dropdownLabelBackground: @dropdownErrorLabelBackground;
@@ -524,6 +525,7 @@
     borderRadius: @inputInfoBorderRadius;
     boxShadow: @inputInfoBoxShadow;
     cornerLabelColor: @white;
+    labelBackground: darken(@formInfoBorder, -8);
 
     dropdownLabelColor: @dropdownInfoLabelColor;
     dropdownLabelBackground: @dropdownInfoLabelBackground;
@@ -551,6 +553,7 @@
     borderRadius: @inputSuccessBorderRadius;
     boxShadow: @inputSuccessBoxShadow;
     cornerLabelColor: @white;
+    labelBackground: darken(@formSuccessBorder, -8);
 
     dropdownLabelColor: @dropdownSuccessLabelColor;
     dropdownLabelBackground: @dropdownSuccessLabelBackground;
@@ -578,6 +581,7 @@
     borderRadius: @inputWarningBorderRadius;
     boxShadow: @inputWarningBoxShadow;
     cornerLabelColor: @white;
+    labelBackground: darken(@formWarningBorder, -8);
 
     dropdownLabelColor: @dropdownWarningLabelColor;
     dropdownLabelBackground: @dropdownWarningLabelBackground;