{"_id":"@comneed/lyra-design-tokens","name":"@comneed/lyra-design-tokens","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@comneed/lyra-design-tokens","version":"0.1.0","description":"Lyra Design Tokens","license":"MIT","author":{"name":"Yujm"},"repository":{"type":"git","url":"git+https://github.com/comneed/lyra.git","directory":"packages/design-tokens"},"bugs":{"url":"https://github.com/comneed/lyra/issues"},"homepage":"https://github.com/comneed/lyra#readme","keywords":["design-tokens","css-variables","design-system"],"type":"module","exports":{"./css":"./dist/css/tokens.css","./css/media-queries":"./dist/css/media-queries.css","./js":"./dist/js/index.js","./json":"./dist/json/tokens.json"},"devDependencies":{"jsdom":"^27.0.1","style-dictionary":"^5.1.1"},"publishConfig":{"access":"public"},"scripts":{"build":"node build.js","build:figma":"node build-figma.js","dev":"node build.js --watch","clean":"rm -rf dist"},"_id":"@comneed/lyra-design-tokens@0.1.0","_integrity":"sha512-FdRlwhKdWYb60iBHFL39wfbLrv5FSPO9JRAXGZpItRYZDgtEGHWsvPQxTtW8GdTwey74GPERWlcTI9hhbXnLaw==","_resolved":"/private/var/folders/b6/wjc643f52c19zxjn45z0zmzr0000gn/T/6446bc39ccb615c161020de880ab9503/comneed-lyra-design-tokens-0.1.0.tgz","_from":"file:comneed-lyra-design-tokens-0.1.0.tgz","_nodeVersion":"24.7.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-FdRlwhKdWYb60iBHFL39wfbLrv5FSPO9JRAXGZpItRYZDgtEGHWsvPQxTtW8GdTwey74GPERWlcTI9hhbXnLaw==","shasum":"ee5cc0ed0d781196501e0f9a67d3b21e5d092a4a","tarball":"https://registry.npmjs.org/@comneed/lyra-design-tokens/-/lyra-design-tokens-0.1.0.tgz","fileCount":7,"unpackedSize":35103,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDwDYNT6a2NfPkSjfmKogL5uHJTqQBPGI1w5Iu8saaU4AIgWC2ZFWXc2dVEyWBhigyTKg0UpsjIcAdv2wSU87vpIb4="}]},"_npmUser":{"name":"polcaneli","email":"polcaneli@gmail.com"},"directories":{},"maintainers":[{"name":"polcaneli","email":"polcaneli@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lyra-design-tokens_0.1.0_1763356537603_0.7467120126054603"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-17T05:15:37.551Z","0.1.0":"2025-11-17T05:15:37.777Z","modified":"2025-11-17T05:15:38.008Z"},"maintainers":[{"name":"polcaneli","email":"polcaneli@gmail.com"}],"description":"Lyra Design Tokens","homepage":"https://github.com/comneed/lyra#readme","keywords":["design-tokens","css-variables","design-system"],"repository":{"type":"git","url":"git+https://github.com/comneed/lyra.git","directory":"packages/design-tokens"},"author":{"name":"Yujm"},"bugs":{"url":"https://github.com/comneed/lyra/issues"},"license":"MIT","readme":"# @lyra/design-tokens\n\nW3C DTCG 표준을 준수하는 Lyra 디자인 시스템의 Primitive 디자인 토큰 패키지입니다.\n\n## 📦 Installation\n\n```bash\npnpm add @lyra/design-tokens\n```\n\n## 🎯 Philosophy\n\n이 패키지는 **Primitive 토큰만** 제공합니다. Semantic 레이어(예: `color-bg-primary`, `color-text-default`)는 각 플랫폼(Web, iOS, Android 등)에서 정의하세요.\n\n### Why Primitive-First?\n\n- ✅ **멀티플랫폼 지원**: 각 플랫폼의 네이밍 컨벤션에 맞춰 사용 가능\n- ✅ **유연성**: 플랫폼별로 다른 semantic 의미 부여 가능\n- ✅ **유지보수성**: 한 곳에서 primitive 값만 관리\n\n## 📚 Token Categories\n\n### 1. Size (2px 단위 체계)\n```css\n--size-0: 0px\n--size-px: 1px\n--size-1: 2px    (0.125rem)\n--size-2: 4px    (0.25rem)\n--size-4: 8px    (0.5rem)\n--size-8: 16px   (1rem)\n--size-12: 24px  (1.5rem)\n--size-16: 32px  (2rem)\n--size-24: 48px  (3rem)\n--size-32: 64px  (4rem)\n```\n\n**Icon Sizes**:\n```css\n--size-icon-sm: 16px  (var(--size-8))\n--size-icon-md: 20px  (var(--size-10))\n--size-icon-lg: 24px  (var(--size-12))\n```\n\n### 2. Colors (7 Palettes × 11 Shades)\n각 컬러는 50~950까지 11개 shade 제공 (50이 가장 밝고, 950이 가장 어두움)\n\n```css\n/* Gray Scale */\n--color-gray-50: oklch(0.984 0.003 247.858)\n--color-gray-500: oklch(0.554 0.046 257.417)\n--color-gray-950: oklch(0.129 0.042 264.695)\n\n/* Brand Colors */\n--color-blue-{50-950}\n--color-red-{50-950}\n--color-green-{50-950}\n--color-yellow-{50-950}\n--color-orange-{50-950}\n--color-purple-{50-950}\n--color-pink-{50-950}\n```\n\n### 3. Typography\n\n**Font Families**:\n```css\n--font-family-sans: system-ui, -apple-system, ...\n--font-family-mono: 'Menlo', 'Monaco', ...\n```\n\n**Font Sizes** (모두 size 토큰 참조):\n```css\n--font-size-sm: 14px   (var(--size-7))\n--font-size-base: 16px (var(--size-8))\n--font-size-lg: 18px   (var(--size-9))\n--font-size-xl: 20px   (var(--size-10))\n--font-size-2xl: 24px  (var(--size-12))\n```\n\n**Font Weights**:\n```css\n--font-weight-normal: 400\n--font-weight-medium: 500\n--font-weight-semibold: 600\n```\n\n**Line Heights**:\n```css\n--font-line-height-tight: 1.25   (제목용)\n--font-line-height-normal: 1.5   (본문용)\n```\n\n### 4. Borders\n\n**Widths** (size 토큰 참조):\n```css\n--border-width-0: 0px (var(--size-0))\n--border-width-1: 1px (var(--size-px))\n--border-width-2: 2px (var(--size-1))\n--border-width-4: 4px (var(--size-2))\n```\n\n**Radius** (size 토큰 참조):\n```css\n--border-radius-none: 0px      (var(--size-0))\n--border-radius-sm: 4px        (var(--size-2))\n--border-radius-md: 8px        (var(--size-4))\n--border-radius-full: 9999px   (pill/circle)\n```\n\n### 5. Shadows\n\n```css\n--shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05)\n--shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), ...\n--shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), ...\n--shadow-inner: inset 0 2px 4px 0 oklch(0 0 0 / 0.05)\n```\n\n### 6. Animation\n\n**Durations**:\n```css\n--duration-instant: 0ms\n--duration-fast: 100ms\n--duration-base: 200ms\n--duration-moderate: 300ms\n--duration-slow: 500ms\n```\n\n**Easing**:\n```css\n--easing-linear: linear\n--easing-ease: ease\n--easing-ease-in: ease-in\n--easing-ease-out: ease-out\n--easing-ease-in-out: ease-in-out\n```\n\n### 7. Z-Index (레이어 시스템)\n\n```css\n--z-index-base: 0           /* 기본 레이어 */\n--z-index-dropdown: 1000    /* 드롭다운, 팝오버 */\n--z-index-sticky: 1100      /* Sticky 요소 */\n--z-index-overlay: 1200     /* 오버레이 배경 */\n--z-index-modal: 1300       /* 모달, 다이얼로그 */\n--z-index-popover: 1400     /* 팝오버 (모달 위) */\n--z-index-tooltip: 1500     /* 툴팁 */\n--z-index-notification: 1600 /* 토스트, 알림 */\n```\n\n### 8. Breakpoints (반응형 디자인)\n\n```css\n--breakpoint-sm: 640px   /* Small devices (mobile landscape) */\n--breakpoint-md: 768px   /* Medium devices (tablets) */\n--breakpoint-lg: 1024px  /* Large devices (desktops) */\n--breakpoint-xl: 1280px  /* Extra large devices (large desktops) */\n--breakpoint-2xl: 1536px /* 2X large devices (ultra-wide) */\n```\n\n**Media Query 사용 예**:\n```css\n@media (min-width: var(--breakpoint-md)) {\n  /* Tablet and above */\n}\n\n@media (min-width: var(--breakpoint-lg)) {\n  /* Desktop and above */\n}\n```\n\n## 💻 Usage\n\n### CSS\n```css\n@import \"@lyra/design-tokens/css\";\n\n.my-component {\n  /* ✅ Good: Primitive 토큰 직접 사용 */\n  padding: var(--size-4);\n  background: var(--color-blue-500);\n  border-radius: var(--border-radius-md);\n\n  /* ✅ Good: Semantic 레이어는 프로젝트에서 정의 */\n  --color-bg-primary: var(--color-blue-500);\n  background: var(--color-bg-primary);\n}\n```\n\n### JavaScript/TypeScript\n```typescript\nimport tokens from '@lyra/design-tokens/js';\n\nconst primaryColor = tokens.ColorBlue500; // \"oklch(0.623 0.214 249.816)\"\nconst baseSize = tokens.Size8;            // \"1rem\"\n```\n\n### JSON\n```typescript\nimport tokens from '@lyra/design-tokens/json';\n\nconst allTokens = tokens; // { Size0: \"0\", Size1: \"0.125rem\", ... }\n```\n\n## 🎨 Creating Semantic Layers\n\n각 플랫폼에서 semantic 토큰을 정의하세요:\n\n### Web (CSS)\n```css\n:root {\n  /* Surface colors */\n  --color-bg-surface-default: var(--color-gray-50);\n  --color-bg-surface-subdued: var(--color-gray-100);\n\n  /* Brand colors */\n  --color-bg-primary-default: var(--color-blue-500);\n  --color-bg-primary-hover: var(--color-blue-600);\n\n  /* Text colors */\n  --color-text-default: var(--color-gray-900);\n  --color-text-subdued: var(--color-gray-600);\n}\n\n[data-theme=\"dark\"] {\n  --color-bg-surface-default: var(--color-gray-900);\n  --color-text-default: var(--color-gray-50);\n}\n```\n\n### iOS (Swift)\n```swift\nextension Color {\n    static let surfaceDefault = Color(palette.gray.shade50)\n    static let surfaceDefaultDark = Color(palette.gray.shade900)\n\n    static let textDefault = Color(palette.gray.shade900)\n    static let textDefaultDark = Color(palette.gray.shade50)\n}\n```\n\n### Android (Kotlin/Compose)\n```kotlin\nobject AppColors {\n    val surfaceDefault = palette.gray.shade50\n    val surfaceDefaultDark = palette.gray.shade900\n\n    val textDefault = palette.gray.shade900\n    val textDefaultDark = palette.gray.shade50\n}\n```\n\n## 🔧 Development\n\n```bash\n# Build tokens\npnpm build\n\n# Build Figma Tokens config\npnpm build:figma\n\n# Watch mode (파일 변경 시 자동 빌드)\npnpm dev\n\n# Clean output\npnpm clean\n```\n\n**Watch Mode**: 토큰 파일을 수정하면 자동으로 재빌드됩니다.\n```bash\npnpm dev\n# 👀 Watching for changes...\n# 📝 Change detected: colors/primitives.json\n# 🎨 Building primitive design tokens...\n```\n\n## 🎨 Figma Integration\n\n이 패키지는 **Figma Tokens (Tokens Studio)** 플러그인과 완벽하게 호환됩니다.\n\n### Setup\n\n1. Figma Tokens 플러그인 설치\n2. 프로젝트 루트의 `$tokens.json` 파일을 Figma Tokens에 연결\n3. 토큰 자동 동기화\n\n```bash\n# Figma Tokens 파일 생성\npnpm build:figma\n```\n\n### Sync Workflow\n\n1. **디자인 → 코드**: Figma에서 토큰 변경 후 `$tokens.json` 내보내기\n2. **코드 → 디자인**: 토큰 파일 수정 후 `pnpm build:figma` 실행\n\n### Token Sets\n\n- `primitives/size` - 2px 단위 체계\n- `primitives/colors` - 7개 컬러 팔레트\n- `primitives/typography` - 폰트 관련 토큰\n- `primitives/borders` - 테두리 스타일\n- `primitives/shadows` - 그림자 효과\n- `primitives/animation` - 애니메이션 타이밍\n- `primitives/z-index` - 레이어 시스템\n- `primitives/breakpoints` - 반응형 디자인\n\n## 📖 Token Structure (DTCG Format)\n\n모든 토큰은 W3C DTCG 표준을 따릅니다:\n\n```json\n{\n  \"size\": {\n    \"4\": {\n      \"$value\": \"0.5rem\",\n      \"$type\": \"dimension\",\n      \"$description\": \"8px\"\n    }\n  }\n}\n```\n\n## 🔗 Token References\n\n토큰은 다른 토큰을 참조할 수 있습니다:\n\n```json\n{\n  \"font\": {\n    \"size\": {\n      \"base\": {\n        \"$value\": \"{size.8}\",\n        \"$type\": \"dimension\"\n      }\n    }\n  }\n}\n```\n\n빌드 시 자동으로 CSS 변수로 변환됩니다:\n```css\n--font-size-base: var(--size-8);\n```\n\n## 📊 Token Count\n\n- **Total**: 156 tokens\n- **Size**: 21 tokens (0~64px scale + icon sizes)\n- **Colors**: 77 tokens (7 palettes × 11 shades)\n- **Typography**: 11 tokens\n- **Borders**: 8 tokens\n- **Shadows**: 4 tokens\n- **Animation**: 9 tokens\n- **Z-Index**: 8 tokens (layering system)\n- **Breakpoints**: 5 tokens (responsive design)\n\n## 🎯 Design Decisions\n\n### 2px Unit System\n모든 size 토큰은 2px 단위로 증가하여 일관된 spacing rhythm을 제공합니다.\n\n### OKLCH Color Space\n모든 색상은 OKLCH 색공간을 사용하여 지각적으로 균일한 그라데이션을 제공합니다.\n\n### Reference-Based Architecture\n토큰 간 참조를 통해 Single Source of Truth를 유지하고 유지보수성을 높입니다.\n\n## 📝 License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-bb94da0884606b0ee126ec3c156cfe7d"}