refactor(theme): replace brand-color ThemeProvider with light/dark mode toggle by 3o14 · Pull Request #282 · sipe-team/side

3o14 · 2026-05-21T09:23:23Z

Summary

기수별 브랜드 컬러 기반의 ThemeProvider를 data-theme 속성을 활용한 라이트/다크 모드 토글 방식으로 전환하고, 디자인 토큰 값의 SSOT를 tokens/tokens.json → Style Dictionary 파이프라인으로 일원화했습니다.

Changes

주요 변경

ThemeProvider의 테마 적용 방식을 assignInlineVars 기반에서 data-theme 속성 기반으로 변경했습니다.
VE contract(contract.css.ts)의 color/spacing/radius 구조를 semantic 토큰 계층으로 수정했습니다.
themes.css.ts에서 JS 상수를 시멘틱 토큰 참조로 교체했습니다.
- 토큰 자동 매핑해주는mapVars 유틸 함수/테스트코드 작성했습니다.

기타

@sipe-team/theme에서 @vanilla-extract/dynamic 미사용 의존성 제거했습니다.
ThemeProvider의 역할이 다크/라이트 토글 역할로 바뀌어서 스토리북 제거했습니다.

changeset-bot · 2026-05-21T09:23:27Z

🦋 Changeset detected

Latest commit: c9c5497

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@sipe-team/theme	Major
@sipe-team/tokens	Minor
@sipe-team/side	Patch
@sipe-team/accordion	Patch
@sipe-team/avatar	Patch
@sipe-team/badge	Patch
@sipe-team/button	Patch
@sipe-team/card	Patch
@sipe-team/checkbox	Patch
@sipe-team/chip	Patch
@sipe-team/divider	Patch
@sipe-team/input	Patch
@sipe-team/radio	Patch
@sipe-team/skeleton	Patch
@sipe-team/switch	Patch
@sipe-team/typography	Patch

Not sure what this means? Click here to learn what changesets are.

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

coderabbitai · 2026-05-21T09:23:30Z

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: 0ccff85e-b526-45cc-a0fa-06000d93cc8f

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 chore/provider-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.}

codecov · 2026-05-21T09:26:27Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
packages/theme/src/ThemeProvider.test.tsx	`100.00% <100.00%> (ø)`
packages/theme/src/ThemeProvider.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.

Yeom-JinHo · 2026-05-21T12:58:23Z

 interface ThemeProviderProps {
-  children: React.ReactNode;
-  theme?: ThemeColor;
+  children?: React.ReactNode;


여기 children optional로 바꾼 이유가 뭐예용?

아이공 원복했습니다! chore: delete optional

Yeom-JinHo · 2026-05-21T13:11:52Z

+
+- `ThemeProvider` now applies themes via `data-theme` attribute instead of `assignInlineVars`
+- `theme` prop changed from brand-color objects to `'light' | 'dark'` string union
+- `ColorTheme` type is now exported from `@sipe-team/tokens`


실제 export 되는건 ThemeMode 아닌가요??

옷 맞아요 감사합니다! chore: modify changeset

Yeom-JinHo · 2026-05-21T13:16:45Z

-      '700': `${fontSize[32]}px`,
-      '800': `${fontSize[36]}px`,
-      '900': `${fontSize[48]}px`,
+      '050': cssVar('typography-font-size-12'),


flow를 잘 이해 못 한거 같은데 여기서 var(--변수) 참조를 선언하고 값은 어디서 가져오는건가요?

SD가 빌드할때 뱉어낸 dist안에 css(primitive.css, semantic-dark.css)에서 가져옵니다! themes.css.ts 에서는 실제 값을 가지진 않고 매핑만 해용

G-hoon · 2026-05-26T02:32:32Z

-  mode: 'dark',
-  theme: '4th',
+  color: darkColor,
 });


혹시 data-theme="light" 는 없는데 이유가 있을까요..?
ThemeMode 에는 light | dark 가 정의되어 있는데. dark 만 있어서요.
게다가 root 도 darkColor 로 fallback 되는데.

아니면 다음에 진행할 거라면,
ThemeMode 에서 light 는 삭제하거나 임시 주석을 넣어주는 게 좋을 것 같습니다.

SIDE가 라이트 모드를 현재 지원하고 있지 않아서 없습니다.

주석 추가해두었습니다! chore: add TODO comments for pending light mode

G-hoon · 2026-05-26T02:38:13Z

      "Write",
-      "Read"
+      "Read",
+      "Read(./packages/tokens/dist/*)"


이거 dist/** 로 해야하지 않을까요...?
dist/* 면 1 depth 만 매칭되는데요.

감사합니다! chore: widen tokens dist read permission scope

3o14 · 2026-06-16T09:52:55Z

@G-hoon @Yeom-JinHo 리뷰 코멘트 리마인드 드립니당

Yeom-JinHo

👍🏽👍🏽👍🏽

3o14 added 6 commits May 21, 2026 16:23

chore: replace existing data-theme

ca2b5da

chore: update theme provider render and themes.css.ts

8f07bac

chore: claude allow reading tokens/dist

cbc0c39

chore: update theme packages

c6fb5f3

chore: update themes css

243fcb9

chore: changeset

6ef1e64

3o14 requested review from G-hoon, KYBee, Yeom-JinHo, froggy1014, haedawn, minjeeki, minji0214 and osohyun0224 as code owners May 21, 2026 09:23

auto-assign Bot assigned 3o14 May 21, 2026

3o14 removed request for G-hoon, KYBee, haedawn, minji0214 and osohyun0224 May 21, 2026 09:23

3o14 added 2 commits May 21, 2026 18:40

chore: theme utils test

c9ebc40

chore: update changeset

83f6540

Yeom-JinHo reviewed May 21, 2026

View reviewed changes

G-hoon reviewed May 26, 2026

View reviewed changes

3o14 added 3 commits May 30, 2026 15:34

chore: delete optional

746ab11

chore: modify changeset

8e245de

chore: add TODO comments for pending light mode

db49400

chore: widen tokens dist read permission scope

c9c5497

3o14 requested review from G-hoon and Yeom-JinHo June 11, 2026 08:47

Yeom-JinHo approved these changes Jun 16, 2026

View reviewed changes

G-hoon approved these changes Jun 16, 2026

View reviewed changes

3o14 merged commit 4394ecf into dev Jun 17, 2026
5 checks passed

3o14 deleted the chore/provider-wonju branch June 17, 2026 09:48

Conversation

3o14 commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

주요 변경

기타

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

Review skipped

Uh oh!

codecov Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

3o14 commented Jun 16, 2026

Uh oh!

Yeom-JinHo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

3o14 commented May 21, 2026 •

edited

Loading

changeset-bot Bot commented May 21, 2026 •

edited

Loading

coderabbitai Bot commented May 21, 2026 •

edited

Loading

codecov Bot commented May 21, 2026 •

edited

Loading