feat: add useLiteralFontFamilies option

[opauloh]

Summary

Hey all

At my team's Design System (and also other design systems I've seen around) we provide the Font Family token as the whole font family stack, including the fallbacks in case of missing fonts.

i.e:

const fontFamilies = {
  default: 'Roboto, BlinkMacSystemFont, Helvetica, Arial, sans-serif',
  serif: 'Georgia, Times, Times New Roman, serif',
  code: "'Roboto Mono', Menlo, Courier, mc"
}

Currently using Figmagic we can only grab one font per token, which means we need to add a step for creating a combined token with a token from Figma + the fallbacks, but the problem is that this way we don't have a Single Source of Truth for these particular tokens, since the code is different from what is on Figma.

We found out that it would be helpful if we had an option to do this directly on Figma to keep the Single Source of Truth and have the ability to import using Figmagic and avoid extra steps.

Description of the changes made

• added useLiteralFontFamilies option
• updated CLI parser and RC file
• updated docs with useLiteralFontFamilies option and examples
• added test cases for useLiteralFontFamilies

Screenshots

Example of how it would like in Figma

Example of how it would like in code:

Checklist

• [x] I have read the Figmagic Contribution Guideline
• [x] The PR title summarizes the change

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[mikaelvesavuori]

Hi @opauloh! This is great work. Happy to merge this. Will cut a release of this ASAP.

[mikaelvesavuori]

Happy to present 4.5.6 with your work! Beers to you!

https://github.com/mikaelvesavuori/figmagic/releases/tag/v4.5.6

[opauloh]

That's Awesome! Thank you @mikaelvesavuori!!! 🍻