@vuepkg/theme
v0.2.0
Published
CSS variable design tokens for @vuepkg
Downloads
479
Maintainers
sseongReadme
@vuepkg/theme
CSS variable design tokens for the @vuepkg ecosystem — zero JavaScript, zero runtime.
모든 @vuepkg 컴포넌트의 색상·크기·간격을 --vp-* CSS 변수로 정의합니다.
라이트 테마 기본값 + 다크 모드 오버라이드 포함.
설치
npm install @vuepkg/theme참고:
@vuepkg/calendar를 npm으로 설치하면 테마 토큰이style.css에 이미 번들됩니다.
이 패키지는 토큰을 직접 커스터마이징하거나 다른@vuepkg컴포넌트와 함께 사용할 때 설치합니다.
사용법
// main.ts
import '@vuepkg/theme/index.css' // 라이트 + 다크 토큰 전체필요에 따라 개별 파일만 불러올 수도 있습니다:
import '@vuepkg/theme/base' // 라이트 테마만
import '@vuepkg/theme/dark' // 다크 오버라이드만다크 모드
시스템 설정 자동 반영
별도 작업 없이 @media (prefers-color-scheme: dark) 블록이 자동 적용됩니다.
수동 토글 (클래스 기반)
document.documentElement.classList.toggle('vp-dark')<html class="vp-dark">토큰 구조 (3계층)
| 계층 | 접두사 | 역할 |
|------|--------|------|
| Primitive | --vp-palette-* | 팔레트 원시값 (변경 비권장) |
| Semantic | --vp-color-* | 의미 기반 색상 (배경·텍스트·강조 등) |
| Component | --vp-calendar-*, --vp-chip-* … | 컴포넌트별 세부 토큰 |
권장 커스터마이징: Semantic 계층만 덮어써도 전체 테마가 일관성 있게 변경됩니다.
커스터마이징 예시
브랜드 색상
:root {
--vp-color-primary: #7c3aed;
--vp-today-badge-bg: #7c3aed;
--vp-month-cell-selected-bg: #f5f3ff;
}공휴일 칩
:root {
--vp-holiday-chip-bg: #fef3c7;
--vp-holiday-chip-color: #92400e;
}모서리 반경
:root {
--vp-calendar-radius: 12px;
--vp-chip-radius: 8px;
}자주 쓰는 Semantic 토큰
:root {
--vp-color-bg /* 캘린더 전체 배경 */
--vp-color-border /* 주요 테두리 */
--vp-color-text /* 기본 텍스트 */
--vp-color-text-secondary /* 보조 텍스트 */
--vp-color-text-muted /* 비활성·힌트 텍스트 */
--vp-color-primary /* 강조·포커스 색상 */
--vp-color-sunday /* 일요일 날짜 색상 */
--vp-color-saturday /* 토요일 날짜 색상 */
--vp-today-badge-bg /* 오늘 뱃지 배경 */
--vp-today-badge-text /* 오늘 뱃지 텍스트 */
}License
MIT © vuepkg