USWDS - JSON Tokens: Color MVP

[mahoneycm]

Summary

MVP to use style-dictionary to convert JSON color tokens to scss. The existing JSON files have been simplified and the output scss maps match the existing counterparts to prevent styles from breaking.

Breaking change

This is not a breaking change.

Related issue

Related to #5506
Closes #5844

Related pull requests

Preview link

Preview link →

Major changes

• New style-dictionary and lodash dependencies
• Created color token style dictionary config - color.config.js
• Updated JSON structure for color tokens
• Created custom color transformer to match current color map output
• Added format-tokens script

Testing and review

Note

This work exclusively covers color tokens and the style-dictionary configuration will likely change to accommodate future tokens

1. Review style dictionary config
2. Review color token index file
3. Run style-dictionary script and confirm it runs without error
4. Confirm color maps match existing structure (no changes after running script in step 4)
5. Update some JSON color token values, and rerun the script. Confirm the map updates appropriately

Dependency updates

Dependency name	Previous version	New version
lodash	--	1.0.1
style-dictionary	--	4.17.21

[mahoneycm]

Implementation notes:

[mahoneycm]

Custom color map template

Modified version of map-deep.template provided by style-dictionary.

Numbers keys will be output without quotes and paired with their value.

Strings values with a nested maps will be output with quotes and their nested maps will be evaluated.

[mahoneycm]

Note

The new format-tokens script runs the color config JS file and then runs prettier on the output files to clean up some minor code styles for consistency. The changes from prettier are very minor and prevents linting errors.

[mahoneycm]

Note

This file exports a map of all the color tokens to be used in color.config.js. It filters any files that are not .json and then slices the file type from the name.

[mahoneycm]

Note

This filter makes it so each output scss file only contains the relevant color token and not a map of all the tokens combined.

[mahoneycm]

Note

Existing token structure is not needed for style-dictionary implementation. I decided to start barebones and we can add additional properties as the need for them arises.