Replace outline-none with outline-hidden, add new outline-none

[adamwathan]

This PR renames the existing outline-none utility to outline-hidden, and adds a new simpler outline-none utility that just sets outline-style: none.

The existing outline-none utility doesn't actually set outline: none, and instead creates a 2px invisible outline:

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

We implemented it this way because people often use outline: none to hide focus rings and replace them with custom shadow-based focus rings, without realizing that that approach leads to no visible focus ring in forced colors mode because box shadows aren't rendered in forced colors mode.

While this is sort of helpful and clever, it can be a pain when you really do need outline: none, and I think it feels surprising in hindsight to hijack the name of an existing CSS property value and make it mean something else.

The name outline-hidden feels better because it's a new keyword that CSS doesn't use for outlines, and implies that perhaps there's a bit more going on than just setting outline-style: none.

This PR includes a codemod to convert any existing use of outline-none to outline-hidden, and we will be sure to explain what outline-hidden does for you in the v4 documentation.

Manually tested this in the Vite playground to make sure it behaves as expected 👍