[WIP] Add reverse modifiers to form controls

[colinrotherham]

Description

This PR adds --reverse modifier support to all form controls

Work might be split out of this PR to support dark mode

• Character count
• Checkboxes
• Date input
• File upload
• Input
• Password input
• Radios
• Select
• Textarea

With reverse support also added to:

• Error message
• Error summary
• Form group
• Hint
• Label
• Legend

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[paulrobertlloyd]

Is there a demo page in the review app to see all reversed form controls?

The contrast on the above screenshot seem very low, almost like the controls are disabled.

I wonder if there needs to be different approaches, one for reversed form components (if needed?) and another for dark mode (which are needed).

[colinrotherham]

@paulrobertlloyd Just the component review pages now updated to show reverse styles:

• Character count component examples
• Checkboxes component examples
• Date input component examples
• File upload component examples
• Input component examples
• Password input component examples
• Radios component examples
• Select component examples
• Textarea component examples

The contrast on the above screenshot seem very low, almost like the controls are disabled.

Yeah the blue is fairly awful so please consider this as a WIP step towards dark mode

All examples are meeting the 4.5:1 contrast ratio (Level AA) but it'll look a lot better on black

I wonder if there needs to be different approaches, one for reversed form components (if needed?) and another for dark mode (which are needed).

Exactly this. Our current "reverse" approach (e.g. header search white input on a blue background) doesn't work with color: currentcolor; because both the text colour and input background colour are the same 😬

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud