Support aliases for colors

[frycz]

Now, colors palettes are enumerated from 0 to palette.length - 1.

We want to support aliases for color arrays indices.

Example:

const colors = ['#aaa', '#bbb', '#bbb']
colors.aliases = ['default', 'active', 'disabled']

<PaletteSwatch token={"gray"} value={colors} aliasesKey='aliases' />

or

<ColorSwatch token={"error"} value={"#C0100F"} alias={"red"} />

Proposal

• extend ColorSwatch with alias property and display alias under the default name

• extend PaletteSwatch with aliasesKey prop which will be used to read aliases from colors array and pass it to ColorSwatch

[okonet]

Although I'm not sure that's how I would structure colors section in the theme but I'd happy to get support for aliases on all tokens since it's supported by the spec.

[frycz]

@okonet By structuring the colors section do you mean the position of the alias name?

Should we add support for all aliases in a separate issue?

[okonet]

By structuring the colors section

No, I meant I would not not use aliases like you're using so I would not run into that problem in the first place. Usually, what I do is having palettes (no semantics) and then I refer to them in the color theme to get more "semantic" tokens like "warning" etc.

Example

react-design-tokens/src/examples/cdds.js

Lines 48 to 49 in f175059

	hover: palette.purple[2],
	focus: palette.purple[1],

[okonet]

Should we add support for all aliases in a separate issue?

I don't think so but I think the PR should include aliases support for all scales. Thoughts?

[frycz]

This is how we use aliases in our DS. Colors array has aliases prop. The PR includes support for all scales :-) Or you mean tokens?