@tensor_1/tokens 2.0.0 → 2.1.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 +50 -0
- package/package.json +2 -1
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# @tensor_1/tokens
|
|
2
|
+
|
|
3
|
+
UIx v2 design tokens — the **`--uix-*` contract** (colors, typography, spacing, radii, motion, light/dark) for the house products. One [DTCG](https://www.designtokens.org/) source generates **CSS variables**, a **Tailwind theme**, and **typed TS constants**.
|
|
4
|
+
|
|
5
|
+
> Stack-neutral. Drop the CSS into any project (HTML, React, Vue, Tailwind, server-rendered). The `--uix-*` names *are* the contract — override values, never names.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm i @tensor_1/tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Use
|
|
14
|
+
|
|
15
|
+
**Tailwind / shadcn:**
|
|
16
|
+
```css
|
|
17
|
+
@import "@tensor_1/tokens/css"; /* the --uix-* contract (light + dark) */
|
|
18
|
+
@import "@tensor_1/tokens/themes/tensor"; /* a product brand */
|
|
19
|
+
@import "@tensor_1/tokens/tailwind"; /* @theme — bg-uix-accent, rounded-uix-md, … */
|
|
20
|
+
@import "tailwindcss";
|
|
21
|
+
```
|
|
22
|
+
(Tailwind v3: `presets: [require('@tensor_1/tokens/tailwind/preset')]`.)
|
|
23
|
+
|
|
24
|
+
**Plain CSS:** link `@tensor_1/tokens/css`, then a product theme.
|
|
25
|
+
|
|
26
|
+
**TS / ECharts / React Native:**
|
|
27
|
+
```ts
|
|
28
|
+
import { cssVar, light, dark, num } from "@tensor_1/tokens/ts";
|
|
29
|
+
```
|
|
30
|
+
`cssVar` in the browser (respects brand + dark); `light` / `dark` / `num` for non-DOM (SSR, RN, server-rendered charts).
|
|
31
|
+
|
|
32
|
+
## Brand a project
|
|
33
|
+
|
|
34
|
+
Override the write-only brand slots; `accent` / `link` / `ring` / `brand-muted` re-chain automatically:
|
|
35
|
+
```css
|
|
36
|
+
:root { --uix-brand: #16A34A; --uix-brand-fg: #FFFFFF; }
|
|
37
|
+
:root:where(.dark,[data-theme="dark"]) { --uix-brand: #22C55E; }
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Exports
|
|
41
|
+
|
|
42
|
+
| Subpath | What |
|
|
43
|
+
|---|---|
|
|
44
|
+
| `./css` | the `--uix-*` contract (`:root` light, dark selector) |
|
|
45
|
+
| `./styles` | component CSS (use with the tokens + a theme) |
|
|
46
|
+
| `./tailwind` · `./tailwind/preset` | Tailwind v4 `@theme` / v3 preset |
|
|
47
|
+
| `./ts` | typed `cssVar` / `light` / `dark` / `num` |
|
|
48
|
+
| `./themes/{tensor,posx,shopx,mission-control}` | per-product brand |
|
|
49
|
+
|
|
50
|
+
Source of truth: `tokens/*.json` (DTCG) → [Style Dictionary](https://styledictionary.com). Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tensor_1/tokens",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "UIx v2 design tokens — the --uix-* contract for house products (Tensor, POSx, SHOPx). One DTCG source -> CSS variables, Tailwind theme, and typed TS constants.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"exports": {
|
|
21
21
|
"./css": "./build/css/tokens.css",
|
|
22
22
|
"./styles": "./build/css/components.css",
|
|
23
|
+
"./bundle": "./build/css/styles.css",
|
|
23
24
|
"./tailwind": "./build/tailwind/theme.css",
|
|
24
25
|
"./tailwind/preset": "./build/tailwind/preset.cjs",
|
|
25
26
|
"./ts": {
|