@nexus-cross/tokens 1.0.1-beta.1 → 1.0.2-beta.1

package/dist/company-vars.css

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

package/dist/company.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexus-cross/tokens",
-  "version": "1.0.1-beta.1",
+  "version": "1.0.2-beta.1",
   "description": "TO-NEXUS Design Tokens - 디자인 시스템 토큰 라이브러리",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

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