{"_id":"@billabex/ui-tokens","_rev":"2-89f7f1b1ffe5002bd7911759292b5a35","name":"@billabex/ui-tokens","dist-tags":{"latest":"0.1.1"},"versions":{"0.0.0":{"name":"@billabex/ui-tokens","version":"0.0.0","license":"MIT","_id":"@billabex/ui-tokens@0.0.0","maintainers":[{"name":"tinque","email":"quentin.georget@gmail.com"}],"homepage":"https://github.com/billabex/lingot#readme","bugs":{"url":"https://github.com/billabex/lingot/issues"},"dist":{"shasum":"682395dcf079a28a316d4168b77e08055b05567a","tarball":"https://registry.npmjs.org/@billabex/ui-tokens/-/ui-tokens-0.0.0.tgz","fileCount":17,"integrity":"sha512-SfG/G0KJmw5v9RhsukNirm99551PRuepNz3G4z9q3noQRiKvL70J2qKR55XxmUQ65/EsOgjcK/YRa6d5fR/+Vw==","signatures":[{"sig":"MEQCIEXrGyFp8fW0b/CDFycVCR0BtMggKItQap5iMqP5fO5oAiACeLaBjrS1zau4dycHgp+lh6C+kbdK1lRdU5AQKFTCkw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31561},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./tokens.json":"./tokens.json"},"gitHead":"979e9643b1c64da336f0fcdaef142a15fc51c4d6","scripts":{"lint":"tsc --noEmit","test":"vitest run","build":"vite build && tsc --emitDeclarationOnly","clean":"rm -rf dist","prepare":"pnpm build:figma","test:watch":"vitest","build:figma":"tsx scripts/build-figma.ts"},"_npmUser":{"name":"tinque","email":"quentin.georget@gmail.com"},"repository":{"url":"git+https://github.com/billabex/lingot.git","type":"git","directory":"packages/ui-tokens"},"_npmVersion":"11.9.0","description":"Design tokens for the Billabex design system — framework-agnostic, Figma Token Studio compatible","directories":{},"sideEffects":false,"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.19.0","vite":"^6.0.0","vitest":"^3.0.0","vite-plugin-dts":"^4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-tokens_0.0.0_1773184931729_0.5165645185890153","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@billabex/ui-tokens","version":"0.1.1","description":"Design tokens for the Billabex design system — framework-agnostic, Figma Token Studio compatible","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./tokens.json":"./tokens.json"},"devDependencies":{"tsx":"^4.19.0","vite":"^6.0.0","vite-plugin-dts":"^4.3.0","vitest":"^3.0.0"},"publishConfig":{"access":"public"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/billabex/lingot.git","directory":"packages/ui-tokens"},"sideEffects":false,"scripts":{"build":"vite build && tsc --emitDeclarationOnly","build:figma":"tsx scripts/build-figma.ts","test":"vitest run","test:watch":"vitest","clean":"rm -rf dist","lint":"tsc --noEmit"},"_id":"@billabex/ui-tokens@0.1.1","bugs":{"url":"https://github.com/billabex/lingot/issues"},"homepage":"https://github.com/billabex/lingot#readme","_integrity":"sha512-lPP2S/8PgnODhtFrJkQzcbrxgmUi3KVtXsyvP24INj5XM/VTlH/ohCjcicmHx+xigqnAZUJq9fzSHpSMkZ3Lxg==","_resolved":"/tmp/a367505ac56c216efefe8589e99b5428/billabex-ui-tokens-0.1.1.tgz","_from":"file:billabex-ui-tokens-0.1.1.tgz","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-lPP2S/8PgnODhtFrJkQzcbrxgmUi3KVtXsyvP24INj5XM/VTlH/ohCjcicmHx+xigqnAZUJq9fzSHpSMkZ3Lxg==","shasum":"3bd00fca524fef4496ea3bea1efc9b5052034f72","tarball":"https://registry.npmjs.org/@billabex/ui-tokens/-/ui-tokens-0.1.1.tgz","fileCount":23,"unpackedSize":35980,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@billabex%2fui-tokens@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFXVI6UVW9HiT5t0zj/NNPU3x6z87d1bqJVDBq+QnsM/AiEA5N5ViPIOWbZzTzbU7op6xXwmx4yxnVPZ4Nl3zSO6/74="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:e3d01f83-5fb4-42f1-94cc-392bee8a8959"}},"directories":{},"maintainers":[{"name":"tinque","email":"quentin.georget@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-tokens_0.1.1_1773243746113_0.002292838634449623"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-10T23:22:11.630Z","modified":"2026-03-11T15:42:26.545Z","0.0.0":"2026-03-10T23:22:11.884Z","0.1.1":"2026-03-11T15:42:26.259Z"},"bugs":{"url":"https://github.com/billabex/lingot/issues"},"license":"MIT","homepage":"https://github.com/billabex/lingot#readme","repository":{"type":"git","url":"git+https://github.com/billabex/lingot.git","directory":"packages/ui-tokens"},"description":"Design tokens for the Billabex design system — framework-agnostic, Figma Token Studio compatible","maintainers":[{"name":"tinque","email":"quentin.georget@gmail.com"}],"readme":"# @billabex/ui-tokens\n\n[![npm](https://img.shields.io/npm/v/@billabex/ui-tokens?color=d4a853)](https://www.npmjs.com/package/@billabex/ui-tokens)\n\nDesign tokens for the [Billabex](https://next.billabex.com) design system. Pure TypeScript, framework-agnostic, [Figma Token Studio](https://tokens.studio/) compatible.\n\nPart of the [Lingot](https://github.com/billabex/lingot) monorepo.\n\n## Install\n\n```bash\npnpm add @billabex/ui-tokens\n```\n\n## Usage\n\nTokens are rich TypeScript objects with built-in conversion methods — not plain strings:\n\n```ts\nimport { bg, text, spacing, shadows } from '@billabex/ui-tokens'\n\n// Colors\nbg.default.hex            // '#ffffff'\nbg.default.rgb            // { r: 255, g: 255, b: 255 }\nbg.default.rgba(0.5)      // 'rgba(255, 255, 255, 0.5)'\nbg.default.hsl            // { h: 0, s: 0, l: 100 }\n`${bg.default}`           // '#ffffff' (toString)\n\n// Dimensions\nspacing.md.value          // 8\nspacing.md.px             // '8px'\nspacing.md.rem            // '0.5rem'\n\n// Shadows\nshadows.sm.css            // '0px 2px 8px 0px rgba(28, 28, 26, 0.08)'\n```\n\n## Token Architecture\n\n```\nPrimitive → Semantic → Consumer\n```\n\n- **Primitive tokens** define the raw palette: `colors.neutral[700]`, `spacing.md`, `radii.lg`\n- **Semantic tokens** give purpose: `bg.default`, `text.primary`, `action.destructive`, `border.default`\n\nSemantic tokens reference primitives, so palette changes propagate everywhere automatically.\n\n## Units (px vs rem)\n\nPrimitive dimension tokens are authored from **px** values (to match Figma handoff precisely), but each token exposes both:\n\n- `.px` for pixel-precise usage\n- `.rem` for scalable, accessibility-friendly usage\n\nRecommended usage:\n\n- Typography and layout spacing: prefer **`rem`**\n- Borders/hairlines and pixel-critical details: use **`px`**\n\nExample:\n\n```ts\nimport { spacing, typography } from '@billabex/ui-tokens'\n\n// Preferred defaults in component CSS\nspacing.md.rem                    // '0.5rem'\ntypography.body.fontSize.rem      // e.g. '0.875rem'\n\n// Pixel-precise cases\nspacing.md.px                     // '8px'\n```\n\n## Available Token Categories\n\n| Category | Primitives | Semantics |\n|----------|-----------|-----------|\n| Colors | `neutral`, `gold`, `terracotta`, `status` scales | `bg.*`, `text.*`, `action.*`, `status.*`, `border.*` |\n| Spacing | `xs` through `5xl` (4px–64px) | — |\n| Radii | `sm`, `md`, `lg`, `xl`, `full` | — |\n| Shadows | `sm`, `md`, `lg` | — |\n| Typography | `heading`, `body`, `label`, `caption` | — |\n\n## Figma Token Studio\n\nTokens are exported to `tokens.json` in [W3C DTCG](https://design-tokens.github.io/community-group/format/) format. Semantic tokens use references (`{global.color.neutral.700}`) so changes to the primitive palette propagate automatically in Token Studio.\n\n## License\n\n[MIT](https://github.com/billabex/lingot/blob/main/LICENSE)\n","readmeFilename":"README.md"}