Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't add px or rem using the right transforms #1199

Open
juanpablob opened this issue May 15, 2024 · 1 comment
Open

Can't add px or rem using the right transforms #1199

juanpablob opened this issue May 15, 2024 · 1 comment
Labels

Comments

@juanpablob
Copy link

Hello there :)
I'm using the following list of transforms "transforms": ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css', 'size/px'], taken from the transform group "scss" listed in the documentation. I have added size/px, in order to add px to the number of the values, but the files I get after the build are still without the px:

$sd-font-sizes-body: 16;
$sd-font-sizes-sm: 16 * 0.85;
$sd-font-sizes-xs: 16 * 0.65;

The size/px was just an example as I was testing, but indeed what I want to is to have rem values :) (yes, I already tried adding size/rem transform instead of the CSS one and it didn't work either :/

The input are tokens exported from Tokens Studio for Figma, they look like this:

      "body": {
        "value": "16",
        "type": "fontSizes"
      },
      "sm": {
        "value": "{fontSizes.body} * 0.85",
        "type": "fontSizes"
      },
      "xs": {
        "value": "{fontSizes.body} * 0.65",
        "type": "fontSizes"
      }

Do you have any idea why is this happening? Perhaps I'm missing something?
Thank you in advance! :)

@jorenbroekema
Copy link
Collaborator

The DTCG type for font sizes is called "fontSize", not "fontSizes".
If I'm not mistaken, you're probably using Tokens Studio figma plugin, they are not aligned with the DTCG spec with regards to how they're naming some of the types.

You can use this package https://github.com/tokens-studio/sd-transforms -> 'ts/size/px' is the name of the transform, which matches the Tokens Studio types (fontSizes, spacing, sizing etc.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants