[NO-TICKET] Update token build scripts to use JSON source #2952
+30,754
−4,256
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
After the Figma changes, we have a different way of storing tokens, and they're all in one folder. We haven't needed the multiple input directories for a while, and we don't really have a big reason to run the command multiple times for different outputs either. This command has become specific to outputting what our other packages will consume, while we have a separate set of scripts for syncing with Figma.
…e broadly useful We will now need them in the CSS/Sass exporters
Let the Figma scripts do the conversion from `.` to `/`, but let our other exporters expect the alias notation to match the flattened keys
by breaking it into functions that are easier to test and by only converting the files it finds rather than requiring all theme files to be present
Still need to resolve values more intelligently and generate variable names in a way that matches the old ones and conveys the correct hierarchy
The test data needs some layout tokens, but it gets complicated, because spacers are currently defined as plain numbers in Figma, whereas we'll probably want the JSON `$type` to be `dimension`. We need to intelligently convert the values between our JSON storage and Figma
Once we do our first down-sync from Figma, we could possibly start storing this translation information as meta-data inside the JSON tokens. It wouldn't get uploaded to Figma, but it could be manually maintained in our repository. Being able to store information that doesn't go to Figma, however, would require that we merge incoming data with our local JSON files instead of the current overwriting method. Actually, if we're not storing that info in Figma, it's already in our tokens...why would I have to tell a dimension token that it's a dimension? If we don't need to be able to save the JSON based on only the information stored in Figma, then this isn't a problem at all. Maybe after the first down-sync we just need to update the down-sync operation to be a merge, and we look at the local (repository) token's `$type` and `$value` properties before converting from our Figma `NUMBER` variable. If `$type` is `dimension` then look at the unit of `$value` to determine how to translate from Figma.
This is so fiddly. I hate it.
We don't have the full set of tokens in Figma yet because we're in the process of trying to transfer the library file from one account to another, but we've got all the `System` variables, and I manually created a few variables in the `Theme` collection.
If a variable is an alias, we don't need to send it through our logic for converting pixel values to other units
My previous solution wasn't perfect because it didn't account for inheriting the token type from the aliased variable
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Along with the Figma migration, we're implementing a new token storage method based on JSON (see this pull request for background info). Our previous scripts for exporting our token data into CSS, SCSS, CSV, and JSON are therefore outdated and need to be rewritten to take the new JSON format as input.
How to test
Checklist
[WNMGDS-####] Titleor [NO-TICKET] if this is unticketed work.Type(only one) label for this PR, if it is a breaking change, label should only beType: BreakingImpacts, multiple can be selected.