fix(Button): Correcting button shadow opacity (#2098)

Removed shadowLevel1Darker which this was identical to shadowLevel1Dark - and the 0.5 opacity of "Darker" is not called for anywhere in the latest Teams Theme.

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Update Silver color scheme, changing `backgroundHover` and `backgroundPressed` for high-contrast theme @pompomon ([#2078](https://github.com/microsoft/fluent-ui-react/pull/2078))
 - Updating the `attachment` component styles to match Teams theme @notandrew ([#2012](https://github.com/stardust-ui/react/pull/2012))
+- Removed `shadowLevel1Darker` in Teams themes and changed all references to `shadowLevel1Dark` affecting `Button` and `ChatMessage` variables files @bcalvery ([#2098](https://github.com/microsoft/fluent-ui-react/pull/2098))
 - Honor `disableAnimations` prop in `Provider` @miroslavstastny ([#2087](https://github.com/microsoft/fluent-ui-react/pull/2087))
 - `Dialog` content should have 100% width @jurokapsiar ([#2104](https://github.com/microsoft/fluent-ui-react/pull/2104))
 - Allow focusing radio and checkbox in the focus zone @jurokapsiar ([#2103](https://github.com/microsoft/fluent-ui-react/pull/2103))

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

@@ -103,7 +103,7 @@ export default (siteVars: any): ButtonVariables => ({
   textPrimaryColorHover: siteVars.colorScheme.brand.foreground1,
   textColorDisabled: siteVars.colorScheme.brand.foregroundDisabled1,
 
-  primaryBoxShadow: siteVars.shadowLevel1Darker,
+  primaryBoxShadow: siteVars.shadowLevel1Dark,
   boxShadow: siteVars.shadowLevel1,
 
   loaderBorderSize: pxToRem(2),

packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts

@@ -49,7 +49,7 @@ export default (siteVars): ChatMessageVariables => ({
   linkColor: siteVars.colorScheme.brand.foreground1,
   linkColorMine: siteVars.colorScheme.brand.foreground2,
   border: 'none',
-  badgeShadow: siteVars.shadowLevel1Darker,
+  badgeShadow: siteVars.shadowLevel1Dark,
   isImportant: false,
   hasMention: false,
   hasMentionColor: siteVars.colors.orange[300],

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

@@ -30,7 +30,6 @@ export const shadowLevel2 = '0 .4rem .7rem -.1rem rgba(0, 0, 0, .1)'
 export const shadowLevel3 = '0 .8rem 1rem -.2rem rgba(0, 0, 0, .1)'
 export const shadowLevel4 = '0 1.6rem 1.8rem -.4rem rgba(0, 0, 0, .1)'
 export const shadowLevel1Dark = '0 .2rem .4rem -.075rem rgba(0, 0, 0, .25)'
-export const shadowLevel1Darker = '0 .2rem .4rem -.075rem rgba(0, 0, 0, .5)'
 
 //
 // FONT SIZES