Create codemod to migrate colors to css variables

[martimalek]

What:

Adds a codemod that migrates usages of the old Colors constant to CSS variables following our new colors structure

​
Why:

To ease the adoption of Wave 2.0 by automating the colors migration

How:

• Add tests for both the existing codemod and the new one
  • In the testfixtures folders there are x.input.tsx with their respective x.output.tsx (the output file is what the input file should look like after running the codemod on it)
  • In the _tests I simply define the path and the config to run the codemods tests
• Rename existing v2 codemod to more semantic block-to-width-100
• Add new colors-to-css-vars codemod
• Move /codemods folder to /src so it is included in the build

Checklist:

• Update codemods docs
• Move /codemods folder to /src to include it in the build
• Ready to be merged

Closes #357

[nlopin]

Do you think we can put a comment to the code recommending switching to semantic colours via getSemanticValue()?

[martimalek]

Do you think we can put a comment to the code recommending switching to semantic colours via getSemanticValue()?

I think that can be tricky, when using the AST explorer it seems that comments don't always represent nodes in the AST, and when they do, they don't have a value 😕 (see attached). Looking at jscodeshifts API it seems that some nodes have a comments or leadingComment property, so I think it is possible to do, but if it's okay with you I'd prefer to have a comment in the migration guide with the recommendation for now and focus on other issues of the 2.0 milestone, in case we are ready for release and still have more time this can be a nice to have.

[github-actions]

🎉 This PR is included in version 3.0.0-next.1 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀