tokens-studio
Font family fallback support
Is your feature request related to a problem? Please describe. I try to make our ui kit figma tokens friendly and struggled in font-family support. We use css-like font-family in our production tokens, e.g:
{
font: {
family: {
accent: {
value: "'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif"
},
base: {
value: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif"
},
monospace: {
value: "'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace"
}
}
}
}
We have a main font (first) and a fallback fonts just to be sure nothing go wrong if there is a issue with main font.
Figma tokens expect only one font so we are unable to use our web components tokens in sync with Figma Tokens.
Describe the solution you'd like Some support from Figma Tokens could help. E.g Figma tokens could use only first typeface from whole value and skip other. Something like split by comma and take first item.
E.g.
Value stored in token:
"Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif"
Value used in Figma:
Inter
If the value is typed like this: value: "'Segoe UI', 'Inter', Arial we should strip away the ' characters so we can pass over the value to Figma.
We could comma-separate fonts and use only the first one.
That would require that no font has a comma in its name though.
As an alternative we might let users write just like you did, with a single quote surrounding token names.
