feat: add @vapor-ui/design-tokens package for ssot

[noahchoii]

Description of Changes

@coderabbitai summary

• 디자인 토큰의 SSOT가 될 패키지를 생성했습니다.
• 추후 다른 도구들과의 어댑터를 추가할 계획입니다.
• 현재는 JSON을 모아두고, 이를 패키지 외부에서 사용할 수 있도록 Export 경로만 뚫어뒀습니다.

import borderRadius from '@vapor-ui/design-tokens/raws/border-radius';
import darkSemanticColor from '@vapor-ui/design-tokens/raws/semantic-color.dark';

console.log(borderRadius);
console.log(darkSemanticColor);

Checklist

Before submitting the PR, please make sure you have checked all of the following items.

• The PR title follows the Conventional Commits convention. (e.g., feat, fix, docs, style, refactor, test, chore)
• I have added tests for my changes.
• I have updated the Storybook or relevant documentation.
• I have added a changeset for this change. (e.g., for any changes that affect users, such as component prop changes or new features).
• I have performed a self-code review.
• I have followed the project's coding conventions and component patterns.

[changeset-bot]

⚠️ No Changeset found

Latest commit: da727ab

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vapor-ui	Ready	Preview, Comment	Jul 10, 2026 3:05am

[coderabbitai]

Warning

Review limit reached

@noahchoii, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 28 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 87f9d31c-88b1-4bc2-8202-979d25fc231b

📥 Commits

Reviewing files that changed from the base of the PR and between d90b538 and da727ab.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml

📒 Files selected for processing (12)

• packages/design-tokens/package.json
• packages/design-tokens/raws/border-radius.json
• packages/design-tokens/raws/dimension.json
• packages/design-tokens/raws/primitive-color.dark.json
• packages/design-tokens/raws/primitive-color.light.json
• packages/design-tokens/raws/resolver.json
• packages/design-tokens/raws/semantic-color.dark.json
• packages/design-tokens/raws/semantic-color.light.json
• packages/design-tokens/raws/shadow.json
• packages/design-tokens/raws/space.json
• packages/design-tokens/raws/text-style.json
• packages/design-tokens/raws/typography.json

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch token-ssot

---

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.}

[MaxLee-dev]

이 패키지를 어떻게 사용할 계획인지 궁금합니다.!

현재는 json으로 파일이 구성되어 사용단에서 json 모듈을 import해서 사용할 수 있는 구조인 것 같습니다. 이렇게 되면 사용단에서 하나의 필드만 사용하려고 해도 전체 json을 import해야 하며 tree-shaking도 모듈 단위로 동작하기 때문에 사용되지 않는 프로퍼티는 tree-shaking이 안 된다는 문제가 발생할 것 같습니다.

아직 사용처가 정해지지 않아서 저도 명확한 구조가 잡히지 않는데, 이 패키지는 사용처 논의 후 추가하는 것이 어떨까요??

[noahchoii]

우선 해당 패키지를 추가하자고 했던 이유는 현재 figma-token-review-plugin, eslint-plugin-vapor, website까지 총 3곳에서 토큰 JSON을 사용하고 있습니다. 근데 각각이 모두 별도로 파일을 생성해서 관리하고 있기 때문에 유지보수가 많이 어려워진 상황이라고 판단했습니다. 그래서 우선은 SSOT를 달성하고 파편화를 방지할 용도로 중앙 관리용 패키지를 두고, 여기서 흩어져 있는 디자인 토큰의 관리 책임을 한 곳으로 모으고자 했습니다!

이후에는 구두로 말씀드렸던 것처럼 이 디자인 토큰을 JSON 자체로 내보내는 것이 아니라 여러가지 어댑터를 두고 사용처에 맞게 JSON을 파싱해서 내보내줄 계획을 하고 있습니다! 이 때 어디까지 어댑터를 지원해야 할지에 대해서는 논의가 더 필요할 수 있을 것 같은데, 단순 토큰 스키마에 대한 정적 참조가 필요한 경우와, 이를 실행 환경 내에서 실제로 동작하는 코드로 만들어야 하는 경우로 구분할 수 있을 것 같네요!

해당 패키지가 생성이 되면 우선 figma-token-review-plugin, eslint-plugin-vapor, website에서의 JSON을 모두 지우고 하나로 관리할 수 있으며, 디자인 토큰 변경이 계획되어 있는 상황에서 유지보수 용이성이 크게 올라갈 것 같은데, 어떻게 생각하시나요??

--

트리쉐이킹에 대해서도 말씀을 해주셨는데, JSON 파일 간의 트리쉐이킹은 지원이 되고 있고, 위에서 언급한 패키지들은 토큰 타입별 스키마와 용도를 모두 정적으로 분석하여 사용하고 있기 때문에, 하나하나에 대한 트리쉐이킹이 당장 필요하지는 않을 것 같습니다!