feat(ui-kit): add Design Tokens synchronization automation from Figma to UI Kit

[sashathor]

Description of changes

This PR resolves:

• [RFC]: Syncing Design Tokens Between Figma and UI Kit
• Fix Module level directives cause errors when bundled, "use client" build warning

The sync process:

1. Go to UI Style Guide in Figma.
2. Export Style Variables as JSON by using variables2json plugin (set Color format to rgba in plugin's settings).
3. Put the exported variables.json into the folder packages/ui-kit/src/themes/.
4. Run yarn build from the root folder.

The sync process runs two scripts:

1. Parser – this script automates the conversion of design tokens from a JSON file into SCSS and TypeScript files, parsing variables for colors, typography, and other properties to generate styles and type definitions.
2. Validator – this script builds SASS files into CSS, recursively gathers all relevant CSS and SCSS files within specified directories, extracts custom CSS variables prefixed with --propel, and validates these variables across different theme directories to ensure consistency in design tokens.

The sync went well

The sync reports missed variables

Checklist

Before merging to main:

• Tests
• Manually tested in React apps
• Changesets
• Approved

[changeset-bot]

🦋 Changeset detected

Latest commit: f808593

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@propeldata/ui-kit	Patch
dashboard-example	Patch
react-16	Patch
react-18	Patch
react-17	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 5, 2024 1:47pm

[felipecadavid]

Overall looks good! I just added a few comments, I also think it would be nice to add tests to the scripts

[sashathor]

Overall looks good! I just added a few comments, I also think it would be nice to add tests to the scripts

I'm not 100% satisfied with the sync architecture 🤔. I have a strong feeling that it could be better. I plan to continue thinking on that during the syncing process in #206. We can also introduce the tests in that PR.

[felipecadavid]

I'm not 100% satisfied with the sync architecture 🤔. I have a strong feeling that it could be better. I plan to continue thinking on that during the syncing process in #206. We can also introduce the tests in that PR.

Cool, ideally we find a way to get the variables.json file automatically, maybe we can check figma's apis? Anyways, I think for now this will work nicely for our needs

[sashathor]

I'm not 100% satisfied with the sync architecture 🤔. I have a strong feeling that it could be better. I plan to continue thinking on that during the syncing process in #206. We can also introduce the tests in that PR.

Cool, ideally we find a way to get the variables.json file automatically, maybe we can check figma's apis? Anyways, I think for now this will work nicely for our needs

@felipecadavid I planned to use Figma's API in the next stage because it requires a paid Enterprise plan for exporting variables:

To use this API, you must have a full seat in an Enterprise org; guests cannot use the API. The following table describes the requirements.