@nexus-cross/tokens 1.1.1 → 2.0.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 +93 -0
- package/dist/company-vars.css +1 -1
- package/dist/company.css +1 -1
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# @nexus-cross/tokens
|
|
2
|
+
|
|
3
|
+
NEXUS Design System — Company 공통 디자인 토큰.
|
|
4
|
+
|
|
5
|
+
색상, 타이포그래피, 간격, 그림자, radius, borderWidth, opacity, zIndex, motion, breakpoint 등 **160+ 토큰**을 CSS 변수 / Tailwind 유틸리티 / JS API 형태로 제공합니다.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 💡 UI 컴포넌트도 같이 쓰시나요?
|
|
10
|
+
|
|
11
|
+
`@nexus-cross/design-system` v2.0부터 이 패키지를 **dependency로 흡수**했습니다. UI를 함께 쓰는 경우엔 design-system 1개만 install 하세요 — 토큰까지 sub-path로 자동 노출됩니다.
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
# UI + 토큰 = 단일 install
|
|
15
|
+
npm install @nexus-cross/design-system
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
```css
|
|
19
|
+
/* sub-path로 토큰 import */
|
|
20
|
+
@import '@nexus-cross/design-system/tokens/company.css';
|
|
21
|
+
@import '@nexus-cross/design-system/tokens/css';
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
import { getTheme } from '@nexus-cross/design-system/tokens';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
이 패키지는 **UI 없이 토큰만 단독으로 쓰는 경우**에만 직접 install 하세요.
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## 설치 (단독 사용)
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install @nexus-cross/tokens
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
postinstall에서 `nexus-tokens-setup` CLI가 자동 실행되어 `.cursor/rules/nexus-tokens.mdc`를 설치합니다 (Cursor AI가 토큰을 자동 인식).
|
|
39
|
+
|
|
40
|
+
수동 실행:
|
|
41
|
+
```bash
|
|
42
|
+
npx nexus-tokens-setup
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
> design-system을 함께 install 하면 design-system의 `nexus-ds-setup`이 이 작업을 모두 포함하므로 별도 호출 불필요.
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## 사용
|
|
50
|
+
|
|
51
|
+
### Tailwind v4
|
|
52
|
+
```css
|
|
53
|
+
@import "tailwindcss";
|
|
54
|
+
@import "@nexus-cross/tokens/company.css";
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Tailwind v3
|
|
58
|
+
```js
|
|
59
|
+
// tailwind.config.js
|
|
60
|
+
module.exports = {
|
|
61
|
+
presets: [require("@nexus-cross/tokens/tailwind")],
|
|
62
|
+
};
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 순수 CSS (Tailwind 미사용)
|
|
66
|
+
```css
|
|
67
|
+
@import "@nexus-cross/tokens/css";
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### JS/TS API
|
|
71
|
+
```ts
|
|
72
|
+
import { getTheme } from "@nexus-cross/tokens";
|
|
73
|
+
const { semantic } = getTheme("dark");
|
|
74
|
+
// semantic.bg.default.base → "#1E232E"
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## Export 경로
|
|
80
|
+
|
|
81
|
+
| 경로 | 설명 |
|
|
82
|
+
|---|---|
|
|
83
|
+
| `@nexus-cross/tokens` | JS/TS API (`getTheme()` 등) |
|
|
84
|
+
| `@nexus-cross/tokens/data` | Raw JSON 데이터 |
|
|
85
|
+
| `@nexus-cross/tokens/tailwind` | Tailwind v3 Preset |
|
|
86
|
+
| `@nexus-cross/tokens/company.css` | Tailwind v4 CSS (`@theme`) |
|
|
87
|
+
| `@nexus-cross/tokens/css` | 순수 CSS (`:root`) |
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## 라이선스
|
|
92
|
+
|
|
93
|
+
ISC
|
package/dist/company-vars.css
CHANGED
package/dist/company.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexus-cross/tokens",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "TO-NEXUS Design Tokens - 디자인 시스템 토큰 라이브러리",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
"src/tailwind.js",
|
|
22
22
|
"src/data",
|
|
23
23
|
"scripts/postinstall.js",
|
|
24
|
-
"scripts/setup-cursor-rules.cjs"
|
|
24
|
+
"scripts/setup-cursor-rules.cjs",
|
|
25
|
+
"README.md"
|
|
25
26
|
],
|
|
26
27
|
"bin": {
|
|
27
28
|
"nexus-tokens-setup": "./scripts/setup-cursor-rules.cjs"
|