Colours

.u-text-colour-{COLOUR REFERENCE} Will force the font colour of an element to be the same as a reference in the SCSS list.

.u-bg-colour-{COLOUR REFERENCE} Will force the background colour of an element to be the same as a reference in the SCSS list.

.u-border-colour-{COLOUR REFERENCE} Will force the border colour of an element to be the same as a reference in the SCSS list.


The above utility classes will allow you to amend the colour of an element based on the colour reference you use from the default list below:

$colour-list: (
    'one': $col1,
    'two': $col2,
    'three': $col3,
    'four': $col4,
    'text': $col-text,
    'negative': $alert-negative,
    'positive': $alert-positive,
    'neutral': $alert-neutral
) !default;

If you wish to add more colours or remove any of these, you can copy the above into your custom vars file (without using !default) and amend that list to your choosing.