Skip to content
This repository has been archived by the owner on Mar 14, 2021. It is now read-only.

Support aliases for colors #11

Closed
frycz opened this issue Apr 6, 2020 · 5 comments · May be fixed by #13
Closed

Support aliases for colors #11

frycz opened this issue Apr 6, 2020 · 5 comments · May be fixed by #13

Comments

@frycz
Copy link

frycz commented Apr 6, 2020 •
edited

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
Copy link
Member

okonet commented Apr 6, 2020

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 frycz mentioned this issue Apr 6, 2020
Open
@frycz
Copy link
Author

frycz commented Apr 6, 2020

@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
Copy link
Member

okonet commented Apr 6, 2020

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
Copy link
Member

okonet commented Apr 6, 2020 •
edited

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
Copy link
Author

frycz commented Apr 6, 2020

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?

@okonet okonet closed this as completed Mar 14, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add aliases to colors palettes frycz/react-design-tokens
2 participants
@okonet @frycz