시작하기
COLDSURF 의 색 · 타이포 · 컴포넌트를 import 두 줄로 쓰는 디자인 시스템.
@coldsurfers/surf-ui 은 토큰 값 · 컴파일된 CSS · React 컴포넌트를 한 패키지에 담습니다.
설치하고 import 두 줄이면 COLDSURF 의 색 · 타이포 · 컴포넌트가 그대로 붙습니다.
범용 UI 킷은 아닙니다. 오픈소스로 공개하지만 COLDSURF 서비스에 맞춘 기본값(accent · paper · cover 톤)이 처음부터 들어 있습니다 — 그 결이 맞으면 그대로 쓰고, 아니면 토큰만 갈아끼웁니다. 목표가 "누구나 쓸 수 있게 범용화" 가 아니라 "재활용 가능한 것을 잘 옮기는 것" 이라서입니다.
설치
@coldsurfers 스코프는 GitHub Packages 에 있습니다. .npmrc 에 레지스트리를 적습니다.
@coldsurfers:registry=https://npm.pkg.github.compnpm add @coldsurfers/surf-ui쓰기
CSS 배선은 없습니다. 진입점이 styles.css 를 직접 물고 오고, .css.ts 는 이 레포에서
컴파일해 내보내므로 소비자 쪽에 vanilla-extract 번들러 플러그인도 필요 없습니다.
import { vars } from '@coldsurfers/surf-ui'
import { spacing } from '@coldsurfers/surf-ui/tokens'
import { Button } from '@coldsurfers/surf-ui/primitives'styles.css 는 한 장입니다(cssCodeSplit: false). Button 하나를 쓰는 소비자도 DS CSS 전량을
뭅니다 — 배선 없이 끝나는 대신 치르는 값입니다.
진입점
exports 맵에 있는 경로가 곧 API 입니다. 여기 없는 경로는 열리지 않습니다.
| 진입점 | 무엇 |
|---|---|
@coldsurfers/surf-ui | vars 계약 · @layer 이름과 순서 · media |
.../tokens | 토큰 값. React 도 CSS 도 물지 않는 순수 데이터 |
.../primitives | React 컴포넌트 — Button · Chip · Field · Modal · … |
.../cards | 카드 조립체 — ConcertCard · ArticleCard · LeadFeature |
.../layout | Page · Container · PageBanner |
.../sprinkles | 원자 유틸. JS 38 kB 라 배럴에서 갈라 두었다 |
.../style-utils | .css.ts 저작 헬퍼 |
.../motion | 모션 유틸 클래스 |
.../native · .../tokens/native | React Native 표면 |
.../styles.css | 컴파일된 CSS 한 장 |
미리보기는 실물이다
문서의 미리보기는 실제로 발행되는 패키지를 import 해서 그립니다. 그림도, 복사한 코드도
아닙니다. exports 맵에 없는 경로는 이 사이트도 열지 못하므로, 사이트가 빌드된다는 것 자체가
계약이 살아 있다는 증거입니다.