@apollion-dsi/tokens 5.4.0 → 5.5.0
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 +47 -30
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,50 +1,67 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @apollion-dsi/tokens
|
|
2
2
|
|
|
3
|
-
Framework-agnostic design tokens for Apollion Design System
|
|
3
|
+
Framework-agnostic design tokens for the **Apollion Design System** — an
|
|
4
|
+
OKLch-based build pipeline that emits CSS variables, structured JSON,
|
|
5
|
+
TypeScript types, and an optional Tailwind preset, in light and dark
|
|
6
|
+
variants.
|
|
4
7
|
|
|
5
8
|
[](https://www.npmjs.com/package/@apollion-dsi/tokens)
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
Versioned in lockstep with
|
|
11
|
+
[`@apollion-dsi/core`](https://www.npmjs.com/package/@apollion-dsi/core) —
|
|
12
|
+
both packages always release the same version number.
|
|
8
13
|
|
|
9
|
-
##
|
|
14
|
+
## Installation
|
|
10
15
|
|
|
11
|
-
|
|
16
|
+
React consumers normally get this package automatically:
|
|
17
|
+
`@apollion-dsi/core` declares it as an optional dependency. For
|
|
18
|
+
non-React stacks (or standalone token builds), install it directly:
|
|
12
19
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
```ts
|
|
16
|
-
import { TOKENS_RUNTIME_API_VERSION } from '@apollion-dsi/tokens/runtime/v1';
|
|
20
|
+
```bash
|
|
21
|
+
yarn add @apollion-dsi/tokens
|
|
17
22
|
```
|
|
18
23
|
|
|
19
|
-
##
|
|
20
|
-
|
|
21
|
-
- **In:** OKLch palette derivation (S2/S4), Dimension axis (S3), Foundation/Surface builders (S4), build-time CSS/JSON/TS variant emission (S5), Config-First loader (S6).
|
|
22
|
-
- **Out:** Runtime React components (lives in `@apollion-dsi/core`), framework adapters (Vue/Flutter consumers consume `dist/json/*.json` directly).
|
|
23
|
-
|
|
24
|
-
## JSON output (`dist/json/*.json`)
|
|
24
|
+
## Versioned runtime API
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
Single public runtime entry: `@apollion-dsi/tokens/runtime/v1`.
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
Future breaking surface changes go to `runtime/v2`, `runtime/v3`, etc. —
|
|
29
|
+
`v1` is preserved indefinitely, so consumers migrate on their own schedule.
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
(`dist/tailwind/preset.mjs` + `dist/tailwind/tw-merge.mjs`, mapping foundation
|
|
35
|
-
tokens to theme keys over `var(--apollion-*)`) — see the Output docs.
|
|
36
|
-
|
|
37
|
-
## Coupling to `@apollion-dsi/core`
|
|
31
|
+
```ts
|
|
32
|
+
import { TOKENS_RUNTIME_API_VERSION } from '@apollion-dsi/tokens/runtime/v1';
|
|
33
|
+
```
|
|
38
34
|
|
|
39
|
-
|
|
35
|
+
## Scope
|
|
40
36
|
|
|
41
|
-
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
37
|
+
- **In:** OKLch palette derivation, dimension scales, Foundation/Surface
|
|
38
|
+
builders, build-time emission of CSS/JSON/TS variants (light **and**
|
|
39
|
+
dark), config-first loader (`apollion.config.mjs`).
|
|
40
|
+
- **Out:** runtime React components (those live in `@apollion-dsi/core`);
|
|
41
|
+
framework adapters — Vue/Flutter/other consumers read `dist/json/*.json`
|
|
42
|
+
directly.
|
|
43
|
+
|
|
44
|
+
## Build outputs (`dist/*`)
|
|
45
|
+
|
|
46
|
+
The build step emits, per variant (light/dark):
|
|
47
|
+
|
|
48
|
+
- **`dist/css/*.css`** — fully resolved CSS custom properties.
|
|
49
|
+
- **`dist/json/*.json`** — tokens as structured JSON, the cross-framework
|
|
50
|
+
interop surface. Values are **structured objects**, not shorthand strings:
|
|
51
|
+
- `color` → `{ "colorSpace": "oklch", "components": [L, C, H], "hex": "#rrggbb" }`
|
|
52
|
+
— OKLch working space + sRGB `hex` fallback (`alpha` emitted only when
|
|
53
|
+
below 1).
|
|
54
|
+
- `dimension` → `{ "value": <number>, "unit": "rem" }`.
|
|
55
|
+
- **`dist/ts/*.d.ts`** — typed token surfaces (string-based, hex / `rem`).
|
|
56
|
+
- **`dist/tailwind/preset.mjs` + `dist/tailwind/tw-merge.mjs`** — opt-in via
|
|
57
|
+
the `output.tailwind` config flag: a generated Tailwind preset mapping
|
|
58
|
+
foundation tokens to theme keys over `var(--apollion-*)`, plus a
|
|
59
|
+
tailwind-merge extension derived from the same source.
|
|
44
60
|
|
|
45
61
|
## Documentation
|
|
46
62
|
|
|
47
|
-
Official
|
|
63
|
+
- **Official documentation:** <https://www.apollion.com.br>
|
|
64
|
+
- **Changelog:** <https://www.apollion.com.br/changelog>
|
|
48
65
|
|
|
49
66
|
## License
|
|
50
67
|
|