88 lines
2.2 KiB
Markdown
88 lines
2.2 KiB
Markdown
# @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);
|
|
}
|
|
``` |