feat(bezier-tokens): update alpha color token values #2590
Conversation
|
Chromatic Report🚀 Congratulations! Your build was successful! |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## alpha #2590 +/- ##
=======================================
Coverage 81.91% 81.91%
=======================================
Files 145 145
Lines 2897 2897
Branches 925 925
=======================================
Hits 2373 2373
- Misses 494 520 +26
+ Partials 30 4 -26 ☔ View full report in Codecov by Sentry. |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
Walkthrough여러 색상 토큰의 값과 참조가 변경되었습니다. dark-theme과 light-theme의 "dim" 구조가 단순화되었고, dark-theme의 foreground와 background 일부 색상 참조가 수정되었습니다. global 색상 파일에서는 다양한 색상 그룹의 색상 값(HEX 코드)이 업데이트되었습니다. Changes
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 14950 @sungik-choi 네, PR #2590을 리뷰해드리겠습니다. 🔍 전체적인 변경사항 분석이 PR은 bezier-tokens 패키지의 alpha 컬러 토큰 값들을 업데이트하는 작업입니다. 세 개의 JSON 파일에서 광범위한 컬러 값 변경이 이루어졌네요. ✅ 긍정적인 부분
// Before
"dim": {
"black": {
"light": { ... },
"normal": { ... }
}
}
// After
"dim": {
"light": { ... },
"normal": { ... }
}
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/bezier-tokens/src/alpha/global/color.json (1)
1-1025: 전역 토큰 대량 갱신 후 참조 누락 가능성functional-theme 파일들이 새 HEX 값에만 의존하지 않고
{olive.200}등 전역 키를 직접 참조합니다.
키 삭제·이동은 없었지만 오타나 대소문자 불일치는 정적 분석으로 잡히지 않습니다. 린트·빌드 단계에서 참조 무결성 검사를 추가하는 것을 권장합니다.packages/bezier-tokens/src/alpha/functional/dark-theme/color.json (1)
861-868: dim 평탄화가 라이트·다크 테마 모두 동일하게 적용됨구조 일관성이 확보되어 👍. 다만
bg.absolute.black.*계층에 의존하므로 해당 토큰이 변동될 때 dim 밝기도 함께 변한다는 점을 문서화해두면 좋겠습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/bezier-tokens/src/alpha/functional/dark-theme/color.json(13 hunks)packages/bezier-tokens/src/alpha/functional/light-theme/color.json(1 hunks)packages/bezier-tokens/src/alpha/global/color.json(15 hunks)
🔇 Additional comments (3)
packages/bezier-tokens/src/alpha/global/color.json (1)
4-58: HEX 유효성 검사 완료: 문제 없음, 디자인 일관성 추가 검증 필요
- 모든 color.json의 HEX 길이는 7자(불투명) 또는 9자(alpha)로 올바르게 정의되어 있습니다.
- 변경된 100→600 단계 및 각 alpha 값에 대해 ΔE, WCAG 대비율 등 디자인 시스템 기준을 충족하는지 확인해야 합니다.
- 특히 400·300 계열 간 대비가 줄어들면 functional-theme의 light/dark 토큰에 영향이 큽니다.
- 자동화된 ΔE 계산 또는 WCAG 대비율 검증 파이프라인이 없다면, 배포 전 디자인 담당자와 함께 시각적 일관성을 반드시 점검해 주세요.
packages/bezier-tokens/src/alpha/functional/light-theme/color.json (1)
860-868: dim 계층 평탄화 👍, 의존 경로 재검증 권장
dim.black.*중첩을 제거하고 직접light·normal키만 남긴 것은 구조 단순화 측면에서 좋습니다.
다만 기존 코드(예: SCSS mixin, Storybook 스냅샷)에서dim.black.light를 참조하던 부분이 있다면 런타임 오류가 발생할 수 있으니 검색으로 한 번 더 확인해 주세요.packages/bezier-tokens/src/alpha/functional/dark-theme/color.json (1)
45-61: dark 변형이 300 → 200 레벨로 올라감
fg.*.<color>.dark가 모두300에서200으로 변경되었습니다.
시각적으로 한 단계 밝아지는 효과가 있으므로 다크 모드에서 충분한 대비(특히 배경grey.900사용 시)를 확보하는지 QA가 필요합니다.
| "value": "{white.60}", | ||
| "type": "color" | ||
| }, |
There was a problem hiding this comment.
bg.black.darkest 가 흑색 → 백색 계열로 변경됨
{black.60} → {white.60} 변경은 의미상 “어두운 배경” 토큰이 중간 투명도의 흰색으로 바뀐 것입니다.
특정 컴포넌트가 이 토큰을 반전 용도로 사용한다면 의도치 않게 밝아질 수 있으니 디자인 팀과 취지 재확인 부탁드립니다.
🤖 Prompt for AI Agents
In packages/bezier-tokens/src/alpha/functional/dark-theme/color.json around
lines 279 to 281, the color value for bg.black.darkest was changed from
"{black.60}" to "{white.60}", which alters the token from a dark black shade to
a lighter white shade. Review this change with the design team to confirm the
intent, especially if any components rely on this token for inversion effects,
and revert or adjust the color value accordingly to maintain the intended dark
background appearance.
Self Checklist
Related Issue
Summary
TODO: 색상값 업데이트 마무리 된 이후 더블체크 & 업데이트
Details
Breaking change? (Yes/No)
References
Summary by CodeRabbit