Colors

A suite of color oriented utility classes which are programatically generated using the colours in $theme.

Source

Contributors

Base

Theme

This suite of classes change a number of things:-

Background colour of the element or SVG.
Border colour of the element to the 'dark' shade of the `$theme` colour.
The focus shadow if the element is focusable or has a `tabindex` attribute.
Depending on the background colour, sets the text colour to either `very-light` or `very-dark` so it remains legible.

I have a 'negative' background and am focusable.

I have a 'accent' background with a border.

<div class="o-box u-p-regular u-theme-negative u-mb-regular" tabindex="0">I have a 'negative' background and am focusable.</div>

<div class="o-box u-p-regular c-box c-box--border u-theme-accent u-mb-regular" tabindex="0">I have a 'accent' background with a border.</div>

<svg class="o-icon-huge u-theme-positive"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#cat"></use></svg>

Theme Stroke

Some SVG's may rely on strokes rather than fills to apply their colour styling. In this instance, you can apply theme colours using stroke utility classes.

<svg class="o-icon-huge o-icon--height u-theme-positive-stroke u-mb-regular"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#test-stroke"></use></svg>
<svg class="o-icon-huge o-icon--height u-theme-negative-stroke"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#test-stroke"></use></svg>

Text

These utility classes change the colour of text.

I have 'primary' coloured text

<p class="u-text-primary">I have 'primary' coloured text</p>