change(message): use semantic colors for messages #204 from eea/refac…

…tor-message
eea · Aug 25, 2022 · 22d2c43 · 22d2c43
2 parents da4bb9f + 44dda82
commit 22d2c43
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 66 deletions.
diff --git a/src/ui/Message/Message.stories.js b/src/ui/Message/Message.stories.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Message } from 'semantic-ui-react';
+import { Message, Container } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Message',
   component: Message,
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['mini', 'tiny', 'small', '', 'large', 'big', 'huge', 'massive'],
+      options: ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive'],
       description: 'message size',
       table: {
         type: {
@@ -43,7 +43,11 @@ export default {
   },
 };
 
-const Template = (args) => <Message {...args}></Message>;
+const Template = (args) => (
+  <Container>
+    <Message {...args}></Message>
+  </Container>
+);
 
 export const Default = Template.bind({});
 Default.args = {
@@ -54,6 +58,7 @@ Default.args = {
 
 export const Success = Template.bind({});
 Success.args = {
+  header: 'Success header',
   content: 'This is a Success message',
   icon: 'exclamation circle',
   success: true,
@@ -82,6 +87,7 @@ Success.parameters = {
 
 export const Warning = Template.bind({});
 Warning.args = {
+  header: 'Warning header',
   content: 'This is a Warning message',
   icon: 'exclamation circle',
   warning: true,
@@ -110,6 +116,7 @@ Warning.parameters = {
 
 export const Error = Template.bind({});
 Error.args = {
+  header: 'Error header',
   content: 'This is an Error Message',
   icon: 'exclamation circle',
   error: true,
@@ -137,6 +144,7 @@ Error.parameters = {
 
 export const Info = Template.bind({});
 Info.args = {
+  header: 'Info header',
   content: 'This is an Info message',
   icon: 'exclamation circle',
   info: true,

diff --git a/theme/themes/eea/collections/message.overrides b/theme/themes/eea/collections/message.overrides
@@ -2,33 +2,32 @@
          Theme Overrides
 *******************************/
 
-/* Text size and weight */
-.ui.message p {
-  font-size: @messageFontSize;
+/* Old custom messages | update in form refactoring
+
+.field-wrapper .ui.message p {
   font-weight: @messageFontWeight;
 }
-
-/* Text color for non state messages */
-.ui.message:not(.success):not(.error):not(.warning):not(.info):not(.negative):not(.positive) {
+.field-wrapper .ui.message:not(.success):not(.error):not(.warning):not(.info):not(.negative):not(.positive) {
   color: @messageColor;
 }
 
-/* Align icon next to header */
-.ui.icon.message {
+.field-wrapper .ui.icon.message {
   align-items: @messageItemsAlign;
 }
-
-/* Icon margin to align with header text size */
-div.ui.icon.message > .icon,
-div.ui.icon.message > .icon:not(.close) {
+.field-wrapper div.ui.icon.message > .icon,
+.field-wrapper div.ui.icon.message > .icon:not(.close) {
   margin: @iconMargin;
+  line-height: @iconLineHeight;
 }
+*/
 
-.ui.success.message,
-.ui.warning.message,
-.ui.error.message,
-.ui.info.message,
-.ui.positive.message,
-.ui.negative.message {
-  background: @background;
-}
+// No background or border for form messages
+.field-wrapper .ui.success.message,
+.field-wrapper .ui.warning.message,
+.field-wrapper .ui.error.message,
+.field-wrapper .ui.info.message,
+.field-wrapper .ui.positive.message,
+.field-wrapper .ui.negative.message {
+  background: transparent;
+  box-shadow: none;
+}
diff --git a/theme/themes/eea/collections/message.variables b/theme/themes/eea/collections/message.variables
@@ -2,24 +2,32 @@
             Message
 *******************************/
 
+@messageFontWeight: @bold;
+@messageColor: @black;
+@messageItemsAlign: flex-start;
+@iconLineHeight: 1.29;
+@iconMargin: 0.75rem;
 
 /*-------------------
        Elements
 --------------------*/
 
 @verticalMargin: 1em;
-@verticalPadding: 0.5rem;
-@horizontalPadding: 0;
+@verticalPadding: 1.5em;
+@verticalPadding: 1em;
+@horizontalPadding: 1.5em;
 @padding: @verticalPadding @horizontalPadding;
-@background: transparent;
+@background: #F8F8F9;
 @lineHeightOffset: ((@lineHeight - 1em) / 2);
-@messageItemsAlign: flex-start;
 
-@borderRadius: @defaultBorderRadius;
-@borderWidth: 0;
+@borderRadius: 0;
+@borderWidth: 1px;
 @borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset;
 @shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
-@boxShadow: none;
+@boxShadow:
+  @borderShadow,
+  @shadowShadow
+;
 
 @transition:
   opacity @defaultDuration @defaultEasing,
@@ -29,19 +37,16 @@
 ;
 
 /* Header */
-@headerFontSize: 0.875rem;
+@headerFontSize: @relativeLarge;
 @headerFontWeight: @bold;
 @headerDisplay: block;
 @headerDistance: 0rem;
 @headerMargin: -@headerLineHeightOffset 0em @headerDistance 0em;
 @headerParagraphDistance: 0.15em;
 
 /* Paragraph */
-@messageTextOpacity: 1;
-@messageParagraphMargin: 0;
-@messageColor: @black;
-@messageFontSize: 0.875rem;
-@messageFontWeight: @bold;
+@messageTextOpacity: 0.85;
+@messageParagraphMargin: 0.75em;
 
 /* List */
 @listOpacity: 0.85;
@@ -51,7 +56,7 @@
 @listItemMargin: 0.3em;
 
 /* Icon */
-@iconDistance: 0.3em;
+@iconDistance: @rem-space-4;
 
 /* Close Icon */
 @closeTopDistance: @verticalPadding - @lineHeightOffset;
@@ -65,9 +70,8 @@
 --------------------*/
 
 /* Icon Message */
-@iconMargin: 0.09rem 0.6rem 0 0;
-@iconSize: 1rem;
-@iconOpacity: 1;
+@iconSize: 2em;
+@iconOpacity: 0.8;
 @iconContentDistance: 0rem;
 @iconVerticalAlign: top;
 
@@ -133,10 +137,28 @@
 ;
 
 /* Warning / Positive / Negative / Info */
-@positiveBoxShadow: none;
-@negativeBoxShadow: none;
-@infoBoxShadow: none;
-@warningBoxShadow: none;
-@errorBoxShadow: none;
-@successBoxShadow: none;
+@positiveBoxShadow:
+  0px 0px 0px @borderWidth @positiveBorderColor inset,
+  @shadowShadow
+;
+@negativeBoxShadow:
+  0px 0px 0px @borderWidth @negativeBorderColor inset,
+  @shadowShadow
+;
+@infoBoxShadow:
+  0px 0px 0px @borderWidth @infoBorderColor inset,
+  @shadowShadow
+;
+@warningBoxShadow:
+  0px 0px 0px @borderWidth @warningBorderColor inset,
+  @shadowShadow
+;
+@errorBoxShadow:
+  0px 0px 0px @borderWidth @errorBorderColor inset,
+  @shadowShadow
+;
+@successBoxShadow:
+  0px 0px 0px @borderWidth @successBorderColor inset,
+  @shadowShadow
+;
 
diff --git a/theme/themes/eea/globals/site.variables b/theme/themes/eea/globals/site.variables
@@ -349,7 +349,7 @@
 
 
 /*---  Colors  ---*/
-@orange           : #EBA33D;
+@orange           : #FF9933;
 @yellow           : #F2EB49;
 @olive            : #78AB66;
 @green            : @pineGreen;
@@ -496,32 +496,34 @@
 --------------------*/
 
 /* Positive */
-@positiveColor           : @pineGreen;
-@positiveBackgroundColor : #EDF9F0;
-@positiveBorderColor     : #EDF9F0;
-@positiveHeaderColor     : @pineGreen;
-@positiveTextColor       : @pineGreen;
+@positiveColor           : @green-6;
+@positiveBackgroundColor : #FCFFF5;
+@positiveBorderColor     : @green-4;
+@positiveHeaderColor     : @green-6;
+@positiveTextColor       : @green-6;
 
 /* Negative */
-@negativeColor           : @red;
+@negativeColor           : @red-5;
 @negativeBackgroundColor : @white;
-@negativeBorderColor     : @red; //#FEEFEF;
-@negativeHeaderColor     : @red;
-@negativeTextColor       : @red;
+@negativeBorderColor     : @red-4;
+@negativeHeaderColor     : @red-5;
+@negativeTextColor       : @red-5;
 
 /* Info */
-@infoColor              : @mediumPersianBlue;
-@infoBackgroundColor    : #EEF2FA;
-@infoBorderColor        : #EEF2FA;
-@infoHeaderColor        : @mediumPersianBlue;
-@infoTextColor          : @mediumPersianBlue;
+@infoColor              : @blue-6;
+@infoBackgroundColor    : #F8FFFF;
+@infoBorderColor        : @blue-4;
+@infoHeaderColor        : @blue-6;
+@infoTextColor          : @blue-6;
+
 
 /* Warning */
-@warningColor           : #EBA33D;
-@warningBorderColor     : #FFF4EC;
-@warningBackgroundColor : #FFF4EC;
-@warningHeaderColor     : #EBA33D;
-@warningTextColor       : #EBA33D;
+@warningColor           : @brown-6;
+@warningBackgroundColor : #FFFAF3;
+@warningBorderColor     : @brown-4;
+@warningHeaderColor     : @brown-6;
+@warningTextColor       : @brown-6;
+
 
 /*-------------------
         Paths