$ds-color-map: (
green-100: #c8e6c9,
green-200: #a5d6a7,
green-300: #81c784
);
@mixin color-utilities {
@each $name, $hex in $ds-colors-map {
&-#{$name} {
color: $hex;
}
}
}
.u-color-text {
@include color-utilities();
}
/*
Result:
.u-color-text-green-100 {
color: #c8e6c9;
}
.u-color-text-green-200 {
color: #a5d6a7;
}
.u-color-text-green-300 {
color: #81c784;
}
*/
$ds-color-map: (
green-100: #c8e6c9,
green-200: #a5d6a7,
green-300: #81c784
);
@mixin color-utilities($property: 'color') {
@each $name, $hex in $vf-colors-map {
&-#{$name} {
#{$property}: $hex;
}
}
}
.u-color-text {
@include color-modifiers();
}
.u-color-background {
@include color-modifiers(background-color);
}
/*
Result:
.u-color-text-green-100 {
color: #c8e6c9;
}
.u-color-background-green-100 {
background-color: #c8e6c9;
}
.u-color-border-green-100 {
border-color: #c8e6c9;
}
*/
.u-color-border {
@include color-modifiers(border-color);
}