fix(form): inverted state forms colors

The state colors in inverted form and inverted message were too dark for field label and message text I adjusted them so they now match a error field input label to make it readable and consistent
fomantic · Jan 7, 2021 · 2f78f4e · 2f78f4e
1 parent 245b087
commit 2f78f4e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
@@ -686,6 +686,13 @@
     .ui.form .field.@{state} .checkbox .box:after {
       color: @c;
     }
+
+    & when (@variationFormInverted) {
+      .ui.inverted.form .fields.@{state} .field label,
+      .ui.inverted.form .@{state}.field label {
+        color: @lbg;
+      }
+    }
   })
 }
 

diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less
@@ -296,41 +296,47 @@
       boxShadow      : @positiveBoxShadow;
       boxFloatShadow : @positiveBoxFloatingShadow;
       text           : @positiveTextColor;
+      invertedText   : @positiveBorderColor;
     };
     @negative: {
       background     : @negativeBackgroundColor;
       header         : @negativeHeaderColor;
       boxShadow      : @negativeBoxShadow;
       boxFloatShadow : @negativeBoxFloatingShadow;
       text           : @negativeTextColor;
+      invertedText   : @negativeBorderColor;
     };
     @info: {
       background     : @infoBackgroundColor;
       header         : @infoHeaderColor;
       boxShadow      : @infoBoxShadow;
       boxFloatShadow : @infoBoxFloatingShadow;
       text           : @infoTextColor;
+      invertedText   : @formInfoLabelBackground;
     };
     @warning: {
       background     : @warningBackgroundColor;
       header         : @warningHeaderColor;
       boxShadow      : @warningBoxShadow;
       boxFloatShadow : @warningBoxFloatingShadow;
       text           : @warningTextColor;
+      invertedText   : @formWarningLabelBackground;
     };
     @error: {
       background     : @errorBackgroundColor;
       header         : @errorHeaderColor;
       boxShadow      : @errorBoxShadow;
       boxFloatShadow : @errorBoxFloatingShadow;
       text           : @errorTextColor;
+      invertedText   : @formErrorLabelBackground;
     };
     @success: {
       background     : @successBackgroundColor;
       header         : @successHeaderColor;
       boxShadow      : @successBoxShadow;
       boxFloatShadow : @successBoxFloatingShadow;
       text           : @successTextColor;
+      invertedText   : @formSuccessLabelBackground;
     };
   }
 
@@ -343,6 +349,7 @@
     @bs: @consequences[@@color][boxShadow];
     @bfs: @consequences[@@color][boxFloatShadow];
     @t: @consequences[@@color][text];
+    @it: @consequences[@@color][invertedText];
 
     .ui.@{color}.message {
       background-color: @bg;
@@ -361,6 +368,12 @@
     .ui.@{color}.message .header {
       color: @hd;
     }
+    & when (@variationMessageInverted) {
+      .ui.inverted.@{color}.message,
+      .ui.inverted.@{color}.message .header {
+        color: @it;
+      }
+    }
   })
 }
 

diff --git a/src/themes/default/globals/colors.less b/src/themes/default/globals/colors.less
@@ -497,7 +497,7 @@
     borderRadius: @inputErrorBorderRadius;
     boxShadow: @inputErrorBoxShadow;
     cornerLabelColor: @white;
-    labelBackground: darken(@formErrorBorder, -8);
+    labelBackground: @formErrorLabelBackground;
 
     dropdownLabelColor: @dropdownErrorLabelColor;
     dropdownLabelBackground: @dropdownErrorLabelBackground;
@@ -525,7 +525,7 @@
     borderRadius: @inputInfoBorderRadius;
     boxShadow: @inputInfoBoxShadow;
     cornerLabelColor: @white;
-    labelBackground: darken(@formInfoBorder, -8);
+    labelBackground: @formInfoLabelBackground;
 
     dropdownLabelColor: @dropdownInfoLabelColor;
     dropdownLabelBackground: @dropdownInfoLabelBackground;
@@ -553,7 +553,7 @@
     borderRadius: @inputSuccessBorderRadius;
     boxShadow: @inputSuccessBoxShadow;
     cornerLabelColor: @white;
-    labelBackground: darken(@formSuccessBorder, -8);
+    labelBackground: @formSuccessLabelBackground;
 
     dropdownLabelColor: @dropdownSuccessLabelColor;
     dropdownLabelBackground: @dropdownSuccessLabelBackground;
@@ -581,7 +581,7 @@
     borderRadius: @inputWarningBorderRadius;
     boxShadow: @inputWarningBoxShadow;
     cornerLabelColor: @white;
-    labelBackground: darken(@formWarningBorder, -8);
+    labelBackground: @formWarningLabelBackground;
 
     dropdownLabelColor: @dropdownWarningLabelColor;
     dropdownLabelBackground: @dropdownWarningLabelBackground;

diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables
@@ -1346,24 +1346,28 @@
 @formErrorColor: @negativeTextColor;
 @formErrorBorder: @negativeBorderColor;
 @formErrorBackground: @negativeBackgroundColor;
+@formErrorLabelBackground: darken(@formErrorBorder, -8);
 @transparentFormErrorColor: @formErrorColor;
 @transparentFormErrorBackground: @formErrorBackground;
 
 @formInfoColor: @infoTextColor;
 @formInfoBorder: @infoBorderColor;
 @formInfoBackground: @infoBackgroundColor;
+@formInfoLabelBackground: darken(@formInfoBorder, -8);
 @transparentFormInfoColor: @formInfoColor;
 @transparentFormInfoBackground: @formInfoBackground;
 
 @formSuccessColor: @positiveTextColor;
 @formSuccessBorder: @positiveBorderColor;
 @formSuccessBackground: @positiveBackgroundColor;
+@formSuccessLabelBackground: darken(@formSuccessBorder, -8);
 @transparentFormSuccessColor: @formSuccessColor;
 @transparentFormSuccessBackground: @formSuccessBackground;
 
 @formWarningColor: @warningTextColor;
 @formWarningBorder: @warningBorderColor;
 @formWarningBackground: @warningBackgroundColor;
+@formWarningLabelBackground: darken(@formWarningBorder, -8);
 @transparentFormWarningColor: @formWarningColor;
 @transparentFormWarningBackground: @formWarningBackground;