yangwooseong commented 1 month ago

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.
[x] I added the changeset 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

https://github.com/channel-io/bezier-react/pull/2422#discussion_r1772647894

Summary

기존에 hovered token를 만들기 위해 CustomTransform, HoveredTransform 두 벌로 transform 을 만들고 머지 했던 것을 CustomFormat 에서 hovered token 를 생성하는 것으로 구현을 변경합니다. 이 과정에서 alphaCustomCss 포맷을 추가 구현했습니다.
semantic 토큰에도 hovered token을 추가했습니다.
hovered color 생성 공식을 업데이트 합니다. (alpha = 0.2 포함 여부, alpha = 0일 때 saturation, lightness 유지)

Details

이렇게 구현 방법을 바꾸면 transform 을 여러개 만들어야 할 필요가 없어집니다. 또한 js 로 생성되는 빌드 결과에서 darkThemeHovered 값들이 darkTheme 안으로 들어가게 되서 깔끔해지고 styles.css 안에서 선택자가 중복되고 있던 문제가 해결됩니다.
hoveredToken 이 tokens 로 들어가게 되면서 storybook 에도 hovered color 가 추가되었습니다. -> color 토큰이 달라질 때 or hovered color공식이 달라질 때 어떻게 달라지는지 크로마틱 UI test 에서 명시적으로 확인해보면 좋은데 foundation/color가 스토리가 아니라서 테스트에 포함이 안되는 것 같네요. 지금은 빌드 결과를 하나씩 비교해야 해서 의도치 않은 변경을 만들기 쉬운 것 같아요. 스토리로 바꾸는 것은 어떨까요?

As-is

// index.js
exports.tokens = Object.freeze({
  darkTheme: require('./darkTheme'),
  darkThemeHovered: require('./darkThemeHovered'),
  global: require('./global'),
  lightTheme: require('./lightTheme'),
  lightThemeHovered: require('./lightThemeHovered'),
});

// darkThemeHovered.js
module.exports = Object.freeze({
  "color": Object.freeze({
    "alpha-color-dim-black-normal-hovered": Object.freeze({"value":"#14141466","ref":null}),
  })
})

// styles.css
[data-bezier-them="dark"] {
  --alpha-color-dim-black-normal: var(--alpha-color-bg-absolute-black-lighter);
} 
...
[data-bezier-theme="dark"] {
  --alpha-color-dim-black-normal-hovered: #14141466;
}

To-be

// index.js
exports.tokens = Object.freeze({
  darkTheme: require('./darkTheme'),
  global: require('./global'),
  lightTheme: require('./lightTheme'),
});

// darkTheme.js
module.exports = Object.freeze({
  "color": Object.freeze({
    "alpha-color-dim-black-normal": Object.freeze({"value":"#00000066","ref":"alpha-color-bg-absolute-black-lighter"}),
    "alpha-color-dim-black-normal-hovered": Object.freeze({"value":"#14141466"}),
  })
})

// styles.css
[dark-bezier-theme="dark"] {
  --alpha-color-dim-black-normal: var(--alpha-color-bg-absolute-black-lighter);
  --alpha-color-dim-black-normal-hovered: #14141466;
}

Breaking change? (Yes/No)

Yes, js 빌드 결과에서 darkThemeHovered, lightThemeHovered 속성이 없어집니다.

References

changeset-bot[bot] commented 1 month ago

🦋 Changeset detected

Latest commit: ea3e102910acd94c30e19358cc70d307042c3ae3

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

This PR includes changesets to release 4 packages

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

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

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

channeltalk[bot] commented 1 month ago

https://desk.channel.io/#/channels/1/team_chats/groups/1237/6719e5d9bf313f5a3037

codecov[bot] commented 1 month ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 83.28%. Comparing base (a8785b3) to head (ea3e102). Report is 1 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #2462 +/- ## ======================================= Coverage 83.28% 83.28% ======================================= Files 141 141 Lines 2943 2943 Branches 899 912 +13 ======================================= Hits 2451 2451 Misses 487 487 Partials 5 5 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

github-actions[bot] commented 1 month ago

Chromatic Report

🚀 Congratulations! Your build was successful!