Introduces changes for clarity against clean for sanity checks.

[ajrbyers]

This doesn't close any issues on its own and will be closed without being merged. This issue has been opened soley for the purpose of checking it does not eliminate the changes that have been made for a11y so far.

This theme includes three palettes:

• Evergreen
• Ocean
• Cardinal

These can be changed by switching the import in clean.css.

Plan

A rough plan has formed around this PR. If we find that we like it we have two options:

1. Release it as a new theme (clarity) and gradually move people off of clean and deprecate it
2. Merge it as a new version of clean and move everyone on clean over to it now

Personally I think option 1 that gives us time to shift people over. Increases some maintenance in the short term. But we could make clarity a sub theme and eliminate templates that are identical to clean.

[StephDriver]

Article Page Observations

Screenshots are Clean first, Clarity second.
Focus is on what may need double-checking, not on picking up all the changes - so positive changes will be missed!

Text options

They've moved from right to left, and removal of boxes. I think they should have button styling, rather than be floating text.
They are also no longer sticky.

LInk Icon Styles

They've changed from being styled to receed and be different to surrounding text, to having the same style. Those which were supescript have also become aligned with text. I think they should be different - making them recede slighting makes them easy to skip passed with the eye, rather than having to process - and they are designed for exactly that, not to interrupt the user and force them to pay attention, but to be there if information is needed.

Side Pane Width / Share

As text is larger, the sidepane now fits less - this isn't a zoom issue, this is about the relative sizes. So this means that the share article and its copy button now flow cross two lines. As the share box doesn't include all teh text anyway, I think this should be reduced in size (or the button should be smaller) so that they fit again on a single line, relative to the size of the side pane. However it may also be good to review the size of the pane itself, as other contents likewise may now reflow across multiple lines. Something odd is happening with the height of the copy button too.

Citation Buttons Focus Visible delay

For the citaiton buttons, the focus visible fades in slowly (compared to when tabbing onto other elements) - this means it takes a while when tabbing in to realise where hte focus is. This doesn't happen on clean, or with other buttons on this page. To repeat, tab with keyboard down teh side bar, notice how each element gains the focus ring instantly, then tab into the Citation section and see the difference.

Notes back to text icon

edit. Fixed in #4446
This is not screen reader friendly - it doesn't know the symbol and there is no aria. But I think this may be produced in the JATS. The problem exists on Clean too.

[StephDriver]

Following discussion of the above:

• I am testing manually and with Chrome Lighthouse and making changes to the branch accordingly in individual commits for ease of discussion / removal.
• I am making notes here on items to discuss further.

Discussion: Colour Pairs

We have moved to using colour pairs in our CSS to make it easier to ensure good contrast. The CSS for clarity hasn't been arranged in taht way, with it unclear which colours may be used on which backgrounds.
As we make (some) icons 'recede' with an opacity value (so as to keep same colour as surrounding text) this needs to also be taken into account when defining pairs.

[StephDriver]

making further a11y tweaks in #5007