fix(Button): Add new color scheme tokens & update iconOnly button styles for Teams theme (#2211)

* add background5 to default color scheme for muted avatar backgrounds

* update changelog

* updating hover/focus iconOnly buttons to have the correct focus and hover states and use the new backgroundHover2 token

* update changelog entry

* update attachment styles to not have background color on button in attachment on hover

Author: codepretty

CHANGELOG.md

@@ -32,6 +32,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
 - Fix styleParam to always be required in the styles functions @layershifter, @mnajdova ([#2235](https://github.com/microsoft/fluent-ui-react/pull/2235))
 - Check input and button refs exist before focus in `Dropdown` @silviuavram ([#2248](https://github.com/microsoft/fluent-ui-react/pull/2248))
+- Update iconOnly button hover, focus styles and add new `background5` and `backgroundHover2` design tokens in Teams theme @codepretty ([#2211](https://github.com/microsoft/fluent-ui-react/pull/2211))
 - Fix `forceUpdate` to get synced updates in React's Concurrent mode @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268))
 - Fix element reference memory leaks @jurokapsiar ([#2270](https://github.com/microsoft/fluent-ui-react/pull/2270))
 - Adding actionable items into `Carousel` @kolaps33 ([#2271](https://github.com/microsoft/fluent-ui-react/pull/2271))

packages/react/src/themes/teams-dark/colors.ts

@@ -16,6 +16,7 @@ export const colorScheme: ColorSchemeMapping = {
     background2: colors.grey[800],
     background3: colors.grey[550],
     background4: colors.grey[600],
+    background5: colors.grey[250],
 
     border: colors.grey[450], // buttons
     border1: colors.grey[850],
@@ -31,6 +32,7 @@ export const colorScheme: ColorSchemeMapping = {
 
     backgroundHover: colors.grey[550],
     backgroundHover1: colors.grey[550],
+    backgroundHover2: 'transparent',
 
     borderHover: colors.grey[400],
 

packages/react/src/themes/teams-high-contrast/colors.ts

@@ -57,6 +57,7 @@ export const colorScheme: ColorSchemeMapping = {
     background2: colors.black,
     background3: colors.black,
     background4: colors.black,
+    background5: accessibleYellow,
 
     border: colors.white,
     border1: colors.white,
@@ -72,6 +73,7 @@ export const colorScheme: ColorSchemeMapping = {
 
     backgroundHover: accessibleYellow,
     backgroundHover1: accessibleYellow,
+    backgroundHover2: accessibleYellow,
 
     borderHover: accessibleYellow,
 

packages/react/src/themes/teams/colors.ts

@@ -228,6 +228,7 @@ export const colorScheme: ColorSchemeMapping<ColorScheme, TeamsColorNames> = {
     background2: colors.grey[100],
     background3: colors.grey[150],
     background4: colors.grey[100],
+    background5: colors.grey[350],
 
     border: colors.grey[200], // buttons
     border1: colors.grey[150],
@@ -243,6 +244,7 @@ export const colorScheme: ColorSchemeMapping<ColorScheme, TeamsColorNames> = {
 
     backgroundHover: colors.grey[100],
     backgroundHover1: colors.grey[150],
+    backgroundHover2: 'transparent',
 
     borderHover: colors.grey[250], // buttons
 

packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts

@@ -74,7 +74,10 @@ const attachmentStyles: ComponentSlotStylesPrepared<AttachmentProps, AttachmentV
 
       ...getIconFillOrOutlineStyles({ outline: true }),
 
-      ':hover': iconFilledStyles,
+      ':hover': {
+        iconFilledStyles,
+        background: 'transparent',
+      },
 
       ':focus': borderFocusStyles[':focus'],
       ':focus-visible': {

packages/react/src/themes/teams/components/Button/buttonStyles.ts

@@ -132,7 +132,6 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonStylesProps, ButtonVariabl
 
         ':focus-visible': {
           ...borderFocusStyles[':focus-visible'],
-          ...getIconFillOrOutlineStyles({ outline: false }),
         },
 
         ...(p.primary && {
@@ -229,6 +228,12 @@ const buttonStyles: ComponentSlotStylesPrepared<ButtonStylesProps, ButtonVariabl
         minWidth: v.height,
         padding: 0,
 
+        ':hover': {
+          ...getIconFillOrOutlineStyles({ outline: false }),
+          color: v.textColorIconOnlyHover,
+          background: v.backgroundColorIconOnlyHover,
+        },
+
         ...(p.size === 'small' && {
           minWidth: v.sizeSmallHeight,
         }),

packages/react/src/themes/teams/components/Button/buttonVariables.ts

@@ -20,6 +20,7 @@ export interface ButtonVariables {
   backgroundColor: string
   backgroundColorActive: string
   backgroundColorHover: string
+  backgroundColorIconOnlyHover: string
 
   backgroundColorDisabled: string
   borderColor: string
@@ -42,6 +43,7 @@ export interface ButtonVariables {
   textPrimaryColor: string
   textPrimaryColorHover: string
   textColorDisabled: string
+  textColorIconOnlyHover: string
 
   primaryBoxShadow: string
   boxShadow: string
@@ -86,6 +88,7 @@ export default (siteVars: any): ButtonVariables => ({
   borderColorHover: siteVars.colorScheme.default.borderHover,
   borderColorActive: siteVars.colorScheme.default.borderPressed,
   borderColorDisabled: 'transparent',
+  backgroundColorIconOnlyHover: siteVars.colorScheme.default.backgroundHover2,
 
   primaryColor: siteVars.colorScheme.brand.foreground4,
   primaryColorHover: siteVars.colorScheme.brand.foreground4,
@@ -102,6 +105,7 @@ export default (siteVars: any): ButtonVariables => ({
   textPrimaryColor: siteVars.colorScheme.brand.foreground,
   textPrimaryColorHover: siteVars.colorScheme.brand.foreground1,
   textColorDisabled: siteVars.colorScheme.brand.foregroundDisabled1,
+  textColorIconOnlyHover: siteVars.colorScheme.brand.foregroundHover,
 
   primaryBoxShadow: siteVars.shadowLevel1Dark,
   boxShadow: siteVars.shadowLevel1,