feat(tokens): add Style Dictionary v5 pipeline with W3C DTCG primitive tokens by 3o14 · Pull Request #261 · sipe-team/side

3o14 · 2026-04-28T06:50:09Z

Summary

Style Dictionary v5 ESM 빌드 파이프라인 구축 (config.js)
W3C DTCG 포맷($value/$type)으로 primitive 토큰 JSON 정의 — color, spacing,
typography, radius
./token-names subpath export 추가 — ColorToken, DesignToken, cssVar()
자동 생성

Changes

Primitive 토큰

파일	내용
`color.json`	10개 팔레트 × 11단계 + brand 3색
`spacing.json`	13단계 스케일 (4px ~ 96px)
`typography.json`	font-size 10단계 / font-weight 4단계 / line-height 2단계
`radius.json`	5단계 (2px ~ 9999px)

빌드 결과물

dist/css/primitive.css — CSS 커스텀 프로퍼티 (--color-gray-500 등)
dist/css/index.css — primitive + semantic 통합본
dist/ts/primitive.js + dist/ts/primitive.d.ts — cssVar() 구현 및 타입 선언

설계 결정

Primitive 범위는 color / spacing / typography / radius 4종으로 한정 (shadow 제외)
semantic 토큰은 tokens/semantic/light/에 JSON 추가 시 빌드에 자동 포함되는 구조
prepack 순서를 tsup → build:tokens로 고정 — tsup clean: true 이후
dist/ts/ 생성 보장
publishConfig.exports에 ./token-names 추가 — 배포 후 subpath 접근 가능

Test plan

node packages/tokens/config.js 실행 후 dist/css/primitive.css,
dist/ts/primitive.d.ts, dist/ts/primitive.js 생성 확인
@sipe-team/tokens/token-names에서 cssVar() import 및 타입 추론 확인

… publish export

coderabbitai · 2026-04-28T06:50:16Z

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: 34f7cf21-bca4-4217-bf3b-e4d52c65f699

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/style-dictionary-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

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

changeset-bot · 2026-04-28T06:50:16Z

⚠️ No Changeset found

Latest commit: 4c2e376

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

codecov · 2026-04-28T07:00:39Z

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.

Yeom-JinHo

방향 좋고 깔끔한거 같습니다!

Figma에서 export할떄 어떤 플러그인을 쓰는건가요? W3C DTCG 포맷으로 잘 떨어지나요?

Yeom-JinHo · 2026-04-28T14:35:40Z

+    "build:tokens": "node config.js",
+    "dev:storybook": "storybook dev -p 6006",


#250 여기서 package내부의 storybook은 제거되었습니당

감사합니다! chore: delete storybook script

Yeom-JinHo · 2026-04-28T14:48:35Z

+          "types": "./dist/ts/index.d.ts",
+          "default": "./dist/ts/index.js"
+        }
      }


/dist/css/index.css는 아직 미완성이여서 export list에 없는걸까요?

넵 semantic 토큰이 아직 미완이라(리뷰중) 보류했습니다.
Token Studio 연동하고 semantic 토큰 완성되면 ./styles.css 형태로 export 추가할 예정입니다!

Yeom-JinHo · 2026-04-28T14:52:00Z

+        "import": {
+          "types": "./dist/ts/index.d.ts",
+          "default": "./dist/ts/index.js"
+        }


cjs export 도 안하신게 의도인지 궁금합니다

아앗 의도 아니여요 감사합니다!
요기서 추가했습니당 > chore: cjs export

Yeom-JinHo · 2026-04-28T14:54:13Z

    "build": "tsup",
+    "build:tokens": "node config.js",


Suggested change

"build": "tsup",

"build:tokens": "node config.js",

"build": "pnpm build:tokens && tsup",

"build:tokens": "node config.js",

어떠신지용

오토머지 걸어놨더니 리뷰 반영하던 중에 머지가 되버렸네요.. build 스크립트는 다음 PR에서 같이 반영해보겠습니다!
제안주신 것처럼 하면 dist 생성하자마자 tsup이 dist를 제거해버리는 상황이 우려되어서

build:tokens 제거하고 아래처럼 수정해보려고 합니다!

"build": "tsup && node config.js",

3o14 · 2026-04-28T15:58:09Z

방향 좋고 깔끔한거 같습니다!

Figma에서 export할떄 어떤 플러그인을 쓰는건가요? W3C DTCG 포맷으로 잘 떨어지나요?

진호님 리뷰 감사합니다!
Token Studio 사용 계획 중이여요 (이슈 참고 #224 )

3o14 added 2 commits April 28, 2026 15:44

feat: style dictionary pipeline

c4088b7

fix(tokens): adopt W3C DTCG format for primitives and fix token-names…

036983e

… publish export

fix: restore broken pnpm-lock.yaml after merge conflict resolution

40af8de

3o14 force-pushed the feature/style-dictionary-wonju branch from 70f5f04 to 40af8de Compare April 28, 2026 07:00

3o14 marked this pull request as ready for review April 28, 2026 08:59

3o14 requested review from G-hoon, KYBee, Yeom-JinHo, froggy1014, haedawn, minjeeki, minji0214 and osohyun0224 as code owners April 28, 2026 08:59

auto-assign Bot assigned 3o14 Apr 28, 2026

3o14 enabled auto-merge (squash) April 28, 2026 14:49

Yeom-JinHo approved these changes Apr 28, 2026

View reviewed changes

3o14 added 2 commits April 29, 2026 00:21

chore: delete storybook script

e7dc2ac

chore: cjs export

4c2e376

3o14 merged commit 65c44d5 into dev Apr 28, 2026
4 checks passed

3o14 deleted the feature/style-dictionary-wonju branch April 28, 2026 15:50

		"build:tokens": "node config.js",
		"dev:storybook": "storybook dev -p 6006",

Conversation

3o14 commented Apr 28, 2026

Summary

Changes

Primitive 토큰

빌드 결과물

설계 결정

Test plan

Uh oh!

coderabbitai Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

changeset-bot Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

codecov Bot commented Apr 28, 2026

Codecov Report

Uh oh!

Yeom-JinHo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

3o14 commented Apr 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai Bot commented Apr 28, 2026 •

edited

Loading

changeset-bot Bot commented Apr 28, 2026 •

edited

Loading