Expose aliases on website

[aayushpi]

Case for:

• It's hard to supply a theme shape without knowing the syntax, number of stops, and relationship between tokens and aliases.
• If we use a UI control like tabs, we can make aliases the second item on a list and clearly demarcate that these are not exposed to the system.

[SiTaggart]

As a consumer of a theme, I don't necessarily understand why you would need to know what the aliases are. They are a private, internal API to the design language.

At the "consuming a theme" level you don't have access to the aliases at all. Only at the creation of a theme before it's exported, do you have access to aliases.

Maybe if you could provide a use case, that would help me understand what you're trying to achieve.

[serifluous]

One internal use case I can think of:

As we were designing radios and checkboxes (or honestly any time we're designing a new interactive thing), it's hard to keep track of what alias maps to what token, which makes it hard to remember what tokens can be used for the different states of a component in order to pass the right color contrast ratios. For example, when designing a hover state, do I use color-*-dark or color-*-darker?

We manually keep track of contrast ratios here but they're based on aliases (and there's no way to map aliases to tokens in Sketch): https://share.goabstract.com/06c5a50d-87df-4f40-bfe8-e92cc55de4aa?collectionLayerId=c252544c-bc9f-405c-842a-1a98735b5671&mode=design , so sometimes it's actually easier to use the aliases first to see what looks and feels right, and then do the token lookup later to swap them to the right token—especially for radio/checkbox which have so many different states.

But this is an internal thing obv, and the public doc site might not be the best place for it, though I'm not sure how else we might solve this.

Externally, showing the aliases could help folks understand how the color palette is being used in the system. So people know we can't randomly apply any color on the palette when we're designing a component. But that understanding might take a few extra steps besides just showing aliases.

[TheSisb]

From an engineer's perspective, it's hard to understand what a "token" is - and how it's different from a variable - without first showing aliases. Tokens pointing to aliases (which are the palette variables) makes the whole concept more clear for me.

[loreina]

Closing this due to inactivity.