{"_id":"@aruuri/design-tokens","_rev":"2-397ccc6334a461450892cbe29252eb9f","name":"@aruuri/design-tokens","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@aruuri/design-tokens","version":"0.1.0","_id":"@aruuri/design-tokens@0.1.0","maintainers":[{"name":"abshir","email":"abshir.y.ahmed@gmail.com"},{"name":"aruuri-admin","email":"admin@aruuri.so"}],"dist":{"shasum":"301b0792fb03ae2314d1ae903d3297bf079646f7","tarball":"https://registry.npmjs.org/@aruuri/design-tokens/-/design-tokens-0.1.0.tgz","fileCount":8,"integrity":"sha512-1entHcQzPYOkUNjErfv+NfBTtzOGih+DF0cEMwBwJ7SN4NbnL3wGZWcH/roLDuwOVKEHWXQ+gUE63PHT0x1DJg==","signatures":[{"sig":"MEQCIH+MWpmYuZu43XhUgc03NowTzPiW/Cy9DjbeW7ZxS2QUAiAXwcEfDcaxxRJQzqUkOVs/+c1kYUMkH56tN2ToV3gF8Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24610},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css"},"gitHead":"f2bedd87ffa40b16e3c9949955c0a6839dfee28f","scripts":{"build":"pnpm run build:tokens && pnpm run build:ts","clean":"rm -rf dist","build:ts":"tsc","typecheck":"tsc --noEmit","build:tokens":"style-dictionary build --config config.js"},"_npmUser":{"name":"abshir","email":"abshir.y.ahmed@gmail.com"},"_npmVersion":"10.9.2","description":"Aruuri design tokens generated from Figma","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.3","style-dictionary":"^5.1.0","@tokens-studio/sd-transforms":"^2.0.1"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.0_1759707576239_0.9674315361916264","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@aruuri/design-tokens","version":"0.1.2","description":"Aruuri design tokens generated from Figma","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css"},"scripts":{"build":"pnpm run build:tokens && pnpm run build:ts","build:tokens":"style-dictionary build --config config.js","build:ts":"tsc","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"devDependencies":{"@tokens-studio/sd-transforms":"^2.0.1","style-dictionary":"^5.1.0","typescript":"^5.9.3"},"_id":"@aruuri/design-tokens@0.1.2","gitHead":"0bcf3206931866bdfe32089ddd57b051cb4f5715","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-+omnfF07KvpP/KI4ske43rqXVP0YrHDSwBrSNboIR4nHmmqjO1PYVzJoULu0KP8bL8QgGx0lvJSCOLGLhg9P0Q==","shasum":"323b617b7759e2bc1313615660d2c63927bf8d8c","tarball":"https://registry.npmjs.org/@aruuri/design-tokens/-/design-tokens-0.1.2.tgz","fileCount":8,"unpackedSize":21485,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCsC6zlH9yG1XYkdKVuhljVcUvIRPURqMPRbiLjPqfiYwIgcS0CXp29Duop8aRhXA2koQbMrilJ5QmBqdLplBq+w0A="}]},"_npmUser":{"name":"abshir","email":"abshir.y.ahmed@gmail.com"},"directories":{},"maintainers":[{"name":"abshir","email":"abshir.y.ahmed@gmail.com"},{"name":"aruuri-admin","email":"admin@aruuri.so"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-tokens_0.1.2_1760219192443_0.8639057178689857"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-05T23:39:36.160Z","modified":"2025-10-11T21:46:32.881Z","0.1.0":"2025-10-05T23:39:36.434Z","0.1.2":"2025-10-11T21:46:32.676Z"},"description":"Aruuri design tokens generated from Figma","maintainers":[{"name":"abshir","email":"abshir.y.ahmed@gmail.com"},{"name":"aruuri-admin","email":"admin@aruuri.so"}],"readme":"# @aruuri/design-tokens\n\nDesign tokens for the Aruuri platform, generated from Figma variables.\n\n## Overview\n\nThis package contains the single source of truth for all design values in the Aruuri platform:\n\n- Colors\n- Spacing\n- Typography\n- Border radius\n- Shadows\n- Motion/transitions\n\n## Usage\n\n### In CSS\n\n```css\n@import '@aruuri/design-tokens/tokens.css';\n\n.my-component {\n  background: var(--color-bg-canvas);\n  padding: var(--space-4);\n  border-radius: var(--radius-md);\n}\n```\n\n### In Tailwind\n\nTokens are automatically available in Tailwind via our custom configuration:\n\n```jsx\n<div className=\"bg-bg-canvas p-4 rounded-md\">Content</div>\n```\n\n### In JavaScript\n\n```typescript\nimport { tokens } from '@aruuri/design-tokens';\n\nconst primaryColor = tokens.color.bg.accent;\n```\n\n## Token Structure\n\n### Colors\n\n```\n--color-bg-canvas\n--color-bg-surface\n--color-bg-elevated\n--color-bg-accent\n--color-bg-hover\n--color-text-primary\n--color-text-muted\n--color-text-onAccent\n--color-border-subtle\n--color-border-default\n--color-focus-ring\n```\n\n### Spacing\n\n```\n--space-1  (0.25rem / 4px)\n--space-2  (0.5rem / 8px)\n--space-3  (0.75rem / 12px)\n--space-4  (1rem / 16px)\n--space-5  (1.25rem / 20px)\n--space-6  (1.5rem / 24px)\n--space-8  (2rem / 32px)\n--space-10 (2.5rem / 40px)\n--space-12 (3rem / 48px)\n--space-16 (4rem / 64px)\n```\n\n### Typography\n\n```\n--font-size-xs\n--font-size-sm\n--font-size-md\n--font-size-lg\n--font-size-xl\n--font-size-2xl\n--font-size-3xl\n--font-size-4xl\n--font-weight-normal\n--font-weight-medium\n--font-weight-semibold\n--font-weight-bold\n--font-family-sans\n--font-family-mono\n```\n\n### Other\n\n```\n--radius-sm\n--radius-md\n--radius-lg\n--radius-full\n--shadow-sm\n--shadow-md\n--shadow-lg\n--motion-duration-fast\n--motion-duration-normal\n--motion-duration-slow\n```\n\n## Updating Tokens\n\n### Automated (Recommended)\n\n1. Update design variables in Figma\n2. Use the Figma Tokens plugin to sync\n3. Plugin creates a PR automatically\n4. GitHub Actions builds the tokens\n5. Review and merge\n\nSee [../../docs/FIGMA_TOKENS.md](../../docs/FIGMA_TOKENS.md) for detailed instructions.\n\n### Manual\n\n1. Export variables from Figma using the Figma Tokens plugin\n2. Update `tokens.json` in the root of this package\n3. Run `pnpm run build` to generate CSS and JS outputs\n4. Test the changes locally\n5. Create a PR\n\n## Scripts\n\n```bash\n# Build everything (tokens + TypeScript)\npnpm run build\n\n# Build just the tokens (CSS & JS via Style Dictionary)\npnpm run build:tokens\n\n# Build just the TypeScript definitions\npnpm run build:ts\n\n# Type check\npnpm run typecheck\n\n# Clean build artifacts\npnpm run clean\n```\n\n## Token Guidelines\n\n### Do ✅\n\n- Use semantic token names (e.g., `color-bg-surface`, not `color-gray-50`)\n- Use tokens consistently across all components\n- Update tokens in Figma first, then sync\n- Group related token changes in a single PR\n\n### Don't ❌\n\n- Hard-code color/spacing values in components\n- Mix semantic and literal naming (e.g., `color-blue-primary`)\n- Skip validation before committing\n- Make large token changes without testing\n\n## Validation\n\nToken changes are validated via:\n\n- Build failures if Style Dictionary transformation fails\n- Manual testing in Storybook\n- Manual review of token changes in PRs\n\n> **Note**: Automated validation scripts for breaking changes and required tokens can be added in the future if needed.\n\n## Architecture\n\n```\nFigma Variables (via Figma Tokens Plugin)\n      ↓\n  tokens.json (raw Figma format)\n      ↓\n  token-transformer (resolves references)\n      ↓\n  tokens-transformed.json\n      ↓\nStyle Dictionary (config.js)\n      ↓\n  dist/tokens.css (CSS variables)\n  dist/tokens.js (JavaScript)\n```\n\n## Dependencies\n\n- [Style Dictionary](https://amzn.github.io/style-dictionary) v4 - Token transformation\n- [token-transformer](https://www.npmjs.com/package/token-transformer) - Figma token format conversion\n- [Figma Tokens Plugin](https://docs.tokens.studio/) - Figma sync\n\n## Related Packages\n\n- `@aruuri/design-system` - Uses these tokens for all components\n- `apps/web` - Imports tokens via Tailwind config\n\n## License\n\nPrivate - Aruuri Platform\n","readmeFilename":"README.md"}