Skip to content

Commit

Permalink
Convert legacy color tokens to alpha color tokens at runtime (#2588)
Browse files Browse the repository at this point in the history 
<!--
  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 -->

- #2074 

## Summary

<!-- Please brief explanation of the changes made -->

알파 컬러 마이그레이션 중 일부입니다.

ColorProps(`color`)를 사용하는 레거시 컴포넌트에서 레거시 시맨틱 컬러를 알파 컬러로 런타임 변환합니다.

## Details

<!-- Please elaborate description of the changes -->

커밋별로 확인해주세요

- 레거시 컬러를 사용하는 `ColorProps`, `elevation` 유틸 클래스에서 알파 컬러를 지원 & 대체하도록
변경합니다.
- bezier-tokens에서 알파 컬러 토큰의 `color` prefix가 불필요하다고 판단하여 제거했습니다. 피그마에선
functional만 color prefix가 있고, semantic은 없는 등 레거시 시맨틱 컬러와 동일하게 굳이 추가할 필요가
없겠다고 생각하여 제거했습니다.
- 컬러 토큰의 값을 직접적으로 비교하는 테스트 케이스들을 제거했습니다. css variable 변환 함수 내부 구현에 기대고
있으므로 각 컴포넌트의 단위 테스트에 포함되기에 큰 의미없다고 판단했습니다.
- 스냅샷 업데이트

이 PR 이후에 아래와 같은 작업이 필요합니다.

- bezier-react 내부의 레거시 컬러 CSS variable을 알파 컬러로 변경
- codemod: CSS variable 변경은 필수이고, color prop은 런타임에 변환하고 있으므로 나중에 만들어도 될
듯
- stylelint: 타입스크립트 컴파일러의 한계로 유니온 타입의 특정 속성만 deprecated 처리하기가 어려워서 레거시
토큰의 warning 발생은 린트의 힘을 빌려야할 듯

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

Yes

알파 컬러로 변환된 일부 색상의 값이 변경됩니다. (Chromatic UI Review 확인)

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

초기에 토큰의 이름을 동일하게 두고, CSS layer를 `tokens`, `alpha-tokens` 두개로 분리하고 알파 토큰에
더 우선순위를 두어 맵핑이 필요한 요소 말고는 최대한 변경이 적게 동일한 CSS variable 이름을 유지하는 방향을
생각했습니다(alpha-*** 가 붙지 않음). 테스트해보니 레거시 시맨틱 네임이 CSS layer의 우선순위로 인해
팔레트(e.g. `blue-200`) 값을 참조할 때 우선순위로 인해 tokens 레이어가 아닌 alpha-tokens 레이어를
참조하는 문제가 있었습니다. 레거시 컬러를 사용했을 땐 레거시 컬러대로 잘 보여져야하는게 올바른 동작이라고 판단해서 이 방식은
기각했습니다.
  • Loading branch information
@sungik-choi
sungik-choi authored Jan 8, 2025
1 parent b7ae519 commit 09694b0
Show file tree
Hide file tree
Showing 48 changed files with 3,223 additions and 3,157 deletions.
5 changes: 5 additions & 0 deletions .changeset/old-bugs-kick.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@channel.io/bezier-tokens': patch
---

Remove 'color-' prefix from alpha color tokens
5 changes: 5 additions & 0 deletions .changeset/shy-toes-argue.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@channel.io/bezier-react': major
---

Migrate to alpha version color tokens
16 changes: 8 additions & 8 deletions packages/bezier-react/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`Avatar > Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
`;

Expand All @@ -16,7 +16,7 @@ exports[`Avatar > renders border style 1`] = `
class="SmoothCornersBox AvatarImage bordered"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 2px; --b-smooth-corners-box-shadow-color: var(--bg-white-high); --b-smooth-corners-box-padding: 4px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 2px; --b-smooth-corners-box-shadow-color: var(--alpha-bg-white-highest); --b-smooth-corners-box-padding: 4px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
`;

Expand All @@ -27,7 +27,7 @@ exports[`Avatar > should have right -2px, bottom -2px style on StatusWrapper 1`]
>
<div
class="Status size-m"
style="--b-status-bg-color: var(--bgtxt-green-normal);"
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
/>
</div>
`;
Expand All @@ -39,7 +39,7 @@ exports[`Avatar > should have right 2px, bottom 2px style on StatusWrapper when
>
<div
class="Status size-m"
style="--b-status-bg-color: var(--bgtxt-green-normal);"
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
/>
</div>
`;
Expand All @@ -51,7 +51,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
>
<div
class="Status size-m"
style="--b-status-bg-color: var(--bgtxt-green-normal);"
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
/>
</div>
`;
Expand All @@ -63,7 +63,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when
>
<div
class="Status size-l"
style="--b-status-bg-color: var(--bgtxt-green-normal);"
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
/>
</div>
`;
Expand All @@ -75,7 +75,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
>
<div
class="Status size-m"
style="--b-status-bg-color: var(--bgtxt-green-normal);"
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
/>
</div>
`;
Expand All @@ -87,7 +87,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when
>
<div
class="Status size-l"
style="--b-status-bg-color: var(--bgtxt-green-normal);"
style="--b-status-bg-color: var(--alpha-bg-green-normal);"
/>
</div>
`;
30 changes: 15 additions & 15 deletions ...ages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -29,7 +29,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -42,7 +42,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -55,7 +55,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -68,7 +68,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -81,7 +81,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -91,7 +91,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
<span
class="Text typo-13 margin AvatarEllipsisCount"
data-testid="bezier-text"
style="--b-text-color: var(--txt-black-dark);"
style="--b-text-color: var(--alpha-fg-black-dark);"
>
+1
</span>
Expand All @@ -115,7 +115,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -128,7 +128,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -141,7 +141,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -154,7 +154,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -167,7 +167,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
<div
Expand All @@ -177,14 +177,14 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
<div
class="SmoothCornersBox AvatarEllipsisIcon"
data-state="disabled"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bgtxt-absolute-black-lightest);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-absolute-black-lightest);"
>
<svg
class="Icon size-xs margin"
data-testid="bezier-icon"
fill="none"
height="1em"
style="--b-icon-color: var(--bgtxt-absolute-white-dark);"
style="--b-icon-color: var(--alpha-bg-absolute-white-dark);"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -207,7 +207,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
class="SmoothCornersBox AvatarImage"
data-state="disabled"
data-testid="bezier-avatar"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--alpha-bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
/>
</div>
</div>
Expand Down
Loading

0 comments on commit 09694b0

Please sign in to comment.