Design System

세모(Delta-front)의 디자인 시스템은 Vanilla Extract 기반 토큰 → 유틸 클래스(color/typo) → 컴포넌트 순서로 확장됩니다.
목적은 “픽셀 단위 일관성”을 강제하고, 스타일을 재사용/유지보수 가능한 구조로 만드는 것입니다.

🧭 Design System 구조

1) Design Tokens (Single Source of Truth)

• shared/styles/theme.css.ts
• 색상/타이포/라운드/섀도우/스페이싱을 토큰으로 정의
• createThemeContract로 타입 안정성을 확보하고, createTheme로 실제 값을 주입합니다.

2) Token-based Utility Classes

• shared/styles/color.css.ts → color, bgColor, *Gradient
• shared/styles/typography.css.ts → typo
• 컴포넌트는 “원시 hex/px” 대신 유틸 클래스를 조합하는 방식으로 작성합니다.

3) Global Layout / App Shell

• shared/styles/css.ts (또는 global.css 계열)
• html/body 기본 설정, 앱 컨테이너(rootStyle) 폭/높이/배경/그림자 등 앱 전체 레이아웃을 통제합니다.

---

🎛 Theme & Tokens (theme.css.ts)

✅ 왜 createThemeContract를 쓰나요?

• vars.color.main[500]처럼 토큰 경로가 고정
• 잘못된 토큰 접근을 컴파일 타임에 잡을 수 있어요.

📌 토큰 범위

현재 contract는 아래 그룹을 포함합니다.

• Color
  • main(50~900), grayscale(0~1000), overDim(40)
  • success/warning/error
  • login(kakao/bgGradient)
  • etc(crown/myGradient/wrongCardGradient)
• Space: 0 / 2 / 3 / 4 / 6
• Radius: sm/md/lg + r4~r64 + full
• Shadow: e100~e500
• Typography: h1/h2/h3/subtitle/body/button/caption 계열

원칙: 새 색상/크기 값이 필요하면 “컴포넌트에 바로 쓰지 말고” theme 토큰에 먼저 추가합니다.

---

🎨 Color 시스템 (color.css.ts)

color.css.ts는 theme 토큰을 “실제로 쓸 수 있는 클래스”로 변환합니다.

✅ 텍스트 컬러

• color["main-500"]
• color["grayscale-700"]
• color["error-500"] 등

✅ 배경 컬러

• bgColor["main-50"]
• bgColor["grayscale-0"]
• bgColor["overDim-40"] 등

✅ 그라데이션 (상수)

• myGradient["my-bg"]
• bgGradient["login-bg"]
• wrongCardGradient["wrong-card-gradient"]

원칙: 그라데이션은 클래스(style)로 만들기보다, vars.color... 값을 그대로 export해서 컴포넌트에서 background: myGradient["my-bg"]처럼 사용하는 패턴을 유지합니다.

---

✍️ Typography 시스템 (typography.css.ts)

typo는 디자인 시스템의 텍스트 규격을 “클래스”로 제공합니다.

✅ 사용 예시

• 헤딩: typo.h1, typo.h2, typo.h3
• 본문: typo.body2.medium, typo.body3.semibold
• 버튼: typo.button1, typo.button2
• 캡션: typo.caption.regular, typo.captionXs

원칙: 컴포넌트에서 fontSize: "14px" 같은 직접 정의는 금지.
반드시 typo.*를 사용합니다.

---

🧩 Global Layout (css.ts)

전역 레이아웃은 “웹앱 컨테이너”를 고정 폭으로 가운데 배치하는 구조입니다.

✅ globalStyle

• html, body: height 100%, margin 0, 폰트 패밀리 통일
• body: 앱 외부 배경은 #eeeeee

✅ rootStyle

• 폭: maxWidth: 430px, minWidth: 370px, width: 100%
• 높이: minHeight: 100dvh
• 배경: #ffffff
• 데스크탑에서만 그림자: (min-width: 431px)에 boxShadow

참고: 모바일/웹뷰 환경에 따라 100dvh는 “툴바 변화”로 레이아웃 흔들림이 생길 수 있어
케이스에 따라 svh 기반으로 조정합니다(이미 경험한 것처럼).

---

✅ 컴포넌트 스타일 작성 규칙 (요약)

• 원시 값 금지: hex/px를 컴포넌트에서 바로 쓰지 않기
• 토큰 우선: 색/타이포/라운드/섀도우는 vars 기반
• 유틸 조합 우선: color, bgColor, typo 조합
• 상태 표현은 recipe/variant: hover/active/disabled/size 등
• 중복 제거: 같은 패턴이 3번 이상 반복되면 shared 유틸/상수로 승격

---

📌 자주 쓰는 패턴 예시

텍스트 + 컬러 조합

export const title = style([typo.h3, color["grayscale-900"]]);

카드 배경 + 라운드 + 섀도우

export const card = style([
  bgColor["grayscale-0"],
  { borderRadius: vars.radius.r16, boxShadow: vars.shadow.e300 },
]);

---

🔗 관련 문서

• 🧷 Coding Convention
• 🎨 Tech Stack > Vanila Extract를 사용하는 이유