From fb1eb632cfb481894192e67102b458849ed3b74b Mon Sep 17 00:00:00 2001
From: Henry Ing-Simmons <hing-simmons@neworbit.co.uk>
Date: Wed, 29 Jan 2020 14:40:34 +0000
Subject: [PATCH 1/2] Refactor alert colors to variables

---
 .../teams/components/Alert/alertStyles.ts     | 20 +++++++++----------
 .../teams/components/Alert/alertVariables.ts  | 16 +++++++++++++++
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
index eee243f840..37ad962774 100644
--- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
@@ -1,4 +1,4 @@
-import { ComponentSlotStylesPrepared, ICSSInJSStyle, SiteVariablesPrepared } from '@fluentui/styles'
+import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
 import { AlertProps } from '../../../../components/Alert/Alert'
 import { AlertVariables } from './alertVariables'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
@@ -6,10 +6,8 @@ import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles'
 
 const getIntentColorsFromProps = (
   p: AlertProps,
-  v: AlertVariables,
-  siteVars: SiteVariablesPrepared,
+  v: AlertVariables
 ): ICSSInJSStyle => {
-  const { colors } = siteVars
 
   if (p.danger) {
     return {
@@ -45,17 +43,17 @@ const getIntentColorsFromProps = (
 
   if (p.success) {
     return {
-      color: colors.green[600], // $app-green-04
-      backgroundColor: colors.grey[50], // $app-white
-      borderColor: colors.green[200], // $app-green
+      color: v.successColor,
+      backgroundColor: v.successBackgroundColor,
+      borderColor: v.successBorderColor
     }
   }
 
   if (p.warning) {
     return {
-      color: siteVars.colors.grey[450],
-      backgroundColor: colors.grey[50], // $app-white
-      borderColor: colors.yellow[400], // $app-yellow
+      color: v.warningColor,
+      backgroundColor: v.warningBackgroundColor,
+      borderColor: v.warningBorderColor,
     }
   }
 
@@ -79,7 +77,7 @@ const alertStyles: ComponentSlotStylesPrepared<AlertProps, AlertVariables> = {
     fontWeight: v.fontWeight,
     visibility: 'visible',
 
-    ...getIntentColorsFromProps(p, v, siteVariables),
+    ...getIntentColorsFromProps(p, v),
 
     ...((p.attached === 'top' || p.attached === true) && {
       borderRadius: `${v.borderRadius} ${v.borderRadius} 0 0`,
diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
index f5f52a0fa8..54edfdb005 100644
--- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts
@@ -33,11 +33,19 @@ export interface AlertVariables {
   infoBackgroundColor: string
   infoBorderColor: string
 
+  successColor: string
+  successBackgroundColor: string
+  successBorderColor: string
+
   urgent: boolean
   urgentColor: string
   urgentBackgroundColor: string
   urgentBorderColor: string
 
+  warningColor: string
+  warningBackgroundColor: string
+  warningBorderColor: string
+
   headerFontWeight: FontWeightProperty
   headerMargin: string
 
@@ -77,11 +85,19 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => {
     infoBackgroundColor: siteVars.colors.grey[150],
     infoBorderColor: siteVars.colors.grey[200],
 
+    successColor: siteVars.colors.green[600],
+    successBackgroundColor: siteVars.colors.grey[50],
+    successBorderColor: siteVars.colors.green[200],
+
     urgent: false,
     urgentColor: siteVars.colors.white,
     urgentBackgroundColor: siteVars.colors.red[400],
     urgentBorderColor: siteVars.colors.red[400],
 
+    warningColor: siteVars.colors.grey[450],
+    warningBackgroundColor: siteVars.colors.grey[50],
+    warningBorderColor: siteVars.colors.yellow[400],
+
     headerFontWeight: siteVars.fontWeightBold,
     headerMargin: `0 ${pxToRem(10)} 0 0`,
 

From 3ff712d82392c6e83deb9f992976598021c97465 Mon Sep 17 00:00:00 2001
From: Henry Ing-Simmons <hing-simmons@neworbit.co.uk>
Date: Wed, 29 Jan 2020 14:48:37 +0000
Subject: [PATCH 2/2] Update alertStyles.ts

---
 .../react/src/themes/teams/components/Alert/alertStyles.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
index 37ad962774..73631d79e0 100644
--- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts
+++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
@@ -6,7 +6,7 @@ import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles'
 
 const getIntentColorsFromProps = (
   p: AlertProps,
-  v: AlertVariables
+  v: AlertVariables,
 ): ICSSInJSStyle => {
 
   if (p.danger) {
@@ -45,7 +45,7 @@ const getIntentColorsFromProps = (
     return {
       color: v.successColor,
       backgroundColor: v.successBackgroundColor,
-      borderColor: v.successBorderColor
+      borderColor: v.successBorderColor,
     }
   }