npm package: @itzcull/tokens
Description: design token libraries for itzcull's projects
Author: Will Cullen
Latest version: 0.0.2

# @itzcull/tokens

A comprehensive design token system supporting multiple CSS frameworks and use cases.

## Overview

This monorepo contains design tokens organized by use case and CSS framework, following the pattern `@itzcull/tokens/{library}/{framework}`.

## Package Structure

### Marketing/Landing Page Tokens
- `@itzcull/tokens-marketing-tailwindcss` - Marketing tokens for TailwindCSS
- `@itzcull/tokens-marketing-unocss` - Marketing tokens for UnoCSS

### Application/SaaS Tokens
- `@itzcull/tokens-app-tailwindcss` - Application tokens for TailwindCSS
- `@itzcull/tokens-app-unocss` - Application tokens for UnoCSS

### Agency Tokens
- `@itzcull/tokens-agency-tailwindcss` - Agency tokens for TailwindCSS
- `@itzcull/tokens-agency-unocss` - Agency tokens for UnoCSS

### Info Product Tokens
- `@itzcull/tokens-info-product-tailwindcss` - Info product tokens for TailwindCSS
- `@itzcull/tokens-info-product-unocss` - Info product tokens for UnoCSS

### Documentation Site Tokens
- `@itzcull/tokens-docs-site-tailwindcss` - Documentation tokens for TailwindCSS
- `@itzcull/tokens-docs-site-unocss` - Documentation tokens for UnoCSS

### Brainwave Tokens (First Implementation)
- `@itzcull/tokens-brainwave-unocss` - Brainwave design system for UnoCSS ✅
- `@itzcull/tokens-brainwave-tailwindcss` - Brainwave design system for TailwindCSS (Coming Soon)

## Quick Start

### Brainwave UnoCSS (Available Now)

```bash
npm install @itzcull/tokens-brainwave-unocss
```

```ts
import { BrainwaveUnoCSS } from '@itzcull/tokens-brainwave-unocss'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    BrainwaveUnoCSS(),
  ],
})
```

## Design System Features

Each token package includes:

- **Color Palettes**: Comprehensive color scales with semantic naming
- **Typography**: Font families, sizes, weights, and line heights
- **Spacing**: Consistent spacing scale for margins, padding, and gaps
- **Shadows**: Pre-defined shadow utilities
- **Border Radius**: Rounded corner utilities
- **Component Shortcuts**: Common UI component classes
- **Custom Utilities**: Framework-specific utility classes
- **Animations**: Built-in animation presets

## Usage Guides

Each package includes:

- 📖 **Developer Documentation**: Installation and usage instructions
- 🎨 **Design Guidelines**: Color usage, typography hierarchy, spacing rules
- 🤖 **LLM Integration**: Structured token information for AI-assisted development
- 🎯 **Figma Integration**: Links to corresponding Figma design libraries

## Development

This is a pnpm workspace. To get started:

```bash
# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

# Lint code
pnpm lint
```

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

## Roadmap

- [x] Brainwave UnoCSS implementation
- [ ] Brainwave TailwindCSS implementation
- [ ] Marketing token packages
- [ ] Application token packages
- [ ] Agency token packages
- [ ] Info product token packages
- [ ] Documentation site token packages
- [ ] Sprinkles support exploration

## License

MIT