fix(forms): fix button utilities specificity issue

[Allyhere]

Bug description

I noticed that buttons with utility color classes turn blue on :hover.

If the example below is the expected behavior of these buttons, I believe this is a specificity bug:

Using the .default variant as an example, this is the CSS with the intended behavior:

button.default:not(:disabled):active,button.default:not(:disabled):hover {
    background: var(--default);
    color: var(--contrast)
}

It produces a 0,3,1 specificity and it is being overridden by this selector, which also has a specificity of 0.3.1 because its declared further on the code.

:is(button,input:is([type=submit],[type=reset],[type=button],[type=image])):not(:disabled):active,:is(button,input:is([type=submit],[type=reset],[type=button],[type=image])):not(:disabled):hover {
    border-color: transparent;
    background: var(--accent);
    color: var(--light)
}

Proposal - Using an :where selector

Note

This solution is agnostic and non-obstrusive and have sufficient browser support. Ran deno task fmt on this code.

In styles/forms/mod.css, L226

:where(button, input:is([type="submit"],[type="reset"],[type="button"],[type="image"])):not(:disabled):hover,
:where(button, input:is([type="submit"],[type="reset"],[type="button"],[type="image"])):not(:disabled):active {
  border-color: transparent;
  background: var(--accent);
  color: var(--light);
}

Closes #42

[lowlighter]

Thanks a lot for looking into this !