SPIKE: update to build new variants

[elenagarrone]

Description

⚠️ DO NOT MERGE ⚠️

This spike confirms that it's possible to create the new variants proposed here:
https://www.figma.com/file/96Kkkoa6u5qfIa92OqKFht/Colour-theme-framework-proposal?type=design&node-id=15-2370&mode=design&t=TmIkszhmN1HCrHky-0

Discussion: #1276

Notes after speaking to Alex C.:

• All the themes in the design have light and dark foreground options. One of the options will most probably not be accessible but we still want both of them so that if we change main colours (for branding for example) we have the option. The designers will have to tell the devs which variants to use.
• Do not build subtle option 2. It's a copy of 1 but with slightly different main colours. The designers will decide in future which one to use (the code in the background will be the same)
• The types of variants will be named bold and subtle.
• Only the subtle option will have theme-5 (the grey variant).
• The links might slightly change in the future but for the spike code them as they are in the design.

Demo environment: https://legal-and-general.github.io/canopy/lg-sb-fep-2202-variants-spike/?path=/story/helpers-directives-variant-examples--standard-variant

---

If using this code in the future (or part of it) please be aware that:

• it's been coded as a breaking change. We could have a period of time where the old variants are present at the same time as the new ones. In this case we should add a deprecation warning to the old ones.
• the tests for the variant directive have been disabled.