Bring legacy/mediawiki.ui messages closer to Style Guide & ensure contrast

Also updating mediawiki.ui variables and reflecting WikimediaUI Base
variable name structure for future merge.

Bug: T226795
Change-Id: Ifd01161f718f35fb3cce94efdad43a069ae8ae13

diff --git a/resources/src/mediawiki.legacy/shared.css b/resources/src/mediawiki.legacy/shared.css
index bebc172..3b99696 100644 (file)
--- a/resources/src/mediawiki.legacy/shared.css
+++ b/resources/src/mediawiki.legacy/shared.css
@@ -354,7 +354,7 @@ a.new {
        font-weight: bold;
 }
 
-/* success and error messages */
+/* Error, warning and success messages */
 .error,
 .warning,
 .success {
@@ -366,11 +366,11 @@ a.new {
 }
 
 .warning {
-       color: #705000;
+       color: #ac6600;
 }
 
 .success {
-       color: #009000;
+       color: #14866d;
 }
 
 .errorbox,
@@ -380,15 +380,13 @@ a.new {
        padding: 0.5em 1em;
        margin-bottom: 1em;
        display: inline-block;
-       zoom: 1;
-       *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
 }
 
 .errorbox h2,
 .warningbox h2,
 .successbox h2 {
-       font-size: 1em;
        color: inherit;
+       font-size: 1em;
        font-weight: bold;
        display: inline;
        margin: 0 0.5em 0 0;
@@ -396,26 +394,26 @@ a.new {
 }
 
 .errorbox {
-       color: #d33;
-       border-color: #fac5c5;
-       background-color: #fae3e3;
+       background-color: #fee7e6;
+       color: #000;
+       border-color: #d33;
 }
 
 .warningbox {
-       color: #705000;
-       border-color: #fde29b;
-       background-color: #fdf1d1;
+       background-color: #fef6e7;
+       color: #000;
+       border-color: #fc3;
 }
 
 .successbox {
-       color: #008000;
-       border-color: #b7fdb5;
-       background-color: #e1fddf;
+       background-color: #d5fdf4;
+       color: #000;
+       border-color: #14866d;
 }
 
 /* general info/warning box for SP */
 .mw-infobox {
-       border: 2px solid #ff7f00;
+       border: 2px solid #fc3;
        margin: 0.5em;
        clear: left;
        overflow: hidden;

diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index 6a75db0..e493e59 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -59,6 +59,7 @@
 
 // Text colors
 @colorText: @colorGray2;
+@colorTextEmphasized: @colorGray1;
 @colorTextLight: @colorGray5;
 @colorButtonText: @colorGray2;
 @colorButtonTextHighlight: @colorGray4;
@@ -104,3 +105,9 @@
 
 // Form input sizes, equal to OOUI at 14px base font-size
 @sizeInputBinary: 1.5625em;
+
+// Messages
+@backgroundColorError: #fee7e6;
+@borderColorError: #d33;
+@backgroundColorWarning: #fef6e7;
+@borderColorWarning: #fc3;

diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less
index d08fff5..01318c9 100644 (file)
--- a/resources/src/mediawiki.ui/components/forms.less
+++ b/resources/src/mediawiki.ui/components/forms.less
@@ -115,22 +115,22 @@
                .box-sizing( border-box );
                font-size: 0.9em;
                margin: 0 0 1em 0;
-               padding: 0.5em;
+               padding: 0.5em 1em;
                word-wrap: break-word;
        }
 
        // Colours taken from those for .errorbox in shared.css
        .error {
-               color: @colorErrorText;
-               border: 1px solid #fac5c5;
-               background-color: #fae3e3;
+               background-color: @backgroundColorError;
+               color: @colorTextEmphasized;
+               border: 1px solid @borderColorError;
        }
 
        // Colours taken from those for .warningbox in shared.css
        .warning {
-               color: @colorWarningText;
-               border: 1px solid #fde29b;
-               background-color: #fdf1d1;
+               background-color: @backgroundColorWarning;
+               color: @colorTextEmphasized;
+               border: 1px solid @borderColorWarning;
        }
 
        // This specifies styling for individual field validation error messages.