@une-front/design-tokens

UNE 디자인 시스템의 디자인 토큰 패키지입니다. 색상, 타이포그래피, 간격, 둥글기, 그림자, 아이콘에 대한 CSS 커스텀 프로퍼티를 제공합니다.

설치

npm install @une-front/design-tokens

사용법

CSS Import

@import "@une-front/design-tokens";

Tailwind CSS v4와 함께 사용

@import "tailwindcss";
@import "@une-front/design-tokens";

Tailwind Preset (v3)

// tailwind.config.js
module.exports = {
  presets: [require("@une-front/design-tokens/tailwind.preset")],
};

토큰 구조

src/
├── primitive/       # 기본 값
│   ├── colors.css
│   ├── icon.css
│   ├── radius.css
│   ├── shadow.css
│   ├── spacing.css
│   └── typography.css
└── semantic/        # 의미 기반 토큰
    ├── colors.css
    ├── colors-intent.css
    ├── colors-interaction.css
    ├── colors-status.css
    ├── radius.css
    ├── shadow.css
    ├── spacing.css
    └── typography.css

• Primitive: 원시 디자인 값 (예: --color-blue-500, --spacing-4)
• Semantic: 맥락에 맞는 별칭 (예: --color-bg-default, --color-text-primary)

라이선스

ISC