feat(tokens): setup design token transformation pipeline and CI automation

[3o14]

개요

• Tokens Studio에서 관리되는 디자인 토큰을 서비스 코드에서 사용할 수 있는 형태로 변환하고, 이를 검증하는 CI 파이프라인을 구축했습니다.
• SIDE v2 네이밍 컨벤션에 따라 토큰 구조를 primitive와 semantic 계층으로 분리하여 관리합니다.

주요 변경 사항

• Token Transformer 연동: Tokens Studio의 전용 포맷(value/type)을 W3C 표준인 DTCG 포맷($value/$type)으로 자동 변환하는 transform:tokens 스크립트 추가
• Style Dictionary 빌드: 변환된 JSON 데이터를 바탕으로 Vanilla Extract 및 CSS 변수를 생성하는 빌드 프로세스 설정
• GitHub Actions 워크플로우(token.yaml) 구축:
  • tokens/figma-sync 브랜치에 Push 발생 시 자동 실행
  • 변경된 토큰에 대한 빌드 및 타입 체크 수행
  • PR Summary를 통해 이전 대비 변경된 CSS 속성(diff)을 시각적으로 확인 가능
• 자동 PR 생성 로직: 피그마 싱크 전용 브랜치에서 main 브랜치로의 PR 생성을 자동화하여 디자이너-개발자 간 협업 워크플로우 최적화

[changeset-bot]

⚠️ No Changeset found

Latest commit: 14babe6

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

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (2)

• main
• release/v1

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 8c63ed10-18b6-49a8-98e9-dabea6814dc8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/token-ci-wonju

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
packages/flex/src/Flex.test.tsx	100.00% <100.00%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[osohyun0224]

원주님 고생많으셨습니다!

[osohyun0224]

꼼꼼하게 챙겨주셔서 넘 좋습니다 bb

[3o14]

머지하겠습니다~!

[KYBee]

고생하셨습니다~!

[Yeom-JinHo]

늦어버렸네용 😢

이거 flow 조금만 자세히 설명해주실 수 있나요?

[Yeom-JinHo]

tmp/tokens-transformed.json의 역할이 뭔가요? 👀

[3o14]

아이고 이제야 봤네요

요친구 figma token에서 Tokens Studio 포맷(value/type)을 token-transformer가 W3C DTCG 포맷($value/$type)으로 변환한 결과를 임시로 담아두는 파일이여요!

[3o14]

이거 flow 조금만 자세히 설명해주실 수 있나요?

@Yeom-JinHo
Tokens Studio(Figma) -> GitHub Actions -> (token-transformer로 포맷 번역) -> Style Dictionary -> Vanilla Extract 요 흐름으로 봐주시면 됩니다!!