Create codemod to migrate colors to css variables

.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,26 @@ 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
+```