fix(Popup): update styles for popup colors in Teams themes

CHANGELOG.md

@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Dropdown` and `DropdownItem` styles to match [redlines] - modified `ListItem` and ListItemStyles to not set gap in component definition @bcalvery ([#1523](https://github.com/stardust-ui/react/pull/1523))
 - Fix `Dropdown` highlightedIndex on arrow keydown open @silviuavram ([#1570](https://github.com/stardust-ui/react/pull/1570))
 - Fix `Dropdown` ArrowLeft keydown behavior for multiple variants @silviuavram ([#1564](https://github.com/stardust-ui/react/pull/1564))
+- Fix styles for shadows in `Popup` in Teams theme [redlines] @codepretty ([#1561](https://github.com/stardust-ui/react/pull/1561))
 
 ### Features
 - Add ARIA attributes and focus handling for `RadioGroup` in `Toolbar` @sophieH29 ([#1526](https://github.com/stardust-ui/react/pull/1526))

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

@@ -19,5 +19,4 @@ export { default as Alert } from './components/Alert/alertVariables'
 export { default as ProviderBox } from './components/Provider/providerBoxVariables'
 export { default as Dropdown } from './components/Dropdown/dropdownVariables'
 export { default as Label } from './components/Label/labelVariables'
-export { default as PopupContent } from './components/Popup/popupContentVariables'
 export { default as TooltipContent } from './components/Tooltip/tooltipContentVariables'

packages/react/src/themes/teams/components/Popup/popupContentStyles.ts

@@ -5,15 +5,20 @@ import getPointerStyles from '../../getPointerStyles'
 
 const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupContentVariables> = {
   root: ({ props: p, variables: v, rtl }): ICSSInJSStyle => ({
+    border: `${v.borderSize} solid ${v.borderColor}`,
     borderRadius: v.borderRadius,
+    boxShadow: v.boxShadow,
+
     display: 'block',
 
     ...(p.unstable_wrapped && {
       backgroundColor: 'inherit',
       position: 'relative',
     }),
+
     ...(p.pointing && getPointerStyles(v.pointerOffset, v.pointerMargin, rtl, p.placement).root),
   }),
+
   pointer: ({ props: p, variables: v, rtl }): ICSSInJSStyle => ({
     display: 'block',
     position: 'absolute',
@@ -27,13 +32,10 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
 
     ...getPointerStyles(v.pointerOffset, v.pointerMargin, rtl, p.placement).pointer,
   }),
+
   content: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
     padding: v.padding,
-
-    border: `${v.borderSize} solid ${v.borderColor}`,
-    borderRadius: 'inherit',
-    boxShadow: `0 2px 4px 0 ${v.borderColor}, 0 2px 10px 0 ${v.borderColor}`,
   }),
 }
 

packages/react/src/themes/teams/components/Popup/popupContentVariables.ts

@@ -4,6 +4,9 @@ export interface PopupContentVariables {
   borderColor: string
   borderRadius: string
   borderSize: string
+
+  boxShadow: string
+
   padding: string
 
   pointerMargin: string
@@ -13,9 +16,12 @@ export interface PopupContentVariables {
 
 export default (siteVars: any): PopupContentVariables => {
   return {
-    borderColor: siteVars.colors.grey[250],
+    borderColor: siteVars.colorScheme.default.border2,
     borderRadius: pxToRem(3),
     borderSize: '1px',
+
+    boxShadow: siteVars.shadowLevel3,
+
     padding: `${pxToRem(10)} ${pxToRem(14)}`,
 
     pointerOffset: pxToRem(5),