Having a duplicate list of colors is annoying

[burntcustard]

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:

@function color($name) {
  @if (map-has-key($colors, $name)) {
    @return map-get($colors, $name);
  }

  @if (map-has-key($colors, $name + '-500')) {
    @return map-get($colors, $name + '-500');
  }

  @error 'Color "#{$name}" does not exist in /settings/_colors';
}

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:

  'navy-lighter': #C1C3C8,
  'navy-light': #6E7480,
  'navy-default': #303849,
  'navy-dark': #242B39,
  'navy-darker': #131721,

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.