[DO NOT MERGE] Prototype new colour palette

[owenatgov]

Important

This is for prototyping only and should not be merged int main

A draft implementation of a system for accessing the new colour palette in govuk-frontend. Creates a new colour map, a very rough mapping of the existing palette to the new palette and applies that mapping across govuk-frontend.

This brand existing enables us to call #6255 done.

How it works

This builds on top of the govuk-colour sass function. It will first look to see if the colour key parsed to the function exists in $govuk-brand-colours over $govuk-colours. If it does, it tries to find the corresponding $variant, with a default of "primary" and a fallback for colours where there's just one ie: white being just #FFFFFF.

If it can't find the key in the new colours map, it will look for that key in the old map instead. If it can't find it there it will error.

The list of possible colours and their variants can be found in _colours-palette.scss

Examples

• govuk-colour("green") will return the new #11875a rather than #00703c because green exists in both palette maps and the function prioritises $govuk-brand-colours and uses "primary" as a default for $variant
• govuk-colour("green", $variant: "tint-80") will return #cfe7de` because that's the specified 80% tint of the primary green
• govuk-colour("dark-grey") will return ##505a5f because "dark-grey" doesn't exist as a map key in the new colours map so it looks in the old one instead
• govuk-colour("maroon") will error because "maroon" doesn't exist in either colours maps
• govuk-colour("red", $variant: "marinara-sauce") will error because whilst there is a red colour in the new and old palette, there isn't a marinara variant

Notes

I've decided to not touch any instance where we're using govuk-shade or govuk-tint except where there's a very clear 1 to 1 mapping to the new palette eg: in the rebranded template colour. This feels too tricky for me to just do on my own based on best guesses.

It's worth noting that tint and shades exist exclusively in the following components:

• button
• file upload
• service nav
• tag

The 4 of them probably need some special attention

[github-actions]

📋 Stats

No changes to any distributed file sizes!

---

Action run for 8bcfa1b