Adjust CSS specificity to ensure Japanese font is properly applied#2776
Merged
timok1m merged 2 commits intochannel-io:mainfrom Jan 12, 2026
Merged
Adjust CSS specificity to ensure Japanese font is properly applied#2776timok1m merged 2 commits intochannel-io:mainfrom
timok1m merged 2 commits intochannel-io:mainfrom
Conversation
🦋 Changeset detectedLatest commit: ed9e508 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
개요
변경 사항
예상 코드 리뷰 난이도🎯 2 (Simple) | ⏱️ ~12 분 시
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2776 +/- ##
=======================================
Coverage 81.80% 81.80%
=======================================
Files 149 149
Lines 2957 2957
Branches 928 934 +6
=======================================
Hits 2419 2419
- Misses 504 534 +30
+ Partials 34 4 -30 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
Chromatic Report🚀 Congratulations! Your build was successful! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/bezier-react/src/styles/_base.scss (1)
18-23: CSS 명시도 수정이 적절합니다.테마 속성 셀렉터와
:lang(ja)를 결합하여 명시도를 (0,2,0)으로 높이는 방식은 명시도 충돌 문제를 해결하는 올바른 접근입니다. 다만 이 변경으로 인해data-bezier-theme속성 없이는 JP 폰트 오버라이드가 적용되지 않습니다. 표준 사용 패턴인AppProvider사용 시에는 항상 속성이 설정되므로 문제없지만, AppProvider 없이 컴포넌트를 사용하는 엣지 케이스가 있는지 검토하세요.선택 사항:
:is()셀렉터로 중복을 줄일 수 있습니다:-[data-bezier-theme='dark']:lang(ja), -[data-bezier-theme='light']:lang(ja) { +:is([data-bezier-theme='dark'], [data-bezier-theme='light']):lang(ja) { --typography-heading-font-family: var(--typography-font-family-sans-jp); --typography-text-font-family: var(--typography-font-family-sans-jp); --typography-display-font-family: var(--typography-font-family-sans-jp); }명시도는 동일하게 유지됩니다.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.changeset/polite-pants-pump.mdpackages/bezier-react/src/styles/_base.scss
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Chromatic
🔇 Additional comments (1)
.changeset/polite-pants-pump.md (1)
1-5: LGTM!버그 수정에 대한 patch 버전 범프가 적절하며, 변경 사항 설명이 명확합니다.
wes5510
approved these changes
Jan 12, 2026
timok1m
pushed a commit
that referenced
this pull request
Jan 12, 2026
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @channel.io/bezier-react@3.6.1 ### Patch Changes - Adjust CSS specificity to ensure Japanese font is properly applied. ([#2776](#2776)) by @timok1m ## bezier-figma-plugin@0.7.20 ### Patch Changes - Updated dependencies - @channel.io/bezier-react@3.6.1 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## 릴리스 노트 * **Chores** * bezier-react가 3.6.1로 업데이트됨 * bezier-figma-plugin이 0.7.20으로 업데이트됨 * 최신 의존성이 반영됨 <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
6 tasks
timok1m
added a commit
that referenced
this pull request
Jan 12, 2026
…specify font family explicitly (#2778) <!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [ ] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue - #2776 <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> css 적용 우선순위로 인해 일본어일 때 타이포그래피 폰트의 오버라이드가 적용되지 않는 문제를 재수정합니다. ## Details <!-- Please elaborate description of the changes --> - 현재 css 레이어 우선순위는 tokens > base > components 로 설정되어 있습니다. - 토큰을 오버라이드 했던 기존 코드는 base 레이어에서 정의되어 있습니다. - 토큰의 우선순위 상 tokens가 base보다 우선하기 때문에 해당 코드는 동작하지 않았습니다. - [최초 코드](https://github.com/channel-io/bezier-react/pull/2764/changes#diff-d5343edd2cbd4060cb12d851b2ce7b8776194248a36fa05f6a4bf7c9dff9cfdfL19-R22)와 같이 font-family를 명시적으로 설정하는 방향으로 문제를 해결합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## 릴리스 노트 * **버그 수정** * Japanese 폰트가 제대로 적용되도록 CSS 우선순위를 조정했습니다. * 기본 폰트 가족 설정을 개선하여 다언어 폰트 처리를 최적화했습니다. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Merged
6 tasks
timok1m
added a commit
that referenced
this pull request
Jan 12, 2026
…revert to 3.6.1 approach (#2780) <!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [ ] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> - #2778 - #2776 <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> css 적용 우선순위로 인해 일본어일 때 타이포그래피 폰트의 오버라이드가 적용되지 않는 문제를 재수정하여 최종 적용합니다. ## Details <!-- Please elaborate description of the changes --> - #2776 에서 적용했던 방식이 유효한 방법이었음을 확인했습니다. - 해당 방식이 동작하지 않았던 것은 베지어 패키지 외부(베지어를 사용하던 어플리케이션)의 문제였음을 확인했습니다. - 처음 적용했던 방식으로 다시 회귀하고, css 선택자를 보다 간결하게 유지하여 마무리합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## 버그 수정 * 일본어 폰트 표시를 위한 CSS 특이성 조정 * 폰트 변수 체계 개선 (제목, 본문, 디스플레이 폰트 분리) * 코드 블록 폰트 변수 최적화 <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
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
2 participants
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.
Self Checklist
Related Issue
Summary
css 적용 우선순위로 인해 일본어일 때 타이포그래피 폰트의 오버라이드가 적용되지 않는 문제를 수정합니다.
Details
typography-*font-family를 사용할 경우 일본어 폰트가 적용될 수 있습니다.CSS 특이성(Specificity)
.class: 0,0,1,0[data-theme]: 0,0,1,0:hover, :lang(ja): 0,0,1,0요소 선택자 (div, p): 0,0,0,1Breaking change? (Yes/No)
No
References