Design TokenDesign Token
토큰은 Figma 변수를 그대로 옮긴 TypeScript 값입니다. 여기서 웹용 theme.css가 생성됩니다.Tokens are TypeScript values copied from Figma variables. The web theme.css is generated from them.
파일 구성Files
| 파일File | 내용Contents | 개수Count | Figma 출처Figma source |
|---|---|---|---|
color.ts | 시맨틱 색 라이트·다크, sky·red 프리미티브Semantic colors for light and dark, plus the sky and red primitives. | 91개 + 38개91 + 38 | Components 54:81, Components / Dark 166:1107Components 54:81, Components / Dark 166:1107 |
typography.ts | 글꼴, 굵기 4종, 글자 스타일의 플랫폼별 크기Typeface, four weights and per-platform sizes for the text styles. | 13개 스타일 × 3 플랫폼13 styles × 3 platforms | Typography 26:2Typography 26:2 |
scale.ts | 간격, 반경, 그림자Spacing, radius and shadow. | 11 · 8 · 211 · 8 · 2 | Scale 컬렉션, Menus 88:495Scale collection, Menus 88:495 |
glass.ts | 유리 레이어 값Glass layer values. | 레이어 5장5 layers | Button 55:339 외Button 55:339 and others |
이름 규칙Naming
CSS 변수 이름은 Figma 변수의 WEB 코드 문법과 같습니다. Tailwind에서는 앞의 --color-, --text-, --radius-를 떼고 씁니다. Tailwind 기본 팔레트, 글자 크기, 반경은 비웠기 때문에 text-sm이나 bg-zinc-100은 동작하지 않습니다. 이름이 없는 값이 필요하면 토큰을 먼저 추가합니다.A CSS variable name uses the same grammar as the WEB code of the Figma variable. In Tailwind, drop the --color-, --text- and --radius- prefix. The default palette, text sizes and radii are cleared, so text-sm and bg-zinc-100 do nothing. When a value has no name, add a token first.
<p class="text-label-md text-text-secondary">Label</p> <div class="rounded-xl bg-glass-thick" /> <span style="color: var(--color-text-brand)">Brand</span>
재생성Rebuild
theme.css는 손으로 고치지 않습니다. 값을 바꾼 뒤 아래 명령으로 다시 만듭니다.Do not edit theme.css by hand. Change the value, then rebuild it with the command below.
# from the repository root bun run --filter @horon-ai/tokens build # regenerate packages/tokens/theme.css bun test packages/tokens # check the output matches the committed file