HORON
Get Started Foundations Components Mascot Updates

Foundations

Design Token

토큰은 이 시스템의 단일 소스입니다. 색·간격·반경·타이포·모션·유리 표면의 값이 여기 한 번만 적히고, 웹 CSS가 여기서 파생됩니다.

@horon-ai/tokens는 TypeScript 소스에서 theme.css를 생성합니다. 생성 파일에는 자동 생성 헤더가 붙고, 손으로 고치지 않습니다. 값을 바꾸려면 소스를 고치고 다시 빌드합니다.

terminal 
bun run --filter @horon-ai/tokens build

무엇이 나오나

그룹 소스 출력
Color src/palette.ts · src/tokens.ts --background, --foreground, --card, --primary, --ring, … 36 시맨틱 × 2 모드
Radius src/scales.ts --radius-xs … --radius-4xl (10단) 10 값
Spacing src/scales.ts space 0 … 24 (21단) 21 값
Text src/scales.ts --text-caption … --text-hero (7단) 7 값
Elevation src/scales.ts --shadow-sm, --shadow-md, --shadow-lg 3 값
Motion src/scales.ts --duration-* (5단), --ease-* 5 지속 시간
Glass src/scales.ts · src/tokens.ts --glass-fill, --glass-border, --glass-blur (32px), --glass-liquid-* 7 값 × 2 모드

세 층

  1. 프리미티브 — sand-100…1200, gold-100…600, 상태색. 모드와 무관한 단일 값입니다.
  2. 시맨틱 — background, card, primary, ring 등. 라이트·다크 두 벌이 있습니다.
  3. 스케일 — 간격, 반경, 타이포, 그림자, 모션, 유리. 모드와 무관합니다.

소비

tsx 
// 웹: 생성된 CSS를 그대로 import
import "@horon-ai/react/globals.css";

// 원시 값이 필요할 때
import { PALETTE, ACCENT, INK } from "@horon-ai/tokens";

드리프트 가드

bun test가 생성된 CSS와 소스의 값이 어긋나면 실패합니다. 팔레트 각 단계는 캔버스의 hex로 왕복 단언되므로, 값을 손으로 바꾸면 테스트가 먼저 알려 줍니다.