dpdpdndn 블로그

FE-02-theme-tokens

NEW2 min read

[FE-02] 상태·타입 배지용 시맨틱 토큰 추가 (success/warning)

작업 내용 (설계 의도)

변경 사항

플래그 상태(ACTIVE/ARCHIVED)·GLOBAL_TOGGLE ON·검증 경고 표현에 필요한 시맨틱 토큰 2종을 추가한다. 기존 토큰(globals.css)에는 destructive만 있고 success/warning이 없어 하드코딩 색 없이 상태를 색 코딩할 수 없다. 근거 설계: ../design-fe-web.md “테마 토큰 정의 표”. 독립 병목(전용 파일)이라 FE-01과 병렬 wave 1.

  • web/app/globals.css: :root와 .dark 각각에 --success/--success-foreground, --warning/--warning-foreground 추가.
    • 라이트: success 142 71% 45%/0 0% 100%, warning 38 92% 50%/0 0% 100%
    • 다크: success 142 64% 42%/0 0% 100%, warning 38 84% 46%/0 0% 100%
  • web/tailwind.config.ts: theme.extend.colors에 success/warning(DEFAULT+foreground) 매핑을 hsl(var(--...))로 추가.
  • 라이트·다크 두 모드 값을 모두 정의한다(no-single-mode). 배지는 bg-success/15 text-success 패턴으로 대비 유지.

롤백

토큰 추가만이라 역방향은 추가 라인 제거. 기존 토큰·컴포넌트 무영향.

의존

  • 없음

다이어그램

클래스 의존

flowchart LR
    Css["globals.css :root/.dark"] --> Tw["tailwind.config.ts colors"]
    Tw --> Badge["StatusBadge/TypeBadge FE-05"]
    Tw --> Form["StrategyForm 경고 FE-06"]

테스트 케이스

  • 라이트 모드에서 bg-success 클래스가 정의된 초록 계열 색으로 렌더된다(토큰 존재 확인용 최소 렌더 테스트 또는 config 단언)
  • .dark 클래스 하에서 --success 값이 다크 값으로 치환된다
  • --warning/--warning-foreground가 라이트·다크 모두에 정의돼 있다
  • 기존 토큰(background/primary/destructive)이 변경되지 않았다

그래프 뷰