-
Notifications
You must be signed in to change notification settings - Fork 353
/
README.md
42 lines (28 loc) · 1.1 KB
/
README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# @patternfly/react-tokens
## Installation
```bash
yarn add @patternfly/react-tokens
```
or
```bash
npm install --save @patternfly/react-tokens
```
## Usage
All Tokens and their corresponding values can be viewed on the
[PatternFly React Tokens][token-page] page.
#### Import tokens
## Examples
```js
import global_BackgroundColor_100 from '@patternfly/react-tokens/dist/esm/global_-background-color_100';
```
#### Each token as three properties
- `name`: The CSS custom property name.
- `value`: The default value for the custom property.
- `var`: The property name wrapped in `var()`.
```js
import global_background_color_primary_default from '@patternfly/react-tokens/dist/esm/global_background_color_primary_default';
global_background_color_primary_default.name === '--pf-t--global--background--color--primary--default'; // true
global_background_color_primary_default.value === '#fff'; // true
global_background_color_primary_default.var === 'var(--pf-t--global--background--color--primary--default)'; // true
```
[token-page]: https://react-staging.patternfly.org/developer-resources/global-css-variables