[Colours] Add colour class names to pattern components

[joebuckle-dev]

It could be useful if we had the ability to add a classname to the pattern component which defines its colour scope.

Adding the classname 'burgundy' to the navbox like in the below example would ensure .navbox-title uses the burgundy colour set.

<div class="navbox **burgundy**">
        <div class="navbox-image">
            <img src="../../assets/[path/to/image.jpg]" alt="Alternative text 1">
        </div>
    <div class="navbox-title">
        <p><a href="/link/url/">Link text</a></p>
    </div>
</div>

We've been able to achieve this by using a CSS scoper polyfil but I think it would be much more elegant to do it with element classes.

[garethjmsaunders]

(40) Update colours in patterns to use palette function