PR fix

ValentinaKozlova · ValentinaKozlova · commit f18b59344147 · 2023-01-13T13:18:10.000+01:00
diff --git a/packages/react/src/components/MessageBar/MessageBar.styles.ts b/packages/react/src/components/MessageBar/MessageBar.styles.ts
@@ -53,6 +53,24 @@ const iconColor: { [key: string]: keyof ISemanticColors } = {
   [MessageBarType.info]: 'infoIcon',
 };
 
+const highContrastBorderColor: { [key: string]: string } = {
+  [MessageBarType.error]: '#ff0000',
+  [MessageBarType.blocked]: '#ff0000',
+  [MessageBarType.success]: '#bad80a',
+  [MessageBarType.warning]: '#fff100',
+  [MessageBarType.severeWarning]: '#ff0000',
+  [MessageBarType.info]: 'WindowText',
+};
+
+const highContrastWhiteBorderColor: { [key: string]: string } = {
+  [MessageBarType.error]: '#e81123',
+  [MessageBarType.blocked]: '#e81123',
+  [MessageBarType.success]: '#107c10',
+  [MessageBarType.warning]: '#966400',
+  [MessageBarType.severeWarning]: '#d83b01',
+  [MessageBarType.info]: 'WindowText',
+};
+
 export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
   const {
     theme,
@@ -63,7 +81,7 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
     expandSingleLine,
     messageBarType = MessageBarType.info,
   } = props;
-  const { semanticColors, fonts, palette } = theme;
+  const { semanticColors, fonts } = theme;
 
   const SmallScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);
 
@@ -108,24 +126,6 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
     },
   ];
 
-  const highContrastBorderColor: { [key: string]: string } = {
-    [MessageBarType.error]: 'rgba(255, 0, 0)',
-    [MessageBarType.blocked]: 'rgba(255, 0, 0)',
-    [MessageBarType.success]: palette.greenLight,
-    [MessageBarType.warning]: palette.yellowLight,
-    [MessageBarType.severeWarning]: 'rgba(255, 0, 0)',
-    [MessageBarType.info]: 'WindowText',
-  };
-
-  const highContrastWhiteBorderColor: { [key: string]: string } = {
-    [MessageBarType.error]: palette.red,
-    [MessageBarType.blocked]: palette.red,
-    [MessageBarType.success]: palette.green,
-    [MessageBarType.warning]: 'rgba(150, 100, 0)',
-    [MessageBarType.severeWarning]: palette.orange,
-    [MessageBarType.info]: 'WindowText',
-  };
-
   return {
     root: [
       classNames.root,
diff --git a/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap b/packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
@@ -160,7 +160,7 @@ exports[`MessageBar snapshots renders a error MessageBar correctly 1`] = `
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
         background: transparent;
-        border: 1px solid rgba(255, 0, 0);
+        border: 1px solid #ff0000;
         color: WindowText;
         forced-color-adjust: none;
       }
@@ -551,7 +551,7 @@ exports[`MessageBar snapshots renders a multiline error MessageBar correctly 1`]
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
         background: transparent;
-        border: 1px solid rgba(255, 0, 0);
+        border: 1px solid #ff0000;
         color: WindowText;
         forced-color-adjust: none;
       }
@@ -812,7 +812,7 @@ exports[`MessageBar snapshots renders a multiline severeWarning MessageBar corre
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
         background: transparent;
-        border: 1px solid rgba(255, 0, 0);
+        border: 1px solid #ff0000;
         color: WindowText;
         forced-color-adjust: none;
       }
@@ -1079,7 +1079,7 @@ exports[`MessageBar snapshots renders a multiline warning MessageBar correctly 1
         forced-color-adjust: none;
       }
       @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
-        border: 1px solid rgba(150, 100, 0);
+        border: 1px solid #966400;
       }
 >
   <div
@@ -1205,7 +1205,7 @@ exports[`MessageBar snapshots renders a severeWarning MessageBar correctly 1`] =
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
         background: transparent;
-        border: 1px solid rgba(255, 0, 0);
+        border: 1px solid #ff0000;
         color: WindowText;
         forced-color-adjust: none;
       }
@@ -1472,7 +1472,7 @@ exports[`MessageBar snapshots renders a warning MessageBar correctly 1`] = `
         forced-color-adjust: none;
       }
       @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
-        border: 1px solid rgba(150, 100, 0);
+        border: 1px solid #966400;
       }
 >
   <div

Original file line number	Diff line number	Diff line change
@@ -160,7 +160,7 @@ exports[`MessageBar snapshots renders a error MessageBar correctly 1`] = `
`160`	`160`	`@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {`
`161`	`161`	`-ms-high-contrast-adjust: none;`
`162`	`162`	`background: transparent;`
`163`		`- border: 1px solid rgba(255, 0, 0);`
	`163`	`+ border: 1px solid #ff0000;`
`164`	`164`	`color: WindowText;`
`165`	`165`	`forced-color-adjust: none;`
`166`	`166`	`}`
@@ -551,7 +551,7 @@ exports[`MessageBar snapshots renders a multiline error MessageBar correctly 1`]
`551`	`551`	`@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {`
`552`	`552`	`-ms-high-contrast-adjust: none;`
`553`	`553`	`background: transparent;`
`554`		`- border: 1px solid rgba(255, 0, 0);`
	`554`	`+ border: 1px solid #ff0000;`
`555`	`555`	`color: WindowText;`
`556`	`556`	`forced-color-adjust: none;`
`557`	`557`	`}`
@@ -812,7 +812,7 @@ exports[`MessageBar snapshots renders a multiline severeWarning MessageBar corre
`812`	`812`	`@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {`
`813`	`813`	`-ms-high-contrast-adjust: none;`
`814`	`814`	`background: transparent;`
`815`		`- border: 1px solid rgba(255, 0, 0);`
	`815`	`+ border: 1px solid #ff0000;`
`816`	`816`	`color: WindowText;`
`817`	`817`	`forced-color-adjust: none;`
`818`	`818`	`}`
@@ -1079,7 +1079,7 @@ exports[`MessageBar snapshots renders a multiline warning MessageBar correctly 1
`1079`	`1079`	`forced-color-adjust: none;`
`1080`	`1080`	`}`
`1081`	`1081`	`@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {`
`1082`		`- border: 1px solid rgba(150, 100, 0);`
	`1082`	`+ border: 1px solid #966400;`
`1083`	`1083`	`}`
`1084`	`1084`	`>`
`1085`	`1085`	`<div`
@@ -1205,7 +1205,7 @@ exports[`MessageBar snapshots renders a severeWarning MessageBar correctly 1`] =
`1205`	`1205`	`@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {`
`1206`	`1206`	`-ms-high-contrast-adjust: none;`
`1207`	`1207`	`background: transparent;`
`1208`		`- border: 1px solid rgba(255, 0, 0);`
	`1208`	`+ border: 1px solid #ff0000;`
`1209`	`1209`	`color: WindowText;`
`1210`	`1210`	`forced-color-adjust: none;`
`1211`	`1211`	`}`
@@ -1472,7 +1472,7 @@ exports[`MessageBar snapshots renders a warning MessageBar correctly 1`] = `
`1472`	`1472`	`forced-color-adjust: none;`
`1473`	`1473`	`}`
`1474`	`1474`	`@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {`
`1475`		`- border: 1px solid rgba(150, 100, 0);`
	`1475`	`+ border: 1px solid #966400;`
`1476`	`1476`	`}`
`1477`	`1477`	`>`
`1478`	`1478`	`<div`