Adds color variables

[HaSistrunk]

Fixes #1 Adds initial set of color variables and html swatches.

• Contains 4 fewer colors than the dimes styles, but we may want to pare down further as we build out component styles and replace specific colors with Sass color functions. We'll also want to evaluate color in the context of component accessibility to minimize contrast issues.
• Uses hsl color values, and places color variables in order of hue to help think through future applications of Sass color functions to alter hue, saturation, and lightness.
• Uses SassDoc notation, which we can change once if we decide to use a different documentation approach to support a style library.

Useful tools for future work with color (adding to internal resources doc):

1. Hex/hsl converter: https://colordesigner.io/convert/hextohsl
2. Sass color function calculator: http://razorltd.github.io/sasscolourfunctioncalculator/
3. Visualize Sass hsl color functions: https://sassme.jim-nielsen.com/
4. Color palette accessibility checker: https://oomphinc.github.io/colorcube/

[HaSistrunk]

Ok great, I've updated the color names to use the hue and closest named color (roughly), and updated the TODO to more specifically note that we'll want to it narrow things to a single a hue and calculate variations from those. I'll merge if the color names look ok.

[helrond]

Yup, this looks good! I think we'll want to eventually add more generalized variables like brand-primary and brand-secondary for colors, but I'm guessing that should live in themes?

[HaSistrunk]

Yup, this looks good! I think we'll want to eventually add more generalized variables like brand-primary and brand-secondary for colors, but I'm guessing that should live in themes?

Yeah I think so. From the documentation for this 7-1 architecture, I think we can put those in /themes if we anticipate or want to make space for multiple themes, but we can also not use that at all and keep everything in variables (or add a separate file for color variables if that gets unwieldy).