@transcodes/design-tokens 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -0,0 +1,52 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.3.1] - 2025-12-11
+
+### Added
+
+- CSS auto-import: `import '@transcodes/design-tokens'`로 CSS 자동 로드 (하위 호환성 복구)
+- 다크모드 dual selector 지원: `prefers-color-scheme` 자동 감지 + `data-theme` 수동 오버라이드
+- CSS minification: lightningcss 기반 압축 (평균 45% 용량 감소)
+
+### Changed
+
+- 다크모드 CSS 선택자 개선: `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }` + `[data-theme="dark"]`
+- package.json에 `sideEffects` 필드 추가로 번들러 최적화 지원
+
+## [0.3.0] - 2025-12-11
+
+### Added
+
+- JS main export 추가 (`index.js`, `index.d.ts`) - ESBuild 등 번들러 호환성 개선
+- `tokens` 객체 export (camelCase 키)
+- `cssVars` 객체 export (CSS 변수명 키)
+- 버튼 시맨틱 토큰: `--button-dark`, `--button-dark-hover`, `--button-light`, `--button-light-hover`
+- 시맨틱 배경 토큰: `--semantic-warning-bg`, `--semantic-warning-light`, `--semantic-success-bg`, `--semantic-info-bg`
+
+### Changed
+
+- package.json exports 구조 개선: main export를 CSS에서 JS로 변경
+- CSS import 경로 변경: `@transcodes/design-tokens` → `@transcodes/design-tokens/css`
+
+## [0.2.0] - 2025-12-10
+
+### Changed
+
+- Bun native API로 빌드 스크립트 전환 (빌드 성능 개선)
+
+## [0.1.0] - 2025-12-10
+
+### Added
+
+- Initial release of design tokens
+- CSS custom properties for colors, typography, spacing, shadows, and borders
+- Dark mode support via `[data-theme="dark"]` selector
+- TypeScript type definitions (`tokens.d.ts`)
+- Component CSS classes (`.button`, `.input`, `.notice`, `.field-group`, etc.)
+- WCAG AA compliant color contrast ratios (4.5:1+)
+- DTCG standard compliant token format (`$value`, `$type`)

package/README.md

@@ -7,40 +7,31 @@ A comprehensive design token system built with [Style Dictionary](https://amzn.g
 
 ## Features
 
-- **Dark Mode Support** - Built-in light and dark themes with `data-theme` attribute
+- **Dark Mode Support** - Automatic system detection + manual override with `data-theme`
 - **WCAG AA Compliant** - All color combinations meet accessibility contrast requirements
 - **Responsive Values** - Fluid typography and spacing using CSS `clamp()`
 - **TypeScript Support** - Full type definitions included
-- **Zero Runtime** - Pure CSS variables with no JavaScript required
+- **CSS Auto-import** - Zero-config CSS loading (v0.3.1+)
+- **Tree-shakable** - Optimized for modern bundlers
 
 ## Installation
 
 ```bash
 npm install @transcodes/design-tokens
 # or
-yarn add @transcodes/design-tokens
-# or
-pnpm add @transcodes/design-tokens
-# or
 bun add @transcodes/design-tokens
 ```
 
 ## Quick Start
 
-### 1. Import the tokens
+### Automatic CSS Loading (v0.3.1+)
 
 ```typescript
-// Import base tokens (light theme by default)
+// CSS automatically loaded (light + dark themes)
 import '@transcodes/design-tokens';
-
-// Optional: Import dark theme support
-import '@transcodes/design-tokens/tokens-dark.css';
-
-// Optional: Import component utility classes
-import '@transcodes/design-tokens/components.css';
 ```
 
-### 2. Use CSS variables in your styles
+That's it! CSS variables are now available globally.
 
 ```css
 .card {
@@ -48,32 +39,66 @@ import '@transcodes/design-tokens/components.css';
   background: var(--paper-white);
   padding: var(--space-md);
   border-radius: var(--radius-md);
-  box-shadow: var(--shadow-sm);
-  transition: box-shadow var(--transition-smooth);
+  box-shadow: var(--shadow-card);
 }
+```
+
+### JavaScript Objects (Optional)
+
+```typescript
+import { tokens, cssVars } from '@transcodes/design-tokens';
+
+// camelCase keys
+console.log(tokens.accentPrimary); // "#6b4fd9"
+console.log(tokens.spaceMd);       // "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)"
 
-.card:hover {
-  box-shadow: var(--shadow-md);
+// CSS variable names as keys
+console.log(cssVars['--accent-primary']); // "#6b4fd9"
+console.log(cssVars['--space-md']);       // "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)"
+```
+
+### Dark Mode
+
+**Automatic Detection (v0.3.1+)**
+
+Dark mode is automatically applied based on system preferences:
+
+```css
+/* Respects prefers-color-scheme: dark */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    /* Dark theme variables */
+  }
 }
 ```
 
-### 3. Enable dark mode
+**Manual Override**
+
+Force a specific theme:
 
 ```html
-<!-- Light theme (default) -->
+<!-- Force light theme (ignores system preference) -->
 <html data-theme="light">
 
-<!-- Dark theme -->
+<!-- Force dark theme (ignores system preference) -->
 <html data-theme="dark">
+
+<!-- Auto (respect system preference) -->
+<html> <!-- no data-theme attribute -->
 ```
 
 ```javascript
-// Toggle theme with JavaScript
+// Toggle theme with manual override
 function toggleTheme() {
   const current = document.documentElement.getAttribute('data-theme');
   const next = current === 'dark' ? 'light' : 'dark';
   document.documentElement.setAttribute('data-theme', next);
 }
+
+// Reset to system preference
+function resetTheme() {
+  document.documentElement.removeAttribute('data-theme');
+}
 ```
 
 ## Available Tokens
@@ -86,7 +111,6 @@ function toggleTheme() {
 | `--ink-dark` | #2d2d2d | #e5e5e5 | Secondary text |
 | `--ink-medium` | #5c5c5c | #a3a3a3 | Tertiary text |
 | `--ink-light` | #8a8a8a | #737373 | Placeholder text |
-| `--ink-faint` | #c4c4c4 | #525252 | Decorative elements |
 | `--paper-white` | #faf9fc | #1a1a1a | Primary background |
 | `--paper-cream` | #f5f4f8 | #2d2d2d | Secondary background |
 | `--paper-warm` | #ebe9f0 | #404040 | Tertiary background |
@@ -94,9 +118,21 @@ function toggleTheme() {
 | `--accent-success` | #357a46 | #4ade80 | Success state |
 | `--error-base` | #c0392b | #f87171 | Error state |
 
+### Semantic Tokens (v0.3.0+)
+
+| Token | Description |
+|-------|-------------|
+| `--button-dark` | Dark button background |
+| `--button-dark-hover` | Dark button hover state |
+| `--button-light` | Light button background |
+| `--button-light-hover` | Light button hover state |
+| `--semantic-warning-bg` | Warning callout background |
+| `--semantic-success-bg` | Success callout background |
+| `--semantic-info-bg` | Info callout background |
+
 ### Spacing
 
-All spacing values are responsive and scale with viewport width.
+Responsive values that scale with viewport width.
 
 | Token | Value Range |
 |-------|-------------|
@@ -130,12 +166,6 @@ All spacing values are responsive and scale with viewport width.
 ### Layout
 
 ```css
-/* Breakpoints */
---breakpoint-sm: 640px;
---breakpoint-md: 768px;
---breakpoint-lg: 1024px;
---breakpoint-xl: 1280px;
-
 /* Border radius */
 --radius-sm: 4px;
 --radius-md: 8px;
@@ -157,22 +187,29 @@ All spacing values are responsive and scale with viewport width.
 --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
 ```
 
-## TypeScript Support
-
-```typescript
-import type { DesignTokens } from '@transcodes/design-tokens/types';
-```
-
 ## Exports
 
 | Path | Description |
 |------|-------------|
-| `@transcodes/design-tokens` | Base CSS variables (light theme) |
-| `@transcodes/design-tokens/tokens-dark.css` | Dark theme overrides |
+| `@transcodes/design-tokens` | **Recommended** - Auto-loads CSS + exports JS objects |
+| `@transcodes/design-tokens/css` | CSS variables only (light theme) |
+| `@transcodes/design-tokens/tokens-dark.css` | Dark theme CSS only |
 | `@transcodes/design-tokens/components.css` | Component utility classes |
+| `@transcodes/design-tokens/components` | Component styles as JS |
 | `@transcodes/design-tokens/types` | TypeScript type definitions |
 | `@transcodes/design-tokens/json` | Raw token values as JSON |
 
+### Migration from v0.3.0
+
+```typescript
+// v0.3.0 (manual CSS imports)
+import '@transcodes/design-tokens/css';
+import '@transcodes/design-tokens/tokens-dark.css';
+
+// v0.3.1+ (automatic)
+import '@transcodes/design-tokens';
+```
+
 ## Accessibility
 
 All primary color combinations meet WCAG AA standards (4.5:1 minimum contrast ratio):
@@ -186,7 +223,7 @@ All primary color combinations meet WCAG AA standards (4.5:1 minimum contrast ra
 
 ## Browser Support
 
-This package uses CSS custom properties (CSS variables) and `clamp()` for responsive values. Supported in all modern browsers:
+Supports all modern browsers with CSS custom properties and `clamp()`:
 
 - Chrome 79+
 - Firefox 75+
@@ -197,6 +234,10 @@ This package uses CSS custom properties (CSS variables) and `clamp()` for respon
 
 - [@transcodes/ui-components](https://www.npmjs.com/package/@transcodes/ui-components) - Lit 3.x component library using these tokens
 
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for release history.
+
 ## License
 
 [MIT](./LICENSE)