{"_id":"@auze/tokens","name":"@auze/tokens","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@auze/tokens","version":"0.1.0","description":"AUZE 디자인 토큰 — DTCG 원본과 CSS/TS/Figma 산출물","license":"UNLICENSED","type":"module","exports":{".":"./dist/tokens.ts","./tokens.css":"./dist/tokens.css","./tokens.*.css":"./dist/tokens.*.css","./tokens.*":"./dist/tokens.*.ts","./src/*":"./src/*"},"devDependencies":{"style-dictionary":"^5.5.2","typescript":"^5.9.3"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/byeonghooni/auze-design-system.git","directory":"packages/tokens"},"scripts":{"build":"node build.mjs","typecheck":"tsc -p tsconfig.json","lint":"echo '(tokens: lint 없음)'"},"_id":"@auze/tokens@0.1.0","bugs":{"url":"https://github.com/byeonghooni/auze-design-system/issues"},"homepage":"https://github.com/byeonghooni/auze-design-system#readme","_integrity":"sha512-ANI0SQZ28Kq2hfDMoCrtkjB1HxKKmJjPvXIFFoiYEC5XkbjxZeIWw2zdgCzMKrQ5jmARoBr7AAotd+XHYJldUQ==","_resolved":"/private/var/folders/8b/dfc2yrln0zqfg8jd200_68ww0000gn/T/0de858f476d921a7571dfdfcfd6ec5c0/auze-tokens-0.1.0.tgz","_from":"file:auze-tokens-0.1.0.tgz","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-ANI0SQZ28Kq2hfDMoCrtkjB1HxKKmJjPvXIFFoiYEC5XkbjxZeIWw2zdgCzMKrQ5jmARoBr7AAotd+XHYJldUQ==","shasum":"9ee32d736fc1349298e38b1cacdc8c68eaa1ddce","tarball":"https://registry.npmjs.org/@auze/tokens/-/tokens-0.1.0.tgz","fileCount":17,"unpackedSize":86810,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDQVwa3gRX5H3uwy+eG4yjU8Ini3I4tS1kJNdoXj6lzFAiAEJdBlfN4G5t40Lzrfih4vhKPwhIbkS2dLJBUaAB2iUQ=="}]},"_npmUser":{"name":"lbh5941","email":"lbh5941@gmail.com"},"directories":{},"maintainers":[{"name":"lbh5941","email":"lbh5941@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_0.1.0_1788092195918_0.3822034067087161"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-30T12:16:35.689Z","0.1.0":"2026-08-30T12:16:36.062Z","modified":"2026-08-30T12:16:36.358Z"},"maintainers":[{"name":"lbh5941","email":"lbh5941@gmail.com"}],"description":"AUZE 디자인 토큰 — DTCG 원본과 CSS/TS/Figma 산출물","homepage":"https://github.com/byeonghooni/auze-design-system#readme","repository":{"type":"git","url":"git+https://github.com/byeonghooni/auze-design-system.git","directory":"packages/tokens"},"bugs":{"url":"https://github.com/byeonghooni/auze-design-system/issues"},"license":"UNLICENSED","readme":"# @auze/tokens\n\nAUZE 디자인 토큰. **원본은 `src/`의 W3C DTCG JSON**이고, `dist/`는 전부 생성물입니다.\n\n## 레이어\n\n| 레이어 | 위치 | 내용 |\n|---|---|---|\n| primitive | `src/primitive/` | 원시 램프. 화면에서 직접 쓰지 않습니다 |\n| semantic | `src/semantic/` | 용도 기반 별칭. 모드(dark/light)별로 파일이 갈립니다 |\n| theme | `src/theme/` | 브랜드별 램프 오버라이드 — `src/theme/README.md` 참고 |\n\n`radius`는 `base` 하나만 토큰이고 `sm`~`4xl` 7단계는 빌드가 계수로 파생시킵니다.\n단계값을 JSON에 박아두면 브랜드 테마가 `base`를 바꿔도 단계가 따라오지 않습니다.\n\n시맨틱은 두 컬렉션으로 나뉩니다.\n\n- **erp** — 근-검정 서피스 + 그린 액센트. `shadcn` 그룹은 `--<name>`, `palette` 그룹은 `--color-<name>`으로 나갑니다\n- **marketing** — 랜딩·마켓·로그인용 별도 팔레트(`void`/`paper`/`ink`/`haze`). ERP와 색 체계가 달라 컴포넌트가 호환되지 않습니다\n\n`brand`와 `near-white`는 두 팔레트가 같은 CSS 변수를 공유하므로 `erp` 쪽에서만 정의합니다.\n\n## 빌드\n\n```bash\npnpm --filter @auze/tokens build   # AUZE 기본\nnode build.mjs buja                              # 브랜드 테마 적용\n```\n\n산출물 3종:\n\n| 파일 | 용도 |\n|---|---|\n| `dist/tokens.css` | Tailwind v4 `@theme` + `@theme inline` 브리지 + 모드 블록 |\n| `dist/tokens.ts` | CSS 변수를 못 읽는 곳용 리터럴 값 (recharts 등) |\n| `dist/figma-variables.json` | Figma Variables REST API 페이로드 (Enterprise 전용 경로) |\n\n빌드는 다크와 라이트가 **같은 변수 집합**을 갖는지 검사하고, 어긋나면 실패합니다.\n한쪽 모드에만 있는 변수는 반대 모드에서 정의되지 않은 채 남아 화면이 조용히 깨집니다.\n\n## 타이포 스케일\n\n원시 램프 10단계: **10 · 11 · 12 · 13 · 14 · 16 · 18 · 20 · 24 · 28px**.\n시맨틱 이름이 이 10단계와 1:1로 대응합니다 — `micro` `caption` `small` `compact`\n`button` `body` `heading` `subtitle` `title` `display`.\n\n현재 앱은 `text-[Npx]` 임의값을 **956회**(랜딩 제외 850회) 쓰고 있고, 시맨틱 토큰은\n100회뿐입니다. 스케일은 그 분포를 실측해서 정했습니다.\n\n| 결정 | 근거 |\n|---|---|\n| 반쪽 단계(11.5·12.5·13.5·14.5)를 만들지 않음 | `11px`을 쓰는 64개 파일 중 36개가 `11.5px`도 함께 쓰지만, 역할 구분은 색과 굵기가 하고 있습니다. 0.5px는 흘러내린 값입니다 |\n| `15px`(29회) → `16px` | 볼드 라벨·제목 용도라 크기 대신 굵기로 구분합니다. 15를 남기면 13·14·15·16이 연속돼 \"14냐 15냐\"를 매번 판단해야 하고, 스케일이 제약 기능을 잃습니다 |\n| `badge`(10.5px)를 `micro`(10px)로 통합 | 같은 값에 두 이름이 있으면 어느 걸 써야 할지가 매번 모호해집니다 |\n| `8`·`9px`은 스케일 대상이 아님 | `●`·`▾` 같은 **문자를 아이콘으로** 쓰는 자리입니다. 도형(`size-*`)으로 바꿔야 할 코드입니다 |\n| `17`·`19`·`22`·`26px`도 대상이 아님 | 전부 KPI 숫자인데 화면마다 다릅니다(`Stat` 22px, mobile home 19·17px, dashboard 26px). `Stat` 프리미티브 통합이 해결합니다 |\n\n## 왜 CSS가 아니라 DTCG가 원본인가\n\nFigma Variables는 컬렉션·모드·타입(color/float)을 요구하는데 CSS 커스텀 프로퍼티에는\n그 정보가 없습니다. DTCG의 `$type`/`$value`와 모드별 파일 분리는 Figma 컬렉션에 그대로 대응합니다.\n\n## Tailwind v4 연결\n\n`@theme inline`이 유틸리티를 선언하고(`--color-surface-1: var(--surface-1)`),\n실제 값은 모드 블록의 평범한 커스텀 프로퍼티가 쥡니다. 이래야 `data-theme` 하나로\n팔레트 전체가 뒤집힙니다.\n\n현재 ERP 앱은 팔레트를 `@theme`에 고정값으로 넣어둬서 모드 전환이 불가능했고,\n라이트 모드를 `main[data-landing][data-theme=\"light\"]` 같은 스코프마다 손으로\n덮고 있었습니다. 이 패키지는 그 구조를 정리한 것입니다.\n\n`:root` 블록은 `.dark` 클래스도 함께 받습니다. 기존 앱이 `<html class=\"dark\">`와\n`dark:` 유틸리티에 의존하고 있어, 마이그레이션 중 양쪽이 동시에 동작해야 하기 때문입니다.\n\n## Figma 동기화 (코드 → Figma)\n\n- **기본 (Professional 이하)** — Tokens Studio 플러그인의 GitHub 동기화를\n  `packages/tokens/src`에 연결합니다. `$metadata.json`·`$themes.json`이 그 경로에\n  있어 플러그인이 세트와 테마를 그대로 읽습니다. 디자이너는 Pull만 누릅니다.\n- **승격 (Enterprise)** — `dist/figma-variables.json` + `scripts/figma/push-variables.ts`.\n  Variables REST API는 읽기·쓰기 모두 Enterprise 전용입니다.\n","readmeFilename":"README.md","_rev":"1-00599fcc7e4b5f025692b738090116ea"}