Task/GitHub actions

[skibinska]

This PR

• adds a GitHub action to run and add tokens created by Style Dictionary
• adds transformers to create the CSS tokens (for now)

The flow is as follows:

1. A designer pushes the updates from Figma, and the tokens.json file is updated.
2. The GitHub action runs and performs the following tasks:
   • The tokens.json file is split into smaller files based on the keys.
   • The $themes.json file is added by the developer and will need to be updated if any new products are added to Tokens Studio.
     Since we are on a free plan, we have to simulate "theming". If we were on a paid version, the tokens.json would have $themes values sent to us from Figma. But, since we don't have that, we need to create it. This PR does't handle the mobile, tablet, and desktop JSON files yet.
   • Style Dictionary is run on the files included in the $themes.json.
   • The generatedTokens are created, and CSS variables are generated for core, semantic, and all of the products.

FIle structure explained:

• tokens.json: our main file used to store and send tokens between GitHub and Figma.
• tokens: a folder where we store tokens from Figma, but we have split them into smaller JSON files by running npm run split-json.
• tokens/$themes.json: the only file not generated from tokens.json. It is added by the developer and simulates Figma theming.
• generatedTokens: a folder to store all the variables generated by Style Dictionary.

[chriddell]

What's the reasoning for maintaining different products (themes) in this repo?

I would have thought that is best implemented within each individual product, as it seems to add a lot of (in my opinion, unnecessary) complexity to the design system...

[skibinska]

I agree that handling themes (products) adds more complexity to the codebase. But, I thought it would be a good idea to provide all the core and semantic tokens available for each team. Each team would then handle the component-level tokens. We should definitely have a chat about that. I'll send a message in the Slack channel today.