Figma variables integration #41
Conversation
* transform function * storybook plugin
| src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations'); | ||
| unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | ||
| font-weight: 100 900; | ||
| src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) |
There was a problem hiding this comment.
Interesting that the name is latin-wght-normal. this is the variable font though, right?
There was a problem hiding this comment.
yes, the vf stands for "variable font" afaict, I have that same change locally on my machine from when I showed it off at a presentation :D
| viewPorts: "constraints", | ||
| }; | ||
|
|
||
| // TODO: extract the break points from figma |
There was a problem hiding this comment.
could you do this TODO before we merge this PR? Otherwise I might open a new issue in the project tool and link it in this TODO that it does not get forgotten
There was a problem hiding this comment.
since julio is not working anymore, I will quickly open a new ticket for this, so it is not forgotten
|
Not sure whether I'm a fan of the new additional nesting in the font styles with "body" and "heading". Makes the variables longer and doesn't add any helpful information. I'll take it up with UX, we can keep it like this just so we get this PR done. |
…cted from the design tokens
|
Where do we stand with this PR atm? I see that there is a lot of visual font changes, but that seems to be alright since we change the font face. Is there anything blocking still? |
|
I just saw the way we include the font-faces. I solved this for my customer a little different and I could change this here too. The way we did it is reference the font as |
…les-integration # Conflicts: # package-lock.json
lukecore
force-pushed
the
features/figma-variables-integration
branch
from
23fa44a
to
26e4635
Compare
Yeah go ahead with it, sounds good to me. |
INFO: There is currently another PR in preparation to have a PR without font change, so that the impact on the components is better visible in chromatic.
This PR includes the minimum necessary code to migrate to the new Figma variables export and also theming and viewport support.
The new export (design-tokens.tokens.json) includes the theming variables inside the
semantic-tokensfield (right now onlydarkandlight) and the view ports variables inside theconstraintsfield (right now onlydesktopandmobile). The rest are considered "independent" variables.A custom style dictionary formatter (cssFigmaVariables.cjs) has been implemented to parse this information and organize it in a convenient way. And also to rename some of the output css variable names.
The returning string of the formatter is what is going to be written to the resulting
design-tokens.cssfile. If you test it using this branch, you would get 5 "blocks" of css variables:The way the script works is by iterating through the information of design-tokens.tokens.json, but the version parsed by style dictionary (see docs). And we store each variable to the corresponding category.
In the end we just do some string manipulation with this data structure to generate the 5 blocks of css variables mentioned before.
The rest of the changes are the minimum necessary to not to break the existing components. The support to change the theme in story book is also added but components are not migrated to support the new
darktheme. This will be implemented in a different PR.