Custom output color names option

[NateBaldwinDesign]

Description

Added option to generateAdaptiveTheme function within each colorScale object for defining ratios as either an array or an object

This closes #80

User can pass custom swatch names to have used in the generated color output. If an array of numbers is passed, the default (current) naming convention is used in the output.

Option has been documented in the README.

Tests are included to validate proper output whether array or object is passed.

Motivation

This will make implementation easier within a design system where the user has specifically named color system. This helps to solve the use case where Leonardo may be used to override existing named tokens.

Screenshots

To-do list

• I have read the CONTRIBUTING document.

• This pull request is ready to merge.

[lazd]

I could definitely see a case where someone would want to add exact names for each color, however, I would personally prefer a function call where I can return whatever name I want, OR a string that would have substitutions in it, i.e. $color-$value would give me gray-100. However, that's a separate PR and issue.

Code looks fine and the API makes sense, however, it may be that ratios and swatchNames could be combined into an object:

{
  name: "gray",
  colorKeys: ['#cacaca'],
  colorspace: 'HSL',
  ratios: {
    GRAY_1: -1.8,
    GRAY_2: -1.2,
    GRAY_3: 1,
    GRAY_4: 1.2,
    GRAY_5: 1.4,
    GRAY_6: 2,
    GRAY_7: 3,
    GRAY_8: 4.5,
    GRAY_9: 6,
    GRAY_10: 8,
    GRAY_11: 12,
    GRAY_12: 21
  }
}

[NateBaldwinDesign]

That's a good point. The object would definitely help reinforce the relationship, rather than simply indexing each array.

[lazd]

@NateBaldwinDesign at that point, however, the name ratios doesn't quite make sense anymore... swatches? colors?

[NateBaldwinDesign]

Yeah that opens up a lot of ambiguity in names and what is being captured by this parameter.

ratios makes sense for the actual array of ratios [1.2, 3, 5]
swatchNames is also fairly straightforward ['gray1', 'gray2', 'gray3']

Combining them sounds appropriate, however the naming is less clear. I have reservations myself about the term swatches as it's typically in reference to an output color value. Leonardo is already unique in referencing a contrast as the "swatch".

Perhaps contrastSwatches would be ok, however?

I would still want to make sure this supports both an object or an array. The name contrastSwatches should still make sense in that regard.

For example, if named:

{
  name: "gray",
  colorKeys: ['#cacaca'],
  contrastSwatches: {
    GRAY_1: -1.8,
    GRAY_2: -1.2,
    GRAY_3: 1,
    GRAY_4: 1.2,
    GRAY_5: 1.4,
    GRAY_6: 2,
    GRAY_7: 3,
    GRAY_8: 4.5
  }
}

And if unnamed:

{
  name: "gray",
  colorKeys: ['#cacaca'],
  contrastSwatches: [
    -1.8,
    -1.2,
    1,
    1.2,
    1.4,
    2,
    3,
    4.5
  ]
}