style(blog): 인디고 액센트를 테마 반전 무채색으로 회귀#135
Merged
Merged
Conversation
- 활성 뱃지·시리즈 칩·프로필 카드 바의 인디고 채움(bg-brand/brand-strong)을 bg-gray-900 text-surface로 교체 - 라이트는 근검정+흰 텍스트, 다크는 근백색+어두운 텍스트로 반전돼 검정 헤더와 한 시스템으로 통일 - 포커스 링(ring-brand)은 키보드 a11y 지표라 인디고 유지
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
- bg-brand-strong 소비처가 이번 PR에서 사라져 완전 미사용이 된 인디고 잔재 정리 - 포커스 링용 --color-brand만 실사용이므로 스케일 주석을 단일 토큰 근거로 정정 - 렌더/접근성 영향 없음(정의부만 삭제, 참조처 없음)
Malloc72P
added a commit
that referenced
this pull request
Jul 10, 2026
- dark:hover:ring-brand(인디고) → dark:hover:ring-white/25 - 무채색 회귀 결정(#135)에 맞춰 태그 hover도 hue 제거, 어포던스는 밝기로 유지
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에서 인디고 브랜드 액센트가 도입됐다. 상단 헤더는 라이트/다크 모두 검정(
bg-ink)인데, 인디고 액센트가 헤더와 접점 없이 본문에만 소량 떠 있어 '단절'돼 보인다는 지적이 있었다. 디자이너 3인 패널 검토 결과 작성자는 무채색 회귀(B안) 로 결정했다. 눈에 보이는 인디고 채움을 걷어내고, 상태 강조를 색(hue) 대신 '테마별로 반전되는 명도 대비'로 표현해 검정 헤더와 한 시스템으로 통일한다.핵심 원리: 테마 반전 단색
프로젝트 토큰은 다크에서 회색이 반전된다(
global.css). 라이트gray-900=#101828(근검정)·surface=#fff, 다크gray-900=#f2f3f5(근백색)·surface=#2b2d31. 따라서bg-gray-900 text-surface는 라이트에선 '근검정 채움+흰 텍스트', 다크에선 '근백색 채움+어두운 텍스트'가 되어 두 테마 모두에서 활성 상태가 또렷하다.변경 (3파일)
badge.tsx— primary 변형:bg-brand-strong text-white→bg-gray-900 text-surface(활성 필터 '최신글'·시리즈 primary 뱃지)introduce-card.tsx— 프로필 카드 좌측 바:bg-brand→bg-gray-900(헤더 잉크와 통일)series-detail.tsx— 활성 시리즈 칩:bg-brand-strong text-white→bg-gray-900 text-surface각 변경 지점의 한국어 의도 주석도 '무채색 강조(테마 반전 대비)'로 갱신했다.
유지
focus-visible의ring-brand(copy-button, share-buttons)는 키보드 포커스 전용 접근성 지표라 인디고 유지.--color-brand/--color-brand-strong토큰도 이 용도로 남겨둔다.검증
pnpm run build성공 /pnpm run lint(--max-warnings 0) 통과 /pnpm test115개 통과.