Skip to content

Adjust CSS specificity to ensure Japanese font is properly applied - specify font family explicitly#2778

Merged
timok1m merged 2 commits intochannel-io:mainfrom
timok1m:fix/webtech-4524-2
Jan 12, 2026
Merged

Adjust CSS specificity to ensure Japanese font is properly applied - specify font family explicitly#2778
timok1m merged 2 commits intochannel-io:mainfrom
timok1m:fix/webtech-4524-2

Conversation

@timok1m
Copy link
Contributor

@timok1m timok1m commented Jan 12, 2026

Self Checklist

  • I wrote a PR title in English and added an appropriate label to the PR.
  • I wrote the commit message in English and to follow the Conventional Commits specification.
  • I added the changeset about the changes that needed to be released. (or didn't have to)
  • I wrote or updated documentation related to the changes. (or didn't have to)
  • 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

Summary

css 적용 우선순위로 인해 일본어일 때 타이포그래피 폰트의 오버라이드가 적용되지 않는 문제를 재수정합니다.

Details

  • 현재 css 레이어 우선순위는 tokens > base > components 로 설정되어 있습니다.
  • 토큰을 오버라이드 했던 기존 코드는 base 레이어에서 정의되어 있습니다.
  • 토큰의 우선순위 상 tokens가 base보다 우선하기 때문에 해당 코드는 동작하지 않았습니다.
  • 최초 코드와 같이 font-family를 명시적으로 설정하는 방향으로 문제를 해결합니다.

Breaking change? (Yes/No)

No

References

Summary by CodeRabbit

릴리스 노트

  • 버그 수정
    • Japanese 폰트가 제대로 적용되도록 CSS 우선순위를 조정했습니다.
    • 기본 폰트 가족 설정을 개선하여 다언어 폰트 처리를 최적화했습니다.

✏️ Tip: You can customize this high-level summary in your review settings.

@changeset-bot
Copy link

changeset-bot bot commented Jan 12, 2026

🦋 Changeset detected

Latest commit: 19e37d4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@channel.io/bezier-react Patch
bezier-figma-plugin Patch

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

@channeltalk
Copy link

channeltalk bot commented Jan 12, 2026

@coderabbitai
Copy link

coderabbitai bot commented Jan 12, 2026

Walkthrough

@channel.io/bezier-react 패키지에 대한 패치 릴리스 변경사항입니다. 기본 폰트 패밀리를 한국어 산세리프에서 언어별 산세리프로 변경하고, 일본어 폰트 CSS 우선순위를 조정하여 명시적으로 적용되도록 통합했습니다.

Changes

Cohort / File(s) 설명
Changeset Documentation
\.changeset/yellow-lizards-clean\.md
패치 릴리스 변경사항 문서화: CSS 우선순위 조정으로 일본어 폰트 명시적 지정
Font Family Configuration
packages/bezier-react/src/styles/_base\.scss
기본 폰트를 var(--typography-font-family-sans-kr)로 변경, :lang(ja) 통합 규칙 도입으로 일본어 폰트 처리 개선, 코드 블록 폰트를 var(--typography-font-family-monospace)로 업데이트

Possibly related PRs

Suggested labels

bug

Suggested reviewers

  • wes5510

Poem

🐰 폰트의 여행을 다시 그으며,
한글과 일본어가 춤을 추고,
CSS의 마법으로 우선순위를 맞춰,
각 언어가 제 목소리를 찾았어요.
산세리프와 모노스페이스가 손을 잡고,
더 깔끔한 화면이 피어났답니다! ✨


🎯 2 (Simple) | ⏱️ ~8분

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목은 CSS 특이성 조정과 일본어 폰트 명시적 지정에 관한 변경사항의 핵심을 명확하게 요약하고 있습니다.
Description check ✅ Passed PR 설명은 템플릿의 대부분 필수 섹션을 포함하고 있으며, 문제 상황과 해결 방식을 상세히 설명하고 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2351fcf and 19e37d4.

📒 Files selected for processing (2)
  • .changeset/yellow-lizards-clean.md
  • packages/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). (2)
  • GitHub Check: CodeQL-Build
  • GitHub Check: Chromatic
🔇 Additional comments (4)
.changeset/yellow-lizards-clean.md (1)

1-5: LGTM!

changeset 형식이 올바르고, 패치 릴리스로 적절하게 분류되었습니다. 변경 사항 설명이 PR 목적과 일치합니다.

packages/bezier-react/src/styles/_base.scss (3)

18-20: CSS 특이성 해결 방법이 올바릅니다.

:lang(ja) 셀렉터는 :where(:root, :host)보다 높은 특이성을 가지므로 (0,1,0 vs 0,0,0), 일본어 콘텐츠에 올바르게 적용됩니다. 기본 글꼴이 이미 한국어(typography-font-family-sans-kr)로 설정되어 있으므로, 일본어만 명시적으로 오버라이드하면 충분합니다.


22-24: 네이밍 일관성 개선으로 좋은 변경입니다.

--typography-font-family-monospace 변수로 변경하여 --typography-font-family-sans-kr, --typography-font-family-sans-jp와 동일한 네이밍 패턴으로 통일되었습니다. 이 변수는 @channel.io/bezier-tokens 패키지에서 제공되며, 기존 --typography-code-font-family 변수는 제거되었습니다.


1-6: 폰트 변수가 올바르게 정의되어 있습니다.

:where() 셀렉터는 특이성(specificity)이 0이므로, :lang(ja) 셀렉터가 이를 쉽게 오버라이드할 수 있습니다. --typography-font-family-sans-kr 변수는 bezier-tokenspackages/bezier-tokens/src/beta/global/typography.jsontypography.font-family.sans.kr 경로로 정의되어 있으며, Inter, NotoSansKR, Noto Sans KR 등의 폰트 스택을 포함합니다. 기본 폰트를 명시적으로 한국어 sans-serif로 설정한 것이 의도에 맞습니다.


Comment @coderabbitai help to get the list of available commands and usage tips.

@timok1m timok1m changed the title Fix/webtech 4524 2 Adjust CSS specificity to ensure Japanese font is properly applied - specify font family explicitly Jan 12, 2026
@timok1m timok1m requested a review from wes5510 January 12, 2026 06:15
@codecov
Copy link

codecov bot commented Jan 12, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.80%. Comparing base (2351fcf) to head (19e37d4).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #2778   +/-   ##
=======================================
  Coverage   81.80%   81.80%           
=======================================
  Files         149      149           
  Lines        2957     2957           
  Branches      934      934           
=======================================
  Hits         2419     2419           
- Misses        504      534   +30     
+ Partials       34        4   -30     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
Copy link
Contributor

Chromatic Report

🚀 Congratulations! Your build was successful!

@timok1m timok1m merged commit 0c4c574 into channel-io:main Jan 12, 2026
8 of 9 checks passed
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.2

### Patch Changes

- Adjust CSS specificity to ensure Japanese font is properly applied -
specify font family explicitly
([#2778](#2778)) by
@timok1m

## bezier-figma-plugin@0.7.21

### Patch Changes

-   Updated dependencies
    -   @channel.io/bezier-react@3.6.2


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **버그 수정**
  * 일본어 글꼴 렌더링을 위해 CSS 특이성을 명시적으로 설정하여 글꼴이 올바르게 표시되도록 개선했습니다.

* **패키지 업데이트**
  * Bezier React 3.6.2 릴리스
  * Bezier Figma Plugin 0.7.21 릴리스

<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>
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 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments