Create codemod to migrate colors to css variables (#363)

* chore: bump jscodeshift to 0.15.0

* test: cover block property transform

* feat: replace colors in template string for css vars

* fix: adapt codemod to cover templates with an even number of quasis

* chore: add single quote config option to block codemod

* build: include codemods in build

* docs: add new codemod info in migrating docs

* docs: add semantic tokens recommendation in migration docs

* feat: pass print options to block codemod

.eslintignore

@@ -12,3 +12,5 @@ assets/
 fixtures/
 
 src/icons/
+
+src/codemods/

docs/migrating.storybook.mdx

@@ -4,20 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # Migrating
 
-Migrating from one major version to the next with ease.
-
-## From v1 to v2
-
-A codemod exists to upgrade your components for this version.
-
-```bash
-npx jscodeshift -t node_modules/@freenow/wave/codemods/v2.ts path/to/src
-```
-
-### Button and TextButton
-
-The `block` property used to act as a shortcut to give the button components a width of 100%. In the future, use the `width` property
-directly. It uses the styled-system variable, which is a lot more flexible than just the boolean flag.
+Migrate to the next Wave major version with ease.
 
 ## Codemods
 
@@ -28,3 +15,29 @@ previous major versions first. Beware that codemods are not 100% fool-proof and
 
 If you're working in a typescript environment, you need to add `--parser=tsx` to the command in each codemod command to
 allow jscodeshift to parse your typescript/jsx files.
+
+## From v1 to v2
+
+Two codemods exist to upgrade your components for version 2. In order to apply the transformations in your project you simply need to run the
+command for your desired codemod pointing to your project's source path.
+
+### Button and TextButton block property
+
+The `block` property used to act as a shortcut to give the button components a width of 100%. In the future, use the `width` property
+directly. It uses the styled-system variable, which is a lot more flexible than just the boolean flag.
+
+```bash
+npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/block-to-width-100.js path/to/src
+```
+
+### Colors to CSS variables
+
+Our theme colors structure has changed significantly in this major. In order to use Wave colors in your project you should now use the CSS variables
+that our theme brings.
+
+```bash
+npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/colors-to-css-vars.js path/to/src
+```
+
+Disclaimer: This codemod transforms usages of `Colors` to our bare colors CSS variables to ensure we don't introduce breaking changes, that being said,
+we recommend using semantic tokens instead as a best practice and offer a `getSemanticValue` API for just that.