diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts
index eee243f840..73631d79e0 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'
@@ -7,9 +7,7 @@ import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles'
 const getIntentColorsFromProps = (
   p: AlertProps,
   v: AlertVariables,
-  siteVars: SiteVariablesPrepared,
 ): 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`,