feat(blog): 디자인 토큰 + 브랜드 액센트(인디고) 도입 (#94)#117
Merged
Conversation
- global.css: 의미 기반 색 토큰 단일 출처(:root) — --color-brand(#6366f1), --color-ink(#0a0a0a) (Turbopack+v4에서 @theme가 유틸리티를 생성하지 않아, 코드베이스가 이미 쓰는 arbitrary value 방식 bg-[var(--color-*)]으로 통일) - 검정 계열 통일: 헤더·모바일 사이드바·드롭다운·검색 뱃지·skip 링크의 bg-black/gray-900/gray-950 → bg-[var(--color-ink)] - 액센트 적용(절제): 활성 시리즈 필터 칩·현재 시리즈 강조 → bg-[var(--color-brand)], copy/share 포커스 링 → ring-[var(--color-brand)] Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Owner
Author
🔍 코드 리뷰 (self-review)토큰 적용·검정 통일·액센트 모두 동작하고(빌드 CSS·스크린샷·E2E 확인) 회귀가 없습니다. 점검 결과입니다. 1. (낮음/actionable) 검정 통일 누락 — 검색 스크림
2. (수용)
|
- search-modal 오버레이 bg-black/50 → bg-[var(--color-ink)]/50 (v4가 arbitrary value + 투명도 모디파이어를 color-mix로 정상 생성함을 빌드로 확인) - 이로써 raw 검정(bg-black/gray-900/gray-950) 잔존 0 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Owner
Author
✅ 리뷰 반영 완료 (
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
색·검정 계열이 컴포넌트마다 하드코딩돼 일관성이 깨지고 액센트가 없던 문제(#94)를 해결합니다.
변경 사항
토큰 단일 출처
global.css :root에 시맨틱 토큰 정의:--color-brand(인디고#6366f1),--color-ink(#0a0a0a)bg-[var(--color-brand)],bg-[var(--color-ink)],ring-[var(--color-brand)]로 참조검정 계열 통일 (→
ink)혼용되던
bg-black/bg-gray-900/bg-gray-950를 단일 토큰으로:액센트 적용 (절제 있게 — 활성/포커스만)
구현 노트 — 왜
@theme가 아니라:root+ arbitrary value인가이슈는 Tailwind v4
@theme를 제안했으나, 이 프로젝트의 Turbopack + v4 빌드에서@theme가 유틸리티/변수를 전혀 생성하지 않음을 빌드 산출 CSS로 확인했습니다(기본--color-gray-*는 나오지만 커스텀 토큰은 누락). 그래서 항상 동작하는:rootCSS 변수 + arbitrary value(bg-[var(--…)])로 구현했습니다 — 이 방식은 코드베이스가 이미text-[16px]등으로 광범위하게 쓰는 패턴입니다. 효과(단일 출처·시맨틱 네이밍·액센트)는 동일합니다.검증
--color-brand:#6366f1정의 +var(--color-brand)/var(--color-ink)참조 유틸리티 생성 확인CI=true프로덕션 빌드) 통과,lint0 /tscclean범위 외(후속)
text-gray-*/border-gray-*의 전면 시맨틱 치환은 시각 회귀 위험이 커 이번 PR에서 제외(토큰 레이어가 생겼으니 점진 적용 가능).🤖 Generated with Claude Code