In /settings/_colors.scss there's two lists of colors - a set of global $color- SASS variables, and a SASS map, where most, if not all, are repeated.
The map gets used to generate the utility classes for text color and background color. It also has transparent and currentColor added to it so that those utility classes can just use the map.
Instead, we could just use the map, and then look up the desired color in the map every time. Either with map-get(), or with a custom function like:
That example code lets you skip out the '-500' string for default colors, but could be changed or added to, to include things like '-default' or 'normal' in case you have a color list like:
We could also add transparent and currentColor inside the utility functions that use them, or as a separate map somewhere, as they're usually not related to the list of "brand colors", i.e. they're not site-specific.
In /settings/_colors.scss there's two lists of colors - a set of global
$color-
SASS variables, and a SASS map, where most, if not all, are repeated.The map gets used to generate the utility classes for text color and background color. It also has
transparent
andcurrentColor
added to it so that those utility classes can just use the map.Instead, we could just use the map, and then look up the desired color in the map every time. Either with map-get(), or with a custom function like:
That example code lets you skip out the '-500' string for default colors, but could be changed or added to, to include things like '-default' or 'normal' in case you have a color list like:
We could also add
transparent
andcurrentColor
inside the utility functions that use them, or as a separate map somewhere, as they're usually not related to the list of "brand colors", i.e. they're not site-specific.