Skip to content

Add chart tokens and bezier-react story for v3 foundation color tokens#2784

Merged
timok1m merged 3 commits intochannel-io:mainfrom
timok1m:feat/webtech-4561
Jan 21, 2026
Merged

Add chart tokens and bezier-react story for v3 foundation color tokens#2784
timok1m merged 3 commits intochannel-io:mainfrom
timok1m:feat/webtech-4561

Conversation

@timok1m
Copy link
Contributor

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

close webtech-4685

Summary

차트용 컬러 토큰을 추가하고, 스토리를 추가하여 v3 컬러 토큰을 스토리북에서 확인할 수 있도록 합니다.

Details

스크린샷 2026-01-21 오후 1 47 48

Breaking change? (Yes/No)

No

References

Summary by CodeRabbit

릴리스 노트

  • New Features
    • 차트용 새로운 색상 토큰 팔레트 추가 (밝은 테마 및 어두운 테마 지원)
    • 색상 토큰을 시각적으로 탐색하고 상호작용할 수 있는 대화형 색상 탐색 도구 추가

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

@timok1m timok1m self-assigned this Jan 21, 2026
@channeltalk
Copy link

channeltalk bot commented Jan 21, 2026

@changeset-bot
Copy link

changeset-bot bot commented Jan 21, 2026

🦋 Changeset detected

Latest commit: 5387568

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

@coderabbitai
Copy link

coderabbitai bot commented Jan 21, 2026

Walkthrough

차트 색상 토큰을 추가하고 이를 시각화하는 Storybook 페이지를 구성합니다. 라이트 및 다크 테마용 의미론적 색상 토큰 JSON이 추가되었으며, 색상 스왓치와 토큰 그룹을 표시하는 React 컴포넌트 기반 MDX 스토리가 도입됩니다.

Changes

응집 / 파일(s) 변경 요약
Changeset 항목
.changeset/ripe-clowns-drive.md
@channel.io/bezier-tokens (minor) 및 @channel.io/bezier-react (patch) 버전 업 항목 추가
차트 색상 토큰 데이터
packages/bezier-tokens/src/beta/semantic/light-theme/color.json, packages/bezier-tokens/src/beta/semantic/dark-theme/color.json
color.chart.theme.default 경로 하에 01~10 레이블의 차트 색상 팔레트 추가 (각각 46줄)
색상 스토리북 페이지
packages/bezier-react/src/stories/color.mdx
색상 토큰 탐색기 렌더링을 위한 새 MDX 페이지 추가. ColorSwatch, TokenGroup, GlobalSection, SemanticSection, Primary 컴포넌트 및 유틸리티 함수(formatTitle, isTokenLeaf, normalizeTokenName, getTokenName, sortNumericLeafEntries) 포함

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 분

Poem

🐰 토큰의 색깔 가득한 정원,
차트 맞춰 무지개 펼쳐지고,
라이트에서 다크까지 아름답게,
스토리 속에 살아나는 팔레트,
토끼도 몸을 굴려 춤을 춘다! 🌈✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed 제목이 PR의 주요 변경사항을 명확하게 요약하고 있습니다: 차트 토큰 추가 및 v3 컬러 토큰에 대한 스토리 추가.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed PR 설명은 대부분의 필수 섹션을 포함하고 있으나, Summary와 Details 섹션이 한국어로만 작성되어 있고 영어 지원이 부족합니다.

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

✨ Finishing touches
  • 📝 Generate docstrings

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

@github-actions
Copy link
Contributor

Chromatic Report

🚀 Congratulations! Your build was successful!

@codecov
Copy link

codecov bot commented Jan 21, 2026

Codecov Report

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

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #2784   +/-   ##
=======================================
  Coverage   81.80%   81.80%           
=======================================
  Files         149      149           
  Lines        2957     2957           
  Branches      928      934    +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 added the bezier-tokens Issue or PR related to bezier-tokens label Jan 21, 2026
@timok1m timok1m merged commit ff061ce into channel-io:main Jan 21, 2026
8 of 9 checks passed
timok1m pushed a commit that referenced this pull request Jan 21, 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-tokens@0.5.0

### Minor Changes

- Add chart tokens and bezier-react story for v3 foundation color
tokens. ([#2784](#2784))
by @timok1m

## @channel.io/bezier-react@3.6.5

### Patch Changes

- Add chart tokens and bezier-react story for v3 foundation color
tokens. ([#2784](#2784))
by @timok1m

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

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

### Patch Changes

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

## bezier-figma-plugin@0.7.24

### Patch Changes

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


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

## Summary by CodeRabbit

## 릴리스 노트

* **New Features**
  * 차트 토큰 추가
  * v3 파운데이션 컬러 토큰 스토리 추가

* **Chores**
  * 패키지 버전 업데이트 (여러 패키지의 마이너 및 패치 버전 상향)
  * 의존성 업데이트

<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

bezier-tokens Issue or PR related to bezier-tokens

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments