aligned with latest design

Author: bmdalex

packages/react/src/themes/teams/components/Alert/alertStyles.ts

@@ -81,8 +81,11 @@ const alertStyles: ComponentSlotStylesInput<AlertProps, AlertVariables> = {
     flexGrow: 1,
   }),
 
-  action: ({ variables: v }): ICSSInJSStyle => ({
+  action: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => ({
+    height: v.actionSize,
+    minWidth: v.actionSize,
     color: v.actionColor || 'currentColor',
+    ...(p.info && { color: siteVariables.gray02 }),
   }),
 }
 

packages/react/src/themes/teams/components/Alert/alertVariables.ts

@@ -12,21 +12,26 @@ export interface AlertVariables {
   fontWeight: FontWeightProperty
   minHeight: string
   padding: string
+
+  actionSize: string
   actionColor: string
 }
 
 export default (siteVars: SiteVariablesPrepared): AlertVariables => {
-  const { colors } = siteVars
+  const alertHeight = 28
+  const borderSize = 1
 
   return {
-    border: `${pxToRem(1)} solid`,
+    border: `${pxToRem(borderSize)} solid`,
     borderRadius: pxToRem(3),
-    backgroundColor: colors.grey[50], // $app-white
+    backgroundColor: siteVars.colors.grey[50], // $app-white
     borderColor: siteVars.gray06,
     color: siteVars.gray02,
     fontWeight: siteVars.fontWeightSemibold,
-    minHeight: pxToRem(34),
-    padding: `0 0 0 ${pxToRem(8)}`,
+    minHeight: pxToRem(alertHeight),
+    padding: `0 0 0 ${pxToRem(16)}`,
+
+    actionSize: pxToRem(alertHeight - 2 * borderSize),
     actionColor: undefined,
   }
 }