📝(tokens) update tokens package doc for ts and js generators

Add example and more details regarding the -g bin's option.

packages/tokens/README.md

@@ -23,9 +23,28 @@ Install the lib
 yarn add @openfun/cunningham-tokens
 ```
 
-Create a file named `cunningham.cjs` at the root of your project
 
+### Configuration file
+
+#### Typescript
+
+If you prefer using Typescript, create a file named `cunningham.ts` at the root of your project
+
+```ts
+export default {
+  theme: {
+    colors: {
+      primary: 'purple'
+    },
+  },
+};
 ```
+
+#### Javascript
+
+Or if you prefer Javascript, create a file named `cunningham.cjs` at the root of your project
+
+```js
 module.exports = {
   theme: {
     colors: {
@@ -38,18 +57,20 @@ module.exports = {
 In this configuration file you can overwrite all the default values of the design system.
 You can find the default values [here](./src/bin/cunningham.dist.js).
 
+### Build
+
 Now add this script to your `package.json`
 
 ```
 {
     "scripts": {
         ...
-        "build-theme": "cunningham"
+        "build-theme": "cunningham -g css"
     }
 }
 ```
 
-The cunningham CLI's main purpose is to build a ad-hoc CSS file that contains all your customized design tokens,
+The cunningham CLI's main purpose is to build a ad-hoc CSS,JS,TS files that contain all your customized design tokens,
 by taking into account your local configuration ( defined in the file that you previously created : `cunningham.cjs`,
 it is worth mentioning that this file is optional, hence it will generate a file containing the default values of the
 design system )
@@ -74,8 +95,12 @@ Then, add these lines at the top of your main stylesheet file:
 
 It's all done!
 
+> You can also generate Typescript or Javascript files using the `-g` option. Example: `cunningham -g css,ts,js`
+
 ## Use the design tokens
 
+### Stylesheet
+
 Design tokens variable are all present in the `cunningham-tokens.css` file. They are all prefixed with `--c` in order to
 avoid collision.
 
@@ -85,4 +110,26 @@ Here is an example to make the text's color renders with the value of the primar
 .my-element {
   color: var(--c--colors--primary);
 }
-```
+```
+
+### Typescript
+
+If you previously specified `-g ts` option you will have a `cunningham-tokens.ts` file generated. You can import it in your
+Typescript files and use the design tokens like this:
+
+```ts
+import { tokens } from "./cunningham-tokens";
+
+const myColor = tokens.theme.colors.primary;
+``` 
+
+### Javascript
+
+If you previously specified `-g js` option you will have a `cunningham-tokens.js` file generated. You can import it in your
+Javascript files and use the design tokens like this:
+
+```js
+import { tokens } from "./cunningham-tokens.js";
+
+const myColor = tokens.theme.colors.primary;
+```