Refactor global CSS variables

[seanmturley]

Description

The variables are too awkward to work with, largely due to the use of em units. The idea was that this would allow each component to be scaled separately by adjusting the font-size being set on the component's wrapper. However, this isn't necessary - the UI should all be scaled consistently, so it's not likely one particular component would need to be scaled up or down.

Using ems inside each component still makes sense in many cases, as dimensions will often need to scale with font-size (e.g. margin or the height of a container).

To do

• [x] Simplify CSS overrides
• [x] Convert CSS variable units to rem
• [x] Increase consistency of variable use (e.g. --border-width, often unused, and could be replaced with a --border variable including color and style)
• [x] Remove unnecessary variables and their references (e.g. --base-unit)
• [x] Review use of em and replace with rem where appropriate

[seanmturley]

Applied box-sizing: border-box directly to all elements, instead of applying it to html then having all elements set to inherit.

[seanmturley]

Changed all borders to use a new --border variable where possible. The one exception is the toggleSwitch component, which is designed to be completely modular. This still works with just the --border-width variable (which it also uses in a number of calcs), and sets its own color and style.

[seanmturley]

Converted CSS global variable units to rem.

While it could make sense to set the --detail-font__emphasis font-size to 1em, it produces more consistent behaviour if it's explicitly set the same same as --detail-font, allowing it to be used outside of wrapping --detail-font while maintaining the same size.

[seanmturley]

Removed --base-unit CSS variable. This was being used to set the font-size of the wrapping element in each component, but it wasn't actually necessary as all components were inheriting font-size from html.

In the case of the reusable modular components (<RadioButtonGroup> and <ToggleSwitch>), --base-unit was simply replaced with 1rem.

[seanmturley]

Reviewed all uses of em units (outside of reusable modular components).

All ems were replaced with rems where the size was not logically linked to font i.e. there was no specific font-size set on the element or a parent, and/or the size was for general layout dimensions independent of text.

[seanmturley]

I think the CSS is simpler and more easily maintained now.

Merged and closing.