Explore using CSS custom properties to set `--inverse` styles in bulk

[romaricpascal]

What

Explore if we can use CSS Custom properties to create a wrapper class within which:

• background is set to the brand colour (or a configurable arbitrary colour)
• text is set to white (or a configurable arbitrary colour to ensure adequate contrast)
• components like link or button automatically use their --inverse style without users having to set --inverse modifiers to them
• possibly other components see their styles adapted?

Besides the technical exploration, we should also identify if new design concept emerge (eg. colour pairings) and how to document such feature (likely an object in our ITCSS architecture).

Why

To understand if such feature is worth implementing to simplify implementations of white on blue sections.

Who needs to work on this

Developers, Designers, Tech writer

Who needs to review this

Developers, Designers, Tech writer

Done when

• We've run a spike to check technical feasibility, emerging design concepts and necessary documentation changes
• We've decided whether we'd go ahead with this, and if so written the relevant issues for the implementation

[owenatgov]

This has come up during technical exploration for alphagov/govuk-design-system#5241

This component on its face is basically an inverse wrapper. We've been trying to figure out the most appropriate way to apply white text colour to typography as we want to cover every instance of typography (paragraphs, headings, links and lists) being put in the component body. Having a helper to manage this would save a lot of maintenance.

Setting --govuk-text-colour to white would be an option here but we'd need to account for if a user has already changed that custom property eg: for a hypothetical dark mode.

My personal reckon is this is a potential use case for an 'inverse text' functional colour. You could then set it in an inverse wrapper by setting the text functional colour to the inverse text functional colour:

--govuk-text-colour: var(--govuk-inverse-text-colour);