[Joy] Make variants for more flexible

[siriwatknp]

Before

The global variants generated like this for hover, active and disabled:

{
  softHover: {
    '&:hover': { color, background, border }
  },
  softActive: {
    '&:active': { color, background, border }
  },
  softDisabled: {
    '&.Mui-disabled': { color, background, border }
  },
}

It makes customization confusing because softHover in this case can contain other style that's not speficific to hover and so on. Also the disabled state is fixed to .Mui-disabled which would be hard for the custom component to use.

After
The generation is flat without the states (the key is already explicit)

{
  softHover: { color, background, border },
  softActive: { color, background, border },
  softDisabled: { color, background, border },
}

// the component will have to consume like this:
const ButtonRoot = styled('buttton')(({ theme, ownerState }) => ([
  theme.variants[ownerState.variant!]?.[ownerState.color!],
  { '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
  { '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
  {
    [buttonClasses.disabled]:
      theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
  },
])

It is more flexible and easier to understand. Here is one example of bootstrap outlined button using Joy variants:

const ButtonRoot = styled('buttton')(({ theme, ownerState }) => ({
  ...theme.variants.outlined.primary,
  '&:hover': theme.variants.solidHover.primary,
});

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 5c11ff6