Color

A collection of tools to interact with the $colors, $theme and $theme-shades objects which are used as part of EvoToolkits theming functionality. For the full breakdown of this process, please visit Configuring EvoToolkit.

Source

Contributors

Usage

Color

Retrieve a $colors, $theme or $theme-shades hex colour code by passing its key.

If you pass true as a second parameter, it instead returns true if the colour exists and false if not.

.c-my-component { background-color: color('primary'); } .c-my-component { @if(color('accent'), true)) { background-color: color('accent'); } }

Set Color

Add or edit $colors values.

@include set-color(( 'green': #00ff00, 'orange': #ffa500 ));

Set Theme

Add or edit $theme values.

@include set-theme(( 'accent': #cccccc, 'info': color('green') ));

Set Theme Shades

A 10% darker and 40% lighter shade are programatically generated for each $theme color. These are typically used for things like hover and focus colours.

For some colours, these defaults generate shades which are either too light or too dark. Using set-theme-shades you can set the percentages to something more suitable.

@include set-theme-shades(( 'info': ( 'dark': 5%, 'light': 23% ) ));

Set Theme Dark Text Color

set-theme-dark-text-color allows you to specify if a $theme color should have light text when used with theme utility classes. In the example below, running this will mean u-theme-accent will also set the element's color property to very-dark instead of the default very-light.

@include set-theme-dark-text-color(('accent'));