npm package: @kodexalabs/asd-tokens
Description: Kodexalabs Design System - Fonts, tokens, and utilities with advanced theme system
Author: Kodexalabs
Latest version: 3.8.0
Deprecated: This package has been consolidated into @kodexalabs/kdx-kit. Please migrate: npm install @kodexalabs/kdx-kit

# @kodexalabs/asd-tokens

**Kodexalabs Design System** - The canonical source for fonts, design tokens, and styling utilities.

## Features

- 🎨 **Complete Power Grotesk Font Family** - 16 weights and styles (woff, woff2)
- 🎯 **Design Tokens** - Colors, typography, spacing, and more
- 📐 **Rule of 8 Spacing** - Consistent 8px-based spacing scale
- 🔤 **Fluid Typography** - Responsive type scale using CSS clamp()
- 🌗 **Dark Mode Support** - Built-in light and dark theme variants
- 🎭 **Multiple Export Formats** - TypeScript, CSS variables, Tailwind plugin
- ⚡ **Tree-shakeable** - Import only what you need

## Installation

```bash
npm install @kodexalabs/asd-tokens
```

## Usage

### Fonts

The Power Grotesk font family is included in the `fonts/` directory.

**In CSS:**
```css
@font-face {
  font-family: 'Power Grotesk';
  src: url('node_modules/@kodexalabs/asd-tokens/fonts/PowerGrotesk-Regular.woff2') format('woff2'),
       url('node_modules/@kodexalabs/asd-tokens/fonts/PowerGrotesk-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
```

**Available Weights:**
- UltraLight (200)
- Light (300)
- Regular (400)
- Medium (500)
- Bold (700)
- Heavy (800)
- Black (900)
- UltraBold (950)

Each weight includes italic variants.

### Design Tokens (TypeScript/JavaScript)

```typescript
import { designTokens, colors, typography } from '@kodexalabs/asd-tokens';

// Use tokens directly
const primaryColor = colors.brand.white.hsl; // 'hsl(0 0% 100%)'
const bodyFont = typography.fontFamily.body;
const spacing = designTokens.spacing[4]; // '2rem' (32px)
```

### CSS Variables

```typescript
import { applyCSSVarsToDocument } from '@kodexalabs/asd-tokens/css';

// Apply tokens as CSS variables to document
applyCSSVarsToDocument('light'); // or 'dark'

// Use in your CSS
.button {
  background: var(--color-brand-white);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  font-family: var(--typography-font-family-sans);
}
```

### Tailwind CSS Plugin

```javascript
// tailwind.config.js
import kodexaTokens from '@kodexalabs/asd-tokens/tailwind';

export default {
  plugins: [kodexaTokens],
};
```

Now use tokens in your Tailwind classes:

```jsx
<button className="bg-white text-white px-4 py-2 rounded-md shadow-glow">
  Click me
</button>

<div className="text-headline font-bold leading-tight">
  Heading
</div>
```

## Token Structure

### Colors
- **Brand**: white, success (lime), muted (gray), logo gradients
- **Semantic**: background, foreground, border, input, ring
- **State**: success, warning, error, info

### Typography
- **Font Families**: Power Grotesk (sans), JetBrains Mono (mono)
- **Font Sizes**: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl
- **Line Heights**: tight, normal, relaxed, loose
- **Font Weights**: 200-950

### Spacing
- **Scale**: 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64
- **Based on**: 8px grid (0.5 = 4px, 1 = 8px, 2 = 16px, etc.)

### Border Radius
- **Sizes**: sm, md, lg, xl, 2xl, full

### Shadows
- **Types**: sm, md, lg, xl, 2xl, glow (purple), inner

## Development

```bash
# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

# Type check
npm run type-check
```

## License

MIT © Kodexalabs