tyange-labs 프로젝트 공유 디자인 토큰/컴포넌트
- CSS 45.3%
- HTML 37.9%
- TypeScript 16.8%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
tyange
16d0aa97b1
미니멀 뉴트럴 톤, 라이트/다크 겸용 시맨틱 토큰(색·타이포·간격·라디우스·그림자· 모션·z-index)을 --tl- 네임스페이스 순수 CSS로 정의. Tailwind v4 소비자를 위한 @theme inline 브리지(css/theme.css)는 별도 파일로 분리해 gotolib처럼 Tailwind가 없는 앱에서도 안전하게 임포트할 수 있게 했다. - scripts/contrast.ts: WCAG 대비 오라클(라이트/다크 전 조합, 미달 시 exit 1) - preview/index.html: 전 토큰 시각 확인 페이지(라이트/다크 토글) - docs/tokens.md, docs/adoption.md, docs/decisions.md 컴포넌트 패키지(Base UI/Reka UI/Kobalte)는 다음 단계. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KQEKcbadPHism38gwYWJKb |
||
| css | ||
| docs | ||
| preview | ||
| scripts | ||
| .gitignore | ||
| CLAUDE.md | ||
| package.json | ||
| README.md | ||
@tyange-labs/design-system
tyange-labs 프로젝트들이 공유하는 디자인 토큰. 미니멀 뉴트럴 톤, 라이트/다크 겸용, React·Vue·Solid·Tailwind 유무와 무관하게 순수 CSS 커스텀 프로퍼티로 배포한다.
1차(현재): 토큰 레이어만. Base UI(React)/Reka UI(Vue)/Kobalte(Solid) 기반
컴포넌트 패키지는 다음 단계 — 배경과 근거는 docs/decisions.md 참고.
설치
bun add "git+ssh://git@git.tyange.com/tyange-labs/design-system.git"
빠른 시작
Tailwind v4 프로젝트:
@import "tailwindcss";
@import "@tyange-labs/design-system/tokens.css";
@import "@tyange-labs/design-system/dark.css";
@import "@tyange-labs/design-system/theme.css";
Tailwind 없는 프로젝트(gotolib 등):
@import "@tyange-labs/design-system/tokens.css";
@import "@tyange-labs/design-system/dark-auto.css";
스택별 자세한 적용법은 docs/adoption.md, 토큰 이름과 용도는 docs/tokens.md,
설계 근거는 docs/decisions.md를 참고한다.
미리보기
bun run preview # preview/index.html을 로컬 서버로 띄움
전체 색상/타이포/간격/라디우스/그림자 토큰과 라이트·다크 토글을 한 화면에서 확인한다. 색을 바꿀 때 이 페이지가 1차 판정 지점이다.
검증
bun run contrast
시맨틱 fg/bg 조합의 WCAG 대비를 라이트·다크 양쪽에서 검사한다. 색을 바꾸면
반드시 통과시키고 나서 css/tokens.css·css/dark.css·css/dark-auto.css에도
같은 값을 반영한다(지금은 scripts/contrast.ts가 진실원천, CSS는 수동 동기화).
저장소 구조
css/ 배포되는 CSS (tokens/dark/dark-auto/theme/base/index)
docs/ 토큰 계약, 스택별 적용 가이드, 설계 결정
preview/ 전 토큰 렌더링 페이지 (오라클)
scripts/ contrast.ts (WCAG 대비 게이트)