fix(core): align surface components with canvas token hierarchy

[MaxLee-dev]

Related Issues

• VAPOR-255
• Related: VAPOR-252 — canvas-inverse 추가

Description of Changes

Summary by CodeRabbit

• 스타일

  • 카드, 다이얼로그, 세그먼트 컨트롤, 시트의 배경색이 테마 캔버스 토큰과 일관되게 조정되었습니다.
  • 다이얼로그와 시트 오버레이가 테마 기반 반투명 배경과 투명도를 사용합니다.
  • 다크 테마의 캔버스 색상 단계가 개선되었습니다.

• 새 기능

  • bg-canvas-inverse 배경색 유틸리티가 추가되었습니다.

canvas-inverse가 들어오면서 tooltip과 toast는 canvas 계열로 옮겨졌지만, 남은 표면 컴포넌트는 여전히 위계와 맞지 않는 토큰이나 raw 값을 쓰고 있었습니다. 이번 PR에서 그 나머지를 맞췄습니다.

컴포넌트

컴포넌트	Before	After
card	background.canvas-overlay	background.canvas-base
segmented-control	color.gray.100	background.secondary
dialog overlay	color.black	background.canvas-dim
sheet overlay	rgba(0, 0, 0, 32%)	background.canvas-dim + opacity: 0.32

sheet 오버레이는 dialog와 같은 방식(canvas-dim + opacity)으로 통일했습니다.

토큰

• 다크 테마 canvas-100/canvas-200을 gray-050/gray-025로 조정했습니다. 각각 canvas-base/canvas-sunken과 값이 어긋나 있어 V1 별칭을 쓰는 쪽과 V2를 쓰는 쪽의 배경이 달라지던 문제입니다.
• sprinkles에 bg-canvas-inverse를 노출했습니다. VAPOR-252에서 토큰만 추가되고 sprinkles 매핑이 빠져 있었습니다.

Screenshots

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]

🦋 Changeset detected

Latest commit: 265dc85

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

This PR includes changesets to release 1 package

Name	Type
@vapor-ui/core	Minor

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
vapor-ui	Ready	Preview	Aug 25, 2026 5:59am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 7b0049a9-0c48-488e-9f82-f83e690870f9

📥 Commits

Reviewing files that changed from the base of the PR and between 3e3dc18 and 265dc85.

📒 Files selected for processing (7)

• .changeset/olive-jars-shake.md
• packages/core/src/components/card/card.css.ts
• packages/core/src/components/dialog/dialog.css.ts
• packages/core/src/components/segmented-control/segmented-control.css.ts
• packages/core/src/components/sheet/sheet.css.ts
• packages/core/src/styles/sprinkles.css.ts
• packages/core/src/styles/tokens/color/semantic-color.ts

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

캔버스 색상 토큰 계층을 조정하고 bg-canvas-inverse를 sprinkles에 추가했습니다. Card, Dialog, Segmented Control, Sheet의 배경 참조를 semantic token으로 변경했습니다. @vapor-ui/core minor 버전 범프 changeset도 추가했습니다.

Changes

캔버스 배경 토큰 정비

Layer / File(s)	Summary
캔버스 토큰 및 sprinkles 변경 packages/core/src/styles/tokens/color/semantic-color.ts, packages/core/src/styles/sprinkles.css.ts	다크 테마의 canvas-100, canvas-200 참조를 변경했습니다. bg-canvas-inverse 토큰을 추가했습니다.
컴포넌트 배경 참조 변경 packages/core/src/components/card/card.css.ts, packages/core/src/components/dialog/dialog.css.ts, packages/core/src/components/segmented-control/segmented-control.css.ts, packages/core/src/components/sheet/sheet.css.ts	컴포넌트 배경을 canvas-base, canvas-dim, background.secondary 토큰으로 변경했습니다. Sheet overlay에는 opacity: 0.32를 추가했습니다.
릴리스 메타데이터 갱신 .changeset/olive-jars-shake.md	@vapor-ui/core minor 버전 범프와 캔버스 배경 변경 사항을 기록했습니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 265dc

This PR aligns surface component backgrounds and overlays with the canvas token hierarchy and exposes the missing inverse-canvas sprinkle mapping. No actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 surface component를 canvas token hierarchy에 맞추는 주요 변경 사항을 정확하고 간결하게 설명합니다.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch canvas-hierarchy-fix

---

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

[vapor-ui]

✅ All tests passed!

Tests	Passed	Failed	Duration	Report
168	168	0	1m 15s	Open report ↗︎

Click here if you need to update snapshots.

[noahchoii]

새 기능이 추가된 게 아니라 기존 토큰의 변경이라서 patch 버전 업데이트가 적절해 보이는데, 어떻게 생각하시나요??

[noahchoii]

는 sprinkles에 추가된 게 맞으니 minor가 맞겠네요..!