README.md

Colors in multi repository projects

There needs to be a source of truth when it comes to colors in projects. That source of truth should be a single file which contains all colors that you will use throughout all of your projects.

The problem with colors is that they have no meaning when used as part of a component. $color-border means nothing to both the actual color and when misused as a background (because if there is only one definition of a color it must be used in that way)

I think a good way around this is to have all colors defined in a central location and to use SCSS to logically split up the usage of those colors in a more logical way.

Here's an example:

_all_colors.scss

$geyser: #D9DEE2; // color-border becomes geyser
$curious-blue: #2c88d8; // color-blue becomes curious-blue

Then when you are building a component you use a cool sass function to make a way to pull those colors out.

_button_colors.scss

$button_colors: (
  button: (
    border: $geyser,
    background:  $curious-blue
  )
);

What's the advantage of this? Now the colors have a useful name because they are logically separated into their own little silos that have meaning to that component.

But in the component how would we use this? Would it be a whole bunch of map-get calls?

@function c(
  $name,
  $theme:null,
  $component:null,
) {
  // Retrieve a palette color value
  @if ($theme == null) and ($component == null) {
    @return map-get($colors, $name);
  }
  // Retrieve a component color value
  @else if ($theme != null) and ($component == null) {
    @return map-get(map-get($colors, $name), $theme);
  }
  // Retrieve a themed component color value
  @else {
    @return map-get(map-get(map-get($colors, $name), $theme), $component);
  }
}

This function taken from here will allow us to use colors like this:

_button_base.scss

.btn {
  background-color: c(button, background)
  border: 1px solid c(button, color);
  padding: $gutter-quarter $gutter-half;
  
}

I think this will allow the most consistent expierence because it allows someone to look at the constants file and know exactly how a color is being used by the logical grouping.

Also since maps are mergable with every new component as long as they are namespaced properly we can have only one instance of that function and have all of the components define colors to one map.

This also can be scalable to not only components but also things like project specific css.