Implement layered structure of Sass-based styled-system

[sungik-choi]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• [Component] I wrote a unit test about the implementation.
• [Component] I wrote a storybook document about the implementation.
• [Component] I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox
• [New Component] I added my username to the correct directory in the CODEOWNERS file.

Related Issue

• Remove the CSS-in-JS library #1106

Summary

Sass와 CSS cascade layer를 기반으로 새로운 스타일 시스템의 구조를 만듭니다.

Details

Background

기존 의도는 Design token spec에 맞춘 json을 먼저 생성한 후, 이를 기반으로 스타일 시트를 자동 생성하는 것이었습니다.
하지만 아래와 같은 이유로 스타일 시트를 하드 코딩하는 방향으로 초기 구현하기로 결정했습니다.

1. Figma Variables가 현재 오픈 베타 버전이기에 Typography와 같은 Compound token을 지원하지 않음. 즉, variables에 접근하여 플러그인을 통한 export가 불가능합니다.
2. Transformer를 직접 구현할 수 있으나, 새로운 디자인 시스템이 안정적인 버전이 아니기 때문에 언제든지 스펙이 변경될 수 있습니다. Remove the CSS-in-JS library #1106 에서 해결하고자 하는 문제의 핵심은 token -> css 가 아닙니다. 핵심은 '기존 CSS-in-JS를 적절히 sass 기반의 styled system으로 마이그레이션할 수 있는지' 입니다.

먼저 새로운 디자인 시스템의 구조를 sass로 구성해보는 것으로 첫 단추를 끼워보려고 합니다.

Details

• 새로운 CSS cascade layer를 기반으로 레이어 구조를 만들었습니다. Panda CSS와 기타 레퍼런스들의 구조를 참고했습니다.
  • @layer reset : for reset css. 새롭게 추가된 레이어입니다.
    • 기본적인 reset css를 bezier-react에서 out-of-box로 제공하고자 추가했습니다.
  • @layer base : for global style. 사용자 글로벌 스타일에 해당하는 레이어입니다.
    • 폰트 패밀리와 bezier-react의 token에 접근해야 하는 전역 스타일이 포함되어 있습니다.
    • 폰트 패밀리또한 디자인 시스템의 일부이기때문에, 마찬가지로 bezier-react에서 out-of-box로 제공하고자 추가했습니다.
  • @layer tokens : for design token. 디자인 토큰에 해당하는 레이어입니다.
    • 새로운 디자인 시스템의 토큰들을 담고 있습니다. 기존 토큰(Semantic names)과 다릅니다.
    • 디자인 시스템이 업데이트됨에 따라 스펙이 변할 수 있습니다.
    • 각 theme에 해당하는 data attribute에 따라 다른 토큰을 레퍼런스하도록 구현했습니다. 기존 styled-components의 ThemeProvider 를 사용한 방식-Foundation 객체 직접 주입-과 다르므로, 이후 다이내믹 테마를 구현할 때 이 점을 고려해야합니다.
  • @layer components : for component style. 개별 컴포넌트 스타일에 해당하는 레이어입니다.
    • 후속 작업으로 진행합니다. 개별 컴포넌트마다 레이어로 감싸 별도의 스타일 시트를 생성할 예정입니다.
  • @layer utilities : for common utilities. 공용 믹스인(typography, elevation) 등의 스타일에 해당하는 레이어입니다.
    • 후속 작업으로 진행합니다.

Next

• component layer and classname-based styling test
• utility mixins (typography, elevation...)
• build setting
• deploy and test

Breaking change or not (Yes/No)

No

References

• https://sass-lang.com/guide/
• https://panda-css.com/docs/concepts/cascade-layers
• https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/
• https://developer.mozilla.org/en-US/docs/Web/CSS/:where
• https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7c4186a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (615b9bd) 87.45% compared to head (17292e6) 87.45%.

Additional details and impacted files

@@           Coverage Diff           @@
##            alpha    #1484   +/-   ##
=======================================
  Coverage   87.45%   87.45%           
=======================================
  Files         279      279           
  Lines        3842     3842           
  Branches      804      804           
=======================================
  Hits         3360     3360           
  Misses        409      409           
  Partials       73       73           

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.