Create bezier-token package #994
Assignees
Labels
epic
Issue consisting of multiple issues of the same purpose
priority:A
Issue that important and urgent
Comments
sungik-choi
added
epic
sungik-choi
changed the title
sungik-choi
added a commit
that referenced
this issue
Nov 22, 2023
<!-- 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 #994 ## Summary <!-- Please brief explanation of the changes made --> 베지어 디자인 시스템의 디자인 토큰 패키지인 bezier-tokens 패키지를 추가합니다. > **디자인 토큰이 무엇인가요?** > > Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies. They help establish a common vocabulary across organisations. (from w3c dtcg) > > - https://design-tokens.github.io/community-group/format/ > - https://m3.material.io/foundations/design-tokens/overview ## Details <!-- Please elaborate description of the changes --> ### Note - 여러 디자인 토큰 변환 라이브러리를 리서치해보았습니다. 사용자의 규모와 향후 업데이트 로드맵, 커스터마이즈 가능 범위 등을 살펴보았을 때, Style dictionary가 가장 적절하다고 생각하여 선택하였습니다. - 디자인 토큰을 피그마에서 연동하기에는 현상황에서 어려웠습니다. 현재 피그마 Variables가 오픈베타여서 타이포그래피 등의 토큰 등을 지원하고 있지 않는 상황입니다. 또한 피그마 Variables의 등장으로 Token Studio같은 서드파티 플러그인을 사용하지 않기로 팀 내부에서 결정했기 때문에, 피그마 Variables의 스펙이 언제든지 추가되거나 변할 수 있다는 뜻입니다. 따라서 지금 피그마-소스 코드 변환기를 구현하는 건 시기상조라고 생각했습니다. - 현재 작업중인 새로운 디자인 시스템에 토큰을 적용하지 않고, 기존의(프로덕션) 레거시 디자인 토큰을 적용했습니다. 정확히는 현재 bezier-react의 Foundation들을 디자인 토큰으로 분해했습니다(= 피그마에는 토큰으로 분류되지 않은 경우도 있습니다). 토큰 적용 & 정적 스타일링 방식으로 변경 -> 새로운 디자인 토큰 적용으로 단계를 나누어가기 위해서입니다. ### Build step 빌드는 간략하게 다음의 과정으로 이루어집니다. 1. JSON(Design token)을 cjs/esm/css 로 변환합니다. 2. 변환된 cjs/esm 의 엔트리포인트(index.js)를 만듭니다. 3. 타입스크립트 컴파일러를 통해 변환된 js 파일로부터 타입 선언을 만듭니다. - **향후 1번의 변환 과정에 iOS, Android용 스타일 변환기, JSON 변환기 등을 추가할 수 있습니다.** - 1번의 변환 과정은 글로벌 토큰(기존의 팔레트, 레디우스 등)과 시맨틱 토큰(라이트/다크 테마)이 별개로 이루어집니다. 라이트/다크 테마를 함께 빌드하게 되면 키가 충돌했다는 메세지와 함께 빌드 에러가 발생합니다. themeable같은 속성을 사용할 수도 있으나, JSON에 style-dictionary 라이브러리에 종속적인 속성을 포함시키고 싶지 않았습니다. 토큰은 더 순수하게 두는 게 나중을 위하여 좋다고 판단했습니다. - Composite token(예: 타이포그래피)를 지원하지 않습니다. 현재 공식적으로 지원하지 않는 스펙이며, 현상황에서는 개별 토큰들을 bezier-react(그 외 각 플랫폼 디자인 시스템)에서 조합해도 큰 무리가 없다고 판단했습니다. #### File tree ```md dist ┣ cjs ┃ ┣ darkTheme.js ┃ ┣ global.js ┃ ┣ index.js ┃ ┗ lightTheme.js ┣ css ┃ ┣ dark-theme.css ┃ ┣ global.css ┃ ┗ light-theme.css ┣ esm ┃ ┣ darkTheme.mjs ┃ ┣ global.mjs ┃ ┣ index.mjs ┃ ┗ lightTheme.mjs ┗ types ┃ ┣ cjs ┃ ┃ ┣ darkTheme.d.ts ┃ ┃ ┣ darkTheme.d.ts.map ┃ ┃ ┣ global.d.ts ┃ ┃ ┣ global.d.ts.map ┃ ┃ ┣ index.d.ts ┃ ┃ ┣ index.d.ts.map ┃ ┃ ┣ lightTheme.d.ts ┃ ┃ ┗ lightTheme.d.ts.map ┃ ┗ esm ┃ ┃ ┣ darkTheme.d.mts ┃ ┃ ┣ darkTheme.d.mts.map ┃ ┃ ┣ global.d.mts ┃ ┃ ┣ global.d.mts.map ┃ ┃ ┣ index.d.mts ┃ ┃ ┣ index.d.mts.map ┃ ┃ ┣ lightTheme.d.mts ┃ ┃ ┗ lightTheme.d.mts.map ``` ### Next - 이 패키지의 js, css를 가지고 bezier-react의 스타일 시스템, 테마 기능을 구성하게 됩니다. (#1690) - 이 패키지의 토큰에 더해 bezier-react의 constants(disabled 0.4, z-index), 타이포그래피 등을 bezier-react에서 추가, 확장하여 최종적으로 사용자 애플리케이션에 제공하는 방향으로 구현하고자 합니다. (#1495 에서 작업) ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://amzn.github.io/style-dictionary - https://dbanks.design/blog/dark-mode-with-style-dictionary/ - amzn/style-dictionary#848 : Composite token 관련 이슈
Closed
|
Style Dictionary같은 Translation 도구를 사용하여 CSS와 TS로 변환합니다. -> 별도로 진행합니다. |
github-project-automation
bot
moved this from 🏃♀️ In progress
to ✅ Done
in Bezier React
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
Reasons for suggestion
Proposed solution
Tasks
References
ev#690 고려The text was updated successfully, but these errors were encountered: