EvoToolkit - v3.0.0 (Changelog)

Colors

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

Source

Contributors

Luke Harrison

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-a9f6d11dc7.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-a9f6d11dc7.svg#test-stroke"></use></svg> <svg class="o-icon-huge o-icon--height u-theme-negative-stroke"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.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>