sebnitu / vrembem / 25869625847

90%

main: 100%

push

github

Refactor how form-controls are styled using appearance none (#2825)

This PR refactors the form-control choice elements (checkbox, radio, and switch) to no longer need nested span elements for styling and instead applies `appearance: none` which gives CSS access to the use of pseudo elements. Their appearance has not changed in this update besides the removal of the background element styles.

Form-control design tokens have also been cleaned up. No longer needed tokens have been removed and the `accent` key word has been applied for choice elements and their chosen color. This aligns better with the native `accent-color` property and how it's used. The primary color based tokens for form-control choice elements now includes:

- `color`: Used as the base color of the component. This is usually applied as the border-color of unchecked elements.
- `accent`: Used as the primary color for when the form-control is checked including background and border color properties.
- `fill`: Used as the background or fill color of the component. This is applied in various ways, as the contrasting color such as the icon fill in a checkbox, the inner dot of a selected radio button or the thumb of a switch.

This PR resolves: #2824

569 of 651 branches covered (87.4%)

Branch coverage included in aggregate %.

886 of 952 relevant lines covered (93.07%)

32.08 hits per line