From 5da258a3fcff856bd4c7ab8396c8f7866cc4f7e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Janiczko?= <ext-michal.janiczko@sage.com>
Date: Fri, 10 Dec 2021 12:32:06 +0100
Subject: [PATCH] feat(message): describe type-icon with design tokens, fix
 snapshots

---
 .../__snapshots__/type-icon.spec.js.snap      | 40 +++++++++----------
 .../message/type-icon/type-icon.style.js      | 17 +++++---
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/components/message/type-icon/__snapshots__/type-icon.spec.js.snap b/src/components/message/type-icon/__snapshots__/type-icon.spec.js.snap
index de1fe3e317..7defb91398 100644
--- a/src/components/message/type-icon/__snapshots__/type-icon.spec.js.snap
+++ b/src/components/message/type-icon/__snapshots__/type-icon.spec.js.snap
@@ -6,7 +6,7 @@ exports[`TypeIcon when rendered with no additional props should match the snapsh
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #C7384F;
+  background-color: var(--colorsSemanticNegative500);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -21,7 +21,7 @@ exports[`TypeIcon when rendered with no additional props should match the snapsh
 }
 
 .c0 span:before {
-  color: #FFFFFF;
+  color: var(--colorsUtilityYang100);
 }
 
 <div
@@ -35,7 +35,7 @@ exports[`TypeIcon when rendered with no additional props should match the snapsh
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #0073C2;
+  background-color: var(--colorsSemanticNeutral500);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -50,7 +50,7 @@ exports[`TypeIcon when rendered with no additional props should match the snapsh
 }
 
 .c0 span:before {
-  color: #FFFFFF;
+  color: var(--colorsUtilityYang100);
 }
 
 <div
@@ -64,7 +64,7 @@ exports[`TypeIcon when rendered with no additional props should match the snapsh
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #00B000;
+  background-color: var(--colorsSemanticPositive500);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -79,7 +79,7 @@ exports[`TypeIcon when rendered with no additional props should match the snapsh
 }
 
 .c0 span:before {
-  color: #FFFFFF;
+  color: var(--colorsUtilityYang100);
 }
 
 <div
@@ -93,7 +93,7 @@ exports[`TypeIcon when rendered with no additional props should match the snapsh
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #E96400;
+  background-color: var(--colorsSemanticCaution500);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -108,7 +108,7 @@ exports[`TypeIcon when rendered with no additional props should match the snapsh
 }
 
 .c0 span:before {
-  color: #FFFFFF;
+  color: var(--colorsUtilityYang100);
 }
 
 <div
@@ -122,7 +122,7 @@ exports[`TypeIcon when transparent prop is set to true applies white background
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #0073C2;
+  background-color: var(--colorsSemanticNeutral500);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -138,11 +138,11 @@ exports[`TypeIcon when transparent prop is set to true applies white background
 }
 
 .c0 span:before {
-  color: #FFFFFF;
+  color: var(--colorsUtilityYang100);
 }
 
 .c0 span:before {
-  color: #0073C2;
+  color: var(--colorsSemanticNeutral500);
 }
 
 <div
@@ -156,7 +156,7 @@ exports[`TypeIcon when transparent prop is set to true applies white background
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #C7384F;
+  background-color: var(--colorsSemanticNegative500);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -172,11 +172,11 @@ exports[`TypeIcon when transparent prop is set to true applies white background
 }
 
 .c0 span:before {
-  color: #FFFFFF;
+  color: var(--colorsUtilityYang100);
 }
 
 .c0 span:before {
-  color: #C7384F;
+  color: var(--colorsSemanticNegative500);
 }
 
 <div
@@ -190,7 +190,7 @@ exports[`TypeIcon when transparent prop is set to true applies white background
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #00B000;
+  background-color: var(--colorsSemanticPositive500);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -206,11 +206,11 @@ exports[`TypeIcon when transparent prop is set to true applies white background
 }
 
 .c0 span:before {
-  color: #FFFFFF;
+  color: var(--colorsUtilityYang100);
 }
 
 .c0 span:before {
-  color: #00B000;
+  color: var(--colorsSemanticPositive500);
 }
 
 <div
@@ -224,7 +224,7 @@ exports[`TypeIcon when transparent prop is set to true applies white background
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #E96400;
+  background-color: var(--colorsSemanticCaution500);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -240,11 +240,11 @@ exports[`TypeIcon when transparent prop is set to true applies white background
 }
 
 .c0 span:before {
-  color: #FFFFFF;
+  color: var(--colorsUtilityYang100);
 }
 
 .c0 span:before {
-  color: #E96400;
+  color: var(--colorsSemanticCaution500);
 }
 
 <div
diff --git a/src/components/message/type-icon/type-icon.style.js b/src/components/message/type-icon/type-icon.style.js
index 51ff32deef..9489ddfda2 100644
--- a/src/components/message/type-icon/type-icon.style.js
+++ b/src/components/message/type-icon/type-icon.style.js
@@ -1,10 +1,16 @@
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
-import BaseTheme from "../../../style/themes/base";
+
+const messageVariants = {
+  error: "var(--colorsSemanticNegative500)",
+  info: "var(--colorsSemanticNeutral500)",
+  success: "var(--colorsSemanticPositive500)",
+  warning: "var(--colorsSemanticCaution500)",
+};
 
 const TypeIconStyle = styled.div`
   align-items: center;
-  background-color: ${({ theme, variant }) => theme.colors[variant]};
+  background-color: ${({ variant }) => messageVariants[variant]};
   display: flex;
   justify-content: center;
   line-height: 100%;
@@ -12,17 +18,17 @@ const TypeIconStyle = styled.div`
   text-align: center;
   span {
     &:before {
-      color: ${({ theme }) => theme.colors.white};
+      color: var(--colorsUtilityYang100);
     }
   }
 
-  ${({ theme, transparent, variant }) =>
+  ${({ transparent, variant }) =>
     transparent &&
     css`
       background-color: transparent;
       span {
         &:before {
-          color: ${theme.colors[variant]};
+          color: ${messageVariants[variant]};
         }
       }
     `}
@@ -30,7 +36,6 @@ const TypeIconStyle = styled.div`
 
 TypeIconStyle.defaultProps = {
   variant: "info",
-  theme: BaseTheme,
   transparent: false,
 };