Add v3 tokens and migrate bezier-react components #2764
Merged
Conversation
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
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> 토큰 V3 마이그레이션을 위해 프리릴리즈 모드로 진입합니다. ## Details <!-- Please elaborate description of the changes --> - #2578 를 참고하여 프리릴리즈 모드에 진입합니다. - 작업 내용은 위 PR과 동일하되, beta 브랜치를 사용합니다. - 기존 alpha 브랜치는 작업을 진행하다 pending 된 상태로 보여져서 우선 새 브랜치에서 작업합니다. - 추후 토큰 마이그레이션이 모두 완료된 이후 두 브랜치를 모두 정리합니다. ### 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 -->
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> V3 토큰을 추가합니다. 기존 토큰과의 구분을 위해 `--beta` 프리픽스와 함께 제공합니다. ## Details <!-- Please elaborate description of the changes --> - 지금 PR을 기준으로 베지어 토큰은 총 3개의 버전을 가지고 있습니다. - v1: stable 토큰으로, 별도의 프리픽스 없이 제공되는 토큰 - v2: alpha 프리픽스와 함께 제공되는 토큰으로, 디자인 시스템 개편을 위해 일부 도입된 바 있으나 현재 잠정 중단된 상태 - v3: beta 프리픽스와 함께 제공되는 토큰으로, v1과 v2를 deprecated 처리하고 시스템 내에서 사용하는 토큰을 v3로 통일하고자 합니다. - 프리릴리즈 시점에는 v1, v2 deprecated 없이 v3 토큰만 추가하기 때문에 breaking change가 없습니다. - 이후 PR에서는 bezier-react 등 타 패키지들에 대해서 v3 토큰으로 마이그레이션을 진행할 예정입니다. ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Patch Changes - Add v3 tokens with --beta prefix ([#2733](#2733)) by @timok1m ## @channel.io/[email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> stylelint-bezier가 v3 토큰도 커버할 수 있도록 추가합니다. ## Details <!-- Please elaborate description of the changes --> ### 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 -->
<!-- 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> bezier-react, bezier-figma-plugin 내부에서 사용하고 있는 스타일 토큰을 v3 토큰으로 마이그레이션 합니다. ## Details <!-- Please elaborate description of the changes --> - codemod를 사용하지 않고 마이그레이션 테이블을 생성한 뒤 cursor로 일괄 작업했습니다. (비슷한 형태로 스크립트 작성) - v1, v2, v3 토큰이 존재하는 상태에서 bezier-react 내에서 사용하는 토큰을 모두 v3로 교체한 뒤 patch 업데이트 진행할 예정입니다. - 마이그레이션이 모두 완료되었을 때, v1 과 v2 토큰을 모두 제거(deprecated) 시키고 major 버전을 업데이트 합니다. - 우선 현재 시점에는 프리릴리즈로 테스트 합니다. ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Migrate style tokens to beta tokens ([#2737](#2737)) by @timok1m ## @channel.io/[email protected] ### Patch Changes - Update stylelint to cover v3 token ([#2735](#2735)) by @timok1m ## [email protected] ### Patch Changes - Migrate style tokens to beta tokens ([#2737](#2737)) by @timok1m - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…d config (#2738) <!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> - #2737 작업에서 불필요하게 추가된 md 파일을 제거합니다. - 또한 로컬 테스트를 위해 `rollup.config.mjs`에서 `nodeExternals.deps`를 true로 변경했던 것을 리버트 합니다. ## Details <!-- Please elaborate description of the changes --> ### 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 -->
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary - #2738 의 작업 내용을 반영하여 새 버전을 퍼블리시 하기 위해 changeset을 추가합니다. <!-- Please brief explanation of the changes made --> ## Details <!-- Please elaborate description of the changes --> ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Fix build configuration to include all dependencies used by bezier-react. Revert incorrect changes that were committed during testing and redeploy. ([#2740](#2740)) by @timok1m ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…issions during development (#2742) <!-- 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 - [ ] 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**](https://www.conventionalcommits.org/en/v1.0.0/). - [ ] 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) - [ ] 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 <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> - 마이그레이션 시 편의를 위해 v3 토큰만을 허용하도록 변경합니다. - 이를 통해 누락된 v1, v2 토큰 사용처를 쉽게 판별할 수 있습니다. ## Details <!-- Please elaborate description of the changes --> - 0.2.11-beta.2 버전이 이 변경 사항을 포함하게 됩니다. - 0.2.11-beta.1 버전은 v1, v2, v3 토큰을 모두 유효한 토큰으로 판단하는 버전입니다. - 최종적으로는 major 버전이 업데이트 되고, beta 프리픽스를 제거한 상태로 코드가 정리되어야 합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes ## References <!-- Please list any other resources or points the reviewer should be aware of -->
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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Restrict stylelint-bezier to validate only v3 tokens to detect migration omissions during development. ([#2742](#2742)) by @timok1m Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> - 다크모드에서 일부 컬러 토큰이 잘못 정의된 경우를 확인하고, 이를 수정합니다. ## Details - text-success: cobalt.200 → cobalt.300 - text-warning: warning.200 → warning.300 <!-- Please elaborate description of the changes --> ### 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 -->
#2744) <!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> StartsWithPrefix 타입에서 exact match 도 처리하도록 수정합니다. ## Details <!-- Please elaborate description of the changes --> - v2 토큰 시스템에서는 prefix 로 시작함과 동시에 해당 문자열이 그대로 토큰 네이밍인 경우가 있습니다. - `--beta-color-surface`가 그 예시입니다. - 기존 StartsWithPrefix 타입은 `${prefix}-*`에 대해서만 처리하고 있으므로 `--beta-color-surface` 토큰이 누락되는 문제점이 발생합니다. - 새로운 토큰 시스템 상 토큰 네이밍 depth가 항상 일정하다는 보장이 없습니다. (`color-text-neutral`, `color-text-neutral-heavy` 와 같은 형식) - StartsWithPrefix에서 기존 동작에 더해 `${prefix}` exact match도 처리하도록 로직을 수정합니다. ### 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 -->
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary bezier-react가 beta 토큰을 export 하도록 수정합니다. <!-- Please brief explanation of the changes made --> ## Details <!-- Please elaborate description of the changes --> ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Modify bezier-react to exports beta-tokens ([#2747](#2747)) by @timok1m - Update StartsWithPrefix to include both prefix-\* and exact prefix matches, enabling 'surface' token to be properly typed in SurfaceSemanticColor. ([#2744](#2744)) by @timok1m - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Patch Changes - Update dark mode colors for text-success and text-warning. (text-success: cobalt.200 → cobalt.300, text-warning: warning.200 → warning.300) ([#2745](#2745)) by @timok1m ## @channel.io/[email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> `betaTokenCssVar` 를 통해서 토큰 이름을 변환할 때 `--beta-color-surface` 이름이 `--surface`로 잘못 변환되는 문제를 수정합니다. ## Details <!-- Please elaborate description of the changes --> - #2744 에서 type에 대한 수정을 진행했습니다. utils 쪽에서도 동일한 문제가 있어 이를 수정합니다. - `betaTokenCssVar`에서 surface 컬러 토큰에 대한 처리가 가능하도록 로직을 수정합니다. \ - 관련 테스트 코드를 추가했습니다. ### 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 -->
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> beta-tokens에서 export 하는 타입이 tokens에서 export 하는 타입 이름과 중복되어 confict 나는 문제를 해결합니다. ## Details <!-- Please elaborate description of the changes --> - beta-tokens에서 export 하는 타입에 'beta' 프리픽스를 추가합니다. ### 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 -->
<!-- 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 - [ ] 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**](https://www.conventionalcommits.org/en/v1.0.0/). - [ ] 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) - [ ] 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 <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> - 디자인팀과 논의하여, %를 나타내는 `-p` 토큰을 일부 제거합니다. - `opacity-disabled` 에서 사용하는 40-p를 제외하고 `42-p`, `100-p`를 제거합니다. ## Details <!-- Please elaborate description of the changes --> ### 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 -->
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> beta 토큰이 추가됨에 따라, 사용처에서 beta 토큰을 사용할 수 있도록 token provider와 커스텀 훅을 추가합니다. ## Details <!-- Please elaborate description of the changes --> - `BetaTokenProvider`를 생성하고 `AppProvider`, `ThemeProvider`에 `BetaTokenProvider`를 추가합니다. - `useBetaTokens`를 추가합니다. - 사용처의 코드를 마이그레이션 합니다. ### 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 -->
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> Avatar, AlphaAvatar 컴포넌트에서 사용하는 radius를 token based 에서 하드 코딩된 스트링으로 변경합니다. % 단위의 토큰을 관리하는 기능을 피그마에서 제공하지 않기 때문에, 해당 토큰을 활용하는 케이스를 최소화 합니다. ## Details <!-- Please elaborate description of the changes --> ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Add beta prefix to beta-tokens types to resolve naming conflicts ([#2750](#2750)) by @timok1m - Add BetaTokenProvider, useBetaTokens and migrate the codebase. ([#2751](#2751)) by @timok1m - Fixes the issue where backgroundColor="surface" was generating incorrect CSS variable name. ([#2748](#2748)) by @timok1m - Replace useTokens().global.radius usage with individual '42%' styling in avatar components ([#2753](#2753)) by @timok1m - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Patch Changes - Remove unused 42-p, 100-p dimension tokens ([#2752](#2752)) by @timok1m ## @channel.io/[email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
) <!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> 사용처에서 beta-tokens의 필요한 타입을 바로 import 해서 사용할 수 있도록 namespace를 제거합니다. ## Details <!-- Please elaborate description of the changes --> - 마이그레이션 용이성을 위해 기존 tokens의 타입을 쓸 때와 동일하게 namespace 없이 타입을 가져올 수 있어야 합니다. - 이를 위해 beta-tokens에서 export 하는 타입 이름에 Beta 프리픽스를 추가했습니다. - #2750 ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Remove BetaTokens namespace to allow direct use of required types ([#2754](#2754)) by @timok1m ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…2756) <!-- 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 --> <!-- Fixes #0000 --> ## Summary v3 토큰 이름에서 'beta' 프리픽스를 제거하고, bezier-react에 이 변경 사항을 반영합니다. <!-- Please brief explanation of the changes made --> ## Details <!-- Please elaborate description of the changes --> - 최초 배포 시 v3 토큰만 추가하여 minor 배포를 수행할 계획입니다. - 이후 major 버전 배포를 진행하며 기존 v1, v2 토큰을 drop합니다. - 이 때 최종적으로 v3 토큰에서는 'beta' 프리픽스가 제거되어야 합니다. - 불필요하게 두 번 마이그레이션 하지 않도록 v3 토큰에서 프리픽스를 제거합니다. - semantic 토큰의 이름은 v1과 겹치지 않습니다. - global 토큰의 이름 역시 v3에서는 색상 앞에 color 라는 프리픽스를 붙이고 있어 v1과 겹치지 않습니다. - 일부 radius 이름이 겹치지만 실질적으로 의미하는 값이 같으므로 문제가 되지 않을 것이라고 판단했습니다. ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Update v3 token name from with 'beta' prefix to no prefix ([#2756](#2756)) by @timok1m - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Patch Changes - Update v3 token name from with 'beta' prefix to no prefix ([#2756](#2756)) by @timok1m ## @channel.io/[email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
<!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> 마이그레이션 과정에서 Button 컴포넌트에서 호버 상태 스타일링이 어긋난 부분을 수정합니다. ## Details <!-- Please elaborate description of the changes --> - 호버 상태일 때 -hovered 컬러 토큰을 적용합니다. ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Fix Button's hover state styling ([#2758](#2758)) by @timok1m ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
🦋 Changeset detectedLatest commit: 8e741ca The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 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 |
개요V3 베타 토큰 시스템을 도입하고 베지어 컴포넌트를 업데이트하여 새로운 토큰 네이밍 규칙을 지원합니다. 토큰 제공자, 타입 정의, 스타일 유틸리티를 추가하고 수백 개의 컴포넌트 파일에서 토큰 참조를 전환합니다. 변경사항
시퀀스 다이어그램sequenceDiagram
participant App as 애플리케이션
participant AppProvider as AppProvider
participant AlphaTokenProvider as AlphaTokenProvider
participant BetaTokenProvider as BetaTokenProvider
participant Component as 컴포넌트
participant ColorTokenCssVar as colorTokenCssVar()
App->>AppProvider: children 렌더링
AppProvider->>AlphaTokenProvider: 래핑
AlphaTokenProvider->>BetaTokenProvider: 래핑
BetaTokenProvider->>BetaTokenProvider: 테마 토큰 준비<br/>(light/dark)
BetaTokenProvider->>Component: 컨텍스트 제공
Component->>Component: 베타 시맨틱 색상 선택
Component->>ColorTokenCssVar: color-text-neutral<br/>색상 토큰 전달
ColorTokenCssVar->>ColorTokenCssVar: color- 접두사 추가
ColorTokenCssVar->>Component: --color-text-neutral<br/>CSS 변수 반환
Component->>Component: 스타일에 CSS 변수 적용
예상 코드 리뷰 노력🎯 4 (복잡함) | ⏱️ ~60분 시
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #2764 +/- ##
==========================================
+ Coverage 79.33% 81.80% +2.47%
==========================================
Files 146 149 +3
Lines 2913 2957 +44
Branches 926 934 +8
==========================================
+ Hits 2311 2419 +108
+ Misses 567 504 -63
+ Partials 35 34 -1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
Chromatic Report🚀 Congratulations! Your build was successful! |
…o accept BetaDimSemanticColor (#2765) <!-- 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) - [x] 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> - 누락되었던 text-accent-olive 색상을 추가하고 backgroundColor props에서 BetaDimSemanticColor를 받도록 확장합니다. ## Details <!-- Please elaborate description of the changes --> ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Add text-accent-olive token, and update BetaBackgroundSemanticColor to accept BetaDimSemanticColor ([#2765](#2765)) by @timok1m - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Patch Changes - Add text-accent-olive token, and update BetaBackgroundSemanticColor to accept BetaDimSemanticColor ([#2765](#2765)) by @timok1m ## @channel.io/[email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…ier component colors (#2767) <!-- 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> - grey 토큰의 색상이 다크모드에서 전반적으로 변경되었습니다. - monochrome-dark 버튼에서 활용할 inverse 색상 토큰이 추가되었습니다. - Button 컴포넌트의 색상이 일부 수정되었습니다. - primary > monochrome-dark의 color가 text-inverse로 변경 - floating > monochrome-* 의 background-color가 surface-highest로 변경 - 상호 작용 요소 (Button, Tab, Tag) 의 focus-visible 색상을 변경합니다. - TextField의 error 상태 box-shadow가 제대로 적용되지 않는 문제를 수정합니다. ## Details <!-- Please elaborate description of the changes --> ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Add invese color tokens and update grey-\* color value. Update bezier component colors ([#2767](#2767)) by @timok1m - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Patch Changes - Add invese color tokens and update grey-\* color value. Update bezier component colors ([#2767](#2767)) by @timok1m ## @channel.io/[email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…t's background color (#2769) <!-- 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 --> <!-- Fixes #0000 --> ## Summary 추가된 v3 토큰을 반영하고 버튼 컴포넌트의 배경색을 수정합니다. <!-- Please brief explanation of the changes made --> ## Details - 글로벌 토큰의 값이 변경됩니다. - 사유: 다크모드에서 아이콘 & 텍스트의 가독성 개선 - color-green-300: #51C371 - color-red-300: #F36868 - color-navy-300: #7E89CD - color-blue-300: #8082FF - 글로벌 토큰이 추가됩니다. - 사유: SegmentedControl > Selected, Button > Floating > Primary > monochrome-* 배경색을 표현하기 위함 - color-grey-25: #FDFDFD - color-grey-650: #5A5A5F - SegmentedControl, Button 컴포넌트의 배경 색을 수정합니다. - Modal 컴포넌트에서 Button의 focus outline 색상을 수정합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> ## References <!-- Please list any other resources or points the reviewer should be aware of -->
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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Update token values for dark mode visibility and edit Button component's background color ([#2769](#2769)) by @timok1m - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Patch Changes - Update token values for dark mode visibility and edit Button component's background color ([#2769](#2769)) by @timok1m ## @channel.io/[email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…ility (#2771) <!-- 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> 마이너 배포를 위해 하위호환성을 지키도록 코드를 수정합니다. ## Details <!-- Please elaborate description of the changes --> - 이번 프리릴리즈는 마이너 배포를 위한 프리릴리즈 입니다. - 마이너 배포를 위해 breaking change가 발생하지 않도록 코드를 수정합니다. - 베지어 컴포넌트의 LayoutProps에서 v3 토큰만 허용하던 것을 v1 토큰도 함께 허용하도록 확장합니다. - 스타일린트에서 v3 토큰만 유효하도록 판단하도록 했던 것을 기존에 허용하던 v1, v2 도 허용하도록 확장합니다. ### 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 -->
…2773) <!-- 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 --> <!-- Fixes #0000 --> ## Summary <!-- Please brief explanation of the changes made --> flattenBetaToken를 추가하는 과정에서 flattenAlphaToken가 재귀적으로 flattenBetaToken를 수행하도록 잘못 수정한 문제를 바로잡습니다. ## Details <!-- Please elaborate description of the changes --> - changeset 퍼블리시 이전에 작업을 미리 브랜치에 머지하도록 하여 버전 배포 시에는 올바른 코드가 들어갈 수 있도록 합니다. ### 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 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 beta, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `beta` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `beta`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/[email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Patch Changes - Edit bezier-react's props and stylelint to maintain backward compatibility ([#2771](#2771)) by @timok1m ## @channel.io/[email protected] ### Patch Changes - Edit bezier-react's props and stylelint to maintain backward compatibility ([#2771](#2771)) by @timok1m - Updated dependencies - @channel.io/[email protected] ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
<!-- 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 --> <!-- Fixes #0000 --> ## Summary prerelease 모드를 종료하고 마이너 배포를 위한 changeset 을 추가합니다. prerelease에 대하여 확신이 없어서 수동으로 pre.json와 prerelease에 사용된 md 파일을 제거했습니다. 혹시 yarn changeset pre exit 을 통해서 pre.json의 mode가 exit으로 변경되면 이 것을 자동으로 수행한다면 알려주세요! <!-- Please brief explanation of the changes made --> ## Details <!-- Please elaborate description of the changes --> ### 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 -->
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 18
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (5)
packages/bezier-react/src/components/Slider/Slider.module.scss (1)
25-35:border-radius중복 선언으로 토큰이 항상 무시됩니다(3px가 최종 적용).
현재border-radius: var(--radius-3);다음 줄의border-radius: 3px;가 덮어써서 v3 radius 토큰이 적용되지 않습니다. “fallback” 의도라면var()의 fallback 문법으로 합치는 편이 안전합니다.Proposed diff
.SliderPrimitiveTrack { position: relative; flex: 1; height: 6px; background-color: var(--color-fill-neutral-heavy); - border-radius: var(--radius-3); - border-radius: 3px; + border-radius: var(--radius-3, 3px); }packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss (1)
180-180: TODO 주석이 현재 v3 토큰 마이그레이션과 맞지 않습니다.이 PR에서 v3 토큰으로 마이그레이션하고 있으므로, "v2 token" 언급은 오래된 정보입니다. 디자인 명세가 확정되었다면 해당 TODO를 해결하거나, v3 토큰을 참조하도록 주석을 업데이트해 주세요.
packages/bezier-react/src/components/Toast/Toast.module.scss (1)
132-150: Close 버튼 hover 배경색을 설계 시스템의 호버 토큰으로 업데이트하세요.현재
background-color가 기본/hover 모두--color-fill-neutral-light로 동일해서 hover 피드백이 텍스트 색 변화에만 의존합니다. 다른 컴포넌트(Button, AlphaIconButton 등)와의 일관성을 위해 hover 상태에서--color-fill-neutral-light-hovered를 사용하세요.packages/bezier-react/src/components/Modal/Modal.tsx (1)
272-281: 라이트/다크 테마 모두에서 WCAG AA 대비 기준 미충족
typo="13"+bold조합은 WCAG에서 "큰 텍스트"(large text)로 분류되지 않으므로 4.5:1의 대비 비율이 필요합니다. 현재 색상 조합에서:
- 라이트 테마: 2.85:1 (기준 미달)
- 다크 테마: 3.66:1 (기준 미달)
두 테마 모두 접근성 기준을 충족하지 않습니다.
text-neutral-lighter대신 더 진한 토큰 사용을 권장합니다.packages/bezier-react/src/components/LegacyStack/LegacyStack.stories.tsx (1)
205-216:text-neutral-light토큰의 대비(가독성) 확인이 필요합니다.밝은 배경에서 이 토큰의 실제 대비를 확인해 주세요. Storybook에서 라이트/다크 테마(또는 배경색)별로 텍스트 가독성을 검증하시기 바랍니다.
🤖 Fix all issues with AI agents
In @packages/bezier-react/CHANGELOG.md:
- Line 23: Fix the typo in the CHANGELOG entry: replace "invese" with "inverse"
in the changed line that currently reads "Add invese color tokens and update
grey- * color value. Update bezier component colors ..." so the text becomes
"Add inverse color tokens and update grey-* color value. Update bezier component
colors ...".
In @packages/bezier-react/src/components/AlphaButton/Button.module.scss:
- Line 142: The CSS contains a syntax error: the declaration for the "pink"
token uses var(--color-text-accent-pink,) with an extraneous trailing comma;
remove the trailing comma or provide a valid fallback value inside the var() so
the "pink" property becomes var(--color-text-accent-pink) or
var(--color-text-accent-pink, <fallback>), fixing the invalid CSS in
Button.module.scss.
In
@packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss:
- Around line 61-62: Remove the redundant box-shadow declaration in
ToggleButton.module.scss: the first box-shadow: var(--state-input-default) is
immediately overridden by the inset declaration on the following line; either
delete the first fallback if it's unnecessary or merge the two values into a
single comma-separated box-shadow if both effects are required, updating the
rules where box-shadow appears in the AlphaToggleButton/ToggleButton styles.
In @packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.module.scss:
- Around line 22-60: The olive variant sets --b-tag-badge-color to a fill token
by mistake; update the .variant-olive block so --b-tag-badge-color uses the
correct text token (consistent with other variants) instead of a color-fill
token. Locate the &:where(.variant-olive) rule and replace the current value
assigned to --b-tag-badge-color with the proper --color-text-accent-olive (or
the project's equivalent text token) so text color matches other variants.
In
@packages/bezier-react/src/components/CheckableAvatar/CheckableAvatar.module.scss:
- Around line 78-80: The CSS uses a non-existent design token
--color-text-accent-green-hovered (seen in CheckableAvatar.module.scss and
referenced by Checkbox, RadioGroup, FloatingButton), so either add a new token
key text.accent.green.hovered to the v3 token JSON
(packages/bezier-tokens/src/beta/semantic/light-theme/color.json) with the
appropriate color value, or change the SCSS to use the existing token
--color-text-accent-green (replace occurrences of
--color-text-accent-green-hovered with --color-text-accent-green) so all
components reference a defined token.
In @packages/bezier-react/src/components/Icon/Icon.stories.tsx:
- Around line 198-206: useBetaTokens() is being called inside the map callback
which violates React hook rules; move the hook to the component top level (call
useBetaTokens() once and extract semantic colors into a local variable like
semanticColors), then map over Object.keys(semanticColors) to render ListItem;
keep the onClick as setColor(semanticName as BetaSemanticColor) so the rest of
the logic (ListItem, setColor, BetaSemanticColor) remains unchanged.
In @packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx:
- Line 61: The SectionLabel component currently uses the low-contrast token
color="text-neutral-lighter" for the icon and the label text; replace that token
on the icon (the color prop set to "text-neutral-lighter") and wherever the
label text is rendered in SectionLabel with a higher-contrast token (e.g.,
text-neutral or text-neutral-default/text-neutral-medium) so both the icon and
label meet WCAG contrast requirements; update the token references in the
SectionLabel component code (icon color prop and the label text element) and
verify the chosen token yields sufficient contrast for normal and large text.
In @packages/bezier-react/src/components/Tag/Tag.tsx:
- Line 56: The Tag component is using an invalid token name "text-neutral" for
the color prop; update the color prop usage in Tag.tsx (the Tag component's
color prop) to a valid specific variant such as "text-neutral-heaviest" or
"text-neutral-normal" (use one of these if you need the previous
txt-black-darkest mapping), or choose
"text-neutral-light"/"text-neutral-lighter" depending on the intended contrast;
replace the lone "text-neutral" occurrence accordingly so the component uses a
supported token.
In @packages/bezier-react/src/components/Text/Text.module.scss:
- Line 13: Replace the hardcoded font-weight in Text.module.scss (font-weight:
400) with the corresponding typography token CSS variable used across the
codebase (e.g. var(--typography-text-weight-regular) or the token mapping for
typography.font-weight.400) so font-weight is consistent with other typography
props; ensure the Text component uses the same variable naming convention as
AlphaToggleButton (which uses --typography-text-weight-bold) and update any
related class/variant that currently uses 700 to reference the existing bold
variable instead, or document the intentional deviation if this is a planned
migration.
In @packages/bezier-tokens/scripts/lib/format.ts:
- Around line 225-370: The three beta formatters (betaCustomJsCjs,
betaCustomJsEsm, betaCustomCss) duplicate logic from the alpha formatters;
extract the shared categorization and ref-aware token serialization into factory
helpers (e.g., createRefAwareJsCjsFormatter, createRefAwareJsEsmFormatter,
createRefAwareCssFormatter) that accept a prefix ('alpha'|'beta') or options and
return a CustomFormat, then replace the duplicated exports with calls to those
factories (export const betaCustomJsCjs = createRefAwareJsCjsFormatter('beta'),
etc.); ensure the factories reuse dictionary.allTokens reduction,
processTokensWithHovered usage, reference resolution via
dictionary.usesReference/getReferences, and JSON/string assembly so behavior
remains identical while removing the duplicated code.
In @packages/bezier-tokens/scripts/lib/transform.ts:
- Around line 31-48: The transformer in the dimensionPx token incorrectly
asserts a non-string value as string; change the branch in the transformer for
typeof value !== 'string' to return the original value unchanged (remove the "as
string" cast) so you don't lie about the runtime type, keeping the function's
behavior and letting non-string values pass through untouched; locate the
transformer inside the dimensionPx object (and keep using toPx(trimmed) for
string handling).
In @packages/bezier-tokens/scripts/lib/utils.ts:
- Around line 15-22: The toPx function returns the original value when the regex
test fails, which preserves unwanted surrounding whitespace; change that return
to use the trimmed string instead (use the local trimmed variable) so
non-matching inputs like " 10px " return "10px" rather than the raw value;
ensure the regex check and subsequent logic consistently operate on trimmed
rather than the original value.
In @packages/bezier-tokens/src/beta/semantic/backdrop.json:
- Around line 1-12: The tokens under the "backdrop" object ("large" and "small")
use a non-standard "type": "backdrop" which Style Dictionary/CSSTransforms
doesn't recognize, so no output is generated; fix by either changing the token
types to a supported type (e.g., replace "type": "backdrop" with "type":
"dimension" or "size" so the "{dimension.60}" and "{dimension.6}" references are
emitted), or register and wire a custom CSSTransform named "backdrop" into your
Style Dictionary build (implement the transform and add it to transforms array)
so tokens named "backdrop.large"/"backdrop.small" are processed.
In @packages/bezier-tokens/src/beta/semantic/border.json:
- Around line 14-57: The border dropShadow offsets are inverted: for tokens
"bottom", "right", "left", and "top" the dimension signs must be flipped so
shadows render on the intended side; update the offset values as follows—in
"bottom" change offsetY from {dimension.1-m} to {dimension.1}, in "right" change
offsetX from {dimension.1-m} to {dimension.1}, in "left" change offsetX from
{dimension.1} to {dimension.1-m}, and in "top" change offsetY from {dimension.1}
to {dimension.1-m} so the dropShadow simulates borders correctly.
In @packages/bezier-tokens/src/beta/semantic/state.json:
- Around line 1-13: state.error currently references the warning palette via
"value.color": "{color.state.warning.normal}"; confirm whether this mapping is
intentional and if not, update the token to reference the correct error color
(e.g. "{color.state.error.normal}" or the canonical error token used elsewhere),
adjust any related tokens/variants (state.error.type/value) and update
docs/tests to reflect the corrected mapping so naming and semantics remain
consistent.
🧹 Nitpick comments (26)
packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss (1)
45-57:[data-state='on'] + :hover조합 의도 확인 (현재 on 상태가 hover를 덮어씀)Line 49-56 구조상
:hover보다[data-state='on']가 뒤에 있어서, “on 이면서 hover”일 때도 Line 54-56 스타일(파란 배경/인셋)이 유지됩니다. “on-hover”에 별도 색/쉐도우가 필요하면 조합 셀렉터를 추가하는 게 안전합니다.
또한 Line 47의var(--state-input-default)가 여러 레이어(외곽/인셋/블러 등)를 포함한다면, on 상태에서 Line 55로 완전히 교체되며 일부 레이어가 사라질 수 있어 실제 렌더링을 한 번 확인하는 걸 권장합니다.제안(diff): on-hover가 필요할 때만
&:where(.variant-primary) { background-color: var(--color-fill-grey); box-shadow: var(--state-input-default); &:where(&:hover) { background-color: var(--color-fill-grey-heavy); } &:where([data-state='on']) { background-color: var(--color-fill-accent-blue); box-shadow: 0 0 0 1px var(--color-fill-accent-blue-heavier) inset; } + + /* optional: on + hover 조합이 별도 톤을 가져야 한다면 */ + &:where([data-state='on']):where(&:hover) { + background-color: var(--color-fill-accent-blue); + box-shadow: 0 0 0 1px var(--color-fill-accent-blue-heavier) inset; + } }packages/bezier-tokens/src/beta/semantic/state.json (1)
68-125:input.active/error에서 3레이어(기본 elevation + 상태 dropShadow + 상태 innerShadow) 패턴이 명확합니다중복되는 “기본 elevation 레이어”가 여러 상태에 반복되므로, 도구가 허용한다면 추후 공통 토큰(예:
state.input.base)로 추출해 중복을 줄이는 것도 고려할 만합니다(선택).packages/bezier-tokens/src/beta/semantic/motion.json (1)
6-7: 네이밍 컨벤션 일관성 확인글로벌 토큰에서는
"timing-function"(케밥-케이스)을 사용하지만, 시맨틱 토큰의 value 객체에서는"timingFunction"(카멜-케이스)을 사용하고 있습니다. 이는 디자인 토큰 표준에서 토큰 이름(경로)과 복합 값의 속성 이름을 구분하기 위한 의도적인 선택일 수 있지만, 일관성을 위해 확인해 주세요.Also applies to: 13-14, 20-21
packages/bezier-react/src/components/TextField/TextField.test.tsx (2)
300-324: 하드코딩된 setTimeout 대신 waitFor 사용을 고려하세요.Line 309의 하드코딩된
setTimeout(resolve, 10)지연은 느린 CI 환경이나 컴포넌트 타이밍 변경 시 테스트를 불안정하게 만들 수 있습니다.@testing-library/react의waitFor를 사용하면 더 견고한 테스트가 됩니다.♻️ 제안하는 개선 방법
+import { waitFor } from '@testing-library/react' it('should select all text on mount when selectAllOnInit is true', async () => { const { getByRole } = renderComponent({ value: 'test value', selectAllOnInit: true, }) const input = getByRole('textbox') as HTMLInputElement - // Wait for setTimeout in the component - await new Promise((resolve) => setTimeout(resolve, 10)) - - expect(input.selectionStart).toBe(0) - expect(input.selectionEnd).toBe('test value'.length) + await waitFor(() => { + expect(input.selectionStart).toBe(0) + expect(input.selectionEnd).toBe('test value'.length) + }) })
326-354: 하드코딩된 setTimeout 대신 waitFor 사용을 고려하세요.Line 337의 하드코딩된 지연은 selectAllOnInit 테스트와 동일한 취약점을 가지고 있습니다. 더 견고한 테스트를 위해
waitFor를 사용하는 것이 좋습니다.♻️ 제안하는 개선 방법
it('should select all text on focus when selectAllOnFocus is true', async () => { const { getByRole } = renderComponent({ value: 'test value', selectAllOnFocus: true, }) const input = getByRole('textbox') as HTMLInputElement input.focus() - // Wait for setTimeout in the component - await new Promise((resolve) => setTimeout(resolve, 10)) - - expect(input.selectionStart).toBe(0) - expect(input.selectionEnd).toBe('test value'.length) + await waitFor(() => { + expect(input.selectionStart).toBe(0) + expect(input.selectionEnd).toBe('test value'.length) + }) })packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx (1)
25-26: 타입 에러 억제를 제거하는 것을 고려해보세요.
@ts-expect-error주석이 사용되고 있습니다.as="a"사용 시 Text 컴포넌트가 앵커 속성을 올바르게 타입 지원하지 않는 것으로 보입니다.♻️ 타입 안전성 개선 제안
Bezier의 Text 컴포넌트가
asprop에 대한 적절한 타입 오버로드를 제공하는지 확인하고, 필요시 별도 이슈로 추적하는 것을 권장합니다.packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss (1)
153-157: 아이콘에--color-text-*토큰 대신--color-icon-*토큰 사용을 고려해 주세요.Line 142와 148에서는
.ButtonIcon에--color-icon-*토큰을 사용하고 있지만, 여기서는--color-text-absolute-white를 사용하고 있습니다. 일관성을 위해--color-icon-absolute-white토큰이 존재한다면 해당 토큰 사용을 권장합니다.♻️ 제안하는 수정 사항
&:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) { & :where(.ButtonIcon) { - color: var(--color-text-absolute-white); + color: var(--color-icon-absolute-white); } }packages/bezier-tokens/scripts/lib/utils.ts (1)
20-21: extractNumber 폴백 로직을 단순화할 수 있습니다.Line 17의 정규식이 이미 숫자 형식을 검증했으므로,
extractNumber(trimmed)는 항상 값을 반환해야 합니다. 따라서 삼항 연산자의 폴백${trimmed}px는 불필요한 중복입니다.♻️ 제안된 리팩토링
export const toPx = (value: string) => { const trimmed = value.trim() if (!/^[+-]?\d+(\.\d+)?$/.test(trimmed)) { return trimmed } - const numeric = extractNumber(trimmed) - return numeric ? `${numeric}px` : `${trimmed}px` + return `${extractNumber(trimmed)}px` }packages/bezier-tokens/src/beta/semantic/border.json (1)
58-90: white- 토큰의 네이밍 컨벤션을 검토하세요.*
white-high,white-higher,white-highest토큰들은{color.surface.*}토큰을 참조하고 있지만, 이름에 "white"가 포함되어 있습니다. 다크 모드에서는 surface 색상이 흰색이 아닐 수 있으므로, 네이밍이 오해를 불러일으킬 수 있습니다.더 명확한 네이밍을 고려하세요 (예:
surface-high,surface-higher,surface-highest).packages/bezier-react/src/styles/components/radius.module.scss (1)
2-8: 깊은 node_modules 상대경로 일관성 개선 및 null 가드 추가 권장현재 코드는
@use '../../../../../node_modules/@channel.io/bezier-tokens/dist/beta/scss'로 깊은 상대경로를 사용하고 있는데, 레포 내 다른 CSS 임포트(../../node_modules/...)와 경로 패턴이 일관성 없어 빌드 구성이나 모노레포 레이아웃 변경 시 취약합니다. 또한map.keys(map.get($tokens, 'light-theme', 'radius'))에서 토큰이 누락되면 null 에러로 에러 메시지가 불명확해집니다. elevation, z-index 파일에서도 동일한 패턴이 사용되므로, 함께 개선하면 좋습니다. 동일 구조의 @error 가드를 추가하여 실패 시점을 명확히 하는 것을 권장합니다.packages/bezier-react/src/components/Modal/Modal.module.scss (1)
104-107: 포커스 링은:focus-visible로 좁히는 것도 고려해볼 만합니다.
현재는 마우스 클릭 포커스에도 outline이 노출될 수 있어 UX가 흔들릴 수 있습니다(키보드/프로그램matic 포커스는 유지).Proposed diff
- & [data-bezier-component='Button']:where(:focus) { + & [data-bezier-component='Button']:where(:focus-visible) { outline: 3px solid var(--color-state-action-light); }packages/bezier-tokens/src/beta/global/typography.json (1)
103-111: 폰트 굵기 정의가 확인되었습니다.400(regular)과 700(bold) 두 가지 굵기만 정의되어 있습니다. 디자인 시스템이 의도적으로 간단하게 유지하는 것으로 보이지만, 필요시 중간 굵기(500 또는 600)를 추가하는 것도 고려해볼 수 있습니다.
packages/bezier-react/src/components/TextArea/TextArea.module.scss (1)
28-31: (옵션) border가 없는데 border-color transition이 남아있습니다.현재
border: none;이라border-color트랜지션은 효과가 없어서 제거해도 됩니다.정리 제안(diff)
transition: - border-color var(--motion-transition-fast), box-shadow var(--motion-transition-fast);packages/bezier-tokens/scripts/validate-token-references.ts (1)
149-175: src 디렉토리 경로가 하드코딩되어 있습니다.Line 150에서
src디렉토리 경로가 하드코딩되어 있습니다. 현재 프로젝트 구조에서는 문제없지만, 향후 재사용성을 위해 CLI 인자로 받도록 개선할 수 있습니다.♻️ 제안: 디렉토리 경로를 CLI 인자로 받기
function main() { - const srcDir = join(process.cwd(), 'src') + const srcDir = join(process.cwd(), process.argv[2] || 'src') const jsonFiles = findJsonFiles(srcDir)packages/bezier-react/src/components/BetaTokenProvider/TokenProvider.types.ts (1)
7-20: 공개 API 인터페이스에 JSDoc 추가를 고려하세요.새로운 공개 인터페이스(
ThemeSpecificTokens,TokenContextValue,TokenProviderProps)에 JSDoc 주석을 추가하면 개발자 경험과 IDE 자동완성이 개선됩니다. 각 인터페이스의 목적과 사용 방법을 문서화하는 것이 좋습니다.</invoke comment_end -->
packages/bezier-tokens/scripts/build-tokens.ts (1)
114-150: 포맷 선택 로직을 헬퍼 함수로 추출하는 것을 고려하세요.중첩된 삼항 연산자가 세 번 반복됩니다(cjs, esm, css). 가독성을 위해 포맷 선택 로직을 별도 헬퍼 함수로 추출할 수 있습니다.
♻️ 제안된 리팩토링
+function selectFormat( + useBeta: boolean, + useAlpha: boolean, + betaFormat: string, + alphaFormat: string, + defaultFormat: string +): string { + if (useBeta) return betaFormat + if (useAlpha) return alphaFormat + return defaultFormat +} + function defineConfig({ useAlpha = false, useBeta = false, source, reference = [], basePath, destination, options, }: DefineConfigOptions): Config { const transforms = CustomTransforms.map(({ name }) => name) return { source: [...source, ...reference], platforms: { 'web/cjs': defineWebPlatform({ buildPath: `${basePath}/${BUILD_PATH.CJS}/`, files: [ { destination: `${destination}.js`, - format: useBeta - ? betaCustomJsCjs.name - : useAlpha - ? alphaCustomJsCjs.name - : customJsCjs.name, + format: selectFormat( + useBeta, + useAlpha, + betaCustomJsCjs.name, + alphaCustomJsCjs.name, + customJsCjs.name + ), filter: ({ filePath }) => source.some((src) => minimatch(filePath, src)), }, ], transforms, }),.changeset/young-nights-hide.md (1)
7-7: 체인지셋 설명의 문법을 개선할 수 있습니다.설명이 명확하지만, 문법을 약간 개선할 수 있습니다.
♻️ 제안하는 문법 개선
-Add V3 bezier tokens and update bezier components allow to use V3 tokens. +Add V3 bezier tokens and update bezier components to allow using V3 tokens.또는:
-Add V3 bezier tokens and update bezier components allow to use V3 tokens. +Add V3 bezier tokens and update bezier components to support V3 tokens.packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx (1)
50-52: 훅을 상수로 단순화하는 것을 고려하세요.
useAvatarRadiusToken이 이제 상수 값'42%'만 반환하므로, 토큰 시스템에서 더 이상 값을 파생하지 않습니다. 이 훅을 단순한 상수 export로 리팩토링하는 것을 고려해볼 수 있습니다.♻️ 제안하는 리팩토링
-export function useAvatarRadiusToken() { - return '42%' as const -} +export const AVATAR_BORDER_RADIUS = '42%' as const그리고 사용처에서:
-const AVATAR_BORDER_RADIUS = useAvatarRadiusToken() +const AVATAR_BORDER_RADIUS = useAlphaAvatarRadiusToken()또는 직접 상수를 사용:
-const AVATAR_BORDER_RADIUS = useAvatarRadiusToken() +// AVATAR_BORDER_RADIUS 상수를 import하여 사용packages/bezier-react/src/utils/style.test.ts (1)
1-8:colorTokenCssVar테스트 케이스 추가는 좋습니다.beta/v1 포맷 분기(특히
color-prefix 규칙)를 테스트로 고정한 건 회귀 방지에 도움이 됩니다. 다만 현재 케이스가 전부as any라서, 가능하면BetaSemanticColor/SemanticColor기반의 fixture(타입 안전한 배열)로 바꾸면 의도가 더 선명해질 것 같습니다.Also applies to: 61-106
packages/bezier-react/src/components/Select/Select.tsx (1)
118-129: Placeholder 색을 하드코딩할지(현재), 아니면textColor와 연동할지 의도 확인.현재 placeholder는 항상
color="text-neutral-lighter"인데, 디자인 의도가 “placeholder는 항상 lighter”가 맞다면 괜찮고, 그렇지 않다면textColor/별도 prop으로 제어 가능하게 하는 편이 일관적일 수 있습니다.packages/stylelint-bezier/src/plugins/validate-token/index.ts (2)
49-70:flattenBetaToken은flattenAlphaToken의 정확한 복제본입니다.두 함수가 동일한 로직을 가지고 있어 코드 중복이 발생합니다. 단일 함수로 통합하여 유지보수성을 개선할 수 있습니다.
♻️ 제안된 리팩토링
-function flattenAlphaToken(obj: object, result: Record<string, unknown> = {}) { +function flattenTokenWithValue(obj: object, result: Record<string, unknown> = {}) { for (const [key, value] of Object.entries(obj)) { if ( typeof value === 'object' && value !== null && // eslint-disable-next-line @typescript-eslint/no-explicit-any (value as any).value !== undefined && !Array.isArray(value) ) { // eslint-disable-next-line @typescript-eslint/no-explicit-any result[key] = (value as any).value } else if ( typeof value === 'object' && value !== null && !Array.isArray(value) ) { - flattenAlphaToken(value, result) + flattenTokenWithValue(value, result) } } return result } -function flattenBetaToken(obj: object, result: Record<string, unknown> = {}) { - for (const [key, value] of Object.entries(obj)) { - if ( - typeof value === 'object' && - value !== null && - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (value as any).value !== undefined && - !Array.isArray(value) - ) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - result[key] = (value as any).value - } else if ( - typeof value === 'object' && - value !== null && - !Array.isArray(value) - ) { - flattenBetaToken(value, result) - } - } - - return result -} const allTokens = { ...flattenObject(tokens.global), ...flattenObject(tokens.lightTheme), - ...flattenAlphaToken(alphaTokens.global), - ...flattenAlphaToken(alphaTokens.lightTheme), - ...flattenBetaToken(betaTokens.global), - ...flattenBetaToken(betaTokens.lightTheme), + ...flattenTokenWithValue(alphaTokens.global), + ...flattenTokenWithValue(alphaTokens.lightTheme), + ...flattenTokenWithValue(betaTokens.global), + ...flattenTokenWithValue(betaTokens.lightTheme), }
31-36: 타입 안전성 개선을 고려해 보세요.토큰 구조에 대한 적절한 TypeScript 인터페이스를 정의하면
eslint-disable주석과any타입 캐스팅을 제거할 수 있습니다.interface TokenWithValue { value: unknown [key: string]: unknown } function hasValue(value: unknown): value is TokenWithValue { return typeof value === 'object' && value !== null && 'value' in value }packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.test.tsx (1)
110-120: 아이콘 크기 검증이 누락되었습니다.테스트 설명은 "xxxs icon size" 및 "xs icon size"를 언급하지만, 실제로는 아이콘 존재 여부만 확인합니다. 아이콘 크기 클래스나 스타일을 검증하는 assertion을 추가하는 것이 좋습니다.
packages/bezier-react/src/types/props.ts (1)
391-398: TODO 주석이 명확하게 문서화되어 있습니다.
BetaTextSemanticColor가 v1 컴포넌트 호환성을 위해backgroundColor에 포함된다는 점이 명시되어 있어 향후 정리 시 참고하기 좋습니다. 다음 메이저 릴리스에서 이 호환성 레이어를 제거할 계획이 있는지 확인하고, 필요하다면 이슈를 생성하여 추적하는 것을 권장합니다.이 TODO를 추적하기 위한 이슈를 생성해 드릴까요?
packages/bezier-react/src/types/beta-tokens.ts (2)
9-10: TODO: theme name을 bezier-tokens에서 import하도록 개선 필요theme name이 하드코딩되어 있습니다. 향후 bezier-tokens 패키지에서 중앙화된 상수를 import하는 것이 일관성과 유지보수성 측면에서 더 좋습니다.
이 작업을 처리하기 위한 이슈를 생성하거나 구현을 도와드릴까요?
27-33: internal use 표시와 export 간의 불일치코멘트에서 "internal use only"라고 명시되어 있으나 타입이 export되고 있습니다. 만약 정말로 내부 사용 전용이라면 export를 제거하는 것을 고려하세요. 다만 다른 export된 타입에서 참조가 필요한 경우, 코멘트를 수정하여 "Primarily for internal use; prefer BetaSemanticColor for props" 같이 더 명확하게 표현하는 것이 좋습니다.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (158)
.changeset/young-nights-hide.mdpackages/bezier-figma-plugin/CHANGELOG.mdpackages/bezier-figma-plugin/package.jsonpackages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsxpackages/bezier-react/.storybook/preview.module.scsspackages/bezier-react/CHANGELOG.mdpackages/bezier-react/package.jsonpackages/bezier-react/src/components/AlphaAvatar/Avatar.module.scsspackages/bezier-react/src/components/AlphaAvatar/Avatar.tsxpackages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.module.scsspackages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsxpackages/bezier-react/src/components/AlphaButton/Button.module.scsspackages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scsspackages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scsspackages/bezier-react/src/components/AlphaIconButton/IconButton.module.scsspackages/bezier-react/src/components/AlphaLoader/Loader.module.scsspackages/bezier-react/src/components/AlphaStatusBadge/AlphaStatusBadge.stories.tsxpackages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.module.scsspackages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.test.tsxpackages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsxpackages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scsspackages/bezier-react/src/components/AlphaToggleButtonGroup/AlphaToggleButtonGroup.stories.tsxpackages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsxpackages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scsspackages/bezier-react/src/components/AppProvider/AppProvider.tsxpackages/bezier-react/src/components/Avatar/Avatar.tsxpackages/bezier-react/src/components/AvatarGroup/AvatarGroup.module.scsspackages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsxpackages/bezier-react/src/components/Banner/Banner.module.scsspackages/bezier-react/src/components/BaseButton/BaseButton.module.scsspackages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.module.scsspackages/bezier-react/src/components/BetaTokenProvider/TokenProvider.tsxpackages/bezier-react/src/components/BetaTokenProvider/TokenProvider.types.tspackages/bezier-react/src/components/BetaTokenProvider/index.tspackages/bezier-react/src/components/Box/Box.stories.tsxpackages/bezier-react/src/components/Box/Box.tsxpackages/bezier-react/src/components/Button/Button.module.scsspackages/bezier-react/src/components/Button/Button.stories.tsxpackages/bezier-react/src/components/Center/Center.stories.tsxpackages/bezier-react/src/components/CheckableAvatar/CheckableAvatar.module.scsspackages/bezier-react/src/components/CheckableAvatar/CheckableAvatar.tsxpackages/bezier-react/src/components/Checkbox/Checkbox.module.scsspackages/bezier-react/src/components/Checkbox/Checkbox.tsxpackages/bezier-react/src/components/Divider/Divider.module.scsspackages/bezier-react/src/components/FormHelperText/FormHelperText.tsxpackages/bezier-react/src/components/FormLabel/FormLabel.tsxpackages/bezier-react/src/components/Help/Help.module.scsspackages/bezier-react/src/components/Help/Help.tsxpackages/bezier-react/src/components/Icon/Icon.mdxpackages/bezier-react/src/components/Icon/Icon.module.scsspackages/bezier-react/src/components/Icon/Icon.stories.tsxpackages/bezier-react/src/components/Icon/Icon.test.tsxpackages/bezier-react/src/components/Icon/Icon.tsxpackages/bezier-react/src/components/KeyValueItem/KeyValueItem.module.scsspackages/bezier-react/src/components/KeyValueItem/KeyValueItem.test.tsxpackages/bezier-react/src/components/KeyValueItem/KeyValueItem.tsxpackages/bezier-react/src/components/LegacyIcon/LegacyIcon.tsxpackages/bezier-react/src/components/LegacyIcon/LegacyIcon.types.tspackages/bezier-react/src/components/LegacyIcon/utils.tspackages/bezier-react/src/components/LegacyStack/LegacyStack.stories.tsxpackages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.module.scsspackages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.stories.tsxpackages/bezier-react/src/components/LegacyTooltip/LegacyTooltipContent.tsxpackages/bezier-react/src/components/ListItem/ListItem.module.scsspackages/bezier-react/src/components/ListItem/ListItem.tsxpackages/bezier-react/src/components/Modal/Modal.module.scsspackages/bezier-react/src/components/Modal/Modal.tsxpackages/bezier-react/src/components/NavGroup/NavGroup.stories.tsxpackages/bezier-react/src/components/NavGroup/NavGroup.test.tsxpackages/bezier-react/src/components/NavGroup/NavGroup.tsxpackages/bezier-react/src/components/NavItem/NavItem.module.scsspackages/bezier-react/src/components/NavItem/NavItem.stories.tsxpackages/bezier-react/src/components/NavItem/NavItem.test.tsxpackages/bezier-react/src/components/NavItem/NavItem.tsxpackages/bezier-react/src/components/OutlineItem/OutlineItem.module.scsspackages/bezier-react/src/components/OutlineItem/OutlineItem.tsxpackages/bezier-react/src/components/Overlay/Overlay.module.scsspackages/bezier-react/src/components/Overlay/Overlay.stories.tsxpackages/bezier-react/src/components/ProgressBar/ProgressBar.module.scsspackages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsxpackages/bezier-react/src/components/RadioGroup/RadioGroup.module.scsspackages/bezier-react/src/components/RadioGroup/RadioGroup.tsxpackages/bezier-react/src/components/SectionLabel/SectionLabel.tsxpackages/bezier-react/src/components/SegmentedControl/SegmentedControl.module.scsspackages/bezier-react/src/components/SegmentedControl/SegmentedControl.stories.tsxpackages/bezier-react/src/components/Select/Select.module.scsspackages/bezier-react/src/components/Select/Select.tsxpackages/bezier-react/src/components/Select/Select.types.tspackages/bezier-react/src/components/Slider/Slider.module.scsspackages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.stories.tsxpackages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.test.tsxpackages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsxpackages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.types.tspackages/bezier-react/src/components/Spinner/Spinner.test.tsxpackages/bezier-react/src/components/Spinner/Spinner.tsxpackages/bezier-react/src/components/Stack/Stack.stories.tsxpackages/bezier-react/src/components/Status/Status.module.scsspackages/bezier-react/src/components/Status/Status.stories.tsxpackages/bezier-react/src/components/Status/Status.test.tsxpackages/bezier-react/src/components/Status/Status.tsxpackages/bezier-react/src/components/Switch/Switch.module.scsspackages/bezier-react/src/components/Tabs/Tabs.module.scsspackages/bezier-react/src/components/Tabs/Tabs.stories.tsxpackages/bezier-react/src/components/Tag/Tag.module.scsspackages/bezier-react/src/components/Tag/Tag.tsxpackages/bezier-react/src/components/Text/Text.module.scsspackages/bezier-react/src/components/Text/Text.stories.tsxpackages/bezier-react/src/components/Text/Text.tsxpackages/bezier-react/src/components/Text/Text.types.tspackages/bezier-react/src/components/TextArea/TextArea.module.scsspackages/bezier-react/src/components/TextField/TextField.module.scsspackages/bezier-react/src/components/TextField/TextField.test.tsxpackages/bezier-react/src/components/TextField/TextField.tsxpackages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsxpackages/bezier-react/src/components/ThemeProvider/index.tspackages/bezier-react/src/components/Toast/Toast.module.scsspackages/bezier-react/src/components/Toast/Toast.tsxpackages/bezier-react/src/components/Tooltip/Tooltip.module.scsspackages/bezier-react/src/components/Tooltip/Tooltip.tsxpackages/bezier-react/src/index.tspackages/bezier-react/src/styles/_base.scsspackages/bezier-react/src/styles/_tokens.scsspackages/bezier-react/src/styles/components/elevation.module.scsspackages/bezier-react/src/styles/components/radius.module.scsspackages/bezier-react/src/styles/components/z-index.module.scsspackages/bezier-react/src/styles/mixins/_typography.scsspackages/bezier-react/src/types/beta-tokens.tspackages/bezier-react/src/types/props-helpers.tspackages/bezier-react/src/types/props.tspackages/bezier-react/src/types/utils.tspackages/bezier-react/src/utils/style.test.tspackages/bezier-react/src/utils/style.tspackages/bezier-tokens/CHANGELOG.mdpackages/bezier-tokens/package.jsonpackages/bezier-tokens/scripts/build-tokens.tspackages/bezier-tokens/scripts/lib/format.tspackages/bezier-tokens/scripts/lib/transform.tspackages/bezier-tokens/scripts/lib/utils.tspackages/bezier-tokens/scripts/validate-token-references.tspackages/bezier-tokens/src/beta/global/color.jsonpackages/bezier-tokens/src/beta/global/dimension.jsonpackages/bezier-tokens/src/beta/global/layer.jsonpackages/bezier-tokens/src/beta/global/motion.jsonpackages/bezier-tokens/src/beta/global/typography.jsonpackages/bezier-tokens/src/beta/semantic/backdrop.jsonpackages/bezier-tokens/src/beta/semantic/border.jsonpackages/bezier-tokens/src/beta/semantic/dark-theme/color.jsonpackages/bezier-tokens/src/beta/semantic/elevation.jsonpackages/bezier-tokens/src/beta/semantic/layer.jsonpackages/bezier-tokens/src/beta/semantic/light-theme/color.jsonpackages/bezier-tokens/src/beta/semantic/motion.jsonpackages/bezier-tokens/src/beta/semantic/opacity.jsonpackages/bezier-tokens/src/beta/semantic/radius.jsonpackages/bezier-tokens/src/beta/semantic/state.jsonpackages/bezier-tokens/src/beta/semantic/typography.jsonpackages/stylelint-bezier/CHANGELOG.mdpackages/stylelint-bezier/package.jsonpackages/stylelint-bezier/src/plugins/validate-token/index.ts
💤 Files with no reviewable changes (1)
- packages/bezier-react/src/components/KeyValueItem/KeyValueItem.test.tsx
🧰 Additional context used
🧬 Code graph analysis (29)
packages/bezier-react/src/components/Text/Text.types.ts (2)
packages/bezier-react/src/types/tokens.ts (1)
SemanticColor(31-31)packages/bezier-react/src/types/beta-tokens.ts (1)
BetaSemanticColor(38-41)
packages/bezier-react/src/components/TextField/TextField.test.tsx (2)
packages/bezier-react/src/utils/test.tsx (1)
render(16-25)packages/bezier-react/src/components/TextField/TextField.tsx (1)
TextField(164-445)
packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx (1)
packages/bezier-react/src/components/Icon/Icon.tsx (1)
Icon(16-51)
packages/bezier-react/src/components/Tabs/Tabs.stories.tsx (3)
packages/bezier-react/src/components/Text/Text.tsx (1)
Text(28-76)packages/bezier-react/src/components/Tabs/Tabs.tsx (1)
TabContent(223-235)packages/bezier-react/src/components/Tabs/index.ts (1)
TabContent(4-4)
packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx (1)
packages/bezier-react/src/utils/style.ts (1)
colorTokenCssVar(69-95)
packages/bezier-react/src/components/Select/Select.types.ts (2)
packages/bezier-react/src/types/tokens.ts (1)
ZIndex(29-29)packages/bezier-react/src/types/beta-tokens.ts (1)
BetaZIndex(123-126)
packages/bezier-react/src/components/Spinner/Spinner.test.tsx (2)
packages/bezier-react/src/components/Spinner/Spinner.tsx (1)
SPINNER_TEST_ID(14-14)packages/bezier-react/src/utils/style.ts (1)
colorTokenCssVar(69-95)
packages/bezier-react/src/components/Text/Text.tsx (1)
packages/bezier-react/src/utils/style.ts (1)
colorTokenCssVar(69-95)
packages/bezier-react/src/components/Spinner/Spinner.tsx (1)
packages/bezier-react/src/utils/style.ts (1)
colorTokenCssVar(69-95)
packages/bezier-react/src/components/Button/Button.stories.tsx (2)
packages/bezier-react/src/components/Text/Text.tsx (1)
Text(28-76)packages/bezier-react/src/components/Text/index.ts (1)
Text(1-1)
packages/bezier-react/src/components/Status/Status.test.tsx (3)
packages/bezier-react/src/utils/test.tsx (1)
render(16-25)packages/bezier-react/src/components/Status/Status.tsx (1)
Status(34-65)packages/bezier-react/src/utils/style.ts (1)
colorTokenCssVar(69-95)
packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.test.tsx (3)
packages/bezier-react/src/utils/test.tsx (1)
render(16-25)packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx (1)
StatusBadge(31-79)packages/bezier-react/src/utils/style.ts (1)
colorTokenCssVar(69-95)
packages/bezier-react/src/components/Tooltip/Tooltip.tsx (1)
packages/bezier-react/src/components/Text/Text.tsx (1)
Text(28-76)
packages/bezier-react/src/components/BetaTokenProvider/TokenProvider.tsx (4)
packages/bezier-react/src/utils/react.ts (1)
createContext(31-49)packages/bezier-react/src/components/BetaTokenProvider/TokenProvider.types.ts (3)
TokenContextValue(12-15)ThemeSpecificTokens(7-10)TokenProviderProps(17-20)packages/bezier-react/src/types/beta-tokens.ts (1)
BetaThemeName(10-10)packages/bezier-react/src/components/BetaTokenProvider/index.ts (2)
TokenProvider(2-2)TokenProviderProps(5-5)
packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.types.ts (1)
packages/bezier-react/src/types/beta-tokens.ts (1)
BetaSemanticColor(38-41)
packages/bezier-react/src/components/Icon/Icon.tsx (1)
packages/bezier-react/src/utils/style.ts (1)
colorTokenCssVar(69-95)
packages/bezier-react/src/components/NavGroup/NavGroup.test.tsx (3)
packages/bezier-react/src/utils/test.tsx (1)
render(16-25)packages/bezier-react/src/components/NavGroup/NavGroup.tsx (1)
NavGroup(34-125)packages/bezier-react/src/components/NavItem/NavItem.tsx (1)
NavItem(35-101)
packages/bezier-react/src/utils/style.test.ts (1)
packages/bezier-react/src/utils/style.ts (1)
colorTokenCssVar(69-95)
packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx (2)
packages/bezier-react/src/types/beta-tokens.ts (1)
BetaSemanticColor(38-41)packages/bezier-react/src/utils/style.ts (1)
colorTokenCssVar(69-95)
packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx (1)
packages/bezier-react/src/components/Icon/Icon.tsx (1)
Icon(16-51)
packages/bezier-react/src/types/props-helpers.ts (3)
packages/bezier-react/src/types/tokens.ts (2)
Elevation(41-44)ZIndex(29-29)packages/bezier-react/src/types/beta-tokens.ts (3)
BetaElevation(115-118)BetaRadius(99-102)BetaZIndex(123-126)packages/bezier-react/src/utils/style.ts (1)
colorTokenCssVar(69-95)
packages/bezier-react/src/utils/style.ts (2)
packages/bezier-react/src/types/tokens.ts (2)
FlattenAllToken(19-19)SemanticColor(31-31)packages/bezier-react/src/types/beta-tokens.ts (2)
BetaFlattenAllToken(23-25)BetaSemanticColor(38-41)
packages/bezier-react/src/types/beta-tokens.ts (1)
packages/bezier-react/src/types/utils.ts (3)
ExtractKeys(16-16)RemovePrefix(1-4)StartsWithPrefix(6-14)
packages/bezier-react/src/components/Icon/Icon.stories.tsx (6)
packages/bezier-react/src/types/beta-tokens.ts (1)
BetaSemanticColor(38-41)packages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsx (1)
useBetaTokens(48-50)packages/bezier-react/src/components/ThemeProvider/index.ts (1)
useBetaTokens(9-9)packages/bezier-react/src/components/ListItem/ListItem.tsx (1)
ListItem(30-130)packages/bezier-react/src/components/Text/Text.tsx (1)
Text(28-76)packages/bezier-react/src/components/Icon/Icon.tsx (1)
Icon(16-51)
packages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsx (2)
packages/bezier-react/src/components/ThemeProvider/index.ts (1)
useBetaTokens(9-9)packages/bezier-react/src/components/BetaTokenProvider/index.ts (1)
useBetaTokenContext(3-3)
packages/bezier-react/src/components/Icon/Icon.test.tsx (1)
packages/bezier-react/src/components/Icon/Icon.tsx (1)
ICON_TEST_ID(14-14)
packages/bezier-tokens/scripts/lib/transform.ts (1)
packages/bezier-tokens/scripts/lib/utils.ts (1)
toPx(15-22)
packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx (2)
packages/bezier-react/src/components/Avatar/Avatar.tsx (1)
useAvatarRadiusToken(26-28)packages/bezier-react/src/components/AlphaAvatar/index.ts (1)
useAvatarRadiusToken(3-3)
packages/bezier-react/src/types/props.ts (2)
packages/bezier-react/src/types/tokens.ts (7)
SemanticColor(31-31)BackgroundSemanticColor(32-32)BackgroundTextSemanticColor(33-36)BorderSemanticColor(38-38)Radius(24-24)Elevation(41-44)ZIndex(29-29)packages/bezier-react/src/types/beta-tokens.ts (7)
BetaSemanticColor(38-41)BetaBackgroundSemanticColor(68-71)BetaTextSemanticColor(46-46)BetaBorderSemanticColor(75-78)BetaRadius(99-102)BetaElevation(115-118)BetaZIndex(123-126)
|
|
||
| ### Patch Changes | ||
|
|
||
| - Add invese color tokens and update grey-\* color value. Update bezier component colors ([#2767](https://github.com/channel-io/bezier-react/pull/2767)) by @timok1m |
There was a problem hiding this comment.
오타: "invese"는 "inverse"로 수정해야 합니다.
✏️ 오타 수정
-- Add invese color tokens and update grey-\* color value. Update bezier component colors ([#2767](https://github.com/channel-io/bezier-react/pull/2767)) by @timok1m
+- Add inverse color tokens and update grey-\* color value. Update bezier component colors ([#2767](https://github.com/channel-io/bezier-react/pull/2767)) by @timok1m📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| - Add invese color tokens and update grey-\* color value. Update bezier component colors ([#2767](https://github.com/channel-io/bezier-react/pull/2767)) by @timok1m | |
| - Add inverse color tokens and update grey-\* color value. Update bezier component colors ([#2767](https://github.com/channel-io/bezier-react/pull/2767)) by @timok1m |
🤖 Prompt for AI Agents
In @packages/bezier-react/CHANGELOG.md at line 23, Fix the typo in the CHANGELOG
entry: replace "invese" with "inverse" in the changed line that currently reads
"Add invese color tokens and update grey- * color value. Update bezier component
colors ..." so the text becomes "Add inverse color tokens and update grey-*
color value. Update bezier component colors ...".
| red: var(--color-text-accent-red), | ||
| orange: var(--color-text-accent-orange), | ||
| green: var(--color-text-accent-green), | ||
| pink: var(--color-text-accent-pink,), |
There was a problem hiding this comment.
CSS 구문 오류: var() 내부에 불필요한 쉼표가 있습니다.
var(--color-text-accent-pink,)에서 쉼표 뒤에 fallback 값이 없습니다. 이는 의도하지 않은 동작을 유발할 수 있습니다.
🐛 수정 제안
- pink: var(--color-text-accent-pink,),
+ pink: var(--color-text-accent-pink),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| pink: var(--color-text-accent-pink,), | |
| pink: var(--color-text-accent-pink), |
🤖 Prompt for AI Agents
In @packages/bezier-react/src/components/AlphaButton/Button.module.scss at line
142, The CSS contains a syntax error: the declaration for the "pink" token uses
var(--color-text-accent-pink,) with an extraneous trailing comma; remove the
trailing comma or provide a valid fallback value inside the var() so the "pink"
property becomes var(--color-text-accent-pink) or var(--color-text-accent-pink,
<fallback>), fixing the invalid CSS in Button.module.scss.
Comment on lines
+54
to
+62
| it('should use text-accent-yellow when doNotDisturb is true and online is false', () => { | ||
| const { container } = renderStatusBadge({ | ||
| online: false, | ||
| doNotDisturb: true, | ||
| }) | ||
| const badge = container.querySelector('div') | ||
| const expectedColor = colorTokenCssVar('surface-high') | ||
| expect(badge).toHaveStyle(`--b-status-bg-color: ${expectedColor}`) | ||
| }) |
There was a problem hiding this comment.
테스트 설명이 실제 검증 내용과 일치하지 않습니다.
테스트 이름은 "text-accent-yellow"를 언급하지만, 실제로는 backgroundColor가 surface-high인지 확인합니다. 이 테스트는 iconColor 로직이 아닌 backgroundColor 로직을 테스트하므로 혼란을 줄 수 있습니다.
✏️ 테스트 설명 수정 제안
- it('should use text-accent-yellow when doNotDisturb is true and online is false', () => {
+ it('should use surface-high for background when doNotDisturb is true', () => {
Comment on lines
+61
to
+62
| box-shadow: var(--state-input-default); | ||
| box-shadow: 0 0 0 1px var(--color-fill-accent-blue-heavier) inset; |
There was a problem hiding this comment.
중복된 box-shadow 선언을 확인하세요.
61번 라인의 box-shadow: var(--state-input-default);가 62번 라인의 인셋 그림자 선언에 의해 즉시 재정의됩니다. 첫 번째 선언이 의도적인 폴백인지, 아니면 리팩토링 과정에서 남겨진 불필요한 코드인지 확인이 필요합니다.
🐛 제안된 수정
불필요한 경우 첫 번째 선언을 제거하세요:
&:where(.variant-primary) {
background-color: var(--color-fill-accent-blue);
- box-shadow: var(--state-input-default);
box-shadow: 0 0 0 1px var(--color-fill-accent-blue-heavier) inset;
}또는 두 그림자를 결합하려는 의도였다면 쉼표로 구분하세요:
&:where(.variant-primary) {
background-color: var(--color-fill-accent-blue);
- box-shadow: var(--state-input-default);
- box-shadow: 0 0 0 1px var(--color-fill-accent-blue-heavier) inset;
+ box-shadow: var(--state-input-default), 0 0 0 1px var(--color-fill-accent-blue-heavier) inset;
}🤖 Prompt for AI Agents
In
@packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss
around lines 61 - 62, Remove the redundant box-shadow declaration in
ToggleButton.module.scss: the first box-shadow: var(--state-input-default) is
immediately overridden by the inset declaration on the following line; either
delete the first fallback if it's unnecessary or merge the two values into a
single comma-separated box-shadow if both effects are required, updating the
rules where box-shadow appears in the AlphaToggleButton/ToggleButton styles.
Comment on lines
22
to
60
| &:where(.variant-default) { | ||
| --b-tag-badge-background-color: var(--bg-black-lighter); | ||
| --b-tag-badge-color: var(--txt-black-darkest); | ||
| --b-tag-badge-background-color: var(--color-fill-neutral-light); | ||
| --b-tag-badge-color: var(--color-text-neutral); | ||
| } | ||
|
|
||
| &:where(.variant-monochrome-light) { | ||
| --b-tag-badge-background-color: var(--bg-black-lighter); | ||
| --b-tag-badge-color: var(--txt-black-dark); | ||
| --b-tag-badge-background-color: var(--color-fill-neutral-light); | ||
| --b-tag-badge-color: var(--color-text-neutral-lighter); | ||
| } | ||
|
|
||
| &:where(.variant-monochrome-dark) { | ||
| --b-tag-badge-background-color: var(--bg-black-darker); | ||
| --b-tag-badge-color: var(--bgtxt-absolute-white-dark); | ||
| --b-tag-badge-background-color: var(--color-fill-neutral-heavier); | ||
| --b-tag-badge-color: var(--color-text-absolute-white); | ||
| } | ||
|
|
||
| &:where(.variant-blue) { | ||
| --b-tag-badge-background-color: var(--bgtxt-blue-lighter); | ||
| --b-tag-badge-color: var(--bgtxt-blue-normal); | ||
| --b-tag-badge-background-color: var(--color-fill-accent-blue-heavy); | ||
| --b-tag-badge-color: var(--color-text-accent-blue); | ||
| } | ||
|
|
||
| &:where(.variant-cobalt) { | ||
| --b-tag-badge-background-color: var(--bgtxt-cobalt-lighter); | ||
| --b-tag-badge-color: var(--bgtxt-cobalt-normal); | ||
| --b-tag-badge-background-color: var(--color-fill-accent-cobalt-heavy); | ||
| --b-tag-badge-color: var(--color-text-accent-cobalt); | ||
| } | ||
|
|
||
| &:where(.variant-teal) { | ||
| --b-tag-badge-background-color: var(--bgtxt-teal-lighter); | ||
| --b-tag-badge-color: var(--bgtxt-teal-normal); | ||
| --b-tag-badge-background-color: var(--color-fill-accent-teal-heavy); | ||
| --b-tag-badge-color: var(--color-text-accent-teal); | ||
| } | ||
|
|
||
| &:where(.variant-green) { | ||
| --b-tag-badge-background-color: var(--bgtxt-green-lighter); | ||
| --b-tag-badge-color: var(--bgtxt-green-normal); | ||
| --b-tag-badge-background-color: var(--color-fill-accent-green-heavy); | ||
| --b-tag-badge-color: var(--color-text-accent-green); | ||
| } | ||
|
|
||
| &:where(.variant-olive) { | ||
| --b-tag-badge-background-color: var(--bgtxt-olive-lighter); | ||
| --b-tag-badge-color: var(--bgtxt-olive-normal); | ||
| --b-tag-badge-background-color: var(--color-fill-accent-olive-heavy); | ||
| --b-tag-badge-color: var(--color-fill-accent-olive-heavier); | ||
| } |
There was a problem hiding this comment.
olive variant의 텍스트 컬러가 color-text-*가 아니라 color-fill-*로 설정되어 있어 보입니다(오타 가능성 큼).
Line 59에서 --b-tag-badge-color에 fill 토큰을 넣고 있어서, 실제 텍스트 컬러가 의도와 다르게 나올 가능성이 큽니다. 다른 variant들과 패턴도 불일치합니다.
수정 제안(diff)
&:where(.variant-olive) {
--b-tag-badge-background-color: var(--color-fill-accent-olive-heavy);
- --b-tag-badge-color: var(--color-fill-accent-olive-heavier);
+ --b-tag-badge-color: var(--color-text-accent-olive);
}🤖 Prompt for AI Agents
In @packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.module.scss
around lines 22 - 60, The olive variant sets --b-tag-badge-color to a fill token
by mistake; update the .variant-olive block so --b-tag-badge-color uses the
correct text token (consistent with other variants) instead of a color-fill
token. Locate the &:where(.variant-olive) rule and replace the current value
assigned to --b-tag-badge-color with the proper --color-text-accent-olive (or
the project's equivalent text token) so text color matches other variants.
Comment on lines
+15
to
+22
| export const toPx = (value: string) => { | ||
| const trimmed = value.trim() | ||
| if (!/^[+-]?\d+(\.\d+)?$/.test(trimmed)) { | ||
| return value | ||
| } | ||
| const numeric = extractNumber(trimmed) | ||
| return numeric ? `${numeric}px` : `${trimmed}px` | ||
| } |
There was a problem hiding this comment.
비정형 입력값 처리 시 원본 값 대신 트림된 값을 반환해야 합니다.
Line 18에서 정규식 테스트를 통과하지 못한 경우 value를 반환하는데, 이는 함수 시작 시 수행한 trim() 결과를 무시합니다. 공백이 포함된 입력값(예: " 10px ")이 전달되면 공백이 그대로 보존된 값이 반환됩니다.
🐛 제안된 수정
export const toPx = (value: string) => {
const trimmed = value.trim()
if (!/^[+-]?\d+(\.\d+)?$/.test(trimmed)) {
- return value
+ return trimmed
}
const numeric = extractNumber(trimmed)
return numeric ? `${numeric}px` : `${trimmed}px`
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const toPx = (value: string) => { | |
| const trimmed = value.trim() | |
| if (!/^[+-]?\d+(\.\d+)?$/.test(trimmed)) { | |
| return value | |
| } | |
| const numeric = extractNumber(trimmed) | |
| return numeric ? `${numeric}px` : `${trimmed}px` | |
| } | |
| export const toPx = (value: string) => { | |
| const trimmed = value.trim() | |
| if (!/^[+-]?\d+(\.\d+)?$/.test(trimmed)) { | |
| return trimmed | |
| } | |
| const numeric = extractNumber(trimmed) | |
| return numeric ? `${numeric}px` : `${trimmed}px` | |
| } |
🤖 Prompt for AI Agents
In @packages/bezier-tokens/scripts/lib/utils.ts around lines 15 - 22, The toPx
function returns the original value when the regex test fails, which preserves
unwanted surrounding whitespace; change that return to use the trimmed string
instead (use the local trimmed variable) so non-matching inputs like " 10px "
return "10px" rather than the raw value; ensure the regex check and subsequent
logic consistently operate on trimmed rather than the original value.
Comment on lines
+1
to
+12
| { | ||
| "backdrop": { | ||
| "large": { | ||
| "value": "{dimension.60}", | ||
| "type": "backdrop" | ||
| }, | ||
| "small": { | ||
| "value": "{dimension.6}", | ||
| "type": "backdrop" | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for backdrop type handling in the codebase
rg -n --type=ts --type=js '"backdrop"' -C 3Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Search for token type definitions and schema files
fd -e json -e ts -e js | grep -E '(schema|type|token)' | head -20Repository: channel-io/bezier-react
Length of output: 1536
🏁 Script executed:
# Look for backdrop specific references
rg -n 'backdrop' --type=ts --type=js --type=json | head -30Repository: channel-io/bezier-react
Length of output: 303
🏁 Script executed:
# Search for token builder/validator files
fd -e ts -e js | xargs rg -l 'token.*builder\|validator' | head -10Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Find all files in bezier-tokens related to token building/processing
find packages/bezier-tokens -type f \( -name "*.ts" -o -name "*.js" \) | head -20Repository: channel-io/bezier-react
Length of output: 490
🏁 Script executed:
# Look for type definitions/schema files
find packages/bezier-tokens -type f \( -name "*.ts" -o -name "*.json" \) | grep -iE '(type|schema|define)' | head -20Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Search for token builder or processor logic
rg -n 'type.*backdrop\|backdrop.*type' packages/bezier-tokens/ -C 3Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Check the token type definitions in bezier-tokens
find packages/bezier-tokens -name "*.json" | xargs rg -l 'type' | head -10Repository: channel-io/bezier-react
Length of output: 589
🏁 Script executed:
# Look for token generation or output files
find packages/bezier-tokens -type d -name 'dist' -o -name 'build' -o -name 'generated'Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Read the build-tokens.ts to understand the processing pipeline
cat packages/bezier-tokens/scripts/build-tokens.tsRepository: channel-io/bezier-react
Length of output: 8822
🏁 Script executed:
# Read the transform.ts which likely handles token transformation
cat packages/bezier-tokens/scripts/lib/transform.tsRepository: channel-io/bezier-react
Length of output: 4358
🏁 Script executed:
# Look for where token types are defined or validated
rg -n 'type.*:' packages/bezier-tokens/scripts/ -A 2 -B 2Repository: channel-io/bezier-react
Length of output: 5018
🏁 Script executed:
# Check for any JSON files that might define valid token types
find packages/bezier-tokens -name "*.json" -type f | xargs grep -l '"type"' | head -10Repository: channel-io/bezier-react
Length of output: 627
🏁 Script executed:
# Look for backdrop type in any configuration or type definition
rg -n 'backdrop' packages/bezier-tokens/Repository: channel-io/bezier-react
Length of output: 303
🏁 Script executed:
# Check if there are any generated output files with backdrop tokens
find packages/bezier-tokens/dist -type f -name "*.css" -o -name "*.js" -o -name "*.mjs" 2>/dev/null | head -5Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Look for validation logic
cat packages/bezier-tokens/scripts/validate-token-references.tsRepository: channel-io/bezier-react
Length of output: 4869
🏁 Script executed:
# Search for any mention of valid token types or schema
rg -n 'valid.*type\|type.*valid\|backdrop' packages/bezier-tokens/scripts/ -B 2 -A 2Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Check the beta semantic directory to see all token files
ls -la packages/bezier-tokens/src/beta/semantic/Repository: channel-io/bezier-react
Length of output: 856
🏁 Script executed:
# Look for any type restrictions or schema definitions
find packages/bezier-tokens -name "*.json" -type f -exec grep -l '"type".*:' {} \; | xargs head -30Repository: channel-io/bezier-react
Length of output: 19217
🏁 Script executed:
# Check if backdrop CSS variables exist in generated files
find packages/bezier-tokens/dist -type f \( -name "*.css" -o -name "*.js" -o -name "*.mjs" \) 2>/dev/null | head -10Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Search for any mention of backdrop in generated output or documentation
rg -n 'backdrop' packages/bezier-tokens/dist/ 2>/dev/null || echo "No backdrop found in dist"Repository: channel-io/bezier-react
Length of output: 92
🏁 Script executed:
# Look for any comments or TODOs about backdrop type
rg -n 'backdrop' packages/bezier-tokens/src/ --type=ts --type=js --type=json -B 2 -A 2Repository: channel-io/bezier-react
Length of output: 875
🏁 Script executed:
# Check if there's any documentation about supported token types
find packages/bezier-tokens -name "*.md" -o -name "README*" | head -5Repository: channel-io/bezier-react
Length of output: 135
🏁 Script executed:
# Look at the full backdrop.json file again with context
cat -n packages/bezier-tokens/src/beta/semantic/backdrop.jsonRepository: channel-io/bezier-react
Length of output: 332
🏁 Script executed:
# Check README for information about token types
head -50 packages/bezier-tokens/README.mdRepository: channel-io/bezier-react
Length of output: 1157
🏁 Script executed:
# Search for how tokens are filtered or processed
rg -n 'filter.*type\|type.*filter' packages/bezier-tokens/scripts/ -B 2 -A 2Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Look for where backdrop tokens might be excluded or filtered out
rg -n 'backdrop\|exclude\|ignore' packages/bezier-tokens/ --type=ts --type=js -B 2 -A 2Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Check if Style Dictionary has any documentation comment or type checking
rg -n 'StyleDictionary\|token.*type' packages/bezier-tokens/scripts/build-tokens.ts -B 1 -A 1Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Look at a working token type (like shadow) to understand the pattern
cat packages/bezier-tokens/src/beta/semantic/elevation.json | head -40Repository: channel-io/bezier-react
Length of output: 1049
🏁 Script executed:
# Check if there are any build logs or error messages about backdrop
cat packages/bezier-tokens/CHANGELOG.md | head -50Repository: channel-io/bezier-react
Length of output: 1640
🏁 Script executed:
# Search more broadly for backdrop references in the entire repo
rg -n 'backdrop' packages/bezier-tokens/ --type=json --type=ts --type=js --type=mdRepository: channel-io/bezier-react
Length of output: 303
🏁 Script executed:
# Check if there's a specific type schema or validation
find packages/bezier-tokens -type f \( -name "*.json" -o -name "*.ts" \) | xargs grep -l '"type"' | xargs grep -l 'schema\|valid' 2>/dev/null || echo "No schema found"Repository: channel-io/bezier-react
Length of output: 149
🏁 Script executed:
# Verify that other semantic tokens DO appear in generated output
rg -n 'elevation' packages/bezier-tokens/dist/ 2>/dev/null || echo "No elevation found"
rg -n 'border' packages/bezier-tokens/dist/ 2>/dev/null | head -5 || echo "No border found"Repository: channel-io/bezier-react
Length of output: 85
🏁 Script executed:
# List actual files in the dist directory
find packages/bezier-tokens/dist -type f | head -20Repository: channel-io/bezier-react
Length of output: 129
🏁 Script executed:
# Check what files are actually generated
ls -la packages/bezier-tokens/dist/ 2>/dev/null || echo "dist not found"Repository: channel-io/bezier-react
Length of output: 81
🏁 Script executed:
# Try building and check what happens
cd packages/bezier-tokens && npm run build 2>&1 | head -50Repository: channel-io/bezier-react
Length of output: 558
🏁 Script executed:
# Look for any recent changes or PRs mentioning backdrop
git log --all --oneline --grep="backdrop" 2>/dev/null | head -10Repository: channel-io/bezier-react
Length of output: 139
🏁 Script executed:
# Check git history of backdrop.json file
git log --oneline packages/bezier-tokens/src/beta/semantic/backdrop.json 2>/dev/null | head -10Repository: channel-io/bezier-react
Length of output: 136
🏁 Script executed:
# Check the full git history for backdrop.json
git log --all --pretty=format:"%h %s" -- packages/bezier-tokens/src/beta/semantic/backdrop.json 2>/dev/nullRepository: channel-io/bezier-react
Length of output: 136
🏁 Script executed:
# Get more detail on that commit
git show 8e741ca5 --stat 2>/dev/null | head -50Repository: channel-io/bezier-react
Length of output: 1912
🏁 Script executed:
# Check if backdrop.json was added in a recent PR
git log --all --oneline -20 -- packages/bezier-tokens/src/beta/semantic/ 2>/dev/nullRepository: channel-io/bezier-react
Length of output: 136
🏁 Script executed:
# Look at the specific commit that mentions backdrop
git log -p --all -- packages/bezier-tokens/src/beta/semantic/backdrop.json 2>/dev/null | head -100Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Check if "backdrop" type is mentioned anywhere in issues or discussions
rg -n 'backdrop' . --type=md --type=txt 2>/dev/null | head -20Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Check if other semantic tokens without explicit transformers work
rg -n '"type"' packages/bezier-tokens/src/beta/semantic/ --type=json | cut -d: -f3 | sort | uniq -c | sort -rnRepository: channel-io/bezier-react
Length of output: 273
🏁 Script executed:
# List all unique token types in beta semantic
find packages/bezier-tokens/src/beta/semantic -name "*.json" -type f | xargs cat | grep -o '"type"[[:space:]]*:[[:space:]]*"[^"]*"' | sed 's/.*"\([^"]*\)".*/\1/' | sort | uniqRepository: channel-io/bezier-react
Length of output: 145
🏁 Script executed:
# Check CSSTransforms more carefully for all handled types
rg -n 'matcher.*token\.type' packages/bezier-tokens/scripts/lib/transform.ts -A 1Repository: channel-io/bezier-react
Length of output: 519
🏁 Script executed:
# Check all the transformer matchers for all types
rg -n 'matcher:' packages/bezier-tokens/scripts/lib/transform.ts -A 1 | grep -E 'matcher:|type.*==='Repository: channel-io/bezier-react
Length of output: 572
🏁 Script executed:
# Look for opacity, radius, z-index handling
rg -n '"opacity"|"radius"|"z-index"' packages/bezier-tokens/scripts/lib/transform.tsRepository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Check if there are any issues or comments about missing backdrop transformer
rg -n 'TODO|FIXME|XXX|backdrop' packages/bezier-tokens/scripts/Repository: channel-io/bezier-react
Length of output: 945
🏁 Script executed:
# Look at the full dimension transformer to understand how it works
sed -n '31,48p' packages/bezier-tokens/scripts/lib/transform.tsRepository: channel-io/bezier-react
Length of output: 593
🏁 Script executed:
# Check what type transformers exist and which types DON'T have transformers
echo "=== Types in beta semantic ===" && \
find packages/bezier-tokens/src/beta/semantic -name "*.json" -exec grep -h '"type"' {} \; | sed 's/.*"\([^"]*\)".*/\1/' | sort | uniq -c && \
echo "" && \
echo "=== Explicit transformers in CSSTransforms ===" && \
grep -E "matcher.*token\.type ===" packages/bezier-tokens/scripts/lib/transform.ts | sed 's/.*token\.type === / /' | sortRepository: channel-io/bezier-react
Length of output: 371
🏁 Script executed:
# Check Style Dictionary documentation or package to understand default handling
cat packages/bezier-tokens/package.json | grep -A 5 '"style-dictionary"'Repository: channel-io/bezier-react
Length of output: 164
🏁 Script executed:
# Search for any comments about types or filtering
rg -n 'type\|Type' packages/bezier-tokens/scripts/lib/format.ts -B 1 -A 1 | head -40Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Verify Style Dictionary's supported token types
cat packages/bezier-tokens/package.json | grep -E '"name"|"version"|"style-dictionary"' | head -3Repository: channel-io/bezier-react
Length of output: 168
🏁 Script executed:
# Check if backdrop tokens with type "backdrop" would be filtered out by Style Dictionary
rg -n 'backdrop' packages/bezier-tokens/ --type=json --type=ts | wc -lRepository: channel-io/bezier-react
Length of output: 68
🏁 Script executed:
# Look at how other non-transformed types like color, opacity, radius are handled
rg -n 'color\|opacity\|radius' packages/bezier-tokens/src/beta/semantic/ --type=json | grep '"type"' | head -10Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Check if there's any filtering based on type in the build process
rg -n 'filter\|filterGroup\|type.*match' packages/bezier-tokens/scripts/build-tokens.ts -B 2 -A 2Repository: channel-io/bezier-react
Length of output: 49
🏁 Script executed:
# Final check: confirm backdrop tokens don't appear in output by checking any cached/example output
find packages/bezier-tokens -type f -name "*.css" -o -name "*.mjs" -o -name "*.js" 2>/dev/null | xargs grep -l 'backdrop' 2>/dev/null || echo "No backdrop in output files"Repository: channel-io/bezier-react
Length of output: 94
backdrop 타입이 Style Dictionary에서 지원되지 않아 토큰이 생성되지 않습니다.
backdrop 타입은 등록된 커스텀 변환기(CSSTransforms)에 없으며, Style Dictionary의 표준 타입도 아닙니다. 결과적으로 {dimension.*} 참조가 해석되어도 최종 CSS/JS 산출물에 backdrop 관련 변수가 생성되지 않습니다.
backdrop 타입에 대한 명시적인 변환기를 추가하거나, 기존 표준 타입(color, dimension 등)으로 변경해야 합니다.
🤖 Prompt for AI Agents
In @packages/bezier-tokens/src/beta/semantic/backdrop.json around lines 1 - 12,
The tokens under the "backdrop" object ("large" and "small") use a non-standard
"type": "backdrop" which Style Dictionary/CSSTransforms doesn't recognize, so no
output is generated; fix by either changing the token types to a supported type
(e.g., replace "type": "backdrop" with "type": "dimension" or "size" so the
"{dimension.60}" and "{dimension.6}" references are emitted), or register and
wire a custom CSSTransform named "backdrop" into your Style Dictionary build
(implement the transform and add it to transforms array) so tokens named
"backdrop.large"/"backdrop.small" are processed.
Comment on lines
+14
to
+57
| "bottom": { | ||
| "value": { | ||
| "color": "{color.border.neutral.normal}", | ||
| "type": "dropShadow", | ||
| "offsetX": "0", | ||
| "offsetY": "{dimension.1-m}", | ||
| "blur": "0", | ||
| "spread": "0" | ||
| }, | ||
| "type": "shadow" | ||
| }, | ||
| "right": { | ||
| "value": { | ||
| "color": "{color.border.neutral.normal}", | ||
| "type": "dropShadow", | ||
| "offsetX": "{dimension.1-m}", | ||
| "offsetY": "0", | ||
| "blur": "0", | ||
| "spread": "0" | ||
| }, | ||
| "type": "shadow" | ||
| }, | ||
| "left": { | ||
| "value": { | ||
| "color": "{color.border.neutral.normal}", | ||
| "type": "dropShadow", | ||
| "offsetX": "{dimension.1}", | ||
| "offsetY": "0", | ||
| "blur": "0", | ||
| "spread": "0" | ||
| }, | ||
| "type": "shadow" | ||
| }, | ||
| "top": { | ||
| "value": { | ||
| "color": "{color.border.neutral.normal}", | ||
| "type": "dropShadow", | ||
| "offsetX": "0", | ||
| "offsetY": "{dimension.1}", | ||
| "blur": "0", | ||
| "spread": "0" | ||
| }, | ||
| "type": "shadow" | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's find the dimension token definitions
find packages/bezier-tokens -name "*.json" | head -20Repository: channel-io/bezier-react
Length of output: 1123
🏁 Script executed:
# Look for dimension token definitions
rg "dimension" packages/bezier-tokens/src -l | head -10Repository: channel-io/bezier-react
Length of output: 594
🏁 Script executed:
# Search for dimension.1 and dimension.1-m definitions
rg -n "1(-m)?" packages/bezier-tokens/src/beta/semantic/dimension.json 2>/dev/null || rg -rn '"1"' packages/bezier-tokens/src/beta -A 2 -B 2 | grep -i dimensionRepository: channel-io/bezier-react
Length of output: 483
🏁 Script executed:
# Let's examine the structure more carefully - find all dimension related files
fd -e json packages/bezier-tokens/src | grep -i dimensionRepository: channel-io/bezier-react
Length of output: 476
🏁 Script executed:
# Check the actual content of the border.json file to see the exact structure
cat -n packages/bezier-tokens/src/beta/semantic/border.json | head -100Repository: channel-io/bezier-react
Length of output: 2765
🏁 Script executed:
# Also check what dimension files exist
find packages/bezier-tokens -name "*dimension*" -type fRepository: channel-io/bezier-react
Length of output: 120
🏁 Script executed:
cat -n packages/bezier-tokens/src/beta/global/dimension.jsonRepository: channel-io/bezier-react
Length of output: 3796
방향성 border의 오프셋 값이 모두 반대로 설정되어 있습니다.
dimension 토큰 값 확인:
dimension.1= 1dimension.1-m= -1
dropShadow를 사용한 border 시뮬레이션에서 오프셋 방향은 다음과 같아야 합니다:
- bottom border → offsetY가 양수 필요 (현재: -1 ✗)
- top border → offsetY가 음수 필요 (현재: +1 ✗)
- right border → offsetX가 양수 필요 (현재: -1 ✗)
- left border → offsetX가 음수 필요 (현재: +1 ✗)
모든 방향성 border(bottom, right, left, top)의 오프셋 값이 반대로 설정되어 있어 border가 의도한 반대편에 표시됩니다. 다음과 같이 수정이 필요합니다:
bottom:{dimension.1-m}→{dimension.1}right:{dimension.1-m}→{dimension.1}left:{dimension.1}→{dimension.1-m}top:{dimension.1}→{dimension.1-m}
🤖 Prompt for AI Agents
In @packages/bezier-tokens/src/beta/semantic/border.json around lines 14 - 57,
The border dropShadow offsets are inverted: for tokens "bottom", "right",
"left", and "top" the dimension signs must be flipped so shadows render on the
intended side; update the offset values as follows—in "bottom" change offsetY
from {dimension.1-m} to {dimension.1}, in "right" change offsetX from
{dimension.1-m} to {dimension.1}, in "left" change offsetX from {dimension.1} to
{dimension.1-m}, and in "top" change offsetY from {dimension.1} to
{dimension.1-m} so the dropShadow simulates borders correctly.
Comment on lines
+1
to
+723
| { | ||
| "color": { | ||
| "text": { | ||
| "action": { | ||
| "value": "{color.blue.400}", | ||
| "type": "color" | ||
| }, | ||
| "success": { | ||
| "value": "{color.green.400}", | ||
| "type": "color" | ||
| }, | ||
| "highlight": { | ||
| "value": "{color.cobalt.400}", | ||
| "type": "color" | ||
| }, | ||
| "warning": { | ||
| "value": "{color.orange.400}", | ||
| "type": "color" | ||
| }, | ||
| "critical": { | ||
| "value": "{color.red.400}", | ||
| "type": "color" | ||
| }, | ||
| "neutral": { | ||
| "heaviest": { | ||
| "value": "{color.black.100}", | ||
| "type": "color" | ||
| }, | ||
| "normal": { | ||
| "value": "{color.black.85}", | ||
| "type": "color" | ||
| }, | ||
| "light": { | ||
| "value": "{color.black.60}", | ||
| "type": "color" | ||
| }, | ||
| "lighter": { | ||
| "value": "{color.black.40}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "accent": { | ||
| "blue": { | ||
| "value": "{color.blue.400}", | ||
| "type": "color" | ||
| }, | ||
| "cobalt": { | ||
| "value": "{color.cobalt.400}", | ||
| "type": "color" | ||
| }, | ||
| "green": { | ||
| "value": "{color.green.400}", | ||
| "type": "color" | ||
| }, | ||
| "red": { | ||
| "value": "{color.red.400}", | ||
| "type": "color" | ||
| }, | ||
| "orange": { | ||
| "value": "{color.orange.400}", | ||
| "type": "color" | ||
| }, | ||
| "yellow": { | ||
| "value": "{color.yellow.400}", | ||
| "type": "color" | ||
| }, | ||
| "olive": { | ||
| "value": "{color.olive.300}", | ||
| "type": "color" | ||
| }, | ||
| "teal": { | ||
| "value": "{color.teal.400}", | ||
| "type": "color" | ||
| }, | ||
| "navy": { | ||
| "value": "{color.navy.400}", | ||
| "type": "color" | ||
| }, | ||
| "purple": { | ||
| "value": "{color.purple.400}", | ||
| "type": "color" | ||
| }, | ||
| "pink": { | ||
| "value": "{color.pink.400}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "absolute": { | ||
| "white": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| }, | ||
| "black": { | ||
| "value": "{color.black.100}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "inverse": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "icon": { | ||
| "action": { | ||
| "value": "{color.blue.400}", | ||
| "type": "color" | ||
| }, | ||
| "success": { | ||
| "value": "{color.green.400}", | ||
| "type": "color" | ||
| }, | ||
| "highlight": { | ||
| "value": "{color.cobalt.400}", | ||
| "type": "color" | ||
| }, | ||
| "warning": { | ||
| "value": "{color.orange.400}", | ||
| "type": "color" | ||
| }, | ||
| "critical": { | ||
| "value": "{color.red.400}", | ||
| "type": "color" | ||
| }, | ||
| "neutral": { | ||
| "normal": { | ||
| "value": "{color.black.40}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.black.60}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.black.85}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "accent": { | ||
| "blue": { | ||
| "value": "{color.blue.400}", | ||
| "type": "color" | ||
| }, | ||
| "cobalt": { | ||
| "value": "{color.cobalt.400}", | ||
| "type": "color" | ||
| }, | ||
| "green": { | ||
| "value": "{color.green.400}", | ||
| "type": "color" | ||
| }, | ||
| "red": { | ||
| "value": "{color.red.400}", | ||
| "type": "color" | ||
| }, | ||
| "orange": { | ||
| "value": "{color.orange.400}", | ||
| "type": "color" | ||
| }, | ||
| "yellow": { | ||
| "value": "{color.yellow.400}", | ||
| "type": "color" | ||
| }, | ||
| "olive": { | ||
| "value": "{color.olive.400}", | ||
| "type": "color" | ||
| }, | ||
| "teal": { | ||
| "value": "{color.teal.400}", | ||
| "type": "color" | ||
| }, | ||
| "navy": { | ||
| "value": "{color.navy.400}", | ||
| "type": "color" | ||
| }, | ||
| "purple": { | ||
| "value": "{color.purple.400}", | ||
| "type": "color" | ||
| }, | ||
| "pink": { | ||
| "value": "{color.pink.400}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "absolute": { | ||
| "white": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| }, | ||
| "black": { | ||
| "value": "{color.black.100}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "inverse": { | ||
| "heavier": { "value": "{color.white.100}", "type": "color" } | ||
| } | ||
| }, | ||
| "fill": { | ||
| "neutral": { | ||
| "heaviest": { | ||
| "value": "{color.black.85}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.black.40}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.black.15}", | ||
| "type": "color" | ||
| }, | ||
| "light": { | ||
| "value": "{color.black.5}", | ||
| "type": "color" | ||
| }, | ||
| "lighter": { | ||
| "value": "{color.black.3}", | ||
| "type": "color" | ||
| }, | ||
| "lightest": { | ||
| "value": "{color.black.1}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.black.0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "action": { | ||
| "normal": { | ||
| "value": "{color.blue.400}", | ||
| "type": "color" | ||
| }, | ||
| "light": { | ||
| "value": "{color.blue.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "lighter": { | ||
| "value": "{color.blue.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.blue.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "success": { | ||
| "normal": { | ||
| "value": "{color.green.400}", | ||
| "type": "color" | ||
| }, | ||
| "light": { | ||
| "value": "{color.green.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "lighter": { | ||
| "value": "{color.green.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.green.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "highlight": { | ||
| "normal": { | ||
| "value": "{color.cobalt.400}", | ||
| "type": "color" | ||
| }, | ||
| "light": { | ||
| "value": "{color.cobalt.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "lighter": { | ||
| "value": "{color.cobalt.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.cobalt.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "warning": { | ||
| "normal": { | ||
| "value": "{color.orange.400}", | ||
| "type": "color" | ||
| }, | ||
| "light": { | ||
| "value": "{color.orange.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "lighter": { | ||
| "value": "{color.orange.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.orange.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "critical": { | ||
| "normal": { | ||
| "value": "{color.red.400}", | ||
| "type": "color" | ||
| }, | ||
| "light": { | ||
| "value": "{color.red.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "lighter": { | ||
| "value": "{color.red.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.red.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "grey": { | ||
| "normal": { | ||
| "value": "{color.grey.50}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.grey.100}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.grey.200}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "accent": { | ||
| "blue": { | ||
| "normal": { | ||
| "value": "{color.blue.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.blue.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.blue.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.blue.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "cobalt": { | ||
| "normal": { | ||
| "value": "{color.cobalt.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.cobalt.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.cobalt.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.cobalt.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "green": { | ||
| "normal": { | ||
| "value": "{color.green.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.green.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.green.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.green.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "red": { | ||
| "normal": { | ||
| "value": "{color.red.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.red.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.red.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.red.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "orange": { | ||
| "normal": { | ||
| "value": "{color.orange.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.orange.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.orange.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.orange.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "yellow": { | ||
| "normal": { | ||
| "value": "{color.yellow.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.yellow.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.yellow.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.yellow.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "olive": { | ||
| "normal": { | ||
| "value": "{color.olive.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.olive.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.olive.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.olive.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "teal": { | ||
| "normal": { | ||
| "value": "{color.teal.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.teal.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.teal.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.teal.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "navy": { | ||
| "normal": { | ||
| "value": "{color.navy.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.navy.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.navy.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.navy.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "purple": { | ||
| "normal": { | ||
| "value": "{color.purple.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.purple.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.purple.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.purple.400-0}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "pink": { | ||
| "normal": { | ||
| "value": "{color.pink.400-10}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.pink.400-20}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.pink.400}", | ||
| "type": "color" | ||
| }, | ||
| "transparent": { | ||
| "value": "{color.pink.400-0}", | ||
| "type": "color" | ||
| } | ||
| } | ||
| }, | ||
| "absolute": { | ||
| "white": { | ||
| "normal": { "value": "{color.white.100}", "type": "color" }, | ||
| "light": { "value": "{color.white.20}", "type": "color" }, | ||
| "transparent": { "value": "{color.white.0}", "type": "color" } | ||
| }, | ||
| "black": { | ||
| "normal": { "value": "{color.black.100}", "type": "color" }, | ||
| "light": { "value": "{color.black.20}", "type": "color" }, | ||
| "transparent": { "value": "{color.black.0}", "type": "color" } | ||
| } | ||
| }, | ||
| "bright": { | ||
| "value": "{color.grey.25}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "border": { | ||
| "neutral": { | ||
| "normal": { | ||
| "value": "{color.black.8}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.black.15}", | ||
| "type": "color" | ||
| }, | ||
| "heavier": { | ||
| "value": "{color.black.40}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "detach": { | ||
| "normal": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| }, | ||
| "highest": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| }, | ||
| "higher": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| }, | ||
| "high": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| }, | ||
| "low": { | ||
| "value": "{color.grey.50}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "absolute": { | ||
| "white": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| } | ||
| } | ||
| }, | ||
| "surface": { | ||
| "normal": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| }, | ||
| "highest": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| }, | ||
| "higher": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| }, | ||
| "high": { | ||
| "value": "{color.white.100}", | ||
| "type": "color" | ||
| }, | ||
| "low": { | ||
| "value": "{color.grey.50}", | ||
| "type": "color" | ||
| }, | ||
| "glass": { | ||
| "normal": { | ||
| "value": "{color.white.90}", | ||
| "type": "color" | ||
| }, | ||
| "highest": { | ||
| "value": "{color.grey.200-90}", | ||
| "type": "color" | ||
| }, | ||
| "higher": { | ||
| "value": "{color.grey.100-90}", | ||
| "type": "color" | ||
| }, | ||
| "high": { | ||
| "value": "{color.white.90}", | ||
| "type": "color" | ||
| } | ||
| } | ||
| }, | ||
| "dim": { | ||
| "absolute": { | ||
| "black": { | ||
| "normal": { | ||
| "value": "{color.black.40}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.black.60}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "white": { | ||
| "normal": { | ||
| "value": "{color.white.40}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.white.60}", | ||
| "type": "color" | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| "gradient": { | ||
| "green": { | ||
| "normal": { | ||
| "value": "{color.green.400}", | ||
| "type": "color" | ||
| }, | ||
| "heavy": { | ||
| "value": "{color.green.300}", | ||
| "type": "color" | ||
| } | ||
| } | ||
| }, | ||
| "state": { | ||
| "default": { | ||
| "value": "{color.black.15}", | ||
| "type": "color" | ||
| }, | ||
| "action": { | ||
| "normal": { | ||
| "value": "{color.blue.400}", | ||
| "type": "color" | ||
| }, | ||
| "light": { | ||
| "value": "{color.blue.400-30}", | ||
| "type": "color" | ||
| } | ||
| }, | ||
| "warning": { | ||
| "normal": { | ||
| "value": "{color.orange.400}", | ||
| "type": "color" | ||
| }, | ||
| "light": { | ||
| "value": "{color.orange.400-30}", | ||
| "type": "color" | ||
| } | ||
| } | ||
| }, | ||
| "elevation": { | ||
| "xlarge": { | ||
| "value": "{color.black.30}", | ||
| "type": "color" | ||
| }, | ||
| "large": { | ||
| "value": "{color.black.22}", | ||
| "type": "color" | ||
| }, | ||
| "medium": { | ||
| "value": "{color.black.15}", | ||
| "type": "color" | ||
| }, | ||
| "small": { | ||
| "value": "{color.black.8}", | ||
| "type": "color" | ||
| }, | ||
| "base": { | ||
| "value": "{color.black.5}", | ||
| "type": "color" | ||
| }, | ||
| "base-inner": { | ||
| "value": "{color.white.12}", | ||
| "type": "color" | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
토큰 계층/네이밍이 컴포넌트에서 쓰는 형태(--color-fill-, --color-text-)와 잘 맞습니다.
다만 text.accent.olive는 {color.olive.300}인데 icon.accent.olive는 {color.olive.400}로 톤이 달라서 의도된 스펙인지(또는 오타인지)만 확인 부탁드립니다.
Comment on lines
+1
to
+13
| { | ||
| "state": { | ||
| "error": { | ||
| "value": { | ||
| "color": "{color.state.warning.normal}", | ||
| "type": "dropShadow", | ||
| "offsetX": "0", | ||
| "offsetY": "0", | ||
| "blur": "0", | ||
| "spread": "{dimension.1}" | ||
| }, | ||
| "type": "shadow" | ||
| }, |
There was a problem hiding this comment.
state.error의 컬러 토큰 의미(Warning vs Error) 확인 필요
state.error가 {color.state.warning.normal}을 참조하고 있는데, 디자인 시스템에서 “error 상태 = warning 팔레트”가 의도된 매핑인지 확인해 주세요(추후 상태 토큰 네이밍/의미 충돌 여지).
🤖 Prompt for AI Agents
In @packages/bezier-tokens/src/beta/semantic/state.json around lines 1 - 13,
state.error currently references the warning palette via "value.color":
"{color.state.warning.normal}"; confirm whether this mapping is intentional and
if not, update the token to reference the correct error color (e.g.
"{color.state.error.normal}" or the canonical error token used elsewhere),
adjust any related tokens/variants (state.error.type/value) and update
docs/tests to reflect the corrected mapping so naming and semantics remain
consistent.
timok1m
pushed a commit
that referenced
this pull request
Jan 9, 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/[email protected] ### Minor Changes - Add V3 bezier tokens and update bezier components allow to use V3 tokens. ([#2764](#2764)) by @timok1m ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Minor Changes - Add V3 bezier tokens and update bezier components allow to use V3 tokens. ([#2764](#2764)) by @timok1m ## @channel.io/[email protected] ### Minor Changes - Add V3 bezier tokens and update bezier components allow to use V3 tokens. ([#2764](#2764)) by @timok1m ### Patch Changes - Updated dependencies - @channel.io/[email protected] ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## 릴리스 노트 * **새로운 기능** * V3 Bezier 토큰 추가 및 컴포넌트 지원 확대 * Bezier React 3.6.0 및 Bezier Tokens 0.4.0 릴리스 * **버그 수정 및 개선** * 패키지 의존성 업데이트로 안정성 향상 * Figma 플러그인 0.7.19 정식 릴리스 * Stylelint Bezier 0.3.0으로 업그레이드 <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
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
V3 베지어 토큰을 추가하고, 베지어 컴포넌트에서 사용하는 토큰을 모두 V3로 마이그레이션합니다.
Details
Breaking change? (Yes/No)
No
References
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선 사항
✏️ Tip: You can customize this high-level summary in your review settings.