From 0311ea69d62ca88b76d9cbb1b1943a3943b13cd3 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 6 Jan 2023 16:27:00 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(tokens)=20update=20tokens=20packag?=
 =?UTF-8?q?e=20doc=20for=20ts=20and=20js=20generators?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add example and more details regarding the -g bin's option.
---
 packages/tokens/README.md | 55 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 4 deletions(-)

diff --git a/packages/tokens/README.md b/packages/tokens/README.md
index 09220f0..193177d 100644
--- a/packages/tokens/README.md
+++ b/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);
 }
-```
\ No newline at end of file
+```
+
+### 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;
+``` 
\ No newline at end of file