Adjust CSS specificity to ensure Japanese font is properly applied - revert to 3.6.1 approach by timok1m · Pull Request #2780 · channel-io/bezier-react

timok1m · 2026-01-12T09:16:17Z

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

Adjust CSS specificity to ensure Japanese font is properly applied #2776 에서 적용했던 방식이 유효한 방법이었음을 확인했습니다.
해당 방식이 동작하지 않았던 것은 베지어 패키지 외부(베지어를 사용하던 어플리케이션)의 문제였음을 확인했습니다.
처음 적용했던 방식으로 다시 회귀하고, css 선택자를 보다 간결하게 유지하여 마무리합니다.

Breaking change? (Yes/No)

No

References

Summary by CodeRabbit

버그 수정

일본어 폰트 표시를 위한 CSS 특이성 조정
폰트 변수 체계 개선 (제목, 본문, 디스플레이 폰트 분리)
코드 블록 폰트 변수 최적화

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

… final code

changeset-bot · 2026-01-12T09:16:21Z

🦋 Changeset detected

Latest commit: be4aad2

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 · 2026-01-12T09:16:23Z

https://desk.channel.io/#/channels/1/team_chats/groups/1237/6964bbe6cf5bd5d3f980

coderabbitai · 2026-01-12T09:16:28Z

요약

Walkthrough

@channel.io/bezier-react 패치 버전에서 일본어 폰트 적용을 위한 CSS 스타일시트 수정을 진행합니다. 루트 폰트 및 일본어 언어 블록의 폰트 변수명을 변경하고, 코드 블록 폰트도 새로운 커스텀 프로퍼티로 리매핑합니다.

Changes

코호트 / 파일	변경 사항
스타일시트 수정 `packages/bezier-react/src/styles/_base.scss`	루트 폰트 변수명을 `--typography-font-family-sans-kr`에서 `--typography-text-font-family`로 변경. 일본어 블록에서 직접 폰트 할당 대신 `--typography-heading-font-family`, `--typography-text-font-family`, `--typography-display-font-family` 커스텀 프로퍼티 설정. 코드 폰트를 `--typography-font-family-monospace`에서 `--typography-code-font-family`로 변경
변경로그 추가 `.changeset/salty-ducks-wonder.md`	패치 버전 릴리스를 위한 변경로그 엔트리 추가

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Adjust CSS specificity to ensure Japanese font is properly applied - specify font family explicitly #2778: 동일한 _base.scss 폰트 관련 규칙을 수정하여 일본어 타이포그래피 적용을 보장하는 CSS 우선순위 조정

Suggested reviewers

wes5510

Poem

🐰 폰트의 마법을 정렬하고,
일본어가 제자리 찾아왔다네!
CSS 변수로 춤을 추듯,
타이포그래피가 아름답게 빛난다 ✨

🚥 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 26a6253 and be4aad2.

📒 Files selected for processing (2)

.changeset/salty-ducks-wonder.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: Chromatic
GitHub Check: CodeQL-Build

🔇 Additional comments (4)

.changeset/salty-ducks-wonder.md (1)

1-5: LGTM!

Changeset이 올바르게 작성되었습니다. 일본어 폰트 CSS 특이성 문제 수정에 대한 설명이 명확하고, 3.6.1 접근 방식으로의 복귀와 문제가 bezier 패키지 외부에 있었다는 맥락이 잘 문서화되어 있습니다.

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

18-22: LGTM!

:lang(ja) 블록에서 CSS 커스텀 프로퍼티를 재정의하는 방식으로 변경된 것이 적절합니다. font-family를 직접 오버라이드하는 대신 세 가지 typography 변수(heading, text, display)를 재정의하여 일본어 콘텐츠에서 일관된 폰트가 적용됩니다. 이 접근 방식은 CSS 특이성 충돌을 효과적으로 해결합니다.

1-6: CSS 커스텀 프로퍼티를 활용한 폰트 오버라이드 접근 방식이 적절합니다.

--typography-text-font-family로 변경하여 :lang(ja) 블록에서 커스텀 프로퍼티 재정의를 통해 일본어 폰트를 적용할 수 있게 되었습니다. 이 변수는 bezier-tokens에서 기본값이 제공되며, CSS 특이성 문제를 우회하는 좋은 방법입니다.

24-26: --typography-code-font-family 변수가 bezier-tokens 패키지에서 제공되는지 확인 필요.

네이밍은 --typography-text-font-family, --typography-heading-font-family, --typography-display-font-family와 일관된 의미론적 패턴을 따르고 있습니다. 다만 이 변수는 로컬에 정의되어 있지 않으며, @channel.io/bezier-tokens v0.4.0 패키지에서 제공되어야 합니다. 해당 패키지의 v0.4.0에 --typography-code-font-family CSS 커스텀 프로퍼티가 존재하고 기본값이 정의되어 있는지 확인해 주세요.

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

codecov · 2026-01-12T09:18:07Z

Codecov Report

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

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2780   +/-   ##
=======================================
  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.
📢 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 · 2026-01-12T09:18:19Z

Chromatic Report

🚀 Congratulations! Your build was successful!

@timok1m

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.3 ### Patch Changes - Adjust CSS specificity to ensure Japanese font is properly applied - revert to 3.6.1 approach; issue was external to bezier package ([#2780](#2780)) by @timok1m ## bezier-figma-plugin@0.7.22 ### Patch Changes - Updated dependencies - @channel.io/bezier-react@3.6.3  ## Summary by CodeRabbit ## Bug Fixes - 폰트 렌더링을 개선하기 위해 CSS 특이성을 조정했습니다. ## Chores - bezier-figma-plugin 패키지를 버전 0.7.22로 업데이트했습니다. - bezier-react 패키지를 버전 3.6.3으로 업데이트했습니다. - 관련 의존성이 업데이트되었습니다. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>  Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

timok1m added 2 commits January 12, 2026 18:10

fix(bezier-react): japanese font not applied due to CSS specificity -…

de1019b

… final code

docs: add changeset

be4aad2

channeltalk bot assigned timok1m Jan 12, 2026

timok1m changed the title ~~Fix/webtech 4524 3~~ Adjust CSS specificity to ensure Japanese font is properly applied - revert to 3.6.1 approach Jan 12, 2026

timok1m requested a review from wes5510 January 12, 2026 09:17

timok1m merged commit 0958d52 into channel-io:main Jan 12, 2026
7 of 9 checks passed

wes5510 mentioned this pull request Jan 12, 2026

ci(changesets): version packages #2781

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adjust CSS specificity to ensure Japanese font is properly applied - revert to 3.6.1 approach#2780

Adjust CSS specificity to ensure Japanese font is properly applied - revert to 3.6.1 approach#2780
timok1m merged 2 commits intochannel-io:mainfrom
timok1m:fix/webtech-4524-3

timok1m commented Jan 12, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Jan 12, 2026

Uh oh!

channeltalk bot commented Jan 12, 2026

Uh oh!

coderabbitai bot commented Jan 12, 2026 •

edited

Loading

Uh oh!

codecov bot commented Jan 12, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

Conversation

timok1m commented Jan 12, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Self Checklist

Related Issue

Summary

Details

Breaking change? (Yes/No)

References

Summary by CodeRabbit

버그 수정

Uh oh!

changeset-bot bot commented Jan 12, 2026

🦋 Changeset detected

Uh oh!

channeltalk bot commented Jan 12, 2026

Uh oh!

coderabbitai bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요약

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

codecov bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Jan 12, 2026

Chromatic Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

timok1m commented Jan 12, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 12, 2026 •

edited

Loading

codecov bot commented Jan 12, 2026 •

edited

Loading