Elastic: Fix contrast of warning toasts (#7058)

Add some color variables and slightly make bg-color stronger on "box" messages.

2 files changed, 32 insertions, 6 deletions

diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index 2d0174b90..2e042f7c2 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -106,6 +106,7 @@
 @color-message:                     @color-font;
 @color-message-border:              transparent;
 @color-message-background:          fadeout(@color-main, 95%);
+@color-message-text:                #fff;
 @color-message-link:                @color-main;
 @color-message-link-font-weight:    normal;
 @color-message-information:         @color-main;
@@ -113,14 +114,19 @@
 @color-message-warning:             @color-warning;
 @color-message-error:               @color-error;
 @color-message-loading:             tint(@color-font, 30%);
+@color-message-information-text:    @color-message-text;
+@color-message-success-text:        @color-message-text;
+@color-message-warning-text:        @color-message;
+@color-message-error-text:          @color-message-text;
+@color-message-loading-text:        @color-message-text;
 @color-message-error-box:           @color-message;
 @color-message-information-box:     @color-message;
 @color-message-success-box:         @color-message;
 @color-message-warning-box:         @color-message;
-@color-message-error-box-background:        fadeout(@color-message-error, 85%);
-@color-message-information-box-background:  fadeout(@color-message-information, 85%);
-@color-message-success-box-background:      fadeout(@color-message-success, 85%);
-@color-message-warning-box-background:      fadeout(#ffff66, 75%);
+@color-message-error-box-background:        fadeout(@color-message-error, 80%);
+@color-message-information-box-background:  fadeout(@color-message-information, 80%);
+@color-message-success-box-background:      fadeout(@color-message-success, 80%);
+@color-message-warning-box-background:      fadeout(@color-message-warning, 80%);
 
 
 // Popovers (menus)
diff --git a/skins/elastic/styles/widgets/messages.less b/skins/elastic/styles/widgets/messages.less
index 5bfb48fc6..093ab08b2 100644
--- a/skins/elastic/styles/widgets/messages.less
+++ b/skins/elastic/styles/widgets/messages.less
@@ -193,7 +193,7 @@
 
     div {
         background-color: @color-message;
-        color: #fff;
+        color: @color-message-text;
 
         @media screen and (max-width: @screen-width-xs) {
             margin: 0;
@@ -211,7 +211,7 @@
         }
 
         & > i.icon:before {
-            color: #fff;
+            color: @color-message-text;
         }
 
         &:last-child {
@@ -221,22 +221,42 @@
 
     .loading {
         background-color: @color-message-loading;
+        & when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
+        & > i.icon:before {
+            & when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
+        }
     }
 
     .alert-info.information {
         background-color: @color-message-information;
+        & when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
+        & > i.icon:before {
+            & when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
+        }
     }
 
     .alert-success {
         background-color: @color-message-success;
+        & when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
+        & > i.icon:before {
+            & when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
+        }
     }
 
     .alert-warning {
         background-color: @color-message-warning;
+        & when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
+        & > i.icon:before {
+            & when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
+        }
     }
 
     .alert-danger {
         background-color: @color-message-error;
+        & when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
+        & > i.icon:before {
+            & when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
+        }
     }
 
     a {