[STRECH] Spike if a Stylelint plugin could enforce the layers of abstractions we want around colours

[romaricpascal]

What

Explore using a Stylelint plugin that would check that the access to govuk-colour, govuk-tint , govuk-shade functions, $govuk-colours or $govuk-XYZ-colour is only done in a limited set of files (_colour ,_colours-applied and the _govuk-frontend-properties file).

This could be an existing plugin if one already does what we need, or a crude ad-hoc one (for the purpose of this exploration).

Why

We've discovered that a few of our components were directly accessing govuk-colour and using Sass mix or scale-color to adjust them in the component code itself. While this outputs the right colours, it gets in the way of using CSS custom properties for assigning colours to components.

Having a plugin warn us when we reach directly for the colours in the wrong places would both:

• help figure which components need a tidy up
• ensure future components follow the abstractions we need

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• We've assessed if Stylelint could help us enforce the abstractions we need for accessing colours.