DropdownMenuItemV2: Add "destructive" state

[t-hamano]

What problem does this address?

In WordPress core and Gutenberg, a button typically appears red if its action is destructive.

Delete Template:

Move Post to Trash:

Move Post to Trash (Classic Editor):

On the other hand, in the UI already implemented with DropdownMenuItemV2 components, these action buttons are not red.

Delete template:

Move Post to Trash:

What is your proposed solution?

As far as I know, no option exists to make the DropdownMenuItemV2 color red. I imagine that something like the isDestructive prop of the button component could be used for these use cases.

Below is a list of the states I would expect.

Default:

Hovered:

Focused:

[mirka]

My gut feeling is to avoid adding isDestructive as a prop, since that can lead to prop bloat like we can see in the current Button API. This is just a color variant, so ideally it would be done through a color-related API.

However, there is still a lot of uncertainty around how we want to deal with colors in a systematic way. The components package has an experimental way of doing that, based on CSS variables. But I know @SaxonF has also been working on a color token system.

For the time being, especially since DropdownMenuV2 is still private, I wonder if we should stick to directly overriding CSS variables from the consumer code, rather than adding a new API to DropdownMenuItem.

cc @DaniGuardiola