Shopify/polaris-tokens

[Color system] New minor version with Sass variables from polaris-react

alex-page opened this issue · 3 comments

[Color system] New minor version with Sass variables from polaris-react

As discussed with Dan, we're going to be releasing beta versions for now, so we can introduce breaking changes and large refactors as we learn over the next few weeks.

We previously decided we'll want to output camelCase token names in all languages, as this single notation will make it easier to search for tokens across a codebase.

At the moment, Sass variables and CSS custom properties are in kebab-case:

$color-purple-text: rgb(80, 73, 90);
$color-purple-darker: rgb(35, 0, 81);
$color-purple-dark: rgb(80, 36, 143);
$color-purple: rgb(156, 106, 222);
$color-purple-light: rgb(227, 208, 255);

Moving from kebab-case to camelCase is a breaking change for consumers already using variables instead of helper functions such as color().

I don't think it's worth looking for a smooth upgrade path for people using variables, since most polaris-tokens consumers use helper functions and won't be impacted.

For this reason, I recommend introducing a breaking change when bringing Sass variables from polaris-react in polaris-tokens.

Closed in favor of Shopify/polaris#1982