@airframeui/tokens 0.0.1 → 0.0.2
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 +56 -27
- package/dist/tokens.js +1 -1
- package/dist/tokens.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,49 +1,78 @@
|
|
|
1
1
|
# @airframeui/tokens
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Design tokens for Airframe UI — CSS variables, JSON, and a typed JavaScript export.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Most apps should install [`@airframeui/core`](https://www.npmjs.com/package/@airframeui/core), which depends on this package and loads the tokens stylesheet for you. Install tokens directly when you need the token map in tooling, or want tokens without the full core CSS.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
```bash
|
|
8
|
+
npm install @airframeui/core
|
|
9
|
+
# or, tokens only:
|
|
10
|
+
npm install @airframeui/tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### With `@airframeui/core` (recommended)
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import '@airframeui/core/core.css';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
No separate tokens import is required.
|
|
8
22
|
|
|
9
|
-
|
|
10
|
-
- `tokens.light.css` - Light theme semantic tokens
|
|
11
|
-
- `tokens.dark.css` - Dark theme tokens
|
|
12
|
-
- `tokens.high-contrast.css` - High contrast theme tokens
|
|
23
|
+
### Tokens stylesheet only
|
|
13
24
|
|
|
14
|
-
|
|
25
|
+
```css
|
|
26
|
+
@import '@airframeui/tokens/tokens.css';
|
|
27
|
+
```
|
|
15
28
|
|
|
16
|
-
|
|
29
|
+
### Programmatic access
|
|
17
30
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
31
|
+
```js
|
|
32
|
+
import { tokens } from '@airframeui/tokens';
|
|
33
|
+
// tokens.primitives, tokens.semantic, tokens.breakpoints, …
|
|
34
|
+
```
|
|
22
35
|
|
|
23
|
-
|
|
36
|
+
JSON map for tooling: `@airframeui/tokens/tokens.json`
|
|
24
37
|
|
|
25
|
-
|
|
26
|
-
- **Semantic tokens**: meaningful aliases that components consume - defined in theme CSS files
|
|
27
|
-
- **Interaction knobs**: global percentages for hover/active/soft generation
|
|
38
|
+
## Themes
|
|
28
39
|
|
|
29
|
-
|
|
40
|
+
Light is the default. Switch with `data-theme` or the `.dark` class:
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<html data-theme="dark">
|
|
44
|
+
…
|
|
45
|
+
</html>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
```js
|
|
49
|
+
document.documentElement.setAttribute('data-theme', 'high-contrast');
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Customize
|
|
53
|
+
|
|
54
|
+
Override variables in your own CSS — no rebuild of this package:
|
|
30
55
|
|
|
31
56
|
```css
|
|
32
57
|
:root {
|
|
33
58
|
--af-base-primary: #018183;
|
|
59
|
+
--af-space-md: 1rem;
|
|
34
60
|
}
|
|
35
61
|
```
|
|
36
62
|
|
|
37
|
-
|
|
63
|
+
See [Theming](https://airframeui.com/docs/theming) and [Tokens](https://airframeui.com/docs/tokens).
|
|
38
64
|
|
|
39
|
-
|
|
40
|
-
npm run build # Build once
|
|
41
|
-
npm run dev # Build and watch for changes
|
|
42
|
-
```
|
|
65
|
+
## Token model
|
|
43
66
|
|
|
44
|
-
|
|
67
|
+
- **Primitives** — literal values (colors, space, type scale, breakpoints)
|
|
68
|
+
- **Semantic tokens** — aliases that patterns and components consume
|
|
69
|
+
- **Themes** — light, dark, and high-contrast mappings included in `tokens.css`
|
|
70
|
+
|
|
71
|
+
## Related
|
|
45
72
|
|
|
46
|
-
|
|
73
|
+
- [`@airframeui/core`](https://www.npmjs.com/package/@airframeui/core) — layouts, patterns, utilities
|
|
74
|
+
- [Documentation](https://airframeui.com/docs)
|
|
75
|
+
|
|
76
|
+
## License
|
|
47
77
|
|
|
48
|
-
|
|
49
|
-
may be offered under separate commercial licenses.
|
|
78
|
+
MIT
|
package/dist/tokens.js
CHANGED
package/dist/tokens.json
CHANGED
package/package.json
CHANGED