@nexus-cross/tokens

NEXUS Design System — Company 공통 디자인 토큰.

색상, 타이포그래피, 간격, 그림자, radius, borderWidth, opacity, zIndex, motion, breakpoint 등 160+ 토큰을 CSS 변수 / Tailwind 유틸리티 / JS API 형태로 제공합니다.

💡 UI 컴포넌트도 같이 쓰시나요?

@nexus-cross/design-system v2.0부터 이 패키지를 dependency로 흡수했습니다. UI를 함께 쓰는 경우엔 design-system 1개만 install 하세요 — 토큰까지 sub-path로 자동 노출됩니다.

# UI + 토큰 = 단일 install
npm install @nexus-cross/design-system

/* sub-path로 토큰 import */
@import '@nexus-cross/design-system/tokens/company.css';
@import '@nexus-cross/design-system/tokens/css';

import { getTheme } from '@nexus-cross/design-system/tokens';

이 패키지는 UI 없이 토큰만 단독으로 쓰는 경우에만 직접 install 하세요.

설치 (단독 사용)

npm install @nexus-cross/tokens

postinstall에서 nexus-tokens-setup CLI가 자동 실행되어 .cursor/rules/nexus-tokens.mdc를 설치합니다 (Cursor AI가 토큰을 자동 인식).

수동 실행:

npx nexus-tokens-setup

design-system을 함께 install 하면 design-system의 nexus-ds-setup이 이 작업을 모두 포함하므로 별도 호출 불필요.

사용

Tailwind v4

@import "tailwindcss";
@import "@nexus-cross/tokens/company.css";

Tailwind v3

// tailwind.config.js
module.exports = {
  presets: [require("@nexus-cross/tokens/tailwind")],
};

순수 CSS (Tailwind 미사용)

@import "@nexus-cross/tokens/css";

JS/TS API

import { getTheme } from "@nexus-cross/tokens";
const { semantic } = getTheme("dark");
// semantic.bg.default.base → "#1E232E"

Export 경로

| 경로 | 설명 | |---|---| | @nexus-cross/tokens | JS/TS API (getTheme() 등) | | @nexus-cross/tokens/data | Raw JSON 데이터 | | @nexus-cross/tokens/tailwind | Tailwind v3 Preset | | @nexus-cross/tokens/company.css | Tailwind v4 CSS (@theme) | | @nexus-cross/tokens/css | 순수 CSS (:root) |

라이선스

ISC