@kb.ui/tokens 0.10.2 → 0.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,17 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
Shared colors, spacing, typography, and component values for kbui. Edit `tokens.json` to generate CSS variables and a typed object of their names.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Published defaults use monochrome light/dark surfaces with a persimmon accent and shared tactile materials.
|
|
6
6
|
|
|
7
7
|
Most projects do not import this package directly, because `@kb.ui/react/styles.css` and `@kb.ui/css/styles.css` already include the generated CSS. Install it when you need the typed names, or the variables without the rest of the stylesheet.
|
|
8
8
|
|
|
9
|
+
## Installation and use
|
|
10
|
+
|
|
11
|
+
For tokens without component styles:
|
|
12
|
+
|
|
13
|
+
```sh
|
|
14
|
+
npm install @kb.ui/tokens
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
If your app also uses React or CSS packages, use the [matching install command](https://kbui.kcb.pro/setup/?tokens=1) and keep every kbui dependency on one version. Package managers install tokens like any other npm dependency.
|
|
18
|
+
|
|
9
19
|
```ts
|
|
10
20
|
import { tokens } from "@kb.ui/tokens";
|
|
11
21
|
|
|
12
22
|
tokens.color.accent; // "--kb-color-accent"
|
|
13
23
|
```
|
|
14
24
|
|
|
15
|
-
|
|
25
|
+
Wrap names in `var()` when using them as styles, for example ``color: `var(${tokens.color.accent})` ``. Importing the object does not load CSS.
|
|
26
|
+
|
|
27
|
+
If your app does not load the full React or CSS stylesheet, import `@kb.ui/tokens/tokens.css` once to define the variables. JSON consumers can import `@kb.ui/tokens/tokens.json`. The [usage guide](../../docs/guides/using-kbui.md#choosing-packages) explains which package to choose.
|
|
16
28
|
|
|
17
29
|
## Exports
|
|
18
30
|
|