Updated API

src/core/client/ui/components/Message/Message.css

@@ -8,16 +8,22 @@
   box-sizing: border-box;
   border-radius: var(--round-corners);
   border-width: 1px;
-  border-left-width: calc(0.8 * var(--spacing-unit));
   border-style: solid;
+  border-left-width: calc(0.8 * var(--spacing-unit));
 }
 
-.color {
+.colorInfo {
   background-color: var(--palette-common-white);
   border-color: var(--palette-grey-main);
   color: var(--palette-grey-main);
 }
 
+.colorValidation {
+  background-color: var(--palette-error-light);
+  border-color: var(--palette-error-darkest);
+  color: var(--palette-common-white);
+}
+
 .fullWidth {
   display: flex;
   width: 100%;
@@ -25,5 +31,4 @@
 
 .icon {
   margin-right: calc(0.8 * var(--spacing-unit));
-  color: var(--palette-grey-main);
 }

src/core/client/ui/components/Message/Message.tsx

@@ -27,15 +27,28 @@ export interface MessageProps {
   * Name of the icon, render if provided
   */
   icon?: string;
+  /*
+  * Name of color, "info" stays by default - common gray one
+  */
+  color?: "validation" | "info";
 }
 
 const Message: StatelessComponent<MessageProps> = props => {
-  const { className, classes, fullWidth, children, icon, ...rest } = props;
+  const {
+    className,
+    classes,
+    fullWidth,
+    children,
+    icon,
+    color,
+    ...rest
+  } = props;
 
   const rootClassName = cn(
     classes.root,
-    classes.color,
     {
+      [classes.colorInfo]: color === "info",
+      [classes.colorValidation]: color === "validation",
       [classes.fullWidth]: fullWidth,
     },
     className
@@ -54,6 +67,7 @@ const Message: StatelessComponent<MessageProps> = props => {
 };
 
 Message.defaultProps = {
+  color: "info",
   fullWidth: false,
 };