Skip to content

Add fill-grey-light color token and update component background colors#2782

Merged
timok1m merged 5 commits intochannel-io:mainfrom
timok1m:feat/webtech-4508
Jan 19, 2026
Merged

Add fill-grey-light color token and update component background colors#2782
timok1m merged 5 commits intochannel-io:mainfrom
timok1m:feat/webtech-4508

Conversation

@timok1m
Copy link
Contributor

@timok1m timok1m commented Jan 16, 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

closes webtech-4605

Summary

누락되었던 fill-grey-light 토큰을 추가하고 컴포넌트들의 배경색을 수정합니다.

Details

  • fill-grey-light 토큰 추가
  • TextField, Textarea focus된 상태일 때 배경색을 fill-grey-light로 변경
  • control(radio, checkbox)들의 기본 배경색을 fill-grey-light로 변경
  • AlphaIconButton의 tertiary dark-grey, light-grey의 호버 시 색상이 적용되지 않는 문제 확인하여 실제 존재하는 토큰으로 변경 (color-fill-neutral-transparent-hovered)
  • AlphaFloatingButton, AlphaIconFloatingButton의 secondary 배경색을 fill-grey로 변경

Breaking change? (Yes/No)

No

References

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능

    • 디자인 시스템에 새로운 색상 토큰을 추가했습니다.
  • 스타일

    • Checkbox, RadioGroup, TextField(포커스/유효성 검사 상태), TextArea(포커스 상태)의 배경색을 업데이트했습니다.
    • FloatingButton과 FloatingIconButton의 보조 변형 스타일을 개선했습니다.
    • IconButton 호버 상태에 대한 경미한 스타일 개선을 적용했습니다.

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

@timok1m timok1m self-assigned this Jan 16, 2026
@changeset-bot
Copy link

changeset-bot bot commented Jan 16, 2026

🦋 Changeset detected

Latest commit: 72ee2d9

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

This PR includes changesets to release 4 packages
Name Type
@channel.io/bezier-tokens Patch
@channel.io/bezier-react Patch
@channel.io/stylelint-bezier 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 16, 2026

@coderabbitai
Copy link

coderabbitai bot commented Jan 16, 2026

Walkthrough

새로운 색상 토큰 fill-grey-light를 라이트 및 다크 테마에 추가하고, 여러 UI 컴포넌트의 배경색을 기존 color-surface에서 새 토큰으로 변경하는 패치 릴리스입니다. 변경 로그 항목이 추가되었으며, 구조적 변화는 없습니다.

Changes

Cohort / File(s) 요약
색상 토큰 추가
packages/bezier-tokens/src/beta/semantic/light-theme/color.json, packages/bezier-tokens/src/beta/semantic/dark-theme/color.json
fill.neutral.grey.light 색상 토큰을 라이트 테마(color.grey.25)와 다크 테마(color.grey.900)에 추가
컴포넌트 배경색 업데이트
packages/bezier-react/src/components/Checkbox/Checkbox.module.scss, packages/bezier-react/src/components/RadioGroup/RadioGroup.module.scss, packages/bezier-react/src/components/TextArea/TextArea.module.scss, packages/bezier-react/src/components/TextField/TextField.module.scss
배경색을 var(--color-surface)에서 var(--color-fill-grey-light)로 변경
플로팅 버튼 색상 변경
packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss, packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss
보조 변형 배경색을 var(--color-surface-highest)에서 var(--color-fill-grey)로 변경
아이콘 버튼 포맷팅
packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss
다중 행 배경색 선언을 단일 행 형식으로 정리 (값 변경 없음)
변경 로그 항목
.changeset/proud-lions-wonder.md
@channel.io/bezier-tokens@channel.io/bezier-react 패치 릴리스에 대한 변경 로그 추가

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 토큰 하나가 탄생했네,
fill-grey-light 반짝반짝,
색칠하기 놀이 시작해,
여러 버튼들 옷 갈아입고,
디자인 시스템 더욱 밝아졌어! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed 제목이 PR의 주요 변경 사항을 명확하게 요약합니다: fill-grey-light 토큰 추가 및 컴포넌트 배경색 업데이트.
Description check ✅ Passed PR 설명이 Self Checklist, Related Issue, Summary, Details, Breaking change 섹션을 포함하여 대부분 완성되었습니다.
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 bdc6029 and 72ee2d9.

📒 Files selected for processing (10)
  • .changeset/proud-lions-wonder.md
  • packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss
  • packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss
  • packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss
  • packages/bezier-react/src/components/Checkbox/Checkbox.module.scss
  • packages/bezier-react/src/components/RadioGroup/RadioGroup.module.scss
  • packages/bezier-react/src/components/TextArea/TextArea.module.scss
  • packages/bezier-react/src/components/TextField/TextField.module.scss
  • packages/bezier-tokens/src/beta/semantic/dark-theme/color.json
  • packages/bezier-tokens/src/beta/semantic/light-theme/color.json
⏰ 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 (11)
packages/bezier-tokens/src/beta/semantic/light-theme/color.json (1)

319-323: fill.grey.light 토큰 추가 확인

기존 grey 스케일 구조와 정합성이 좋아 보입니다.

packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss (1)

91-93: secondary 배경 토큰 전환 OK

fill-grey로 통일되어 컴포넌트 간 일관성이 좋아졌습니다.

packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss (2)

185-189: primary 호버 배경 토큰 정리 OK

표기 정리로 가독성이 좋아졌습니다.


224-229: tertiary 중립/화이트 호버 토큰 적용 OK

transparent-hovered 변형 사용이 일관됩니다.

packages/bezier-tokens/src/beta/semantic/dark-theme/color.json (1)

319-323: 다크 테마 grey.light 추가 확인

라이트 테마와 대칭 구조로 정합성이 좋아 보입니다.

packages/bezier-react/src/components/TextArea/TextArea.module.scss (1)

41-48: focus/invalid 배경 토큰 전환 OK

fill-grey-light 적용으로 상태별 배경이 일관됩니다.

packages/bezier-react/src/components/RadioGroup/RadioGroup.module.scss (1)

48-48: LGTM!

라디오 버튼의 기본 배경색이 새로운 --color-fill-grey-light 토큰으로 일관성 있게 업데이트되었습니다. disabled 및 checked 상태의 오버라이드가 올바르게 유지되어 있습니다.

packages/bezier-react/src/components/Checkbox/Checkbox.module.scss (1)

21-21: LGTM!

체크박스의 기본 배경색이 RadioGroup과 동일하게 --color-fill-grey-light 토큰으로 업데이트되었습니다. 컴포넌트 간 일관성이 잘 유지되고 있습니다.

packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss (1)

110-112: LGTM!

secondary variant의 배경색이 --color-fill-grey로 업데이트되었습니다. 폼 컨트롤 컴포넌트들(RadioGroup, Checkbox 등)과 달리 FloatingButton은 의도적으로 --color-fill-grey-light가 아닌 --color-fill-grey를 사용하는 것이 PR 설명과 일치합니다.

.changeset/proud-lions-wonder.md (1)

1-6: LGTM!

changeset이 올바르게 작성되었습니다. @channel.io/bezier-tokens@channel.io/bezier-react 두 패키지 모두에 대해 patch 버전 업데이트가 적절하게 지정되어 있고, 변경 사항 설명이 실제 변경 내용과 일치합니다.

packages/bezier-react/src/components/TextField/TextField.module.scss (1)

79-84: LGTM!

TextField primary variant의 focused/invalid 상태 배경색이 --color-fill-grey-light로 업데이트되었습니다. 기본 상태(--color-fill-grey)와 포커스 상태(--color-fill-grey-light) 간의 시각적 구분이 명확해져 사용자 피드백이 개선됩니다.

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.


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

@github-actions
Copy link
Contributor

github-actions bot commented Jan 16, 2026

Chromatic Report

🚀 Congratulations! Your build was successful!

@codecov
Copy link

codecov bot commented Jan 16, 2026

Codecov Report

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

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

☔ 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.

@timok1m timok1m merged commit f4f78ff into channel-io:main Jan 19, 2026
8 of 9 checks passed
timok1m pushed a commit that referenced this pull request Jan 19, 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.4

### Patch Changes

- Add fill-grey-light color token and update component background
colors: TextField-primary and TextArea focus states, RadioGroup and
Checkbox defaults, and some buttons.
([#2782](#2782)) by
@timok1m

-   Updated dependencies
    -   @channel.io/bezier-tokens@0.4.1

## @channel.io/bezier-tokens@0.4.1

### Patch Changes

- Add fill-grey-light color token and update component background
colors: TextField-primary and TextArea focus states, RadioGroup and
Checkbox defaults, and some buttons.
([#2782](#2782)) by
@timok1m

## @channel.io/stylelint-bezier@0.3.1

### Patch Changes

-   Updated dependencies
    -   @channel.io/bezier-tokens@0.4.1

## bezier-figma-plugin@0.7.23

### Patch Changes

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


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

## Summary by CodeRabbit

## 릴리스 노트

* **새로운 기능**
  * fill-grey-light 색상 토큰 추가

* **개선사항**
* TextField, TextArea, RadioGroup, Checkbox 및 일부 버튼의 배경색 업데이트로 시각적 일관성
향상

<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>
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