@nexus-cross/tokens 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/TOKENS.md

@@ -5,11 +5,32 @@
 
 ## 설치 및 사용
 
+### Tailwind v4 (권장)
 ```css
 @import "tailwindcss";
 @import "@nexus-cross/tokens/company.css";
 ```
 
+### Tailwind v3
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require("@nexus-cross/tokens/tailwind")],
+};
+```
+
+### 순수 CSS (Tailwind 없이)
+```css
+@import "@nexus-cross/tokens/css";
+```
+
+### JS/TS API
+```ts
+import { getTheme } from "@nexus-cross/tokens";
+const { semantic } = getTheme("dark");
+// semantic.bg.default.base → "#1E232E"
+```
+
 ## Color Tokens (@theme → Tailwind 클래스)
 
 ### Background

package/dist/company-vars.css

@@ -2,7 +2,7 @@
  * Company CSS — 순수 CSS 변수 (:root + .dark)
  * Tailwind 없이 var(--*) 로 사용 가능
  * 자동 생성: scripts/generate-css.js
- * 생성일: 2026-03-26T09:42:26.124Z
+ * 생성일: 2026-03-27T06:40:25.691Z
  */
 
 :root {

package/dist/company.css

@@ -1,7 +1,7 @@
 /**
  * Company CSS — Tailwind v4 (@theme + .dark)
  * 자동 생성: scripts/generate-css.js
- * 생성일: 2026-03-26T09:42:26.122Z
+ * 생성일: 2026-03-27T06:40:25.689Z
  *
  * @theme: Tailwind 유틸리티 클래스 자동 생성
  * :root: 순수 CSS 변수 (var()로 직접 사용)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexus-cross/tokens",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "TO-NEXUS Design Tokens - 디자인 시스템 토큰 라이브러리",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,8 +20,12 @@
     "dist",
     "src/tailwind.js",
     "src/data",
-    "scripts/postinstall.js"
+    "scripts/postinstall.js",
+    "scripts/setup-cursor-rules.cjs"
   ],
+  "bin": {
+    "nexus-tokens-setup": "./scripts/setup-cursor-rules.cjs"
+  },
   "keywords": [
     "design-tokens",
     "design-system",

package/scripts/postinstall.js

@@ -13,7 +13,7 @@ const path = require('path');
 const RULE_FILENAME = 'nexus-tokens.mdc';
 const FRONTMATTER = `---
 description: "NEXUS Design Token Reference — 색상, 타이포그래피, 간격 등 모든 디자인 토큰의 Tailwind 클래스와 CSS 변수"
-globs: "**/*.tsx,**/*.jsx,**/*.css,**/*.ts"
+alwaysApply: true
 ---
 
 `;

package/scripts/setup-cursor-rules.cjs

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const FRONTMATTER = `---
+description: "NEXUS Design Token Reference — 색상, 타이포그래피, 간격 등 모든 디자인 토큰의 Tailwind 클래스와 CSS 변수"
+alwaysApply: true
+---
+
+`;
+
+function findProjectRoot(startDir) {
+  let dir = startDir;
+  while (dir !== path.parse(dir).root) {
+    const pkgPath = path.join(dir, 'package.json');
+    if (fs.existsSync(pkgPath) && !dir.includes('node_modules')) {
+      return dir;
+    }
+    dir = path.dirname(dir);
+  }
+  return null;
+}
+
+function run() {
+  const projectRoot = findProjectRoot(process.cwd());
+  if (!projectRoot) {
+    console.log('[@nexus-cross/tokens] 프로젝트 루트를 찾을 수 없습니다.');
+    return;
+  }
+
+  const tokensMd = path.join(projectRoot, 'node_modules', '@nexus-cross', 'tokens', 'dist', 'TOKENS.md');
+  if (!fs.existsSync(tokensMd)) {
+    console.log('[@nexus-cross/tokens] dist/TOKENS.md를 찾을 수 없습니다.');
+    return;
+  }
+
+  const targetDir = path.join(projectRoot, '.cursor', 'rules');
+  fs.mkdirSync(targetDir, { recursive: true });
+
+  const content = FRONTMATTER + fs.readFileSync(tokensMd, 'utf-8');
+  const dest = path.join(targetDir, 'nexus-tokens.mdc');
+  const destExists = fs.existsSync(dest);
+
+  if (!destExists || fs.readFileSync(dest, 'utf-8') !== content) {
+    fs.writeFileSync(dest, content, 'utf-8');
+    console.log(`[@nexus-cross/tokens] ${destExists ? '업데이트' : '설치'}: .cursor/rules/nexus-tokens.mdc`);
+  } else {
+    console.log('[@nexus-cross/tokens] Cursor rules가 이미 최신 상태입니다.');
+  }
+}
+
+run();

package/README.md

@@ -1,197 +0,0 @@
-# @nexus-cross/tokens
-
-NEXUS 디자인 토큰 라이브러리 - 색상, 타이포그래피, 간격 등 디자인 토큰을 TypeScript/JavaScript로 제공합니다.
-
-## 설치
-
-```bash
-npm install @nexus-cross/tokens
-# or
-yarn add @nexus-cross/tokens
-# or
-pnpm add @nexus-cross/tokens
-```
-
-## 사용법
-
-### 기본 사용 (getTheme)
-
-```typescript
-import { getTheme, typography, spacing } from '@nexus-cross/tokens';
-
-// 테마 선택
-function App({ isDark }: { isDark: boolean }) {
-  const { semantic, palette } = getTheme(isDark ? 'dark' : 'light');
-  
-  return (
-    <div style={{
-      backgroundColor: semantic.bg.default.base,
-      color: semantic.text.primary.base,
-      padding: spacing.md,
-    }}>
-      <h1 style={{
-        fontSize: typography.heading.large.fontSize,
-        color: semantic.accent.primary.base,
-      }}>
-        Hello NEXUS
-      </h1>
-    </div>
-  );
-}
-```
-
-### Palette vs Semantic
-
-```typescript
-// ❌ 나쁜 예: palette를 직접 사용 (UI 의미가 불명확)
-<div style={{ color: palette.neutral[900] }}>텍스트</div>
-
-// ✅ 좋은 예: semantic 색상 사용 (의미 기반, 테마 자동 적용)
-<div style={{ color: semantic.text.primary.base }}>텍스트</div>
-```
-
-### React Context를 이용한 테마 적용
-
-```typescript
-import { createContext, useContext, useState, useEffect } from 'react';
-import { getTheme, type ColorMode, type Theme } from '@nexus-cross/tokens';
-
-const ThemeContext = createContext<{ theme: Theme; mode: ColorMode } | null>(null);
-
-export function ThemeProvider({ children }) {
-  const [mode, setMode] = useState<ColorMode>('dark');
-  const theme = getTheme(mode);
-  
-  return (
-    <ThemeContext.Provider value={{ theme, mode, setMode }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export const useTheme = () => {
-  const ctx = useContext(ThemeContext);
-  if (!ctx) throw new Error('useTheme must be within ThemeProvider');
-  return ctx;
-};
-
-// 사용
-function Button() {
-  const { theme } = useTheme();
-  return (
-    <button style={{
-      backgroundColor: theme.semantic.accent.primary.base,
-      color: theme.semantic.accent['on-primary'],
-    }}>
-      클릭
-    </button>
-  );
-}
-```
-
-## 구조
-
-```
-@nexus-cross/tokens
-├── data/                # SSOT JSON 데이터
-│   └── color.json       # Semantic Mode-Aware 구조
-├── palette              # 테마 독립적 기본 색상 팔레트 (단일 값)
-│   ├── neutral          # Gray scale
-│   ├── brand            # 브랜드 색상
-│   ├── green            # 상태 색상
-│   ├── red
-│   ├── yellow
-│   └── blue
-├── themes               # 테마별 semantic 색상
-│   ├── light            # 라이트 테마 (createSemantic(palette, 'light'))
-│   └── dark             # 다크 테마 (createSemantic(palette, 'dark'))
-├── typography           # 타이포그래피
-├── spacing              # 간격
-├── shadows              # 그림자
-└── breakpoints          # 반응형 브레이크포인트
-```
-
-### Semantic Mode-Aware 구조
-
-**Primitive**는 순수 색상값만 가집니다 (mode 무관):
-```typescript
-palette.brand[500]   // #22C55E (항상 동일)
-palette.neutral[50]  // #FAFAFA (항상 동일)
-```
-
-**Semantic**에서 mode별로 다른 primitive를 참조합니다:
-```typescript
-// color.json 구조
-{
-  "semantic": {
-    "text": {
-      "primary": {
-        "base": {
-          "light": { "source": "neutral.950" },  // → #09090B
-          "dark": { "source": "neutral.50" }     // → #FAFAFA
-        }
-      }
-    }
-  }
-}
-
-// 사용 시
-const lightTheme = getTheme('light');
-lightTheme.semantic.text.primary.base  // #09090B (어두운 색)
-
-const darkTheme = getTheme('dark');
-darkTheme.semantic.text.primary.base   // #FAFAFA (밝은 색)
-```
-
-## API
-
-### getTheme(mode: 'light' | 'dark')
-
-지정된 mode의 테마를 반환합니다.
-
-```typescript
-const { mode, palette, semantic } = getTheme('dark');
-```
-
-### palette
-
-테마 독립적인 순수 색상값입니다.
-
-```typescript
-import { palette } from '@nexus-cross/tokens';
-
-palette.neutral[500]  // #71717A
-palette.brand[500]    // #22C55E
-```
-
-### light, dark (Pre-built)
-
-편의를 위한 미리 생성된 semantic 토큰입니다.
-
-```typescript
-import { light, dark } from '@nexus-cross/tokens';
-
-// getTheme('light').semantic과 동일
-light.text.primary.base
-```
-
-## 개발
-
-```bash
-# 빌드
-npm run build
-
-# 개발 모드 (watch)
-npm run dev
-
-# 타입 체크
-npm run type-check
-```
-
-## 문서
-
-디자인 토큰의 상세 스펙은 [`../../docs/tokens/`](../../docs/tokens/) 디렉토리를 참고하세요.
-
-## 라이선스
-
-ISC