✨(bin) add tokens repo

This repo is made for the bin script that generates the tokens files,
at the moment it only generates a css file, but it is designed to be
able to generate any other file format ( Typescript, Javascript for example )

packages/tokens/README.md

@@ -0,0 +1,88 @@
+# @openfun/cunningham-tokens
+
+## Introduction
+
+**What are design tokens ?**
+
+Design tokens are the fundamental variables defining the precise behavior and rendering of ui components.
+
+For example:
+- The primary color of a text element
+- The standard spacing between two elements
+- The border radius of a button
+- ...
+
+## Getting started
+
+In this section we will install the library and generate the file that contains the design tokens of your app in order to 
+make Cunningham's Design System yours!
+
+Install the lib
+
+```
+yarn add @openfun/cunningham-tokens
+```
+
+Create a file named `cunningham.cjs` at the root of your project
+
+```
+module.exports = {
+  theme: {
+    colors: {
+      primary: 'purple'
+    },
+  },
+};
+```
+
+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).
+
+Now add this script to your `package.json`
+
+```
+{
+    "scripts": {
+        ...
+        "build-theme": "cunningham"
+    }
+}
+```
+
+The cunningham CLI's main purpose is to build a ad-hoc CSS file that contains 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 )
+
+> You can run `yarn run cunningham -h` to see the available options.
+
+And in order to generate the tokens css file, run 
+
+```
+yarn build-theme
+```
+
+It will generate a file named `cunningham-tokens.css`. **Don't forget to run this command everytime you
+change the content of the `cunningham.cjs` file !**
+
+Then, add these lines at the top of your main stylesheet file:
+
+```
+@import "cunningham-tokens"; // Imports the file you just generated.
+@import "@openfun/cunningham-react/style";
+```
+
+It's all done!
+
+## Use the design tokens
+
+Design tokens variable are all present in the `cunningham-tokens.css` file. They are all prefixed with `--c` in order to 
+avoid collision.
+
+Here is an example to make the text's color renders with the value of the primary color in `.my-element` matching elements
+
+```
+.my-element {
+  color: var(--c--colors--primary);
+}
+```