Design tokens v3.0.1

[ty2k]

This PR updates the dependencies for the design tokens transformation pipeline:

• style-dictionary moves to new major version, latest v4
• @tokens-studio/sd-transforms moves to new major version, latest v1

The changes to these dependencies break our existing design tokens pipeline code. Some of the Style Dictionary transforms we use have changed names and behaviours. Simply updating these dependencies alone would cause breaking changes in our tokens output, which would cause a major version bump in our @bcgov/design-tokens package.

To avoid a new major version, I have added several custom transforms:

Custom transforms

bcds/color/uppercase

The new default hex color behaviour is to lowercase all the output. While this shouldn't have any effect on our users' apps, I would rather make this change in a major version update that won't get picked up automatically by new builds in downstream CI/CD systems, just to be extra safe. In this transform, I'm uppercasing the hex codes to match the existing v3 output.

bcds/css/size/zero

The new default behaviour for 0 dimension values like 0px and 0rem is to keep the unit instead of just shipping 0. Again, this should have no effect on our users, but I prefer to play it safe for v3, so I'm keeping the old behaviour in this transform.

bcds/js/size/zero

This does the same thing as the css transform, preserving the behaviour for our js outputs.

bcds/typography/italic

The new default behaviour for some font shorthand rules ends up changing the order of font-weight and font-style in the case of some tokens that used font-style: italic. It looks like the new default behaviour places all the shorthand properties in the correct order (see MDN font shorthand docs), but Chrome and Firefox were able to deal with the old "wrong" behaviour of our existing tags. Like the other transforms, I am erring on the side of not wanting to change this behaviour in a minor or patch version bump of our library.

Manual additions

This might be related to a bug in older versions of @tokens-studio/sd-transforms that was causing an uppercase "Italic" value to be spit out: tokens-studio/sd-transforms#267

There is new default behaviour that causes our existing input JSON to generate two new tokens, which get included in our output:

1. typography.fontWeights.italic.style
2. typography.fontWeights.italic.weight

A token with a capital i in "Italics" is no longer generated: typography.fontWeights.italic

Out of an abundance of caution, I've manually added back the "Italic" rule in 9133df1 so as to not cause a breaking API change and major version bump for us. I've also marked this token as deprecated in 9338e9b.

Next major version bump

The next time we have an opportunity to release a major version of the tokens package, we should remove all of these custom transforms and let the defaults from style-dictionary and @tokens-studio/sd-transforms guide us. This will cause a large number of tokens to change values, but in ways that shouldn't actually break functionality for our users.

npm

This version of the code is available for testing on the next tag as v3.0.1-rc5: https://www.npmjs.com/package/@bcgov/design-tokens/v/3.0.1-rc5

Once this PR is approved and merged, I'll publish v3.0.1 on the latest tag.

[mkernohanbc]

lgtm, thanks for trudging through this mess. Bring on 4.0.0 and being able to de-kludge again!