feat(Colors): Add new color scheme design token for Teams theme (#2297)

* adding new red background hover 1 color scheme design token for Teams title bar close button

* add entry to changelog

Author: codepretty

CHANGELOG.md

@@ -44,6 +44,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `useStyles()` hook to use theming capabilities in custom components @layershifter, @mnajdova ([#2217](https://github.com/microsoft/fluent-ui-react/pull/2217))
 - Add optional wrapper function to `List` which can be used to inject custom scrollbars to `Dropdown` @jurokapsiar ([#2092](https://github.com/microsoft/fluent-ui-react/pull/2092))
 - Add `useTelemetry()` hook for adding telemetry information for the Fluent components and improve return types for the `useStyles` and `useStateManager` hooks @mnajdova ([#2257](https://github.com/microsoft/fluent-ui-react/pull/2257))
+- Add new `backgroundHover1` Red design tokens in Teams theme @codepretty ([#2297](https://github.com/microsoft/fluent-ui-react/pull/2297))
 - Add `target` prop to `EventListener` component and `useEventListener()` hook @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
 - Add `disabled` prop accordion title @jurokapsiar ([#2290](https://github.com/microsoft/fluent-ui-react/pull/2290))
 - Allow custom values for `size` in `FlexItem` @silviuavram ([#2313](https://github.com/microsoft/fluent-ui-react/pull/2313))

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

@@ -235,6 +235,7 @@ export const colorScheme: ColorSchemeMapping = {
 
     foregroundHover: colors.white,
     backgroundHover: colors.ruby[600],
+    backgroundHover1: colors.red[400],
 
     foregroundPressed: colors.white,
     backgroundPressed: colors.ruby[700],

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

@@ -237,6 +237,7 @@ export const colorScheme: ColorSchemeMapping = {
 
     foregroundHover: colors.black,
     backgroundHover: accessibleYellow,
+    backgroundHover1: accessibleYellow,
 
     foregroundPressed: colors.black,
     backgroundPressed: accessibleYellow,

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

@@ -441,8 +441,11 @@ export const colorScheme: ColorSchemeMapping<ColorScheme, TeamsColorNames> = {
     background2: colors.ruby[500],
     background3: colors.red[400],
     border: colors.red[100],
+
     foregroundHover: colors.white,
     backgroundHover: colors.ruby[600],
+    backgroundHover1: colors.red[400],
+
     foregroundPressed: colors.white,
     backgroundPressed: colors.ruby[700],
   }),