Convert legacy color tokens to alpha color tokens at runtime #2588

sungik-choi · 2025-01-06T12:03:34Z

Self Checklist

I wrote a PR title in English and added an appropriate label to the PR.
I wrote the commit message in English and to follow the Conventional Commits specification.
I added the changeset about the changes that needed to be released. (or didn't have to)
I wrote or updated documentation related to the changes. (or didn't have to)
I wrote or updated tests related to the changes. (or didn't have to)
I tested the changes in various browsers. (or didn't have to)
- Windows: Chrome, Edge, (Optional) Firefox
- macOS: Chrome, Edge, Safari, (Optional) Firefox

Related Issue

Developing the next version of foundation, component #2074

Summary

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

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

Details

커밋별로 확인해주세요

레거시 컬러를 사용하는 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)

Yes

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

References

초기에 토큰의 이름을 동일하게 두고, CSS layer를 tokens, alpha-tokens 두개로 분리하고 알파 토큰에 더 우선순위를 두어 맵핑이 필요한 요소 말고는 최대한 변경이 적게 동일한 CSS variable 이름을 유지하는 방향을 생각했습니다(alpha-*** 가 붙지 않음). 테스트해보니 레거시 시맨틱 네임이 CSS layer의 우선순위로 인해 팔레트(e.g. blue-200) 값을 참조할 때 우선순위로 인해 tokens 레이어가 아닌 alpha-tokens 레이어를 참조하는 문제가 있었습니다. 레거시 컬러를 사용했을 땐 레거시 컬러대로 잘 보여져야하는게 올바른 동작이라고 판단해서 이 방식은 기각했습니다.

channeltalk · 2025-01-06T12:03:37Z

https://desk.channel.io/#/channels/1/team_chats/groups/1237/677bc69986c68651b5c1

changeset-bot · 2025-01-06T12:03:38Z

🦋 Changeset detected

Latest commit: f3170c6

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

This PR includes changesets to release 5 packages

Name	Type
@channel.io/bezier-tokens	Patch
@channel.io/bezier-react	Major
bezier-vscode	Patch
@channel.io/stylelint-bezier	Patch
bezier-figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-01-06T12:06:15Z

Chromatic Report

🚀 Congratulations! Your build was successful!

codecov · 2025-01-06T12:06:35Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.91%. Comparing base (b7ae519) to head (f3170c6).
Report is 1 commits behind head on alpha.

Additional details and impacted files

@@            Coverage Diff             @@
##            alpha    #2588      +/-   ##
==========================================
+ Coverage   81.86%   81.91%   +0.05%     
==========================================
  Files         145      145              
  Lines        2889     2897       +8     
  Branches      920      919       -1     
==========================================
+ Hits         2365     2373       +8     
  Misses        494      494              
  Partials       30       30

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

…kens

…lor token conversion

…names

…lor token css variables

yangwooseong · 2025-01-08T01:03:16Z

packages/bezier-react/src/utils/style.ts

+  return alphaColorTokenCssVar(
+    legacyToAlphaColorTokenMap[
+      colorToken as keyof typeof legacyToAlphaColorTokenMap
+    ] ?? colorToken


legacy -> alpha color map 이 없으면 alpha prefix 를 붙이면 안되지 않나요?

기본적으로 1:1 대응을 하되, 이름이 다르거나 하여 대응이 안되는 경우(e.g. bgtxt-...)에 대해서 마이그레이션 테이블이 있는 거로 이해했어요.

yangwooseong · 2025-01-08T01:21:50Z

packages/bezier-tokens/src/alpha/functional/dark-theme/color.json

+  "bg": {
+    "black": {
+      "darkest": {
+        "value": "{black.60}",


아이콘 다크테마에 diff 가 있어서 확인해보니 여기가 white.60 으로 들어가야 맞는 것 같네요

이건 후속 PR에서 체크해보고 전반적으로 업데이트해볼게요. 색상값이 또 변경될 여지가 있다고 해서 어느정도 여유를 두고 진행해도 괜찮을 거 같아요

yangwooseong · 2025-01-08T01:34:03Z

packages/bezier-tokens/src/alpha/global/color.json

-        "value": "#373b5666",
-        "type": "color"
-      }
+  "blue": {


둥둥이 diff 를 보니 global token 값이 다른게 좀 있네요. 업데이트를 놓친 것 같습니다 😢

sungik-choi added the bezier-tokens Issue or PR related to bezier-tokens label Jan 6, 2025

sungik-choi self-assigned this Jan 6, 2025

sungik-choi added 5 commits January 7, 2025 13:40

feat(bezier-tokens): remove color category prefix from alpha color to…

728f3ce

…kens

feat(bezier-react): remove color category prefix from alpha color tokens

702af86

feat(bezier-react): enhanced style.ts to support legacy to alpha co…

6f20289

…lor token conversion

feat(bezier-react): converts cssVar to colorTokenCssVar

f8e6d06

feat(bezier-react): apply alpha shadow tokens to elevation util class…

7875415

…names

sungik-choi force-pushed the web-6145-2 branch from 89237e9 to 7875415 Compare January 7, 2025 04:59

sungik-choi added 2 commits January 7, 2025 15:23

feat(bezier-react): update ColorProps type to support alpha color tokens

bfb24f9

test(bezier-react): update snapshot & remove test cases related to co…

bcbc99f

…lor token css variables

sungik-choi force-pushed the web-6145-2 branch from eba6a2e to bcbc99f Compare January 7, 2025 06:25

sungik-choi added 2 commits January 7, 2025 15:39

feat(bezier-react): update color prop type to support alpha color tokens

0bfc318

chore(changeset): add

f3170c6

sungik-choi marked this pull request as ready for review January 7, 2025 07:03

sungik-choi requested a review from yangwooseong as a code owner January 7, 2025 07:03

sungik-choi changed the title ~~feat(bezier-tokens): remove alpha prefix from alpha tokens~~ Convert legacy color tokens to alpha color tokens at runtime Jan 7, 2025

yangwooseong reviewed Jan 8, 2025

View reviewed changes

yangwooseong approved these changes Jan 8, 2025

View reviewed changes

sungik-choi merged commit 09694b0 into channel-io:alpha Jan 8, 2025
8 of 9 checks passed

sungik-choi deleted the web-6145-2 branch January 8, 2025 04:20

ch-builder mentioned this pull request Jan 8, 2025

ci(changesets): version packages (alpha) #2589

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Convert legacy color tokens to alpha color tokens at runtime #2588

Convert legacy color tokens to alpha color tokens at runtime #2588

Uh oh!

sungik-choi commented Jan 6, 2025 •

edited

Loading

Uh oh!

channeltalk bot commented Jan 6, 2025

Uh oh!

changeset-bot bot commented Jan 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jan 6, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jan 6, 2025 •

edited

Loading

Uh oh!

yangwooseong Jan 8, 2025

Uh oh!

sungik-choi Jan 8, 2025

Uh oh!

yangwooseong Jan 8, 2025

Uh oh!

sungik-choi Jan 8, 2025

Uh oh!

yangwooseong Jan 8, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Convert legacy color tokens to alpha color tokens at runtime #2588

Convert legacy color tokens to alpha color tokens at runtime #2588

Uh oh!

Conversation

sungik-choi commented Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Self Checklist

Related Issue

Summary

Details

Breaking change? (Yes/No)

References

Uh oh!

channeltalk bot commented Jan 6, 2025

Uh oh!

changeset-bot bot commented Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Chromatic Report

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

yangwooseong Jan 8, 2025

Choose a reason for hiding this comment

Uh oh!

sungik-choi Jan 8, 2025

Choose a reason for hiding this comment

Uh oh!

yangwooseong Jan 8, 2025

Choose a reason for hiding this comment

Uh oh!

sungik-choi Jan 8, 2025

Choose a reason for hiding this comment

Uh oh!

yangwooseong Jan 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sungik-choi commented Jan 6, 2025 •

edited

Loading

changeset-bot bot commented Jan 6, 2025 •

edited

Loading

github-actions bot commented Jan 6, 2025 •

edited

Loading

codecov bot commented Jan 6, 2025 •

edited

Loading

yangwooseong Jan 8, 2025 •

edited

Loading