feat(tokens): define primitive token foundations

[3o14]

Summary

SIDE v2 디자인 토큰의 Primitive 레이어(원시값 계층)를 JSON으로 정의합니다.

Semantic 토큰 설계(#221)의 선행 작업입니다.

• tokens/primitive/color.json — 10개 hue × 11단계(50~950) + black/white
• tokens/primitive/spacing.json — 4px 기본 단위, space-050~900
• tokens/primitive/radius.json — none / sm / md / lg / xl / full
• tokens/primitive/typography.json — fontFamily / fontSize / fontWeight / lineHeight

Notes

• Semantic 의미 없는 plain 팔레트만 정의. 색상 역할 매핑은 #221에서 진행
• 컨벤션 문서(.github/decisions/token-naming-convention.md) 준수
  • JSON 키: 중첩 객체 (color.gray.500)
  • CSS var 변환: -side-color-gray-500
• border / shadow / z-index / motion 등은 이번 범위 외

Related

closes #220

[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: fc8e8f33-3d6e-42d0-a280-025f37936143

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 docs/#220-primitive-token-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.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6197b68

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.

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

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

[3o14]

외부에 노출되는 API 변경점은 없어서 changeset은 생략했습니다.

개발자 리뷰는 따로 불필요해서 PR 리뷰는 정민님께서 봐주시면 좋을 것 같습니다! @haedawn

[froggy1014]

@3o14

아직 디자인시스템에 Foundation 정의가 되있지 않은 상황인데 어떤 값을 기준으로 작성하셨는지 알 수 있을까요 ~ ?

• Typhography

• Spacing

• Radius

[3o14]

@3o14

아직 디자인시스템에 Foundation 정의가 되있지 않은 상황인데 어떤 값을 기준으로 작성하셨는지 알 수 있을까요 ~ ?

• Typhography
• Spacing
• Radius

typography, spacing 은 기존에 제공받은 피그마(구버전) 참고해서 작업했습니다. radius는 추가 필요한 foundation 값으로 보고 신규 추가했습니다.
이후 Tokens Studio + Figma Variables 연동 작업(#224)에서 피그마 export 값으로 JSON이 덮씌될 예정이라, 현재 값들은 임시 초안으로 봐주시면 될 것 같아요.

[Yeom-JinHo]

spacing은 숫자스케일이고, radius의 경우 의미(단위) 스케일이네요~?

구형이라 어떻게 정의되어있었는지 모르겠지만 추후에는 한쪽으로 통일하면 좋을꺼 같네요

[haedawn]

spacing 관련해서 구버전엔 050-900로 되어있는데 이번부터는 픽셀 값 그대로 4,8,12 ..로 가거나, radius 처럼 sm, md, .. 이런 식으로 가면 좋을거 같아요!
개인적으로는 숫자 스케일이 더 직관적이라고 생각되기는 합니다! 그리고 spacing 900이 현재 60px로 되어있는데, 이번에 64px로 수정하는 것도 좋을거 같아요!

[haedawn]

저는 위에서 언급한 spacing 관련 부분말고 다른 부분들은 다 좋은거 같습니다!
primitive 컬러도 바꾸지 않고 구버전 이대로 가면 될 거 같아서 이걸로 피그마에 있는 다른 부분들 수정해놓을게요!
일단 figma variables에 관련 토큰들 이런식으로 등록해놨는데 나중에 확인 부탁드립니다!

[3o14]

spacing은 숫자스케일이고, radius의 경우 의미(단위) 스케일이네요~?

구형이라 어떻게 정의되어있었는지 모르겠지만 추후에는 한쪽으로 통일하면 좋을꺼 같네요

위에서 해주신 정민님 피드백도 함께 고려해서 숫자 스케일로 통일했습니다! (2, 4, 8, 12). full만 9999px라는 매직 넘버 대신 시멘틱하게 반영했습니다.

docs: update radius primitive token

[3o14]

spacing 관련해서 구버전엔 050-900로 되어있는데 이번부터는 픽셀 값 그대로 4,8,12 ..로 가거나, radius 처럼 sm, md, .. 이런 식으로 가면 좋을거 같아요! 개인적으로는 숫자 스케일이 더 직관적이라고 생각되기는 합니다! 그리고 spacing 900이 현재 60px로 되어있는데, 이번에 64px로 수정하는 것도 좋을거 같아요!

의견 감사합니다! 64px 포함해서 숫자 스케일로 작업 반영했습니다.
docs: update spacing primitive token

[3o14]

@froggy1014 리뷰 확인 부탁드립니다!