@kb.ui/tokens 0.0.0-stage → 0.10.1
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 +38 -2
- package/dist/tokens.css +763 -0
- package/dist/tokens.d.ts +493 -0
- package/dist/tokens.js +493 -0
- package/package.json +26 -4
- package/tokens.json +1783 -0
package/README.md
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @kb.ui/tokens
|
|
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
|
+
|
|
5
|
+
Current source defaults use monochrome light/dark surfaces with a persimmon accent and shared tactile materials. Locally built packages include this refresh; published v0.7.0 tarballs keep their original appearance.
|
|
6
|
+
|
|
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
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { tokens } from "@kb.ui/tokens";
|
|
11
|
+
|
|
12
|
+
tokens.color.accent; // "--kb-color-accent"
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Install the optional `@kb.ui/tokens` package at the same version as your other kbui packages; [Get Started](https://kbui.kcb.pro/setup/?tokens=1) generates the command. Wrap names in `var()` when using them as styles, for example ``color: `var(${tokens.color.accent})` ``. Importing the object does not load CSS.
|
|
16
|
+
|
|
17
|
+
## Exports
|
|
18
|
+
|
|
19
|
+
| Import | File | Contents |
|
|
20
|
+
|---|---|---|
|
|
21
|
+
| `@kb.ui/tokens/tokens.css` | `dist/tokens.css` | All variables on `:root`; theme-dependent variables rebound on `[data-theme="light"]` and `[data-theme="dark"]`, plus a system-setting fallback and system-color overrides for tokens with a `kb.forced` value under `forced-colors: active` |
|
|
22
|
+
| `@kb.ui/tokens` | `dist/tokens.js`, `dist/tokens.d.ts` | `tokens`, a nested read-only object of variable names |
|
|
23
|
+
| `@kb.ui/tokens/tokens.json` | `tokens.json` | The source file |
|
|
24
|
+
|
|
25
|
+
## Build and test
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
bun run --cwd packages/tokens build
|
|
29
|
+
bun run --cwd packages/tokens test
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
The build rejects a token file that:
|
|
33
|
+
|
|
34
|
+
- contains an alias, such as `{blue.600}`, pointing at a token that does not exist
|
|
35
|
+
- has two paths that produce the same variable name
|
|
36
|
+
- uses a key with characters other than letters, digits, `_` and `-`
|
|
37
|
+
- has a `$value` that is not a string
|
|
38
|
+
|
|
39
|
+
[docs/tokens.md](../../docs/tokens.md) explains token kinds, naming and dark mode.
|