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: 83f6540

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: 9d337d9d-b7b6-43b3-9cec-cd101c116acb

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로 바꾼 이유가 뭐예용?

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 아닌가요??

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(--변수) 참조를 선언하고 값은 어디서 가져오는건가요?

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 는 삭제하거나 임시 주석을 넣어주는 게 좋을 것 같습니다.

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

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


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

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

    ],
    "ask": ["Bash(git push*)", "Bash(git commit*)", "Bash(git reset*)", "Bash(rm *)"],
    "deny": [
+      "Read(**/dist/**)",


deny 가 allow 보다 우선되므로,
Read(**/dist/**)가 Read(./packages/tokens/dist/*) 허용을 덮어써 tokens/dist 읽기가 막힐 수 있습니다.

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(theme): replace brand-color ThemeProvider with light/dark mode toggle#282

refactor(theme): replace brand-color ThemeProvider with light/dark mode toggle#282
3o14 wants to merge 8 commits into
devfrom
chore/provider-wonju

3o14 commented May 21, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented May 21, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 21, 2026 •

edited

Loading

Review skipped

Uh oh!

codecov Bot commented May 21, 2026 •

edited

Loading

Uh oh!

Yeom-JinHo May 21, 2026

Uh oh!

Yeom-JinHo May 21, 2026

Uh oh!

Yeom-JinHo May 21, 2026

Uh oh!

G-hoon May 26, 2026

Uh oh!

G-hoon May 26, 2026

Uh oh!

G-hoon May 26, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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!

Yeom-JinHo May 21, 2026

Choose a reason for hiding this comment

Uh oh!

Yeom-JinHo May 21, 2026

Choose a reason for hiding this comment

Uh oh!

Yeom-JinHo May 21, 2026

Choose a reason for hiding this comment

Uh oh!

G-hoon May 26, 2026

Choose a reason for hiding this comment

Uh oh!

G-hoon May 26, 2026

Choose a reason for hiding this comment

Uh oh!

G-hoon May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

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

G-hoon May 26, 2026 •

edited

Loading