feat: add `rem` transform

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 1fada1811cd0f6bbc6a5a0b5b87eea2b4b1583bc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ---------------------------- | ----- | | @tokens-studio/sd-transforms | Major |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[schardev]

The commit and changes here are based on @jorenbroekema's comment from here https://github.com/tokens-studio/sd-transforms/pull/80#issuecomment-1493417074

Also, I wasn't sure if I should just transform all dimension-like values or stick to only dimension and fontSize, but decided to make it the same as px transform. Do let me know if you need any other change.

[jorenbroekema]

Very soon when style-dictionary v4 is released as well as this package v1, we will not need this anymore as you can just use the style-dictionary built-in rem transform: https://v4.styledictionary.com/reference/hooks/transforms/predefined/#sizerem

You would use it like this:

{
  "source": ["tokens/**/*.json"],
  "preprocessors": ["tokens-studio"],
  "platforms": {
    "css": {
      "transformGroup": "tokens-studio",
      "transforms": ["size/rem", "name/kebab"],
      "basePxFontSize": 14,
      "buildPath": "build/css/",
      "files": [
        {
          "destination": "variables.css",
          "format": "css/variables"
        }
      ]
    }
  }
}

The "tokens-studio" preprocessor will ensure that spacing/sizing/borderRadius types are aligned to DTCG "dimension" type, and the built-in transform in style-dictionary will do the rest (it matches "dimension" and "fontSize" type tokens).

You can pass basePxFontSize property on the platform config level which by default will be 16, but you can pick any number.

[schardev]

That's great. I just wish the documention to be a bit clear. It's confusing because of the mismatch between token-studio and Style Dictionary. Hopefully not for long :)

Thanks.