Color

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'));