{"_id":"@btlb/tokens","name":"@btlb/tokens","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@btlb/tokens","version":"1.0.0","description":"W3C Design Tokens for BTLB design system","type":"module","main":"dist/tokens.css","exports":{".":"./dist/tokens.css","./primitives.css":"./dist/primitives.css","./semantic.css":"./dist/semantic.css","./tokens/*.json":"./tokens/*/*.json"},"scripts":{"build":"node scripts/build-tokens.js"},"keywords":["design-tokens","w3c","dtcg","css-variables"],"author":{"name":"Quintin Orsmond"},"license":"MIT","devDependencies":{"style-dictionary":"^4.2.0"},"_id":"@btlb/tokens@1.0.0","gitHead":"4ae627b29dea52f2550cae73b2f7140d6d5bd38c","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-lgqLD8+a1s3mG4ns850QQmF3ZXiyCI40EtqIQ+kmdrh9kXVqNxtauAXJclO807N1or3fEBDbEkJtrm5Bvi7LpA==","shasum":"2011cfda9d7e3d5033b60192b9d3e0d8c5602239","tarball":"https://registry.npmjs.org/@btlb/tokens/-/tokens-1.0.0.tgz","fileCount":14,"unpackedSize":31810,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDW2ft4FM7BGkLHUeHZ8w2vNmMV3YWObJjYsBgoi4yz2QIhAIWqSw50BqA5bjqxoinycbopqXnGX8TQogU/s8tEQ2hp"}]},"_npmUser":{"name":"qorsmond","email":"qorsmond@gmail.com"},"directories":{},"maintainers":[{"name":"qorsmond","email":"qorsmond@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_1.0.0_1763408910503_0.5448513445133074"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-17T19:48:30.391Z","1.0.0":"2025-11-17T19:48:30.713Z","modified":"2025-11-17T19:48:31.069Z"},"maintainers":[{"name":"qorsmond","email":"qorsmond@gmail.com"}],"description":"W3C Design Tokens for BTLB design system","keywords":["design-tokens","w3c","dtcg","css-variables"],"author":{"name":"Quintin Orsmond"},"license":"MIT","readme":"# @btlb/tokens\n\nW3C Design Tokens (DTCG spec) for the BTLB design system.\n\n## Installation\n\n```bash\nnpm install @btlb/tokens\n```\n\n## Usage\n\n### Import All Tokens\n\n```css\n@import '@btlb/tokens';\n```\n\nThis imports both primitives and semantic tokens in the correct cascade layer order.\n\n### Import Separately\n\n```css\n/* Primitives only */\n@import '@btlb/tokens/primitives.css';\n\n/* Semantic tokens only (requires primitives) */\n@import '@btlb/tokens/semantic.css';\n```\n\n## Token Structure\n\n### Primitives\n\nRaw design values organized by category:\n\n- **Colors**: Gray, blue, green, red, amber scales (50-950)\n- **Spacing**: 0-64 scale in rem units\n- **Typography**: Font families, sizes, weights, line heights\n- **Radii**: Border radius values\n- **Shadows**: Box shadow tokens\n- **Motion**: Durations and easing curves\n\nExample:\n```css\nvar(--color-blue-600)\nvar(--space-4)\nvar(--font-size-lg)\nvar(--radius-md)\nvar(--shadow-lg)\nvar(--motion-duration-base)\n```\n\n### Semantics\n\nPurpose-driven tokens that reference primitives:\n\n- **Backgrounds**: `--color-bg-surface`, `--color-bg-interactive`, etc.\n- **Text**: `--color-text-primary`, `--color-text-secondary`, etc.\n- **Borders**: `--color-border-default`, `--color-border-focus`, etc.\n- **Status**: Success, error, warning, info variants\n- **Spacing**: `--spacing-card-padding`, `--spacing-button-padding-x`, etc.\n- **Typography**: `--typography-body-font-size`, `--typography-heading-font-weight`, etc.\n\nExample:\n```css\nvar(--color-bg-surface)\nvar(--color-text-primary)\nvar(--spacing-card-padding)\nvar(--typography-body-font-size)\n```\n\n## Customizing Tokens\n\n### Option 1: Override in Your CSS\n\n```css\n@import '@btlb/tokens';\n\n/* Override semantic tokens for your theme */\n@layer semantic {\n  :root {\n    --color-bg-interactive: var(--color-green-600);\n    --color-text-primary: var(--color-gray-950);\n  }\n}\n```\n\n### Option 2: Import Your Own W3C Tokens\n\nExport design tokens from Penpot, Figma, or create your own following the [W3C DTCG spec](https://tr.designtokens.org/format/):\n\n```css\n/* Don't import @btlb/tokens */\n/* Import your custom tokens instead */\n@import './my-penpot-tokens.css' layer(tokens);\n\n/* Then use BTLB layers that consume those tokens */\n@import '@btlb/baseline';\n@import '@btlb/layouts';\n```\n\n## Source JSON Files\n\nThe source W3C Design Token JSON files are included in `tokens/`:\n\n```\ntokens/\n├── primitives/\n│   ├── colors.json\n│   ├── spacing.json\n│   ├── typography.json\n│   ├── radii.json\n│   ├── shadows.json\n│   └── motion.json\n└── semantic/\n    ├── colors.json\n    ├── spacing.json\n    └── typography.json\n```\n\nYou can import these in your own Style Dictionary build if you want to extend or modify them.\n\n## W3C DTCG Format\n\nAll tokens follow the W3C Design Tokens Community Group format:\n\n```json\n{\n  \"color\": {\n    \"$type\": \"color\",\n    \"blue\": {\n      \"500\": {\n        \"$value\": \"#3b82f6\",\n        \"$description\": \"Primary blue\"\n      }\n    }\n  }\n}\n```\n\nToken references use curly brace syntax:\n\n```json\n{\n  \"color\": {\n    \"bg\": {\n      \"interactive\": {\n        \"$value\": \"{color.blue.600}\"\n      }\n    }\n  }\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-8e83880e21ed528f60562ebb356eb90b"}