[DO NOT MERGE] Experiment with toggling the header colour via a top-level class in the review app

[owenatgov]

Change

Replicate the changes to the header in #5724 but instead of a sass variable, use a class govuk-feature--recolour to control the style changes instead.

This additionally deviates from #5724 by experimenting with an alternative method of swapping between using the 'old' and 'new' colours in the review app by using a cookie, controlled via middleware, similar to how the banner operates. This also adds an extremely bare bones UI for swapping between 'old' and 'new'.

Notes

Comparing the stats comment on this PR and the stats comment on #5742, this change adds roughly 1.5kb to the CSS. That feels acceptable to me but I'm interested in what others think. Additionally, I suspect this is better than having a class localised to the header because it would mean any other work we do on other components will need their own classes, which theoretically even more kbs compared to just controlling them via the same class (unverified opinion).

Something I want to try is experimenting with mergin the approach from this PR and #5742 where I only make the new class available in the CSS when a sass variable is set. This would enable us to control the weight of the css whilst theoretically maing our own css less complicated.

I also still haven't figured out how to record these different states in Percy. I'll investigate this soon.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	119.99 KiB
dist/govuk-frontend-development.min.js	42.59 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	92.42 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	86.71 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.21 KiB
packages/govuk-frontend/dist/govuk/component.mjs	1.67 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	119.98 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	42.58 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	6.64 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	82.32 KiB	40.4 KiB
accordion.mjs	26.58 KiB	13.41 KiB
button.mjs	9.09 KiB	3.79 KiB
character-count.mjs	25.37 KiB	10.91 KiB
checkboxes.mjs	7.76 KiB	3.42 KiB
error-summary.mjs	10.99 KiB	4.55 KiB
exit-this-page.mjs	20.2 KiB	10.34 KiB
header.mjs	6.41 KiB	3.22 KiB
notification-banner.mjs	9.35 KiB	3.71 KiB
password-input.mjs	18.16 KiB	8.34 KiB
radios.mjs	6.76 KiB	2.98 KiB
service-navigation.mjs	6.39 KiB	3.26 KiB
skip-link.mjs	6.34 KiB	2.76 KiB
tabs.mjs	11.99 KiB	6.67 KiB

View stats and visualisations on the review app

---

Action run for 679c6c6

[romaricpascal]

I like it! 😍 It makes it super easy to swap between the two colours. With a little update to how we handle the request for swapping in the review app, I think we could even accommodate Percy (see comment on the middleware).

We'd probaby want to keep an eye on the extra CSS to see that it doesn't snowball too much. If it does, having that specific class regrouping all the changes will help us extract the extra CSS for the recoloured version in its own file should we want to, so I'm not too worried.

[romaricpascal]

❤️ I like how having a global class enabling the feature allows us to easily update the app code to accomodate the flag (though I'd guess in a service, you'd either have or not have the flag enable so would need that less so).