158e7ba29a
- index.css 를 shadcn 스타일 토큰 시스템(Tailwind v4 @theme inline)으로 교체 - 다크모드/차트 토큰 제외 (프로젝트 미사용), light 전용 - 브랜드 블루 숫자 스케일 추가: --brand-500/600/700 (hover=톤다운 700) - --primary=brand-600, --ring/--sidebar-ring=brand-500 로 통일 - 폰트: Pretendard CDN(@import, dynamic-subset, 버전 고정) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
112 lines
5.6 KiB
Markdown
112 lines
5.6 KiB
Markdown
---
|
||
|
||
## 색상 (Color)
|
||
|
||
값은 `tokens.css`의 `:root`(light) / `.dark`(dark) 정의. 모두 hex (일부 8자리 hex = 알파 포함), `--background-rgb`만 raw rgb.
|
||
|
||
| 토큰 | Tailwind 유틸 | Light | Dark | 용도 |
|
||
|---|---|---|---|---|
|
||
| `--background` | `bg-background` | `#ffffff` (흰색) | `#0a0a0a` (거의 검정) | 페이지 배경 |
|
||
| `--background-rgb` | — | `250, 250, 250` | `9, 9, 11` | rgba() 조합용 raw 값 |
|
||
| `--foreground` | `text-foreground` | `#0a0a0a` | `#fafafa` | 기본 텍스트 |
|
||
| `--card` | `bg-card` | `#ffffff` | `#171717` | 카드 배경 |
|
||
| `--card-foreground` | `text-card-foreground` | `#0a0a0a` | `#fafafa` | 카드 텍스트 |
|
||
| `--popover` | `bg-popover` | `#ffffff` | `#171717` | 팝오버 배경 |
|
||
| `--popover-foreground` | `text-popover-foreground` | `#0a0a0a` | `#fafafa` | 팝오버 텍스트 |
|
||
| `--primary` | `bg-primary` | `#171717` (다크 그레이) | `#e5e5e5` (라이트 그레이) | 주요 액션/버튼 |
|
||
| `--primary-foreground` | `text-primary-foreground` | `#fafafa` | `#171717` | primary 위 텍스트 |
|
||
| `--secondary` | `bg-secondary` | `#f5f5f5` | `#262626` | 보조 배경 |
|
||
| `--secondary-foreground` | `text-secondary-foreground` | `#171717` | `#fafafa` | 보조 텍스트 |
|
||
| `--muted` | `bg-muted` | `#f5f5f5` | `#262626` | 흐린 배경 |
|
||
| `--muted-foreground` | `text-muted-foreground` | `#737373` | `#a1a1a1` | 흐린 텍스트/캡션 |
|
||
| `--accent` | `bg-accent` | `#f5f5f5` | `#262626` | 강조 배경(hover 등) |
|
||
| `--accent-foreground` | `text-accent-foreground` | `#171717` | `#fafafa` | accent 위 텍스트 |
|
||
| `--border` | `border-border` | `#e5e5e5` | `#ffffff1a` (흰색 10%) | 테두리/구분선 |
|
||
| `--input` | `border-input` | `#e5e5e5` | `#ffffff26` (흰색 15%) | 인풋 테두리 |
|
||
| `--ring` | `ring-ring` | `#a1a1a1` | `#737373` | 포커스 링 |
|
||
| `--destructive` | `bg-destructive` | `#e7000b` (빨강) | `#ff6467` | 위험/삭제 |
|
||
| `--success` | `bg-success` | `#10b981` (초록) | `#10b981` | 성공 (light/dark 동일) |
|
||
| `--warning` | `bg-warning` | `#f59e0b` (주황) | `#f59e0b` | 경고 (light/dark 동일) |
|
||
|
||
### 차트 (Chart) — 무채색 스케일
|
||
|
||
| 토큰 | Light | Dark |
|
||
|---|---|---|
|
||
| `--chart-1` | `#d4d4d4` | `#d4d4d4` |
|
||
| `--chart-2` | `#737373` | `#737373` |
|
||
| `--chart-3` | `#525252` | `#525252` |
|
||
| `--chart-4` | `#404040` | `#404040` |
|
||
| `--chart-5` | `#262626` | `#262626` |
|
||
|
||
### 사이드바 (Sidebar)
|
||
|
||
| 토큰 | Light | Dark |
|
||
|---|---|---|
|
||
| `--sidebar` | `#fafafa` | `#171717` |
|
||
| `--sidebar-foreground` | `#0a0a0a` | `#fafafa` |
|
||
| `--sidebar-primary` | `#171717` | `#1447e6` (보라) |
|
||
| `--sidebar-primary-foreground` | `#fafafa` | `#fafafa` |
|
||
| `--sidebar-accent` | `#f5f5f5` | `#262626` |
|
||
| `--sidebar-accent-foreground` | `#171717` | `#fafafa` |
|
||
| `--sidebar-border` | `#e5e5e5` | `#ffffff1a` |
|
||
| `--sidebar-ring` | `#a1a1a1` | `#737373` |
|
||
|
||
---
|
||
|
||
## 타이포그래피 (Typography)
|
||
|
||
`<Typography variant="...">` 로 사용. 출처: [src/components/ui/typography.tsx](src/components/ui/typography.tsx). `defaultVariant`는 `body`.
|
||
|
||
| variant | 기본 태그 | 클래스 | 용도 |
|
||
|---|---|---|---|
|
||
| `h1` | `<h1>` | `text-4xl font-bold tracking-tight text-foreground` | 페이지 제목 |
|
||
| `h2` | `<h2>` | `text-2xl font-bold tracking-tight text-foreground` | 섹션 제목 |
|
||
| `h3` | `<h3>` | `text-xl font-bold text-foreground` | 서브 제목 |
|
||
| `h4` | `<h4>` | `text-lg font-semibold text-foreground` | 소제목 |
|
||
| `body` | `<p>` | `text-base text-foreground` | 본문 (기본값) |
|
||
| `small` | `<p>` | `text-sm text-foreground` | 작은 본문 |
|
||
| `muted` | `<p>` | `text-sm text-muted-foreground leading-relaxed` | 보조 설명 |
|
||
| `label` | `<span>` | `text-xs font-semibold uppercase tracking-wider text-foreground` | 폼 라벨 |
|
||
| `mono` | `<span>` | `text-xs font-mono uppercase tracking-wider text-muted-foreground` | 콘솔/메타 캡션 |
|
||
| `caption` | `<span>` | `text-[11px] text-muted-foreground leading-normal` | 사이드바/헤더 chrome 메타 |
|
||
|
||
`as` prop으로 의미 태그 교체 가능(예: `label` variant를 `<label htmlFor>`로). 색은 variant에 토큰 클래스로 고정됨.
|
||
|
||
모든 텍스트 색은 `text-foreground`(또는 muted 계열)로 토큰화됨.
|
||
|
||
---
|
||
|
||
## 폰트 (Font Family)
|
||
|
||
| 토큰 | 스택 | 비고 |
|
||
|---|---|---|
|
||
| `--font-sans` | `'Pretendard Variable', 'Geist Variable', system-ui, sans-serif` | 본문 기본 (`@theme inline`이 최종 적용) |
|
||
| `--font-mono` | `'JetBrains Mono', ui-monospace, SFMono-Regular, monospace` | 모노 |
|
||
| `--font-heading` | `var(--font-sans)` | 헤딩 = sans |
|
||
|
||
Pretendard는 `public/fonts/PretendardVariable.woff2`로 self-host (weight 45–920 가변).
|
||
|
||
---
|
||
|
||
## 모서리 반경 (Radius)
|
||
|
||
기준값 `--radius: 0.625rem` (10px). 나머지는 배수로 계산됨 (`@theme inline`).
|
||
|
||
| 토큰 | Tailwind 유틸 | 계산식 | 값 |
|
||
|---|---|---|---|
|
||
| `--radius-sm` | `rounded-sm` | `radius * 0.6` | `0.375rem` (6px) |
|
||
| `--radius-md` | `rounded-md` | `radius * 0.8` | `0.5rem` (8px) |
|
||
| `--radius-lg` | `rounded-lg` | `radius * 1.0` | `0.625rem` (10px) |
|
||
| `--radius-xl` | `rounded-xl` | `radius * 1.4` | `0.875rem` (14px) |
|
||
| `--radius-2xl` | `rounded-2xl` | `radius * 1.8` | `1.125rem` (18px) |
|
||
| `--radius-3xl` | `rounded-3xl` | `radius * 2.2` | `1.375rem` (22px) |
|
||
| `--radius-4xl` | `rounded-4xl` | `radius * 2.6` | `1.625rem` (26px) |
|
||
|
||
---
|
||
|
||
## 기타
|
||
|
||
- **스크롤바**: 6px, thumb = `--border`, hover thumb = `--muted-foreground` (webkit)
|
||
- **전역 전환**: `body`에 `background-color/color 0.2s ease` (테마 전환용)
|
||
- **다크 모드**: `.dark` 클래스 기반 (`@custom-variant dark`)
|
||
- **간격(spacing)**: 별도 토큰 정의 없음 — Tailwind 기본 스케일 사용 |