style(blog): 다크 태그 뱃지 인셋 링 보강 + hover 인디고 어포던스#134
Merged
Conversation
- 다크에서만 secondary 뱃지에 얇은 인셋 링(white/10) 추가 — 배경과 명도차가 작아 묻히던 칩을 살짝 띄움 - hover 시 링을 인디고(brand #818cf8)로 전환해 '눌러지는 링크'임을 알림 - box-shadow 기반 링이라 레이아웃 영향 0, 라이트 모드/primary 뱃지는 무변경
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
- dark:hover:ring-brand(인디고) → dark:hover:ring-white/25 - 무채색 회귀 결정(#135)에 맞춰 태그 hover도 hue 제거, 어포던스는 밝기로 유지
…-affordance # Conflicts: # apps/blog/src/components/badge.tsx
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.
배경
디자이너·개발자·일반사용자 3인 페르소나 스크린샷 리뷰 결과, 태그 뱃지 색 자체(라이트=중립 회색, 다크=디스코드풍 블루그레이
#383b41)는 테마와 어울린다고 3인이 합의(각 4/5)했다. 다만 다크 모드에서 태그 칩이 배경(#2b2d31)/카드(#313338)와 명도차가 작아 묻히고, 링크(클릭 가능)로 보이지 않는다는 것이 3인 공통 최우선 지적이었다. 이 두 가지만 최소 변경으로 보강한다.변경 (
Badge의 secondary 변형 한정)apps/blog/src/components/badge.tsxdark:ring-1 dark:ring-inset dark:ring-white/10. 배경보다 살짝 밝은 하이라이트로 칩이 배경에서 떠 보인다.brand=#818cf8)로 전환:dark:hover:ring-brand. 눌러지는 링크임을 알린다. 기존hover:brightness-95 active:brightness-90은 유지.왜
border가 아니라 인셋ring인가ring은 box-shadow 기반이라 레이아웃에 영향이 없다. 실제border를 주면 auto 폭 칩이 좌우/상하 2px씩 커져 라이트 지오메트리가 바뀐다. 인셋 링은 그 부작용 없이 1px 경계 룩을 낸다. (프로젝트가 이미ring-brand를 focus-visible에 사용 중이라 관례에도 부합)불투명도(10%) 근거
ring-white/10(#ffffff1a) 하이라이트를 칩 가장자리(#383b41)에 합성하면 약#4c4f54로, 페이지/카드보다 또렷하게 밝은 1px 헤어라인이 된다. 8~10% 범위에서 '묻힘은 해소되되 과하지 않은' 값으로 10%를 택했다.범위 밖 (건드리지 않음)
:where(.dark, .dark *)로 게이트되어 라이트에는 어떤 색/지오메트리 변화도 없다.검증
pnpm run build성공pnpm run lint통과 (--max-warnings 0)pnpm test(jest) 26 suites / 115 tests 통과dark:ring-inset → --tw-ring-inset:inset,dark:ring-white/10 → --tw-ring-color:#ffffff1a,dark:hover:ring-brand → :hover 시 --tw-ring-color:var(--color-brand)