Configuring EvoToolkit

Setting Colours

If you need to add or edit any colours in $colors or $theme, you can do so using set-color and set-theme.

If required, you can also define how dark or how light $theme shades are with the set-theme-shades tool.

In addition, with set-theme-dark-text-color, any $theme colour names you pass here will have very-light text colour (default: very-dark) when its respective theme utility class is a applied to an element.

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

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

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

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

Getting Colours

To retrieve colours from either $colors or $theme, you can use the color tool.

.c-my-component {
	background-color: color('primary');
}
							

Component Theme Variables

For each component, variable exists where $theme colors are assigned roles specific to that component. For example:-

$component-input-border-color: color('medium');

.c-input {
	border: rem(1px) solid $component-input-border-color;
}
							

These generally shouldn't need to be edited unless you're introducing a lot more theme colours to the mix and would like to add more colour depth to components.

You can find a full list of theme variables in each component's respective documentation pages.

Why?

The reason behind this $colors and $theme split is one of scalability and maintainability.

If we only had $colors, this would make theming a more complicated process. For example, if components had border colours set to $grey and you wanted to change them to red, you would have 2 options:-

1. Change the value of $grey to red, which would do the job, as the variable would trickle down to the component styles. The problem here is with semantics, in that the variable $grey is now actually red, which is just unnecessary confusion.

OR

2. Add a new colour called $red and then go through every single component and override their theme variables. A time consuming process.

Because $theme contains colours named according to their role, we can assign them any colour and have it still make sense semantically. And because these $theme colours are the ones already referenced in the component styles, we don't have to go through and edit any component theme variables at all.