@thesmc/design-tokens
v0.1.0
Published
Design tokens for thesmc - OKLCH color system compatible with Tailwind v4 and shadcn
Maintainers
devthesmcReadme
@thesmc/design-tokens
shadcn/ui 및 Tailwind CSS v4와 호환되는 디자인 토큰 패키지입니다.
OKLCH 색상 공간을 사용하여 정의된 시맨틱 토큰을 제공하며, CSS 변수와 JavaScript 모듈 두 가지 형태로 사용할 수 있습니다.
설치
npm install @thesmc/design-tokens
# 또는
pnpm add @thesmc/design-tokens
# 또는
yarn add @thesmc/design-tokens사용법
CSS에서 사용
/* 토큰 CSS 변수 불러오기 */
@import "@thesmc/design-tokens/tokens.css";
/* 사용 예시 */
.my-component {
background-color: var(--background);
color: var(--foreground);
border-radius: var(--radius);
}Tailwind CSS v4와 함께 사용
@import "tailwindcss";
@import "@thesmc/design-tokens/tokens.css";
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-secondary: var(--secondary);
--color-muted: var(--muted);
--color-accent: var(--accent);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-ring: var(--ring);
}JavaScript/TypeScript에서 사용
차트, Canvas, 인라인 스타일 등에서 토큰 값을 직접 참조할 수 있습니다.
import { tokens, lightColors, darkColors } from '@thesmc/design-tokens';
// 라이트 모드 색상
console.log(lightColors.primary); // "oklch(0.205 0 0)"
// 다크 모드 색상
console.log(darkColors.primary); // "oklch(0.985 0 0)"
// 차트 색상 사용 예시
const chartOptions = {
colors: [
lightColors['chart-1'],
lightColors['chart-2'],
lightColors['chart-3'],
]
};다크 모드
CSS 클래스 .dark를 사용하여 다크 모드를 활성화합니다.
<!-- 라이트 모드 -->
<html>
<body>...</body>
</html>
<!-- 다크 모드 -->
<html class="dark">
<body>...</body>
</html>next-themes 등의 라이브러리와 함께 사용할 수 있습니다.
토큰 목록
색상 (Colors)
| 토큰 | 설명 |
|------|------|
| --background | 배경색 |
| --foreground | 전경색 (텍스트) |
| --card | 카드 배경색 |
| --card-foreground | 카드 텍스트색 |
| --popover | 팝오버 배경색 |
| --popover-foreground | 팝오버 텍스트색 |
| --primary | 주요 색상 |
| --primary-foreground | 주요 색상 위 텍스트 |
| --secondary | 보조 색상 |
| --secondary-foreground | 보조 색상 위 텍스트 |
| --muted | 음소거된 배경색 |
| --muted-foreground | 음소거된 텍스트색 |
| --accent | 강조 색상 |
| --accent-foreground | 강조 색상 위 텍스트 |
| --destructive | 위험/삭제 색상 |
| --border | 테두리 색상 |
| --input | 입력 필드 테두리 |
| --ring | 포커스 링 색상 |
| --chart-1 ~ --chart-5 | 차트용 색상 |
| --sidebar-* | 사이드바 관련 색상 |
타이포그래피 (Typography)
| 토큰 | 값 |
|------|-----|
| --font-sans | 시스템 산세리프 폰트 |
| --font-mono | 모노스페이스 폰트 |
| --text-xs ~ --text-4xl | 폰트 크기 (0.75rem ~ 2.25rem) |
| --font-thin ~ --font-extrabold | 폰트 굵기 (100 ~ 800) |
| --leading-none ~ --leading-loose | 줄 높이 (1 ~ 2) |
| --tracking-tighter ~ --tracking-widest | 자간 (-0.05em ~ 0.1em) |
간격 (Spacing)
| 토큰 | 값 |
|------|-----|
| --spacing-0 | 0 |
| --spacing-1 ~ --spacing-96 | 0.25rem ~ 24rem |
| --radius | 기본 border-radius (0.625rem) |
| --radius-sm ~ --radius-full | border-radius 변형 |
문서
토큰의 시각적 문서는 Storybook에서 확인할 수 있습니다.
라이선스
MIT