{"_id":"@archzos/tokens","name":"@archzos/tokens","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@archzos/tokens","version":"1.0.0","description":"Universal design tokens for Archzos design system - single source of truth for all platforms","main":"dist/index.js","types":"dist/index.d.ts","bin":{"archzos-tokens":"dist/cli.js"},"scripts":{"build":"tsc","export:all":"node dist/cli.js export --all","export:css":"node dist/cli.js export --format css","export:dart":"node dist/cli.js export --format dart","export:swift":"node dist/cli.js export --format swift","export:kotlin":"node dist/cli.js export --format kotlin","export:json":"node dist/cli.js export --format json"},"keywords":["design-tokens","design-system","archzos","multiplatform","flutter","react-native","swift","kotlin"],"author":{"name":"archzos"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/archzos/archzos-ui.git","directory":"packages/tokens"},"devDependencies":{"@types/node":"^20.0.0","typescript":"^5.0.0"},"publishConfig":{"access":"public"},"_id":"@archzos/tokens@1.0.0","gitHead":"45414894bf761a94c76b98b800cba39a6efdc971","bugs":{"url":"https://github.com/archzos/archzos-ui/issues"},"homepage":"https://github.com/archzos/archzos-ui#readme","_nodeVersion":"24.10.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-JvTvVrQoSUWphjw//uRLuvy5/NxNTbAyvjgSl4Qxl4DH636su/Sh75DQyD3N4wumektGpNAQgt3rxCHXh88C5Q==","shasum":"5d3396e1fb40cd539db2ffeec64ff0a45c84480f","tarball":"https://registry.npmjs.org/@archzos/tokens/-/tokens-1.0.0.tgz","fileCount":25,"unpackedSize":65246,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCO1QeLfAP6spvOkq9cFaXSAojOPPXmlliv0asB/U5UlAIgJpes2v3VW7iiGUkaewlRiXltjJskvZSM88MyoBfQTlY="}]},"_npmUser":{"name":"archzos-org","email":"anuj@archzos.com"},"directories":{},"maintainers":[{"name":"archzos-org","email":"anuj@archzos.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_1.0.0_1773864116721_0.3967190472691837"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-18T20:01:56.618Z","1.0.0":"2026-03-18T20:01:56.881Z","modified":"2026-03-18T20:01:57.091Z"},"maintainers":[{"name":"archzos-org","email":"anuj@archzos.com"}],"description":"Universal design tokens for Archzos design system - single source of truth for all platforms","homepage":"https://github.com/archzos/archzos-ui#readme","keywords":["design-tokens","design-system","archzos","multiplatform","flutter","react-native","swift","kotlin"],"repository":{"type":"git","url":"git+https://github.com/archzos/archzos-ui.git","directory":"packages/tokens"},"author":{"name":"archzos"},"bugs":{"url":"https://github.com/archzos/archzos-ui/issues"},"license":"MIT","readme":"# @archzos/tokens\n\nUniversal design token system for the Archzos design system. Single source of truth for colors, typography, spacing, and more across all platforms.\n\n[![npm version](https://img.shields.io/npm/v/@archzos/tokens.svg)](https://www.npmjs.com/package/@archzos/tokens)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Installation\n\n```bash\nnpm install @archzos/tokens\n# or\nyarn add @archzos/tokens\n# or\npnpm add @archzos/tokens\n```\n\n## Usage\n\n### JavaScript/TypeScript\n\n```javascript\nimport { colors, typography, spacing, radius } from '@archzos/tokens';\n\n// Use tokens in your styles\nconst styles = {\n  color: colors.blue500,\n  fontSize: typography.lg,\n  padding: spacing.md,\n  borderRadius: radius.lg\n};\n```\n\n### CLI Tool\n\nExport tokens to any platform format:\n\n```bash\n# Export to specific format\nnpx @archzos/tokens export --format css\nnpx @archzos/tokens export --format dart\nnpx @archzos/tokens export --format swift\nnpx @archzos/tokens export --format kotlin\n\n# Export all formats at once\nnpx @archzos/tokens export --all\n\n# Validate token parity across platforms\nnpx @archzos/tokens validate\n```\n\n## Supported Platforms\n\n| Platform | Format | Usage |\n|----------|--------|-------|\n| **Web (CSS)** | CSS Variables | `var(--az-color-blue500)` |\n| **Flutter** | Dart Constants | `AzTokens.Colors.blue500` |\n| **iOS/WatchOS/tvOS** | Swift | `AzTokens.Colors.blue500` |\n| **Android/WearOS** | Kotlin | `AzTokens.Colors.blue500` |\n| **React Native** | JSON/JS | `tokens.colors.blue500` |\n| **Web (SCSS)** | SCSS Variables | `$az-color-blue500` |\n| **Android (XML)** | Resources | `@color/az_blue500` |\n\n## Token Categories\n\n### Colors (29 tokens)\n- Backgrounds: `bg`, `bgSecondary`, `bgTertiary`, `bgDark`\n- Text: `text`, `textSecondary`, `textTertiary`, `textInverse`\n- Borders: `border`, `borderLight`, `borderDark`\n- Semantic: `blue500`, `green500`, `red500`, `yellow500`\n- Grays: `gray50` through `gray900`\n\n### Typography (18 tokens)\n- Font families: `fontFamily`, `fontFamilyMono`\n- Font sizes: `xs` (12px) through `9xl` (128px)\n- Font weights: `thin` (100) through `black` (900)\n- Line heights: `tight` (1.2), `normal` (1.5), `relaxed` (1.6)\n\n### Spacing (13 tokens)\n- Scale: `0` (0px) through `96` (384px)\n- Common: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`\n\n### Border Radius (7 tokens)\n- Scale: `none` (0) through `full` (9999px)\n- Common: `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`\n\n### Shadows (5 tokens)\n- Elevations: `none`, `sm`, `md`, `lg`, `xl`\n\n### Z-Index (6 tokens)\n- Layers: `base` (0) through `tooltip` (1000)\n\n## API\n\n### TokenCompiler\n\n```javascript\nimport { TokenCompiler } from '@archzos/tokens';\n\nconst compiler = new TokenCompiler();\n\n// Export tokens\nawait compiler.export('css');\nawait compiler.exportAll();\n\n// Validate token parity\nconst isValid = await compiler.validate();\n```\n\n### Export Functions\n\n```javascript\nimport {\n  toCSSVariables,\n  toDart,\n  toSwift,\n  toKotlin,\n  toJSON,\n  toSCSS,\n  toAndroidXML\n} from '@archzos/tokens';\n\n// Convert tokens to specific format\nconst cssVars = toCSSVariables(tokens);\nconst dartCode = toDart(tokens);\nconst swiftCode = toSwift(tokens);\n```\n\n## Examples\n\n### React Component\n\n```jsx\nimport { colors, spacing, radius, typography } from '@archzos/tokens';\n\nfunction Button({ children }) {\n  return (\n    <button\n      style={{\n        backgroundColor: colors.blue500,\n        color: colors.textInverse,\n        padding: `${spacing.sm}px ${spacing.md}px`,\n        borderRadius: radius.md,\n        fontSize: typography.md,\n        fontWeight: typography.semibold,\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n```\n\n### CSS-in-JS\n\n```javascript\nimport { colors, spacing } from '@archzos/tokens';\n\nconst styles = {\n  container: {\n    backgroundColor: colors.bg,\n    padding: spacing.lg,\n    border: `1px solid ${colors.border}`,\n  },\n};\n```\n\n### Styled Components\n\n```javascript\nimport styled from 'styled-components';\nimport { colors, spacing, radius } from '@archzos/tokens';\n\nconst Card = styled.div`\n  background: ${colors.bg};\n  padding: ${spacing.lg}px;\n  border-radius: ${radius.lg}px;\n  box-shadow: ${shadows.md};\n`;\n```\n\n## Platform Integration\n\n### Flutter Setup\n\n```bash\n# Export tokens to Dart\nnpx @archzos/tokens export --format dart --output lib/tokens.dart\n```\n\n```dart\nimport 'package:your_app/tokens.dart';\n\nContainer(\n  color: AzTokens.Colors.blue500,\n  padding: EdgeInsets.all(AzTokens.Spacing.md),\n)\n```\n\n### Swift/iOS Setup\n\n```bash\n# Export tokens to Swift\nnpx @archzos/tokens export --format swift --output Sources/Tokens.swift\n```\n\n```swift\nimport SwiftUI\n\nText(\"Hello\")\n  .foregroundColor(AzTokens.Colors.blue500)\n  .padding(AzTokens.Spacing.md)\n```\n\n### Android/Kotlin Setup\n\n```bash\n# Export tokens to Kotlin\nnpx @archzos/tokens export --format kotlin --output src/main/java/Tokens.kt\n```\n\n```kotlin\nText(\n  text = \"Hello\",\n  color = AzTokens.Colors.blue500,\n  modifier = Modifier.padding(AzTokens.Spacing.md.dp)\n)\n```\n\n## Configuration\n\nCreate `.archzosrc.json` in your project root:\n\n```json\n{\n  \"tokens\": {\n    \"output\": \"./src/design-tokens\",\n    \"formats\": [\"css\", \"json\"],\n    \"customPrefix\": \"my-app\"\n  }\n}\n```\n\n## Contributing\n\nTokens are the foundation of the Archzos design system. Changes to token values affect all platforms and should be made carefully.\n\n1. Edit tokens in `src/tokens.ts`\n2. Run `pnpm build` to compile\n3. Run `pnpm export:all` to generate all formats\n4. Run `pnpm validate` to ensure parity\n5. Submit PR with rationale for changes\n\n## License\n\nMIT © [archzos](https://github.com/archzos)","readmeFilename":"README.md","_rev":"1-eab29aeb213c89d4b2109737053f559b"}