Styling DropdownMenu.Popover and :not(:disabled):hover

[b-gibbs]

Is your feature request related to a problem? Please describe.

Since this works:

  const DDMenu = applyTheme(DropdownMenu, {
    Popover: {
      modes: {
        dark: {
          styles: {
            base: {
              backgroundColor: "#2f3747"
            }
          }
        }
      }
    },

it feels like this should be possible in ThemeConfig:

  DropdownMenu: {
    Popover: {
      modes: {
        dark: {
          styles: {
            base: {
              backgroundColor: "#2f3747"
            }
          }
        }
      }
    }
  },

But it isn't.

Also, I'd like to be able to change the backgroundColor of a DropdownMenu.Item, but _hover is superseded by :not(:diabled):hover and I don't see anything in the API to override that.

Describe the solution you'd like

I'd like to be able to customize colors on a mode basis within ThemeConfig without overriding the default palette. I like the default palette, but feel that the backgrounds of the dropdown menus should stand out more from the background color of the rest of the page.

Describe alternatives you've considered

Just about every combination of things TypeScript will allow.

It's entirely possible that this is user error. If so, I'd ask that the documentation on theming be updated to include examples of nested components.