버전 수정 - v0.1.8 #66
Merged
버전 수정 - v0.1.8 #66
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
yangwooseong
added a commit
that referenced
this pull request
Oct 28, 2024
<!-- 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 --> - #2422 (comment) ## Summary <!-- Please brief explanation of the changes made --> - 기존에 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가 스토리가 아니라서 테스트에 포함이 안되는 것 같네요. 지금은 빌드 결과를 하나씩 비교해야 해서 의도치 않은 변경을 만들기 쉬운 것 같아요. 스토리로 바꾸는 것은 어떨까요? <!-- Please elaborate description of the changes --> As-is ```typescript // 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 ```typescript // 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":"#66","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) <!-- If Yes, please describe the impact and migration path for users --> - Yes, js 빌드 결과에서 darkThemeHovered, lightThemeHovered 속성이 없어집니다. ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://styledictionary.com/reference/utils/format-helpers/#_top - https://www.notion.so/channelio/Pressed-Hover-Color-11b74b55ec7c8020b6fcfe272da7138b
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
No description provided.