fix(Menu): theme bugs

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Update text `Button` styles for Teams Theme to match [redlines] @codepretty ([#1719](https://github.com/stardust-ui/react/pull/1719))
+- Fix `Menu` and `MenuItem` styles to match [redlines] @bcalvery ([#1712](https://github.com/stardust-ui/react/pull/1712))
 
 ### Features
 - Add `overwrite` prop to `Provider` @layershifter ([#1780](https://github.com/stardust-ui/react/pull/1780))

packages/react/src/components/Menu/MenuItem.tsx

@@ -233,7 +233,10 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
         >
           {icon &&
             Icon.create(this.props.icon, {
-              defaultProps: { xSpacing: !!content ? 'after' : 'none' },
+              defaultProps: {
+                xSpacing: !!content ? 'after' : 'none',
+                styles: styles.icon,
+              },
             })}
           {rtlTextContainer.createFor({ element: content })}
           {menu &&

packages/react/src/themes/teams/components/Menu/menuItemStyles.ts

@@ -402,6 +402,14 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
     }
   },
 
+  icon: ({ props: p }): ICSSInJSStyle => ({
+    ...(!p.iconOnly && {
+      // reduce margins so text has the dominant influence on the vertical height
+      marginTop: pxToRem(-10),
+      marginBottom: pxToRem(-8),
+    }),
+  }),
+
   menu: () => ({ zIndex: '1000' }),
 
   indicator: () => ({

packages/react/src/themes/teams/components/Menu/menuVariables.ts

@@ -64,7 +64,7 @@ export default (siteVars: any): MenuVariables => {
     colorScheme: pickValuesFromColorScheme(
       extendColorScheme(siteVars.colorScheme, {
         default: {
-          borderActive: siteVars.colors.grey[600],
+          borderActive: siteVars.colorScheme.default.border2,
           backgroundActive: siteVars.colorScheme.default.backgroundActive1,
           backgroundFocus: siteVars.colorScheme.default.backgroundFocus1,
           foregroundDisabled: siteVars.colorScheme.default.foregroundDisabled1,
@@ -104,10 +104,10 @@ export default (siteVars: any): MenuVariables => {
     underlinedBorderColor: siteVars.colors.grey[200],
 
     lineHeightBase: siteVars.lineHeightMedium,
-    horizontalPadding: `${pxToRem(14)} ${pxToRem(18)} ${pxToRem(14)} ${pxToRem(18)}`,
+    horizontalPadding: `${pxToRem(14)} ${pxToRem(18)}`,
 
     verticalBackgroundColor: siteVars.colors.white,
-    verticalItemPadding: `${pxToRem(9)} ${pxToRem(16)} ${pxToRem(9)} ${pxToRem(16)}`,
+    verticalItemPadding: `${pxToRem(7)} ${pxToRem(16)}`,
     verticalBoxShadow: siteVars.shadowLevel3,
     verticalDividerMargin: `${pxToRem(8)} 0`,
     verticalItemBorderWidth: pxToRem(2),
@@ -118,7 +118,7 @@ export default (siteVars: any): MenuVariables => {
     pointingIndicatorBackgroundColor: siteVars.colors.brand[600],
 
     underlinedBottomBorderWidth: pxToRem(2),
-    primaryBorderColor: siteVars.colors.grey[100],
+    primaryBorderColor: siteVars.colorScheme.default.border2,
 
     dividerHeight: pxToRem(1),
     borderWidth: pxToRem(1),