Develop
From tokens to experience.
Connect design intent to implementation. CSS variables, DTCG JSON, and the docs are all generated from a single token source.디자인의 의도를 구현으로 연결합니다. 토큰 하나의 소스에서 CSS 변수, DTCG JSON, 문서가 함께 생성됩니다.
Quick start빠른 시작
Apply the tokens and base component styles with a single CSS file.CSS 파일 하나로 토큰과 기본 컴포넌트 스타일을 적용합니다.
1. Get the styles1. 스타일 가져오기
Includes brand, scale, and semantic tokens (light/dark) plus base styles for Button, Input, Badge, Switch, Checkbox, Radio, Dialog, and Card.브랜드, 스케일, 의미 토큰(라이트/다크)과 Button, Input, Badge, Switch, Checkbox, Radio, Dialog, Card 기본 스타일을 포함한 파일입니다.
2. Add it to your project2. 프로젝트에 적용하기
<link rel="stylesheet" href="/styles/tokens.css">
<html data-theme="light"> <!-- or dark; omit to follow the OS -->
<button class="dy-button">Connect</button>
<button class="dy-button secondary">Later</button><link rel="stylesheet" href="/styles/tokens.css">
<html data-theme="light"> <!-- 또는 dark, 생략 시 OS 설정 -->
<button class="dy-button">연결하기</button>
<button class="dy-button secondary">나중에</button>3. Use it in React3. React에서 사용하기
import "./styles/tokens.css";
export function ConnectButton({ onConnect }) {
return (
<button className="dy-button" onClick={onConnect}>
Connect
</button>
);
}import "./styles/tokens.css";
export function ConnectButton({ onConnect }) {
return (
<button className="dy-button" onClick={onConnect}>
연결하기
</button>
);
}This example uses the downloaded CSS, not an installed npm package.별도 npm 패키지 설치가 아닌, 다운로드한 CSS를 사용하는 예시입니다.
Token pipeline토큰 파이프라인
How to change tokens in this repository.이 저장소에서 토큰을 수정하는 방법입니다.
# 1. Edit the token source
tokens/tokens.mjs # brand, scales, semantic, motion, balance
# 2. Generate (runs automatically before dev / build)
npm run tokens
# ✓ src/styles/tokens.css
# ✓ public/tokens.css (tokens + components)
# ✓ src/lib/tokens.json (docs data)
# ✓ public/design-tokens.json (DTCG)# 1. 토큰 소스 수정
tokens/tokens.mjs # 브랜드, 스케일, 의미, 모션, 밸런스
# 2. 생성 (dev / build 전에 자동 실행)
npm run tokens
# ✓ src/styles/tokens.css
# ✓ public/tokens.css (토큰 + 컴포넌트)
# ✓ src/lib/tokens.json (문서 데이터)
# ✓ public/design-tokens.json (DTCG)Implementation principles구현 원칙
| Principle원칙 | Rule규칙 |
|---|---|
| Tokens first토큰 우선 | Don't define new HEX values or spacing per screen. Reach for semantic tokens (--dy-color-*) first.화면마다 HEX, 간격을 새로 정의하지 않습니다. 의미 토큰(--dy-color-*)을 먼저 사용합니다. |
| Native semantics네이티브 의미 | Use elements that fit their purpose, like button, input, and dialog.button, input, dialog 등 목적에 맞는 요소를 사용합니다. |
| States included상태 함께 구현 | Consider default, focus, disabled, error, and loading states together.기본, 포커스, 비활성, 오류, 로딩 상태를 함께 고려합니다. |
| Theme support테마 대응 | Check both light and dark. Using semantic tokens instead of fixed HEX values handles this automatically.라이트, 다크에서 모두 확인합니다. 고정 HEX 대신 의미 토큰을 사용하면 자동으로 대응됩니다. |
| Change management변경 관리 | Review how changes to shared components affect products.공통 컴포넌트 변경은 제품에 미치는 영향을 검토합니다. |