setting colour could be easier.
At the moment to set the background or foreground colour we need to use map-get
in Sass.
This is a little laborious as we have to type out the map we want to get things from then the key for the value we want.
We should make it easier with a mixin/function to set-color
.
Some things we need to clarify though, to make it easier. So far we have the 'colours' in the brand guidelines. It would be good to know what is expected to be the primary, secondary, tertiary, and even quaternary colours to be used.
This way we could have something like:
.vf-component {
color: set-color(primary, dark);
}
Once we have functions in place for the above it would also be good to have 'paired' foreground and background colours that meet some WCAG definitions.
Then we could have a mixin for setting these. Something like
.vf-component--primary {
@include set-colors(primary);
}
which would result in something like:
.vf-component--primary {
background-color: #298dd3;
color: #ffffff;
}