refactor: Tailwind CSS 마이그레이션 및 색상 토큰 재구성 (v0.2.1)

[choihooo]

📝 Summary

vanilla-extract에서 Tailwind CSS v4로 마이그레이션하고, 색상 토큰 시스템을 재구성했습니다.

🎯 주요 변경사항

1. Tailwind CSS v4 마이그레이션

• vanilla-extract 제거 및 Tailwind CSS v4 적용
• Button, Modal 컴포넌트를 Tailwind 클래스 기반으로 변경

2. CSS 파일 구조 개선

src/styles/
├── tokens/      # CSS 변수 정의
├── theme/       # Tailwind 테마
└── utilities/   # 커스텀 유틸리티

3. 색상 토큰 재구성

• 실제 색상: orange, green, red, gray
• 시멘틱 색상: primary → orange, secondary → green
• 두 가지 방식 모두 사용 가능

4. 테스트 커버리지

• Modal: 100%
• Button: 76.88%

✅ Checklist

• 빌드 성공
• 테스트 통과
• 버전 업데이트 (0.2.1)

Summary by CodeRabbit

• New Features

  • Introduced semantic color mappings and modular design token system with color scales
  • Added typography utility classes and design tokens for consistent text styling
  • Introduced shadow design tokens

• Documentation

  • Expanded README with comprehensive usage examples for colors, typography, shadows, and theme override workflow

• Refactor

  • Split styling into tokens, theme and utility modules for clearer organization

• Chores

  • Version bumped to 0.2.1
  • Removed vanilla-extract integration from build/test configs and dev dependencies

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Refactors CSS into modular token/theme/utility files, removes vanilla-extract plugin integrations from build/test configs, updates docs and changelog, and bumps package version to 0.2.1.

Changes

Cohort / File(s)	Summary
Docs & Versioning CHANGELOG.md, README.md, package.json	Bumped version to 0.2.1, updated changelog, expanded README with concrete color token, CSS variable, Tailwind theme customization, and theme-override examples. Removed references to vanilla-extract where applicable.
Top-level Tailwind entry src/styles/tailwind.css	Replaced inline @theme declarations with imports: tokens/*, theme/*, and utilities/*, moving color/typography/shadow definitions out of the file.
Tokens (global :root variables) src/styles/tokens/colors.css, src/styles/tokens/typography.css, src/styles/tokens/shadows.css	Added token files defining color palettes (orange/green/red/gray scales), typography metrics (font sizes, weights, line-heights, letter-spacing), and shadow variables.
Theme (theme-scoped variables for Tailwind usage) src/styles/theme/colors.css, src/styles/theme/typography.css	New theme-scoped CSS variables mapping semantic names (color-primary-*, color-secondary-*, color-tertiary-*) to token colors and providing theme typography variables.
Utilities (reusable classes) src/styles/utilities/typography.css	Added @utility classes (e.g., text-h1 … text-overline) that apply typography tokens for consistent text styles.
Build & Test config changes tsup.config.ts, vite.config.ts, vitest.config.ts	Removed vanilla-extract plugin imports and usages from tsup, Vite, and Vitest configurations; build/test pipelines no longer apply the vanilla-extract plugin.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• refactor: vanilla-extract에서 Tailwind CSS로 마이그레이션 #9 — Continues the Tailwind migration and modular theming work; likely overlaps with token/theme reorganization and plugin removals.
• Modal 컴포넌트 개선: actionButton 추가 및 Header align 제거 #8 — Adds vanilla-extract-based recipes/styles that conflict with removing the vanilla-extract plugin and moving to plain CSS modules.

Poem

🐰 I hopped from inline roots to token lands,
Sprinkled colors, shadows, type with gentle hands.
Build plugins trimmed, docs polished bright,
Modular styles now take flight! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main refactoring work: migration from vanilla-extract to Tailwind CSS v4 and restructuring of color tokens, with version bump notation.
Description check	✅ Passed	The description covers the main changes, objectives, and includes test coverage results, but lacks details in several template sections and does not use the full template structure.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

package.json (1)

69-71: Remove unused vanilla-extract dependencies and build configuration.

The codebase has completed migration to Tailwind CSS—no vanilla-extract imports remain in component code and all .css.ts files have been removed. However, vanilla-extract plugins are still configured in vitest.config.ts, vite.config.ts, and tsup.config.ts, and the dependencies remain in package.json (lines 69-71). Remove:

• @vanilla-extract/css, @vanilla-extract/esbuild-plugin, and @vanilla-extract/vite-plugin from package.json
• The corresponding plugin imports and configurations from the build config files

🤖 Fix all issues with AI agents

In `@CHANGELOG.md`:
- Line 10: Update the release header line in CHANGELOG.md for version 0.2.1 to
use the correct year: change "## [0.2.1] - 2025-01-18" to "## [0.2.1] -
2026-01-18" so the version date reflects the current year.

🧹 Nitpick comments (1)

src/styles/theme/typography.css (1)

51-56: Consider moving shadow definitions to a dedicated theme file.

Shadow definitions are duplicated here and in tokens/shadows.css. While the :root (tokens) and @theme (Tailwind) declarations serve different purposes, placing shadows in typography.css is misleading. Consider creating theme/shadows.css for consistency with the modular structure and to reduce maintenance overhead when updating shadow values.

♻️ Suggested approach

Create a new src/styles/theme/shadows.css:

/* Tailwind Theme - Shadows */
`@theme` {
  --shadow-floating: var(--shadow-floating);
  --shadow-btn-pressed: var(--shadow-btn-pressed);
  --shadow-dimmed: var(--shadow-dimmed);
}

Then reference the token variables instead of duplicating the raw values.