EvoToolkit - v2.3.0 (Changelog)

Colors

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

Source

Contributors

Luke Harrison

Base

ThemeDisabled

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.

This is disabled by default. Enable block variable $utility-colors-theme or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

I have a 'negative' background and am focusable.
I have a 'accent' background with a border.
<div class="o-box o-box--spacing-regular u-theme-negative u-margin-bottom-regular" tabindex="0">I have a 'negative' background and am focusable.</div> <div class="o-box o-box--spacing-regular c-box c-box--border u-theme-accent u-margin-bottom-regular" tabindex="0">I have a 'accent' background with a border.</div> <svg class="o-icon-huge u-theme-positive"><use xlink:href="#cat"></use></svg>

TextDisabled

These utility classes change the colour of text.

This is disabled by default. Enable block variable $utility-colors-text or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

I have 'primary' coloured text

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