refactor(message): update colors to match design

eea · Mar 1, 2022 · 633ce31 · 633ce31
1 parent ef0969b
commit 633ce31
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 29 deletions.
diff --git a/src/ui/Message/Message.stories.js b/src/ui/Message/Message.stories.js
@@ -110,8 +110,7 @@ Warning.parameters = {
 
 export const Error = Template.bind({});
 Error.args = {
-  header: 'This is an Error Message',
-  content: 'This is information about the error message',
+  content: 'This is an Error Message',
   icon: 'exclamation circle',
   error: true,
   size: 'small',

diff --git a/theme/themes/eea/collections/message.overrides b/theme/themes/eea/collections/message.overrides
@@ -23,3 +23,12 @@ div.ui.icon.message > .icon,
 div.ui.icon.message > .icon:not(.close) {
   margin: @iconMargin;
 }
+
+.ui.success.message,
+.ui.warning.message,
+.ui.error.message,
+.ui.info.message,
+.ui.positive.message,
+.ui.negative.message, {
+  background: @background;
+}
diff --git a/theme/themes/eea/collections/message.variables b/theme/themes/eea/collections/message.variables
@@ -8,11 +8,10 @@
 --------------------*/
 
 @verticalMargin: 1em;
-@verticalPadding: 1.5em;
-@verticalPadding: 1em;
-@horizontalPadding: 1.5em;
+@verticalPadding: 0.5rem;
+@horizontalPadding: 1rem;
 @padding: @verticalPadding @horizontalPadding;
-@background: #F2F2F2;
+@background: transparent;
 @lineHeightOffset: ((@lineHeight - 1em) / 2);
 @messageItemsAlign: flex-start;
 
@@ -30,7 +29,7 @@
 ;
 
 /* Header */
-@headerFontSize: 13px;
+@headerFontSize: 0.875rem;
 @headerFontWeight: @bold;
 @headerDisplay: block;
 @headerDistance: 0rem;
@@ -41,7 +40,7 @@
 @messageTextOpacity: 1;
 @messageParagraphMargin: 0;
 @messageColor: @black;
-@messageFontSize: 13px;
+@messageFontSize: 0.875rem;
 @messageFontWeight: @bold;
 
 /* List */
@@ -68,7 +67,7 @@
 /* Icon Message */
 @iconMargin: 0.09rem 0.6rem 0 0;
 @iconSize: 1rem;
-@iconOpacity: 0.8;
+@iconOpacity: 1;
 @iconContentDistance: 0rem;
 @iconVerticalAlign: top;
 

diff --git a/theme/themes/eea/globals/site.variables b/theme/themes/eea/globals/site.variables
@@ -458,32 +458,32 @@
 --------------------*/
 
 /* Positive */
-@positiveColor           : #287D3C; //
-@positiveBackgroundColor : #EDF9F0; //
-@positiveBorderColor     : #EDF9F0; //
-@positiveHeaderColor     : #287D3C; //
-@positiveTextColor       : #287D3C; //
+@positiveColor           : @pineGreen;
+@positiveBackgroundColor : #EDF9F0;
+@positiveBorderColor     : #EDF9F0;
+@positiveHeaderColor     : @pineGreen;
+@positiveTextColor       : @pineGreen;
 
 /* Negative */
-@negativeColor           : #DA1414; //
-@negativeBackgroundColor : #FEEFEF; //
-@negativeBorderColor     : #FEEFEF; //
-@negativeHeaderColor     : #DA1414; //
-@negativeTextColor       : #DA1414; //
+@negativeColor           : @red;
+@negativeBackgroundColor : #FEEFEF;
+@negativeBorderColor     : #FEEFEF;
+@negativeHeaderColor     : @red;
+@negativeTextColor       : @red;
 
 /* Info */
-@infoColor              : #2E5AAC; //
-@infoBackgroundColor    : #EEF2FA; //
-@infoBorderColor        : #EEF2FA; //
-@infoHeaderColor        : #2E5AAC; //
-@infoTextColor          : #2E5AAC; //
+@infoColor              : @mediumPersianBlue;
+@infoBackgroundColor    : #EEF2FA;
+@infoBorderColor        : #EEF2FA;
+@infoHeaderColor        : @mediumPersianBlue;
+@infoTextColor          : @mediumPersianBlue;
 
 /* Warning */
-@warningColor           : #B95000; //
-@warningBorderColor     : #FFF4EC; //
-@warningBackgroundColor : #FFF4EC; //
-@warningHeaderColor     : #B95000; //
-@warningTextColor       : #B95000; //
+@warningColor           : #EBA33D;
+@warningBorderColor     : #FFF4EC;
+@warningBackgroundColor : #FFF4EC;
+@warningHeaderColor     : #EBA33D;
+@warningTextColor       : #EBA33D;
 
 /*-------------------
         Paths