Add v2(alpha) design tokens #2132
Conversation
🦋 Changeset detectedLatest commit: 7f0e29e The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 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 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #2132 +/- ##
=======================================
Coverage 86.63% 86.63%
=======================================
Files 126 126
Lines 2656 2656
Branches 778 791 +13
=======================================
Hits 2301 2301
+ Misses 350 326 -24
- Partials 5 29 +24 ☔ View full report in Codecov by Sentry. |
sungik-choi
force-pushed
the
feat/tokens-v2
branch
from
2c26235
to
3429b49
Compare
There was a problem hiding this comment.
color를 제외한 effect 토큰들을 functional에 위치시켜야할지, semantic에 위치시켜야할지 참 애매하다.
There was a problem hiding this comment.
Figma 상에는 string, numbering 이라는 이름으로 되어있는데 다소 모호하여 임시로 dimension이라는 이름을 사용했습니다. sizing(width or height) 및 spacing에 모두 사용될 수 있는 토큰이라는 점을 드러내고자 했습니다.
| "value": "100%", | ||
| "type": "dimension" | ||
| }, | ||
| "m-1": { |
There was a problem hiding this comment.
원래는 -1 이나, 특수기호로 이름이 시작할 경우 문제가 있어 임시로 m-1 이라는 이름으로 변경했습니다.
There was a problem hiding this comment.
color variable 에 수정사항이 있었어서 피그마 코멘트 확인부탁드립니다
- purple/500_30 제거
- black/50 추가
- tea/300-20, 30, 45을 300-15, 30, 45로 네이밍 변경
- grey-alpha 네이밍 변경 (grey/900_90 -> grey/900-90)
| @@ -1,8 +1,8 @@ | |||
| { | |||
| "gradient": { | |||
| "_comment": "Should we improve to use DTCG format? See: https://second-editors-draft.tr.designtokens.org/format/#gradient", | |||
There was a problem hiding this comment.
고민점이 value를 여기 나온 스펙에 맞게 array로 해야할지 아니면 지금처럼 string으로 가져갈지이죠? array로 하면 style dictionary가 어떤식으로 파싱을 해줄지 궁금하네요 🤔
There was a problem hiding this comment.
맞아요. 파싱 로직은 직접 짜야할 거 같아요. lib/transforms.ts 참고해주시면 됩니다!
| "fg": { | ||
| "green": { | ||
| "description": "progress", | ||
| "value": "linear-gradient(90deg, #40ad67 0%, #7ad890 100%)", | ||
| "type": "color" |
There was a problem hiding this comment.
bg/black 을 fg/black 으로 옮겨야 합니다(피그마 상으로 잘못되어 있는부분)
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/bezier-tokens@0.2.0 ### Minor Changes - Add `ref` value to design tokens of alpha version. ([#2135](#2135)) by @sungik-choi - Add design tokens for next(alpha) version. ([#2132](#2132)) by @sungik-choi ### Patch Changes - Modify alpha design tokens according to figma design ([#2138](#2138)) by @yangwooseong ## @channel.io/bezier-react@2.0.1 ### Patch Changes - The style sheet(styles.css) now includes the alpha version of the design token. ([#2141](#2141)) by @sungik-choi - Remove the `/alpha` directory and add the `Alpha` prefix to alpha components. ([#2140](#2140)) by @sungik-choi - `TooltipPrimitive` -> `AlphaTooltipPrimitive` - `DialogPrimitive` -> `AlphaDialogPrimitive` - Updated dependencies - @channel.io/bezier-tokens@0.2.0 ## bezier-figma-plugin@0.5.1 ### Patch Changes - Updated dependencies - @channel.io/bezier-react@2.0.1 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Self Checklist
Related Issue
Summary
디자인 시스템 v2에서 사용하게 될 디자인 토큰을 추가하고, 관련 빌드 설정을 추가합니다.
Details
Breaking change? (Yes/No)
No