feat(tokens): convert px values to rem

[srambach]

This makes a new transform to convert px values for sizes, spacers, and breakpoints to rems, based on a value in the config file, which has a fallback to 16.

Fixes #47

@evwilkin please check my js 🤓 @mcoker I will pull these to a core PR and test

[evwilkin]

@srambach everything looks to be working correctly! In the code shuffle I just wanted to call out the two rules removed and the 1 new rule that looks to replace them - it looks like both the 'icon' and 'font' type checks are covered by the broader 'size' item check:

Before:

token.attributes.type === 'icon'
(token.attributes.type === 'font' && token.attributes.item === 'size')

After:

token.attributes.item === 'size'

[srambach]

@srambach everything looks to be working correctly! In the code shuffle I just wanted to call out the two rules removed and the 1 new rule that looks to replace them - it looks like both the 'icon' and 'font' type checks are covered by the broader 'size' item check:

Before:

token.attributes.type === 'icon'
(token.attributes.type === 'font' && token.attributes.item === 'size')

After:

token.attributes.item === 'size'

Yes @evwilkin - that was intentional - I think we consistently have size in that item position. And I think it's better not to target all icon types just in case we introduce a base icon token that isn't a size and isn't a color (right now it's not affecting the icon colors because those are assigned palette tokens, not absolute values)

[evwilkin]

@srambach awesome, nice updates - great work on the JS code here! 👏

[github-actions[bot]]

:tada: This PR is included in version 1.12.0 :tada:

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot :package::rocket: