feat(menu): update menu and menu items styles

[pedrobonamin]

Updates menu and menu item styles to match facelift.
Refactors menu item to support new props:

• subText
• badgeText

https://sanity-ui-storybook-git-edx-484-menu.sanity.build/?path=/story/components-menu--menu-items-variants&globals=theme:light

Examples:

• Left - Menu items enabled.
• Right - Menu items disabled.

Light mode

Dark mode

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sanity-ui-workshop	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 18, 2023 0:04am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
sanity-ui-storybook	⬜️ Ignored (Inspect)	Visit Preview		Oct 18, 2023 0:04am

[robinpyon]

question: what's the rationale for applying hover styles to both active and selected states here? These changes mean that it's not possible to disambiguate between the 'selected' menu item and the one that's being currently hovered.

To better illustrate, try visit this example and click any menu item and then press the up or down arrows – you'll be able to see the item that is 'selected' whilst having a hover state on the previously clicked button

[pedrobonamin]

Hey @robinpyon In the figma file the selected and hover states are the same that's the reason they are repeated.
With the redesign, the tint used for the selected state background is 50 so we don't have a way to set a lighter color in hover like in the example.

[robinpyon]

Thanks for clarifying @pedrobonamin! Possibly something we can iterate on in future, I do think there's value in differentiating between those states.