Menu items as object array with variables loses correct styling

[dslane]

Bug Report

Steps

When rendering providing the items property of a Menu as an array of MenuItemProps objects, if you specify variables in those objects, the menu items get incorrect styling. This is most obvious in teamsDark theme.

The kind of issues varies between different Stardust versions. In 0.27.0, for example, the "selected" background color is the same as the normal background color, so you cannot tell which item is selected (using pointing helps, but the background color is still the same). Also, the text color of the hovered-on menu item is too dark, and is hard to see agains the hover background color.

In 0.31.0, the text color of the selected is the same as the background color of the selected item, so you cannot see the text of the selected item in the menu.

Expected Result

The colors of the text and background should not be impacted by passing in a variable that does not alter those CSS properties.

Actual Result

Passing any variables causes colors that make the menu much less usable 💣

Version

x.y.z

Testcase

There are two side-by-side menus, with the only difference being that variables passed to in the MenuItem props on the first one.