feat(exporter): don't export figma-only variables

[srambach]

Fixes #61

This will ignore variables that include "figma-only"
To test, use a branch of the tokens figma file that has figma-only files and run the exporter. Check that there are no tokens with "figma-only" in the name and that all others are still there.

[mcoker]

It looks like this filter is working - when I re-exported vars from figma for #63, it pulled down some "figma-only" tokens, and after manually adding the code from this PR to filter those out, those tokens are no longer in the export list.

However, we have some new typography tokens that have "px" appended that don't need them and some of the CSS declarations aren't including the var() declaration properly. Should that be a separate issue @srambach or want to try and address it in this PR?

  // typography tokens with "px" that isn't needed
  --pf-t--global--font--line-height--200: 1.5px;
  --pf-t--global--font--line-height--100: 1.2999999523162842px;
  --pf-t--global--font--family--300: Red Hat Mono VFpx;
  --pf-t--global--font--family--200: Red Hat Display VFpx;
  --pf-t--global--font--family--100: Red Hat Text VFpx;

  // font weight tokens have incorrect value
  --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
  --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
  --pf-t--global--font--weight--heading: {global.font.weight.heading.100};
  --pf-t--global--font--weight--body: {global.font.weight.body.100};
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);

[srambach]

After experimenting, it looks like the transform isn't matching global.font.weight.body.100 etc because it's a layer too deep. If I remove .body and .heading from it, it works ok.
I see a few options:

• figure out how to get style dictionary to handle that extra layer
• remove the heading and body layers from global.font.weight in the base tokens. This would match how line-height is. I've tried this and it works.
• change .global.font.weight.body.100 to .global.font-weight.body.100. This also seems to work but isn't quite the pattern we've been using I think.

@lboehling @mcoker

[lboehling]

i'd be fine renaming to font--weight--[100-400] and removing the body/heading in the base tokens.

[srambach]

i'd be fine renaming to font--weight--[100-400] and removing the body/heading in the base tokens.

Cool - ultimately we should probably understand why it doesn't handle it, but I think this particular change makes sense for the base tokens.

[evwilkin]

LGTM

[github-actions]

🎉 This PR is included in version 1.8.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀